oss/miniflux-v2
oss/miniflux-v2
1
0
Fork 0
mirror of https://github.com/miniflux/v2.git synced 2025-08-11 17:51:01 +00:00
Code Wiki Activity

feat(ui): add icons to main menu

Browse source
This commit is contained in:
Frédéric Guillot 2025-07-28 21:52:13 -07:00
parent 9eea9873b5
commit bfd8cb3d22
3 changed files with 32 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

16
internal/template/templates/common/layout.html
View file

@ -85,20 +85,20 @@
aria-label="{{ t "menu.unread" }}, {{ plural "page.unread_entry_count" .countUnread .countUnread }}" aria-label="{{ t "menu.unread" }}, {{ plural "page.unread_entry_count" .countUnread .countUnread }}"
{{ end }} {{ end }}
> >
{{ t "menu.unread" }} {{ icon "entries" }}{{ t "menu.unread" }}
{{ if gt .countUnread 0 }} {{ if gt .countUnread 0 }}
<span class="unread-counter-wrapper" aria-hidden="true">(<span class="unread-counter">{{ .countUnread }}</span>)</span> <span class="unread-counter-wrapper" aria-hidden="true">(<span class="unread-counter">{{ .countUnread }}</span>)</span>
{{ end }} {{ end }}
</a> </a>
</li> </li>
<li {{ if eq .menu "starred" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g b" }}"> <li {{ if eq .menu "starred" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g b" }}">
<a href="{{ route "starred" }}" data-page="starred">{{ t "menu.starred" }}</a> <a href="{{ route "starred" }}" data-page="starred">{{ icon "star" }}{{ t "menu.starred" }}</a>
</li> </li>
<li {{ if eq .menu "history" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g h" }}"> <li {{ if eq .menu "history" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g h" }}">
<a href="{{ route "history" }}" data-page="history">{{ t "menu.history" }}</a> <a href="{{ route "history" }}" data-page="history">{{ icon "history" }}{{ t "menu.history" }}</a>
</li> </li>
<li {{ if eq .menu "feeds" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g f" }}"> <li {{ if eq .menu "feeds" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g f" }}">
<a href="{{ route "feeds" }}" data-page="feeds">{{ t "menu.feeds" }} <a href="{{ route "feeds" }}" data-page="feeds">{{ icon "feeds" }}{{ t "menu.feeds" }}
{{ if gt .countErrorFeeds 0 }} {{ if gt .countErrorFeeds 0 }}
<span class="error-feeds-counter-wrapper">(<span class="error-feeds-counter">{{ .countErrorFeeds }}</span>)</span> <span class="error-feeds-counter-wrapper">(<span class="error-feeds-counter">{{ .countErrorFeeds }}</span>)</span>
{{ end }} {{ end }}
@ -108,17 +108,17 @@
</a> </a>
</li> </li>
<li {{ if eq .menu "categories" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g c" }}"> <li {{ if eq .menu "categories" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g c" }}">
<a href="{{ route "categories" }}" data-page="categories">{{ t "menu.categories" }}</a> <a href="{{ route "categories" }}" data-page="categories">{{ icon "categories" }}{{ t "menu.categories" }}</a>
</li> </li>
<li {{ if eq .menu "search" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "/" }}"> <li {{ if eq .menu "search" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "/" }}">
<a href="{{ route "search" }}" data-page="search">{{ t "menu.search" }}</a> <a href="{{ route "search" }}" data-page="search">{{ icon "search" }}{{ t "menu.search" }}</a>
</li> </li>
<li {{ if eq .menu "settings" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g s" }}"> <li {{ if eq .menu "settings" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g s" }}">
<a href="{{ route "settings" }}" data-page="settings">{{ t "menu.settings" }}</a> <a href="{{ route "settings" }}" data-page="settings">{{ icon "settings" }}{{ t "menu.settings" }}</a>
</li> </li>
{{ if not hasAuthProxy }} {{ if not hasAuthProxy }}
<li> <li>
<a href="{{ route "logout" }}" title="{{ t "tooltip.logged_user" .user.Username }}">{{ t "menu.logout" }}</a> <a href="{{ route "logout" }}" title="{{ t "tooltip.logged_user" .user.Username }}">{{ icon "logout" }}{{ t "menu.logout" }}</a>
</li> </li>
{{ end }} {{ end }}
</ul> </ul>

15
internal/ui/static/bin/sprite.svg
View file

@ -200,4 +200,19 @@ Source: https://github.com/tabler/tabler-icons
<circle cx="18.5" cy="18.5" r="1.5"></circle> <circle cx="18.5" cy="18.5" r="1.5"></circle>
<circle cx="8.5" cy="15.5" r="4.5"></circle> <circle cx="8.5" cy="15.5" r="4.5"></circle>
</symbol> </symbol>
<symbol id="icon-history" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M12 8l0 4l2 2" />
<path d="M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5" />
</symbol>
<symbol id="icon-logout" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" />
<path d="M9 12h12l-3 -3" /><path d="M18 15l3 -3" />
</symbol>
<symbol id="icon-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
<path d="M21 21l-6 -6" />
</symbol>
</svg> </svg>

18
internal/ui/static/css/common.css
View file

@ -175,8 +175,9 @@ a:hover {
white-space: nowrap; white-space: nowrap;
} }
#header-menu .icon,
.page-header ul a .icon { .page-header ul a .icon {
padding-bottom: 2px; margin-bottom: 2px;
} }
.page-header-action-form { .page-header-action-form {
@ -239,7 +240,7 @@ a:hover {
#btn-add-to-home-screen { #btn-add-to-home-screen {
text-decoration: none; text-decoration: none;
line-height: 30px; height: 30px;
color: #fff; color: #fff;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
@ -282,13 +283,13 @@ a:hover {
} }
/* Hide the logo when there is not enough space to display menus when using languages more verbose than English */ /* Hide the logo when there is not enough space to display menus when using languages more verbose than English */
@media (min-width: 620px) and (max-width: 830px) { @media (min-width: 620px) and (max-width: 850px) {
.logo { .logo {
display: none; display: none;
} }
} }
@media (min-width: 830px) { @media (min-width: 850px) {
.logo { .logo {
padding-right: 8px; padding-right: 8px;
} }
@ -297,7 +298,7 @@ a:hover {
@media (min-width: 620px) { @media (min-width: 620px) {
body { body {
margin: auto; margin: auto;
max-width: 820px; max-width: 900px; /* Wide enough to display the logo and the menu one a single row for any languages */
} }
.header { .header {
@ -306,14 +307,13 @@ a:hover {
.header li { .header li {
display: inline-block; display: inline-block;
padding: 0 12px 0 0; padding: 0 5px 0 0;
line-height: normal; line-height: normal;
border: none; border: none;
font-size: 1.0em; font-size: 1.0em;
} }
.header nav { .header nav {
align-items: end;
flex-direction: row; flex-direction: row;
} }
@ -931,9 +931,9 @@ article.category-has-unread {
/* Icons */ /* Icons */
.icon, .icon,
.icon-label { .icon-label {
vertical-align: middle; vertical-align: text-bottom;
display: inline-block; display: inline-block;
padding-right: 2px; margin-right: 2px;
} }
.icon { .icon {