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

Refactor toolbar variants as mixins.

Browse source
This commit is contained in:
Paulo Reis 2017-11-23 15:21:06 +00:00
parent 9e109ccaaa
commit f55ffff960
5 changed files with 56 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
services/web/app/views/project/editor/file-tree.pug
View file

@ -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()",

2
services/web/app/views/project/editor/pdf.pug
View file

@ -1,5 +1,5 @@
div.full-size.pdf(ng-controller="PdfController")
.toolbar.toolbar-tall
.toolbar.toolbar-pdf
.btn-group#recompile(
dropdown,
tooltip-html="'"+translate('recompile_pdf')+" <span class=\"keyboard-shortcut\">({{modifierKey}} + Enter)</span>'"

6
services/web/public/stylesheets/app/editor/file-tree.less
View file

@ -1,5 +1,9 @@
.toolbar.toolbar-filetree {
.toolbar-small-mixin;
.toolbar-alt-mixin;
}
aside#file-tree {
#file-tree {
.file-tree-inner {
position: absolute;
top: 32px;

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

@ -1,3 +1,12 @@
.toolbar.toolbar-pdf when (@is-overleaf = true) {
.toolbar-small-mixin;
.toolbar-alt-mixin;
}
.toolbar.toolbar-pdf when (@is-overleaf = false) {
.toolbar-tall-mixin;
}
.pdf-viewer, .pdf-logs, .pdf-errors, .pdf-uncompiled {
.full-size;
top: 58px;

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

@ -106,43 +106,55 @@
}
&.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: @toolbar-alt-bg-color;
.toolbar-alt-mixin;
}
}
.toolbar-small-mixin() {
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-tall-mixin() {
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-alt-mixin() {
background-color: @toolbar-alt-bg-color;
}
.toolbar-label {
display: none;
margin: 0 4px;