From f55ffff9609afaf4a41a9c096183368698a6db15 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Thu, 23 Nov 2017 15:21:06 +0000
Subject: [PATCH] Refactor toolbar variants as mixins.

---
 .../app/views/project/editor/file-tree.pug    |  2 +-
 services/web/app/views/project/editor/pdf.pug |  2 +-
 .../stylesheets/app/editor/file-tree.less     |  6 +-
 .../public/stylesheets/app/editor/pdf.less    |  9 +++
 .../stylesheets/app/editor/toolbar.less       | 68 +++++++++++--------
 5 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/services/web/app/views/project/editor/file-tree.pug b/services/web/app/views/project/editor/file-tree.pug
index 03c2bd79b7..1e5eaa73aa 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/pdf.pug b/services/web/app/views/project/editor/pdf.pug
index eb2b4bfefd..057cacb222 100644
--- a/services/web/app/views/project/editor/pdf.pug
+++ b/services/web/app/views/project/editor/pdf.pug
@@ -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>'"
diff --git a/services/web/public/stylesheets/app/editor/file-tree.less b/services/web/public/stylesheets/app/editor/file-tree.less
index 8d69d8f76b..a79775a057 100644
--- a/services/web/public/stylesheets/app/editor/file-tree.less
+++ b/services/web/public/stylesheets/app/editor/file-tree.less
@@ -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;
diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less
index 0c98050242..0351a64e03 100644
--- a/services/web/public/stylesheets/app/editor/pdf.less
+++ b/services/web/public/stylesheets/app/editor/pdf.less
@@ -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;
diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less
index 6eaede0d37..bca14e15da 100644
--- a/services/web/public/stylesheets/app/editor/toolbar.less
+++ b/services/web/public/stylesheets/app/editor/toolbar.less
@@ -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;