From 53a3beee356264285854f812256137d6029a34e7 Mon Sep 17 00:00:00 2001 From: evazion Date: Sun, 13 Feb 2022 15:26:10 -0600 Subject: [PATCH] uploads: refactor "My Uploads" page for multi-file uploads. * Make thumbnails on the "My Uploads" page show an icon with an image count when an upload contains multiple files. * Make the "My Uploads" page show each upload, not each individual file. If an upload contains multiple files, they're shown grouped together under a single upload. This does mean that failed or duplicate uploads will show up on this page now. This is because this page shows each upload attempt, not each uniquely uploaded file. --- .../media_asset_gallery_component.rb | 5 ++-- .../media_asset_preview_component.scss | 2 +- app/controllers/media_assets_controller.rb | 2 +- app/controllers/uploads_controller.rb | 15 +++------- app/helpers/icon_helper.rb | 4 +++ app/views/media_assets/_gallery.html.erb | 10 ++----- app/views/media_assets/_preview.html.erb | 9 ++++++ app/views/uploads/_gallery.html.erb | 24 +++------------ app/views/uploads/_preview.html.erb | 30 +++++++++++++++++++ app/views/uploads/_table.html.erb | 21 ++----------- 10 files changed, 60 insertions(+), 62 deletions(-) create mode 100644 app/views/media_assets/_preview.html.erb create mode 100644 app/views/uploads/_preview.html.erb diff --git a/app/components/media_asset_gallery_component.rb b/app/components/media_asset_gallery_component.rb index b3d7c27ec..b33725c86 100644 --- a/app/components/media_asset_gallery_component.rb +++ b/app/components/media_asset_gallery_component.rb @@ -5,13 +5,12 @@ class MediaAssetGalleryComponent < ApplicationComponent attr_reader :inline, :size, :options - renders_many :media_assets, MediaAssetPreviewComponent + renders_many :media_assets renders_one :footer - def initialize(inline: false, size: DEFAULT_SIZE, **options) + def initialize(inline: false, size: DEFAULT_SIZE) super @inline = inline @size = size - @option = options end end diff --git a/app/components/media_asset_preview_component/media_asset_preview_component.scss b/app/components/media_asset_preview_component/media_asset_preview_component.scss index 0e57de337..83ba53a56 100644 --- a/app/components/media_asset_preview_component/media_asset_preview_component.scss +++ b/app/components/media_asset_preview_component/media_asset_preview_component.scss @@ -1,4 +1,4 @@ -.media-asset-animation-icon { +.media-asset-animation-icon, .media-asset-image-count-icon { color: var(--preview-icon-color); background: var(--preview-icon-background); } diff --git a/app/controllers/media_assets_controller.rb b/app/controllers/media_assets_controller.rb index 4b93e26c8..f12d29830 100644 --- a/app/controllers/media_assets_controller.rb +++ b/app/controllers/media_assets_controller.rb @@ -5,7 +5,7 @@ class MediaAssetsController < ApplicationController def index @media_assets = authorize MediaAsset.visible(CurrentUser.user).paginated_search(params, count_pages: false) - @media_assets = @media_assets.joins(:media_metadata).includes(:post) + @media_assets = @media_assets.includes(:media_metadata, :post) respond_with(@media_assets) end diff --git a/app/controllers/uploads_controller.rb b/app/controllers/uploads_controller.rb index 3f6fa7507..e4383b9bb 100644 --- a/app/controllers/uploads_controller.rb +++ b/app/controllers/uploads_controller.rb @@ -30,18 +30,11 @@ class UploadsController < ApplicationController def index @mode = params.fetch(:mode, "table") + @uploads = authorize Upload.visible(CurrentUser.user).paginated_search(params, count_pages: true) + @uploads = @uploads.includes(:uploader, upload_media_assets: { media_asset: :post }) if request.format.html? - case @mode - when "table" - @uploads = authorize Upload.visible(CurrentUser.user).paginated_search(params, count_pages: true) - @uploads = @uploads.includes(:uploader, media_assets: :post, upload_media_assets: { media_asset: :post }) if request.format.html? - respond_with(@uploads, include: { upload_media_assets: { include: :media_asset }}) - when "gallery" - @media_assets = authorize MediaAsset.active.visible(CurrentUser.user).includes(:post, uploads: [:uploader]).where(uploads: { uploader: CurrentUser.user }).paginated_search(params, count_pages: true).reorder("uploads.id DESC") - respond_with(@media_assets) - else - raise "Invalid mode '#{@mode}'" - end + @uploads = @uploads.includes(:uploader, media_assets: :post, upload_media_assets: { media_asset: :post }) if request.format.html? + respond_with(@uploads, include: { upload_media_assets: { include: :media_asset }}) end def show diff --git a/app/helpers/icon_helper.rb b/app/helpers/icon_helper.rb index 1e52c0fda..0af00abd8 100644 --- a/app/helpers/icon_helper.rb +++ b/app/helpers/icon_helper.rb @@ -173,6 +173,10 @@ module IconHelper svg_icon_tag("hashtag-icon", "M416 127.1h-58.23l9.789-58.74c2.906-17.44-8.875-33.92-26.3-36.83c-17.53-2.875-33.92 8.891-36.83 26.3L292.9 127.1H197.8l9.789-58.74c2.906-17.44-8.875-33.92-26.3-36.83c-17.53-2.875-33.92 8.891-36.83 26.3L132.9 127.1H64c-17.67 0-32 14.33-32 32C32 177.7 46.33 191.1 64 191.1h58.23l-21.33 128H32c-17.67 0-32 14.33-32 32c0 17.67 14.33 31.1 32 31.1h58.23l-9.789 58.74c-2.906 17.44 8.875 33.92 26.3 36.83C108.5 479.9 110.3 480 112 480c15.36 0 28.92-11.09 31.53-26.73l11.54-69.27h95.12l-9.789 58.74c-2.906 17.44 8.875 33.92 26.3 36.83C268.5 479.9 270.3 480 272 480c15.36 0 28.92-11.09 31.53-26.73l11.54-69.27H384c17.67 0 32-14.33 32-31.1c0-17.67-14.33-32-32-32h-58.23l21.33-128H416c17.67 0 32-14.32 32-31.1C448 142.3 433.7 127.1 416 127.1zM260.9 319.1H165.8L187.1 191.1h95.12L260.9 319.1z", viewbox: "0 0 448 512", **options) end + def multiple_images_icon(**options) + svg_icon_tag("multiple-images-icon", "M8,3 C8.55228475,3 9,3.44771525 9,4 L9,9 C9,9.55228475 8.55228475,10 8,10 L3,10 C2.44771525,10 2,9.55228475 2,9 L6,9 C7.1045695,9 8,8.1045695 8,7 L8,3 Z M1,1 L6,1 C6.55228475,1 7,1.44771525 7,2 L7,7 C7,7.55228475 6.55228475,8 6,8 L1,8 C0.44771525,8 0,7.55228475 0,7 L0,2 C0,1.44771525 0.44771525,1 1,1 Z", viewbox: "0 0 9 10", **options) + end + def globe_icon(**options) icon_tag("fas fa-globe", **options) end diff --git a/app/views/media_assets/_gallery.html.erb b/app/views/media_assets/_gallery.html.erb index 422338953..cbe436aee 100644 --- a/app/views/media_assets/_gallery.html.erb +++ b/app/views/media_assets/_gallery.html.erb @@ -1,14 +1,8 @@ <%= render(MediaAssetGalleryComponent.new) do |gallery| %> <% @media_assets.each do |media_asset| %> <% if policy(media_asset).can_see_image? %> - <% gallery.media_asset(media_asset: media_asset, size: gallery.size, link_target: media_asset) do |preview| %> - <% preview.footer do %> -
- <% if media_asset.post.present? %> - <%= link_to "post ##{media_asset.post.id}", media_asset.post %> - <% end %> -
- <% end %> + <% gallery.media_asset do %> + <%= render "media_assets/preview", media_asset: media_asset, size: gallery.size %> <% end %> <% end %> <% end %> diff --git a/app/views/media_assets/_preview.html.erb b/app/views/media_assets/_preview.html.erb new file mode 100644 index 000000000..eed999217 --- /dev/null +++ b/app/views/media_assets/_preview.html.erb @@ -0,0 +1,9 @@ +<%= render(MediaAssetPreviewComponent.new(media_asset: media_asset, size: size, link_target: media_asset)) do |preview| %> + <% preview.footer do %> +
+ <% if media_asset.post.present? %> + <%= link_to "post ##{media_asset.post.id}", media_asset.post %> + <% end %> +
+ <% end %> +<% end %> diff --git a/app/views/uploads/_gallery.html.erb b/app/views/uploads/_gallery.html.erb index a0c894fe1..30a4c391d 100644 --- a/app/views/uploads/_gallery.html.erb +++ b/app/views/uploads/_gallery.html.erb @@ -8,27 +8,11 @@ <%= render(MediaAssetGalleryComponent.new) do |gallery| %> - <% @media_assets.each do |media_asset| %> - <% upload = media_asset.uploads.order(id: :desc).select { |upload| upload.uploader == CurrentUser.user }.first %> - - <% gallery.media_asset(media_asset: media_asset, size: gallery.size, link_target: media_asset.post || upload) do |preview| %> - <% preview.footer do %> -
- <% if media_asset.post.present? %> -
- <%= link_to "post ##{media_asset.post.id}", media_asset.post, class: "leading-none" %> -
- <% end %> - - <% if upload.source.present? %> - <%= external_link_to upload.source, Addressable::URI.parse(upload.source).domain %> - <% else %> - No source - <% end %> -
- <% end %> + <% @uploads.each do |upload| %> + <% gallery.media_asset do %> + <%= render "uploads/preview", upload: upload, size: gallery.size %> <% end %> <% end %> <% end %> -<%= numbered_paginator(@media_assets) %> +<%= numbered_paginator(@uploads) %> diff --git a/app/views/uploads/_preview.html.erb b/app/views/uploads/_preview.html.erb new file mode 100644 index 000000000..203c83697 --- /dev/null +++ b/app/views/uploads/_preview.html.erb @@ -0,0 +1,30 @@ +<% media_asset = upload.upload_media_assets.sort_by(&:id).first&.media_asset %> + +<%= render(MediaAssetPreviewComponent.new(media_asset: media_asset, size: size, link_target: upload, save_data: CurrentUser.save_data)) do |preview| %> + <% if upload.media_asset_count > 1 %> + <% preview.header do %> +
+ <%= multiple_images_icon %> + <%= upload.media_asset_count %> +
+ <% end %> + <% end %> + + <% preview.footer do %> +
+
+ <% if upload.media_asset_count == 1 && media_asset&.post.present? %> + <%= link_to "post ##{media_asset.post.id}", media_asset.post, class: "leading-none" %> + <% else %> + <%= link_to "upload ##{upload.id}", upload, class: "leading-none" %> + <% end %> +
+ + <% if upload.source.present? %> + <%= external_link_to upload.source, Addressable::URI.parse(upload.source).domain %> + <% else %> + No source + <% end %> +
+ <% end %> +<% end %> diff --git a/app/views/uploads/_table.html.erb b/app/views/uploads/_table.html.erb index 186e6a85d..8fb9e2d4e 100644 --- a/app/views/uploads/_table.html.erb +++ b/app/views/uploads/_table.html.erb @@ -9,28 +9,13 @@ <%= table_for @uploads, class: "striped", width: "100%" do |t| %> <% t.column "Upload", td: { class: "text-center" } do |upload| %> - <% upload.media_assets.first.tap do |media_asset| %> - <% if media_asset.present? %> - <% if media_asset.post.present? %> - <%= render MediaAssetPreviewComponent.new(media_asset: media_asset, link_target: media_asset.post, save_data: CurrentUser.save_data) %> - <% else %> - <%= render MediaAssetPreviewComponent.new(media_asset: media_asset, link_target: upload, save_data: CurrentUser.save_data) %> - <% end %> - <% end %> - <% end %> + <%= render "uploads/preview", upload: upload, size: "180" %> <% end %> <% t.column "Info", td: { class: "col-expand" } do |upload| %>
- <% upload.media_assets.first.tap do |media_asset| %> - <% if media_asset&.post.present? %> - Post - <%= link_to "##{media_asset.post.id}", media_asset.post %> - <% else %> - Upload - <%= link_to "##{upload.id}", upload %> - <% end %> - <% end %> + Upload + <%= link_to "##{upload.id}", upload %>