open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

redesign inline search cards

Browse Source
This commit is contained in:
tophf 2017-12-11 07:35:23 +03:00
parent f4bfeea5a6
commit 752af458a3
3 changed files with 103 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
popup.html
View File

@ -87,9 +87,9 @@
<div class="search-result"> <div class="search-result">
<a class="search-result-title"><span></span></a> <a class="search-result-title"><span></span></a>
<div class="search-result-info"> <div class="search-result-info">
<img class="search-result-screenshot"> <img class="search-result-screenshot" i18n-title="installButton">
<div class="actions"> <div class="actions">
<button class="search-result-install" i18n-text="installButton"></button> <button class="search-result-install" i18n-text="installButton" hidden></button>
<button class="search-result-uninstall hidden" i18n-text="deleteStyleLabel"></button> <button class="search-result-uninstall hidden" i18n-text="deleteStyleLabel"></button>
<button class="search-result-customize hidden" <button class="search-result-customize hidden"
i18n-text="configureStyle" i18n-text="configureStyle"
@ -99,15 +99,23 @@
<div class="search-result-meta"> <div class="search-result-meta">
<div class="search-result-author"> <div class="search-result-author">
<span i18n-text="author"></span> <span i18n-text="author"></span>
<a class="search-result-author-link" target="_blank"></a> <a class="search-result-author-link" target="_blank" i18n-title="author"></a>
</div> </div>
<div class="search-result-meta-rating"> <div class="search-result-meta-rating">
<span i18n-text="searchResultRating"></span> <span i18n-text="searchResultRating"></span>
<span class="search-result-rating"></span> <span class="search-result-rating" i18n-title="searchResultRating"></span>
</div>
<div class="search-result-meta-updated">
<span></span>
<time class="search-result-updated"></time>
</div>
<div class="search-result-meta-weekly-count">
<span i18n-text="searchResultInstallCount"></span>
<span class="search-result-weekly-count" i18n-title="searchResultInstallCount"></span>
</div> </div>
<div class="search-result-meta-install-count"> <div class="search-result-meta-install-count">
<span i18n-text="searchResultInstallCount"></span> <span i18n-text="searchResultInstallCount"></span>
<span class="search-result-install-count"></span> <span class="search-result-install-count" i18n-title="searchResultInstallCount"></span>
</div> </div>
</div> </div>
<div class="search-result-description-group"> <div class="search-result-description-group">

89
popup/search-results.css
View File

