Add disabled style to dropdown

plausible · Jan 2, 2025 · c0536f3 · c0536f3
1 parent 03a9572
commit c0536f3
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 6 deletions.
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
@@ -55,5 +55,6 @@ module.exports = {
     plugin(({ addVariant }) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
     plugin(({ addVariant }) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
     plugin(({ addVariant }) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
+    plugin(({ addVariant }) => addVariant("ui-disabled", ["&[data-ui-state~=\"disabled\"]", ":where([data-ui-state~=\"disabled\"]) &"])),
   ]
 }
diff --git a/lib/plausible_web/components/generic.ex b/lib/plausible_web/components/generic.ex
@@ -269,25 +269,40 @@ defmodule PlausibleWeb.Components.Generic do
   attr(:href, :string)
   attr(:class, :string, default: "")
   attr(:new_tab, :boolean, default: false)
+  attr(:disabled, :boolean, default: false)
   attr(:rest, :global, include: ~w(method))
   slot(:inner_block, required: true)
 
-  @base_class "block rounded-lg text-sm/6 text-gray-700 dark:text-gray-300 px-3.5 py-1.5"
-  @clickable_class "hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100"
+  @base_class "block rounded-lg text-sm/6 text-gray-900 ui-disabled:text-gray-500 dark:text-gray-100 px-3.5 py-1.5"
+  @clickable_class "hover:bg-gray-100 dark:hover:bg-gray-700"
   def dropdown_item(assigns) do
-    if assigns[:href] do
+    assigns =
+      if assigns[:disabled] do
+        assign(assigns, :state, "disabled")
+      else
+        assign(assigns, :state, "")
+      end
+
+    if assigns[:href] && !assigns[:disabled] do
       assigns = assign(assigns, :class, [assigns[:class], @base_class, @clickable_class])
 
       ~H"""
-      <.unstyled_link class={@class} new_tab={@new_tab} href={@href} x-on:click="close()" {@rest}>
+      <.unstyled_link
+        class={@class}
+        new_tab={@new_tab}
+        href={@href}
+        x-on:click="close()"
+        data-ui-state={@state}
+        {@rest}
+      >
         <%= render_slot(@inner_block) %>
       </.unstyled_link>
       """
     else
       assigns = assign(assigns, :class, [assigns[:class], @base_class])
 
       ~H"""
-      <div class={@class}>
+      <div data-ui-state={@state} class={@class}>
         <%= render_slot(@inner_block) %>
       </div>
       """

diff --git a/lib/plausible_web/templates/site/settings_people.html.heex b/lib/plausible_web/templates/site/settings_people.html.heex
@@ -49,7 +49,7 @@
                 </:button>
                 <:panel class="max-w-60">
                   <%= if membership.role == :owner do %>
-                    <.dropdown_item>
+                    <.dropdown_item disabled={true}>
                       <div>Owner</div>
                       <div class="text-gray-500 text-xs/5">
                         Site owner cannot be assigned to any other role
@@ -81,6 +81,7 @@
                         )
                       }
                       method="put"
+                      disabled={membership.role == "admin"}
                     >
                       <div>Admin</div>
                       <div class="text-gray-500 text-xs/5">View stats and edit site settings</div>
@@ -96,6 +97,7 @@
                         )
                       }
                       method="put"
+                      disabled={membership.role == "viewer"}
                     >
                       <div>Viewer</div>
                       <div class="text-gray-500 text-xs/5">View stats only</div>