From 2fbcaebac714a3779a9664a7340dbea171c2137b Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 27 Aug 2018 12:39:53 +0100 Subject: [PATCH] More adjustments; style the dashboard. --- .../components/affiliationForm.coffee | 1 + services/web/public/img/ol-brand/overleaf.svg | 2 +- .../web/public/stylesheets/app/editor.less | 1 + .../public/stylesheets/app/editor/chat.less | 4 +- .../stylesheets/app/editor/history-v2.less | 4 +- .../public/stylesheets/app/project-list.less | 2 +- .../stylesheets/app/sidebar-v2-dash-pane.less | 6 +- .../public/stylesheets/components/navbar.less | 4 +- .../stylesheets/core/_common-variables.less | 5 +- .../stylesheets/core/ol-light-variables.less | 77 +++++++++++++++---- .../public/stylesheets/core/ol-variables.less | 7 +- 11 files changed, 85 insertions(+), 28 deletions(-) diff --git a/services/web/public/coffee/main/affiliations/components/affiliationForm.coffee b/services/web/public/coffee/main/affiliations/components/affiliationForm.coffee index 1c0c7d6229..abcdf50cd2 100644 --- a/services/web/public/coffee/main/affiliations/components/affiliationForm.coffee +++ b/services/web/public/coffee/main/affiliations/components/affiliationForm.coffee @@ -10,6 +10,7 @@ define [ _defaultDepartments = [] ctrl.addUniversityToSelection = (universityName) -> + console.log universityName { name: universityName, isUserSuggested: true } # Populates the countries dropdown UserAffiliationsDataService diff --git a/services/web/public/img/ol-brand/overleaf.svg b/services/web/public/img/ol-brand/overleaf.svg index 73d2a9b4e0..a1ba347f3a 100644 --- a/services/web/public/img/ol-brand/overleaf.svg +++ b/services/web/public/img/ol-brand/overleaf.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index 7e0e63113b..65041eeee8 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -92,6 +92,7 @@ .toolbar-editor { height: @editor-toolbar-height; background-color: @editor-toolbar-bg; + padding: 0 5px; overflow: hidden; position: relative; z-index: 10; // Prevent track changes showing over toolbar diff --git a/services/web/public/stylesheets/app/editor/chat.less b/services/web/public/stylesheets/app/editor/chat.less index 6a08cfc304..46c3585d24 100644 --- a/services/web/public/stylesheets/app/editor/chat.less +++ b/services/web/public/stylesheets/app/editor/chat.less @@ -133,12 +133,12 @@ height: @new-message-height; background-color: @chat-new-message-bg; padding: @line-height-computed / 4; - border-top: 1px solid @editor-border-color; + border-top: 1px solid @chat-new-message-border-color; textarea { overflow: auto; resize: none; border-radius: @border-radius-base; - border: 1px solid @editor-border-color; + border: 1px solid @chat-new-message-border-color; height: 100%; width: 100%; color: @chat-new-message-textarea-color; diff --git a/services/web/public/stylesheets/app/editor/history-v2.less b/services/web/public/stylesheets/app/editor/history-v2.less index 35190cd662..36504227a4 100644 --- a/services/web/public/stylesheets/app/editor/history-v2.less +++ b/services/web/public/stylesheets/app/editor/history-v2.less @@ -12,9 +12,11 @@ color: @history-toolbar-color; padding-left: (@line-height-computed / 2); } -.history-toolbar when (@is-overleaf = false) { + +.history-toolbar when (@is-overleaf = false) or (@is-overleaf-light) { border-bottom: @toolbar-border-bottom; } + .history-toolbar-selected-version { white-space: nowrap; overflow: hidden; diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index d97ae3d264..e5bc8da14c 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -169,7 +169,7 @@ ul.folders-menu { border-radius: @sidebar-active-border-radius; > a { background-color: @sidebar-active-bg; - font-weight: 700; + font-weight: @sidebar-active-font-weight; color: @sidebar-active-color; .subdued { color: @sidebar-active-color; diff --git a/services/web/public/stylesheets/app/sidebar-v2-dash-pane.less b/services/web/public/stylesheets/app/sidebar-v2-dash-pane.less index a14f3b4d4a..3379aba577 100644 --- a/services/web/public/stylesheets/app/sidebar-v2-dash-pane.less +++ b/services/web/public/stylesheets/app/sidebar-v2-dash-pane.less @@ -17,7 +17,7 @@ flex-shrink: 0; text-align: center; background-color: @v2-dash-pane-bg; - color: white; + color: @v2-dash-pane-color; font-size: 13px; padding: @line-height-computed / 2; } @@ -32,10 +32,10 @@ } .project-list-sidebar-v2-pane-toggle { - color: white; + color: @v2-dash-pane-toggle-color; padding: 0; line-height: 1; &:hover, &:active, &:focus { - color: white; + color: @v2-dash-pane-toggle-color; } } diff --git a/services/web/public/stylesheets/components/navbar.less b/services/web/public/stylesheets/components/navbar.less index f88b7c651d..01f41b0507 100755 --- a/services/web/public/stylesheets/components/navbar.less +++ b/services/web/public/stylesheets/components/navbar.less @@ -436,6 +436,7 @@ font-weight: @navbar-btn-font-weight; line-height: @navbar-btn-line-height; padding: @navbar-btn-padding; + background-color: @navbar-default-link-bg; &:hover, &:focus { @@ -466,6 +467,7 @@ color: @navbar-subdued-color; padding: @navbar-subdued-padding; margin-left: 0; + background-color: transparent; &:hover { color: @navbar-subdued-hover-color; background-color: @navbar-subdued-hover-bg; @@ -478,7 +480,7 @@ @media (min-width: @grid-float-breakpoint) { > li > a { - border-color: @navbar-default-link-color; + border-color: @navbar-default-link-border-color; margin-left: 1rem; } } diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 87183d8bf1..5e166c85d6 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -327,6 +327,7 @@ // Navbar links @navbar-default-link-color: @link-color; +@navbar-default-link-border-color: @navbar-default-link-color; @navbar-default-link-hover-color: @link-hover-color; @navbar-default-link-hover-bg: @link-hover-color; @navbar-default-link-active-color: #fff; @@ -835,7 +836,7 @@ @dropdown-divider-margin :((@line-height-computed / 2) - 1) 0; @dropdown-item-padding : 3px 20px; - +@navbar-default-link-bg : transparent; // Button colors and sizing @btn-border-radius-large : @border-radius-large; @@ -861,6 +862,7 @@ @sidebar-active-border-radius : @border-radius-small; @sidebar-active-bg : @link-color; @sidebar-active-color : #FFF; +@sidebar-active-font-weight : 700; @sidebar-hover-bg : transparent; @sidebar-hover-text-decoration : underline; @@ -968,6 +970,7 @@ @chat-new-message-bg : @gray-lightest; @chat-new-message-textarea-bg : #FFF; @chat-new-message-textarea-color : @gray-dark; +@chat-new-message-border-color : @editor-border-color; // PDF @pdf-top-offset : @toolbar-tall-height; diff --git a/services/web/public/stylesheets/core/ol-light-variables.less b/services/web/public/stylesheets/core/ol-light-variables.less index 3dffb3f005..7278c71297 100644 --- a/services/web/public/stylesheets/core/ol-light-variables.less +++ b/services/web/public/stylesheets/core/ol-light-variables.less @@ -1,5 +1,5 @@ // Styleguide colors -@ol-blue-gray-0 : #F4F5F8; +@ol-blue-gray-0 : #F4F5FB; @ol-blue-gray-1 : #DFE2E8; @ol-blue-gray-2 : #9DA7B7; @ol-blue-gray-3 : #727E91; @@ -17,19 +17,26 @@ @ol-type-color : @ol-blue-gray-3; // Sidebar -@sidebar-bg : @ol-blue-gray-0; -@sidebar-color : @ol-blue-gray-3; -@sidebar-link-color : @ol-blue-gray-4; -@sidebar-active-border-radius : 0; -@sidebar-active-bg : @ol-blue-gray-1; -@sidebar-active-color : @ol-blue-gray-4; -@sidebar-hover-bg : @ol-blue-gray-1; -@sidebar-hover-text-decoration : none; -@v2-dash-pane-bg : @ol-blue-gray-4; -@v2-dash-pane-link-color : #FFF; -@v2-dash-pane-btn-bg : @ol-blue-gray-5; -@v2-dash-pane-btn-hover-bg : @ol-blue-gray-6; +@sidebar-bg : #FFF; +@sidebar-color : @ol-blue-gray-2; +@sidebar-link-color : @ol-blue-gray-3; +@sidebar-active-bg : @ol-green; +@sidebar-active-color : #FFF; +@sidebar-hover-bg : @ol-blue-gray-1; +@sidebar-active-font-weight : normal; +@sidebar-hover-text-decoration : none; +@v2-dash-pane-bg : @ol-blue-gray-1; +@v2-dash-pane-link-color : @ol-blue; +@v2-dash-pane-toggle-color : @ol-blue-gray-3; +@v2-dash-pane-btn-bg : @ol-blue-gray-5; +@v2-dash-pane-btn-hover-bg : @ol-blue-gray-6; +@v2-dash-pane-color : @ol-blue-gray-3; + +@progress-bar-shadow : inset 0 -1px 0 rgba(0,0,0,.15); +@progress-bg : @ol-blue-gray-0; + +@input-border : @ol-blue-gray-1; // Editor file-tree @file-tree-bg : #FFF; @file-tree-line-height : 2.05; @@ -45,7 +52,7 @@ @file-tree-multiselect-hover-bg : @ol-dark-blue; @file-tree-droppable-bg-color : tint(@ol-green, 5%); -@content-alt-bg-color : @ol-blue-gray-1; +@content-alt-bg-color : @ol-blue-gray-0; // Editor resizers @editor-resizer-bg-color : @ol-blue-gray-1; @@ -54,13 +61,12 @@ @editor-toggler-hover-bg-color : @ol-green; @synctex-controls-z-index : 6; @synctex-controls-padding : 0; -@editor-border-color : @ol-blue-gray-5; - +@editor-border-color : @ol-blue-gray-1; @toolbar-border-color : @ol-blue-gray-1; @toolbar-alt-bg-color : #FFF; @editor-toolbar-bg : @toolbar-alt-bg-color; -@navbar-default-bg : @ol-blue-gray-4; + @toolbar-header-bg-color : #FFF; @toolbar-header-btn-border-color : @ol-blue-gray-1; @toolbar-btn-color : @ol-blue-gray-3; @@ -72,8 +78,45 @@ @project-name-color : @ol-blue-gray-3; @pdf-bg : @ol-blue-gray-0; +// Navbar +@navbar-default-bg : #FFF; +@navbar-default-border : @ol-blue-gray-1; +@navbar-default-link-bg : @ol-green; +@navbar-default-link-color : #FFF; +@navbar-default-link-border-color: transparent; +@navbar-default-link-hover-bg : @ol-green; +@navbar-default-link-active-bg : @ol-green; +@navbar-default-link-hover-color : @ol-green; + +@navbar-title-color : @ol-blue-gray-1; +@navbar-title-color-hover : @ol-blue-gray-2; +@navbar-default-color : @ol-blue-gray-3; +@navbar-brand-image-url : url(/img/ol-brand/overleaf.svg); + +@navbar-subdued-color : @ol-blue-gray-3; +@navbar-subdued-hover-bg : @ol-blue-gray-1; +@navbar-subdued-hover-color : @ol-blue-gray-3; + +@card-box-shadow : 0 0 0 1px @ol-blue-gray-1; + +// v2 History +@history-toolbar-color : @ol-blue-gray-3; +@history-entry-day-bg : @ol-blue-gray-2; +@history-base-bg : @ol-blue-gray-0; + // Formatting buttons @formatting-btn-color : @toolbar-icon-btn-color; @formatting-btn-bg : transparent; @formatting-btn-border : @ol-blue-gray-1; @formatting-menu-bg : transparent; + + +// Chat +@chat-bg : #FFF; +@chat-message-color : #FFF; +@chat-message-name-color : @ol-blue-gray-3; +@chat-message-date-color : @ol-blue-gray-3; +@chat-new-message-bg : @ol-blue-gray-0; +@chat-new-message-textarea-bg : #FFF; +@chat-new-message-textarea-color : @ol-blue-gray-6; +@chat-new-message-border-color : @ol-blue-gray-1; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 80f2fbda0e..f5ca77cf04 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -33,7 +33,7 @@ @navbar-default-bg : @ol-blue-gray-6; @navbar-default-border : transparent; @navbar-brand-image-url : url(/img/ol-brand/overleaf-white.svg); - +@navbar-default-link-bg : transparent; // Backgrounds @body-bg : #FFF; @content-alt-bg-color : @ol-blue-gray-1; @@ -110,6 +110,7 @@ @navbar-default-padding-h : 10px; @navbar-default-padding : @navbar-default-padding-v @navbar-default-padding-h; @navbar-default-link-color : #FFF; +@navbar-default-link-border-color : @navbar-default-link-color; @navbar-default-link-hover-bg : @ol-green; @navbar-default-link-active-bg : @ol-green; @navbar-default-link-hover-color : @ol-green; @@ -150,10 +151,13 @@ @sidebar-active-border-radius : 0; @sidebar-active-bg : @ol-blue-gray-6; @sidebar-active-color : #FFF; +@sidebar-active-font-weight : 700; @sidebar-hover-bg : @ol-blue-gray-4; @sidebar-hover-text-decoration : none; @v2-dash-pane-bg : @ol-blue-gray-4; @v2-dash-pane-link-color : #FFF; +@v2-dash-pane-color : #FFF; +@v2-dash-pane-toggle-color : #FFF; @v2-dash-pane-btn-bg : @ol-blue-gray-5; @v2-dash-pane-btn-hover-bg : @ol-blue-gray-6; @@ -279,6 +283,7 @@ @chat-new-message-bg : @ol-blue-gray-4; @chat-new-message-textarea-bg : @ol-blue-gray-1; @chat-new-message-textarea-color : @ol-blue-gray-6; +@chat-new-message-border-color : @editor-border-color; // Pagination @pagination-active-bg : @ol-dark-green;