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

Search results show "uninstall" after installation.

Browse Source 
* Not removed from search results
* Still shows "customize" button.
This commit is contained in:
derv82 2017-12-07 02:06:44 -08:00
parent 465cdec625
commit 1f95fd3571
3 changed files with 35 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
popup.html
View File

@ -91,6 +91,7 @@
<div class="search-result-overlay"> <div class="search-result-overlay">
<div class="actions"> <div class="actions">
<button class="search-result-install" i18n-text="installButton"></button> <button class="search-result-install" i18n-text="installButton"></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="searchResultCustomize" i18n-text="searchResultCustomize"
i18n-title="searchResultCustomizeTooltip"></button> i18n-title="searchResultCustomizeTooltip"></button>

6
popup/search-results.css
View File

@ -128,10 +128,12 @@ body.search-results-shown {
font-weight: 600; font-weight: 600;
} }
.search-result-install { .search-result-install, .search-result-uninstall {
width: 100%; width: 100%;
} }
.search-result-install.customize, .search-result-customize { .search-result-install.customize,
.search-result-uninstall.customize,
.search-result-customize {
width: 50%; width: 50%;
} }

50
popup/search-results.js
View File

@ -283,9 +283,6 @@
style_settings: [...] style_settings: [...]
} }
*/ */
if (userstyleSearchResult.installed) {
return;
}
const entry = template.searchResult.cloneNode(true); const entry = template.searchResult.cloneNode(true);
Object.assign(entry, { Object.assign(entry, {
@ -315,7 +312,7 @@
title: searchResultName title: searchResultName
}); });
$('.search-result-overlay', entry).onclick = install; const searchResultOverlay = $('.search-result-overlay', entry);
const description = $('.search-result-description', entry); const description = $('.search-result-description', entry);
Object.assign(description, { Object.assign(description, {
@ -367,12 +364,17 @@
textContent: userstyleSearchResult.total_install_count.toLocaleString() textContent: userstyleSearchResult.total_install_count.toLocaleString()
}); });
const uninstallButton = $('.search-result-uninstall', entry);
uninstallButton.onclick = uninstall;
const installButton = $('.search-result-install', entry); const installButton = $('.search-result-install', entry);
installButton.onclick = install; installButton.onclick = install;
if (userstyleSearchResult.style_settings.length > 0) { if (userstyleSearchResult.style_settings.length > 0) {
// Style has customizations // Style has customizations
installButton.classList.add('customize'); installButton.classList.add('customize');
uninstallButton.classList.add('customize');
const customizeButton = $('.search-result-customize', entry); const customizeButton = $('.search-result-customize', entry);
customizeButton.dataset.href = searchAPI.BASE_URL + userstyleSearchResult.url; customizeButton.dataset.href = searchAPI.BASE_URL + userstyleSearchResult.url;
customizeButton.classList.remove('hidden'); customizeButton.classList.remove('hidden');
@ -382,7 +384,25 @@
}; };
} }
/** Installs the current userstyleSearchResult into stylus. */ if (userstyleSearchResult.installed) {
searchResultOverlay.onclick = uninstall;
installButton.classList.add('hidden');
uninstallButton.classList.remove('hidden');
} else {
searchResultOverlay.onclick = install;
}
/** Uninstalls the current userstyleSearchResult from Stylus. */
function uninstall(event) {
event.stopPropagation();
deleteStyleSafe({id: userstyleSearchResult.installedStyleId})
.then(() => {
userstyleSearchResult.installed = false;
render();
});
}
/** Installs the current userstyleSearchResult into Stylus. */
function install(event) { function install(event) {
if (event) { if (event) {
event.stopPropagation(); event.stopPropagation();
@ -390,21 +410,11 @@
const styleId = userstyleSearchResult.id; const styleId = userstyleSearchResult.id;
const url = searchAPI.BASE_URL + '/styles/chrome/' + styleId + '.json'; const url = searchAPI.BASE_URL + '/styles/chrome/' + styleId + '.json';
saveStyleSafe(userstyleSearchResult.json) saveStyleSafe(userstyleSearchResult.json)
.then(() => { .then(savedStyle => {
// Remove search result after installing // Success: Store installed styleId, mark as installed.
let matchingIndex = -1; userstyleSearchResult.installed = true;
processedResults.forEach((processedResult, index) => { userstyleSearchResult.installedStyleId = savedStyle.id;
if (processedResult.id === userstyleSearchResult.id) { render(); // Hides install button, shows uninstall button.
matchingIndex = index;
}
});
if (matchingIndex >= 0) {
processedResults.splice(matchingIndex, 1);
}
render();
// Load more results if needed.
processNextResult();
}) })
.catch(reason => { .catch(reason => {
console.log('install:saveStyleSafe(', url, ') => [ERROR]: ', reason); console.log('install:saveStyleSafe(', url, ') => [ERROR]: ', reason);