Adding management of theme (user settings + js)

nanego · Jun 4, 2024 · 8990abd · 8990abd
1 parent 5b43f2e
commit 8990abd
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 26 deletions.
diff --git a/app/javascript/application.js b/app/javascript/application.js
@@ -1,7 +1,5 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 
-document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
-
 // import "@hotwired/turbo-rails"
 import "controllers"
 import "popper"

diff --git a/app/views/layouts/_nav_links_administration.html.erb b/app/views/layouts/_nav_links_administration.html.erb
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,10 +1,26 @@
 <!DOCTYPE html>
-<html>
+<html data-bs-theme="<%= current_user.theme %>">
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title><%= content_for?(:title) ? yield(:title) : "Gestion de salle #{Rails.env.development? ? "(dev)" : "DCIM"}" %></title>
+    <title>
+      <%= content_for?(:title) ? yield(:title) : "Gestion de salle #{Rails.env.development? ? "(dev)" : "DCIM"}" %>
+    </title>
     <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "My DCIM" %>">
 
+    <%- if current_user.theme == "auto" %>
+      <script>
+        function getTheme() {
+          return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+        }
+
+        function setTheme() {
+          document.documentElement.setAttribute("data-bs-theme", getTheme())
+        }
+
+        setTheme()
+        window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", setTheme)
+      </script>
+    <% end %>
     <%= csrf_meta_tags %>
     <%= stylesheet_link_tag "application", media: "all" %>
     <%= javascript_include_tag "vendors" %>

diff --git a/app/views/layouts/navigation/_nav_links_administration.html.erb b/app/views/layouts/navigation/_nav_links_administration.html.erb
@@ -24,6 +24,10 @@
     <li role="menuitem">
       <%= link_to t("users.my_account.edit"), edit_user_registration_path, class: "dropdown-item" %>
     </li>
+    <li role="menuitem">
+      <%= link_to t("users.my_account.settings"), edit_users_settings_path, class: "dropdown-item" %>
+    </li>
+    <li role="menuitem"><hr class="dropdown-divider"></li>
     <li role="menuitem">
       <%= link_to t("users.logout"), destroy_user_session_path, method: :delete, class: "dropdown-item link-danger" %>
     </li>

diff --git a/app/views/users/settings/edit.html.erb b/app/views/users/settings/edit.html.erb
@@ -1,28 +1,38 @@
-<div class="authform">
-  <h3><%= t(".title") %></h3>
+<% provide(:title, t(".title")) %>
+<%= render "layouts/breadcrumb", breadcrumb_variables: {
+  t(".title") => ""
+} %>
 
-  <%= form_with model: @user, url: users_settings_path do |f| %>
-    <div class="form-group">
-      <%= f.label :locale %>
-      <%= f.select :locale, UserDecorator::available_locales_for_options, {}, class: "form-control" %>
-    </div>
+<div class="row my-5">
+  <div class="col-11 col-md-10 col-lg-8 mx-auto">
+    <h1 class="text-center pb-5"><%= t(".title") %></h1>
 
-    <!-- TODO: Remove me when themes will be implemented -->
-    <!-- <div class="form-group">
-      <%= f.label :theme %>
-      <%= f.select :theme, UserDecorator::available_themes_for_options, {}, class: "form-control" %>
-    </div> -->
+    <%= form_with model: @user, url: users_settings_path, class: "bg-body-tertiary p-4 rounded border" do |f| %>
+      <div class="row g-3">
+        <fieldset class="col-12">
+          <%= f.label :locale, class: "form-label" %>
+          <%= f.select :locale, UserDecorator::available_locales_for_options, {}, class: "form-select" %>
+        </fieldset>
 
-    <div class="form-group">
-      <%= f.label :visualization_bay_default_background_color %>
-      <%= f.select :visualization_bay_default_background_color, UserDecorator::available_background_colors_for_options, {}, class: "form-control" %>
-    </div>
+        <fieldset class="col-12 mt-4">
+          <%= f.label :theme, class: "form-label" %>
+          <%= f.select :theme, UserDecorator::available_themes_for_options, {}, class: "form-select" %>
+        </fieldset>
 
-    <div class="form-group">
-      <%= f.label :visualization_bay_default_orientation %>
-      <%= f.select :visualization_bay_default_orientation, UserDecorator::available_bay_orientations_for_options, {}, class: "form-control" %>
-    </div>
+        <fieldset class="col-12 mt-4">
+          <%= f.label :visualization_bay_default_background_color, class: "form-label" %>
+          <%= f.select :visualization_bay_default_background_color, UserDecorator::available_background_colors_for_options, {}, class: "form-select" %>
+        </fieldset>
 
-    <%= f.submit t("action.edit"), class: "button right" %>
-  <% end %>
+        <fieldset class="col-12 mt-4">
+          <%= f.label :visualization_bay_default_orientation, class: "form-label" %>
+          <%= f.select :visualization_bay_default_orientation, UserDecorator::available_bay_orientations_for_options, {}, class: "form-select" %>
+        </fieldset>
+
+        <div class="col-12 mt-4">
+          <%= f.submit t("action.edit"), class: "w-100 btn btn-primary" %>
+        </div>
+      </div>
+    <% end %>
+  </div>
 </div>