Commit a3c0c59b authored by yPhil's avatar yPhil

CSS: Focus on 1st Tab

parent 606bd264
......@@ -1552,7 +1552,7 @@
},
"gkt": {
"version": "https://tgz.pm2.io/gkt-1.0.0.tgz",
"integrity": "sha1-QFUCsAfzGcP0cXXER0UnMA8qta0=",
"integrity": "sha512-zr6QQnzLt3Ja0t0XI8gws2kn7zV2p0l/D3kreNvS6hFZhVU5g+uY/30l42jbgt0XGcNBEmBDGJR71J692V92tA==",
"optional": true
},
"glob": {
......
......@@ -28,9 +28,9 @@
"bower": "1.8.2",
"ejs": "2.5.7",
"express": "4.16.2",
"favicon": "0.0.2",
"feedparser": "2.2.9",
"feedrat": "latest",
"favicon": "0.0.2",
"pm2": "2.8.0"
},
"cacheDirName": "favicon-cache"
......
......@@ -132,6 +132,12 @@ div.dialog {
color: var(--ui-color-pri);
}
kbd.key {
border-radius: 3px;
padding: 1px 2px 0;
border: 1px solid black;
}
ul {
list-style-type: none;
margin:0;
......@@ -153,32 +159,22 @@ ul {
/* padding: .2em; */
}
a:visited {
color: var(--color-qui);
}
a:hover,
a:active,
i.item-icon:hover {
color: var(--color-sec);
}
a:link {
color: var(--color-pri) !important;
text-decoration: none;
}
.ui-tab.ui-state-default {
background: var(--color-qua);
border-right: 1px solid var(--color-sep) !important;
a:visited {
color: var(--color-qui);
}
/* .ui-tab.ui-state-focus { */
/* outline: 3px solid var(--ui-color-sec) !important; */
/* } */
a:focus {
border-color: var(--color-sec);
}
.ui-tab.ui-state-default a:visited {
color: var(--color-pri);
a:hover,
a:active {
color: var(--color-sec);
}
.ui-tab {
......@@ -193,6 +189,11 @@ a:link {
color: var(--color-sec) !important;
}
.ui-tab.ui-state-default {
background: var(--color-non);
border-right: 1px solid var(--color-sep) !important;
}
.ui-tab.ui-state-focus,
.ui-tab.ui-state-focus,
.ui-tab.ui-state-hover {
......@@ -209,18 +210,13 @@ a:link {
}
#new-group {
text-align: center;
width: 40px;
}
#new-group a:visited,
#new-group a:link {
color: var(--color-pri);
background-color: var(--color-qua);
font-size: 21.2pt;
margin: 0;
padding: 0;
width: 100%;
font-size: 1em;
}
i.item-icon {
......@@ -458,9 +454,9 @@ nav#side-menu,
margin: 0 !important;
}
.ui-tabs-anchor {
cursor: pointer;
}
/* .ui-tabs-anchor { */
/* cursor: pointer; */
/* } */
i.tabCloser {
cursor: pointer;
......@@ -510,7 +506,6 @@ fieldset {
.ui-button.ui-state-active,
.ui-slider-handle,
.ui-state-default,
.ui-button {
border: 3px solid var(--ui-color-sep);
}
......@@ -1001,7 +996,6 @@ li.source-item:nth-child(even) {
background-color: var(--color-non);
}
table tr:hover,
li.source-item:hover {
background-color: var(--color-sen);
color: var(--color-sep);
......@@ -1165,7 +1159,7 @@ div#logo-title {
float: right;
}
i.icon-petrolette {
.logoType i.icon-petrolette {
display:block;
cursor: pointer;
font-size:24pt;
......
......@@ -40,13 +40,18 @@ PTL.dialog = {
$('.help-button').button();
$('.help-tour').on('click', function() {
$('#overlay').removeClass('visible');
$('#menu').removeClass('expanded');
PTL.sideMenu('close');
PTL.dialog.kill($dialog);
$('#tabs').tabs('option', 'active', 0);
PTL.utilities.help('ui');
});
$('.help-kb-shortcuts').on('click', function() {
PTL.sideMenu('close');
PTL.dialog.kill($dialog);
PTL.dialog.kbShortcuts();
});
}
});
......@@ -142,7 +147,7 @@ PTL.dialog = {
],
open: function() {
$('.ui-dialog :button').focus();
// $('.ui-dialog :button').focus();
$('.ui-widget-overlay, .ui-dialog-titlebar-close').on('click', function() {
PTL.dialog.kill($dialog);
......@@ -377,6 +382,139 @@ PTL.dialog = {
$dialog.dialog('open');
});
},
kbShortcuts:function() {
$('#dialogs').load('/static/templates/dialogs.html #question-dialog', function() {
var $dialog = $(this),
$iconDiv = $dialog.find('div.icon');
$iconDiv.remove();
$dialog.dialog({
title: PTL.tr('Keyboard shortcuts'),
autoOpen: false,
closeOnEscape: true,
resizable: false,
show: { effect: "blind", duration: 800 },
position: { my: "left top", at: "left top" },
height: 'auto',
width: '100%',
modal: true,
buttons: [
{
text: PTL.tr('Ok'),
title: PTL.tr('Ok'),
class: 'translate',
click: function() {
PTL.dialog.kill($dialog);
}
}
],
open: function () {
$('.ui-widget-overlay').on('click', function() {
PTL.dialog.kill($dialog);
});
var $kbShortCutsTab = $('<table>')
.attr('class', 'keyboard-shortcuts')
.append($('<tr>')
.append($('<th>')
.text('Key'))
.append($('<th>')
.text('Command')))
.append($('<tr>')
.append($('<td>')
.html('<kbd><kbd class="key">UP</kbd>/<kbd class="key">LEFT</kbd></kbd>'))
.append($('<td>')
.text('Move focus to the previous tab. If on first tab, moves focus to last tab. Activate focused tab after a short delay.')))
.append($('<tr>')
.append($('<td>')
.html('<kbd><kbd class="key">DOWN</kbd>/<kbd class="key">RIGHT</kbd></kbd>'))
.append($('<td>')
.text('Move focus to the next tab. If on last tab, moves focus to first tab. Activate focused tab after a short delay.')))
.append($('<tr>')
.append($('<td>')
.html('<kbd><kbd class="key">CTRL</kbd>+<kbd class="key">DOWN</kbd>/<kbd class="key">RIGHT</kbd></kbd>'))
.append($('<td>')
.text('Move focus to the next tab. If on last tab, moves focus to first tab. The focused tab must be manually activated.')))
.append($('<tr>')
.append($('<td>')
.html('<kbd><kbd class="key">HOME</kbd></kbd>'))
.append($('<td>')
.text('Move focus to the first tab. Activate focused tab after a short delay.')))
.append($('<tr>')
.append($('<td>')
.html('<kbd><kbd class="key">END</kbd></kbd>'))
.append($('<td>')
.text('Move focus to the last tab. Activate focused tab after a short delay.')))
.append($('<tr>')
.append($('<td>')
.html('<kbd><kbd class="key">CTRL</kbd>+<kbd class="key">HOME</kbd></kbd>'))
.append($('<td>')
.text('Move focus to the first tab. The focused tab must be manually activated.')))
.append($('<tr>')
.append($('<td>')
.html('<kbd><kbd class="key">CTRL</kbd>+<kbd class="key">END</kbd></kbd>'))
.append($('<td>')
.text('Move focus to the last tab. The focused tab must be manually activated.')))
.append($('<tr>')
.append($('<td>')
.html('<kbd><kbd class="key">SPACE</kbd></kbd>'))
.append($('<td>')
.text('Activate panel associated with focused tab.')))
.append($('<tr>')
.append($('<td>')
.html('<kbd><kbd class="key">ENTER</kbd></kbd>'))
.append($('<td>')
.text('Activate or toggle panel associated with focused tab.')))
.append($('<tr>')
.append($('<td>')
.html('<kbd><kbd class="key">ALT</kbd>/<kbd class="key">OPTION</kbd>+<kbd class="key">PAGE UP</kbd></kbd>'))
.append($('<td>')
.text('Move focus to the previous tab and immediately activate.')))
.append($('<tr>')
.append($('<td>')
.html('<kbd><kbd class="key">ALT</kbd>/<kbd class="key">OPTION</kbd>+<kbd class="key">PAGE DOWN</kbd></kbd>'))
.append($('<td>')
.text('Move focus to the next tab and immediately activate.')));
var $kbShortCutsPanel = $('<table>')
.attr('class', 'keyboard-shortcuts')
.append($('<tr>')
.append($('<th>')
.text('Key'))
.append($('<th>')
.text('Command')))
.append($('<tr>')
.append($('<td>')
.html('<kbd><kbd class="key">CTRL</kbd>+<kbd class="key">UP</kbd></kbd>'))
.append($('<td>')
.text('Move focus to associated tab.')))
.append($('<tr>')
.append($('<td>')
.html('<kbd><kbd class="key">ALT</kbd>/<kbd class="key">OPTION</kbd>+<kbd class="key">PAGE UP</kbd></kbd>'))
.append($('<td>')
.text('Move focus to the previous tab and immediately activate.')))
.append($('<tr>')
.append($('<td>')
.html('<kbd><kbd class="key">ALT</kbd>/<kbd class="key">OPTION</kbd>+<kbd class="key">PAGE DOWN</kbd></kbd>'))
.append($('<td>')
.text('Move focus to the next tab and immediately activate.')));
$dialog.find('h1').text(PTL.tr('Keyboard shortcuts'));
$dialog.find('h2#name').text(PTL.tr('When focus is on a tab'));
$dialog.find('h2#number').text(PTL.tr('When focus is in a panel'));
$dialog.find('p#name').append($kbShortCutsTab);
$dialog.find('p#number').append($kbShortCutsPanel);
}
});
$dialog.dialog('open');
});
},
addSource:function(sourceUrl) {
$('#dialogs').load('/static/templates/dialogs.html #question-dialog', function() {
......
......@@ -96,6 +96,7 @@ PTL.tab = {
PTL.language = PTL.prefs.readConfig('lang');
var $tabs = $('#tabs').tabs({
active: 2,
heightStyle: 'content',
activate: function(event, ui) {
......@@ -107,7 +108,7 @@ PTL.tab = {
$('.tabCloser').hide();
$('#new-group').removeClass('invisible');
// $('#new-group').removeClass('invisible');
$activeTab.find('.tabCloser').show();
}
......@@ -129,8 +130,6 @@ PTL.tab = {
}
});
$tabs.tabs('disable', '#disabled');
$tabs.on("click", "i.tabCloser", function() {
PTL.dialog.killTab($(this));
});
......@@ -351,12 +350,12 @@ PTL.tab = {
var $newTabButton = $('<li>')
.attr('id', 'new-group')
.attr('class', 'translate new-group invisible')
.attr('class', 'translate new-group')
.data('title', 'Add a new group')
.attr('title', PTL.tr('Add a new group'));
var $newTabButtonLink = $('<a>')
.attr('onfocus', 'this.blur()')
// .attr('tabindex', '-1')
.attr('href', '#disabled');
var $newTabButtonIcon = $('<i>')
......
......@@ -141,7 +141,7 @@
Take the tour
</button>
<button class="help-button translate"
<button class="help-button help-kb-shortcuts translate"
data-content="Keyboard shortcuts">
Keyboard shortcuts
</button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment