mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #9956 from kevgathuku/enable-outline 

Add focus indicator to File Details tabs view
This commit is contained in:
Morris Jobke 2018-06-26 08:03:45 +02:00 committed by GitHub
parent d611399027 4e1feb5c7b
commit a17750df7e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/files/js/detailsview.js
View File

@ -15,8 +15,8 @@
' {{#if tabHeaders}}' +
' <ul class="tabHeaders">' +
' {{#each tabHeaders}}' +
' <li class="tabHeader" data-tabid="{{tabId}}" data-tabindex="{{tabIndex}}">' +
' <a href="#">{{label}}</a>' +
' <li class="tabHeader" data-tabid="{{tabId}}" tabindex="0">' +
' <a href="#" tabindex="-1">{{label}}</a>' +
' </li>' +
' {{/each}}' +
' </ul>' +
@ -67,7 +67,8 @@
events: {
'click a.close': '_onClose',
'click .tabHeaders .tabHeader': '_onClickTab'
'click .tabHeaders .tabHeader': '_onClickTab',
'keyup .tabHeaders .tabHeader': '_onKeyboardActivateTab'
},
/**
@ -99,6 +100,12 @@
this.selectTab(tabId);
},
_onKeyboardActivateTab: function (event) {
if (event.key === " " || event.key === "Enter") {
this._onClickTab(event);
}
},
template: function(vars) {
if (!this._template) {
this._template = Handlebars.compile(TEMPLATE);
@ -126,7 +133,6 @@
templateVars.tabHeaders = _.map(this._tabViews, function(tabView, i) {
return {
tabId: tabView.id,
tabIndex: i,
label: tabView.getLabel()
};
});

14
core/css/apps.scss
View File

@ -764,7 +764,7 @@ kbd {
margin: 15px;
.tabHeader {
float: left;
padding: 5px;
padding: 12px;
cursor: pointer;
color: var(--color-text-lighter);
margin-bottom: 1px;
@ -774,21 +774,13 @@ kbd {
}
&.selected {
font-weight: 600;
border-bottom: 1px solid var(--color-border);
}
&:hover,
&:focus {
border-bottom: 1px solid var(--color-border);
}
&.selected,
&:hover
&:hover,
&:focus {
margin-bottom: 0px;
color: var(--color-main-text);
a {
margin-bottom: 0px;
color: var(--color-main-text);
}
border-bottom: 1px solid var(--color-text-lighter);
}
}
}