Skip to content
Permalink
Browse files

Add focus indicator for file details view tabs

Signed-off-by: Kevin Ndung'u <kevgathuku@gmail.com>
  • Loading branch information...
kevgathuku committed Jun 25, 2018
1 parent a431cc3 commit 7b9f7ddbf788a2f0b23ce8c6ea5ece0136e3720c
Showing with 13 additions and 14 deletions.
  1. +10 −3 apps/files/js/detailsview.js
  2. +3 −11 core/css/apps.scss
@@ -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}}" data-tabindex="{{tabIndex}}" 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);
@@ -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);
}
}
}

0 comments on commit 7b9f7dd

Please sign in to comment.
You can’t perform that action at this time.