Merge pull request #11905 from nextcloud/design/noid/tab-icons

Add icon to file sidebar tabs

4 files changed, 22 insertions, 3 deletions

diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js
index 675e380b52b..cd602961c0a 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 0bd34a88188..a66cedbc15d 100644
--- a/apps/files/js/detailtabview.js
+++ b/apps/files/js/detailtabview.js
@@ -50,6 +50,15 @@
 		},
 
 		/**
+		 * Returns the tab label
+		 *
+		 * @return {String}|{null} icon class
+		 */
+		getIcon: function() {
+			return null
+		},
+
+		/**
 		 * returns the jQuery object for HTML output
 		 *
 		 * @returns {jQuery}
diff --git a/apps/files/js/templates.js b/apps/files/js/templates.js
index 0511873c8fb..a2bdae5b3c4 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 841a8fe25fe..4d489e4fa0d 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}}