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.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
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(
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",
@ -158,6 +158,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}),

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-controller="PdfSynctexController"
)
a.btn.btn-default.btn-xs(
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.fa.fa-long-arrow-right
br
a.btn.btn-default.btn-xs(
i.synctex-control-icon
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"
ng-click="syncToCode()"
)
i.fa.fa-long-arrow-left
i.synctex-control-icon
div.full-size(
ng-if="ui.pdfLayout == 'flat'"

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

@ -77,6 +77,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'

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

@ -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
@ -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?
@ -53,9 +59,7 @@ define [
else
controls.show()
controls.css({
position: "absolute"
right: state.east.size
"z-index": 3
})
resetOpenStates = () ->
@ -112,7 +116,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()

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

@ -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;
@ -261,9 +264,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 {
@ -276,28 +279,117 @@
-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;
}
}
}
.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 {
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 {
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"
}
}
}
.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 {
background-color: #ddd;
background-color: @editor-resizer-bg-color-dragging;
}
.context-menu {

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

@ -229,14 +229,72 @@
}
.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: 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 {
.pdf-logs {
background-color: lighten(@editor-dark-background-color, 10%);

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

@ -917,6 +917,14 @@
@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;
@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
@tag-border-radius : 0.25em;
@tag-bg-color : @label-default-bg;

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

@ -171,8 +171,8 @@
@toolbar-icon-btn-color : #FFF;
@toolbar-icon-btn-hover-color : #FFF;
@toolbar-icon-btn-hover-shadow : none;
@toolbar-icon-btn-hover-boxshadow : 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;
@ -186,8 +186,13 @@
@file-tree-multiselect-bg : @ol-blue;
@file-tree-multiselect-hover-bg : @ol-dark-blue;
@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-darker: #252525;
@gray-dark: #505050;