From 752af458a312fbb20208483782ad22160b614a86 Mon Sep 17 00:00:00 2001 From: tophf Date: Mon, 11 Dec 2017 07:35:23 +0300 Subject: [PATCH] redesign inline search cards --- popup.html | 18 +++++--- popup/search-results.css | 89 +++++++++++++++++++++++++--------------- popup/search-results.js | 52 ++++++++++++++--------- 3 files changed, 103 insertions(+), 56 deletions(-) diff --git a/popup.html b/popup.html index fd125c75..3ab9a22e 100644 --- a/popup.html +++ b/popup.html @@ -87,9 +87,9 @@
- +
- +
diff --git a/popup/search-results.css b/popup/search-results.css index 7bb8c2bf..6bb3b627 100755 --- a/popup/search-results.css +++ b/popup/search-results.css @@ -1,6 +1,7 @@ body.search-results-shown { overflow-y: scroll; overflow-x: hidden; + background-color: #aaa; } #search-results { @@ -23,23 +24,30 @@ body.search-results-shown { .search-result, .search-result-empty { position: relative; - padding: .75rem; + padding: 8px 8px 24px; min-height: 160px; } .search-result { - box-shadow: 1px 1px 10px rgba(0, 0, 0, .5); - border-radius: 3px; - border: 1px solid transparent; - margin-bottom: 1rem; + box-shadow: 1px 1px 10px rgba(0, 0, 0, .75); + border-radius: 4px; + border: 1px solid #555; + margin-bottom: 24px; + background-color: #eee; } .search-result:hover { - border-color: #888; + border-color: #000; + background-color: #fff; } -.search-result .lds-spinner, .search-result-empty .lds-spinner { - transform: scale(.75); +.search-result .lds-spinner, +.search-result-empty .lds-spinner { + transform: scale(.5); +} + +.search-result-empty .lds-spinner { + opacity: .2; } .search-result-fadein { @@ -51,6 +59,7 @@ body.search-results-shown { height: 140px; width: 100%; object-fit: cover; + cursor: pointer; } .search-result-title { @@ -74,23 +83,25 @@ body.search-results-shown { } .search-result-info > div { - opacity: 0; + /* opacity: 0; */ position: absolute; width: 100%; transition: opacity .25s ease-in-out; } -.search-result:hover .search-result-info > div { +.search-result:hover .actions { opacity: 1; } .search-result-overlay { - bottom: 0; + bottom: -24px; } .search-result-info > .actions { - bottom: 70px; + bottom: 15px; text-align: center; + z-index: 10; + opacity: 0; } .search-result-info > .actions > button { @@ -105,11 +116,10 @@ body.search-results-shown { .search-result-overlay > * { display: flex; - padding: .25rem .5rem; } .search-result-author { - max-width: 50%; + max-width: 20%; } .search-result-author-link { @@ -121,15 +131,12 @@ body.search-results-shown { display: block; } -.search-result-author-link:hover { - color: #fff; -} - .search-result-description-group { - color: white; - background-color: hsla(180, 20%, 20%, 0.85); align-items: center; - padding-right: .25rem; + padding: 0; + font-size: 90%; + line-height: 24px; + min-height: 5px; } .search-result-description { @@ -140,13 +147,17 @@ body.search-results-shown { } .search-result-meta { - background-color: hsla(180, 27%, 37%, 0.85); - color: hsl(180, 27%, 80%); + background-color: hsla(0, 0%, 93%, 0.76); justify-content: space-between; + flex-wrap: wrap; +} + +.search-result:hover .search-result-meta { + background-color: hsla(0, 0%, 100%, 0.76); } .search-result-meta > * > :first-child { - display: block; + display: none; opacity: .75; } @@ -161,19 +172,18 @@ body.search-results-shown { .search-result-rating { font-weight: 600; padding: 1px 2px 1px 2px; - color: #fff; } .search-result-rating.good { - background-color: darkgreen; + color: darkgreen; } .search-result-rating.okay { - background-color: darkorange; + color: chocolate; } .search-result-rating.bad { - background-color: darkred; + color: darkred; } .search-result-rating.none { @@ -184,7 +194,6 @@ body.search-results-shown { } .search-result-install, .search-result-customize, .search-result-uninstall { - width: 40%; margin: 3px; } @@ -193,7 +202,16 @@ body.search-results-shown { flex-direction: row; text-align: center; word-break: keep-all; - margin-bottom: 1rem; +} + +#search-results-nav-top { + padding-top: 4px; + margin-bottom: 8px; +} + +#search-results-nav-bottom { + margin-top: -14px; + margin-bottom: 16px; } #search-results-nav-top button, @@ -203,11 +221,17 @@ body.search-results-shown { border: none; padding: .25rem 1rem; margin: 0 .5rem; + color: #eee; + text-shadow: 0 1px 3px rgba(0, 0, 0, .5); + font-size: 250%; + line-height: 24px; + vertical-align: middle; + cursor: pointer; } #search-results-nav-top button:hover, #search-results-nav-bottom button:hover { - text-shadow: 0 0 2px currentColor; + text-shadow: 0 1px 3px #000; } #find-styles-inline-group label { @@ -231,11 +255,12 @@ body.search-results-shown { margin: auto; animation: lds-spinner 1s reverse; animation-fill-mode: both; + filter: invert(1) drop-shadow(1px 1px 3px #000); } @keyframes lds-spinner { 0% { - opacity: .25; + opacity: 1; } 100% { diff --git a/popup/search-results.js b/popup/search-results.js index 20d6647a..69cdc6ab 100755 --- a/popup/search-results.js +++ b/popup/search-results.js @@ -16,6 +16,8 @@ window.addEventListener('showStyles:done', function _() { const BASE_URL = 'https://userstyles.org'; const UPDATE_URL = 'https://update.userstyles.org/%.md5'; + const UI_LANG = chrome.i18n.getUILanguage(); + // normal category is just one word like 'github' or 'google' // but for some sites we need a fallback // key: category.tld @@ -72,22 +74,23 @@ window.addEventListener('showStyles:done', function _() { handleEvent.openURLandHide.call(this, event); return; } + event.preventDefault(); - $('#find-styles-inline-group').classList.add('hidden'); this.textContent = this.title; this.title = ''; init(); load(); - - event.preventDefault(); }, }); return; function init() { - document.body.classList.add(BODY_CLASS); + document.body.style.setProperty('transition', 'background-color 1s', 'important'); + setTimeout(() => document.body.classList.add(BODY_CLASS)); + + $('#find-styles-inline-group').classList.add('hidden'); dom.container = $('#search-results'); dom.error = $('#search-results-error'); @@ -116,11 +119,12 @@ window.addEventListener('showStyles:done', function _() { } }); - addEventListener('styleAdded', ({detail: {style: {md5Url}}}) => { + addEventListener('styleAdded', ({detail: {style: {id, md5Url}}}) => { const usoId = md5Url && md5Url.match(/\d+|$/)[0]; const entry = usoId && $('#' + RESULT_ID_PREFIX + usoId); if (entry) { entry._result.installed = true; + entry._result.installedStyleId = id; renderActionButtons(entry); } }); @@ -383,6 +387,7 @@ window.addEventListener('showStyles:done', function _() { const description = result.description .replace(/<[^>]*>/g, '') + .replace(/([^.]\.)(\s)/g, '$1\n$2') .replace(/[\r\n]{3,}/g, '\n\n'); Object.assign($('.search-result-description', entry), { textContent: description, @@ -403,7 +408,7 @@ window.addEventListener('showStyles:done', function _() { let ratingValue = result.rating; if (ratingValue === null) { ratingClass = 'none'; - ratingValue = 'n/a'; + ratingValue = ''; } else if (ratingValue >= 2.5) { ratingClass = 'good'; ratingValue = ratingValue.toFixed(1); @@ -418,7 +423,20 @@ window.addEventListener('showStyles:done', function _() { textContent: ratingValue, className: 'search-result-rating ' + ratingClass }); - + Object.assign($('.search-result-meta-updated', entry), { + dateTime: result.updated, + textContent: tryCatch(lang => { + const date = new Date(result.updated); + return date.toLocaleDateString(lang, { + day: '2-digit', + month: 'short', + year: date.getYear() === new Date().getYear() ? undefined : '2-digit', + }); + }, [UI_LANG, 'en']) || '', + }); + Object.assign($('.search-result-weekly-count', entry), { + textContent: result.weekly_install_count.toLocaleString() + }); Object.assign($('.search-result-install-count', entry), { textContent: result.total_install_count.toLocaleString() }); @@ -428,6 +446,10 @@ window.addEventListener('showStyles:done', function _() { } function renderActionButtons(entry) { + const screenshot = $('.search-result-screenshot', entry); + screenshot.onclick = entry._result.installed ? onUninstallClicked : onInstallClicked; + screenshot.title = entry._result.installed ? t('deleteStyleLabel') : t('installButton'); + const uninstallButton = $('.search-result-uninstall', entry); uninstallButton.onclick = onUninstallClicked; @@ -450,19 +472,14 @@ window.addEventListener('showStyles:done', function _() { }; } - installButton.classList.toggle('hidden', Boolean(result.installed)); + //installButton.classList.toggle('hidden', Boolean(result.installed)); uninstallButton.classList.toggle('hidden', !result.installed); } function onUninstallClicked(event) { event.stopPropagation(); const entry = this.closest('.search-result'); - const result = entry._result; - deleteStyleSafe({id: result.installedStyleId}) - .then(() => { - entry._result.installed = false; - renderActionButtons(entry); - }); + deleteStyleSafe({id: entry._result.installedStyleId}); } /** Installs the current userstyleSearchResult into Stylus. */ @@ -475,6 +492,7 @@ window.addEventListener('showStyles:done', function _() { showSpinner(entry); installButton.disabled = true; + entry.style.setProperty('pointer-events', 'none', 'important'); // Fetch settings to see if we should display "configure" button Promise.all([ @@ -488,11 +506,6 @@ window.addEventListener('showStyles:done', function _() { style.reason = 'install'; return saveStyleSafe(style); }) - .then(savedStyle => { - result.installed = true; - result.installedStyleId = savedStyle.id; - renderActionButtons(entry); - }) .catch(reason => { const usoId = result.id; console.debug('install:saveStyleSafe(usoID:', usoId, ') => [ERROR]: ', reason); @@ -501,6 +514,7 @@ window.addEventListener('showStyles:done', function _() { .then(() => { $.remove('.lds-spinner', entry); installButton.disabled = false; + entry.style.pointerEvents = ''; }); function fetchStyleSettings(result) {