Updating read/star icons to SVGs
This commit is contained in:
Bogdan Brinza
GitHub
parent
9a4b045bdc
commit
9a6c80f562
8 changed files with 89 additions and 39 deletions
|
|
@ -149,6 +149,12 @@ SOFTWARE.
|
|||
<path 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" />
|
||||
</svg>
|
||||
{{ end }}
|
||||
{{ define "icon_unstar" }}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-unstar" width="24" height="24" 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 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" />
|
||||
</svg>
|
||||
{{ end }}
|
||||
{{ define "icon_save" }}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-download" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
|
|
@ -255,20 +261,20 @@ SOFTWARE.
|
|||
<a href="#"
|
||||
title="{{ t "entry.status.title" }}"
|
||||
data-toggle-status="true"
|
||||
data-label-read="✔ {{ t "entry.status.read" }}"
|
||||
data-label-unread="✘ {{ t "entry.status.unread" }}"
|
||||
data-label-read="{{ t "entry.status.read" }}"
|
||||
data-label-unread="{{ t "entry.status.unread" }}"
|
||||
data-value="{{ if eq .entry.Status "read" }}read{{ else }}unread{{ end }}"
|
||||
><span class="icon-label">{{ if eq .entry.Status "read" }}✘ {{ t "entry.status.unread" }}{{ else }}✔ {{ t "entry.status.read" }}{{ end }}</span></a>
|
||||
>{{ if eq .entry.Status "read" }}{{ template "icon_unread" }}{{ else }}{{ template "icon_read" }}{{ end }}<span class="icon-label">{{ if eq .entry.Status "read" }}{{ t "entry.status.unread" }}{{ else }}{{ t "entry.status.read" }}{{ end }}</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"
|
||||
data-toggle-bookmark="true"
|
||||
data-bookmark-url="{{ route "toggleBookmark" "entryID" .entry.ID }}"
|
||||
data-label-loading="{{ t "entry.state.saving" }}"
|
||||
data-label-star="☆ {{ t "entry.bookmark.toggle.on" }}"
|
||||
data-label-unstar="★ {{ t "entry.bookmark.toggle.off" }}"
|
||||
data-label-star="{{ t "entry.bookmark.toggle.on" }}"
|
||||
data-label-unstar="{{ t "entry.bookmark.toggle.off" }}"
|
||||
data-value="{{ if .entry.Starred }}star{{ else }}unstar{{ end }}"
|
||||
><span class="icon-label">{{ if .entry.Starred }}★ {{ t "entry.bookmark.toggle.off" }}{{ else }}☆ {{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
|
||||
>{{ if .entry.Starred }}{{ template "icon_unstar" }}{{ else }}{{ template "icon_star" }}{{ end }}<span class="icon-label">{{ if .entry.Starred }}{{ t "entry.bookmark.toggle.off" }}{{ else }}{{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
|
||||
</li>
|
||||
{{ if .entry.ShareCode }}
|
||||
<li>
|
||||
|
|
@ -468,6 +474,18 @@ SOFTWARE.
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template id="icon_read">
|
||||
{{ template "icon_read" }}
|
||||
</template>
|
||||
<template id="icon_unread">
|
||||
{{ template "icon_unread" }}
|
||||
</template>
|
||||
<template id="icon_star">
|
||||
{{ template "icon_star" }}
|
||||
</template>
|
||||
<template id="icon_unstar">
|
||||
{{ template "icon_unstar" }}
|
||||
</template>
|
||||
</body>
|
||||
</html>
|
||||
{{ end }}
|
||||
|
|
@ -522,9 +540,9 @@ var templateCommonMapChecksums = map[string]string{
|
|||
"entry_pagination": "cdca9cf12586e41e5355190b06d9168f57f77b85924d1e63b13524bc15abcbf6",
|
||||
"feed_list": "931e43d328a116318c510de5658c688cd940b934c86b6ec82a472e1f81e020ae",
|
||||
"feed_menu": "318d8662dda5ca9dfc75b909c8461e79c86fb5082df1428f67aaf856f19f4b50",
|
||||
"icons": "9a41753778072f286216085d8712495e2ccca20c7a24f5c982775436a3d38579",
|
||||
"item_meta": "56ab09d7dd46eeb2e2ee11ddcec0c157a5832c896dbd2887d9e2b013680b2af6",
|
||||
"layout": "c4b8c65c0d85ed1aff0550f58b9dbf0768c74f2df6232952c0fe299d4c73d674",
|
||||
"icons": "7161afa4cce46245a99cb1e49a605d3ff30e907c3f568ef9c17218718d20e042",
|
||||
"item_meta": "fefa219c8296f0370632336ed59a2c8b0c2146ee77f3b10de1d9b87982219dc5",
|
||||
"layout": "03c77ed0163b790c0622ecec173119537087c66f6a3925a931ae83a9a94d32cf",
|
||||
"pagination": "7b61288e86283c4cf0dc83bcbf8bf1c00c7cb29e60201c8c0b633b2450d2911f",
|
||||
"settings_menu": "e2b777630c0efdbc529800303c01d6744ed3af80ec505ac5a5b3f99c9b989156",
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,6 +43,12 @@ SOFTWARE.
|
|||
<path 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" />
|
||||
</svg>
|
||||
{{ end }}
|
||||
{{ define "icon_unstar" }}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-unstar" width="24" height="24" 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 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" />
|
||||
</svg>
|
||||
{{ end }}
|
||||
{{ define "icon_save" }}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-download" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
|
|
|
|||
|
|
@ -20,20 +20,20 @@
|
|||
<a href="#"
|
||||
title="{{ t "entry.status.title" }}"
|
||||
data-toggle-status="true"
|
||||
data-label-read="✔ {{ t "entry.status.read" }}"
|
||||
data-label-unread="✘ {{ t "entry.status.unread" }}"
|
||||
data-label-read="{{ t "entry.status.read" }}"
|
||||
data-label-unread="{{ t "entry.status.unread" }}"
|
||||
data-value="{{ if eq .entry.Status "read" }}read{{ else }}unread{{ end }}"
|
||||
><span class="icon-label">{{ if eq .entry.Status "read" }}✘ {{ t "entry.status.unread" }}{{ else }}✔ {{ t "entry.status.read" }}{{ end }}</span></a>
|
||||
>{{ if eq .entry.Status "read" }}{{ template "icon_unread" }}{{ else }}{{ template "icon_read" }}{{ end }}<span class="icon-label">{{ if eq .entry.Status "read" }}{{ t "entry.status.unread" }}{{ else }}{{ t "entry.status.read" }}{{ end }}</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"
|
||||
data-toggle-bookmark="true"
|
||||
data-bookmark-url="{{ route "toggleBookmark" "entryID" .entry.ID }}"
|
||||
data-label-loading="{{ t "entry.state.saving" }}"
|
||||
data-label-star="☆ {{ t "entry.bookmark.toggle.on" }}"
|
||||
data-label-unstar="★ {{ t "entry.bookmark.toggle.off" }}"
|
||||
data-label-star="{{ t "entry.bookmark.toggle.on" }}"
|
||||
data-label-unstar="{{ t "entry.bookmark.toggle.off" }}"
|
||||
data-value="{{ if .entry.Starred }}star{{ else }}unstar{{ end }}"
|
||||
><span class="icon-label">{{ if .entry.Starred }}★ {{ t "entry.bookmark.toggle.off" }}{{ else }}☆ {{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
|
||||
>{{ if .entry.Starred }}{{ template "icon_unstar" }}{{ else }}{{ template "icon_star" }}{{ end }}<span class="icon-label">{{ if .entry.Starred }}{{ t "entry.bookmark.toggle.off" }}{{ else }}{{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
|
||||
</li>
|
||||
{{ if .entry.ShareCode }}
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -157,6 +157,18 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template id="icon_read">
|
||||
{{ template "icon_read" }}
|
||||
</template>
|
||||
<template id="icon_unread">
|
||||
{{ template "icon_unread" }}
|
||||
</template>
|
||||
<template id="icon_star">
|
||||
{{ template "icon_star" }}
|
||||
</template>
|
||||
<template id="icon_unstar">
|
||||
{{ template "icon_unstar" }}
|
||||
</template>
|
||||
</body>
|
||||
</html>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -13,24 +13,24 @@
|
|||
<a href="#"
|
||||
title="{{ t "entry.status.title" }}"
|
||||
data-toggle-status="true"
|
||||
data-label-unread="✘ {{ t "entry.status.unread" }}"
|
||||
data-label-read="✔︎ {{ t "entry.status.read" }}"
|
||||
data-label-unread="{{ t "entry.status.unread" }}"
|
||||
data-label-read="{{ t "entry.status.read" }}"
|
||||
data-toast-unread="✘ {{ t "entry.status.toast.unread" }}"
|
||||
data-toast-read="✔︎ {{ t "entry.status.toast.read" }}"
|
||||
data-value="{{ if eq .entry.Status "read" }}read{{ else }}unread{{ end }}"
|
||||
><span class="icon-label">{{ if eq .entry.Status "unread" }}✔ {{ t "entry.status.read" }}{{ else }}✘ {{ t "entry.status.unread" }}{{ end }}</span></a>
|
||||
>{{ if eq .entry.Status "unread" }}{{ template "icon_read" }}{{ else }}{{ template "icon_unread" }}{{ end }}<span class="icon-label">{{ if eq .entry.Status "unread" }}{{ t "entry.status.read" }}{{ else }}{{ t "entry.status.unread" }}{{ end }}</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"
|
||||
data-toggle-bookmark="true"
|
||||
data-bookmark-url="{{ route "toggleBookmark" "entryID" .entry.ID }}"
|
||||
data-label-loading="{{ t "entry.state.saving" }}"
|
||||
data-label-star="☆ {{ t "entry.bookmark.toggle.on" }}"
|
||||
data-label-unstar="★ {{ t "entry.bookmark.toggle.off" }}"
|
||||
data-label-star="{{ t "entry.bookmark.toggle.on" }}"
|
||||
data-label-unstar="{{ t "entry.bookmark.toggle.off" }}"
|
||||
data-toast-star="★ {{ t "entry.bookmark.toast.on" }}"
|
||||
data-toast-unstar="☆ {{ t "entry.bookmark.toast.off" }}"
|
||||
data-value="{{ if .entry.Starred }}star{{ else }}unstar{{ end }}"
|
||||
><span class="icon-label">{{ if .entry.Starred }}★ {{ t "entry.bookmark.toggle.off" }}{{ else }}☆ {{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
|
||||
>{{ if .entry.Starred }}{{ template "icon_unstar" }}{{ else }}{{ template "icon_star" }}{{ end }}<span class="icon-label">{{ if .entry.Starred }}{{ t "entry.bookmark.toggle.off" }}{{ else }}{{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
|
||||
</li>
|
||||
{{ if .hasSaveEntry }}
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -691,24 +691,24 @@ var templateViewsMap = map[string]string{
|
|||
<a href="#"
|
||||
title="{{ t "entry.status.title" }}"
|
||||
data-toggle-status="true"
|
||||
data-label-unread="✘ {{ t "entry.status.unread" }}"
|
||||
data-label-read="✔︎ {{ t "entry.status.read" }}"
|
||||
data-label-unread="{{ t "entry.status.unread" }}"
|
||||
data-label-read="{{ t "entry.status.read" }}"
|
||||
data-toast-unread="✘ {{ t "entry.status.toast.unread" }}"
|
||||
data-toast-read="✔︎ {{ t "entry.status.toast.read" }}"
|
||||
data-value="{{ if eq .entry.Status "read" }}read{{ else }}unread{{ end }}"
|
||||
><span class="icon-label">{{ if eq .entry.Status "unread" }}✔ {{ t "entry.status.read" }}{{ else }}✘ {{ t "entry.status.unread" }}{{ end }}</span></a>
|
||||
>{{ if eq .entry.Status "unread" }}{{ template "icon_read" }}{{ else }}{{ template "icon_unread" }}{{ end }}<span class="icon-label">{{ if eq .entry.Status "unread" }}{{ t "entry.status.read" }}{{ else }}{{ t "entry.status.unread" }}{{ end }}</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"
|
||||
data-toggle-bookmark="true"
|
||||
data-bookmark-url="{{ route "toggleBookmark" "entryID" .entry.ID }}"
|
||||
data-label-loading="{{ t "entry.state.saving" }}"
|
||||
data-label-star="☆ {{ t "entry.bookmark.toggle.on" }}"
|
||||
data-label-unstar="★ {{ t "entry.bookmark.toggle.off" }}"
|
||||
data-label-star="{{ t "entry.bookmark.toggle.on" }}"
|
||||
data-label-unstar="{{ t "entry.bookmark.toggle.off" }}"
|
||||
data-toast-star="★ {{ t "entry.bookmark.toast.on" }}"
|
||||
data-toast-unstar="☆ {{ t "entry.bookmark.toast.off" }}"
|
||||
data-value="{{ if .entry.Starred }}star{{ else }}unstar{{ end }}"
|
||||
><span class="icon-label">{{ if .entry.Starred }}★ {{ t "entry.bookmark.toggle.off" }}{{ else }}☆ {{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
|
||||
>{{ if .entry.Starred }}{{ template "icon_unstar" }}{{ else }}{{ template "icon_star" }}{{ end }}<span class="icon-label">{{ if .entry.Starred }}{{ t "entry.bookmark.toggle.off" }}{{ else }}{{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
|
||||
</li>
|
||||
{{ if .hasSaveEntry }}
|
||||
<li>
|
||||
|
|
@ -1615,7 +1615,7 @@ var templateViewsMapChecksums = map[string]string{
|
|||
"edit_category": "b1c0b38f1b714c5d884edcd61e5b5295a5f1c8b71c469b35391e4dcc97cc6d36",
|
||||
"edit_feed": "5de7626448c48de384a0388227ab0c3b75b1ec19b5de440c91039180852cc5dc",
|
||||
"edit_user": "875292a3e84f700b17ae1e4b7cd40759a4e79a78daccc4e1214d1d22110b6def",
|
||||
"entry": "8fdecabc90354615cdf213542620e5ac16632a494fd6a87b3b2280ac879f6c34",
|
||||
"entry": "07ccdd5b9e99c63872bcab44b70b347cb59424fc8b69fd671b99b832c47277cc",
|
||||
"feed_entries": "89977ea86b8d43305d587b70e6d9c45c2c88249b3966f2d31051dc7a5f1c48b6",
|
||||
"feeds": "ec7d3fa96735bd8422ba69ef0927dcccddc1cc51327e0271f0312d3f881c64fd",
|
||||
"history_entries": "261b47e5f2f699a9cef1b3b690f80d7aabf585d05b77d67645d623f7ff6c0fbb",
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -136,20 +136,25 @@ function toggleEntryStatus(element, toasting) {
|
|||
|
||||
updateEntriesStatus([entryID], newStatus);
|
||||
|
||||
let icon, label;
|
||||
|
||||
if (currentStatus === "read") {
|
||||
link.innerHTML = '<span class="icon-label">' + link.dataset.labelRead + '</span>';
|
||||
link.dataset.value = "unread";
|
||||
icon = document.querySelector("template#icon_read");
|
||||
label = link.dataset.labelRead;
|
||||
if (toasting) {
|
||||
toast(link.dataset.toastUnread);
|
||||
}
|
||||
} else {
|
||||
link.innerHTML = '<span class="icon-label">' + link.dataset.labelUnread + '</span>';
|
||||
link.dataset.value = "read";
|
||||
icon = document.querySelector("template#icon_unread");
|
||||
label = link.dataset.labelUnread;
|
||||
if (toasting) {
|
||||
toast(link.dataset.toastRead);
|
||||
}
|
||||
}
|
||||
|
||||
link.innerHTML = icon.innerHTML + '<span class="icon-label">' + label + '</span>';
|
||||
link.dataset.value = newStatus;
|
||||
|
||||
if (element.classList.contains("item-status-" + currentStatus)) {
|
||||
element.classList.remove("item-status-" + currentStatus);
|
||||
element.classList.add("item-status-" + newStatus);
|
||||
|
|
@ -248,19 +253,28 @@ function toggleBookmark(parentElement, toasting) {
|
|||
|
||||
let request = new RequestBuilder(element.dataset.bookmarkUrl);
|
||||
request.withCallback(() => {
|
||||
if (element.dataset.value === "star") {
|
||||
element.innerHTML = '<span class="icon-label">' + element.dataset.labelStar + '</span>';
|
||||
element.dataset.value = "unstar";
|
||||
|
||||
let currentStarStatus = element.dataset.value;
|
||||
let newStarStatus = currentStarStatus === "star" ? "unstar" : "star";
|
||||
|
||||
let icon, label;
|
||||
|
||||
if (currentStarStatus === "star") {
|
||||
icon = document.querySelector("template#icon_star");
|
||||
label = element.dataset.labelStar;
|
||||
if (toasting) {
|
||||
toast(element.dataset.toastUnstar);
|
||||
}
|
||||
} else {
|
||||
element.innerHTML = '<span class="icon-label">' + element.dataset.labelUnstar + '</span>';
|
||||
element.dataset.value = "star";
|
||||
icon = document.querySelector("template#icon_unstar");
|
||||
label = element.dataset.labelUnstar;
|
||||
if (toasting) {
|
||||
toast(element.dataset.toastStar);
|
||||
}
|
||||
}
|
||||
|
||||
element.innerHTML = icon.innerHTML + '<span class="icon-label">' + label + '</span>';
|
||||
element.dataset.value = newStarStatus;
|
||||
});
|
||||
request.execute();
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue