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

Add icon to file sidebar tabs

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;

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()
 				};
 			});
 

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
 		 *

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 || {});
 

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}}

apps/files_sharing/js/sharetabview.js

@@ -32,6 +32,10 @@
 			return t('files_sharing', 'Sharing');
 		},
 
+		getIcon: function() {
+			return 'icon-shared';
+		},
+
 		/**
 		 * Renders this details view
 		 */

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;