Skip to content

Commit

Permalink
fix ff contextmenu colours + keybindings in the popup
Browse files Browse the repository at this point in the history
  • Loading branch information
@rohanb10
rohanb10 committed Jun 22, 2021
1 parent 173323b commit a0e2578
Show file tree
Hide file tree
Showing 7 changed files with 42 additions and 15 deletions.
8 changes: 4 additions & 4 deletions html/settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,14 +226,14 @@ <h4>Snoozz tabs using the right-click (context) menu</h4>
</div>
<div class="input-container flex" id="shortcut">
<div>
<h4>Keyboard shortcuts</h4>
<p>Set up shortcuts to snooze a tab without any clicks.</p>
<h4>Custom Keyboard Shortcuts</h4>
<p>Set up your own shortcuts to snooze a tab without any clicks.</p>
</div>
<div tabindex="0" class="btn"><div></div></div>
<div class="mini firefox-info">
<strong>Instructions</strong>
<ol>
<li>Open the Firefox Add-Ons page in a new tab: <code>about:addons</code>.</li>
<li>Open the Firefox Add-Ons page in a new tab: <u><code>about:addons</code></u>.</li>
<li>Click on the <a tabindex="0" target="_blank" href="https://bug1303384.bmoattachments.org/attachment.cgi?id=9051647">gear icon</a> in the top right and select <strong>Manage Extension Shortcuts</strong>.</li>
<li>Configure snooze time shortcuts using your own key bindings.</li>
</ol>
Expand All @@ -244,7 +244,7 @@ <h4>Keyboard shortcuts</h4>
</div>
<div class="mini safari-info">
<strong>Uh Oh</strong>
<div>Keyboard Shortcuts cannot be configured for extensions in Safari.</div>
<div>Shortcuts cannot be configured for extensions in Safari. You can blame Steve Jobs for this.</div>
</div>
<div class="mini shortcuts">
<strong>Currently active shortcuts</strong>
Expand Down
2 changes: 1 addition & 1 deletion scripts/flatpickr.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion scripts/nap_room.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,7 @@ function buildTabActions(t, tabDiv) {
}
tabDiv.querySelector('.wakeup-label').innerText = t.deleted ? 'Deleted on' : (t.opened ? `Woke up ${t.opened < t.wakeUpTime ? 'manually' : 'automatically'} on` : 'Waking up')
tabDiv.querySelector('.wakeup-time').innerText = t.opened ? dayjs(t.opened).format('dddd, D MMM') : formatSnoozedUntil(t)
tabDiv.querySelector('.wakeup-time').title = dayjs(t.opened ? t.opened : t.wakeUpTime).format(`${getHourFormat()} [on] ddd, D MMMM YYYY`);
tabDiv.querySelector('.wakeup-time').title = dayjs(t.opened ? t.opened : t.wakeUpTime).format(`${getHourFormat(true)} [on] ddd, D MMMM YYYY`);
return tabDiv;
}

Expand Down
25 changes: 22 additions & 3 deletions scripts/popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,18 +35,23 @@ async function init() {
}

