Skip to content

Commit 162c323

Browse files
adrianthedevadrianthedev
committed
refactor: UI4 tweaks on filters and advanced features
1 parent 8ee9ef8 commit 162c323

File tree

14 files changed

+56
-51
lines changed

14 files changed

+56
-51
lines changed

‎app/assets/stylesheets/application.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,9 @@
6868
@custom-variant floating-controls (&:where(.floating-controls *));
6969
@custom-variant shift-pressed (&:where(.shift-pressed *));
7070

71+
/* Used to determine if the filters buttons is displayed. */
72+
@custom-variant index-missing-resources (&:where(.index-missing-resources *));
73+
7174
/* https://tailwindcss.com/docs/upgrade-guide#hover-styles-on-mobile */
7275
/* needed to fix hover on system tests we need to find a better solution */
7376
/* I discovered that the Tailwind v4 `hover` change is affecting the test browser. As a temporary fix, I forced a custom variant to preserve the Tailwind v3 `hover` behavior, since it resolves the failing tests. However, we’ll need to find a more robust long-term solution. This one was tricky to pinpoint. */

‎app/assets/stylesheets/css/components/field-wrapper.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.field-wrapper {
2-
@apply relative flex flex-col grow leading-tight size-auto w-full md:flex-row md:items-center py-2 min-h-15 w-full grow-0 text-ellipsis overflow-scroll;
2+
@apply relative flex flex-col grow leading-tight size-auto w-full md:flex-row md:items-center py-2 min-h-15 w-full grow-0 text-ellipsis overflow-auto;
33
}
44

55
.field-wrapper__label {

‎app/components/avo/actions_component.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ def render_item(action)
7676
render_action_link(action.action, icon: action.icon)
7777
when defined?(Avo::Advanced::Resources::Controls::LinkTo) && Avo::Advanced::Resources::Controls::LinkTo
7878
link_to action.args[:path],
79-
class: action.args.delete(:class) || "flex items-center px-4 py-3 w-full text-black font-semibold text-sm hover:bg-primary-100",
79+
class: action.args.delete(:class),
8080
**action.args.except(:path, :label, :icon) do
8181
raw("#{icon(action.args[:icon])} #{action.args[:label]}")
8282
end

‎app/components/avo/empty_state_component.html.erb‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
1-
<% if @add_background %>
2-
<div class="bg-white rounded-sm shadow-panel">
3-
<% end %>
4-
<div class="relative flex-1 flex flex-col items-center justify-center space-y-12 py-24">
5-
<%= helpers.svg view_type_svg, class: 'h-[250px]' %>
6-
<div class="text-gray-500 text-center">
1+
<div class="relative flex-1 flex flex-col items-center justify-center space-y-2 py-6 border border-dashed border-content-secondary rounded-lg">
2+
<div class="text-content-secondary text-center">
73
<%= text %>
84
</div>
95
</div>
10-
<% if @add_background %>
11-
</div>
12-
<% end %>

‎app/components/avo/empty_state_component.rb‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ class Avo::EmptyStateComponent < Avo::BaseComponent
55
prop :view_type, default: :table do |value|
66
value&.to_sym
77
end
8-
prop :add_background, default: false
98
prop :by_association, default: false
109

1110
def text

‎app/components/avo/fields/common/heading_component.html.erb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<%= content_tag :div, class: @classes, data: @data do %>
2-
<div class="py-2 px-6 h-full w-full">
2+
<div class="py-2 px-4 h-full w-full">
33
<% if @field.as_html %>
44
<%= sanitize @field.value %>
55
<% else %>
6-
<div class="font-semibold uppercase"><%= @field.value %></div>
6+
<div class="font-medium uppercase"><%= @field.value %></div>
77
<% end %>
88
</div>
99
<% end %>

‎app/components/avo/fields/common/heading_component.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ class Avo::Fields::Common::HeadingComponent < Avo::BaseComponent
77

88
def after_initialize
99
@view = @field.resource.view
10-
@classes = "flex items-start py-1 leading-tight bg-gray-100 text-gray-500 text-xs #{@field.get_html(:classes, view: @view, element: :wrapper)}"
10+
@classes = "flex items-start py-1 leading-tight bg-secondary text-content-secondary text-xs #{@field.get_html(:classes, view: @view, element: :wrapper)}"
1111
@data = {**stimulus_data_attributes, **@field.get_html(:data, view: @view, element: :wrapper)}
1212
add_stimulus_attributes_for(@field.resource, @data)
1313
end

‎app/components/avo/resource_listing_component.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,6 @@
1717
)) %>
1818
</div>
1919
<% else %>
20-
<%= helpers.empty_state by_association: params[:related_name].present?, view_type: @resource.view_type, add_background: true %>
20+
<%= helpers.empty_state by_association: params[:related_name].present?, view_type: @resource.view_type %>
2121
<% end %>
2222
<% end %>

