diff --git a/app/components/dropdown_component.html.erb b/app/components/dropdown_component.html.erb new file mode 100644 index 0000000..3ea3bce --- /dev/null +++ b/app/components/dropdown_component.html.erb @@ -0,0 +1,26 @@ +
+
+
+ + + <%= render partial: "icons/kebab-menu", locals: { + custom_class: "inline text-gray-500 h-6 w-6" + } %> + + +
+ +
+
diff --git a/app/components/dropdown_component.rb b/app/components/dropdown_component.rb new file mode 100644 index 0000000..2b76fff --- /dev/null +++ b/app/components/dropdown_component.rb @@ -0,0 +1,5 @@ +# frozen_string_literal: true + +class DropdownComponent < ViewComponent::Base + +end diff --git a/app/components/dropdown_link_component.html.erb b/app/components/dropdown_link_component.html.erb new file mode 100644 index 0000000..eb15ffc --- /dev/null +++ b/app/components/dropdown_link_component.html.erb @@ -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 %> diff --git a/app/components/dropdown_link_component.rb b/app/components/dropdown_link_component.rb new file mode 100644 index 0000000..9f9e618 --- /dev/null +++ b/app/components/dropdown_link_component.rb @@ -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 diff --git a/app/components/rs_auth_component.html.erb b/app/components/rs_auth_component.html.erb index 4295bc1..58ef7cd 100644 --- a/app/components/rs_auth_component.html.erb +++ b/app/components/rs_auth_component.html.erb @@ -1,4 +1,4 @@ -
+
<%= image_tag s3_image_url(@web_app.icon), class: "h-full w-full" %>
@@ -15,11 +15,14 @@ -
-

- <%= link_to "#", class: "btn-md btn-outline text-red-700 relative" do %> - Revoke access - <% end %> -

-
+ <%= 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 %>
diff --git a/app/javascript/controllers/application.js b/app/javascript/controllers/application.js index f93adf1..6958c14 100644 --- a/app/javascript/controllers/application.js +++ b/app/javascript/controllers/application.js @@ -1,8 +1,9 @@ import { Application } from "@hotwired/stimulus" -import { Modal, Tabs } from "tailwindcss-stimulus-components" +import { Dropdown, Modal, Tabs } from "tailwindcss-stimulus-components" const application = Application.start() +application.register('dropdown', Dropdown) application.register('modal', Modal) application.register('tabs', Tabs) diff --git a/app/views/icons/_kebab-menu.html.erb b/app/views/icons/_kebab-menu.html.erb new file mode 100644 index 0000000..ac1ee3a --- /dev/null +++ b/app/views/icons/_kebab-menu.html.erb @@ -0,0 +1,10 @@ + + + Menu + + + + + + + diff --git a/app/views/services/remotestorage/dashboard.html.erb b/app/views/services/remotestorage/dashboard.html.erb index 1a70995..5d90bfe 100644 --- a/app/views/services/remotestorage/dashboard.html.erb +++ b/app/views/services/remotestorage/dashboard.html.erb @@ -2,9 +2,9 @@ <%= render MainSimpleComponent.new do %>
-

Connected Apps

+

Connected Apps

<% if @rs_auths.any? %> -
+
<% @rs_auths.each do |auth| %> <%= render RsAuthComponent.new(auth: auth) %> <% end %>