feat(ui/ux): improve the assets library based on a designer's feedbacks

Author: did

app/components/maglev/uikit/image_library/card_component.html.erb

@@ -3,8 +3,8 @@
  <div class="absolute inset-0 h-full w-full rounded">
  <img
  src="<%= image_url %>" 
- class="h-full w-full object-contain <%= 'cursor-pointer' if picker_attributes %>"
- <% if picker_attributes %>
+ class="h-full w-full object-contain <%= 'cursor-pointer' if picker_mode? %>"
+ <% if picker_mode? %>
  data-controller="dispatcher"
  data-action="click->dispatcher#trigger click->uikit-modal#close:self"
  data-dispatcher-event-name-value="<%= picker_event_name %>"
@@ -35,7 +35,7 @@
  </div>
  <div class="mt-1 text-xs font-bold text-gray-900 truncate" title="<%= filename %>"><%= filename %></div>
  <div class="mb-1 flex items-center text-xs justify-between text-gray-700">
- <span><%= width %>x<%= height %></span>
- <span><%= number_to_human_size(byte_size) %></span>
+ <span><% if width_and_height? %><%= width %>x<%= height %><% end %></span>
+ <span><% if byte_size.present? %><%= number_to_human_size(byte_size) %><% end %></span>
  </div>
 </div>

app/components/maglev/uikit/image_library/card_component.rb

@@ -17,6 +17,10 @@ def initialize(image:, delete_path:, picker_attributes: nil)
  @picker_attributes = picker_attributes
  end
 
+ def picker_mode?
+ picker_attributes.present? && picker_attributes[:picker].present?
+ end
+
  def picker_event_payload
  {
  source: picker_attributes[:source],
@@ -38,6 +42,10 @@ def picker_event_image_payload
  def picker_event_name
  "image-selected-#{picker_attributes[:source]}"
  end
+
+ def width_and_height?
+ width.present? && height.present?
+ end
  end
  end
  end

app/views/maglev/editor/assets/index.html.erb

@@ -6,12 +6,6 @@
  <div class="space-y-5">
  <div class="flex items-center">
  <div>
- <%= render Maglev::Uikit::ImageLibrary::UploaderComponent.new(
- create_path: editor_assets_path,
- refresh_path: editor_assets_path(query_params)
- ) %>
- </div>
- <div class="ml-auto">
  <%= render Maglev::Uikit::Form::SearchFormComponent.new(
  name: 'query', 
  value: params[:query], 
@@ -20,6 +14,13 @@
  placeholder: t('maglev.editor.image_library.search_placeholder'),
  data: { turbo_frame: 'asset-search-results' }
  }) %>
+ 
+ </div>
+ <div class="ml-auto">
+ <%= render Maglev::Uikit::ImageLibrary::UploaderComponent.new(
+ create_path: editor_assets_path,
+ refresh_path: editor_assets_path(query_params)
+ ) %>
  </div>
  </div>
 

spec/components/previews/maglev/uikit/image_library/card_component_preview.rb

@@ -33,6 +33,13 @@ def with_very_long_filename
  )
  end
 
+ def with_missing_width_and_height
+ render_with_template(
+ template: 'maglev/uikit/image_library/card_component_preview/default',
+ locals: { image: build_image(1).merge(width: nil, height: nil) }
+ )
+ end
+
  # @!endgroup
 
  private