From f54fac74c8c0b1977ca28a3fc3830f74593301c9 Mon Sep 17 00:00:00 2001 From: evazion Date: Thu, 17 Feb 2022 20:27:22 -0600 Subject: [PATCH] Add image icon next to thumbnail size dropdown menu. --- app/components/application_component.rb | 2 +- .../comment_component.html.erb | 2 +- .../comment_component/comment_component.scss | 5 ----- .../forum_post_component.html.erb | 2 +- .../popup_menu_component.html.erb | 4 ++-- .../popup_menu_component.scss | 9 --------- .../preview_size_menu_component.html.erb | 2 +- app/helpers/icon_helper.rb | 4 ++++ .../src/styles/specific/user_tooltips.scss | 2 -- app/views/posts/index.html.erb | 18 ++++++++++-------- 10 files changed, 20 insertions(+), 30 deletions(-) diff --git a/app/components/application_component.rb b/app/components/application_component.rb index ddbb2d3dc..c061993e2 100644 --- a/app/components/application_component.rb +++ b/app/components/application_component.rb @@ -2,7 +2,7 @@ class ApplicationComponent < ViewComponent::Base delegate :link_to_user, :time_ago_in_words_tagged, :format_text, :external_link_to, :tag_class, :current_page_path, to: :helpers - delegate :edit_icon, :delete_icon, :undelete_icon, :flag_icon, :upvote_icon, :downvote_icon, :link_icon, :sticky_icon, :unsticky_icon, :hashtag_icon, :caret_down_icon, to: :helpers + delegate :edit_icon, :delete_icon, :undelete_icon, :flag_icon, :upvote_icon, :downvote_icon, :link_icon, :sticky_icon, :unsticky_icon, :hashtag_icon, :caret_down_icon, :image_icon, to: :helpers def policy(subject) Pundit.policy!(current_user, subject) diff --git a/app/components/comment_component/comment_component.html.erb b/app/components/comment_component/comment_component.html.erb index 50c92bd29..d914422d6 100644 --- a/app/components/comment_component/comment_component.html.erb +++ b/app/components/comment_component/comment_component.html.erb @@ -42,7 +42,7 @@ <%= render "application/update_notice", record: comment %> <% end %> - + <% if votable? %>
  • <% if current_user.is_anonymous? %> diff --git a/app/components/comment_component/comment_component.scss b/app/components/comment_component/comment_component.scss index 5307ce8bb..c4bab3c97 100644 --- a/app/components/comment_component/comment_component.scss +++ b/app/components/comment_component/comment_component.scss @@ -43,9 +43,4 @@ article.comment { width: 1.25em; } } - - .popup-menu { - width: 1.5em; - height: 1.5em; - } } diff --git a/app/components/forum_post_component/forum_post_component.html.erb b/app/components/forum_post_component/forum_post_component.html.erb index 0a8a251a9..4c8af350d 100644 --- a/app/components/forum_post_component/forum_post_component.html.erb +++ b/app/components/forum_post_component/forum_post_component.html.erb @@ -15,7 +15,7 @@ <%= render "application/update_notice", record: forum_post %> - + <% if policy(forum_post).reply? %> <% if current_user.is_anonymous? %>
  • <%= link_to "Reply", login_path(url: request.fullpath) %>
    • diff --git a/app/components/popup_menu_component/popup_menu_component.html.erb b/app/components/popup_menu_component/popup_menu_component.html.erb index c7abca8c3..73519a9df 100644 --- a/app/components/popup_menu_component/popup_menu_component.html.erb +++ b/app/components/popup_menu_component/popup_menu_component.html.erb @@ -1,5 +1,5 @@ -
    - +
    + <% if button.present? %> <%= button %> <% else %> diff --git a/app/components/popup_menu_component/popup_menu_component.scss b/app/components/popup_menu_component/popup_menu_component.scss index 272c85d02..38fc7fcfe 100644 --- a/app/components/popup_menu_component/popup_menu_component.scss +++ b/app/components/popup_menu_component/popup_menu_component.scss @@ -1,16 +1,7 @@ @import "../../javascript/src/styles/base/000_vars"; div.popup-menu { - display: inline-block; - a.popup-menu-button { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - border-radius: 4px; - padding: 4px 8px; color: var(--muted-text-color); // the popup menu is open diff --git a/app/components/preview_size_menu_component/preview_size_menu_component.html.erb b/app/components/preview_size_menu_component/preview_size_menu_component.html.erb index 6dda0e254..95847cfb7 100644 --- a/app/components/preview_size_menu_component/preview_size_menu_component.html.erb +++ b/app/components/preview_size_menu_component/preview_size_menu_component.html.erb @@ -1,6 +1,6 @@ <%= render PopupMenuComponent.new(classes: "preview-size-menu") do |menu| %> <% menu.button do %> - Size <%= caret_down_icon %> + <%= image_icon %> Size <%= caret_down_icon(class: "text-xs") %> <% end %> <% menu.item do %> diff --git a/app/helpers/icon_helper.rb b/app/helpers/icon_helper.rb index babe9e5f0..fe7346986 100644 --- a/app/helpers/icon_helper.rb +++ b/app/helpers/icon_helper.rb @@ -189,6 +189,10 @@ module IconHelper svg_icon_tag("table-icon", "M0 96C0 60.65 28.65 32 64 32H448C483.3 32 512 60.65 512 96V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V96zM64 160H128V96H64V160zM448 96H192V160H448V96zM64 288H128V224H64V288zM448 224H192V288H448V224zM64 416H128V352H64V416zM448 352H192V416H448V352z", viewbox: "0 0 512 512", **options) end + def image_icon(**options) + svg_icon_tag("image-icon", "M447.1 32h-384C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z", viewbox: "0 0 512 512", **options) + end + def globe_icon(**options) icon_tag("fas fa-globe", **options) end diff --git a/app/javascript/src/styles/specific/user_tooltips.scss b/app/javascript/src/styles/specific/user_tooltips.scss index f090d5459..b019494af 100644 --- a/app/javascript/src/styles/specific/user_tooltips.scss +++ b/app/javascript/src/styles/specific/user_tooltips.scss @@ -64,8 +64,6 @@ div.popup-menu { grid-area: menu; align-self: center; - width: 28px; - height: 28px; } } diff --git a/app/views/posts/index.html.erb b/app/views/posts/index.html.erb index 6003a2440..e3224bac0 100644 --- a/app/views/posts/index.html.erb +++ b/app/views/posts/index.html.erb @@ -77,17 +77,19 @@ Search »
    • - <%= render PreviewSizeMenuComponent.new(current_size: @preview_size) %> +
  • + <%= render PreviewSizeMenuComponent.new(current_size: @preview_size) %> - <%= render PopupMenuComponent.new(classes: "post-preview-options-menu") do |menu| %> - <% menu.item do %> - <% if @post_set.show_votes %> - <%= link_to "Hide scores", posts_path(tags: params[:tags], page: params[:page], limit: params[:limit], show_votes: nil, size: params[:size]), class: "post-preview-hide-votes", rel: "nofollow" %> - <% else %> - <%= link_to "Show scores", posts_path(tags: params[:tags], page: params[:page], limit: params[:limit], show_votes: true, size: params[:size]), class: "post-preview-show-votes", rel: "nofollow" %> + <%= render PopupMenuComponent.new(classes: "post-preview-options-menu") do |menu| %> + <% menu.item do %> + <% if @post_set.show_votes %> + <%= link_to "Hide scores", posts_path(tags: params[:tags], page: params[:page], limit: params[:limit], show_votes: nil, size: params[:size]), class: "post-preview-hide-votes", rel: "nofollow" %> + <% else %> + <%= link_to "Show scores", posts_path(tags: params[:tags], page: params[:page], limit: params[:limit], show_votes: true, size: params[:size]), class: "post-preview-show-votes", rel: "nofollow" %> + <% end %> <% end %> <% end %> - <% end %> +