From 71117409bbacad923eba975e32eed775e75c7ebe Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Mon, 16 Jun 2025 16:06:56 -0500 Subject: [PATCH] Rework Fizzy menu design - Adds dialpad actions with shortcuts - Makes everything respond to filtering and navigation w/keyboard --- app/assets/images/clipboard.svg | 1 + app/assets/images/collection-add.svg | 1 + app/assets/images/collection.svg | 1 + app/assets/stylesheets/buttons.css | 38 ++++++++++ app/assets/stylesheets/fizzy-menu.css | 10 +++ app/assets/stylesheets/icons.css | 3 + app/views/cards/index/_header.html.erb | 5 +- app/views/cards/show/_header.html.erb | 75 +++++++++---------- app/views/events/_filter.html.erb | 9 +-- .../filter/_custom_collections.html.erb | 18 +---- app/views/events/filter/_header.html.erb | 42 +++++++++-- .../filter/_new_collection_option.html.erb | 7 -- app/views/events/index.html.erb | 7 -- 13 files changed, 130 insertions(+), 87 deletions(-) create mode 100644 app/assets/images/clipboard.svg create mode 100644 app/assets/images/collection-add.svg create mode 100644 app/assets/images/collection.svg delete mode 100644 app/views/events/filter/_new_collection_option.html.erb diff --git a/app/assets/images/clipboard.svg b/app/assets/images/clipboard.svg new file mode 100644 index 000000000..76025da1d --- /dev/null +++ b/app/assets/images/clipboard.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/collection-add.svg b/app/assets/images/collection-add.svg new file mode 100644 index 000000000..5b3d88aad --- /dev/null +++ b/app/assets/images/collection-add.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/collection.svg b/app/assets/images/collection.svg new file mode 100644 index 000000000..5d6249839 --- /dev/null +++ b/app/assets/images/collection.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index 4c6e84874..791655cb1 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -225,5 +225,43 @@ inline-size: 100%; } } + + .btn__group--chunky { + --gap: 0.2em; + + gap: var(--gap); + margin: var(--block-space-half) auto calc(var(--block-space-half) / 2); + + .btn { + --btn-border-radius: 0.4em; + + align-content: end; + aspect-ratio: 5/3; + flex-basis: calc(33% - var(--gap) / 3); + flex-direction: column; + font-size: var(--text-small); + line-height: 1; + justify-content: center; + position: relative; + row-gap: 0.3lh; + text-align: center; + + kbd { + border: none; + box-shadow: none; + inset: 0.66em 0.33em auto auto; + opacity: 0.5; + position: absolute; + } + + .icon { + --icon-size: 2em !important; + } + + span { + display: flex; + } + } + } } diff --git a/app/assets/stylesheets/fizzy-menu.css b/app/assets/stylesheets/fizzy-menu.css index 77a5d95f3..29e2c5631 100644 --- a/app/assets/stylesheets/fizzy-menu.css +++ b/app/assets/stylesheets/fizzy-menu.css @@ -1,3 +1,13 @@ +.fizzy-dialog { + --panel-border-color: var(--color-selected-dark); + --panel-border-radius: 1.4em; + + box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%), + 0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%), + 0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%), + 0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%); +} + .fizzy-menu { --input-border-color: var(--color-selected-dark); --input-padding: 0.2em 2em 0.2em 0.9em; diff --git a/app/assets/stylesheets/icons.css b/app/assets/stylesheets/icons.css index e1e041b4b..ef10e142f 100644 --- a/app/assets/stylesheets/icons.css +++ b/app/assets/stylesheets/icons.css @@ -30,7 +30,10 @@ .icon--camera { --svg: url("camera.svg "); } .icon--caret-down { --svg: url("caret-down.svg "); } .icon--check { --svg: url("check.svg "); } + .icon--clipboard { --svg: url("clipboard.svg "); } .icon--close { --svg: url("close.svg "); } + .icon--collection { --svg: url("collection.svg "); } + .icon--collection-add { --svg: url("collection-add.svg "); } .icon--comment { --svg: url("comment.svg "); } .icon--copy-paste { --svg: url("copy-paste.svg "); } .icon--crown { --svg: url("crown.svg "); } diff --git a/app/views/cards/index/_header.html.erb b/app/views/cards/index/_header.html.erb index 8b39f39a4..1422c5fb6 100644 --- a/app/views/cards/index/_header.html.erb +++ b/app/views/cards/index/_header.html.erb @@ -18,17 +18,16 @@ Fizzy <% end %> - <%= tag.dialog class:"filter popup popup--animated panel flex-column align-start gap-half fill-white shadow", + <%= tag.dialog class:"fizzy-dialog filter popup popup--animated panel flex-column align-start fill-white", data: { action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset", controller: "filter navigable-list", dialog_target: "dialog", navigable_list_focus_on_selection_value: false, navigable_list_actionable_items_value: true } do %> - <%= render "events/filter/header" %> - <%= render "events/filter/new_collection_option" %> <%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true, type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %> + <%= render "events/filter/header" %> <%= render "cards/index/collections_filter", filter: filter %> diff --git a/app/views/cards/show/_header.html.erb b/app/views/cards/show/_header.html.erb index e0ccbb91b..355b9de7f 100644 --- a/app/views/cards/show/_header.html.erb +++ b/app/views/cards/show/_header.html.erb @@ -1,43 +1,36 @@ \ No newline at end of file + <%= tag.dialog class:"fizzy-dialog filter popup popup--animated panel flex-column align-start fill-white", + data: { + action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset", + controller: "filter navigable-list", + dialog_target: "dialog", + navigable_list_focus_on_selection_value: false, + navigable_list_actionable_items_value: true } do %> + <%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true, + type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %> + <%= render "events/filter/header" %> + + <%= render "cards/show/collections" %> + +

+ Press <%= hotkey_label(["ctrl", "J"]) -%> anytime to open this, esc to close, ↑↓ to move, enter to navigate, SHIFT+ENTER to select. +

+ <% end %> + + + \ No newline at end of file diff --git a/app/views/events/_filter.html.erb b/app/views/events/_filter.html.erb index 4f1a6f06a..7fca3769a 100644 --- a/app/views/events/_filter.html.erb +++ b/app/views/events/_filter.html.erb @@ -13,7 +13,7 @@ Fizzy <% end %> - <%= tag.dialog class: "filter events__popup popup popup--animated panel flex-column align-start gap-half fill-white shadow", + <%= tag.dialog class: "fizzy-dialog filter events__popup popup popup--animated panel flex-column align-start fill-white", style: "z-index: 5;", data: { action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset", @@ -21,19 +21,16 @@ dialog_target: "dialog", navigable_list_focus_on_selection_value: false, navigable_list_actionable_items_value: true } do %> - <%= render "events/filter/header" %> - <%= render "events/filter/new_collection_option" %> - <%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true, type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %> + <%= render "events/filter/header" %> <%= render "events/filter/custom_collections" %> <%= form_with url: events_path, method: :get, class: "flex flex-column max-width popup__list full-width", data: { controller: "form" } do |form| %> - <%= render "events/filter/all_collections_option", form: form, filter: filter %> - <% if Current.user.collections.many? %>
+ <%= render "events/filter/all_collections_option", form: form, filter: filter %> <%= render partial: "events/filter/collection_option", collection: Current.user.collections.alphabetically, as: :collection, locals: { form: form, filter: filter } %>
<% end %> diff --git a/app/views/events/filter/_custom_collections.html.erb b/app/views/events/filter/_custom_collections.html.erb index 033cbbb8e..591d6fdfa 100644 --- a/app/views/events/filter/_custom_collections.html.erb +++ b/app/views/events/filter/_custom_collections.html.erb @@ -1,23 +1,7 @@
-
- <%= link_to cards_path(assignee_ids: [Current.user.id]), class: "btn popup__new popup__item", style: "view-transition-name: new-collection" do %> - <%= icon_tag "filter" %> - Assigned to me - › - <% end %> -
- -
- <%= link_to cards_path(creator_ids: [Current.user.id]), class: "btn popup__new popup__item", style: "view-transition-name: new-collection" do %> - <%= icon_tag "filter" %> - Added by me - › - <% end %> -
- <% @filters.each do |filter| %>
- <%= link_to cards_path(**filter.as_params), class: "btn popup__new popup__item", style: "view-transition-name: new-collection" do %> + <%= link_to cards_path(**filter.as_params), class: "btn popup__new popup__item" do %> <%= icon_tag "filter" %> <%= filter.summary %> › diff --git a/app/views/events/filter/_header.html.erb b/app/views/events/filter/_header.html.erb index a10a4ab23..1d5c58717 100644 --- a/app/views/events/filter/_header.html.erb +++ b/app/views/events/filter/_header.html.erb @@ -1,7 +1,37 @@ -
- Collections - +
+ <%= link_to root_path, class: "btn popup__group borderless", data: { value: "home", filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.1@document->hotkey#click keydown.shift+1@document->hotkey#click" } do %> + <%= icon_tag "home" %> + Home + 1 + <% end %> + + <%= link_to cards_path(assignee_ids: [Current.user.id]), class: "btn popup__group borderless", data: { value: "assigned to me", filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.2@document->hotkey#click keydown.shift+2@document->hotkey#click" } do %> + <%= icon_tag "clipboard" %> + Assigned to me + 2 + <% end %> + + <%= link_to cards_path(creator_ids: [Current.user.id]), class: "btn popup__group borderless", data: { value: "added by me", filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.3@document->hotkey#click keydown.shift+3@document->hotkey#click" } do %> + <%= icon_tag "person-add" %> + Added by me + 3 + <% end %> + + <%= link_to new_collection_path, class: "btn popup__group borderless", data: { value: "new collection", filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.4@document->hotkey#click keydown.shift+4@document->hotkey#click" } do %> + <%= icon_tag "collection-add" %> + New Collection + 4 + <% end %> + + <%= link_to notifications_path, class: "btn popup__group borderless", data: { value: "notifications", filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.5@document->hotkey#click keydown.shift+5@document->hotkey#click" } do %> + <%= icon_tag "bell" %> + Notifications + 5 + <% end %> + + <%= link_to account_settings_path, class: "btn popup__group borderless", data: { value: "account settings", filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.6@document->hotkey#click keydown.shift+6@document->hotkey#click" } do %> + <%= icon_tag "settings" %> + Settings + 6 + <% end %>
diff --git a/app/views/events/filter/_new_collection_option.html.erb b/app/views/events/filter/_new_collection_option.html.erb deleted file mode 100644 index c4eaabec7..000000000 --- a/app/views/events/filter/_new_collection_option.html.erb +++ /dev/null @@ -1,7 +0,0 @@ -
- <%= link_to new_collection_path, class: "btn popup__new popup__item", style: "view-transition-name: new-collection" do %> - <%= icon_tag "add" %> - Add a new collection - <% end %> -
-
diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb index 5515b730d..75f9fdf63 100644 --- a/app/views/events/index.html.erb +++ b/app/views/events/index.html.erb @@ -2,16 +2,9 @@ <% content_for :header do %> <% end %>