document.addEventListener('keyup', e => {
if (e.which >= 48 && e.which <= 56 && !document.querySelector('.form-overlay').classList.contains('show')) {
if (e.which >= 49 && e.which <= 58 && !document.querySelector('.form-overlay').classList.contains('show')) {
var choices = document.querySelectorAll('.choice');
var selectedChoice = choices && choices.length > 0 ? choices[e.which - 48 - 1] : false;
if (!selectedChoice || selectedChoice.classList.contains('disabled')) return;
choices.forEach(c => c.classList.remove('focused'));
selectedChoice.focus();
}
if (e.which === 48) {
document.querySelectorAll('.choice').forEach(c => c.classList.remove('focused'))
document.querySelector('.choice:last-of-type').focus();
}
if (e.which === 13 && !document.querySelector('.form-overlay').classList.contains('show')) {
var selectedChoice = document.querySelector('.choice.focused');
if (!selectedChoice) return;
snooze(o.time, c)
}
if (e.which === 67) document.querySelector('.custom-choice').click();
if (e.which === 84) document.getElementById('tab').click();
if (e.which === 87) document.getElementById('window').click();
if (e.which === 83) document.getElementById('selection').click();
Expand Down Expand Up @@ -151,6 +156,7 @@ async function buildChoices() {
var now = Object.assign(document.createElement('option'), {value: 'now', innerText: 'Current Time', selected: s === 'now'});

var select = document.createElement('select');
select.tabIndex = -1;
select.addEventListener('change', async e => {
await savePopupOptions();
// change time
Expand Down Expand Up @@ -179,7 +185,15 @@ async function buildChoices() {
tabIndex: o.disabled ? -1 : 0,
}, wrapInDiv('', icon, label), o.startUp ? wrapInDiv() : wrapInDiv('', date, time));
c.addEventListener('mouseover', _ => c.classList.add('focused'))
c.addEventListener('mouseout', _ => c.classList.remove('focused'))
c.addEventListener('mouseout', _ => c.classList.remove('focused'));
if (['weekend', 'monday', 'week', 'month'].includes(name)) c.addEventListener('keydown', e => {
if (!e || e.which !== 38 && e.which !== 40) return;
var options = select.querySelectorAll('option');
var current = Array.from(options).findIndex(o => o.selected);
if (e.which === 38 && current > 0) options[current - 1].selected = true;
if (e.which === 40 && current < options.length - 1) options[current + 1].selected = true;
select.dispatchEvent(new Event('change'));
})
c.onclick = e => {if (!['OPTION', 'SELECT'].includes(e.target.nodeName)) snooze(o.startUp ? 'startup' : o.time, c)}
c.onkeyup = e => {if (e.which === 13) snooze(o.startUp ? 'startup' : o.time, c)}
return c
Expand Down Expand Up @@ -248,7 +262,12 @@ async function buildCustomChoice() {
onclick: _ => {
customChoice.classList.add('focused');
document.querySelectorAll('.choice').forEach(c => {c.classList.add('disabled');c.setAttribute('tabindex','-1')});
// document.querySelector('.popup-checkbox input').setAttribute('tabindex', '-1');
document.querySelector('.form-overlay').classList.add('show')
},
onkeydown: e => {
if (!e || e.which !== 13 && e.which !== 32) return;
customChoice.classList.add('focused');
document.querySelectorAll('.choice').forEach(c => {c.classList.add('disabled');c.setAttribute('tabindex','-1')});
document.querySelector('.form-overlay').classList.add('show')
}
}, wrapInDiv('', icon, label), wrapInDiv('custom-info', wrapInDiv('display', wrapInDiv('date-display'), wrapInDiv('time-display')), submitButton));
Expand Down
2 changes: 1 addition & 1 deletion scripts/rise.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ function populate(found) {
document.querySelector('#when span').innerText = dayjs(found.timeCreated).format(`${getHourFormat(true)} on dddd, DD MMM YYYY`)
var till = document.querySelector('#till span');
till.innerText = found.startUp ? 'the next time you opened ' + capitalize(getBrowser()) : dayjs(found.timeCreated).to(dayjs(found.wakeUpTime),true) + ' later'
till.setAttribute('title', dayjs(found.wakeUpTime).format(`${getHourFormat()} on dddd, DD MMM YYYY`))
till.setAttribute('title', dayjs(found.wakeUpTime).format(`${getHourFormat(true)} on dddd, DD MMM YYYY`))
var tabList = document.querySelector('.tab-list');
found.tabs.forEach((t, i) => {
var iconImg = Object.assign(document.createElement('img'), {src: getFaviconUrl(t.url)});
Expand Down
10 changes: 7 additions & 3 deletions styles/popup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,14 +273,14 @@ h3 {
position: relative;
}

.choice.focused select {
.choice.focused select, select:focus:hover, .choice:focus-visible select {
background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z' fill='white'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
}

body.dark .choice .date {
color: #AAA;
}
.choice:hover *, .choice.focused *, .choice:hover .date, .custom-choice:hover *, .custom-choice.focused *, .custom-choice.really-focused {
.choice:hover *, .choice.focused *, .choice:hover .date, .custom-choice:hover *, .custom-choice.focused *, .custom-choice.really-focused, .choice:focus-visible *, .custom-choice:focus-visible * {
color: #FFF !important;
}

Expand Down Expand Up @@ -332,13 +332,17 @@ body.dark .choice .date {
opacity: 0.2;
}

.choice.focused, .custom-choice.focused, .custom-choice.really-focused {
.choice.focused, .choice:focus-visible, .choice:focus-within:hover, .custom-choice.focused, .custom-choice:focus-visible, .custom-choice.really-focused {
background-color: var(--bg) !important;
}
.choice.focused, .custom-choice.focused {
transition: background-color 0s linear;
cursor: default;
}
.choice select:focus:hover {
color: var(--color);
background-color: rgba(0,0,0,.5);
}

body.dark #preview, body.dark .choice, body.dark .custom-choice, body.dark .form-overlay {
background-color: #444
Expand Down
8 changes: 6 additions & 2 deletions styles/settings.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,10 @@ option {
color: var(--color);
background-color: var(--bg-color);
}
select:focus:hover {
color: var(--color);
background-color: rgba(0,0,0,.5);
}
.select-wrapper, .btn {
position: relative;
cursor: pointer;
Expand Down Expand Up @@ -132,7 +136,7 @@ span.am-pm {
font-size: .8em;
margin-left: .5rem;
}
body.dark select {
body.dark select, select:focus:hover, select:focus-visible {
background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='white' d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
}
#right-click .btn div:before {
Expand Down Expand Up @@ -229,7 +233,7 @@ kbd {
code {
cursor: pointer;
font-size: 1.2em;
background-color: #999;
background-color: rgba(0, 0, 0, .3);
border-radius: .25em;
padding: .1em .2em;
user-select: none;
Expand Down

0 comments on commit a0e2578

Please sign in to comment.