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

Add focus indicator for file details view tabs 

Signed-off-by: Kevin Ndung'u <kevgathuku@gmail.com>
This commit is contained in:
Kevin Ndung'u 2018-06-25 10:29:29 +03:00
parent a431cc3b58
commit 4e1feb5c7b
No known key found for this signature in database
GPG Key ID: 6F939DF9A26D46D7
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

@ -768,7 +768,7 @@ kbd {
margin: 15px;
.tabHeader {
float: left;
padding: 5px;
padding: 12px;
cursor: pointer;
color: var(--color-text-lighter);
margin-bottom: 1px;
@ -778,21 +778,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);
}
}
}