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

Search result only shows title & thumbnail, more info on hover.

Browse Source 
Clicking search result thumbnail (overlay) installs it. So does clicking "install" button.
Fixed author link installing the sytle.
Removed bg-color change on hover.
This commit is contained in:
derv82 2017-12-07 00:06:12 -08:00
parent 5db0cc65ee
commit 34ab1abd11
3 changed files with 73 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
popup.html
View File

@ -85,36 +85,40 @@
<template data-id="searchResult"> <template data-id="searchResult">
<div class="search-result"> <div class="search-result">
<h3 class="search-result-title"></h3> <a class="search-result-title"></a>
<img class="search-result-screenshot" /> <div class="search-result-info">
<div class="search-result-description-group"> <img class="search-result-screenshot" />
<div class="search-result-description"></div> <div class="search-result-overlay">
<div class="search-result-description-info"> <div class="actions">
<svg class="svg-icon info" viewBox="0 0 14 16"> <button class="search-result-install" i18n-text="installButton"></button>
<path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path> <button class="search-result-customize hidden"
</svg> i18n-text="searchResultCustomize"
i18n-title="searchResultCustomizeTooltip"></button>
</div>
<div class="search-result-author">
<label i18n-text="author"></label>:
<a class="search-result-author-link" target="_blank"></a>
</div>
<div class="search-result-description-group">
<div class="search-result-description"></div>
<div class="search-result-description-info">
<svg class="svg-icon info" viewBox="0 0 14 16">
<path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
</svg>
</div>
</div>
<div class="search-result-meta">
<div class="search-result-meta-rating">
<span i18n-text="searchResultRating"></span>:
<span class="search-result-rating"></span>
</div>
<div class="search-result-meta-install-count">
<span i18n-text="searchResultInstallCount"></span>:
<span class="search-result-install-count"></span>
</div>
</div>
</div> </div>
</div> </div>
<div class="search-result-author">
<label i18n-text="author"></label>:
<a class="search-result-author-link" target="_blank"></a>
</div>
<div class="search-result-meta">
<div class="search-result-meta-rating">
<span i18n-text="searchResultRating"></span>:
<span class="search-result-rating"></span>
</div>
<div class="search-result-meta-install-count">
<span i18n-text="searchResultInstallCount"></span>:
<span class="search-result-install-count"></span>
</div>
</div>
<div class="actions">
<button class="search-result-install" i18n-text="installButton"></button>
<button class="search-result-customize hidden"
i18n-text="searchResultCustomize"
i18n-title="searchResultCustomizeTooltip"></button>
</div>
</div> </div>
</template> </template>

38
popup/search-results.css
View File

@ -24,19 +24,43 @@ body.search-results-shown {
.search-result { .search-result {
padding: 5px; padding: 5px;
} }
.search-result:hover {
background-color: rgba(50, 150, 255, 0.5);
}
.search-result-screenshot { .search-result-screenshot {
max-height: 120px; height: 140px;
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
} }
.search-result-title { .search-result-title {
padding: 3px; padding: 3px;
margin: 0; font-size: 1.2em;
font-weight: 600;
}
.search-result-info {
position: relative;
}
.search-result-overlay {
width: 100%;
height: 140px;
position: absolute;
top: 0;
opacity: 0;
background-color: rgba(255, 255, 255, 0.6);
transition: opacity linear 0.2s;
}
.search-result-info:hover .search-result-overlay {
opacity: 1;
}
.search-result-overlay > .actions {
margin-top: 10px;
margin-bottom: 10px;
}
.search-result-overlay > :not(.actions) {
margin: 0 10px 0 10px;
} }
.search-result-author-link { .search-result-author-link {
@ -53,8 +77,10 @@ body.search-results-shown {
.search-result-description.expanded { .search-result-description.expanded {
width: 100%; width: 100%;
max-height: 100%;
white-space: pre-wrap; white-space: pre-wrap;
overflow: auto; overflow-x: auto;
overflow-y: hidden;
text-overflow: unset; text-overflow: unset;
display: block; display: block;
} }

12
popup/search-results.js
View File

@ -292,13 +292,14 @@
id: 'search-result-' + userstyleSearchResult.id, id: 'search-result-' + userstyleSearchResult.id,
onclick: handleEvent.openURLandHide onclick: handleEvent.openURLandHide
}); });
entry.dataset.href = searchAPI.BASE_URL + userstyleSearchResult.url;
$('#search-results-list').appendChild(entry); $('#search-results-list').appendChild(entry);
const searchResultName = userstyleSearchResult.name; const searchResultName = userstyleSearchResult.name;
const title = $('.search-result-title', entry); const title = $('.search-result-title', entry);
Object.assign(title, { Object.assign(title, {
textContent: searchResultName textContent: searchResultName,
onclick: handleEvent.openURLandHide,
href: searchAPI.BASE_URL + userstyleSearchResult.url
}); });
const screenshot = $('.search-result-screenshot', entry); const screenshot = $('.search-result-screenshot', entry);
@ -314,6 +315,8 @@
title: searchResultName title: searchResultName
}); });
$('.search-result-overlay', entry).onclick = install;
const description = $('.search-result-description', entry); const description = $('.search-result-description', entry);
Object.assign(description, { Object.assign(description, {
textContent: userstyleSearchResult.description.replace(/<.*?>/g, '').replace(/(\r\n?)\r\n?/g, '$1') textContent: userstyleSearchResult.description.replace(/<.*?>/g, '').replace(/(\r\n?)\r\n?/g, '$1')
@ -332,7 +335,10 @@
textContent: userstyleSearchResult.user.name, textContent: userstyleSearchResult.user.name,
title: userstyleSearchResult.user.name, title: userstyleSearchResult.user.name,
href: searchAPI.BASE_URL + '/users/' + userstyleSearchResult.user.id, href: searchAPI.BASE_URL + '/users/' + userstyleSearchResult.user.id,
onclick: handleEvent.openURLandHide onclick: event => {
event.stopPropagation();
handleEvent.openURLandHide.call(authorLink, event);
}
}); });
const rating = $('.search-result-rating', entry); const rating = $('.search-result-rating', entry);