mirror of
https://github.com/miniflux/v2.git
synced 2025-07-02 16:38:37 +00:00
Add SVG icons to entry actions
This commit is contained in:
Frédéric Guillot
parent
53dd2c1f1d
commit
3c3241f93c
14 changed files with 309 additions and 87 deletions
88
template/html/common/icons.html
Normal file
88
template/html/common/icons.html
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<!--
|
||||
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020 Paweł Kuna
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
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.
|
||||
|
||||
-->
|
||||
{{ define "icon_read" }}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" 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"/>
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path d="M9 12l2 2l4 -4" />
|
||||
</svg>
|
||||
{{ end }}
|
||||
{{ define "icon_unread" }}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-x" 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"/>
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path d="M10 10l4 4m0 -4l-4 4" />
|
||||
</svg>
|
||||
{{ end }}
|
||||
{{ define "icon_star" }}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" 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 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"/>
|
||||
<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" />
|
||||
</svg>
|
||||
{{ end }}
|
||||
{{ define "icon_scraper" }}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-cloud-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"/>
|
||||
<path d="M19 18a3.5 3.5 0 0 0 0 -7h-1a5 4.5 0 0 0 -11 -2a4.6 4.4 0 0 0 -2.1 8.4" />
|
||||
<line x1="12" y1="13" x2="12" y2="22" />
|
||||
<polyline points="9 19 12 22 15 19" />
|
||||
</svg>
|
||||
{{ end }}
|
||||
{{ define "icon_share" }}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-share" 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"/>
|
||||
<circle cx="6" cy="12" r="3" />
|
||||
<circle cx="18" cy="6" r="3" />
|
||||
<circle cx="18" cy="18" r="3" />
|
||||
<line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
|
||||
<line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
|
||||
</svg>
|
||||
{{ end }}
|
||||
{{ define "icon_comment" }}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-message-circle" 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 d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1" />
|
||||
<line x1="12" y1="12" x2="12" y2="12.01" />
|
||||
<line x1="8" y1="12" x2="8" y2="12.01" />
|
||||
<line x1="16" y1="12" x2="16" y2="12.01" />
|
||||
</svg>
|
||||
{{ end }}
|
||||
{{ define "icon_original" }}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-external-link" 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 d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
|
||||
<line x1="10" y1="14" x2="20" y2="4" />
|
||||
<polyline points="15 4 20 4 20 9" />
|
||||
</svg>
|
||||
{{ end }}
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<time datetime="{{ isodate .entry.Date }}" title="{{ isodate .entry.Date }}">{{ elapsed .user.Timezone .entry.Date }}</time>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<ul class="item-meta-icons">
|
||||
{{ if .hasSaveEntry }}
|
||||
<li>
|
||||
<a href="#"
|
||||
|
|
@ -17,15 +17,24 @@
|
|||
data-save-url="{{ route "saveEntry" "entryID" .entry.ID }}"
|
||||
data-label-loading="{{ t "entry.state.saving" }}"
|
||||
data-label-done="{{ t "entry.save.completed" }}"
|
||||
>{{ t "entry.save.label" }}</a>
|
||||
>{{ template "icon_save" }}<span class="icon-label">{{ t "entry.save.label" }}</span></a>
|
||||
</li>
|
||||
{{ end }}
|
||||
<li>
|
||||
<a href="{{ .entry.URL | safeURL }}" target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer" data-original-link="true">{{ t "entry.original.label" }}</a>
|
||||
<a href="{{ .entry.URL | safeURL }}"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
referrerpolicy="no-referrer"
|
||||
data-original-link="true">{{ template "icon_original" }}<span class="icon-label">{{ t "entry.original.label" }}</span></a>
|
||||
</li>
|
||||
{{ if .entry.CommentsURL }}
|
||||
<li>
|
||||
<a href="{{ .entry.CommentsURL | safeURL }}" title="{{ t "entry.comments.title" }}" target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer" data-comments-link="true">{{ t "entry.comments.label" }}</a>
|
||||
<a href="{{ .entry.CommentsURL | safeURL }}"
|
||||
title="{{ t "entry.comments.title" }}"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
referrerpolicy="no-referrer"
|
||||
data-comments-link="true">{{ template "icon_comment" }}<span class="icon-label">{{ t "entry.comments.label" }}</span></a>
|
||||
</li>
|
||||
{{ end }}
|
||||
<li>
|
||||
|
|
@ -36,16 +45,16 @@
|
|||
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 }}"
|
||||
>{{ if .entry.Starred }}★ {{ t "entry.bookmark.toggle.off" }}{{ else }}☆ {{ t "entry.bookmark.toggle.on" }}{{ end }}</a>
|
||||
><span class="icon-label">{{ if .entry.Starred }}★ {{ t "entry.bookmark.toggle.off" }}{{ else }}☆ {{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"
|
||||
title="{{ t "entry.status.title" }}"
|
||||
data-toggle-status="true"
|
||||
data-label-read="✔︎ {{ t "entry.status.read" }}"
|
||||
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 }}"
|
||||
>{{ if eq .entry.Status "read" }}✘ {{ t "entry.status.unread" }}{{ else }}✔︎ {{ t "entry.status.read" }}{{ end }}</a>
|
||||
><span class="icon-label">{{ if eq .entry.Status "read" }}✘ {{ t "entry.status.unread" }}{{ else }}✔ {{ t "entry.status.read" }}{{ end }}</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,12 +13,12 @@
|
|||
<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-toast-read="✔︎ {{ t "entry.status.toast.read" }}"
|
||||
data-toast-unread="✘ {{ t "entry.status.toast.unread" }}"
|
||||
data-label-read="✘ {{ t "entry.status.unread" }}"
|
||||
data-label-unread="✔︎ {{ t "entry.status.read" }}"
|
||||
data-toast-read="✘ {{ t "entry.status.toast.unread" }}"
|
||||
data-toast-unread="✔︎ {{ t "entry.status.toast.read" }}"
|
||||
data-value="{{ if eq .entry.Status "read" }}read{{ else }}unread{{ end }}"
|
||||
>{{ if eq .entry.Status "read" }}✘ {{ t "entry.status.unread" }}{{ else }}✔︎ {{ t "entry.status.read" }}{{ end }}</a>
|
||||
><span class="icon-label">{{ if eq .entry.Status "read" }}✔ {{ t "entry.status.read" }}{{ else }}✘ {{ t "entry.status.unread" }}{{ end }}</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
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 }}"
|
||||
>{{ if .entry.Starred }}★ {{ t "entry.bookmark.toggle.off" }}{{ else }}☆ {{ t "entry.bookmark.toggle.on" }}{{ end }}</a>
|
||||
><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>
|
||||
|
|
@ -41,14 +41,14 @@
|
|||
data-label-loading="{{ t "entry.state.saving" }}"
|
||||
data-label-done="{{ t "entry.save.completed" }}"
|
||||
data-toast-done="{{ t "entry.save.toast.completed" }}"
|
||||
>{{ t "entry.save.title" }}</a>
|
||||
>{{ template "icon_save" }}<span class="icon-label">{{ t "entry.save.label" }}</span></a>
|
||||
</li>
|
||||
{{ end }}
|
||||
<li>
|
||||
<a href="{{ route "shareGenerate" "entryID" .entry.ID }}"
|
||||
title="{{ t "entry.share.title" }}"
|
||||
target="_blank"
|
||||
>{{ t "entry.share.label" }}</a>
|
||||
>{{ template "icon_share" }}<span class="icon-label">{{ t "entry.share.label" }}</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"
|
||||
|
|
@ -56,12 +56,17 @@
|
|||
data-fetch-content-entry="true"
|
||||
data-fetch-content-url="{{ route "fetchContent" "entryID" .entry.ID }}"
|
||||
data-label-loading="{{ t "entry.state.loading" }}"
|
||||
data-label-done="{{ t "entry.scraper.completed" }}"
|
||||
>{{ t "entry.scraper.label" }}</a>
|
||||
>{{ template "icon_scraper" }}<span class="icon-label">{{ t "entry.scraper.label" }}</span></a>
|
||||
</li>
|
||||
{{ if .entry.CommentsURL }}
|
||||
<li>
|
||||
<a href="{{ .entry.CommentsURL | safeURL }}" title="{{ t "entry.comments.title" }}" target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer" data-comments-link="true">{{ t "entry.comments.label" }}</a>
|
||||
<a href="{{ .entry.CommentsURL | safeURL }}"
|
||||
title="{{ t "entry.comments.title" }}"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
referrerpolicy="no-referrer"
|
||||
data-comments-link="true"
|
||||
>{{ template "icon_comment" }}<span class="icon-label">{{ t "entry.comments.label" }}</span></a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue