From 0b22305169e6a8b3777226065d65bb98661f4290 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Fri, 15 Nov 2024 17:44:46 -0600 Subject: [PATCH 1/2] Polish filter menu --- app/assets/stylesheets/buttons.css | 2 +- app/assets/stylesheets/dialog.css | 45 +++++ app/assets/stylesheets/filters.css | 89 ++++++--- app/assets/stylesheets/workflows.css | 16 ++ app/helpers/workflows_helper.rb | 2 +- app/views/bubbles/_filters.html.erb | 183 ++++++++++--------- app/views/bubbles/stage_pickers/new.html.erb | 4 +- 7 files changed, 228 insertions(+), 113 deletions(-) create mode 100644 app/assets/stylesheets/dialog.css diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index df48c288b..7e64c1c04 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -14,7 +14,7 @@ cursor: pointer; display: inline-flex; font-size: 1em; - font-weight: 600; + font-weight: var(--btn-font-weight, 600); gap: var(--btn-gap, 0.5em); justify-content: center; padding: var(--btn-padding, 0.5em 1.1em); diff --git a/app/assets/stylesheets/dialog.css b/app/assets/stylesheets/dialog.css new file mode 100644 index 000000000..53026af9b --- /dev/null +++ b/app/assets/stylesheets/dialog.css @@ -0,0 +1,45 @@ +:is(.dialog) { + --backdrop-speed: 150ms; + --panel-size: max-content; + --speed: 150ms; + + border: 0; + opacity: 0; + transform: scale(0.2); + transform-origin: top center; + transition: + display var(--speed) allow-discrete, + opacity var(--speed), + overlay var(--speed) allow-discrete, + transform var(--speed); + + &::backdrop { + background-color: var(--color-always-black); + opacity: 0; + transform: scale(1); + transition: + display var(--backdrop-speed) allow-discrete, + opacity var(--backdrop-speed), + overlay var(--backdrop-speed) allow-discrete; + } + + &[open] { + opacity: 1; + transform: scale(1); + + &::backdrop { + opacity: 0.5; + } + } + + @starting-style { + &[open] { + opacity: 0; + transform: scale(0.2); + } + + &[open]::backdrop { + opacity: 0; + } + } +} diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css index f89c34039..09bbb9a06 100644 --- a/app/assets/stylesheets/filters.css +++ b/app/assets/stylesheets/filters.css @@ -6,42 +6,81 @@ } .filter__button { - border-radius: 0.5em; - color: var(--color-ink); - display: block; - overflow: hidden; - padding: 0.3em 0.7em; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; + --btn-border-size: 0; + --btn-font-weight: 400; + --btn-icon-size: 0.7em; + --btn-padding: 0.3em 0.7em; - input:checked + & { - background-color: var(--color-selected); + inline-size: 100%; + justify-content: space-between; + + span { + overflow: hidden; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; } - @media (hover: hover) { - &:hover { - background-color: var(--color-selected); - } + img { + display: none; } + + &:has(input[type=checkbox]:checked) img { + display: block; + } +} + +.filter__columns { + display: grid; + grid-template-columns: repeat(5, 1fr); } .filter__label { padding: 0.3em 0.7em; + overflow: hidden; + text-align: start; + text-decoration: none; + text-overflow: ellipsis; + text-transform: uppercase; + white-space: nowrap; } -.filter__popup { - --panel-border-radius: 0.5em; - --panel-padding: 0.5em; - --panel-size: 30ch; +.filter__menu { + display: flex; + flex-direction: column; + inline-size: 100%; + list-style: none; + margin: 0; + min-inline-size: 0; + padding: 0 var(--inline-space); + position: relative; + row-gap: 0.2em; + + &::before { + block-size: 100%; + border-block: 0; + border-inline-end: 0; + border-inline-start: 1px solid var(--color-subtle); + content: ""; + display: inline-flex; + inline-size: 0; + position: absolute; + inset: 0 auto 0 0; + } + + &:first-child::before { + display: none; + } + + li { + text-align: start; + } +} + +.panel:is(.filter__popup) { + --panel-size: 100ch; + --panel-padding: var(--block-space); inline-size: auto !important; - inset: 0 auto auto 0; - margin-block-start: 1lh; - margin-inline-start: calc((var(--panel-padding) + 0.7em) * -1); - min-inline-size: 12ch; max-inline-size: var(--panel-size) !important; - position: absolute; - transform-origin: top left; - z-index: 1; } diff --git a/app/assets/stylesheets/workflows.css b/app/assets/stylesheets/workflows.css index 9d1832101..f13e1c460 100644 --- a/app/assets/stylesheets/workflows.css +++ b/app/assets/stylesheets/workflows.css @@ -20,3 +20,19 @@ } } } + +.workflow__popup { + --panel-border-radius: 0.5em; + --panel-padding: 0.5em; + --panel-size: 100%; + + inline-size: auto !important; + inset: 0 auto auto 0; + margin-block-start: 1lh; + margin-inline-start: calc((var(--panel-padding) + 0.7em) * -1); + min-inline-size: 12ch; + max-inline-size: var(--panel-size) !important; + position: absolute; + transform-origin: top left; + z-index: 1; +} diff --git a/app/helpers/workflows_helper.rb b/app/helpers/workflows_helper.rb index c7648f049..ef88e828b 100644 --- a/app/helpers/workflows_helper.rb +++ b/app/helpers/workflows_helper.rb @@ -1,6 +1,6 @@ module WorkflowsHelper def link_to_stage_picker(bubble, workflow) - link_to workflow.name, new_bucket_bubble_stage_picker_path(bubble.bucket, bubble, workflow_id: workflow) + link_to workflow.name, new_bucket_bubble_stage_picker_path(bubble.bucket, bubble, workflow_id: workflow), class: "filter__button" end def button_to_set_stage(bubble, stage) diff --git a/app/views/bubbles/_filters.html.erb b/app/views/bubbles/_filters.html.erb index 285f3a16a..a20059ffd 100644 --- a/app/views/bubbles/_filters.html.erb +++ b/app/views/bubbles/_filters.html.erb @@ -1,4 +1,5 @@ -
+

