oss/miniflux-v2
oss/miniflux-v2
1
0
Fork 0
mirror of https://github.com/miniflux/v2.git synced 2025-09-15 18:57:04 +00:00
Code Wiki Activity

Use SVG icons for toast notifications

Browse source
This commit is contained in:
Frédéric Guillot 2021-03-07 11:55:43 -08:00 • committed by fguillot
parent f6ed2feab4
commit 548c4d4efe
5 changed files with 62 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

17
ui/static/bin/sprite.svg
View file

@ -22,6 +22,8 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Source: https://github.com/tabler/tabler-icons
-->
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-read" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@ -43,10 +45,10 @@ SOFTWARE.
<path fill="currentColor" d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
</symbol>
<symbol id="icon-save" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
<polyline points="7 11 12 16 17 11" />
<line x1="12" y1="4" x2="12" y2="16" />
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2"></path>
<circle cx="12" cy="14" r="2"></circle>
<polyline points="14 4 14 8 8 8 8 4"></polyline>
</symbol>
<symbol id="icon-scraper" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
@ -90,9 +92,10 @@ SOFTWARE.
<line x1="16" y1="5" x2="19" y2="8" />
</symbol>
<symbol id="icon-feeds" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M9 4h3l2 2h5a2 2 0 0 1 2 2v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2" />
<path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2h2" />
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="5" cy="19" r="1"></circle>
<path d="M4 4a16 16 0 0 1 16 16"></path>
<path d="M4 11a9 9 0 0 1 9 9"></path>
</symbol>
<symbol id="icon-entries" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>

10
ui/static/css/common.css
View file

@ -184,7 +184,7 @@ a:hover {
}
/* Notification - "Toast" */
.toast-wrap {
#toast-wrapper {
visibility: hidden;
opacity: 0;
position: fixed;
@ -195,13 +195,15 @@ a:hover {
text-align: center;
}
.toast-msg {
#toast-msg {
background-color: rgba(0,0,0,0.7);
padding: 2px 5px;
padding-bottom: 4px;
padding-left: 4px;
padding-right: 5px;
border-radius: 5px;
}
.toastAnimate {
.toast-animate {
animation: toastKeyFrames 2s;
}

52
ui/static/js/app.js
View file

@ -136,23 +136,23 @@ function toggleEntryStatus(element, toasting) {
updateEntriesStatus([entryID], newStatus);
let icon, label;
let iconElement, label;
if (currentStatus === "read") {
icon = document.querySelector("template#icon_read");
iconElement = document.querySelector("template#icon-read");
label = link.dataset.labelRead;
if (toasting) {
toast(link.dataset.toastUnread);
showToast(link.dataset.toastUnread, iconElement);
}
} else {
icon = document.querySelector("template#icon_unread");
iconElement = document.querySelector("template#icon-unread");
label = link.dataset.labelUnread;
if (toasting) {
toast(link.dataset.toastRead);
showToast(link.dataset.toastRead, iconElement);
}
}
link.innerHTML = icon.innerHTML + '<span class="icon-label">' + label + '</span>';
link.innerHTML = iconElement.innerHTML + '<span class="icon-label">' + label + '</span>';
link.dataset.value = newStatus;
if (element.classList.contains("item-status-" + currentStatus)) {
@ -227,7 +227,8 @@ function saveEntry(element, toasting) {
element.innerHTML = previousInnerHTML;
element.dataset.completed = true;
if (toasting) {
toast(element.dataset.toastDone);
let iconElement = document.querySelector("template#icon-save");
showToast(element.dataset.toastDone, iconElement);
}
});
request.execute();
@ -257,23 +258,23 @@ function toggleBookmark(parentElement, toasting) {
let currentStarStatus = element.dataset.value;
let newStarStatus = currentStarStatus === "star" ? "unstar" : "star";
let icon, label;
let iconElement, label;
if (currentStarStatus === "star") {
icon = document.querySelector("template#icon_star");
iconElement = document.querySelector("template#icon-star");
label = element.dataset.labelStar;
if (toasting) {
toast(element.dataset.toastUnstar);
showToast(element.dataset.toastUnstar, iconElement);
}
} else {
icon = document.querySelector("template#icon_unstar");
iconElement = document.querySelector("template#icon-unstar");
label = element.dataset.labelUnstar;
if (toasting) {
toast(element.dataset.toastStar);
showToast(element.dataset.toastStar, iconElement);
}
}
element.innerHTML = icon.innerHTML + '<span class="icon-label">' + label + '</span>';
element.innerHTML = iconElement.innerHTML + '<span class="icon-label">' + label + '</span>';
element.dataset.value = newStarStatus;
});
request.execute();
@ -592,12 +593,21 @@ function handleConfirmationMessage(linkElement, callback) {
containerElement.appendChild(questionElement);
}
function toast(msg) {
if (!msg) return;
document.querySelector('.toast-wrap .toast-msg').innerHTML = msg;
let toastWrapper = document.querySelector('.toast-wrap');
toastWrapper.classList.remove('toastAnimate');
setTimeout(function () {
toastWrapper.classList.add('toastAnimate');
}, 100);
function showToast(label, iconElement) {
if (!label || !iconElement) {
return;
}
const toastMsgElement = document.getElementById("toast-msg");
if (toastMsgElement) {
toastMsgElement.innerHTML = iconElement.innerHTML + '<span class="icon-label">' + label + '</span>';
const toastElementWrapper = document.getElementById("toast-wrapper");
if (toastElementWrapper) {
toastElementWrapper.classList.remove('toast-animate');
setTimeout(function () {
toastElementWrapper.classList.add('toast-animate');
}, 100);
}
}
}