From 45804b5bef932ba86ff5a28a40f1a7ebcb7c5290 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Thu, 18 Oct 2018 15:47:18 +0200
Subject: [PATCH] Add icon to file sidebar tabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 apps/comments/js/commentstabview.js            |  4 ++++
 apps/files/js/detailsview.js                   |  3 ++-
 apps/files/js/detailtabview.js                 |  9 +++++++++
 apps/files/js/templates.js                     | 12 ++++++++++--
 apps/files/js/templates/detailsview.handlebars |  1 +
 apps/files_sharing/js/sharetabview.js          |  4 ++++
 core/css/apps.scss                             | 10 ++++++++++
 7 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/apps/comments/js/commentstabview.js b/apps/comments/js/commentstabview.js
index 35e73d3f4a..8ea4dbc2ff 100644
--- a/apps/comments/js/commentstabview.js
+++ b/apps/comments/js/commentstabview.js
@@ -89,6 +89,10 @@
 			return t('comments', 'Comments');
 		},
 
+		getIcon: function() {
+			return 'icon-comment';
+		},
+
 		setFileInfo: function(fileInfo) {
 			if (fileInfo) {
 				this.model = fileInfo;
diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js
index 2a5d589a73..ad5c999352 100644
--- a/apps/files/js/detailsview.js
+++ b/apps/files/js/detailsview.js
@@ -122,7 +122,8 @@
 			templateVars.tabHeaders = _.map(this._tabViews, function(tabView, i) {
 				return {
 					tabId: tabView.id,
-					label: tabView.getLabel()
+					label: tabView.getLabel(),
+					tabIcon: tabView.getIcon()
 				};
 			});
 
diff --git a/apps/files/js/detailtabview.js b/apps/files/js/detailtabview.js
index 0bd34a8818..a66cedbc15 100644
--- a/apps/files/js/detailtabview.js
+++ b/apps/files/js/detailtabview.js
@@ -49,6 +49,15 @@
 			return 'Tab ' + this.id;
 		},
 
+		/**
+		 * Returns the tab label
+		 *
+		 * @return {String}|{null} icon class
+		 */
+		getIcon: function() {
+			return null
+		},
+
 		/**
 		 * returns the jQuery object for HTML output
 		 *
diff --git a/apps/files/js/templates.js b/apps/files/js/templates.js
index 0511873c8f..a2bdae5b3c 100644
--- a/apps/files/js/templates.js
+++ b/apps/files/js/templates.js
@@ -7,13 +7,21 @@ templates['detailsview'] = template({"1":function(container,depth0,helpers,parti
     + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.tabHeaders : depth0),{"name":"each","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "</ul>\n";
 },"2":function(container,depth0,helpers,partials,data) {
-    var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+    var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
 
   return "	<li class=\"tabHeader\" data-tabid=\""
     + alias4(((helper = (helper = helpers.tabId || (depth0 != null ? depth0.tabId : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"tabId","hash":{},"data":data}) : helper)))
-    + "\" tabindex=\"0\">\n		<a href=\"#\" tabindex=\"-1\">"
+    + "\" tabindex=\"0\">\n	    "
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.tabIcon : depth0),{"name":"if","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "\n		<a href=\"#\" tabindex=\"-1\">"
     + alias4(((helper = (helper = helpers.label || (depth0 != null ? depth0.label : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"label","hash":{},"data":data}) : helper)))
     + "</a>\n	</li>\n";
+},"3":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return "<span class=\"icon "
+    + container.escapeExpression(((helper = (helper = helpers.tabIcon || (depth0 != null ? depth0.tabIcon : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"tabIcon","hash":{},"data":data}) : helper)))
+    + "\"></span>";
 },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
     var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {});
 
diff --git a/apps/files/js/templates/detailsview.handlebars b/apps/files/js/templates/detailsview.handlebars
index 841a8fe25f..4d489e4fa0 100644
--- a/apps/files/js/templates/detailsview.handlebars
+++ b/apps/files/js/templates/detailsview.handlebars
@@ -3,6 +3,7 @@
 <ul class="tabHeaders">
 	{{#each tabHeaders}}
 	<li class="tabHeader" data-tabid="{{tabId}}" tabindex="0">
+	    {{#if tabIcon}}<span class="icon {{tabIcon}}"></span>{{/if}}
 		<a href="#" tabindex="-1">{{label}}</a>
 	</li>
 	{{/each}}
diff --git a/apps/files_sharing/js/sharetabview.js b/apps/files_sharing/js/sharetabview.js
index fc7f2c5f04..3944293d5c 100644
--- a/apps/files_sharing/js/sharetabview.js
+++ b/apps/files_sharing/js/sharetabview.js
@@ -32,6 +32,10 @@
 			return t('files_sharing', 'Sharing');
 		},
 
+		getIcon: function() {
+			return 'icon-shared';
+		},
+
 		/**
 		 * Renders this details view
 		 */
diff --git a/core/css/apps.scss b/core/css/apps.scss
index a9e5a41910..cce21aa26f 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -789,6 +789,16 @@ kbd {
 		cursor: pointer;
 		color: var(--color-text-lighter);
 		margin-bottom: 1px;
+		.icon {
+			display: inline-block;
+			width: 16px;
+			height: 16px;
+			background-size: 16px;
+			vertical-align: middle;
+			margin-top: -2px;
+			margin-right: 3px;
+			opacity: .7;
+		}
 		a {
 			color: var(--color-text-lighter);
 			margin-bottom: 1px;