feature: theming & dark mode

.github/PULL_REQUEST_TEMPLATE.md

@@ -20,7 +20,7 @@ Fixes # (issue)
 
 ## Screenshots & recording
 <!-- "A picture is worth a thousand words." A video, ten thousand. -->
-<!-- Can the behavior touched in this PR be displayed as a screenshot ro a recording. Please attach it. It makes the review easier to pass. -->
+<!-- Can the behavior touched in this PR be displayed as a screenshot or a recording. Please attach it. It makes the review easier to pass. -->
 
 ## Manual review steps
 <!-- Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration. -->

app/components/avo/field_wrapper_component.html.erb

@@ -2,13 +2,13 @@
   class: classes,
   style: style,
   data: data do %>
-  <%= content_tag :div, class: class_names("pt-4 flex self-start items-center flex-shrink-0 w-48 px-6 uppercase font-semibold text-gray-500 text-sm", @field.get_html(:classes, view: view, element: :label), {
-    "md:pt-4 md:w-full": stacked?,
-    "h-full md:pt-0": !stacked?,
-    "md:h-10 ": !stacked? && short?,
-    "md:h-14 ": !stacked? && !short?,
-    "md:w-48 xl:w-64": compact?,
-    "md:w-64": !compact?,
+  <%= content_tag :div, class: class_names("py-field-wrapper-y flex self-start items-center flex-shrink-0 w-48 px-field-wrapper-x uppercase font-semibold text-gray-500 text-sm", @field.get_html(:classes, view: view, element: :label), {
+    # "md:pt-4 md:w-full": stacked?,
+    # "h-full md:pt-0": !stacked?,
+    # "md:h-10 ": !stacked? && short?,
+    # "md:h-14 ": !stacked? && !short?,
+    # "md:w-48 xl:w-64": compact?,
+    # "md:w-64": !compact?,
   }), data: {slot: "label"} do %>
     <% if form.present? %>
       <%= form.label field.id, label %>
@@ -17,7 +17,7 @@
     <% end %>
     <% if on_edit? && field.is_required? %> <span class="text-red-600 ml-1">*</span> <% end %>
   <% end %>
-  <%= content_tag :div, class: class_names("flex-1 flex flex-row md:min-h-inherit py-2 px-6", @field.get_html(:classes, view: view, element: :content), {
+  <%= content_tag :div, class: class_names("flex-1 flex flex-row md:min-h-inherit py-field-wrapper px-6", @field.get_html(:classes, view: view, element: :content), {
     "pb-4": stacked?,
   }), data: {slot: "value"} do %>
     <div class="self-center w-full <% unless full_width? || compact? || stacked? %> md:w-8/12 <% end %>">

app/components/avo/field_wrapper_component.rb

@@ -44,7 +44,7 @@ def initialize(
   end
 
   def classes(extra_classes = "")
-    "field-wrapper relative flex flex-col grow pb-2 md:pb-0 leading-tight min-h-14 h-full #{stacked? ? "field-wrapper-layout-stacked" : "field-wrapper-layout-inline md:flex-row md:items-center"} #{compact? ? "field-wrapper-size-compact" : "field-wrapper-size-regular"} #{full_width? ? "field-width-full" : "field-width-regular"} #{@classes || ""} #{extra_classes || ""} #{@field.get_html(:classes, view: view, element: :wrapper)}"
+    "field-wrapper relative flex flex-col grow pb-2 md:pb-0 leading-tight h-full #{stacked? ? "field-wrapper-layout-stacked" : "field-wrapper-layout-inline md:flex-row md:items-center"} #{compact? ? "field-wrapper-size-compact" : "field-wrapper-size-regular"} #{full_width? ? "field-width-full" : "field-width-regular"} #{@classes || ""} #{extra_classes || ""} #{@field.get_html(:classes, view: view, element: :wrapper)}"
   end
 
   def style

app/components/avo/index/field_wrapper_component.rb

@@ -18,7 +18,7 @@ def classes
     result = @classes
 
     unless @flush
-      result += " py-3"
+      result += " py-index-field-wrapper"
     end
 
     result += " #{@field.get_html(:classes, view: view, element: :wrapper)}"

app/controllers/avo/application_controller.rb

@@ -25,6 +25,7 @@ class ApplicationController < ::ActionController::Base
     before_action :set_view
     before_action :set_sidebar_open
     before_action :set_stylesheet_assets_path
+    before_action :set_color_scheme
 
     rescue_from Avo::NotAuthorizedError, with: :render_unauthorized
     rescue_from ActiveRecord::RecordInvalid, with: :exception_logger
@@ -312,5 +313,9 @@ def set_stylesheet_assets_path
         "avo.base"
       end
     end
+
+    def set_color_scheme
+      @color_scheme = cookies[:color_scheme] || "light"
+    end
   end
 end

app/controllers/avo/color_schemes_controller.rb

@@ -0,0 +1,17 @@
+require_dependency "avo/application_controller"
+
+module Avo
+  class ColorSchemesController < ApplicationController
+    def create
+      return unless params[:color_scheme].in?(["auto", "light", "dark"])
+
+      cookies[:color_scheme] = if params[:color_scheme] == "auto"
+        nil
+      else
+        params[:color_scheme]
+      end
+
+      render turbo_stream: turbo_stream.reload
+    end
+  end
+end

app/controllers/avo/theme_options_controller.rb

@@ -0,0 +1,7 @@
+module Avo
+  class ThemeOptionsController < ApplicationController
+    def update
+      puts 'updating'.inspect
+    end
+  end
+end

app/helpers/avo/application_helper.rb

@@ -85,7 +85,7 @@ def input_classes(extra_classes = "", has_error: false)
     end
 
     def white_panel_classes
-      "bg-white rounded shadow-md"
+      "bg-white rounded-panel shadow-md"
     end
 
     def get_model_class(model)

app/javascript/avo.base.js

@@ -95,6 +95,13 @@ document.addEventListener('turbo:before-cache', () => {
   document.querySelectorAll('[data-turbo-remove-before-cache]').forEach((element) => element.remove())
 })
 
+// Watch for live changes when the user has "auto" as the default setting.
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
+  const method = event.matches ? 'add' : 'remove'
+
+  document.documentElement.classList[method]('dark')
+})
+
 window.Avo = window.Avo || { configuration: {} }
 
 window.Avo.menus = {

app/javascript/js/controllers.js

@@ -12,7 +12,6 @@ import DashboardCardController from './controllers/dashboard_card_controller'
 import DateFieldController from './controllers/fields/date_field_controller'
 import EasyMdeController from './controllers/fields/easy_mde_controller'
 import FilterController from './controllers/filter_controller'
-import PanelRefreshController from './controllers/fields/panel_refresh_controller'
 import HiddenInputController from './controllers/hidden_input_controller'
 import InputAutofocusController from './controllers/input_autofocus_controller'
 import ItemSelectAllController from './controllers/item_select_all_controller'
@@ -22,6 +21,7 @@ import LoadingButtonController from './controllers/loading_button_controller'
 import MenuController from './controllers/menu_controller'
 import ModalController from './controllers/modal_controller'
 import MultipleSelectFilterController from './controllers/multiple_select_filter_controller'
+import PanelRefreshController from './controllers/fields/panel_refresh_controller'
 import PerPageController from './controllers/per_page_controller'
 import PreviewController from './controllers/preview_controller'
 import ProgressBarFieldController from './controllers/fields/progress_bar_field_controller'
@@ -37,6 +37,7 @@ import SidebarController from './controllers/sidebar_controller'
 import TabsController from './controllers/tabs_controller'
 import TagsFieldController from './controllers/fields/tags_field_controller'
 import TextFilterController from './controllers/text_filter_controller'
+import ThemeOptionsController from './controllers/theme_options_controller'
 import TippyController from './controllers/tippy_controller'
 import ToggleController from './controllers/toggle_controller'
 import TrixFieldController from './controllers/fields/trix_field_controller'
@@ -70,6 +71,7 @@ application.register('self-destroy', SelfDestroyController)
 application.register('sidebar', SidebarController)
 application.register('tabs', TabsController)
 application.register('text-filter', TextFilterController)
+application.register('theme-options', ThemeOptionsController)
 application.register('tippy', TippyController)
 application.register('toggle', ToggleController)
 

app/views/avo/partials/_color_scheme_switcher.html.erb

@@ -0,0 +1,11 @@
+<a href="javascript:void(0);" class="border p-2 block rounded-lg">
+  <%= svg "moon-plus-plus", class: "h-5" %>
+<%#= cookies[:color_scheme] %>
+  <%#= form_with url: color_scheme_path, method: :post do |f| %>
+    <%#= f.hidden_input color_scheme: :light %>
+    <%#= f.button "Light" %>
+  <%# end %>
+  <%= link_to :auto, color_scheme_path(color_scheme: :auto), data: {turbo_method: :post, turbo_frame: :_top} %>
+  <%= link_to :light, color_scheme_path(color_scheme: :light), data: {turbo_method: :post, turbo_frame: :_top} %>
+  <%= link_to :dark, color_scheme_path(color_scheme: :dark), data: {turbo_method: :post, turbo_frame: :_top} %>
+</a>

app/views/avo/partials/_color_theme_override.html.erb

@@ -0,0 +1,8 @@
+<script>
+  // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+  if ('<%= @color_scheme %>' === 'dark' || ('<%= @color_scheme %>' == '' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    document.documentElement.classList.add('dark')
+  } else {
+    document.documentElement.classList.remove('dark')
+  }
+</script>

app/views/avo/partials/_css_variables.html.erb

@@ -0,0 +1,9 @@
+<style data-theme-options-target="cssVariablesRoot">
+  :root {
+    <%# --color-neutral: 39 83 39; %>
+    --stroke-width: 0.1rem};
+    --color-primary: #0586DD;
+    --color-neutral: #333;
+    --border-radius-panel: 1.25rem;
+  }
+</style>

app/views/avo/partials/_navbar.html.erb

@@ -1,4 +1,4 @@
-<%= content_tag :div, class: class_names("fixed bg-white p-2 w-full flex flex-shrink-0 items-center z-[100] px-4 lg:px-4 border-b space-x-4 lg:space-x-0 h-16", {"print:hidden": Avo.configuration.hide_layout_when_printing}) do %>
+<%= content_tag :div, class: class_names("fixed bg-white dark:bg-[#383838] p-2 w-full flex flex-shrink-0 items-center z-[100] px-4 lg:px-4 border-b space-x-4 lg:space-x-0 h-16", {"print:hidden": Avo.configuration.hide_layout_when_printing}) do %>
   <div class="flex items-center space-x-2 w-auto lg:w-64 flex-shrink-0 h-full">
     <div>
       <%= a_button class: 'lg:hidden', icon: 'menu', size: :xs, compact: true, style: :text, data: { action: 'click->sidebar#toggleSidebarOnMobile' } %>
@@ -8,8 +8,13 @@
   </div>
   <div class="flex-1 flex items-center justify-between lg:justify-start space-x-2 sm:space-x-8 lg:px-2">
     <%= render Avo::Pro::GlobalSearchComponent.new rescue nil %>
-    <div class="m-0">
-      <%= render partial: "avo/partials/header" %>
+    <div class="flex-1 flex justify-between w-full m-0">
+      <div class="flex items-center">
+        <%= render partial: "avo/partials/header" %>
+      </div>
+      <div>
+        <%= render partial: "avo/partials/color_scheme_switcher" %>
+      </div>
     </div>
   </div>
 <% end %>

app/views/avo/partials/_theme_options.html.erb

@@ -0,0 +1,77 @@
+<div class="absolute inset-auto right-0 top-0 z-[1000]"
+  data-controller="theme-options"
+  data-theme-options-path-value="<%= avo.theme_option_path %>"
+>
+  <div class="relative flex flex-col border-stroke bg-white rounded shadow w-48 h-60 p-4">
+    <div>
+      <div class="text-center text-sm font-semibold w-full leading-none mb-1">
+        <span data-theme-options-target="label"></span>
+      </div>
+      <label>
+        Border Radius
+        <input
+          type="range"
+          min="0.1"
+          max="2"
+          step="0.1"
+          data-action="theme-options#updateProperty"
+          data-theme-options-property-param="borderRadius"
+        >
+      </label>
+    </div>
+    <div>
+      <div class="text-center text-sm font-semibold w-full leading-none mb-1">
+        <span data-theme-options-target="label"></span>
+      </div>
+      <label>
+        Stroke width
+        <input
+          type="range"
+          min="0.01"
+          max="0.25"
+          step="0.01"
+          data-action="theme-options#updateProperty"
+          data-theme-options-property-param="strokeWidth"
+        >
+      </label>
+    </div>
+    <div>
+      <div class="text-center text-sm font-semibold w-full leading-none mb-1">
+        <span data-theme-options-target="label"></span>
+      </div>
+      <label>
+        Density
+        <input
+          type="range"
+          min="-4"
+          max="2"
+          step="1"
+          value="0"
+          data-action="theme-options#updateProperty"
+          data-theme-options-property-param="density"
+        >
+      </label>
+    </div>
+    <div>
+      <label for="primary-color">Primary Color
+        <input
+          type="color"
+          data-action="theme-options#updateProperty"
+          data-theme-options-property-param="colorPrimary"
+        >
+      </label>
+    </div>
+    <div>
+      <label for="neutral-color">Neutral color
+        <input
+          type="color"
+          data-action="theme-options#updateProperty"
+          data-theme-options-property-param="colorNeutral"
+        >
+      </label>
+    </div>
+    <div>
+      <%= button_tag :save, data: {action: "theme-options#save"} %>
+    </div>
+  </div>
+</div>

app/views/layouts/avo/application.html.erb

@@ -21,9 +21,12 @@
     <% end %>
     <%= render Avo::AssetManager::JavascriptComponent.new asset_manager: Avo.asset_manager %>
     <%= render partial: 'avo/partials/head' %>
+    <%= render partial: 'avo/partials/color_theme_override' %>
+    <%= render partial: 'avo/partials/css_variables' %>
   </head>
-  <body class="bg-application os-mac">
-    <div class="relative flex flex-1 w-full min-h-full" data-controller="sidebar" data-sidebar-open-value="<%= @sidebar_open %>">
+  <body class="bg-application os-mac dark:bg-neutral transition-colors">
+    <%= render partial: 'avo/partials/theme_options' %>
+    <div class="relative flex flex-1 w-full min-h-dvh" data-controller="sidebar" data-sidebar-open-value="<%= @sidebar_open %>">
       <div class="flex-1 flex flex-col max-w-full">
         <%= render partial: "avo/partials/navbar" %>
         <div data-sidebar-target="mainArea" class="content-area flex-1 flex pt-16 relative <%= 'sidebar-open' if @sidebar_open %>">
@@ -33,7 +36,7 @@
           <div class="flex lg:hidden">
             <%= render Avo::SidebarComponent.new sidebar_open: false, for_mobile: true %>
           </div>
-          <div class="main-content-area flex-1 flex flex-col min-h-full max-w-full">
+          <div class="main-content-area flex-1 flex flex-col min-h-dvh max-w-full">
             <div class="content p-4 lg:p-6 flex-1 flex flex-col justify-between items-stretch <%= @container_classes %>">
               <%= render partial: "avo/partials/custom_tools_alert" %>
               <div class="flex flex-1 flex-col justify-between items-stretch space-y-8">

config/routes.rb

@@ -46,6 +46,9 @@
     post "/debug/refresh_license", to: "debug#refresh_license"
   end
 
+  resource :color_scheme
+  resource :theme_option
+
   if Rails.env.development? || Rails.env.staging?
     scope "/avo_private", as: "avo_private" do
       get "/design", to: "private#design"

package.json

@@ -25,6 +25,7 @@
     "@hotwired/stimulus": "^3.2.2",
     "@hotwired/turbo-rails": "^7.3.0",
     "@rails/activestorage": "^6.1.7",
+    "@rails/request.js": "^0.0.9",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "@yaireo/tagify": "^4.18.3",

spec/dummy/app/views/avo/tools/custom_tool.html.erb

@@ -1,6 +1,9 @@
 <div class="flex flex-col">
   <%= render Avo::PanelComponent.new(name: "Custom tool", description: "Custom tool description", display_breadcrumbs: true) do |c| %>
     <% c.with_tools do %>
+      <%= a_link "hey" do %>
+        hey
+      <% end %>
       <div class="text-sm italic">This is the panels tools section.</div>
     <% end %>
 

spec/dummy/config/routes.rb

@@ -6,10 +6,6 @@
   get "hey", to: "home#index"
 
   authenticate :user, ->(user) { user.is_admin? } do
-    scope :admin do
-      get "custom_tool", to: "avo/tools#custom_tool", as: :custom_tool
-    end
-
     mount Avo::Engine, at: Avo.configuration.root_path
     # Uncomment to test constraints /123/en/admin
     # scope ":course", constraints: {course: /\w+(-\w+)*/} do
@@ -27,6 +23,7 @@
 
 if defined? ::Avo
   Avo::Engine.routes.draw do
+    get "custom_tool", to: "tools#custom_tool", as: :custom_tool
     scope :resources do
       get "courses/cities", to: "courses#cities"
       get "users/get_users", to: "users#get_users"