From cc0f9fb16a6d1b2a1ec71d314f7caf75481a1526 Mon Sep 17 00:00:00 2001 From: Tomasz Borychowski Date: Tue, 17 Jan 2017 17:05:02 +0000 Subject: [PATCH] style tweaks; limit history; cmd+l focuses addr; show full url on focus --- app/addressbar/index.css | 2 +- app/addressbar/index.js | 52 +++++++++++++++++++++++++++---------- app/app.js | 16 +++++++++--- app/frame/index.js | 1 + app/history/index.css | 9 ++++--- app/history/index.js | 8 +++--- app/notifications/index.css | 1 - app/notifications/index.js | 2 -- app/sidebar/index.js | 2 +- index.html | 4 +-- index.js | 7 +++++ package.json | 6 ++--- 12 files changed, 77 insertions(+), 33 deletions(-) diff --git a/app/addressbar/index.css b/app/addressbar/index.css index 7232c56..97c7070 100644 --- a/app/addressbar/index.css +++ b/app/addressbar/index.css @@ -4,7 +4,7 @@ } .addressbar { - padding: 3px 5px 3px 32px; + padding: 3px 40px 3px 32px; margin: 0 5px; height: 100%; font-size: 15px; diff --git a/app/addressbar/index.js b/app/addressbar/index.js index 8d69992..a88d706 100644 --- a/app/addressbar/index.js +++ b/app/addressbar/index.js @@ -3,7 +3,7 @@ const Config = require('electron-config'); const config = new Config(); const starsDB = require('../db/stars'); -let isReady = false, el, starBox, lastUrl; +let isReady = false, el, starBox, lastShortUrl = '', lastFullUrl = ''; function gotoUrl (url) { @@ -26,7 +26,7 @@ function isValidUrl (url) { function parseAnyAddress (url) { - url = getCustomAddress(url); + url = shortenUrl(url); const parts = url.split('/'); let id; url = ''; @@ -41,29 +41,49 @@ function parseAnyAddress (url) { function onUrlChanged (webview, issue) { - const newUrl = getCustomAddress(config.get('state.url')); - const hasUrlChanged = (lastUrl !== newUrl); - lastUrl = el[0].value = newUrl; + lastFullUrl = config.get('state.url'); + lastShortUrl = shortenUrl(lastFullUrl); + el[0].value = lastShortUrl; + + console.log(lastFullUrl, lastShortUrl); + if (issue && issue.id) { starBox.removeClass('disabled'); starsDB.getById(issue.id).then(res => { starBox.toggleClass('is-starred', !!res); }); } +} + - if (hasUrlChanged) el[0].select(); +function shortenUrl (url = '') { + return url + .replace(config.get('baseUrl'), '') + .replace('pull/', '') + .replace('issues/', '') + .split('#') + .shift(); +} + +function focusAddressbar () { + setTimeout(() => { el[0].select(); }, 10); } -function getCustomAddress (url) { - return url.replace(config.get('baseUrl'), '').replace('pull/', '').replace('issues/', ''); + +function onFocus () { + el[0].value = lastFullUrl; + el[0].select(); } +function onBlur () { + el[0].value = lastShortUrl; +} function onKeyDown (e) { if (e.key === 'ArrowDown') return $.trigger('focus-address-results'); if (e.key === 'Escape') { - e.target.value = lastUrl; + e.target.value = lastFullUrl; e.target.select(); $.trigger('address-input-end'); } @@ -73,8 +93,12 @@ function onKeyPress (e) { if (e.key === 'Enter') return gotoUrl(); } -function focusAddressbar () { - setTimeout(() => { el[0].select(); }, 10); +function onInput (e) { + $.trigger('address-input', e); +} + +function onMenuClick (target) { + if (target === 'focus-addressbar') focusAddressbar(); } @@ -84,14 +108,16 @@ function init () { el = $('.addressbar'); starBox = $('header .star-box'); - el.on('focus', e => { e.target.select(); }); + el.on('focus', onFocus); + el.on('blur', onBlur); el.on('keydown', onKeyDown); el.on('keypress', onKeyPress); - el.on('input', e => { $.trigger('address-input', e); }); + el.on('input', onInput); $.on('change-url', gotoUrl); $.on('url-changed', onUrlChanged); $.on('focus-addressbar', focusAddressbar); + $.on('menu', onMenuClick); isReady = true; } diff --git a/app/app.js b/app/app.js index 076463e..7ef6ec6 100755 --- a/app/app.js +++ b/app/app.js @@ -28,6 +28,16 @@ const { ipcRenderer } = require('electron'); ipcRenderer.on('menu', (ev, msg) => { $.trigger('menu', msg); }); -window.addEventListener('blur', () => document.body.classList.add('window-inactive')); -window.addEventListener('focus', () => document.body.classList.remove('window-inactive')); -document.addEventListener('click', e => $.trigger('document-clicked', e)); +window.addEventListener('blur', () => { + document.body.classList.add('window-inactive'); + $.trigger('window-blurred'); +}); + +window.addEventListener('focus', () => { + document.body.classList.remove('window-inactive'); + $.trigger('window-focused'); +}); + +document.addEventListener('click', e => { + $.trigger('document-clicked', e); +}); diff --git a/app/frame/index.js b/app/frame/index.js index e5a296f..ecee3d0 100644 --- a/app/frame/index.js +++ b/app/frame/index.js @@ -93,6 +93,7 @@ function loadingStart () { function loadingStop () { webview.removeClass('loading'); $.trigger('url-change-end'); + webview[0].focus(); } diff --git a/app/history/index.css b/app/history/index.css index 5f6a0a7..b3428a9 100644 --- a/app/history/index.css +++ b/app/history/index.css @@ -1,4 +1,4 @@ -.addressbar-results { +.history { position: absolute; left: 0; right: 0; @@ -13,15 +13,16 @@ display: none; } -.addressbar-results.visible { opacity: 1; } +.history.visible { opacity: 1; } -.addressbar-results-list { +.history-list { width: 100%; height: 100%; padding: 10px 0; border: none; font: inherit; } +.history-list:focus { outline: none; } -.addressbar-results-list option { padding: 5px 90px 5px 179px; } +.history-list option { padding: 5px 90px 5px 179px; } diff --git a/app/history/index.js b/app/history/index.js index 4e52e34..3bfa319 100644 --- a/app/history/index.js +++ b/app/history/index.js @@ -37,7 +37,9 @@ function getItemHtml (item, i) { function render (items) { if (items.length) show(); else hide(); + items = items.slice(0, 20); listEl.html(items.map(getItemHtml).join('')); + el[0].style.height = `${items.length * 27 + 20}px`; } function onAddressInput (e) { @@ -66,7 +68,7 @@ function focusResults () { function onDocumentClick (e) { - if (e && e.target && $(e.target).closest('.addressbar-results-list')) return; + if (e && e.target && $(e.target).closest('.history-list')) return; hide(); } @@ -74,8 +76,8 @@ function onDocumentClick (e) { function init () { if (isReady) return; - el = $('.addressbar-results'); - listEl = el.find('.addressbar-results-list'); + el = $('.history'); + listEl = el.find('.history-list'); listEl.on('blur', hide); listEl.on('keypress', onKeyPress); diff --git a/app/notifications/index.css b/app/notifications/index.css index 81fa6cc..745d996 100644 --- a/app/notifications/index.css +++ b/app/notifications/index.css @@ -1,5 +1,4 @@ #notifications-sidebar { background-color: #34445E; left: -300px; transition: left .3s ease-out; } -#notifications-sidebar webview { display: block; } #notifications-sidebar.visible { left: 0; } #notifications-sidebar .js-refresh { position: absolute; top: 2px; right: 35px; z-index: 100; } #notifications-sidebar .js-refresh:hover { color: lightblue; } diff --git a/app/notifications/index.js b/app/notifications/index.js index 9a6bdb1..ef05c93 100644 --- a/app/notifications/index.js +++ b/app/notifications/index.js @@ -107,8 +107,6 @@ function init () { $.on('menu', onMenuClick); $.on('url-change-end', onFrameUrlChanged); - - toggle(config.get('state.notifications')); diff --git a/app/sidebar/index.js b/app/sidebar/index.js index a097723..dc8b093 100644 --- a/app/sidebar/index.js +++ b/app/sidebar/index.js @@ -32,7 +32,7 @@ function onClick (e) { function getIssueHtml (issue) { return `
  • - ${issue.name} + ${issue.name} ${issue.id}
    • `; } diff --git a/index.html b/index.html index aac65bd..00c84cb 100755 --- a/index.html +++ b/index.html @@ -33,11 +33,11 @@ -
    +
    - +