Add icon to file sidebar tabs

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl 2018-10-18 15:47:18 +02:00
parent 302a5d8171
commit 45804b5bef
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
7 changed files with 40 additions and 3 deletions

View File

@ -89,6 +89,10 @@
return t('comments', 'Comments');
},
getIcon: function() {
return 'icon-comment';
},
setFileInfo: function(fileInfo) {
if (fileInfo) {
this.model = fileInfo;

View File

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

View File

@ -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
*

View File

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

View File

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

View File

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

View File

@ -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;