From 7d0da4565396b2646a95a7b48cea90d1d435d646 Mon Sep 17 00:00:00 2001 From: cryptogopher Date: Sat, 8 Apr 2023 00:31:59 +0200 Subject: [PATCH] Add linked SVG image to button --- app/assets/images/pictograms/alert-outline.svg | 2 +- app/assets/images/pictograms/check-circle-outline.svg | 2 +- app/assets/images/pictograms/login.svg | 1 + app/assets/stylesheets/application.css | 11 ++++++++++- app/helpers/application_helper.rb | 7 +++++++ app/views/layouts/application.html.erb | 3 ++- config/initializers/assets.rb | 2 +- 7 files changed, 23 insertions(+), 5 deletions(-) create mode 100644 app/assets/images/pictograms/login.svg diff --git a/app/assets/images/pictograms/alert-outline.svg b/app/assets/images/pictograms/alert-outline.svg index de92aed..41041d8 100644 --- a/app/assets/images/pictograms/alert-outline.svg +++ b/app/assets/images/pictograms/alert-outline.svg @@ -1 +1 @@ -alert-outline + diff --git a/app/assets/images/pictograms/check-circle-outline.svg b/app/assets/images/pictograms/check-circle-outline.svg index 52ebeb3..385f9e2 100644 --- a/app/assets/images/pictograms/check-circle-outline.svg +++ b/app/assets/images/pictograms/check-circle-outline.svg @@ -1 +1 @@ -check-circle-outline + diff --git a/app/assets/images/pictograms/login.svg b/app/assets/images/pictograms/login.svg new file mode 100644 index 0000000..d071db0 --- /dev/null +++ b/app/assets/images/pictograms/login.svg @@ -0,0 +1 @@ + diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index eb3ba78..c6e4d7b 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -17,7 +17,7 @@ * { font-family: system-ui; } - +// TODO: convert em to rem body { margin: 0 0.5em; } @@ -48,12 +48,20 @@ input:focus:not([type=checkbox]) { border-color: #a0a0a0; border-radius: 0.2em; color: #a0a0a0; + display: flex; + fill: #a0a0a0; float: right; font-size: 0.8em; font-weight: bold; margin-left: 1em; padding: 0.6em; } +.application-menu a svg { + height: 1rem; + padding-right: 0.4rem; + width: 1rem; +} +.application-menu a.active, .application-menu a:hover, .application-menu a:focus-visible, input[type=submit]:hover, @@ -62,6 +70,7 @@ input[type=submit]:focus-visible { border-color: #009ade; color: white; cursor: pointer; + fill: white; text-decoration: none; } diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 9dacfca..ce69605 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -25,4 +25,11 @@ module ApplicationHelper options.merge! builder: TabularFormBuilder form_for(record, **options, &block) end + + def svg_tag(source, options = {}) + image_name, id = source.split('#') + content_tag :svg, options do + tag.use href: "#{image_path(image_name)}##{id}" + end + end end diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 575074a..6b1ad9f 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -14,7 +14,8 @@
<%= link_to_if user_signed_in?, t(:sign_out), destroy_user_session_path, data: { turbo_method: :delete } do %> - <%= link_to t(:sign_in), new_user_session_path %> + <%= link_to svg_tag('pictograms/login.svg#icon')+t(:sign_in), new_user_session_path, + class: class_names(active: current_page?(new_user_session_path))%> <% end %> <%= link_to_unless(user_signed_in?, t(:register), new_user_registration_path) { } %> diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index 2eeef96..26cf46d 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -9,4 +9,4 @@ Rails.application.config.assets.version = "1.0" # Precompile additional assets. # application.js, application.css, and all non-JS/CSS in the app/assets # folder are already added. -# Rails.application.config.assets.precompile += %w( admin.js admin.css ) +Rails.application.config.assets.precompile += %w( '*.svg' )