<%= filter.buckets.first&.name || "All projects" %>

@@ -38,13 +39,14 @@ <% end %>
- +
-

- <%= filter.buckets.first&.name || "All projects" %> +

+ <%= image_tag "filter.svg", aria: { hidden: true }, size: 30 %> + Filter

@@ -55,101 +57,114 @@
- <%= form_with url: bubbles_path, id: :filter_form, method: :get, class: "flex flex-column gap full-width", style: "--border-color: var(--color-subtle)" do %> + <%= form_with url: bubbles_path, id: :filter_form, method: :get, class: "flex flex-column gap full-width margin-block-start", style: "--border-color: var(--color-subtle)" do %> <% Array(params[:terms]).each do |term| %> <%= hidden_field_tag "terms[]", term, id: nil %> <% end %> -
-
- -
  • Sort by
    • - -
  • +
    + +
  • Sort by
    • +
  • + <%= label_tag "indexed_by_#{filter.default_indexed_by}", class: "btn filter__button" do %> <%= radio_button_tag "indexed_by", filter.default_indexed_by, filter.default_indexed_by?, hidden: true %> - <%= label_tag "indexed_by_#{filter.default_indexed_by}", "Default", class: "btn btn--plain filter__button" %> -
    • + Most active + <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> + <% end %> +
    • - <% Filter::INDEXES.each do |index| %> -
  • + <% Filter::INDEXES.each do |index| %> +
  • + <%= label_tag "indexed_by_#{index}", class: "btn filter__button" do %> <%= radio_button_tag "indexed_by", index, filter.indexed_by == index, hidden: true %> - <%= label_tag "indexed_by_#{index}", index.humanize, class: "btn btn--plain filter__button" %> -
    • - <% end %> -     -
    - -
    -
    - -
  • In Project
    • - -
  • - <%= button_tag "All projects", type: :button, class: "btn btn--plain filter__button", data: { action: "filter-form#clearCategory", filter_form_name_param: "bucket_ids[]" } %> + <%= index.humanize %> + <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> + <% end %>
    • + <% end %> +     - <% Current.user.buckets.order(:name).each do |bucket| %> -
  • + +
  • In Project
    • + +
  • + <%= button_tag "All Projects", type: :button, class: "btn filter__button", data: { action: "filter-form#clearCategory", filter_form_name_param: "bucket_ids[]" } %> +
    • + <% Current.user.buckets.order(:name).each do |bucket| %> +
  • + <%= label_tag "bucket_ids_#{bucket.id}", class: "btn filter__button" do %> <%= check_box_tag "bucket_ids[]", bucket.id, filter.buckets.include?(bucket), id: "bucket_ids_#{bucket.id}", hidden: true %> - <%= label_tag "bucket_ids_#{bucket.id}", bucket.name, class: "btn btn--plain filter__button" %> -
    • - <% end %> -     -
    • + <%= bucket.name %> + <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> + <% end %> + + <% end %> + -
    -
    - -
  • Tagged
    • - - <% Current.account.tags.order(:title).each do |tag| %> -
  • + +
  • Tagged
    • + <% Current.account.tags.order(:title).each do |tag| %> +
  • + <%= label_tag "tag_ids_#{tag.id}", class: "btn filter__button" do %> <%= check_box_tag "tag_ids[]", tag.id, filter.tags.include?(tag), id: "tag_ids_#{tag.id}", hidden: true %> - <%= label_tag "tag_ids_#{tag.id}", tag.hashtag, class: "btn btn--plain filter__button" %> -
    • - <% end %> -     -
    • - -
    -
    - -
  • Assigned to…
    • - -
  • - <%= check_box_tag "assignments", "unassigned", filter.assignments.unassigned?, id: "assignments_unassigned", hidden: true, data: { action: "filter-form#clearCategory", filter_form_name_param: "assignee_ids[],assigner_ids[]" } %> - <%= label_tag "assignments_unassigned", "No one", class: "btn btn--plain filter__button" %> + <%= tag.hashtag %> + <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> + <% end %>
    • -
  • - <%= check_box_tag "assignee_ids[]", Current.user.id, filter.assignees.include?(Current.user), id: "assignee_ids_me", hidden: true, data: { action: "filter-form#clearCategory", filter_form_name_param: "assignments" } %> - <%= label_tag "assignee_ids_me", "Me", class: "btn btn--plain filter__button" %> -
    • - <% Current.account.users.active.without(Current.user).order(:name).each do |user| %> -
  • - <%= check_box_tag "assignee_ids[]", user.id, filter.assignees.include?(user), id: "assignee_ids_#{user.id}", hidden: true, data: { action: "filter-form#clearCategory", filter_form_name_param: "assignments" } %> - <%= label_tag "assignee_ids_#{user.id}", user.name, class: "btn btn--plain filter__button" %> -
    • - <% end %> -     -
    + <% end %> + -
    -
    - -
  • Assigned by…
    • - -
  • - <%= check_box_tag "assigner_ids[]", Current.user.id, filter.assigners.include?(Current.user), id: "assigner_ids_me", hidden: true, data: { action: "filter-form#clearCategory", filter_form_name_param: "assignments" } %> - <%= label_tag "assigner_ids_me", "Me", class: "btn btn--plain filter__button" %> -
    • - <% Current.account.users.active.without(Current.user).order(:name).each do |user| %> -
  • - <%= check_box_tag "assigner_ids[]", user.id, filter.assigners.include?(user), id: "assigner_ids_#{user.id}", hidden: true, data: { action: "filter-form#clearCategory", filter_form_name_param: "assignments" } %> - <%= label_tag "assigner_ids_#{user.id}", user.name, class: "btn btn--plain filter__button" %> -
    • + +
  • Assigned to…
    • +
  • + <%= label_tag "assignments_unassigned", class: "btn filter__button" do %> + <%= check_box_tag "assignments", "unassigned", filter.assignments.unassigned?, id: "assignments_unassigned", + hidden: true, data: { action: "filter-form#clearCategory", filter_form_name_param: "assignee_ids[],assigner_ids[]" } %> + No one + <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> <% end %> -
    • -
    + +
  • + <%= label_tag "assignee_ids_me", class: "btn filter__button" do %> + <%= check_box_tag "assignee_ids[]", Current.user.id, filter.assignees.include?(Current.user), id: "assignee_ids_me", + hidden: true, data: { action: "filter-form#clearCategory", filter_form_name_param: "assignments" } %> + Me + <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> + <% end %> +
    • + <% Current.account.users.active.without(Current.user).order(:name).each do |user| %> +
  • + <%= label_tag "assignee_ids_#{user.id}", user.name, class: "btn filter__button" do %> + <%= check_box_tag "assignee_ids[]", user.id, filter.assignees.include?(user), id: "assignee_ids_#{user.id}", + hidden: true, data: { action: "filter-form#clearCategory", filter_form_name_param: "assignments" } %> + <%= user.name %> + <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> + <% end %> +
    • + <% end %> + + + +
  • Assigned by…
    • +
  • + <%= label_tag "assigner_ids_me", class: "btn filter__button" do %> + <%= check_box_tag "assigner_ids[]", Current.user.id, filter.assigners.include?(Current.user), id: "assigner_ids_me", + hidden: true, data: { action: "filter-form#clearCategory", filter_form_name_param: "assignments" } %> + Me + <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> + <% end %> +
    • + <% Current.account.users.active.without(Current.user).order(:name).each do |user| %> +
  • + <%= label_tag "assigner_ids_#{user.id}", class: "btn filter__button" do %> + <%= check_box_tag "assigner_ids[]", user.id, filter.assigners.include?(user), id: "assigner_ids_#{user.id}", + hidden: true, data: { action: "filter-form#clearCategory", filter_form_name_param: "assignments" } %> + <%= user.name %> + <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> + <% end %> +
    • + <% end %> +
    <% end %> diff --git a/app/views/bubbles/stage_pickers/new.html.erb b/app/views/bubbles/stage_pickers/new.html.erb index 6be75fea6..35f89a37d 100644 --- a/app/views/bubbles/stage_pickers/new.html.erb +++ b/app/views/bubbles/stage_pickers/new.html.erb @@ -11,8 +11,8 @@
    - - + + <% @workflows.each do |workflow| %>
  • <%= link_to_stage_picker @bubble, workflow %>
    • <% end %> From 85e008e31d6c7d7b23da436302ed5eb14f7c9763 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Fri, 15 Nov 2024 17:57:19 -0600 Subject: [PATCH 2/2] Truncate headings, too --- app/assets/stylesheets/filters.css | 15 +++++++++------ app/views/bubbles/_filters.html.erb | 10 +++++----- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css index 09bbb9a06..745989b44 100644 --- a/app/assets/stylesheets/filters.css +++ b/app/assets/stylesheets/filters.css @@ -36,13 +36,16 @@ } .filter__label { + display: flex; + inline-size: 100%; padding: 0.3em 0.7em; - overflow: hidden; - text-align: start; - text-decoration: none; - text-overflow: ellipsis; - text-transform: uppercase; - white-space: nowrap; + + strong { + overflow: hidden; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + } } .filter__menu { diff --git a/app/views/bubbles/_filters.html.erb b/app/views/bubbles/_filters.html.erb index a20059ffd..e03c698bf 100644 --- a/app/views/bubbles/_filters.html.erb +++ b/app/views/bubbles/_filters.html.erb @@ -64,7 +64,7 @@
    -
  • Sort by
    • +
  • Sort by
  • <%= label_tag "indexed_by_#{filter.default_indexed_by}", class: "btn filter__button" do %> <%= radio_button_tag "indexed_by", filter.default_indexed_by, filter.default_indexed_by?, hidden: true %> @@ -85,7 +85,7 @@
    • -
  • In Project
    • +
  • In Project
  • <%= button_tag "All Projects", type: :button, class: "btn filter__button", data: { action: "filter-form#clearCategory", filter_form_name_param: "bucket_ids[]" } %> @@ -102,7 +102,7 @@
    • -
  • Tagged
    • +
  • Tagged
    • <% Current.account.tags.order(:title).each do |tag| %>
  • <%= label_tag "tag_ids_#{tag.id}", class: "btn filter__button" do %> @@ -115,7 +115,7 @@
    • -
  • Assigned to…
    • +
  • Assigned to…
  • <%= label_tag "assignments_unassigned", class: "btn filter__button" do %> <%= check_box_tag "assignments", "unassigned", filter.assignments.unassigned?, id: "assignments_unassigned", @@ -145,7 +145,7 @@
    • -
  • Assigned by…
    • +
  • Assigned by…
  • <%= label_tag "assigner_ids_me", class: "btn filter__button" do %> <%= check_box_tag "assigner_ids[]", Current.user.id, filter.assigners.include?(Current.user), id: "assigner_ids_me",