diff --git a/services/web/app/coffee/Features/Project/ProjectController.coffee b/services/web/app/coffee/Features/Project/ProjectController.coffee
index 9d9b7d9a13..c7fad83bf6 100644
--- a/services/web/app/coffee/Features/Project/ProjectController.coffee
+++ b/services/web/app/coffee/Features/Project/ProjectController.coffee
@@ -170,6 +170,8 @@ module.exports = ProjectController =
return notification
projects = ProjectController._buildProjectList results.projects, results.v1Projects?.projects
user = results.user
+ warnings = ProjectController._buildWarningsList results.v1Projects
+
ProjectController._injectProjectOwners projects, (error, projects) ->
return next(error) if error?
viewModel = {
@@ -181,7 +183,7 @@ module.exports = ProjectController =
user: user
hasSubscription: results.hasSubscription[0]
isShowingV1Projects: results.v1Projects?
- noV1Connection: results.v1Projects?.noConnection
+ warnings: warnings
}
if Settings?.algolia?.app_id? and Settings?.algolia?.read_only_api_key?
@@ -251,7 +253,7 @@ module.exports = ProjectController =
# Extract data from user's ObjectId
timestamp = parseInt(user_id.toString().substring(0, 8), 16)
- rolloutPercentage = 20 # Percentage of users to roll out to
+ rolloutPercentage = 40 # Percentage of users to roll out to
if !ProjectController._isInPercentageRollout('autocompile', user_id, rolloutPercentage)
# Don't show if user is not part of roll out
return cb(null, { enabled: false, showOnboarding: false })
@@ -427,6 +429,14 @@ module.exports = ProjectController =
project.owner = users[project.owner_ref.toString()]
callback null, projects
+ _buildWarningsList: (v1ProjectData = {}) ->
+ warnings = []
+ if v1ProjectData.noConnection
+ warnings.push 'No V1 Connection'
+ if v1ProjectData.hasHiddenV1Projects
+ warnings.push "Looks like you've got a lot of V1 projects! Some of them may be hidden on V2. To view them all, use the V1 dashboard."
+ return warnings
+
defaultSettingsForAnonymousUser = (user_id)->
id : user_id
ace:
diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug
index dc40d7b9ba..d1c6fa8156 100644
--- a/services/web/app/views/project/editor/editor.pug
+++ b/services/web/app/views/project/editor/editor.pug
@@ -118,7 +118,11 @@ div.full-size(
h3.popover-title #{translate("link_sharing")}
.popover-content
p #{translate("try_out_link_sharing")}
- img(src="/img/onboarding/linksharing/link-sharing.png" width="100%")
+ img(
+ src="/img/onboarding/linksharing/link-sharing.png"
+ alt="Link sharing demo"
+ width="100%"
+ )
p #{translate("try_link_sharing_description")}
button.btn.btn-default.btn-block(ng-click="dismiss()")
| #{translate("got_it")}
diff --git a/services/web/app/views/project/editor/file-tree.pug b/services/web/app/views/project/editor/file-tree.pug
index f936750a13..5b4934ede2 100644
--- a/services/web/app/views/project/editor/file-tree.pug
+++ b/services/web/app/views/project/editor/file-tree.pug
@@ -1,5 +1,5 @@
aside#file-tree(ng-controller="FileTreeController", ng-class="{ 'multi-selected': multiSelectedCount > 0 }").full-size
- .toolbar.toolbar-small.toolbar-alt(ng-if="permissions.write")
+ .toolbar.toolbar-filetree(ng-if="permissions.write")
a(
href,
ng-click="openNewDocModal()",
diff --git a/services/web/app/views/project/editor/header.pug b/services/web/app/views/project/editor/header.pug
index 49361b5a2e..c80c4d7b3d 100644
--- a/services/web/app/views/project/editor/header.pug
+++ b/services/web/app/views/project/editor/header.pug
@@ -7,9 +7,9 @@ header.toolbar.toolbar-header.toolbar-with-labels(
href,
ng-click="ui.leftMenuShown = true;",
)
- i.fa.fa-fw.fa-bars
+ i.fa.fa-fw.fa-bars.editor-menu-icon
p.toolbar-label #{translate("menu")}
- a(
+ a.toolbar-header-back-projects(
href="/project"
)
i.fa.fa-fw.fa-level-up
diff --git a/services/web/app/views/project/editor/pdf.pug b/services/web/app/views/project/editor/pdf.pug
index eb2b4bfefd..a3b3a2e2f9 100644
--- a/services/web/app/views/project/editor/pdf.pug
+++ b/services/web/app/views/project/editor/pdf.pug
@@ -1,6 +1,6 @@
div.full-size.pdf(ng-controller="PdfController")
- .toolbar.toolbar-tall
- .btn-group#recompile(
+ .toolbar.toolbar-pdf
+ .btn-group.btn-recompile-group#recompile(
dropdown,
tooltip-html="'"+translate('recompile_pdf')+" ({{modifierKey}} + Enter)'"
tooltip-class="keyboard-tooltip"
@@ -8,7 +8,7 @@ div.full-size.pdf(ng-controller="PdfController")
tooltip-append-to-body="true"
tooltip-placement="bottom"
)
- a.btn.btn-info(
+ a.btn.btn-recompile(
href,
ng-disabled="pdf.compiling",
ng-click="recompile()"
@@ -19,7 +19,7 @@ div.full-size.pdf(ng-controller="PdfController")
|
span(ng-show="!pdf.compiling") #{translate("recompile")}
span(ng-show="pdf.compiling") #{translate("compiling")}...
- a.btn.btn-info.dropdown-toggle(
+ a.btn.btn-recompile.dropdown-toggle(
href,
ng-disabled="pdf.compiling",
dropdown-toggle
@@ -102,6 +102,7 @@ div.full-size.pdf(ng-controller="PdfController")
tooltip-placement="bottom"
tooltip-append-to-body="true"
)
+ i.fa.fa-expand
i.full-screen
a(
href,
@@ -111,6 +112,7 @@ div.full-size.pdf(ng-controller="PdfController")
tooltip-placement="bottom"
tooltip-append-to-body="true"
)
+ i.fa.fa-compress
i.split-screen
i.split-screen
// end of toolbar
diff --git a/services/web/app/views/project/list/modals.pug b/services/web/app/views/project/list/modals.pug
index 37638e958f..1e12fb2293 100644
--- a/services/web/app/views/project/list/modals.pug
+++ b/services/web/app/views/project/list/modals.pug
@@ -313,3 +313,59 @@ script(type="text/ng-template", id="userProfileModalTemplate")
.modal-footer
button.btn.btn-info(ng-click="done()") #{translate("done")}
+
+script(type="text/ng-template", id="v1ImportModalTemplate")
+ .modal-header
+ button.close(ng-click="dismiss()") ×
+ h3 #{translate("import_project_to_v2")}
+
+ .modal-body.v1-import-wrapper
+ .v1-import-step-1(ng-show="step === 1")
+ img.v1-import-img(
+ src="/img/v1-import/v2-editor.png"
+ alt="The new V2 Editor."
+ )
+ h2.v1-import-title Try importing your project to V2!
+ p Some exciting copy about the new features:
+ ul
+ li Some stuff
+ li Some more stuff
+ li Yet more stuff
+
+ .v1-import-step-2(ng-show="step === 2")
+ div.v1-import-warning(aria-label="Warning symbol.")
+ i.fa.fa-exclamation-triangle
+ h2.v1-import-title #[strong Warning:] Overleaf V2 is in beta
+ p Once importing your project you will lose access to the some of the features of Overleaf V1. This includes the git bridge, journal integrations, WYSIWYG and linked files. We’re working on bringing these features to V2!
+ p Once you have imported a project to V2 you #[strong cannot go back to V1].
+ p Are you sure you want to import to V2?
+
+ .modal-footer.v1-import-footer
+ div(ng-show="step === 1")
+ if settings.overleaf && settings.overleaf.host
+ a.btn.btn-primary.v1-import-btn(
+ ng-href=settings.overleaf.host + "/{{project.id}}"
+ ) #{translate("open_in_v1")}
+ button.btn.btn-primary.v1-import-btn(
+ ng-click="moveToConfirmation()"
+ ) #{translate("import_to_v2")}
+ div(ng-show="step === 2")
+ form(
+ async-form="v1Import",
+ name="v1ImportForm",
+ action="{{'/overleaf/project/'+ project.id + '/import'}}"
+ method="POST"
+ ng-cloak
+ )
+ input(name='_csrf', type='hidden', value=csrfToken)
+ form-messages(for="v1ImportForm")
+ if settings.overleaf && settings.overleaf.host
+ a.btn.btn-primary.v1-import-btn(
+ ng-href=settings.overleaf.host + "/{{project.id}}"
+ ng-class="{disabled: v1ImportForm.inflight || v1ImportForm.success}"
+ ) #{translate("never_mind_open_in_v1")}
+ input.btn.btn-primary.v1-import-btn(
+ type="submit",
+ value=translate('yes_im_sure')
+ ng-disabled="v1ImportForm.inflight || v1ImportForm.success"
+ )
diff --git a/services/web/app/views/project/list/project-list.pug b/services/web/app/views/project/list/project-list.pug
index 0db4f49400..6f568a7b40 100644
--- a/services/web/app/views/project/list/project-list.pug
+++ b/services/web/app/views/project/list/project-list.pug
@@ -114,9 +114,9 @@
) #{translate("delete_forever")}
.row.row-spaced
- if noV1Connection
+ each warning in warnings
.col-xs-12
- .alert.alert-warning No V1 Connection
+ .alert.alert-warning(role="alert")= warning
.col-xs-12
.card.card-thin.project-list-card
diff --git a/services/web/app/views/project/list/v1-item.pug b/services/web/app/views/project/list/v1-item.pug
index ace8a80b9a..61815068f6 100644
--- a/services/web/app/views/project/list/v1-item.pug
+++ b/services/web/app/views/project/list/v1-item.pug
@@ -5,11 +5,10 @@
tooltip-append-to-body="true"
)
span
- if settings.overleaf && settings.overleaf.host
- a.projectName(
- href=settings.overleaf.host + "/{{project.id}}"
- stop-propagation="click"
- ) {{project.name}}
+ button.btn.btn-link.v1ProjectName(
+ ng-click="openV1ImportModal(project)"
+ stop-propagation="click"
+ ) {{project.name}}
.col-xs-2
span.owner {{ownerName()}}
diff --git a/services/web/public/coffee/main/project-list/modal-controllers.coffee b/services/web/public/coffee/main/project-list/modal-controllers.coffee
index 179e0d91ce..609a16cb77 100644
--- a/services/web/public/coffee/main/project-list/modal-controllers.coffee
+++ b/services/web/public/coffee/main/project-list/modal-controllers.coffee
@@ -123,3 +123,13 @@ define [
$scope.onComplete = (error, name, response) ->
if response.project_id?
window.location = '/project/' + response.project_id
+
+ App.controller 'V1ImportModalController', ($scope, $modalInstance, project) ->
+ $scope.project = project
+ $scope.step = 1
+
+ $scope.dismiss = () ->
+ $modalInstance.dismiss('cancel')
+
+ $scope.moveToConfirmation = () ->
+ $scope.step = 2
diff --git a/services/web/public/coffee/main/project-list/project-list.coffee b/services/web/public/coffee/main/project-list/project-list.coffee
index 1d81504c74..f4a6951e4a 100644
--- a/services/web/public/coffee/main/project-list/project-list.coffee
+++ b/services/web/public/coffee/main/project-list/project-list.coffee
@@ -442,6 +442,16 @@ define [
path = "/project/#{selected_project_ids[0]}/download/zip"
window.location = path
+
+ $scope.openV1ImportModal = (project) ->
+ $modal.open(
+ templateUrl: 'v1ImportModalTemplate'
+ controller: 'V1ImportModalController'
+ size: 'lg'
+ windowClass: 'v1-import-modal'
+ resolve:
+ project: () -> project
+ )
if storedUIOpts?.filter?
if storedUIOpts.filter == "tag" and storedUIOpts.selectedTagId?
diff --git a/services/web/public/img/ol-brand/overleaf-o-grey.svg b/services/web/public/img/ol-brand/overleaf-o-grey.svg
index 3b47c37cba..921148814f 100644
--- a/services/web/public/img/ol-brand/overleaf-o-grey.svg
+++ b/services/web/public/img/ol-brand/overleaf-o-grey.svg
@@ -1,18 +1 @@
-
-
-
+
\ No newline at end of file
diff --git a/services/web/public/img/ol-brand/overleaf-o-white.svg b/services/web/public/img/ol-brand/overleaf-o-white.svg
new file mode 100644
index 0000000000..85188b512c
--- /dev/null
+++ b/services/web/public/img/ol-brand/overleaf-o-white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/services/web/public/img/ol-brand/overleaf-o.svg b/services/web/public/img/ol-brand/overleaf-o.svg
index d95cee9ded..223203dc8f 100644
--- a/services/web/public/img/ol-brand/overleaf-o.svg
+++ b/services/web/public/img/ol-brand/overleaf-o.svg
@@ -1,10 +1 @@
-
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/services/web/public/img/v1-import/v2-editor.png b/services/web/public/img/v1-import/v2-editor.png
new file mode 100644
index 0000000000..5079d77158
Binary files /dev/null and b/services/web/public/img/v1-import/v2-editor.png differ
diff --git a/services/web/public/stylesheets/app/base.less b/services/web/public/stylesheets/app/base.less
index a78e1a7cfa..7f2d9a55ed 100644
--- a/services/web/public/stylesheets/app/base.less
+++ b/services/web/public/stylesheets/app/base.less
@@ -2,7 +2,7 @@
padding: (@line-height-computed / 4) (@line-height-computed / 2);
background-color: @state-warning-bg;
color: #333;
- border-bottom: 1px solid @toolbar-border-color;
+ border-bottom: 1px solid @common-border-color;
}
.clickable {
diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index 75b7121094..e37d829710 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -26,6 +26,20 @@
}
}
+.editor-menu-icon when (@is-overleaf = true) {
+ &.fa {
+ width: 1em;
+ background: url(/img/ol-brand/overleaf-o-white.svg) center / contain no-repeat;
+
+ &::before {
+ // Disable the font-awesome icon when in Overleaf by replacing it with a
+ // non-breakable space instead (otherwise the browser would render a
+ // zero-width element).
+ content: "\00a0";
+ }
+ }
+}
+
.full-size {
position: absolute;
top: 0;
@@ -250,8 +264,8 @@
.ui-layout-resizer {
width: 6px;
background-color: #f4f4f4;
- border-left: 1px solid @toolbar-border-color;
- border-right: 1px solid @toolbar-border-color;
+ border-left: 1px solid @editor-border-color;
+ border-right: 1px solid @editor-border-color;
.ui-layout-toggler {
color: #999;
font-family: FontAwesome;
diff --git a/services/web/public/stylesheets/app/editor/chat.less b/services/web/public/stylesheets/app/editor/chat.less
index d0ad76fe9c..c782384cb7 100644
--- a/services/web/public/stylesheets/app/editor/chat.less
+++ b/services/web/public/stylesheets/app/editor/chat.less
@@ -126,12 +126,12 @@
height: @new-message-height;
background-color: @gray-lightest;
padding: @line-height-computed / 4;
- border-top: 1px solid @toolbar-border-color;
+ border-top: 1px solid @editor-border-color;
textarea {
overflow: auto;
resize: none;
border-radius: @border-radius-base;
- border: 1px solid @toolbar-border-color;
+ border: 1px solid @editor-border-color;
height: 100%;
width: 100%;
color: @gray-dark;
diff --git a/services/web/public/stylesheets/app/editor/file-tree.less b/services/web/public/stylesheets/app/editor/file-tree.less
index 7847822bf9..162b90c52f 100644
--- a/services/web/public/stylesheets/app/editor/file-tree.less
+++ b/services/web/public/stylesheets/app/editor/file-tree.less
@@ -1,5 +1,20 @@
+.fake-full-width-bg(@bg-color) {
+ &::before {
+ content: '\00a0';
+ position: absolute;
+ width: 100%;
+ right: 100%;
+ background-color: @bg-color;
+ }
+}
-aside#file-tree {
+#file-tree {
+ .toolbar.toolbar-filetree {
+ .toolbar-small-mixin;
+ .toolbar-alt-mixin;
+ padding: 0 5px;
+ }
+
.file-tree-inner {
position: absolute;
top: 32px;
@@ -7,12 +22,14 @@ aside#file-tree {
left: 0;
right: 0;
overflow-y: auto;
+ background-color: @file-tree-bg;
&.no-toolbar {
top: 0;
}
}
+ // TODO; Consolidate with "Project files" in Overleaf
h3 {
font-size: 1rem;
border-bottom: 1px solid @gray;
@@ -20,10 +37,13 @@ aside#file-tree {
margin: (@line-height-computed / 2);
}
- ul.file-tree-list {
+ ul.file-tree-list when (@is-overleaf = false) {
font-size: 0.8rem;
- margin: 0;
padding: (@line-height-computed / 4) 0;
+ }
+
+ ul.file-tree-list {
+ margin: 0;
overflow-x: hidden;
height: 100%;
@@ -32,7 +52,7 @@ aside#file-tree {
}
li {
- line-height: 2.6;
+ line-height: @file-tree-line-height;
position: relative;
.entity {
@@ -40,29 +60,42 @@ aside#file-tree {
}
.entity-name {
- color: @gray-darker;
+ color: @file-tree-item-color;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
- background-color: @gray-lightest;
+ background-color: @file-tree-item-hover-bg;
+ }
+ &:hover when (@is-overleaf = true) {
+ // When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the
+ // element not fill the entire file-tree width (as it's spaced from the left-hand side via margin)
+ // and, in consequence, the background gets clipped. The ::before pseudo-selector is used to fill
+ // the empty space.
+ .fake-full-width-bg(@file-tree-item-hover-bg);
}
input {
line-height: 1.6;
}
- &.droppable-hover {
- background-color: fade(@file-tree-droppable-background-color, 60%);
+ &.droppable-hover when (@is-overleaf = false) {
+ background-color: fade(@file-tree-droppable-bg-color, 60%);
}
+
+ &.droppable-hover when (@is-overleaf = true) {
+ background-color: @file-tree-droppable-bg-color;
+ .fake-full-width-bg(@file-tree-droppable-bg-color);
+ }
+
}
i.fa {
- color: @gray-light;
+ color: @file-tree-item-icon-color;
font-size: 14px;
}
i.fa-folder-open, i.fa-folder {
- color: lighten(desaturate(@link-color, 10%), 5%);
+ color: @file-tree-item-folder-color;
font-size: 14px;
}
@@ -70,14 +103,31 @@ aside#file-tree {
width: 24px;
padding: 6px;
font-size: 0.7rem;
- color: @gray
+ color: @file-tree-item-toggle-color;
}
&.multi-selected {
- > .entity > .entity-name {
- background-color: lighten(@brand-info, 40%);
+ > .entity > .entity-name when (@is-overleaf = false) {
+ background-color: @file-tree-multiselect-bg;
&:hover {
- background-color: lighten(@brand-info, 30%);
+ background-color: @file-tree-multiselect-hover-bg;
+ }
+ }
+ > .entity when (@is-overleaf = true) {
+ > .entity-name {
+ > div > i.fa,
+ > i.fa,
+ .entity-menu-toggle i.fa {
+ color: #FFF;
+ }
+ color: #FFF;
+ font-weight: bold;
+ background-color: @file-tree-multiselect-bg;
+ .fake-full-width-bg(@file-tree-multiselect-bg);
+ &:hover {
+ background-color: @file-tree-multiselect-hover-bg;
+ .fake-full-width-bg(@file-tree-multiselect-hover-bg);
+ }
}
}
}
@@ -96,6 +146,7 @@ aside#file-tree {
top: 1px;
left: 44px;
right: 32px;
+ color: @file-tree-item-input-color;
input {
width: 100%;
}
@@ -111,7 +162,7 @@ aside#file-tree {
&:not(.multi-selected) {
ul.file-tree-list li.selected {
- > .entity > .entity-name {
+ > .entity > .entity-name when (@is-overleaf = false) {
color: @link-color;
border-right: 4px solid @link-color;
font-weight: bold;
@@ -123,15 +174,38 @@ aside#file-tree {
display: inline;
}
}
+
+ > .entity when (@is-overleaf = true) {
+ > .entity-name {
+ > div > i.fa,
+ > i.fa,
+ .entity-menu-toggle i.fa {
+ color: #FFF;
+ }
+ background-color: @file-tree-item-selected-bg;
+ font-weight: bold;
+ padding-right: 32px;
+ .fake-full-width-bg(@file-tree-item-selected-bg);
+
+ .entity-menu-toggle {
+ display: inline;
+ }
+ }
+ }
}
}
- ul.droppable-hover {
- background-color: fade(@file-tree-droppable-background-color, 60%);
+ ul.droppable-hover.file-tree-list when (@is-overleaf = false) {
+ background-color: fade(@file-tree-droppable-bg-color, 60%);
+ }
+ ul.droppable-hover.file-tree-list when (@is-overleaf = true) {
+ background-color: @file-tree-droppable-bg-color;
+ .fake-full-width-bg(@file-tree-droppable-bg-color);
}
}
-.editor-dark {
+// TODO check if the OL Beta theme is OK with darker themes.
+.editor-dark when (@is-overleaf = false) {
aside#file-tree {
// background-color: lighten(@editor-dark-background-color, 10%);
@@ -159,6 +233,4 @@ aside#file-tree {
}
}
}
-
-
}
diff --git a/services/web/public/stylesheets/app/editor/history.less b/services/web/public/stylesheets/app/editor/history.less
index 81af8f989f..b6dca4b7cc 100644
--- a/services/web/public/stylesheets/app/editor/history.less
+++ b/services/web/public/stylesheets/app/editor/history.less
@@ -70,7 +70,7 @@
}
aside.change-list {
- border-left: 1px solid @toolbar-border-color;
+ border-left: 1px solid @editor-border-color;
height: 100%;
width: @changesListWidth;
position: absolute;
@@ -91,7 +91,7 @@
.day {
background-color: #fafafa;
- border-bottom: 1px solid @toolbar-border-color;
+ border-bottom: 1px solid @editor-border-color;
padding: 4px;
font-weight: bold;
text-align: center;
@@ -132,7 +132,7 @@
padding: (@line-height-computed / 4);
padding-left: 38px;
min-height: 38px;
- border-bottom: 1px solid @toolbar-border-color;
+ border-bottom: 1px solid @editor-border-color;
cursor: pointer;
&:hover {
background-color: @gray-lightest;
diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less
index 0c98050242..a873cd5e8f 100644
--- a/services/web/public/stylesheets/app/editor/pdf.less
+++ b/services/web/public/stylesheets/app/editor/pdf.less
@@ -1,3 +1,15 @@
+.pdf .toolbar.toolbar-pdf when (@is-overleaf = true) {
+ .toolbar-small-mixin;
+ .toolbar-alt-mixin;
+ border-bottom: 0;
+ padding-right: 5px;
+}
+
+.pdf .toolbar.toolbar-pdf when (@is-overleaf = false) {
+ .toolbar-tall-mixin;
+ padding: 0 (@line-height-computed / 2);
+}
+
.pdf-viewer, .pdf-logs, .pdf-errors, .pdf-uncompiled {
.full-size;
top: 58px;
@@ -13,6 +25,42 @@
}
}
+.btn-recompile-group when (@is-overleaf = true) {
+ align-self: stretch;
+ margin-right: 5px;
+}
+
+.btn-recompile-group when (@is-overleaf = false) {
+ margin-right: (@line-height-computed / 2);
+}
+
+
+.btn-recompile when (@is-overleaf = true) {
+ height: 100%;
+ .btn-primary;
+ padding-top: 3px;
+ padding-bottom: 3px;
+ &:first-child {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+}
+
+.btn-recompile when (@is-overleaf = false) {
+ .btn-info;
+}
+
+.btn-split-screen when (@is-overleaf = false) {
+ .fa {
+ display: none;
+ }
+}
+.btn-split-screen when (@is-overleaf = true) {
+ .fa {
+ display: none;
+ }
+}
+
.pdf-viewer {
iframe {
width: 100%;
@@ -82,31 +130,43 @@
.pdf .toolbar {
.toolbar-right {
- margin-right: @line-height-computed / 2;
a {
&:hover {
- i {
+ i when (@is-overleaf = false) {
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
border-color: @gray-dark;
}
}
- i {
+ i when (@is-overleaf = false) {
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid @gray-light;
margin-top: 5px;
}
+
i.full-screen {
border-top-width: 3px;
border-radius: 2px;
}
+
+ i.full-screen when (@is-overleaf = true) {
+ display: none;
+ }
i.split-screen {
width: 7px;
border-top-width: 3px;
border-radius: 2px;
margin-left: 2px;
}
+
+ i.split-screen when (@is-overleaf = true) {
+ display: none;
+ }
+
+ i.fa when (@is-overleaf = false) {
+ display: none;
+ }
}
}
}
diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less
index 15ed39f6a7..5e846be008 100644
--- a/services/web/public/stylesheets/app/editor/review-panel.less
+++ b/services/web/public/stylesheets/app/editor/review-panel.less
@@ -902,6 +902,13 @@
}
}
+.review-icon when (@is-overleaf) {
+ background-position-y: -60px;
+ .toolbar .btn-full-height:hover & {
+ background-position-y: -60px;
+ }
+}
+
.resolved-comments-toggle {
font-size: 14px;
color: lighten(@rp-type-blue, 25%);
diff --git a/services/web/public/stylesheets/app/editor/search.less b/services/web/public/stylesheets/app/editor/search.less
index 93e7e507d6..f31c59dd6f 100644
--- a/services/web/public/stylesheets/app/editor/search.less
+++ b/services/web/public/stylesheets/app/editor/search.less
@@ -1,6 +1,6 @@
.ace_search {
background-color: @gray-lightest;
- border: 1px solid @toolbar-border-color;
+ border: 1px solid @editor-border-color;
border-top: 0 none;
width: 350px;
overflow: hidden;
diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less
index 1bb5f62bdc..5c00f00567 100644
--- a/services/web/public/stylesheets/app/editor/toolbar.less
+++ b/services/web/public/stylesheets/app/editor/toolbar.less
@@ -1,6 +1,8 @@
.toolbar {
+ display: flex;
+ align-items: center;
height: 40px;
- border-bottom: 1px solid @toolbar-border-color;
+ border-bottom: @toolbar-border-bottom;
> a, .toolbar-right > a {
position: relative;
@@ -22,13 +24,16 @@
.toolbar-left > a:not(.btn),
.toolbar-right > a:not(.btn) {
display: inline-block;
- color: @gray-light;
- padding: 4px 10px 5px;
- margin: 1px 2px;
+ color: @toolbar-icon-btn-color;
+ padding: 0 5px;
border-radius: @border-radius-small;
+ &.toolbar-header-back-projects {
+ padding: 5px 10px 4px;
+ margin-bottom: 1px;
+ }
&:hover {
- text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
- color: @gray-dark;
+ text-shadow: @toolbar-icon-btn-hover-shadow;
+ color: @toolbar-icon-btn-hover-color;
text-decoration: none;
}
&.active, &:active {
@@ -37,7 +42,7 @@
}
color: white;
background-color: @link-color;
- .box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.225));
+ box-shadow: @toolbar-icon-btn-hover-boxshadow;
&:hover {
color: white;
}
@@ -48,18 +53,18 @@
border: none;
border-radius: 0;
border-right: 1px solid @toolbar-border-color;
- color: @link-color;
+ color: @toolbar-btn-color;
padding: 3px 10px 5px;
font-size: 20px;
&:hover {
- text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
- background-color: darken(white, 10%);
- color: @link-hover-color;
+ text-shadow: @toolbar-btn-hover-text-shadow;
+ background-color: @toolbar-btn-hover-bg-color;
+ color: @toolbar-btn-hover-color;
}
&.active, &:active {
- color: white;
- background-color: @link-color;
- .box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.225));
+ color: @toolbar-btn-active-color;
+ background-color: @toolbar-btn-active-bg-color;
+ box-shadow: @toolbar-btn-active-shadow;
}
.label {
top: 4px;
@@ -72,12 +77,17 @@
}
.toolbar-left {
+ display: flex;
float: left;
text-align: center;
+ align-items: center;
}
.toolbar-right {
- float: right;
+ display: flex;
+ align-items: center;
+ flex-grow: 1;
+ justify-content: flex-end;
.btn-full-height {
border-right: 0;
border-left: 1px solid @toolbar-border-color;
@@ -96,7 +106,8 @@
}
&.toolbar-header {
- box-shadow: 0 0 2px #ccc;
+ background-color: @toolbar-header-bg-color;
+ box-shadow: @toolbar-header-shadow;
position: absolute;
top: 0;
left: 0;
@@ -105,43 +116,30 @@
}
&.toolbar-small {
- height: 32px;
- > a, .toolbar-right > a {
- padding: 2px 4px 1px 4px;
- margin: 0;
- margin-top: 2px;
- }
- > a {
- margin-left: 2px;
- }
- .toolbar-right > a {
- margin-left: 0;
- margin-right: 2px;
- }
+ .toolbar-small-mixin;
}
&.toolbar-tall {
- height: 58px;
- padding-top: 10px;
- > a, .toolbar-right > a {
- padding: 4px 10px 5px;
- }
- > a.btn, .toolbar-right > a.btn {
- margin: 0 (@line-height-computed / 2);
- }
- .btn-group {
- margin: 0 (@line-height-computed / 2);
- > .btn-group {
- margin: 0;
- }
- }
+ .toolbar-small-mixin;
}
&.toolbar-alt {
- background-color: #fafafa;
+ .toolbar-alt-mixin;
}
}
+.toolbar-small-mixin() {
+ height: 32px;
+}
+
+.toolbar-tall-mixin() {
+ height: 58px;
+ padding-top: 10px;
+}
+.toolbar-alt-mixin() {
+ background-color: @toolbar-alt-bg-color;
+}
+
.toolbar-label {
display: none;
margin: 0 4px;
diff --git a/services/web/public/stylesheets/app/list/v1-import-modal.less b/services/web/public/stylesheets/app/list/v1-import-modal.less
new file mode 100644
index 0000000000..64bb9fda37
--- /dev/null
+++ b/services/web/public/stylesheets/app/list/v1-import-modal.less
@@ -0,0 +1,24 @@
+.v1-import-title {
+ text-align: center;
+}
+
+.v1-import-img {
+ width: 100%;
+}
+
+.v1-import-warning {
+ text-align: center;
+ color: #fdce02;
+ font-size: 14em;
+ line-height: 1em;
+}
+
+.v1-import-footer {
+ display: flex;
+ justify-content: space-evenly;
+ text-align: left;
+}
+
+ .v1-import-btn {
+ width: 20rem;
+ }
\ No newline at end of file
diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less
index 687cd545fc..1c3c4490ae 100644
--- a/services/web/public/stylesheets/app/project-list.less
+++ b/services/web/public/stylesheets/app/project-list.less
@@ -1,3 +1,5 @@
+@import "./list/v1-import-modal.less";
+
@announcements-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
@keyframes pulse {
@@ -331,6 +333,10 @@ ul.project-list {
.projectName {
margin-right: @line-height-computed / 4;
}
+ .v1ProjectName {
+ margin-right: @line-height-computed / 4;
+ padding: 0;
+ }
.tag-label {
margin-left: @line-height-computed / 4;
diff --git a/services/web/public/stylesheets/app/translations.less b/services/web/public/stylesheets/app/translations.less
index 3b79b94aff..7ae7532b6c 100644
--- a/services/web/public/stylesheets/app/translations.less
+++ b/services/web/public/stylesheets/app/translations.less
@@ -3,7 +3,7 @@
padding: (@line-height-computed / 4) (@line-height-computed / 2);
background-color: @state-warning-bg;
color: #333;
- border-bottom: 1px solid @toolbar-border-color;
+ border-bottom: 1px solid @common-border-color;
text-align:center;
img {
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 0b5d3bf744..acf6bcc91f 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -794,7 +794,9 @@
@left-menu-animation-duration: 0.35s;
@toolbar-border-color: @gray-lighter;
-@file-tree-droppable-background-color: rgb(252, 231, 199);
+@common-border-color: @gray-lighter;
+@editor-border-color: @gray-lighter;
+@file-tree-droppable-bg-color: rgb(252, 231, 199);
@editor-dark-background-color: #333;
@editor-dark-toolbar-border-color: #222;
@@ -876,16 +878,45 @@
@folders-untagged-line-height : 1.7;
// Progress bars
-@progress-border-radius : @border-radius-base;
-@progress-border-width : 1px;
-@progress-bar-shadow : inset 0 -1px 0 rgba(0,0,0,.15);
+@progress-border-radius : @border-radius-base;
+@progress-border-width : 1px;
+@progress-bar-shadow : inset 0 -1px 0 rgba(0,0,0,.15);
// Footer
-@footer-link-color : @link-color;
-@footer-link-hover-color : @link-hover-color;
-@footer-bg-color : transparent;
-@footer-padding : 2em;
+@footer-link-color : @link-color;
+@footer-link-hover-color : @link-hover-color;
+@footer-bg-color : transparent;
+@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-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;
+@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%);
// 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 61c74d0230..2061a40980 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -8,7 +8,7 @@
@ol-blue-gray-1 : #E4E8EE;
@ol-blue-gray-2 : #9DA7B7;
@ol-blue-gray-3 : #5D6879;
-@ol-blue-gray-4 : #485973;
+@ol-blue-gray-4 : #455265;
@ol-blue-gray-5 : #2C3645;
@ol-blue-gray-6 : #1E2530;
@@ -159,6 +159,36 @@
@footer-link-hover-color : @ol-dark-green;
@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-icon-btn-hover-boxshadow : none;
+@toolbar-border-bottom : 1px solid @toolbar-border-color;
+// 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;
+@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%);
//== Colors
//
//## Gray and brand colors for use across Bootstrap.