WIP Make dropdowns more configurable, add invitations menu to admin page
This commit is contained in:
parent
67689dcce3
commit
fcda3b9c8c
@ -2,13 +2,21 @@
|
|||||||
<div class="relative inline-block">
|
<div class="relative inline-block">
|
||||||
<div role="button" tabindex="0" data-dropdown-target="button"
|
<div role="button" tabindex="0" data-dropdown-target="button"
|
||||||
class="inline-block select-none">
|
class="inline-block select-none">
|
||||||
|
<% if @size == :large %>
|
||||||
<span class="appearance-none flex items-center inline-block">
|
<span class="appearance-none flex items-center inline-block">
|
||||||
<span class="p-2 bg-gray-50 hover:bg-gray-100 rounded-full">
|
<span class="p-2 bg-gray-50 hover:bg-gray-100 rounded-full">
|
||||||
<%= render partial: "icons/kebab-menu", locals: {
|
<%= render partial: "icons/#{@icon_name}",
|
||||||
custom_class: "inline text-gray-500 h-6 w-6"
|
locals: { custom_class: "inline text-gray-500 h-6 w-6" } %>
|
||||||
} %>
|
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
<% elsif @size == :small %>
|
||||||
|
<span class="appearance-none flex items-center inline-block">
|
||||||
|
<span class="text-gray-500 hover:text-blue-600">
|
||||||
|
<%= render partial: "icons/#{@icon_name}",
|
||||||
|
locals: { custom_class: "inline h-4 w-4" } %>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
<div data-dropdown-target="menu"
|
<div data-dropdown-target="menu"
|
||||||
data-transition-enter="transition ease-out duration-200"
|
data-transition-enter="transition ease-out duration-200"
|
||||||
|
@ -1,5 +1,8 @@
|
|||||||
# frozen_string_literal: true
|
# frozen_string_literal: true
|
||||||
|
|
||||||
class DropdownComponent < ViewComponent::Base
|
class DropdownComponent < ViewComponent::Base
|
||||||
|
def initialize(size: :large, icon_name: "kebap-menu")
|
||||||
|
@size = size.to_sym
|
||||||
|
@icon_name = icon_name
|
||||||
|
end
|
||||||
end
|
end
|
||||||
|
@ -43,7 +43,26 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<th>Invitations available</th>
|
<th>Invitations available</th>
|
||||||
<td>
|
<td>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span>
|
||||||
<%= @user.invitations.count %>
|
<%= @user.invitations.count %>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<%= render DropdownComponent.new(size: :small, icon_name: "edit") do %>
|
||||||
|
<%= render DropdownLinkComponent.new(
|
||||||
|
href: ""
|
||||||
|
) do %>
|
||||||
|
Add more
|
||||||
|
<% end %>
|
||||||
|
<%= render DropdownLinkComponent.new(
|
||||||
|
href: "",
|
||||||
|
separator: true, add_class: "text-red-700"
|
||||||
|
) do %>
|
||||||
|
Remove all
|
||||||
|
<% end %>
|
||||||
|
<% end %>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user