edshot99/eBooru
1
0
Fork 0
forked from e621ng/e621ng
Code Issues 11 Releases 1 Activity

[UI] Switch to Lucide icons for the main menu (#891)

Browse Source
This commit is contained in:
Cinder 2025-02-04 22:31:19 -08:00 committed by GitHub
parent ef3f43cf27
commit 0ee3307743
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 38 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/helpers/application_helper.rb
View File

@ -24,7 +24,7 @@ module ApplicationHelper
tag.li(id: id, class: klass) do tag.li(id: id, class: klass) do
link_to(url, id: "#{id}-link", **options) do link_to(url, id: "#{id}-link", **options) do
concat tag.i(class: icon) concat svg_icon(icon)
concat " " concat " "
concat tag.span(text) concat tag.span(text)
end end

16
app/helpers/icon_helper.rb
View File

@ -1,7 +1,23 @@
# frozen_string_literal: true # frozen_string_literal: true
module IconHelper module IconHelper
# https://lucide.dev/
PATHS = { PATHS = {
# Navigation
hamburger: %(<line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/>),
brush: %(<path d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"/><path d="M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z"/>),
images: %(<path d="M18 22H4a2 2 0 0 1-2-2V6"/><path d="m22 13-1.296-1.296a2.41 2.41 0 0 0-3.408 0L11 18"/><circle cx="12" cy="8" r="2"/><rect width="16" height="16" x="6" y="2" rx="2"/>),
library: %(<path d="m16 6 4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/>),
group: %(<path d="M3 7V5c0-1.1.9-2 2-2h2"/><path d="M17 3h2c1.1 0 2 .9 2 2v2"/><path d="M21 17v2c0 1.1-.9 2-2 2h-2"/><path d="M7 21H5c-1.1 0-2-.9-2-2v-2"/><rect width="7" height="5" x="7" y="7" rx="1"/><rect width="7" height="5" x="10" y="12" rx="1"/>),
tags: %(<path d="m15 5 6.3 6.3a2.4 2.4 0 0 1 0 3.4L17 19"/><path d="M9.586 5.586A2 2 0 0 0 8.172 5H3a1 1 0 0 0-1 1v5.172a2 2 0 0 0 .586 1.414L8.29 18.29a2.426 2.426 0 0 0 3.42 0l3.58-3.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="6.5" cy="9.5" r=".5" fill="currentColor"/>),
megaphone: %(<path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/>),
message_square: %(<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>),
lectern: %(<path d="M16 12h3a2 2 0 0 0 1.902-1.38l1.056-3.333A1 1 0 0 0 21 6H3a1 1 0 0 0-.958 1.287l1.056 3.334A2 2 0 0 0 5 12h3"/><path d="M18 6V3a1 1 0 0 0-1-1h-3"/><rect width="8" height="12" x="8" y="10" rx="1"/>),
swatch: %(<path d="M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z"/><path d="M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7"/><path d="M 7 17h.01"/><path d="m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8"/>),
settings: %(<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>),
log_in: %(<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" x2="3" y1="12" y2="12"/>),
# Pagination # Pagination
chevron_left: %(<path d="m15 18-6-6 6-6"/>), chevron_left: %(<path d="m15 18-6-6 6-6"/>),
chevron_right: %(<path d="m9 18 6-6-6-6"/>), chevron_right: %(<path d="m9 18 6-6-6-6"/>),

17
app/javascript/src/styles/common/navigation.scss
View File

@ -69,8 +69,6 @@ nav.navigation {
color: themed("color-link-active"); color: themed("color-link-active");
border-radius: 0.25rem; border-radius: 0.25rem;
white-space: nowrap; white-space: nowrap;
i { font-size: 1.5rem; }
} }
&:hover > span, &:active > span { background: themed("color-section"); } &:hover > span, &:active > span { background: themed("color-section"); }
@ -150,10 +148,9 @@ nav.navigation {
white-space: nowrap; white-space: nowrap;
i { svg {
width: 1.5rem; margin: -0.25rem 0;
color: themed("color-link-active"); color: themed("color-link-active");
text-align: center;
} }
} }
} }
@ -389,7 +386,7 @@ nav.navigation, html.nav-toggled nav.navigation {
li a { li a {
border-bottom: 0; border-bottom: 0;
i { display: none; } svg { display: none; }
} }
} }
@ -447,8 +444,12 @@ nav.navigation, html.nav-toggled nav.navigation {
a { a {
padding: 0 0.5rem; padding: 0 0.5rem;
i { color: themed("color-link"); } svg {
&:hover i { color: themed("color-link-hover"); } color: themed("color-link");
height: 1.25rem;
width: 1.25rem;
}
&:hover svg { color: themed("color-link-hover"); }
} }
&.nav-tools-themes, &.nav-tools-settings { &.nav-tools-themes, &.nav-tools-settings {

16
app/views/layouts/_main_links.html.erb
View File

@ -1,8 +1,8 @@
<%= decorated_nav_link_to("Artists", "fas fa-brush", artists_path) %> <%= decorated_nav_link_to("Artists", :brush, artists_path) %>
<%= decorated_nav_link_to("Posts", "fas fa-images", posts_path) %> <%= decorated_nav_link_to("Posts", :images, posts_path) %>
<%= decorated_nav_link_to("Pools", "fas fa-book", gallery_pools_path) %> <%= decorated_nav_link_to("Pools", :library, gallery_pools_path) %>
<%= decorated_nav_link_to("Sets", "fas fa-clone", post_sets_path) %> <%= decorated_nav_link_to("Sets", :group, post_sets_path) %>
<%= decorated_nav_link_to("Tags", "fas fa-tags", tags_path) %> <%= decorated_nav_link_to("Tags", :tags, tags_path) %>
<%= decorated_nav_link_to("Blips", "fas fa-bullhorn", blips_path) %> <%= decorated_nav_link_to("Blips", :megaphone, blips_path) %>
<%= decorated_nav_link_to("Comments", "fas fa-comment-alt", comments_path(group_by: "post")) %> <%= decorated_nav_link_to("Comments", :message_square, comments_path(group_by: "post")) %>
<%= decorated_nav_link_to("Forum", "fas fa-chalkboard", forum_topics_path, class: (CurrentUser.has_forum_been_updated? ? "forum-updated" : nil)) %> <%= decorated_nav_link_to("Forum", :lectern, forum_topics_path, class: (CurrentUser.has_forum_been_updated? ? "forum-updated" : nil)) %>

8
app/views/layouts/_nav.html.erb
View File

@ -16,7 +16,7 @@
<menu class="nav-controls desktop"> <menu class="nav-controls desktop">
<a role="button" href="" id="nav-toggle" class="nav-controls-toggle"> <a role="button" href="" id="nav-toggle" class="nav-controls-toggle">
<span><i class="fas fa-bars"></i></span> <span><%= svg_icon(:hamburger) %></span>
</a> </a>
<% if CurrentUser.is_anonymous? %> <% if CurrentUser.is_anonymous? %>
<a href="<%= new_session_path %>" class="simple-avatar nav-controls-profile collapse-2"> <a href="<%= new_session_path %>" class="simple-avatar nav-controls-profile collapse-2">
@ -25,7 +25,7 @@
Sign In Sign In
</span> </span>
<span class="simple-avatar-image"> <span class="simple-avatar-image">
<i class="fas fa-sign-in-alt"></i> <%= svg_icon(:log_in) %>
</span> </span>
</span> </span>
</a> </a>
@ -35,9 +35,9 @@
</menu> </menu>
<menu class="nav-tools desktop <%= CurrentUser.is_anonymous? ? "anonymous" : "" %>"> <menu class="nav-tools desktop <%= CurrentUser.is_anonymous? ? "anonymous" : "" %>">
<%= decorated_nav_link_to("Themes", "fas fa-swatchbook", theme_path, class: "nav-tools-themes") %> <%= decorated_nav_link_to("Themes", :swatch, theme_path, class: "nav-tools-themes") %>
<% unless CurrentUser.is_anonymous? %> <% unless CurrentUser.is_anonymous? %>
<%= decorated_nav_link_to("Settings", "fas fa-cog", edit_user_path(CurrentUser.user), class: "nav-tools-settings") %> <%= decorated_nav_link_to("Settings", :settings, edit_user_path(CurrentUser.user), class: "nav-tools-settings") %>
<% end %> <% end %>
</menu> </menu>