github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #195 from sharelatex/pr-style-v2-resizers

Browse source 
Style v2 resizers and synctex controls
This commit is contained in:
Paulo Jorge Reis 2017-12-11 16:13:13 +00:00 committed by GitHub
commit 314c5e1d58
9 changed files with 243 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
services/web/app/coffee/infrastructure/ExpressLocals.coffee
View file

@ -292,3 +292,14 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)->
res.locals.moduleIncludes = Modules.moduleIncludes res.locals.moduleIncludes = Modules.moduleIncludes
res.locals.moduleIncludesAvailable = Modules.moduleIncludesAvailable res.locals.moduleIncludesAvailable = Modules.moduleIncludesAvailable
next() 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
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()

5
services/web/app/views/project/editor.pug
View file

@ -43,8 +43,8 @@ block content
#chat-wrapper.full-size( #chat-wrapper.full-size(
layout="chat", layout="chat",
spacing-open="12", spacing-open="{{ui.chatResizerSizeOpen}}",
spacing-closed="0", spacing-closed="{{ui.chatResizerSizeClosed}}",
initial-size-east="250", initial-size-east="250",
init-closed-east="true", init-closed-east="true",
open-east="ui.chatOpen", open-east="ui.chatOpen",
@ -158,6 +158,7 @@ block requirejs
window.aceFingerprint = "#{fingerprint(jsPath + lib('ace') + '/ace.js')}" window.aceFingerprint = "#{fingerprint(jsPath + lib('ace') + '/ace.js')}"
window.aceWorkerPath = "#{aceWorkerPath}"; window.aceWorkerPath = "#{aceWorkerPath}";
window.pdfCMapsPath = "#{pdfCMapsPath}" window.pdfCMapsPath = "#{pdfCMapsPath}"
window.uiConfig = JSON.parse('!{JSON.stringify(uiConfig).replace(/\//g, "\\/")}');
script( script(
data-main=buildJsPath("ide.js", {fingerprint:false}), data-main=buildJsPath("ide.js", {fingerprint:false}),

9
services/web/app/views/project/editor/editor.pug
View file

@ -73,21 +73,20 @@ div.full-size(
ng-show="!!pdf.url && settings.pdfViewer == 'pdfjs'" ng-show="!!pdf.url && settings.pdfViewer == 'pdfjs'"
ng-controller="PdfSynctexController" ng-controller="PdfSynctexController"
) )
a.btn.btn-default.btn-xs( a.synctex-control.synctex-control-goto-pdf(
tooltip=translate('go_to_code_location_in_pdf') tooltip=translate('go_to_code_location_in_pdf')
tooltip-placement="right" tooltip-placement="right"
tooltip-append-to-body="true" tooltip-append-to-body="true"
ng-click="syncToPdf()" ng-click="syncToPdf()"
) )
i.fa.fa-long-arrow-right i.synctex-control-icon
br a.synctex-control.synctex-control-goto-code(
a.btn.btn-default.btn-xs(
tooltip-html="'"+translate('go_to_pdf_location_in_code', {}, true)+"'" tooltip-html="'"+translate('go_to_pdf_location_in_code', {}, true)+"'"
tooltip-placement="right" tooltip-placement="right"
tooltip-append-to-body="true" tooltip-append-to-body="true"
ng-click="syncToCode()" ng-click="syncToCode()"
) )
i.fa.fa-long-arrow-left i.synctex-control-icon
div.full-size( div.full-size(
ng-if="ui.pdfLayout == 'flat'" ng-if="ui.pdfLayout == 'flat'"

2
services/web/public/coffee/ide.coffee
View file

@ -77,6 +77,8 @@ define [
pdfWidth: 0 pdfWidth: 0
reviewPanelOpen: localStorage("ui.reviewPanelOpen.#{window.project_id}") reviewPanelOpen: localStorage("ui.reviewPanelOpen.#{window.project_id}")
miniReviewPanelVisible: false miniReviewPanelVisible: false
chatResizerSizeOpen: window.uiConfig.chatResizerSizeOpen
chatResizerSizeClosed: window.uiConfig.chatResizerSizeClosed
} }
$scope.onboarding = { $scope.onboarding = {
autoCompile: if window.showAutoCompileOnboarding then 'unseen' else 'dismissed' autoCompile: if window.showAutoCompileOnboarding then 'unseen' else 'dismissed'

14
services/web/public/coffee/ide/directives/layout.coffee
View file

@ -11,12 +11,12 @@ define [
if attrs.spacingOpen? if attrs.spacingOpen?
spacingOpen = parseInt(attrs.spacingOpen, 10) spacingOpen = parseInt(attrs.spacingOpen, 10)
else else
spacingOpen = 24 spacingOpen = window.uiConfig.defaultResizerSizeOpen
if attrs.spacingClosed? if attrs.spacingClosed?
spacingClosed = parseInt(attrs.spacingClosed, 10) spacingClosed = parseInt(attrs.spacingClosed, 10)
else else
spacingClosed = 24 spacingClosed = window.uiConfig.defaultResizerSizeClosed
options = options =
spacing_open: spacingOpen spacing_open: spacingOpen
@ -44,6 +44,12 @@ define [
if !attrs.minimumRestoreSizeWest? or (state.west.size >= attrs.minimumRestoreSizeWest and !state.west.initClosed) if !attrs.minimumRestoreSizeWest? or (state.west.size >= attrs.minimumRestoreSizeWest and !state.west.initClosed)
options.west = state.west 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 = () -> repositionControls = () ->
state = element.layout().readState() state = element.layout().readState()
if state.east? if state.east?
@ -53,9 +59,7 @@ define [
else else
controls.show() controls.show()
controls.css({ controls.css({
position: "absolute"
right: state.east.size right: state.east.size
"z-index": 3
}) })
resetOpenStates = () -> resetOpenStates = () ->
@ -112,7 +116,7 @@ define [
# Set the panel as overflowing (gives it higher z-index and sets overflow rules) # Set the panel as overflowing (gives it higher z-index and sets overflow rules)
layoutObj.allowOverflow overflowPane layoutObj.allowOverflow overflowPane
# Read the given z-index value and increment it, so that it's higher than synctex controls. # 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 overflowPaneEl.css "z-index", overflowPaneZVal + 1
resetOpenStates() resetOpenStates()

104
services/web/public/stylesheets/app/editor.less
View file

@ -14,6 +14,9 @@
@import "./editor/review-panel.less"; @import "./editor/review-panel.less";
@import "./editor/feature-onboarding.less"; @import "./editor/feature-onboarding.less";
@ui-layout-toggler-def-height: 50px;
@ui-resizer-extra-hit-area: 8px;
@keyframes blink { @keyframes blink {
0% { 0% {
opacity: 0.2; opacity: 0.2;
@ -261,9 +264,9 @@
} }
} }
.ui-layout-resizer { .ui-layout-resizer when (@is-overleaf = false) {
width: 6px; width: 6px;
background-color: #f4f4f4; background-color: @editor-resizer-bg-color;
border-left: 1px solid @editor-border-color; border-left: 1px solid @editor-border-color;
border-right: 1px solid @editor-border-color; border-right: 1px solid @editor-border-color;
.ui-layout-toggler { .ui-layout-toggler {
@ -276,28 +279,117 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-size: 16px !important; font-size: 16px !important;
line-height: 50px; line-height: 50px;
background-color: @editor-toggler-bg-color;
&:hover { &:hover {
background-color: #ddd; background-color: @editor-toggler-hover-bg-color;
color: #333; color: #333;
} }
} }
} }
.ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed {
.ui-layout-resizer when (@is-overleaf = true) {
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 (@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 { .ui-layout-toggler {
padding: 0 @ui-resizer-extra-hit-area !important;
background-image: linear-gradient(90deg,
transparent,
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 (@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);
}
}
}
.ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed {
.ui-layout-toggler when (@is-overleaf = false) {
&:before { &:before {
content: "\f104" content: "\f104"
} }
} }
} }
.ui-layout-resizer-east.ui-layout-resizer-open, .ui-layout-resizer-west.ui-layout-resizer-closed { .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 { &:before {
content: "\f105" content: "\f105"
} }
} }
} }
.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-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 { .ui-layout-resizer-dragging {
background-color: #ddd; background-color: @editor-resizer-bg-color-dragging;
} }
.context-menu { .context-menu {

68
services/web/public/stylesheets/app/editor/pdf.less
View file

@ -229,14 +229,72 @@
} }
.synctex-controls { .synctex-controls {
position: absolute;
z-index: @synctex-controls-z-index;
padding: @synctex-controls-padding;
top: 68px; top: 68px;
padding: 0px 2px;
.btn-xs {
line-height: 1.3;
padding: 0 2px 0;
}
} }
.synctex-controls when (@is-overleaf = true) {
margin-right: -11px;
}
.synctex-control {
.btn;
.btn-default;
.btn-xs;
display: block;
margin-bottom: 3px;
> .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 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 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) {
content: "\f178";
}
.synctex-control-goto-code > .synctex-control-icon::before when (@is-overleaf = false) {
content: "\f177";
}
.editor-dark { .editor-dark {
.pdf-logs { .pdf-logs {
background-color: lighten(@editor-dark-background-color, 10%); background-color: lighten(@editor-dark-background-color, 10%);

58
services/web/public/stylesheets/core/_common-variables.less
View file

@ -889,34 +889,42 @@
@footer-padding : 2em; @footer-padding : 2em;
// Editor header // Editor header
@toolbar-header-bg-color : transparent; @toolbar-header-bg-color : transparent;
@toolbar-header-shadow : 0 0 2px #ccc; @toolbar-header-shadow : 0 0 2px #ccc;
@toolbar-btn-color : @link-color; @toolbar-btn-color : @link-color;
@toolbar-btn-hover-color : @link-hover-color; @toolbar-btn-hover-color : @link-hover-color;
@toolbar-btn-hover-bg-color : darken(white, 10%); @toolbar-btn-hover-bg-color : darken(white, 10%);
@toolbar-btn-hover-text-shadow : 0 1px 0 rgba(0, 0, 0, 0.15); @toolbar-btn-hover-text-shadow : 0 1px 0 rgba(0, 0, 0, 0.15);
@toolbar-btn-active-color : white; @toolbar-btn-active-color : white;
@toolbar-btn-active-bg-color : @link-color; @toolbar-btn-active-bg-color : @link-color;
@toolbar-btn-active-shadow : inset 0 3px 5px rgba(0, 0, 0, 0.225); @toolbar-btn-active-shadow : inset 0 3px 5px rgba(0, 0, 0, 0.225);
@toolbar-alt-bg-color : #fafafa; @toolbar-alt-bg-color : #fafafa;
@toolbar-icon-btn-color : @gray-light; @toolbar-icon-btn-color : @gray-light;
@toolbar-icon-btn-hover-color : @gray-dark; @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-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-icon-btn-hover-boxshadow : inset 0 3px 5px rgba(0, 0, 0, 0.225);
@toolbar-border-bottom : 1px solid @toolbar-border-color; @toolbar-border-bottom : 1px solid @toolbar-border-color;
// Editor file-tree // Editor file-tree
@file-tree-bg : transparent; @file-tree-bg : transparent;
@file-tree-line-height : 2.6; @file-tree-line-height : 2.6;
@file-tree-item-color : @gray-darker; @file-tree-item-color : @gray-darker;
@file-tree-item-toggle-color : @gray; @file-tree-item-toggle-color : @gray;
@file-tree-item-icon-color : @gray-light; @file-tree-item-icon-color : @gray-light;
@file-tree-item-input-color : inherit; @file-tree-item-input-color : inherit;
@file-tree-item-folder-color : lighten(desaturate(@link-color, 10%), 5%); @file-tree-item-folder-color : lighten(desaturate(@link-color, 10%), 5%);
@file-tree-item-hover-bg : @gray-lightest; @file-tree-item-hover-bg : @gray-lightest;
@file-tree-item-selected-bg : transparent; @file-tree-item-selected-bg : transparent;
@file-tree-multiselect-bg : lighten(@brand-info, 40%); @file-tree-multiselect-bg : lighten(@brand-info, 40%);
@file-tree-multiselect-hover-bg : lighten(@brand-info, 30%); @file-tree-multiselect-hover-bg : lighten(@brand-info, 30%);
// 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 // Tags
@tag-border-radius : 0.25em; @tag-border-radius : 0.25em;
@tag-bg-color : @label-default-bg; @tag-bg-color : @label-default-bg;

35
services/web/public/stylesheets/core/ol-variables.less
View file

@ -171,23 +171,28 @@
@toolbar-icon-btn-color : #FFF; @toolbar-icon-btn-color : #FFF;
@toolbar-icon-btn-hover-color : #FFF; @toolbar-icon-btn-hover-color : #FFF;
@toolbar-icon-btn-hover-shadow : none; @toolbar-icon-btn-hover-shadow : none;
@toolbar-icon-btn-hover-boxshadow : none;
@toolbar-border-bottom : 1px solid @toolbar-border-color; @toolbar-border-bottom : 1px solid @toolbar-border-color;
@toolbar-icon-btn-hover-boxshadow : none;
// Editor file-tree // Editor file-tree
@file-tree-bg : @ol-blue-gray-4; @file-tree-bg : @ol-blue-gray-4;
@file-tree-line-height : 2.05; @file-tree-line-height : 2.05;
@file-tree-item-color : #FFF; @file-tree-item-color : #FFF;
@file-tree-item-input-color : @ol-blue-gray-5; @file-tree-item-input-color : @ol-blue-gray-5;
@file-tree-item-toggle-color : @ol-blue-gray-2; @file-tree-item-toggle-color : @ol-blue-gray-2;
@file-tree-item-icon-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-folder-color : @ol-blue-gray-2;
@file-tree-item-hover-bg : @ol-blue-gray-5; @file-tree-item-hover-bg : @ol-blue-gray-5;
@file-tree-item-selected-bg : @ol-green; @file-tree-item-selected-bg : @ol-green;
@file-tree-multiselect-bg : @ol-blue; @file-tree-multiselect-bg : @ol-blue;
@file-tree-multiselect-hover-bg : @ol-dark-blue; @file-tree-multiselect-hover-bg : @ol-dark-blue;
@file-tree-droppable-bg-color : tint(@ol-green, 5%); @file-tree-droppable-bg-color : tint(@ol-green, 5%);
//== Colors // 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;
//## Gray and brand colors for use across Bootstrap. //## Gray and brand colors for use across Bootstrap.
@gray-darker: #252525; @gray-darker: #252525;
@gray-dark: #505050; @gray-dark: #505050;