- ![]()
+ ![]()
-
+
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) {