Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: floating resource controls in table rows #3280

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

refactor: floating resource controls in table rows #3280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a8c33f2
refactor: floating resource controls in row
adrianthedev Sep 29, 2024
19ddf6d
wip
adrianthedev Sep 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions app/assets/stylesheets/avo.base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,3 +92,11 @@ trix-editor {
dialog#turbo-confirm {
@apply bg-transparent;
}

/* TODO: make content like tailwindcss */
.floating-row-controls {
&:before {
content: "";
@apply absolute z-10 inset-auto left-0 top-0 mt-0 -translate-x-full w-3 h-full bg-gradient-to-l from-white to-transparent group-hover:from-gray-50;
}
}
6 changes: 3 additions & 3 deletions app/components/avo/index/table_row_component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<%# hover:z-[21] removed from tr class to solve flickering actions component on row controls and z-20 changed to z-21%>
<%= content_tag :tr,
class: class_names("bg-white hover:bg-gray-50 hover:shadow-row z-21 border-b", {"cursor-pointer": click_row_to_view_record}),
class: class_names("group bg-white hover:bg-gray-50 z-21 border-b", {"cursor-pointer": click_row_to_view_record}),
data: {
component_name: self.class.to_s.underscore,
resource_name: @resource.class.to_s,
Expand Down Expand Up @@ -42,8 +42,8 @@
<% end %>
<% end %>
<% if Avo.configuration.resource_controls_on_the_right? %>
<td class="text-right whitespace-nowrap px-3" data-control="resource-controls">
<div class="flex items-center justify-end flex-grow-0 h-full">
<td class="sticky group-hover:bg-gray-50 bg-white inset-auto right-0 text-right whitespace-nowrap px-3 floating-row-controls floating-controls:pl-1" data-control="resource-controls">
<div class=" flex items-center justify-end flex-grow-0 h-full">
<%= render resource_controls_component %>
</div>
</td>
Expand Down
2 changes: 1 addition & 1 deletion app/views/layouts/avo/application.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<%= render partial: "avo/partials/head" %>
<%= content_for :head %>
</head>
<body class="bg-application os-mac">
<body class="bg-application os-mac floating-controls">
<div class="relative flex flex-1 w-full min-h-full" data-controller="sidebar" data-sidebar-open-value="<%= @sidebar_open %>">
<div class="flex-1 flex flex-col max-w-full">
<%= render partial: "avo/partials/navbar" %>
Expand Down
2 changes: 2 additions & 0 deletions lib/avo/configuration.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ module Avo
class Configuration
include ResourceConfiguration

#TODO: add a configuration switch that adds the necesarry classes
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[rubocop] reported by reviewdog 🐶
[Corrected] Layout/LeadingCommentSpace: Missing space after #.


attr_writer :app_name
attr_writer :branding
attr_writer :root_path
Expand Down
1 change: 1 addition & 0 deletions tailwind.preset.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,7 @@ module.exports = {
addVariant('index-grid-view', '.index-grid-view & ')
addVariant('index-table-view', '.index-table-view & ')
addVariant('kanban-dragging', '.kanban-dragging & ')
addVariant('floating-controls', '.floating-controls & ')
}),
],
}
Loading