diff --git a/app/assets/images/logo-color.svg b/app/assets/images/logo-color.svg deleted file mode 100644 index 32d315b5f..000000000 --- a/app/assets/images/logo-color.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/images/logo.png b/app/assets/images/logo.png index 82632a317..92d4a8e74 100644 Binary files a/app/assets/images/logo.png and b/app/assets/images/logo.png differ diff --git a/app/assets/images/logo.webp b/app/assets/images/logo.webp new file mode 100644 index 000000000..20568de8b Binary files /dev/null and b/app/assets/images/logo.webp differ diff --git a/app/assets/stylesheets/nav.css b/app/assets/stylesheets/nav.css index 8d0ecef2d..4fabdfd76 100644 --- a/app/assets/stylesheets/nav.css +++ b/app/assets/stylesheets/nav.css @@ -1,4 +1,7 @@ @layer components { + /* Trigger + /* ------------------------------------------------------------------------ */ + .nav__trigger { --input-background: var(--color-canvas); --input-border-color: transparent; @@ -46,22 +49,39 @@ } } + /* Dialog + /* ------------------------------------------------------------------------ */ + .nav__menu.popup { --panel-border-color: var(--color-selected-dark); --panel-border-radius: 1.4em; --panel-padding: var(--block-space) var(--block-space) 0 var(--block-space); --panel-size: 45ch; + --popup-display: grid; + --nav-section-gap: 2px; - align-items: stretch; + block-size: auto; 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%); - flex-direction: column; - gap: 2px; + display: grid; + grid-template-rows: auto 1fr auto; + gap: var(--nav-section-gap); + overflow: hidden; scrollbar-gutter: stable both-edges; } + .nav__scroll-container { + display: flex; + flex-direction: column; + gap: var(--nav-section-gap); + margin-inline: calc(-1 * var(--block-space)); /* space for scrollbar */ + overflow: auto; + padding-block-end: var(--nav-section-gap); + padding-inline: var(--block-space); + } + .nav__close { @media (any-hover: hover) { display: none; @@ -133,27 +153,14 @@ } } - /* Safari doesn't position the sticky footer properly during the - * transition, so we need to delay the footer entrance. */ .nav__footer { - animation: safari-sticky-footer-hack 0s; - animation-delay: var(--dialog-duration); - animation-fill-mode: both; background-color: var(--color-canvas); border-block-start: 1px solid var(--color-ink-lighter); font-size: var(--text-small); - inset: auto 0 0; - inset-inline: var(--block-space); line-height: 1.6; - margin-block-start: var(--block-space-half); + margin-block-start: calc(-1 * var(--nav-section-gap)); padding: 1.5ch; - position: sticky; text-align: center; z-index: 1; } - - @keyframes safari-sticky-footer-hack { - 0% { position: absolute; } - 100% { position: sticky; } - } } diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css index 84c17c193..c0803326d 100644 --- a/app/assets/stylesheets/popup.css +++ b/app/assets/stylesheets/popup.css @@ -6,6 +6,7 @@ --panel-size: auto; --popup-icon-size: 24px; --popup-item-padding-inline: 0.5rem; + --popup-display: flex; inset: 0 auto auto 50%; min-inline-size: min(25ch, calc(100dvw - var(--block-space-double))); @@ -16,7 +17,7 @@ z-index: var(--z-popup); &[open] { - display: flex; + display: var(--popup-display); } &.orient-left { @@ -52,11 +53,11 @@ background: var(--color-canvas); font-size: var(--text-small); font-weight: bold; + inset-block-start: 0; list-style: none; padding: var(--block-space-half) var(--inline-space-half); position: sticky; text-transform: uppercase; - top: calc(-1 * var(--block-space)); z-index: 1; &:is(summary) { diff --git a/app/javascript/controllers/navigable_list_controller.js b/app/javascript/controllers/navigable_list_controller.js index a5aa1a94f..94acaf28b 100644 --- a/app/javascript/controllers/navigable_list_controller.js +++ b/app/javascript/controllers/navigable_list_controller.js @@ -80,6 +80,10 @@ export default class extends Controller { selectedItem.setAttribute(this.selectionAttributeValue, "true") this.currentItem = selectedItem await nextFrame() + try { + this.currentItem.scrollIntoView({ block: "nearest", inline: "nearest" }) + } catch (e) {} + if (this.focusOnSelectionValue) { this.currentItem.focus() } if (this.hasInputTarget && id) { this.inputTarget.setAttribute("aria-activedescendant", id) diff --git a/app/views/layouts/public.html.erb b/app/views/layouts/public.html.erb index f2843d978..2f1e2be3d 100644 --- a/app/views/layouts/public.html.erb +++ b/app/views/layouts/public.html.erb @@ -7,7 +7,7 @@ Skip to main content diff --git a/app/views/my/_menu.html.erb b/app/views/my/_menu.html.erb index 37d5fff4e..005547db9 100644 --- a/app/views/my/_menu.html.erb +++ b/app/views/my/_menu.html.erb @@ -14,7 +14,7 @@ navigable_list_focus_on_selection_value: false, navigable_list_actionable_items_value: true } do %> <%= turbo_frame_tag "my_menu", src: my_menu_path, loading: :lazy, target: "_top" do %> - <%= render "my/menus/navigation" %> + <%= render "my/menus/jump" %> <% end %> <% end %> diff --git a/app/views/my/menus/_jump.html.erb b/app/views/my/menus/_jump.html.erb new file mode 100644 index 000000000..d3a76e7c4 --- /dev/null +++ b/app/views/my/menus/_jump.html.erb @@ -0,0 +1,8 @@ +
+ <%= jump_field_tag %> + + +
diff --git a/app/views/my/menus/_navigation.html.erb b/app/views/my/menus/_navigation.html.erb deleted file mode 100644 index 2075d03c8..000000000 --- a/app/views/my/menus/_navigation.html.erb +++ /dev/null @@ -1,22 +0,0 @@ -
-
- <% if Current.user.identity.memberships.many? %> - <%= Account.sole.name %> - <% end %> - <%= jump_field_tag %> -
- - -
- -
- <%= filter_hotkey_link "Home", root_path, 1, "home" %> - <%= filter_hotkey_link "Assigned to me", cards_path(assignee_ids: [Current.user.id]), 2, "clipboard" %> - <%= filter_hotkey_link "Added by me", cards_path(creator_ids: [Current.user.id]), 3, "person-add" %> - <%= filter_hotkey_link "Notifications", notifications_path, 4, "bell" %> - <%= filter_hotkey_link "My Profile", user_path(Current.user), 5, "person" %> - <%= filter_hotkey_link "Settings", account_settings_path, 6, "settings" %> -
diff --git a/app/views/my/menus/show.html.erb b/app/views/my/menus/show.html.erb index d49786143..94f1c1f7c 100644 --- a/app/views/my/menus/show.html.erb +++ b/app/views/my/menus/show.html.erb @@ -1,68 +1,79 @@ <%= turbo_frame_tag "my_menu", target: "_top" do %> - <%= render "my/menus/navigation" %> + <%= render "my/menus/jump" %> - <%= collapsible_nav_section "Saved filters", id: "my-filters" do %> - <%= form_with url: cards_path, method: :get, data: { controller: "form" } do |form| %> -
  • - <%= icon_tag "bookmark", class: "popup__icon" %> - <%= link_to cards_path(expand_all: true), class: "popup__btn btn" do %> - Add a filter +
    +
    + <%= filter_hotkey_link "Home", root_path, 1, "home" %> + <%= filter_hotkey_link "Assigned to me", cards_path(assignee_ids: [Current.user.id]), 2, "clipboard" %> + <%= filter_hotkey_link "Added by me", cards_path(creator_ids: [Current.user.id]), 3, "person-add" %> + <%= filter_hotkey_link "Notifications", notifications_path, 4, "bell" %> + <%= filter_hotkey_link "My Profile", user_path(Current.user), 5, "person" %> + <%= filter_hotkey_link "Settings", account_settings_path, 6, "settings" %> +
    + + <%= collapsible_nav_section "Saved filters", id: "my-filters" do %> + <%= form_with url: cards_path, method: :get, data: { controller: "form" } do |form| %> +
  • + <%= icon_tag "bookmark", class: "popup__icon" %> + <%= link_to cards_path(expand_all: true), class: "popup__btn btn" do %> + Add a filter + <% end %> +
    • + + <% @filters.each do |filter| %> + <%= my_menu_filter_item(filter) %> + <% end %> + <% end %> + <% end %> + + <%= collapsible_nav_section "Boards" do %> +
  • + <%= icon_tag "add", class: "popup__icon" %> + <%= link_to new_board_path, class: "popup__btn btn" do %> + Add a board <% end %>
    • - <% @filters.each do |filter| %> - <%= my_menu_filter_item(filter) %> + <% @boards.each do |board| %> + <%= my_menu_board_item(board) %> <% end %> <% end %> - <% end %> - <%= collapsible_nav_section "Boards" do %> -
  • - <%= icon_tag "add", class: "popup__icon" %> - <%= link_to new_board_path, class: "popup__btn btn" do %> - Add a board - <% end %> -
    • - - <% @boards.each do |board| %> - <%= my_menu_board_item(board) %> - <% end %> - <% end %> - - <%= collapsible_nav_section "Tags" do %> - <% @tags.each do |tag| %> - <%= my_menu_tag_item(tag) %> - <% end %> - <% end %> - - <%= collapsible_nav_section "People" do %> -
  • - <%= icon_tag "add", class: "popup__icon" %> - <%= link_to account_join_code_path, class: "popup__btn btn" do %> - Invite people - <% end %> -
    • - - <% @users.each do |user| %> - <%= my_menu_user_item(user) %> - <% end %> - <% end %> - - <%= collapsible_nav_section "Jump to…" do %> - <%= filter_place_menu_item account_settings_path, "Account Settings", "settings" %> - <%= filter_place_menu_item user_path(Current.user), "My Profile", "person" %> - <%= filter_place_menu_item notifications_path, "Notifications", "bell" %> - <%= filter_place_menu_item notifications_settings_path, "Notification Settings", "settings" %> - - <%= tag.li class: "popup__item", data: { filter_target: "item", navigable_list_target: "item" } do %> - <%= icon_tag "logout", class: "popup__icon" %> - <%= button_to session_url(script_name: nil), method: :delete, class: "popup__btn btn", data: { turbo: false } do %> - Sign out + <%= collapsible_nav_section "Tags" do %> + <% @tags.each do |tag| %> + <%= my_menu_tag_item(tag) %> <% end %> <% end %> - <% end %> - <%= turbo_frame_tag Current.identity, :account_menu, src: session_menu_url(script_name: nil, menu_section: true, without: ApplicationRecord.current_tenant) %> + <%= collapsible_nav_section "People" do %> +
  • + <%= icon_tag "add", class: "popup__icon" %> + <%= link_to account_join_code_path, class: "popup__btn btn" do %> + Invite people + <% end %> +
    • + + <% @users.each do |user| %> + <%= my_menu_user_item(user) %> + <% end %> + <% end %> + + <%= collapsible_nav_section "Jump to…" do %> + <%= filter_place_menu_item account_settings_path, "Account Settings", "settings" %> + <%= filter_place_menu_item user_path(Current.user), "My Profile", "person" %> + <%= filter_place_menu_item notifications_path, "Notifications", "bell" %> + <%= filter_place_menu_item notifications_settings_path, "Notification Settings", "settings" %> + + <%= tag.li class: "popup__item", data: { filter_target: "item", navigable_list_target: "item" } do %> + <%= icon_tag "logout", class: "popup__icon" %> + <%= button_to session_url(script_name: nil), method: :delete, class: "popup__btn btn", data: { turbo: false } do %> + Sign out + <% end %> + <% end %> + <% end %> + + <%= turbo_frame_tag Current.identity, :account_menu, src: session_menu_url(script_name: nil, menu_section: true, without: ApplicationRecord.current_tenant) %> +