@ -1,6 +1,7 @@
body.search-results-shown { body.search-results-shown {
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
background-color: #aaa;
} }
#search-results { #search-results {
@ -23,23 +24,30 @@ body.search-results-shown {
.search-result, .search-result,
.search-result-empty { .search-result-empty {
position: relative; position: relative;
padding: .75rem; padding: 8px 8px 24px;
min-height: 160px; min-height: 160px;
} }
.search-result { .search-result {
box-shadow: 1px 1px 10px rgba(0, 0, 0, .5); box-shadow: 1px 1px 10px rgba(0, 0, 0, .75);
border-radius: 3px; border-radius: 4px;
border: 1px solid transparent; border: 1px solid #555;
margin-bottom: 1rem; margin-bottom: 24px;
background-color: #eee;
} }
.search-result:hover { .search-result:hover {
border-color: #888; border-color: #000;
background-color: #fff;
} }
.search-result .lds-spinner, .search-result-empty .lds-spinner { .search-result .lds-spinner,
transform: scale(.75); .search-result-empty .lds-spinner {
transform: scale(.5);
}
.search-result-empty .lds-spinner {
opacity: .2;
} }
.search-result-fadein { .search-result-fadein {
@ -51,6 +59,7 @@ body.search-results-shown {
height: 140px; height: 140px;
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
cursor: pointer;
} }
.search-result-title { .search-result-title {
@ -74,23 +83,25 @@ body.search-results-shown {
} }
.search-result-info > div { .search-result-info > div {
opacity: 0; /* opacity: 0; */
position: absolute; position: absolute;
width: 100%; width: 100%;
transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out;
} }
.search-result:hover .search-result-info > div { .search-result:hover .actions {
opacity: 1; opacity: 1;
} }
.search-result-overlay { .search-result-overlay {
bottom: 0; bottom: -24px;
} }
.search-result-info > .actions { .search-result-info > .actions {
bottom: 70px; bottom: 15px;
text-align: center; text-align: center;
z-index: 10;
opacity: 0;
} }
.search-result-info > .actions > button { .search-result-info > .actions > button {
@ -105,11 +116,10 @@ body.search-results-shown {
.search-result-overlay > * { .search-result-overlay > * {
display: flex; display: flex;
padding: .25rem .5rem;
} }
.search-result-author { .search-result-author {
max-width: 50%; max-width: 20%;
} }
.search-result-author-link { .search-result-author-link {
@ -121,15 +131,12 @@ body.search-results-shown {
display: block; display: block;
} }
.search-result-author-link:hover {
color: #fff;
}
.search-result-description-group { .search-result-description-group {
color: white;
background-color: hsla(180, 20%, 20%, 0.85);
align-items: center; align-items: center;
padding-right: .25rem; padding: 0;
font-size: 90%;
line-height: 24px;
min-height: 5px;
} }
.search-result-description { .search-result-description {
@ -140,13 +147,17 @@ body.search-results-shown {
} }
.search-result-meta { .search-result-meta {
background-color: hsla(180, 27%, 37%, 0.85); background-color: hsla(0, 0%, 93%, 0.76);
color: hsl(180, 27%, 80%);
justify-content: space-between; 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 { .search-result-meta > * > :first-child {
display: block; display: none;
opacity: .75; opacity: .75;
} }
@ -161,19 +172,18 @@ body.search-results-shown {
.search-result-rating { .search-result-rating {
font-weight: 600; font-weight: 600;
padding: 1px 2px 1px 2px; padding: 1px 2px 1px 2px;
color: #fff;
} }
.search-result-rating.good { .search-result-rating.good {
background-color: darkgreen; color: darkgreen;
} }
.search-result-rating.okay { .search-result-rating.okay {
background-color: darkorange; color: chocolate;
} }
.search-result-rating.bad { .search-result-rating.bad {
background-color: darkred; color: darkred;
} }
.search-result-rating.none { .search-result-rating.none {
@ -184,7 +194,6 @@ body.search-results-shown {
} }
.search-result-install, .search-result-customize, .search-result-uninstall { .search-result-install, .search-result-customize, .search-result-uninstall {
width: 40%;
margin: 3px; margin: 3px;
} }
@ -193,7 +202,16 @@ body.search-results-shown {
flex-direction: row; flex-direction: row;
text-align: center; text-align: center;
word-break: keep-all; 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, #search-results-nav-top button,
@ -203,11 +221,17 @@ body.search-results-shown {
border: none; border: none;
padding: .25rem 1rem; padding: .25rem 1rem;
margin: 0 .5rem; 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-top button:hover,
#search-results-nav-bottom 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 { #find-styles-inline-group label {
@ -231,11 +255,12 @@ body.search-results-shown {
margin: auto; margin: auto;
animation: lds-spinner 1s reverse; animation: lds-spinner 1s reverse;
animation-fill-mode: both; animation-fill-mode: both;
filter: invert(1) drop-shadow(1px 1px 3px #000);
} }
@keyframes lds-spinner { @keyframes lds-spinner {
0% { 0% {
opacity: .25; opacity: 1;
} }
100% { 100% {

52
popup/search-results.js
View File

@ -16,6 +16,8 @@ window.addEventListener('showStyles:done', function _() {
const BASE_URL = 'https://userstyles.org'; const BASE_URL = 'https://userstyles.org';
const UPDATE_URL = 'https://update.userstyles.org/%.md5'; const UPDATE_URL = 'https://update.userstyles.org/%.md5';
const UI_LANG = chrome.i18n.getUILanguage();
// normal category is just one word like 'github' or 'google' // normal category is just one word like 'github' or 'google'
// but for some sites we need a fallback // but for some sites we need a fallback
// key: category.tld // key: category.tld
@ -72,22 +74,23 @@ window.addEventListener('showStyles:done', function _() {
handleEvent.openURLandHide.call(this, event); handleEvent.openURLandHide.call(this, event);
return; return;
} }
event.preventDefault();
$('#find-styles-inline-group').classList.add('hidden');
this.textContent = this.title; this.textContent = this.title;
this.title = ''; this.title = '';
init(); init();
load(); load();
event.preventDefault();
}, },
}); });
return; return;
function init() { 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.container = $('#search-results');
dom.error = $('#search-results-error'); 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 usoId = md5Url && md5Url.match(/\d+|$/)[0];
const entry = usoId && $('#' + RESULT_ID_PREFIX + usoId); const entry = usoId && $('#' + RESULT_ID_PREFIX + usoId);
if (entry) { if (entry) {
entry._result.installed = true; entry._result.installed = true;
entry._result.installedStyleId = id;
renderActionButtons(entry); renderActionButtons(entry);
} }
}); });
@ -383,6 +387,7 @@ window.addEventListener('showStyles:done', function _() {
const description = result.description const description = result.description
.replace(/<[^>]*>/g, '') .replace(/<[^>]*>/g, '')
.replace(/([^.]\.)(\s)/g, '$1\n$2')
.replace(/[\r\n]{3,}/g, '\n\n'); .replace(/[\r\n]{3,}/g, '\n\n');
Object.assign($('.search-result-description', entry), { Object.assign($('.search-result-description', entry), {
textContent: description, textContent: description,
@ -403,7 +408,7 @@ window.addEventListener('showStyles:done', function _() {
let ratingValue = result.rating; let ratingValue = result.rating;
if (ratingValue === null) { if (ratingValue === null) {
ratingClass = 'none'; ratingClass = 'none';
ratingValue = 'n/a'; ratingValue = '';
} else if (ratingValue >= 2.5) { } else if (ratingValue >= 2.5) {
ratingClass = 'good'; ratingClass = 'good';
ratingValue = ratingValue.toFixed(1); ratingValue = ratingValue.toFixed(1);
@ -418,7 +423,20 @@ window.addEventListener('showStyles:done', function _() {
textContent: ratingValue, textContent: ratingValue,
className: 'search-result-rating ' + ratingClass 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), { Object.assign($('.search-result-install-count', entry), {
textContent: result.total_install_count.toLocaleString() textContent: result.total_install_count.toLocaleString()
}); });
@ -428,6 +446,10 @@ window.addEventListener('showStyles:done', function _() {
} }
function renderActionButtons(entry) { 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); const uninstallButton = $('.search-result-uninstall', entry);
uninstallButton.onclick = onUninstallClicked; 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); uninstallButton.classList.toggle('hidden', !result.installed);
} }
function onUninstallClicked(event) { function onUninstallClicked(event) {
event.stopPropagation(); event.stopPropagation();
const entry = this.closest('.search-result'); const entry = this.closest('.search-result');
const result = entry._result; deleteStyleSafe({id: entry._result.installedStyleId});
deleteStyleSafe({id: result.installedStyleId})
.then(() => {
entry._result.installed = false;
renderActionButtons(entry);
});
} }
/** Installs the current userstyleSearchResult into Stylus. */ /** Installs the current userstyleSearchResult into Stylus. */
@ -475,6 +492,7 @@ window.addEventListener('showStyles:done', function _() {
showSpinner(entry); showSpinner(entry);
installButton.disabled = true; installButton.disabled = true;
entry.style.setProperty('pointer-events', 'none', 'important');
// Fetch settings to see if we should display "configure" button // Fetch settings to see if we should display "configure" button
Promise.all([ Promise.all([
@ -488,11 +506,6 @@ window.addEventListener('showStyles:done', function _() {
style.reason = 'install'; style.reason = 'install';
return saveStyleSafe(style); return saveStyleSafe(style);
}) })
.then(savedStyle => {
result.installed = true;
result.installedStyleId = savedStyle.id;
renderActionButtons(entry);
})
.catch(reason => { .catch(reason => {
const usoId = result.id; const usoId = result.id;
console.debug('install:saveStyleSafe(usoID:', usoId, ') => [ERROR]: ', reason); console.debug('install:saveStyleSafe(usoID:', usoId, ') => [ERROR]: ', reason);
@ -501,6 +514,7 @@ window.addEventListener('showStyles:done', function _() {
.then(() => { .then(() => {
$.remove('.lds-spinner', entry); $.remove('.lds-spinner', entry);
installButton.disabled = false; installButton.disabled = false;
entry.style.pointerEvents = '';
}); });
function fetchStyleSettings(result) { function fetchStyleSettings(result) {