oss/miniflux-v2
oss/miniflux-v2
1
0
Fork 0
mirror of https://github.com/miniflux/v2.git synced 2025-08-06 17:41:00 +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 }}"
{{ end }}
>
{{ t "menu.unread" }}
{{ icon "entries" }}{{ t "menu.unread" }}
{{ if gt .countUnread 0 }}
<span class="unread-counter-wrapper" aria-hidden="true">(<span class="unread-counter">{{ .countUnread }}</span>)</span>
{{ end }}
</a>
</li>
<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 {{ 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 {{ 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 }}
<span class="error-feeds-counter-wrapper">(<span class="error-feeds-counter">{{ .countErrorFeeds }}</span>)</span>
{{ end }}
@ -108,17 +108,17 @@
</a>
</li>
<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 {{ 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 {{ 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>
{{ if not hasAuthProxy }}
<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>
{{ end }}
</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="8.5" cy="15.5" r="4.5"></circle>
</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>

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

@ -175,8 +175,9 @@ a:hover {
white-space: nowrap;
}
#header-menu .icon,
.page-header ul a .icon {
padding-bottom: 2px;
margin-bottom: 2px;
}
.page-header-action-form {
@ -239,7 +240,7 @@ a:hover {
#btn-add-to-home-screen {
text-decoration: none;
line-height: 30px;
height: 30px;
color: #fff;
background-color: transparent;
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 */
@media (min-width: 620px) and (max-width: 830px) {
@media (min-width: 620px) and (max-width: 850px) {
.logo {
display: none;
}
}
@media (min-width: 830px) {
@media (min-width: 850px) {
.logo {
padding-right: 8px;
}
@ -297,7 +298,7 @@ a:hover {
@media (min-width: 620px) {
body {
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 {
@ -306,14 +307,13 @@ a:hover {
.header li {
display: inline-block;
padding: 0 12px 0 0;
padding: 0 5px 0 0;
line-height: normal;
border: none;
font-size: 1.0em;
}
.header nav {
align-items: end;
flex-direction: row;
}
@ -931,9 +931,9 @@ article.category-has-unread {
/* Icons */
.icon,
.icon-label {
vertical-align: middle;
vertical-align: text-bottom;
display: inline-block;
padding-right: 2px;
margin-right: 2px;
}
.icon {