redesign inline search cards
This commit is contained in:
tophf
parent
f4bfeea5a6
commit
752af458a3
18
popup.html
18
popup.html
|
|
@ -87,9 +87,9 @@
|
|||
<div class="search-result">
|
||||
<a class="search-result-title"><span></span></a>
|
||||
<div class="search-result-info">
|
||||
<img class="search-result-screenshot">
|
||||
<img class="search-result-screenshot" i18n-title="installButton">
|
||||
<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-customize hidden"
|
||||
i18n-text="configureStyle"
|
||||
|
|
@ -99,15 +99,23 @@
|
|||
<div class="search-result-meta">
|
||||
<div class="search-result-author">
|
||||
<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 class="search-result-meta-rating">
|
||||
<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 class="search-result-meta-install-count">
|
||||
<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 class="search-result-description-group">
|
||||
|
|
|
|||
|
|
@ -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% {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user