From 71604ebd5cfc4ffb996cbc47ebe18990759a901e Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 30 Nov 2017 15:12:36 +0000 Subject: [PATCH 01/31] Create uiConfig Pug local; render it in the HTML. --- .../web/app/coffee/infrastructure/ExpressLocals.coffee | 9 +++++++++ services/web/app/views/project/editor.pug | 1 + 2 files changed, 10 insertions(+) diff --git a/services/web/app/coffee/infrastructure/ExpressLocals.coffee b/services/web/app/coffee/infrastructure/ExpressLocals.coffee index fa9a223ad7..318513e5dc 100644 --- a/services/web/app/coffee/infrastructure/ExpressLocals.coffee +++ b/services/web/app/coffee/infrastructure/ExpressLocals.coffee @@ -290,3 +290,12 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)-> res.locals.moduleIncludes = Modules.moduleIncludes res.locals.moduleIncludesAvailable = Modules.moduleIncludesAvailable next() + + webRouter.use (req, res, next) -> + isOl = (Settings.brandPrefix == 'ol-') + res.locals.uiConfig = + defaultResizerSizeOpen : if isOl then 2 else 24 + defaultResizerSizeClosed : if isOl then 2 else 24 + chatResizerSizeOpen : if isOl then 2 else 6 + chatResizerSizeClosed : 0 + next() diff --git a/services/web/app/views/project/editor.pug b/services/web/app/views/project/editor.pug index 1e1f2c982b..9d930776a6 100644 --- a/services/web/app/views/project/editor.pug +++ b/services/web/app/views/project/editor.pug @@ -157,6 +157,7 @@ block requirejs window.aceFingerprint = "#{fingerprint(jsPath + lib('ace') + '/ace.js')}" window.aceWorkerPath = "#{aceWorkerPath}"; window.pdfCMapsPath = "#{pdfCMapsPath}" + window.uiConfig = JSON.parse('!{JSON.stringify(uiConfig).replace(/\//g, "\\/")}'); script( data-main=buildJsPath("ide.js", {fingerprint:false}), From 024741ac51c536ba24f9fa2113f96fcb2193e9af Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 30 Nov 2017 15:24:10 +0000 Subject: [PATCH 02/31] Correct chat resizer values. --- services/web/app/coffee/infrastructure/ExpressLocals.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/web/app/coffee/infrastructure/ExpressLocals.coffee b/services/web/app/coffee/infrastructure/ExpressLocals.coffee index 318513e5dc..ba4fe961e6 100644 --- a/services/web/app/coffee/infrastructure/ExpressLocals.coffee +++ b/services/web/app/coffee/infrastructure/ExpressLocals.coffee @@ -296,6 +296,6 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)-> res.locals.uiConfig = defaultResizerSizeOpen : if isOl then 2 else 24 defaultResizerSizeClosed : if isOl then 2 else 24 - chatResizerSizeOpen : if isOl then 2 else 6 + chatResizerSizeOpen : if isOl then 2 else 12 chatResizerSizeClosed : 0 next() From 826f49b9a4b9fe1ea233e57f72d1bab2524069e5 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 30 Nov 2017 15:24:39 +0000 Subject: [PATCH 03/31] Add default resizer values to layout directive. --- services/web/public/coffee/ide/directives/layout.coffee | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/services/web/public/coffee/ide/directives/layout.coffee b/services/web/public/coffee/ide/directives/layout.coffee index 21d9230b52..d4e98fb0d3 100644 --- a/services/web/public/coffee/ide/directives/layout.coffee +++ b/services/web/public/coffee/ide/directives/layout.coffee @@ -11,12 +11,12 @@ define [ if attrs.spacingOpen? spacingOpen = parseInt(attrs.spacingOpen, 10) else - spacingOpen = 24 + spacingOpen = window.uiConfig.defaultResizerSizeOpen if attrs.spacingClosed? spacingClosed = parseInt(attrs.spacingClosed, 10) else - spacingClosed = 24 + spacingClosed = window.uiConfig.defaultResizerSizeClosed options = spacing_open: spacingOpen From 3a959cccfd6b020710656d7355e4c63076f458b9 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 30 Nov 2017 15:24:48 +0000 Subject: [PATCH 04/31] Use custom chat resizer values. --- services/web/app/views/project/editor.pug | 4 ++-- services/web/public/coffee/ide.coffee | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/services/web/app/views/project/editor.pug b/services/web/app/views/project/editor.pug index 9d930776a6..a5cb46819f 100644 --- a/services/web/app/views/project/editor.pug +++ b/services/web/app/views/project/editor.pug @@ -43,8 +43,8 @@ block content #chat-wrapper.full-size( layout="chat", - spacing-open="12", - spacing-closed="0", + spacing-open="{{ui.chatResizerSizeOpen}}", + spacing-closed="{{ui.chatResizerSizeClosed}}", initial-size-east="250", init-closed-east="true", open-east="ui.chatOpen", diff --git a/services/web/public/coffee/ide.coffee b/services/web/public/coffee/ide.coffee index 728300456c..c934f6297b 100644 --- a/services/web/public/coffee/ide.coffee +++ b/services/web/public/coffee/ide.coffee @@ -76,6 +76,8 @@ define [ pdfWidth: 0 reviewPanelOpen: localStorage("ui.reviewPanelOpen.#{window.project_id}") miniReviewPanelVisible: false + chatResizerSizeOpen: window.uiConfig.chatResizerSizeOpen + chatResizerSizeClosed: window.uiConfig.chatResizerSizeClosed } $scope.onboarding = { autoCompile: if window.showAutoCompileOnboarding then 'unseen' else 'dismissed' From ce3e410250136ee0d75885a9c7be95092c76a3f8 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 30 Nov 2017 17:00:25 +0000 Subject: [PATCH 05/31] Configure resizer colors. --- .../web/public/stylesheets/app/editor.less | 25 ++++++++- .../stylesheets/core/_common-variables.less | 52 ++++++++++--------- .../public/stylesheets/core/ol-variables.less | 2 + 3 files changed, 53 insertions(+), 26 deletions(-) diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index e37d829710..3f735e4e5f 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -261,9 +261,9 @@ } } -.ui-layout-resizer { +.ui-layout-resizer when (@is-overleaf = false) { width: 6px; - background-color: #f4f4f4; + background-color: @editor-resizer-bg-color; border-left: 1px solid @editor-border-color; border-right: 1px solid @editor-border-color; .ui-layout-toggler { @@ -282,6 +282,27 @@ } } } + +.ui-layout-resizer when (@is-overleaf = true) { + background-color: @editor-resizer-bg-color; + + // .ui-layout-toggler { + // color: #999; + // font-family: FontAwesome; + // font-style: normal; + // font-weight: normal; + // line-height: 1; + // -webkit-font-smoothing: antialiased; + // -moz-osx-font-smoothing: grayscale; + // font-size: 16px !important; + // line-height: 50px; + // &:hover { + // background-color: #ddd; + // color: #333; + // } + // } +} + .ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed { .ui-layout-toggler { &:before { diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 47030d08ff..11d3e3681c 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -889,32 +889,36 @@ @footer-padding : 2em; // Editor header -@toolbar-header-bg-color : transparent; -@toolbar-header-shadow : 0 0 2px #ccc; -@toolbar-btn-color : @link-color; -@toolbar-btn-hover-color : @link-hover-color; -@toolbar-btn-hover-bg-color : darken(white, 10%); -@toolbar-btn-hover-text-shadow : 0 1px 0 rgba(0, 0, 0, 0.15); -@toolbar-btn-active-color : white; -@toolbar-btn-active-bg-color : @link-color; -@toolbar-btn-active-shadow : inset 0 3px 5px rgba(0, 0, 0, 0.225); -@toolbar-alt-bg-color : #fafafa; -@toolbar-icon-btn-color : @gray-light; -@toolbar-icon-btn-hover-color : @gray-dark; -@toolbar-icon-btn-hover-shadow : 0 1px 0 rgba(0, 0, 0, 0.25); -@toolbar-border-bottom : 1px solid @toolbar-border-color; +@toolbar-header-bg-color : transparent; +@toolbar-header-shadow : 0 0 2px #ccc; +@toolbar-btn-color : @link-color; +@toolbar-btn-hover-color : @link-hover-color; +@toolbar-btn-hover-bg-color : darken(white, 10%); +@toolbar-btn-hover-text-shadow : 0 1px 0 rgba(0, 0, 0, 0.15); +@toolbar-btn-active-color : white; +@toolbar-btn-active-bg-color : @link-color; +@toolbar-btn-active-shadow : inset 0 3px 5px rgba(0, 0, 0, 0.225); +@toolbar-alt-bg-color : #fafafa; +@toolbar-icon-btn-color : @gray-light; +@toolbar-icon-btn-hover-color : @gray-dark; +@toolbar-icon-btn-hover-shadow : 0 1px 0 rgba(0, 0, 0, 0.25); +@toolbar-border-bottom : 1px solid @toolbar-border-color; // Editor file-tree -@file-tree-bg : transparent; -@file-tree-item-color : @gray-darker; -@file-tree-item-toggle-color : @gray; -@file-tree-item-icon-color : @gray-light; -@file-tree-item-input-color : inherit; -@file-tree-item-folder-color : lighten(desaturate(@link-color, 10%), 5%); -@file-tree-item-hover-bg : @gray-lightest; -@file-tree-item-selected-bg : transparent; -@file-tree-multiselect-bg : lighten(@brand-info, 40%); -@file-tree-multiselect-hover-bg : lighten(@brand-info, 30%); +@file-tree-bg : transparent; +@file-tree-item-color : @gray-darker; +@file-tree-item-toggle-color : @gray; +@file-tree-item-icon-color : @gray-light; +@file-tree-item-input-color : inherit; +@file-tree-item-folder-color : lighten(desaturate(@link-color, 10%), 5%); +@file-tree-item-hover-bg : @gray-lightest; +@file-tree-item-selected-bg : transparent; +@file-tree-multiselect-bg : lighten(@brand-info, 40%); +@file-tree-multiselect-hover-bg : lighten(@brand-info, 30%); + +// Editor resizers +@editor-resizer-bg-color : #F4F4F4; + // Tags @tag-border-radius : 0.25em; @tag-bg-color : @label-default-bg; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 4911a9d2c4..4cf789c666 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -184,6 +184,8 @@ @file-tree-multiselect-bg : @ol-blue; @file-tree-multiselect-hover-bg : @ol-dark-blue; @file-tree-droppable-bg-color : tint(@ol-green, 5%); +// Editor resizers +@editor-resizer-bg-color : @ol-blue-gray-6; //== Colors // //## Gray and brand colors for use across Bootstrap. From cd6b51a1f6474cc915be10e45d495af1f6a659d8 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 30 Nov 2017 17:00:42 +0000 Subject: [PATCH 06/31] Increase v2 resizer hit area. --- services/web/public/stylesheets/app/editor.less | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index 3f735e4e5f..56c620c16d 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -284,7 +284,19 @@ } .ui-layout-resizer when (@is-overleaf = true) { - background-color: @editor-resizer-bg-color; + @extra-hit-area: 8px; + margin-left: -(@extra-hit-area) !important; + margin-right: -(@extra-hit-area - 1px) !important; + padding-left: @extra-hit-area !important; + padding-right: @extra-hit-area !important; + box-sizing: content-box; + background-image: linear-gradient(90deg, + transparent, + transparent (@extra-hit-area - 1px), + @editor-resizer-bg-color (@extra-hit-area - 1px), + @editor-resizer-bg-color (@extra-hit-area + 1px), + transparent (@extra-hit-area + 1px), + transparent); // .ui-layout-toggler { // color: #999; From aeffe1cea9b80937b3d3d6340cf63555c27d08e1 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 1 Dec 2017 11:22:12 +0000 Subject: [PATCH 07/31] Style resizers while dragging. --- .../web/public/stylesheets/app/editor.less | 2 +- .../stylesheets/core/_common-variables.less | 4 +- .../public/stylesheets/core/ol-variables.less | 56 ++++++++++--------- 3 files changed, 32 insertions(+), 30 deletions(-) diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index 56c620c16d..e280f92779 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -330,7 +330,7 @@ } } .ui-layout-resizer-dragging { - background-color: #ddd; + background-color: @editor-resizer-bg-color-dragging; } .context-menu { diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 11d3e3681c..c5bd633b15 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -917,8 +917,8 @@ @file-tree-multiselect-hover-bg : lighten(@brand-info, 30%); // Editor resizers -@editor-resizer-bg-color : #F4F4F4; - +@editor-resizer-bg-color : #F4F4F4; +@editor-resizer-bg-color-dragging : #ddd; // Tags @tag-border-radius : 0.25em; @tag-bg-color : @label-default-bg; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 4cf789c666..54fdddf309 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -157,35 +157,37 @@ @footer-padding : 2em 0; // Editor header -@toolbar-header-bg-color : @ol-blue-gray-6; -@toolbar-header-shadow : none; -@toolbar-btn-color : #FFF; -@toolbar-btn-hover-color : #FFF; -@toolbar-btn-hover-bg-color : @ol-blue-gray-5; -@toolbar-btn-hover-text-shadow : none; -@toolbar-btn-active-color : #FFF; -@toolbar-btn-active-bg-color : @ol-green; -@toolbar-btn-active-shadow : none; -@toolbar-border-color : @ol-blue-gray-5; -@toolbar-alt-bg-color : @ol-blue-gray-5; -@toolbar-icon-btn-color : #FFF; -@toolbar-icon-btn-hover-color : #FFF; -@toolbar-icon-btn-hover-shadow : none; -@toolbar-border-bottom : 1px solid @toolbar-border-color; +@toolbar-header-bg-color : @ol-blue-gray-6; +@toolbar-header-shadow : none; +@toolbar-btn-color : #FFF; +@toolbar-btn-hover-color : #FFF; +@toolbar-btn-hover-bg-color : @ol-blue-gray-5; +@toolbar-btn-hover-text-shadow : none; +@toolbar-btn-active-color : #FFF; +@toolbar-btn-active-bg-color : @ol-green; +@toolbar-btn-active-shadow : none; +@toolbar-border-color : @ol-blue-gray-5; +@toolbar-alt-bg-color : @ol-blue-gray-5; +@toolbar-icon-btn-color : #FFF; +@toolbar-icon-btn-hover-color : #FFF; +@toolbar-icon-btn-hover-shadow : none; +@toolbar-border-bottom : 1px solid @toolbar-border-color; // Editor file-tree -@file-tree-bg : @ol-blue-gray-4; -@file-tree-item-color : #FFF; -@file-tree-item-input-color : @ol-blue-gray-5; -@file-tree-item-toggle-color : @ol-blue-gray-2; -@file-tree-item-icon-color : @ol-blue-gray-2; -@file-tree-item-folder-color : @ol-blue-gray-2; -@file-tree-item-hover-bg : @ol-blue-gray-5; -@file-tree-item-selected-bg : @ol-green; -@file-tree-multiselect-bg : @ol-blue; -@file-tree-multiselect-hover-bg : @ol-dark-blue; -@file-tree-droppable-bg-color : tint(@ol-green, 5%); +@file-tree-bg : @ol-blue-gray-4; +@file-tree-item-color : #FFF; +@file-tree-item-input-color : @ol-blue-gray-5; +@file-tree-item-toggle-color : @ol-blue-gray-2; +@file-tree-item-icon-color : @ol-blue-gray-2; +@file-tree-item-folder-color : @ol-blue-gray-2; +@file-tree-item-hover-bg : @ol-blue-gray-5; +@file-tree-item-selected-bg : @ol-green; +@file-tree-multiselect-bg : @ol-blue; +@file-tree-multiselect-hover-bg : @ol-dark-blue; +@file-tree-droppable-bg-color : tint(@ol-green, 5%); // Editor resizers -@editor-resizer-bg-color : @ol-blue-gray-6; +@editor-resizer-bg-color : @ol-blue-gray-6; +@editor-resizer-bg-color-dragging : transparent; + //== Colors // //## Gray and brand colors for use across Bootstrap. From 9a073cdaf06c1f7145a8f73cdb3fb64c2e6970ff Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Fri, 1 Dec 2017 16:58:19 +0000 Subject: [PATCH 08/31] Add link to V1 dash --- services/web/app/views/project/list.pug | 4 +++ .../public/stylesheets/app/project-list.less | 30 ++++++++++++++++++- 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/services/web/app/views/project/list.pug b/services/web/app/views/project/list.pug index deecc46911..48d2cf205a 100644 --- a/services/web/app/views/project/list.pug +++ b/services/web/app/views/project/list.pug @@ -63,6 +63,10 @@ block content aside.project-list-sidebar.col-md-2.col-xs-3 include ./list/side-bar + .project-list-sidebar-v1-link.col-md-2.col-xs-3 + span Want to go back to the V1 dashboard? + a.btn.btn-default(href=settings.overleaf.host + "/dash") Go back to V1 + .project-list-main.col-md-10.col-xs-9 include ./list/notifications include ./list/project-list diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index 1ca170ff89..55dcd30643 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -1,4 +1,5 @@ @announcements-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); +@v1-dash-link-height: 110px; @keyframes pulse { 0% { @@ -55,7 +56,7 @@ } .project-list-sidebar when (@is-overleaf) { - height: 100%; + height: calc(~"100% -" @v1-dash-link-height); overflow-x: hidden; overflow-y: auto; -ms-overflow-style: -ms-autohiding-scrollbar; @@ -110,6 +111,33 @@ } } +.project-list-sidebar-v1-link { + position: absolute; + bottom: 0; + height: @v1-dash-link-height; + background-color: @sidebar-hover-bg; // TODO: Fix var names + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + color: white; +} + + .project-list-sidebar-v1-link a { + display: block; + margin-left: auto; + margin-right: auto; + margin-top: 4px; + padding-top: 0; + padding-bottom: 0; + background-color: @sidebar-bg; // TODO: Fix var names + color: #fff; + } + + .project-list-sidebar-v1-link a:hover { + background-color: @sidebar-active-bg; // TODO: Fix var names + } + .userNotifications { ul { margin-bottom:0px; From 7f622e2e6b49220666a9423bbf75af512a09cd86 Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Fri, 1 Dec 2017 17:14:53 +0000 Subject: [PATCH 09/31] Conditionally show V1 dash link --- .../app/coffee/Features/Project/ProjectController.coffee | 1 + services/web/app/views/project/list.pug | 7 ++++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/services/web/app/coffee/Features/Project/ProjectController.coffee b/services/web/app/coffee/Features/Project/ProjectController.coffee index 9d9b7d9a13..38b2eb66c3 100644 --- a/services/web/app/coffee/Features/Project/ProjectController.coffee +++ b/services/web/app/coffee/Features/Project/ProjectController.coffee @@ -182,6 +182,7 @@ module.exports = ProjectController = hasSubscription: results.hasSubscription[0] isShowingV1Projects: results.v1Projects? noV1Connection: results.v1Projects?.noConnection + showV1DashLink: true # TODO: false if SL } if Settings?.algolia?.app_id? and Settings?.algolia?.read_only_api_key? diff --git a/services/web/app/views/project/list.pug b/services/web/app/views/project/list.pug index 48d2cf205a..6702527612 100644 --- a/services/web/app/views/project/list.pug +++ b/services/web/app/views/project/list.pug @@ -63,9 +63,10 @@ block content aside.project-list-sidebar.col-md-2.col-xs-3 include ./list/side-bar - .project-list-sidebar-v1-link.col-md-2.col-xs-3 - span Want to go back to the V1 dashboard? - a.btn.btn-default(href=settings.overleaf.host + "/dash") Go back to V1 + if showV1DashLink + .project-list-sidebar-v1-link.col-md-2.col-xs-3 + span Want to go back to the V1 dashboard? + a.btn.btn-default(href=settings.overleaf.host + "/dash") Go back to V1 .project-list-main.col-md-10.col-xs-9 include ./list/notifications From d6e50ac940f33c7d140d21bd19c00420292df476 Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Fri, 1 Dec 2017 17:16:37 +0000 Subject: [PATCH 10/31] Extract var to allowed to be overridden --- services/web/public/stylesheets/app/project-list.less | 1 - services/web/public/stylesheets/core/_common-variables.less | 1 + services/web/public/stylesheets/core/ol-variables.less | 1 + 3 files changed, 2 insertions(+), 1 deletion(-) diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index 55dcd30643..a3ad20dd94 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -1,5 +1,4 @@ @announcements-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); -@v1-dash-link-height: 110px; @keyframes pulse { 0% { diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 0b5d3bf744..4defe7bc9f 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -852,6 +852,7 @@ @sidebar-active-bg : @link-color; @sidebar-hover-bg : transparent; @sidebar-hover-text-decoration : underline; +@v1-dash-link-height : 0; @folders-menu-margin : 0; @folders-menu-line-height : 1.2; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 43646ec542..b72143c29b 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -110,6 +110,7 @@ @sidebar-active-bg : @ol-blue-gray-6; @sidebar-hover-bg : @ol-blue-gray-4; @sidebar-hover-text-decoration : none; +@v1-dash-link-height : 110px; @folders-menu-margin : 0 -(@grid-gutter-width / 2); @folders-menu-line-height : @structured-list-line-height; From e7f83c73ae58f83acb5d3258fc9bb5ea4a5ed859 Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Fri, 1 Dec 2017 17:53:47 +0000 Subject: [PATCH 11/31] Extract v1 dash link styles to file so can define OL only vars --- .../stylesheets/_ol_style_includes.less | 1 + .../public/stylesheets/app/project-list.less | 27 ------------------- .../stylesheets/app/sidebar-v1-dash-link.less | 26 ++++++++++++++++++ .../public/stylesheets/core/ol-variables.less | 3 +++ services/web/public/stylesheets/ol-style.less | 3 ++- 5 files changed, 32 insertions(+), 28 deletions(-) create mode 100644 services/web/public/stylesheets/_ol_style_includes.less create mode 100644 services/web/public/stylesheets/app/sidebar-v1-dash-link.less diff --git a/services/web/public/stylesheets/_ol_style_includes.less b/services/web/public/stylesheets/_ol_style_includes.less new file mode 100644 index 0000000000..c8505c2e56 --- /dev/null +++ b/services/web/public/stylesheets/_ol_style_includes.less @@ -0,0 +1 @@ +@import "app/sidebar-v1-dash-link.less"; diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index a3ad20dd94..9fe3dc2238 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -110,33 +110,6 @@ } } -.project-list-sidebar-v1-link { - position: absolute; - bottom: 0; - height: @v1-dash-link-height; - background-color: @sidebar-hover-bg; // TODO: Fix var names - text-align: center; - display: flex; - flex-direction: column; - justify-content: center; - color: white; -} - - .project-list-sidebar-v1-link a { - display: block; - margin-left: auto; - margin-right: auto; - margin-top: 4px; - padding-top: 0; - padding-bottom: 0; - background-color: @sidebar-bg; // TODO: Fix var names - color: #fff; - } - - .project-list-sidebar-v1-link a:hover { - background-color: @sidebar-active-bg; // TODO: Fix var names - } - .userNotifications { ul { margin-bottom:0px; diff --git a/services/web/public/stylesheets/app/sidebar-v1-dash-link.less b/services/web/public/stylesheets/app/sidebar-v1-dash-link.less new file mode 100644 index 0000000000..008d47662e --- /dev/null +++ b/services/web/public/stylesheets/app/sidebar-v1-dash-link.less @@ -0,0 +1,26 @@ +.project-list-sidebar-v1-link { + position: absolute; + bottom: 0; + height: @v1-dash-link-height; + background-color: @v1-dash-link-bg; + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + color: white; +} + + .project-list-sidebar-v1-link a { + display: block; + margin-left: auto; + margin-right: auto; + margin-top: 4px; + padding-top: 0; + padding-bottom: 0; + background-color: @v1-dash-link-btn-bg; + color: #fff; + } + + .project-list-sidebar-v1-link a:hover { + background-color: @v1-dash-link-btn-hover-bg; + } \ No newline at end of file diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index b72143c29b..49e4196ebf 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -111,6 +111,9 @@ @sidebar-hover-bg : @ol-blue-gray-4; @sidebar-hover-text-decoration : none; @v1-dash-link-height : 110px; +@v1-dash-link-bg : @ol-blue-gray-4; +@v1-dash-link-btn-bg : @ol-blue-gray-5; +@v1-dash-link-btn-hover-bg : @ol-blue-gray-6; @folders-menu-margin : 0 -(@grid-gutter-width / 2); @folders-menu-line-height : @structured-list-line-height; diff --git a/services/web/public/stylesheets/ol-style.less b/services/web/public/stylesheets/ol-style.less index 1e48b7284d..2a9a140611 100644 --- a/services/web/public/stylesheets/ol-style.less +++ b/services/web/public/stylesheets/ol-style.less @@ -1,4 +1,5 @@ // Core variables and mixins @import "core/ol-variables.less"; @import "app/ol-style-guide.less"; -@import "_style_includes.less"; \ No newline at end of file +@import "_style_includes.less"; +@import "_ol_style_includes.less"; \ No newline at end of file From bf23a096442978e383235a8ae1ffce67b1cfe5a1 Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Fri, 1 Dec 2017 17:58:35 +0000 Subject: [PATCH 12/31] Move setting sidebar height to OL only file so var can be moved to specific scope --- services/web/public/stylesheets/app/project-list.less | 1 - .../web/public/stylesheets/app/sidebar-v1-dash-link.less | 6 ++++++ services/web/public/stylesheets/core/_common-variables.less | 1 - services/web/public/stylesheets/core/ol-variables.less | 1 - 4 files changed, 6 insertions(+), 3 deletions(-) diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index 9fe3dc2238..687cd545fc 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -55,7 +55,6 @@ } .project-list-sidebar when (@is-overleaf) { - height: calc(~"100% -" @v1-dash-link-height); overflow-x: hidden; overflow-y: auto; -ms-overflow-style: -ms-autohiding-scrollbar; diff --git a/services/web/public/stylesheets/app/sidebar-v1-dash-link.less b/services/web/public/stylesheets/app/sidebar-v1-dash-link.less index 008d47662e..b297920e5b 100644 --- a/services/web/public/stylesheets/app/sidebar-v1-dash-link.less +++ b/services/web/public/stylesheets/app/sidebar-v1-dash-link.less @@ -1,3 +1,9 @@ +@v1-dash-link-height: 110px; + +.project-list-sidebar { + height: calc(~"100% -" @v1-dash-link-height); +} + .project-list-sidebar-v1-link { position: absolute; bottom: 0; diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 4defe7bc9f..0b5d3bf744 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -852,7 +852,6 @@ @sidebar-active-bg : @link-color; @sidebar-hover-bg : transparent; @sidebar-hover-text-decoration : underline; -@v1-dash-link-height : 0; @folders-menu-margin : 0; @folders-menu-line-height : 1.2; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 49e4196ebf..61c74d0230 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -110,7 +110,6 @@ @sidebar-active-bg : @ol-blue-gray-6; @sidebar-hover-bg : @ol-blue-gray-4; @sidebar-hover-text-decoration : none; -@v1-dash-link-height : 110px; @v1-dash-link-bg : @ol-blue-gray-4; @v1-dash-link-btn-bg : @ol-blue-gray-5; @v1-dash-link-btn-hover-bg : @ol-blue-gray-6; From f5950099110275318d5458f8ddde4c9f62b67111 Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Mon, 4 Dec 2017 11:23:09 +0000 Subject: [PATCH 13/31] Switch to existing v1 dash flag --- .../web/app/coffee/Features/Project/ProjectController.coffee | 1 - services/web/app/views/project/list.pug | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/services/web/app/coffee/Features/Project/ProjectController.coffee b/services/web/app/coffee/Features/Project/ProjectController.coffee index 38b2eb66c3..9d9b7d9a13 100644 --- a/services/web/app/coffee/Features/Project/ProjectController.coffee +++ b/services/web/app/coffee/Features/Project/ProjectController.coffee @@ -182,7 +182,6 @@ module.exports = ProjectController = hasSubscription: results.hasSubscription[0] isShowingV1Projects: results.v1Projects? noV1Connection: results.v1Projects?.noConnection - showV1DashLink: true # TODO: false if SL } if Settings?.algolia?.app_id? and Settings?.algolia?.read_only_api_key? diff --git a/services/web/app/views/project/list.pug b/services/web/app/views/project/list.pug index 6702527612..c1c708de1f 100644 --- a/services/web/app/views/project/list.pug +++ b/services/web/app/views/project/list.pug @@ -63,7 +63,7 @@ block content aside.project-list-sidebar.col-md-2.col-xs-3 include ./list/side-bar - if showV1DashLink + if isShowingV1Projects .project-list-sidebar-v1-link.col-md-2.col-xs-3 span Want to go back to the V1 dashboard? a.btn.btn-default(href=settings.overleaf.host + "/dash") Go back to V1 From a25464d9256654e549ef22415d7cce4174a2a439 Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Mon, 4 Dec 2017 11:34:00 +0000 Subject: [PATCH 14/31] Add check for OL host --- services/web/app/views/project/list.pug | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/web/app/views/project/list.pug b/services/web/app/views/project/list.pug index c1c708de1f..26c2082968 100644 --- a/services/web/app/views/project/list.pug +++ b/services/web/app/views/project/list.pug @@ -63,7 +63,7 @@ block content aside.project-list-sidebar.col-md-2.col-xs-3 include ./list/side-bar - if isShowingV1Projects + if isShowingV1Projects && settings.overleaf && settings.overleaf.host .project-list-sidebar-v1-link.col-md-2.col-xs-3 span Want to go back to the V1 dashboard? a.btn.btn-default(href=settings.overleaf.host + "/dash") Go back to V1 From 1fd518ec5819b50ff8189872bea9bcfa75388535 Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Mon, 4 Dec 2017 12:22:27 +0000 Subject: [PATCH 15/31] Add query param to mark as explicitly using V1 dash --- services/web/app/views/project/list.pug | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/services/web/app/views/project/list.pug b/services/web/app/views/project/list.pug index 26c2082968..ab8d42751c 100644 --- a/services/web/app/views/project/list.pug +++ b/services/web/app/views/project/list.pug @@ -66,7 +66,8 @@ block content if isShowingV1Projects && settings.overleaf && settings.overleaf.host .project-list-sidebar-v1-link.col-md-2.col-xs-3 span Want to go back to the V1 dashboard? - a.btn.btn-default(href=settings.overleaf.host + "/dash") Go back to V1 + a.btn.btn-default(href=settings.overleaf.host + "/dash?remember-dash=1") + | Go back to V1 .project-list-main.col-md-10.col-xs-9 include ./list/notifications From ab78cea48ddb6653c84fd6ac02d3f81b686bcbb7 Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Mon, 4 Dec 2017 12:24:21 +0000 Subject: [PATCH 16/31] Move to sidebar template --- services/web/app/views/project/list.pug | 9 +- .../web/app/views/project/list/side-bar.pug | 275 +++++++++--------- 2 files changed, 142 insertions(+), 142 deletions(-) diff --git a/services/web/app/views/project/list.pug b/services/web/app/views/project/list.pug index ab8d42751c..bcfd7954cb 100644 --- a/services/web/app/views/project/list.pug +++ b/services/web/app/views/project/list.pug @@ -60,14 +60,7 @@ block content .row.project-list-row(ng-cloak) .project-list-container(ng-if="projects.length > 0") - aside.project-list-sidebar.col-md-2.col-xs-3 - include ./list/side-bar - - if isShowingV1Projects && settings.overleaf && settings.overleaf.host - .project-list-sidebar-v1-link.col-md-2.col-xs-3 - span Want to go back to the V1 dashboard? - a.btn.btn-default(href=settings.overleaf.host + "/dash?remember-dash=1") - | Go back to V1 + include ./list/side-bar .project-list-main.col-md-10.col-xs-9 include ./list/notifications diff --git a/services/web/app/views/project/list/side-bar.pug b/services/web/app/views/project/list/side-bar.pug index c1ffb6e30c..f01223293b 100644 --- a/services/web/app/views/project/list/side-bar.pug +++ b/services/web/app/views/project/list/side-bar.pug @@ -1,144 +1,151 @@ -.dropdown(dropdown) - a.btn.btn-primary.sidebar-new-proj-btn.dropdown-toggle( - href="#", - data-toggle="dropdown", - dropdown-toggle - ) - | #{translate("new_project")} +if isShowingV1Projects && settings.overleaf && settings.overleaf.host + .project-list-sidebar-v1-link.col-md-2.col-xs-3 + span Want to go back to the V1 dashboard? + a.btn.btn-default(href=settings.overleaf.host + "/dash?remember-dash=1") + | Go back to V1 - ul.dropdown-menu(role="menu") - li - a( - href, - sixpack-convert="first_sign_up", - ng-click="openCreateProjectModal()" - ) #{translate("blank_project")} - li - a( - href, - sixpack-convert="first_sign_up", - ng-click="openCreateProjectModal('example')" - ) #{translate("example_project")} - li - a( - href, - sixpack-convert="first_sign_up", - ng-click="openUploadProjectModal()" - ) #{translate("upload_project")} - != moduleIncludes("newProjectMenu", locals) - if (templates) - li.divider - li.dropdown-header #{translate("templates")} - each item in templates - li - a.menu-indent(href=item.url, sixpack-convert="first_sign_up") #{translate(item.name)} - -.row-spaced(ng-if="projects.length > 0", ng-cloak) - ul.list-unstyled.folders-menu( - ng-controller="TagListController" - ) - li(ng-class="{active: (filter == 'all')}", ng-click="filterProjects('all')") - a(href) #{translate("all_projects")} - li(ng-class="{active: (filter == 'owned')}", ng-click="filterProjects('owned')") - a(href) #{translate("your_projects")} - li(ng-class="{active: (filter == 'shared')}", ng-click="filterProjects('shared')") - a(href) #{translate("shared_with_you")} - li(ng-class="{active: (filter == 'archived')}", ng-click="filterProjects('archived')") - a(href) #{translate("deleted_projects")} - if isShowingV1Projects - li(ng-class="{active: (filter == 'v1')}", ng-click="filterProjects('v1')") - a(href) #{translate("v1_projects")} - li.separator - h2 #{translate("folders")} - li.tag( - ng-repeat="tag in tags | orderBy:'name'", - ng-class="{active: tag.selected}", - ng-cloak, - ng-click="selectTag(tag)" +aside.project-list-sidebar.col-md-2.col-xs-3 + .dropdown(dropdown) + a.btn.btn-primary.sidebar-new-proj-btn.dropdown-toggle( + href="#", + data-toggle="dropdown", + dropdown-toggle ) - a.tag-name(href) - i.icon.fa.fa-fw( - ng-class="{\ - 'fa-folder-open-o': tag.selected,\ - 'fa-folder-o': !tag.selected\ - }" - ) - span.name {{tag.name}} - span.subdued ({{tag.project_ids.length}}) - span.v1-badge( - ng-if="tag.isV1", - ng-cloak, - aria-label=translate("v1_badge") - tooltip-template="'v1TagTooltipTemplate'" - tooltip-append-to-body="true" + | #{translate("new_project")} + + ul.dropdown-menu(role="menu") + li + a( + href, + sixpack-convert="first_sign_up", + ng-click="openCreateProjectModal()" + ) #{translate("blank_project")} + li + a( + href, + sixpack-convert="first_sign_up", + ng-click="openCreateProjectModal('example')" + ) #{translate("example_project")} + li + a( + href, + sixpack-convert="first_sign_up", + ng-click="openUploadProjectModal()" + ) #{translate("upload_project")} + != moduleIncludes("newProjectMenu", locals) + if (templates) + li.divider + li.dropdown-header #{translate("templates")} + each item in templates + li + a.menu-indent(href=item.url, sixpack-convert="first_sign_up") #{translate(item.name)} + + .row-spaced(ng-if="projects.length > 0", ng-cloak) + ul.list-unstyled.folders-menu( + ng-controller="TagListController" + ) + li(ng-class="{active: (filter == 'all')}", ng-click="filterProjects('all')") + a(href) #{translate("all_projects")} + li(ng-class="{active: (filter == 'owned')}", ng-click="filterProjects('owned')") + a(href) #{translate("your_projects")} + li(ng-class="{active: (filter == 'shared')}", ng-click="filterProjects('shared')") + a(href) #{translate("shared_with_you")} + li(ng-class="{active: (filter == 'archived')}", ng-click="filterProjects('archived')") + a(href) #{translate("deleted_projects")} + if isShowingV1Projects + li(ng-class="{active: (filter == 'v1')}", ng-click="filterProjects('v1')") + a(href) #{translate("v1_projects")} + li.separator + h2 #{translate("folders")} + li.tag( + ng-repeat="tag in tags | orderBy:'name'", + ng-class="{active: tag.selected}", + ng-cloak, + ng-click="selectTag(tag)" + ) + a.tag-name(href) + i.icon.fa.fa-fw( + ng-class="{\ + 'fa-folder-open-o': tag.selected,\ + 'fa-folder-o': !tag.selected\ + }" ) - span.dropdown.tag-menu(dropdown) - a.dropdown-toggle( - href="#", - data-toggle="dropdown", - dropdown-toggle, - stop-propagation="click" - ) - span.caret - ul.dropdown-menu.dropdown-menu-right( - role="menu" - ) - li - a(href, ng-click="renameTag(tag)", stop-propagation="click") - | #{translate("rename")} - li - a(href, ng-click="deleteTag(tag)", stop-propagation="click") - | #{translate("delete")} - li.tag.untagged( - ng-if="tags.length", - ng-cloak, - ng-click="selectUntagged()" - ng-class="{active: filter === 'untagged'}", - ) - a.tag-name(href) - | #{translate("uncategorized")} - span.subdued ({{ nUntagged }}) - li(ng-cloak) - a.tag(href, ng-click="openNewTagModal()") - i.fa.fa-fw.fa-plus - span.name #{translate("new_folder")} + span.name {{tag.name}} + span.subdued ({{tag.project_ids.length}}) + span.v1-badge( + ng-if="tag.isV1", + ng-cloak, + aria-label=translate("v1_badge") + tooltip-template="'v1TagTooltipTemplate'" + tooltip-append-to-body="true" + ) + span.dropdown.tag-menu(dropdown) + a.dropdown-toggle( + href="#", + data-toggle="dropdown", + dropdown-toggle, + stop-propagation="click" + ) + span.caret + ul.dropdown-menu.dropdown-menu-right( + role="menu" + ) + li + a(href, ng-click="renameTag(tag)", stop-propagation="click") + | #{translate("rename")} + li + a(href, ng-click="deleteTag(tag)", stop-propagation="click") + | #{translate("delete")} + li.tag.untagged( + ng-if="tags.length", + ng-cloak, + ng-click="selectUntagged()" + ng-class="{active: filter === 'untagged'}", + ) + a.tag-name(href) + | #{translate("uncategorized")} + span.subdued ({{ nUntagged }}) + li(ng-cloak) + a.tag(href, ng-click="openNewTagModal()") + i.fa.fa-fw.fa-plus + span.name #{translate("new_folder")} -.row-spaced(ng-if="projects.length == 0", ng-cloak) - .first-project - div - i.fa.fa-arrow-up.fa-2x - div - strong #{translate("create_your_first_project")} - -- if (showUserDetailsArea) - span(ng-controller="LeftHandMenuPromoController", ng-cloak) + .row-spaced(ng-if="projects.length == 0", ng-cloak) + .first-project + div + i.fa.fa-arrow-up.fa-2x + div + strong #{translate("create_your_first_project")} - .row-spaced#userProfileInformation(ng-if="hasProjects") - div(ng-controller="UserProfileController") - hr(ng-show="percentComplete < 100") - .text-centered.user-profile(ng-show="percentComplete < 100") - .progress - .progress-bar.progress-bar-info(ng-style="{'width' : (percentComplete+'%')}") + - if (showUserDetailsArea) + span(ng-controller="LeftHandMenuPromoController", ng-cloak) - p.small #{translate("profile_complete_percentage", {percentval:"{{percentComplete}}"})} - - button#completeUserProfileInformation.btn.btn-info( - ng-hide="formVisable", - ng-click="openUserProfileModal()" - ) #{translate("complete")} + .row-spaced#userProfileInformation(ng-if="hasProjects") + div(ng-controller="UserProfileController") + hr(ng-show="percentComplete < 100") + .text-centered.user-profile(ng-show="percentComplete < 100") + .progress + .progress-bar.progress-bar-info(ng-style="{'width' : (percentComplete+'%')}") + + p.small #{translate("profile_complete_percentage", {percentval:"{{percentComplete}}"})} + + button#completeUserProfileInformation.btn.btn-info( + ng-hide="formVisable", + ng-click="openUserProfileModal()" + ) #{translate("complete")} - .row-spaced(ng-if="hasProjects && userHasNoSubscription", ng-cloak).text-centered - hr - p.small #{translate("on_free_sl")} - p - a(href="/user/subscription/plans", sixpack-convert="left-menu-upgraed-rotation").btn.btn-primary #{translate("upgrade")} - p.small.text-centered - | #{translate("or_unlock_features_bonus")} - a(href="/user/bonus") #{translate("sharing_sl")} . - - -script. - window.userHasNoSubscription = #{!!(settings.enableSubscriptions && !hasSubscription)} + .row-spaced(ng-if="hasProjects && userHasNoSubscription", ng-cloak).text-centered + hr + p.small #{translate("on_free_sl")} + p + a(href="/user/subscription/plans", sixpack-convert="left-menu-upgraed-rotation").btn.btn-primary #{translate("upgrade")} + p.small.text-centered + | #{translate("or_unlock_features_bonus")} + a(href="/user/bonus") #{translate("sharing_sl")} . + + + script. + window.userHasNoSubscription = #{!!(settings.enableSubscriptions && !hasSubscription)} From fd852004fe1055b51480b8a1bb8b5ab8a6922b32 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 4 Dec 2017 12:25:40 +0000 Subject: [PATCH 17/31] Refactor synctex controls z-index handling. --- .../web/app/views/project/editor/editor.pug | 8 ++-- .../coffee/ide/directives/layout.coffee | 4 +- .../web/public/stylesheets/app/editor.less | 1 + .../public/stylesheets/app/editor/pdf.less | 37 ++++++++++++++++++- .../stylesheets/core/_common-variables.less | 2 + .../public/stylesheets/core/ol-variables.less | 3 +- 6 files changed, 46 insertions(+), 9 deletions(-) diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug index dc40d7b9ba..787beab01b 100644 --- a/services/web/app/views/project/editor/editor.pug +++ b/services/web/app/views/project/editor/editor.pug @@ -73,21 +73,21 @@ div.full-size( ng-show="!!pdf.url && settings.pdfViewer == 'pdfjs'" ng-controller="PdfSynctexController" ) - a.btn.btn-default.btn-xs( + a.synctex-control-goto-pdf( tooltip=translate('go_to_code_location_in_pdf') tooltip-placement="right" tooltip-append-to-body="true" ng-click="syncToPdf()" ) - i.fa.fa-long-arrow-right + i.synctex-control-icon br - a.btn.btn-default.btn-xs( + a.synctex-control-goto-code( tooltip-html="'"+translate('go_to_pdf_location_in_code', {}, true)+"'" tooltip-placement="right" tooltip-append-to-body="true" ng-click="syncToCode()" ) - i.fa.fa-long-arrow-left + i.synctex-control-icon div.full-size( ng-if="ui.pdfLayout == 'flat'" diff --git a/services/web/public/coffee/ide/directives/layout.coffee b/services/web/public/coffee/ide/directives/layout.coffee index d4e98fb0d3..86058447ed 100644 --- a/services/web/public/coffee/ide/directives/layout.coffee +++ b/services/web/public/coffee/ide/directives/layout.coffee @@ -53,9 +53,7 @@ define [ else controls.show() controls.css({ - position: "absolute" right: state.east.size - "z-index": 3 }) resetOpenStates = () -> @@ -112,7 +110,7 @@ define [ # Set the panel as overflowing (gives it higher z-index and sets overflow rules) layoutObj.allowOverflow overflowPane # Read the given z-index value and increment it, so that it's higher than synctex controls. - overflowPaneZVal = overflowPaneEl.css "z-index" + overflowPaneZVal = overflowPaneEl.zIndex() overflowPaneEl.css "z-index", overflowPaneZVal + 1 resetOpenStates() diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index e280f92779..1c45fd6a1c 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -289,6 +289,7 @@ margin-right: -(@extra-hit-area - 1px) !important; padding-left: @extra-hit-area !important; padding-right: @extra-hit-area !important; + z-index: 5 !important; box-sizing: content-box; background-image: linear-gradient(90deg, transparent, diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less index a873cd5e8f..96097df1bf 100644 --- a/services/web/public/stylesheets/app/editor/pdf.less +++ b/services/web/public/stylesheets/app/editor/pdf.less @@ -229,14 +229,49 @@ } .synctex-controls { + position: absolute; + z-index: @synctex-controls-z-index; top: 68px; padding: 0px 2px; .btn-xs { line-height: 1.3; - padding: 0 2px 0; + padding: @synctex-controls-btn-padding; } } +.synctex-controls when (@is-overleaf = true) { + margin-right: -9px; +} + .synctex-control-goto-pdf, + .synctex-control-goto-code { + .btn; + .btn-default; + .btn-xs; + + > .synctex-control-icon { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + } + + .synctex-control-goto-pdf > .synctex-control-icon::before when (@is-overleaf = true) { + content: "\f061"; + } + .synctex-control-goto-code > .synctex-control-icon::before when (@is-overleaf = true) { + content: "\f060"; + } + + .synctex-control-goto-pdf > .synctex-control-icon::before when (@is-overleaf = false) { + content: "\f178"; + } + .synctex-control-goto-code > .synctex-control-icon::before when (@is-overleaf = false) { + content: "\f177"; + } + .editor-dark { .pdf-logs { background-color: lighten(@editor-dark-background-color, 10%); diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index c5bd633b15..958c5a1a10 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -919,6 +919,8 @@ // Editor resizers @editor-resizer-bg-color : #F4F4F4; @editor-resizer-bg-color-dragging : #ddd; +@synctex-controls-z-index : 3; +@synctex-controls-btn-padding : 0 2px 0; // Tags @tag-border-radius : 0.25em; @tag-bg-color : @label-default-bg; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 54fdddf309..812cd3e8f9 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -187,7 +187,8 @@ // Editor resizers @editor-resizer-bg-color : @ol-blue-gray-6; @editor-resizer-bg-color-dragging : transparent; - +@synctex-controls-z-index : 6; +@synctex-controls-btn-padding : 4px; //== Colors // //## Gray and brand colors for use across Bootstrap. From 77dc7adf1f1af25840da3b27977da10648d080a1 Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Mon, 4 Dec 2017 14:53:18 +0000 Subject: [PATCH 18/31] Revert "Move to sidebar template" This reverts commit 15dc1a35184aade8912d129ea75248ffc8b1b4bd. --- services/web/app/views/project/list.pug | 9 +- .../web/app/views/project/list/side-bar.pug | 275 +++++++++--------- 2 files changed, 142 insertions(+), 142 deletions(-) diff --git a/services/web/app/views/project/list.pug b/services/web/app/views/project/list.pug index bcfd7954cb..ab8d42751c 100644 --- a/services/web/app/views/project/list.pug +++ b/services/web/app/views/project/list.pug @@ -60,7 +60,14 @@ block content .row.project-list-row(ng-cloak) .project-list-container(ng-if="projects.length > 0") - include ./list/side-bar + aside.project-list-sidebar.col-md-2.col-xs-3 + include ./list/side-bar + + if isShowingV1Projects && settings.overleaf && settings.overleaf.host + .project-list-sidebar-v1-link.col-md-2.col-xs-3 + span Want to go back to the V1 dashboard? + a.btn.btn-default(href=settings.overleaf.host + "/dash?remember-dash=1") + | Go back to V1 .project-list-main.col-md-10.col-xs-9 include ./list/notifications diff --git a/services/web/app/views/project/list/side-bar.pug b/services/web/app/views/project/list/side-bar.pug index f01223293b..c1ffb6e30c 100644 --- a/services/web/app/views/project/list/side-bar.pug +++ b/services/web/app/views/project/list/side-bar.pug @@ -1,151 +1,144 @@ -if isShowingV1Projects && settings.overleaf && settings.overleaf.host - .project-list-sidebar-v1-link.col-md-2.col-xs-3 - span Want to go back to the V1 dashboard? - a.btn.btn-default(href=settings.overleaf.host + "/dash?remember-dash=1") - | Go back to V1 +.dropdown(dropdown) + a.btn.btn-primary.sidebar-new-proj-btn.dropdown-toggle( + href="#", + data-toggle="dropdown", + dropdown-toggle + ) + | #{translate("new_project")} -aside.project-list-sidebar.col-md-2.col-xs-3 - .dropdown(dropdown) - a.btn.btn-primary.sidebar-new-proj-btn.dropdown-toggle( - href="#", - data-toggle="dropdown", - dropdown-toggle + ul.dropdown-menu(role="menu") + li + a( + href, + sixpack-convert="first_sign_up", + ng-click="openCreateProjectModal()" + ) #{translate("blank_project")} + li + a( + href, + sixpack-convert="first_sign_up", + ng-click="openCreateProjectModal('example')" + ) #{translate("example_project")} + li + a( + href, + sixpack-convert="first_sign_up", + ng-click="openUploadProjectModal()" + ) #{translate("upload_project")} + != moduleIncludes("newProjectMenu", locals) + if (templates) + li.divider + li.dropdown-header #{translate("templates")} + each item in templates + li + a.menu-indent(href=item.url, sixpack-convert="first_sign_up") #{translate(item.name)} + +.row-spaced(ng-if="projects.length > 0", ng-cloak) + ul.list-unstyled.folders-menu( + ng-controller="TagListController" + ) + li(ng-class="{active: (filter == 'all')}", ng-click="filterProjects('all')") + a(href) #{translate("all_projects")} + li(ng-class="{active: (filter == 'owned')}", ng-click="filterProjects('owned')") + a(href) #{translate("your_projects")} + li(ng-class="{active: (filter == 'shared')}", ng-click="filterProjects('shared')") + a(href) #{translate("shared_with_you")} + li(ng-class="{active: (filter == 'archived')}", ng-click="filterProjects('archived')") + a(href) #{translate("deleted_projects")} + if isShowingV1Projects + li(ng-class="{active: (filter == 'v1')}", ng-click="filterProjects('v1')") + a(href) #{translate("v1_projects")} + li.separator + h2 #{translate("folders")} + li.tag( + ng-repeat="tag in tags | orderBy:'name'", + ng-class="{active: tag.selected}", + ng-cloak, + ng-click="selectTag(tag)" ) - | #{translate("new_project")} - - ul.dropdown-menu(role="menu") - li - a( - href, - sixpack-convert="first_sign_up", - ng-click="openCreateProjectModal()" - ) #{translate("blank_project")} - li - a( - href, - sixpack-convert="first_sign_up", - ng-click="openCreateProjectModal('example')" - ) #{translate("example_project")} - li - a( - href, - sixpack-convert="first_sign_up", - ng-click="openUploadProjectModal()" - ) #{translate("upload_project")} - != moduleIncludes("newProjectMenu", locals) - if (templates) - li.divider - li.dropdown-header #{translate("templates")} - each item in templates + a.tag-name(href) + i.icon.fa.fa-fw( + ng-class="{\ + 'fa-folder-open-o': tag.selected,\ + 'fa-folder-o': !tag.selected\ + }" + ) + span.name {{tag.name}} + span.subdued ({{tag.project_ids.length}}) + span.v1-badge( + ng-if="tag.isV1", + ng-cloak, + aria-label=translate("v1_badge") + tooltip-template="'v1TagTooltipTemplate'" + tooltip-append-to-body="true" + ) + span.dropdown.tag-menu(dropdown) + a.dropdown-toggle( + href="#", + data-toggle="dropdown", + dropdown-toggle, + stop-propagation="click" + ) + span.caret + ul.dropdown-menu.dropdown-menu-right( + role="menu" + ) li - a.menu-indent(href=item.url, sixpack-convert="first_sign_up") #{translate(item.name)} + a(href, ng-click="renameTag(tag)", stop-propagation="click") + | #{translate("rename")} + li + a(href, ng-click="deleteTag(tag)", stop-propagation="click") + | #{translate("delete")} + li.tag.untagged( + ng-if="tags.length", + ng-cloak, + ng-click="selectUntagged()" + ng-class="{active: filter === 'untagged'}", + ) + a.tag-name(href) + | #{translate("uncategorized")} + span.subdued ({{ nUntagged }}) + li(ng-cloak) + a.tag(href, ng-click="openNewTagModal()") + i.fa.fa-fw.fa-plus + span.name #{translate("new_folder")} - .row-spaced(ng-if="projects.length > 0", ng-cloak) - ul.list-unstyled.folders-menu( - ng-controller="TagListController" - ) - li(ng-class="{active: (filter == 'all')}", ng-click="filterProjects('all')") - a(href) #{translate("all_projects")} - li(ng-class="{active: (filter == 'owned')}", ng-click="filterProjects('owned')") - a(href) #{translate("your_projects")} - li(ng-class="{active: (filter == 'shared')}", ng-click="filterProjects('shared')") - a(href) #{translate("shared_with_you")} - li(ng-class="{active: (filter == 'archived')}", ng-click="filterProjects('archived')") - a(href) #{translate("deleted_projects")} - if isShowingV1Projects - li(ng-class="{active: (filter == 'v1')}", ng-click="filterProjects('v1')") - a(href) #{translate("v1_projects")} - li.separator - h2 #{translate("folders")} - li.tag( - ng-repeat="tag in tags | orderBy:'name'", - ng-class="{active: tag.selected}", - ng-cloak, - ng-click="selectTag(tag)" - ) - a.tag-name(href) - i.icon.fa.fa-fw( - ng-class="{\ - 'fa-folder-open-o': tag.selected,\ - 'fa-folder-o': !tag.selected\ - }" - ) - span.name {{tag.name}} - span.subdued ({{tag.project_ids.length}}) - span.v1-badge( - ng-if="tag.isV1", - ng-cloak, - aria-label=translate("v1_badge") - tooltip-template="'v1TagTooltipTemplate'" - tooltip-append-to-body="true" - ) - span.dropdown.tag-menu(dropdown) - a.dropdown-toggle( - href="#", - data-toggle="dropdown", - dropdown-toggle, - stop-propagation="click" - ) - span.caret - ul.dropdown-menu.dropdown-menu-right( - role="menu" - ) - li - a(href, ng-click="renameTag(tag)", stop-propagation="click") - | #{translate("rename")} - li - a(href, ng-click="deleteTag(tag)", stop-propagation="click") - | #{translate("delete")} - li.tag.untagged( - ng-if="tags.length", - ng-cloak, - ng-click="selectUntagged()" - ng-class="{active: filter === 'untagged'}", - ) - a.tag-name(href) - | #{translate("uncategorized")} - span.subdued ({{ nUntagged }}) - li(ng-cloak) - a.tag(href, ng-click="openNewTagModal()") - i.fa.fa-fw.fa-plus - span.name #{translate("new_folder")} +.row-spaced(ng-if="projects.length == 0", ng-cloak) + .first-project + div + i.fa.fa-arrow-up.fa-2x + div + strong #{translate("create_your_first_project")} + +- if (showUserDetailsArea) + span(ng-controller="LeftHandMenuPromoController", ng-cloak) - .row-spaced(ng-if="projects.length == 0", ng-cloak) - .first-project - div - i.fa.fa-arrow-up.fa-2x - div - strong #{translate("create_your_first_project")} + .row-spaced#userProfileInformation(ng-if="hasProjects") + div(ng-controller="UserProfileController") + hr(ng-show="percentComplete < 100") + .text-centered.user-profile(ng-show="percentComplete < 100") + .progress + .progress-bar.progress-bar-info(ng-style="{'width' : (percentComplete+'%')}") - - if (showUserDetailsArea) - span(ng-controller="LeftHandMenuPromoController", ng-cloak) - - .row-spaced#userProfileInformation(ng-if="hasProjects") - div(ng-controller="UserProfileController") - hr(ng-show="percentComplete < 100") - .text-centered.user-profile(ng-show="percentComplete < 100") - .progress - .progress-bar.progress-bar-info(ng-style="{'width' : (percentComplete+'%')}") - - p.small #{translate("profile_complete_percentage", {percentval:"{{percentComplete}}"})} - - button#completeUserProfileInformation.btn.btn-info( - ng-hide="formVisable", - ng-click="openUserProfileModal()" - ) #{translate("complete")} + p.small #{translate("profile_complete_percentage", {percentval:"{{percentComplete}}"})} + + button#completeUserProfileInformation.btn.btn-info( + ng-hide="formVisable", + ng-click="openUserProfileModal()" + ) #{translate("complete")} - .row-spaced(ng-if="hasProjects && userHasNoSubscription", ng-cloak).text-centered - hr - p.small #{translate("on_free_sl")} - p - a(href="/user/subscription/plans", sixpack-convert="left-menu-upgraed-rotation").btn.btn-primary #{translate("upgrade")} - p.small.text-centered - | #{translate("or_unlock_features_bonus")} - a(href="/user/bonus") #{translate("sharing_sl")} . - - - script. - window.userHasNoSubscription = #{!!(settings.enableSubscriptions && !hasSubscription)} + .row-spaced(ng-if="hasProjects && userHasNoSubscription", ng-cloak).text-centered + hr + p.small #{translate("on_free_sl")} + p + a(href="/user/subscription/plans", sixpack-convert="left-menu-upgraed-rotation").btn.btn-primary #{translate("upgrade")} + p.small.text-centered + | #{translate("or_unlock_features_bonus")} + a(href="/user/bonus") #{translate("sharing_sl")} . + + +script. + window.userHasNoSubscription = #{!!(settings.enableSubscriptions && !hasSubscription)} From 0bad7d8549deaf7fe10afd1878a50c8cea4f4733 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 4 Dec 2017 15:12:13 +0000 Subject: [PATCH 19/31] Adjustments to synctex controls. --- .../web/app/views/project/editor/editor.pug | 5 +- .../public/stylesheets/app/editor/pdf.less | 47 ++++++++++++++----- .../stylesheets/core/_common-variables.less | 2 +- .../public/stylesheets/core/ol-variables.less | 2 +- 4 files changed, 38 insertions(+), 18 deletions(-) diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug index 787beab01b..6e0e1ecca9 100644 --- a/services/web/app/views/project/editor/editor.pug +++ b/services/web/app/views/project/editor/editor.pug @@ -73,15 +73,14 @@ div.full-size( ng-show="!!pdf.url && settings.pdfViewer == 'pdfjs'" ng-controller="PdfSynctexController" ) - a.synctex-control-goto-pdf( + a.synctex-control.synctex-control-goto-pdf( tooltip=translate('go_to_code_location_in_pdf') tooltip-placement="right" tooltip-append-to-body="true" ng-click="syncToPdf()" ) i.synctex-control-icon - br - a.synctex-control-goto-code( + a.synctex-control.synctex-control-goto-code( tooltip-html="'"+translate('go_to_pdf_location_in_code', {}, true)+"'" tooltip-placement="right" tooltip-append-to-body="true" diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less index 96097df1bf..70bf06545c 100644 --- a/services/web/public/stylesheets/app/editor/pdf.less +++ b/services/web/public/stylesheets/app/editor/pdf.less @@ -231,19 +231,14 @@ .synctex-controls { position: absolute; z-index: @synctex-controls-z-index; + padding: @synctex-controls-padding; top: 68px; - padding: 0px 2px; - .btn-xs { - line-height: 1.3; - padding: @synctex-controls-btn-padding; - } } .synctex-controls when (@is-overleaf = true) { - margin-right: -9px; + margin-right: -11px; } - .synctex-control-goto-pdf, - .synctex-control-goto-code { + .synctex-control { .btn; .btn-default; .btn-xs; @@ -257,12 +252,38 @@ -moz-osx-font-smoothing: grayscale; } } - - .synctex-control-goto-pdf > .synctex-control-icon::before when (@is-overleaf = true) { - content: "\f061"; + + .synctex-control when (@is-overleaf = true) { + @ol-synctex-control-size: 24px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1em; + width: @ol-synctex-control-size; + height: @ol-synctex-control-size; + border-radius: @ol-synctex-control-size / 2; + padding: 0 0 2px; + background-color: fade(@btn-default-bg, 80%); + transition: background 0.15s ease; + margin-bottom: @ol-synctex-control-size / 2; } - .synctex-control-goto-code > .synctex-control-icon::before when (@is-overleaf = true) { - content: "\f060"; + + .synctex-control when (@is-overleaf = false) { + line-height: 1.3; + padding: 0 2px; + } + + .synctex-control-goto-pdf > .synctex-control-icon when (@is-overleaf = true) { + text-indent: 1px; // "Optical" adjustment. + &::before { + content: "\f061"; + } + } + .synctex-control-goto-code > .synctex-control-icon when (@is-overleaf = true) { + text-indent: -1px; // "Optical" adjustment. + &::before { + content: "\f060"; + } } .synctex-control-goto-pdf > .synctex-control-icon::before when (@is-overleaf = false) { diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 958c5a1a10..3689e6c10e 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -920,7 +920,7 @@ @editor-resizer-bg-color : #F4F4F4; @editor-resizer-bg-color-dragging : #ddd; @synctex-controls-z-index : 3; -@synctex-controls-btn-padding : 0 2px 0; +@synctex-controls-padding : 0 2px; // Tags @tag-border-radius : 0.25em; @tag-bg-color : @label-default-bg; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 812cd3e8f9..4452e0e956 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -188,7 +188,7 @@ @editor-resizer-bg-color : @ol-blue-gray-6; @editor-resizer-bg-color-dragging : transparent; @synctex-controls-z-index : 6; -@synctex-controls-btn-padding : 4px; +@synctex-controls-padding : 0; //== Colors // //## Gray and brand colors for use across Bootstrap. From c84c00d56d8c5334998118866cbfd83a519caf15 Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Mon, 4 Dec 2017 15:19:03 +0000 Subject: [PATCH 20/31] Change query param for nicer api on OL side --- services/web/app/views/project/list.pug | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/web/app/views/project/list.pug b/services/web/app/views/project/list.pug index ab8d42751c..7ee28763a8 100644 --- a/services/web/app/views/project/list.pug +++ b/services/web/app/views/project/list.pug @@ -66,7 +66,7 @@ block content if isShowingV1Projects && settings.overleaf && settings.overleaf.host .project-list-sidebar-v1-link.col-md-2.col-xs-3 span Want to go back to the V1 dashboard? - a.btn.btn-default(href=settings.overleaf.host + "/dash?remember-dash=1") + a.btn.btn-default(href=settings.overleaf.host + "/dash?prefer-v1-dash=1") | Go back to V1 .project-list-main.col-md-10.col-xs-9 From 963ad4fece710f0963cfba247d246641fb5cd261 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 4 Dec 2017 15:48:23 +0000 Subject: [PATCH 21/31] Style resizer togglers. --- .../web/public/stylesheets/app/editor.less | 38 +++++++++++-------- .../stylesheets/core/_common-variables.less | 2 + .../public/stylesheets/core/ol-variables.less | 2 + 3 files changed, 26 insertions(+), 16 deletions(-) diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index 1c45fd6a1c..ccd03aea47 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -276,8 +276,9 @@ -moz-osx-font-smoothing: grayscale; font-size: 16px !important; line-height: 50px; + background-color: @editor-toggler-bg-color; &:hover { - background-color: #ddd; + background-color: @editor-toggler-hover-bg-color; color: #333; } } @@ -299,21 +300,26 @@ transparent (@extra-hit-area + 1px), transparent); - // .ui-layout-toggler { - // color: #999; - // font-family: FontAwesome; - // font-style: normal; - // font-weight: normal; - // line-height: 1; - // -webkit-font-smoothing: antialiased; - // -moz-osx-font-smoothing: grayscale; - // font-size: 16px !important; - // line-height: 50px; - // &:hover { - // background-color: #ddd; - // color: #333; - // } - // } + .ui-layout-toggler { + padding: 0 @extra-hit-area !important; + background-image: linear-gradient(90deg, + transparent, + transparent (@extra-hit-area - 1px), + @editor-toggler-bg-color (@extra-hit-area - 1px), + @editor-toggler-bg-color (@extra-hit-area + 1px), + transparent (@extra-hit-area + 1px), + transparent); + + &:hover { + background-image: linear-gradient(90deg, + transparent, + transparent (@extra-hit-area - 2px), + @editor-toggler-hover-bg-color (@extra-hit-area - 2px), + @editor-toggler-hover-bg-color (@extra-hit-area + 2px), + transparent (@extra-hit-area + 2px), + transparent); + } + } } .ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed { diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 3689e6c10e..d4f5a168ec 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -919,6 +919,8 @@ // Editor resizers @editor-resizer-bg-color : #F4F4F4; @editor-resizer-bg-color-dragging : #ddd; +@editor-toggler-bg-color : transparent; +@editor-toggler-hover-bg-color : #DDD; @synctex-controls-z-index : 3; @synctex-controls-padding : 0 2px; // Tags diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 4452e0e956..e86b9de8a7 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -187,6 +187,8 @@ // Editor resizers @editor-resizer-bg-color : @ol-blue-gray-6; @editor-resizer-bg-color-dragging : transparent; +@editor-toggler-bg-color : @ol-blue-gray-2; +@editor-toggler-hover-bg-color : @ol-green; @synctex-controls-z-index : 6; @synctex-controls-padding : 0; //== Colors From 7498ead1f5e8b2c9b9cbd75a5336fa16d51a7c87 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 4 Dec 2017 15:58:40 +0000 Subject: [PATCH 22/31] Make sure SL synctex controls remain the same. --- services/web/public/stylesheets/app/editor/pdf.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less index 70bf06545c..b8ddfc5efd 100644 --- a/services/web/public/stylesheets/app/editor/pdf.less +++ b/services/web/public/stylesheets/app/editor/pdf.less @@ -242,6 +242,8 @@ .btn; .btn-default; .btn-xs; + display: block; + margin-bottom: 3px; > .synctex-control-icon { display: inline-block; From 6a185a838dee8b46948c9d4dee0b4bbb2c4ffe6b Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Mon, 4 Dec 2017 17:20:49 +0000 Subject: [PATCH 23/31] Increase height & margin --- services/web/public/stylesheets/app/sidebar-v1-dash-link.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/services/web/public/stylesheets/app/sidebar-v1-dash-link.less b/services/web/public/stylesheets/app/sidebar-v1-dash-link.less index b297920e5b..072042226e 100644 --- a/services/web/public/stylesheets/app/sidebar-v1-dash-link.less +++ b/services/web/public/stylesheets/app/sidebar-v1-dash-link.less @@ -1,4 +1,4 @@ -@v1-dash-link-height: 110px; +@v1-dash-link-height: 130px; .project-list-sidebar { height: calc(~"100% -" @v1-dash-link-height); @@ -20,7 +20,7 @@ display: block; margin-left: auto; margin-right: auto; - margin-top: 4px; + margin-top: 12.5px; padding-top: 0; padding-bottom: 0; background-color: @v1-dash-link-btn-bg; From 09dcbcf3b78fbb68b7a39bc41b4f7ecacbe86a7c Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 7 Dec 2017 10:35:43 +0000 Subject: [PATCH 24/31] Fix missing variables. --- services/web/public/stylesheets/core/_common-variables.less | 3 ++- services/web/public/stylesheets/core/ol-variables.less | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 84a4f552d2..ab3ef2ccc9 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -902,10 +902,12 @@ @toolbar-icon-btn-color : @gray-light; @toolbar-icon-btn-hover-color : @gray-dark; @toolbar-icon-btn-hover-shadow : 0 1px 0 rgba(0, 0, 0, 0.25); +@toolbar-icon-btn-hover-boxshadow : inset 0 3px 5px rgba(0, 0, 0, 0.225); @toolbar-border-bottom : 1px solid @toolbar-border-color; // Editor file-tree @file-tree-bg : transparent; +@file-tree-line-height : 2.6; @file-tree-item-color : @gray-darker; @file-tree-item-toggle-color : @gray; @file-tree-item-icon-color : @gray-light; @@ -923,7 +925,6 @@ @editor-toggler-hover-bg-color : #DDD; @synctex-controls-z-index : 3; @synctex-controls-padding : 0 2px; - // Tags @tag-border-radius : 0.25em; @tag-bg-color : @label-default-bg; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index e86b9de8a7..004bc343d8 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -172,8 +172,10 @@ @toolbar-icon-btn-hover-color : #FFF; @toolbar-icon-btn-hover-shadow : none; @toolbar-border-bottom : 1px solid @toolbar-border-color; +@toolbar-icon-btn-hover-boxshadow : none; // Editor file-tree @file-tree-bg : @ol-blue-gray-4; +@file-tree-line-height : 2.05; @file-tree-item-color : #FFF; @file-tree-item-input-color : @ol-blue-gray-5; @file-tree-item-toggle-color : @ol-blue-gray-2; @@ -191,8 +193,6 @@ @editor-toggler-hover-bg-color : @ol-green; @synctex-controls-z-index : 6; @synctex-controls-padding : 0; -//== Colors -// //## Gray and brand colors for use across Bootstrap. @gray-darker: #252525; @gray-dark: #505050; From 9575e802915553cf16dd130e4fb386ab896d11b6 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 8 Dec 2017 10:31:31 +0000 Subject: [PATCH 25/31] Pseudo elements in togglers where causing artifacts in v2; only allow those in SL. --- services/web/public/stylesheets/app/editor.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index ccd03aea47..fb8e825cb3 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -323,14 +323,14 @@ } .ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed { - .ui-layout-toggler { + .ui-layout-toggler when (@is-overleaf = false) { &:before { content: "\f104" } } } .ui-layout-resizer-east.ui-layout-resizer-open, .ui-layout-resizer-west.ui-layout-resizer-closed { - .ui-layout-toggler { + .ui-layout-toggler when (@is-overleaf = false) { &:before { content: "\f105" } From 6198491e5f38eece274d927a02ca1fafd4fd46ff Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Fri, 8 Dec 2017 11:31:44 +0000 Subject: [PATCH 26/31] Add unsupported file type error --- services/web/app/coffee/Features/Errors/Errors.coffee | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/services/web/app/coffee/Features/Errors/Errors.coffee b/services/web/app/coffee/Features/Errors/Errors.coffee index 2e46dd692d..ce236d5968 100644 --- a/services/web/app/coffee/Features/Errors/Errors.coffee +++ b/services/web/app/coffee/Features/Errors/Errors.coffee @@ -26,8 +26,16 @@ InvalidNameError = (message) -> return error InvalidNameError.prototype.__proto__ = Error.prototype +UnsupportedFileType = (message) -> + error = new Error(message) + error.name = "UnsupportedFileType" + error.__proto__ = UnsupportedFileType.prototype + return error +UnsupportedFileType.prototype.__proto___ = Error.prototype + module.exports = Errors = NotFoundError: NotFoundError ServiceNotConfiguredError: ServiceNotConfiguredError TooManyRequestsError: TooManyRequestsError InvalidNameError: InvalidNameError + UnsupportedFileType: UnsupportedFileType From 97129b5dda1a0eae9262d4fd355261799ae0e73c Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 8 Dec 2017 15:29:05 +0000 Subject: [PATCH 27/31] Make the togglers more obvious when panes are closed. --- .../web/public/stylesheets/app/editor.less | 70 ++++++++++++++----- 1 file changed, 52 insertions(+), 18 deletions(-) diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index fb8e825cb3..5257e9c519 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -14,6 +14,9 @@ @import "./editor/review-panel.less"; @import "./editor/feature-onboarding.less"; +@ui-layout-toggler-def-height: 50px; +@ui-resizer-extra-hit-area: 8px; + @keyframes blink { 0% { opacity: 0.2; @@ -285,38 +288,37 @@ } .ui-layout-resizer when (@is-overleaf = true) { - @extra-hit-area: 8px; - margin-left: -(@extra-hit-area) !important; - margin-right: -(@extra-hit-area - 1px) !important; - padding-left: @extra-hit-area !important; - padding-right: @extra-hit-area !important; + margin-left: -(@ui-resizer-extra-hit-area) !important; + margin-right: -(@ui-resizer-extra-hit-area - 1px) !important; + padding-left: @ui-resizer-extra-hit-area !important; + padding-right: @ui-resizer-extra-hit-area !important; z-index: 5 !important; box-sizing: content-box; background-image: linear-gradient(90deg, transparent, - transparent (@extra-hit-area - 1px), - @editor-resizer-bg-color (@extra-hit-area - 1px), - @editor-resizer-bg-color (@extra-hit-area + 1px), - transparent (@extra-hit-area + 1px), + transparent (@ui-resizer-extra-hit-area - 1px), + @editor-resizer-bg-color (@ui-resizer-extra-hit-area - 1px), + @editor-resizer-bg-color (@ui-resizer-extra-hit-area + 1px), + transparent (@ui-resizer-extra-hit-area + 1px), transparent); .ui-layout-toggler { - padding: 0 @extra-hit-area !important; + padding: 0 @ui-resizer-extra-hit-area !important; background-image: linear-gradient(90deg, transparent, - transparent (@extra-hit-area - 1px), - @editor-toggler-bg-color (@extra-hit-area - 1px), - @editor-toggler-bg-color (@extra-hit-area + 1px), - transparent (@extra-hit-area + 1px), + transparent (@ui-resizer-extra-hit-area - 1px), + @editor-toggler-bg-color (@ui-resizer-extra-hit-area - 1px), + @editor-toggler-bg-color (@ui-resizer-extra-hit-area + 1px), + transparent (@ui-resizer-extra-hit-area + 1px), transparent); &:hover { background-image: linear-gradient(90deg, transparent, - transparent (@extra-hit-area - 2px), - @editor-toggler-hover-bg-color (@extra-hit-area - 2px), - @editor-toggler-hover-bg-color (@extra-hit-area + 2px), - transparent (@extra-hit-area + 2px), + transparent (@ui-resizer-extra-hit-area - 2px), + @editor-toggler-hover-bg-color (@ui-resizer-extra-hit-area - 2px), + @editor-toggler-hover-bg-color (@ui-resizer-extra-hit-area + 2px), + transparent (@ui-resizer-extra-hit-area + 2px), transparent); } } @@ -336,6 +338,38 @@ } } } + +.ui-layout-toggler.ui-layout-toggler-closed when (@is-overleaf = true) { + background-color: @editor-resizer-bg-color; + background-image: none; + line-height: @ui-layout-toggler-def-height; + + &::before { + content: "\22EE"; // Vertical ellipsis + display: block; + color: #FFF; + font-weight: 700; + font-size: @font-size-h2; + width: @ui-resizer-extra-hit-area / 2; + } + &:hover { + background-color: @editor-toggler-hover-bg-color; + background-image: none; + } + .ui-layout-resizer-west > & { + border-radius: 0 @border-radius-base @border-radius-base 0; + &::before { + margin-left: -2px; + } + } + .ui-layout-resizer-east > & { + border-radius: @border-radius-base 0 0 @border-radius-base; + &::before { + margin-left: (-1 - @ui-resizer-extra-hit-area); + } + } +} + .ui-layout-resizer-dragging { background-color: @editor-resizer-bg-color-dragging; } From 0652fc62a06fbee5f9cd4120efe66137ee3558e7 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 11 Dec 2017 15:33:00 +0000 Subject: [PATCH 28/31] Configure resizer cursors for v2. --- services/web/app/coffee/infrastructure/ExpressLocals.coffee | 2 ++ services/web/public/coffee/ide/directives/layout.coffee | 6 ++++++ 2 files changed, 8 insertions(+) diff --git a/services/web/app/coffee/infrastructure/ExpressLocals.coffee b/services/web/app/coffee/infrastructure/ExpressLocals.coffee index 8c2257aa25..b126819f56 100644 --- a/services/web/app/coffee/infrastructure/ExpressLocals.coffee +++ b/services/web/app/coffee/infrastructure/ExpressLocals.coffee @@ -298,6 +298,8 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)-> res.locals.uiConfig = defaultResizerSizeOpen : if isOl then 2 else 24 defaultResizerSizeClosed : if isOl then 2 else 24 + eastResizerCursor : if isOl then "ew-resize" else null + westResizerCursor : if isOl then "ew-resize" else null chatResizerSizeOpen : if isOl then 2 else 12 chatResizerSizeClosed : 0 next() diff --git a/services/web/public/coffee/ide/directives/layout.coffee b/services/web/public/coffee/ide/directives/layout.coffee index 86058447ed..fcc75b29a1 100644 --- a/services/web/public/coffee/ide/directives/layout.coffee +++ b/services/web/public/coffee/ide/directives/layout.coffee @@ -44,6 +44,12 @@ define [ if !attrs.minimumRestoreSizeWest? or (state.west.size >= attrs.minimumRestoreSizeWest and !state.west.initClosed) options.west = state.west + if window.uiConfig.eastResizerCursor? + options.east.resizerCursor = window.uiConfig.eastResizerCursor + + if window.uiConfig.westResizerCursor? + options.west.resizerCursor = window.uiConfig.westResizerCursor + repositionControls = () -> state = element.layout().readState() if state.east? From ab46e3930ad288a56350cb8cf43acb07bb6de75f Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 11 Dec 2017 15:41:07 +0000 Subject: [PATCH 29/31] Configure toggler cursors for v2. --- .../web/public/stylesheets/app/editor.less | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index 5257e9c519..9224dbe181 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -370,6 +370,24 @@ } } +.ui-layout-toggler-east when (@is-overleaf = true) { + &.ui-layout-toggler-open { + cursor: e-resize !important + } + &.ui-layout-toggler-closed { + cursor: w-resize !important + } +} + +.ui-layout-toggler-west when (@is-overleaf = true) { + &.ui-layout-toggler-open { + cursor: w-resize !important + } + &.ui-layout-toggler-closed { + cursor: e-resize !important + } +} + .ui-layout-resizer-dragging { background-color: @editor-resizer-bg-color-dragging; } From edfc259c5379ec124ac7d05f704d402dedb4563d Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 11 Dec 2017 16:55:50 +0000 Subject: [PATCH 30/31] Fix missing border on SL. --- services/web/app/views/project/editor/editor.pug | 4 ++-- services/web/public/stylesheets/app/editor/pdf.less | 3 --- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug index ad06b6b6ba..1ed95a75ac 100644 --- a/services/web/app/views/project/editor/editor.pug +++ b/services/web/app/views/project/editor/editor.pug @@ -73,14 +73,14 @@ div.full-size( ng-show="!!pdf.url && settings.pdfViewer == 'pdfjs'" ng-controller="PdfSynctexController" ) - a.synctex-control.synctex-control-goto-pdf( + a.btn.btn-default.btn-xs.synctex-control.synctex-control-goto-pdf( tooltip=translate('go_to_code_location_in_pdf') tooltip-placement="right" tooltip-append-to-body="true" ng-click="syncToPdf()" ) i.synctex-control-icon - a.synctex-control.synctex-control-goto-code( + a.btn.btn-default.btn-xs.synctex-control.synctex-control-goto-code( tooltip-html="'"+translate('go_to_pdf_location_in_code', {}, true)+"'" tooltip-placement="right" tooltip-append-to-body="true" diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less index b8ddfc5efd..e602d2d99b 100644 --- a/services/web/public/stylesheets/app/editor/pdf.less +++ b/services/web/public/stylesheets/app/editor/pdf.less @@ -239,9 +239,6 @@ margin-right: -11px; } .synctex-control { - .btn; - .btn-default; - .btn-xs; display: block; margin-bottom: 3px; From 5c62ac4f8aed26112aafbbbb8ee5ac9816dbb4a3 Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Tue, 12 Dec 2017 12:50:20 +0000 Subject: [PATCH 31/31] Change error type for consistency --- services/web/app/coffee/Features/Errors/Errors.coffee | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/services/web/app/coffee/Features/Errors/Errors.coffee b/services/web/app/coffee/Features/Errors/Errors.coffee index ce236d5968..d88b243418 100644 --- a/services/web/app/coffee/Features/Errors/Errors.coffee +++ b/services/web/app/coffee/Features/Errors/Errors.coffee @@ -26,16 +26,16 @@ InvalidNameError = (message) -> return error InvalidNameError.prototype.__proto__ = Error.prototype -UnsupportedFileType = (message) -> +UnsupportedFileTypeError = (message) -> error = new Error(message) - error.name = "UnsupportedFileType" - error.__proto__ = UnsupportedFileType.prototype + error.name = "UnsupportedFileTypeError" + error.__proto__ = UnsupportedFileTypeError.prototype return error -UnsupportedFileType.prototype.__proto___ = Error.prototype +UnsupportedFileTypeError.prototype.__proto___ = Error.prototype module.exports = Errors = NotFoundError: NotFoundError ServiceNotConfiguredError: ServiceNotConfiguredError TooManyRequestsError: TooManyRequestsError InvalidNameError: InvalidNameError - UnsupportedFileType: UnsupportedFileType + UnsupportedFileTypeError: UnsupportedFileTypeError