github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-06 04:32:22 +00:00
Code Issues Projects Releases Packages Wiki Activity

Style the recompile button; use flexbox for the toolbar.

Browse source
This commit is contained in:
Paulo Reis 2017-11-23 16:42:38 +00:00
parent f55ffff960
commit 2464bec280
6 changed files with 40 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
div.full-size.pdf(ng-controller="PdfController")
.toolbar.toolbar-pdf
.btn-group#recompile(
.btn-group.btn-recompile-group#recompile(
dropdown,
tooltip-html="'"+translate('recompile_pdf')+" <span class=\"keyboard-shortcut\">({{modifierKey}} + Enter)</span>'"
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")
| &nbsp;&nbsp;
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

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

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

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

@ -1,9 +1,9 @@
.toolbar.toolbar-pdf when (@is-overleaf = true) {
.pdf .toolbar.toolbar-pdf when (@is-overleaf = true) {
.toolbar-small-mixin;
.toolbar-alt-mixin;
}
.toolbar.toolbar-pdf when (@is-overleaf = false) {
.pdf .toolbar.toolbar-pdf when (@is-overleaf = false) {
.toolbar-tall-mixin;
}
@ -22,6 +22,25 @@
}
}
.btn-recompile-group when (@is-overleaf = true) {
height: 100%;
}
.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;
}
.pdf-viewer {
iframe {
width: 100%;
@ -91,7 +110,6 @@
.pdf .toolbar {
.toolbar-right {
margin-right: @line-height-computed / 2;
a {
&:hover {
i {

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

@ -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;
@ -23,8 +25,8 @@
.toolbar-right > a:not(.btn) {
display: inline-block;
color: @toolbar-icon-btn-color;
padding: 4px 10px 5px;
margin: 1px 2px;
padding: 0 5px;
// margin: 1px 2px;
border-radius: @border-radius-small;
&:hover {
text-shadow: @toolbar-icon-btn-hover-shadow;
@ -72,12 +74,15 @@
}
.toolbar-left {
display: flex;
float: left;
text-align: center;
}
.toolbar-right {
float: right;
display: flex;
flex-grow: 1;
justify-content: flex-end;
.btn-full-height {
border-right: 0;
border-left: 1px solid @toolbar-border-color;
@ -121,35 +126,11 @@
.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;

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

@ -902,6 +902,7 @@
@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-border-bottom : 1px solid @toolbar-border-color;
// Editor file-tree
@file-tree-bg : transparent;

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

@ -171,7 +171,7 @@
@toolbar-icon-btn-color : #FFF;
@toolbar-icon-btn-hover-color : #FFF;
@toolbar-icon-btn-hover-shadow : none;
@toolbar-border-bottom : 0;
// Editor file-tree
@file-tree-bg : @ol-blue-gray-4;
@file-tree-item-color : #FFF;