‎app/components/avo/views/resource_index_component.html.erb‎

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -51,48 +51,49 @@
5151
<% end %>
5252

5353
<% panel.with_body do %>
54-
<div class="relative z-20">
55-
<div class="flex flex-col gap-y-4">
56-
<%= render scopes_list if can_render_scopes? %>
54+
<div class="relative flex flex-col gap-y-4">
55+
<div class="relative flex flex-col gap-y-4 z-20">
56+
<div class="flex flex-col gap-y-4">
57+
<%= render scopes_list if can_render_scopes? %>
5758

58-
<div class="flex flex-col">
59-
<div class="flex flex-col space-y-2 py-4 xs:flex-row xs:justify-between xs:space-y-0 <%= "hidden" unless header_visible? %>">
60-
<div class="flex w-64 items-center">
61-
<% if show_search_input %>
62-
<%= text_field_tag "q", params[:q],
63-
id: nil,
64-
placeholder: t('avo.search.placeholder'),
65-
class: "block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm",
66-
data: {
67-
action: "input->resource-search#search",
68-
"resource-search-target": "input"
69-
},
70-
autocomplete: "off" %>
71-
<% else %>
72-
<%# Offset for the space-y-2 property when the search is missing %>
73-
<div class="-mb-2"></div>
74-
<% end %>
75-
</div>
59+
<% if show_search_input || render_dynamic_filters_button %>
60+
<div class="flex flex-col xs:flex-row xs:justify-between <%= "hidden" unless header_visible? %>">
61+
<div class="flex w-64 items-center">
62+
<% if show_search_input %>
63+
<%= text_field_tag "q", params[:q],
64+
id: nil,
65+
placeholder: t('avo.search.placeholder'),
66+
class: "block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm",
67+
data: {
68+
action: "input->resource-search#search",
69+
"resource-search-target": "input"
70+
},
71+
autocomplete: "off" %>
72+
<% end %>
73+
</div>
7674

77-
<div class="flex items-center justify-start space-x-3 rtl:space-x-reverse justify-self-end px-4 xs:justify-end">
78-
<%= render_dynamic_filters_button %>
75+
<div class="flex items-center justify-start space-x-3 rtl:space-x-reverse justify-self-end px-4 xs:justify-end">
76+
<div class="index-missing-resources:hidden">
77+
<%= render_dynamic_filters_button %>
78+
</div>
7979

80-
<% unless field&.hide_filter_button %>
81-
<%= render Avo::FiltersComponent.new filters: @filters, resource: @resource, applied_filters: @applied_filters, parent_record: @parent_record %>
82-
<% end %>
80+
<% unless field&.hide_filter_button %>
81+
<%= render Avo::FiltersComponent.new filters: @filters, resource: @resource, applied_filters: @applied_filters, parent_record: @parent_record %>
82+
<% end %>
8383

84-
<%= render partial: "avo/partials/view_toggle_button", locals: { available_view_types: @resource.available_view_types, view_type: @resource.view_type, turbo_frame: @turbo_frame } %>
84+
<%= render partial: "avo/partials/view_toggle_button", locals: { available_view_types: @resource.available_view_types, view_type: @resource.view_type, turbo_frame: @turbo_frame } %>
85+
</div>
8586
</div>
86-
</div>
87+
<% end %>
8788

8889
<% if has_dynamic_filters? %>
8990
<%= render Avo::DynamicFilters::FiltersComponent.new resource: resource, turbo_frame: @turbo_frame, dynamic_filters_component_id: dynamic_filters_component_id, parent_record: @parent_record, parent_resource: @parent_resource %>
9091
<% end %>
9192
</div>
9293
</div>
93-
</div>
9494

95-
<%= render Avo::ResourceListingComponent.new(**resource_content_components_common_args) %>
95+
<%= render Avo::ResourceListingComponent.new(**resource_content_components_common_args) %>
96+
</div>
9697
<% end %>
9798
<% end %>
9899
<% end %>

‎app/components/avo/views/resource_index_component.rb‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,7 @@ def authorized_to_search?
130130
def render_dynamic_filters_button
131131
return unless Avo.avo_dynamic_filters_installed?
132132
return unless @resource.has_filters?
133+
return unless has_resources?
133134
return if field&.hide_filter_button
134135
return if Avo::DynamicFilters.configuration.always_expanded
135136

@@ -241,4 +242,8 @@ def resource_content_components_common_args
241242
index_params: @index_params
242243
}
243244
end
245+
246+
def has_resources?
247+
@resources.present?
248+
end
244249
end

0 commit comments

Comments
 (0)