kosmos/akkounts
8
1
Fork 0
Code Issues 22 Pull Requests 1 Actions Packages Releases 12 Activity

Add dropdown components, menus for RS auth items

Browse Source
This commit is contained in:
Râu Cao
2023-11-18 17:13:55 +01:00
parent 27bb7d1bfe
commit 721dccb499
8 changed files with 80 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/components/dropdown_component.html.erb Normal file
View File

@@ -0,0 +1,26 @@
<div data-controller="dropdown" data-action="click->dropdown#toggle click@window->dropdown#hide">
<div class="relative inline-block">
<div role="button" tabindex="0" data-dropdown-target="button"
class="inline-block select-none">
<span class="appearance-none flex items-center inline-block">
<span class="p-2 bg-gray-50 hover:bg-gray-100 rounded-full">
<%= render partial: "icons/kebab-menu", locals: {
custom_class: "inline text-gray-500 h-6 w-6"
} %>
</span>
</span>
</div>
<div data-dropdown-target="menu"
data-transition-enter="transition ease-out duration-200"
data-transition-enter-from="opacity-0 translate-y-1"
data-transition-enter-to="opacity-100 translate-y-0"
data-transition-leave="transition ease-in duration-150"
data-transition-leave-from="opacity-100 translate-y-0"
data-transition-leave-to="opacity-0 translate-y-1"
class="hidden absolute top-4 right-0 z-10 mt-5 flex w-screen max-w-max">
<div class="bg-white shadow-lg rounded border overflow-hidden w-auto">
<%= content %>
</div>
</div>
</div>
</div>

5
app/components/dropdown_component.rb Normal file
View File

@@ -0,0 +1,5 @@
# frozen_string_literal: true
class DropdownComponent < ViewComponent::Base
end

6
app/components/dropdown_link_component.html.erb Normal file
View File

@@ -0,0 +1,6 @@
<%= link_to @href, class: @class, data: {
'dropdown-target': "menuItem",
'action': "keydown.up->dropdown#previousItem:prevent keydown.down->dropdown#nextItem:prevent"
} do %>
<%= content %>
<% end %>

18
app/components/dropdown_link_component.rb Normal file
View File

@@ -0,0 +1,18 @@
# frozen_string_literal: true
class DropdownLinkComponent < ViewComponent::Base
def initialize(href:, separator: false, add_class: nil)
@href = href
@class = class_str(separator, add_class)
end
private
def class_str(separator, add_class)
str = "no-underline block px-4 py-2 text-sm text-gray-900 bg-white
hover:bg-gray-100 focus:bg-gray-100 whitespace-no-wrap"
str = "#{str} border-t" if separator
str = "#{str} #{add_class}" if add_class
str
end
end

19
app/components/rs_auth_component.html.erb
View File

@@ -1,4 +1,4 @@
<div class="py-4 w-1/2 flex items-center gap-6">
<div class="flex items-center gap-4">
<div class="h-16 w-16 flex-none">
<%= image_tag s3_image_url(@web_app.icon), class: "h-full w-full" %>
</div>
@@ -15,11 +15,14 @@
<!-- Approved <%= time_ago_in_words @auth.created_at %> ago -->
<!-- </p> -->
<!-- </div> -->
<div>
<p class="text-sm text-gray-500">
<%= link_to "#", class: "btn-md btn-outline text-red-700 relative" do %>
Revoke access
<% end %>
</p>
</div>
<%= render DropdownComponent.new do %>
<%= render DropdownLinkComponent.new(href: "#") do %>
Launch app
<% end %>
<%= render DropdownLinkComponent.new(
href: "#", separator: true, add_class: "text-red-700"
) do %>
Revoke access
<% end %>
<% end %>
</div>