Rework Fizzy menu design
- Adds dialpad actions with shortcuts - Makes everything respond to filtering and navigation w/keyboard
This commit is contained in:
Jason Zimdars
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m19 3h-4.18c-.42-1.16-1.52-2-2.82-2s-2.4.84-2.82 2h-4.18a2 2 0 0 0 -2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-14a2 2 0 0 0 -2-2m-7 0a1 1 0 0 1 1 1 1 1 0 0 1 -1 1 1 1 0 0 1 -1-1 1 1 0 0 1 1-1m-5 4h10v-2h2v14h-14v-14h2z"/></svg>
|
||||
|
After Width: | Height: | Size: 292 B |
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3 5h8v2h-8zm10 0h8v2h-8zm-10 4h8v2h-8zm10 0h8v2h-8zm-10 4h8v2h-8zm0 4h8v2h-8zm17.9.9h-3v3c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-3h-3c-.5 0-.9-.4-.9-.9s.4-.9.9-.9h3v-3c0-.5.4-.9.9-.9s.9.4.9.9v3h3c.5 0 .9.4.9.9s-.4.9-.9.9z"/></svg>
|
||||
|
After Width: | Height: | Size: 290 B |
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3 5h8v2h-8zm10 0h8v2h-8zm-10 4h8v2h-8zm10 0h8v2h-8zm-10 4h8v2h-8zm10 0h8v2h-8zm-10 4h8v2h-8z"/></svg>
|
||||
|
After Width: | Height: | Size: 171 B |
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 "); }
|
||||
|
||||
@@ -18,17 +18,16 @@
|
||||
<strong class="txt-medium overflow-ellipsis margin-none">Fizzy</strong>
|
||||
<% 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" %>
|
||||
<menu contents>
|
||||
<%= render "cards/index/collections_filter", filter: filter %>
|
||||
</menu>
|
||||
|
||||
@@ -1,43 +1,36 @@
|
||||
<nav class="align-start">
|
||||
<%= link_to_home %>
|
||||
<div class="btn btn--placeholder flex-item-justify-start"></div>
|
||||
<header class="flex flex-inline flex-column center flex-shrink">
|
||||
<div class="card-filter--collection flex-inline flex-column align-center center position-relative" data-controller="dialog" data-action="click@document->dialog#closeOnClickOutside keydown.esc->dialog#close">
|
||||
<%= tag.button class: "fizzy-menu input input--select flex align-center txt-normal shadow",
|
||||
data: {
|
||||
action: "click->dialog#open:stop keydown.meta+j@document->hotkey#click keydown.ctrl+j@document->hotkey#click",
|
||||
controller: "hotkey" } do %>
|
||||
<svg fill="none" height="275" viewBox="0 0 202 275" width="202" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m201 258c0 11.159-44.772 16-100 16-55.2285 0-100-4.841-100-16s44.7715-16 100-16c55.228 0 100 4.841 100 16z" fill="var(--color-ink)" opacity=".08"/>
|
||||
<path clip-rule="evenodd" d="m144.805 2.24222c2.294-1.843841 5.681-1.617368 7.696.56152 2.014 2.17904 1.917 5.51121-.174 7.57326l-.209.1953-.012.0117c-.009.0075-.022.0181-.039.0332-.035.0309-.087.078-.156.1397-.138.1235-.344.309-.614.5508-.54.484-1.336 1.1979-2.353 2.1152-2.033 1.835-4.952 4.4821-8.487 7.7256-7.073 6.4897-16.602 15.357-26.441 24.8759-2.543 2.4612-4.066 5.7749-4.269 9.2891-.383 6.654-.719 11.235-1.012 17.6885 27.89.2759 50.213 1.9831 62.831 3.1963l2.598.2558.018.002c7.816.8155 13.555 7.8838 12.741 15.4687l.001.001c-3.418 33.6092-7.351 63.0722-10.988 87.6142.005.178.001.359-.012.54-.03.417-.11.819-.228 1.203-3.37 24.477-6.469 42.647-8.652 56.28-2.231 13.914-13.656 24.673-28.256 25.45h-.011c-24.343 1.247-48.8273 1.346-73.2036.126l-2.3589-.122c-14.5946-.782-26.0187-11.539-28.2492-25.453-2.1836-13.632-5.2839-31.801-8.6543-56.276-.1189-.385-.1974-.789-.2278-1.208-.0133-.182-.0178-.363-.013-.542-3.6384-24.542-7.5712-54.004-10.9942-87.6112l.0009-.001c-.814-7.5854 4.9246-14.6542 12.7413-15.4697l.0179-.002c12.5608-1.2701 37.7453-3.3397 69.6834-3.4824.3004-6.6424.644-11.4215 1.0396-18.2793.3592-6.2258 3.0569-12.1147 7.5909-16.5019 9.93-9.6079 19.535-18.5451 26.654-25.0772 3.561-3.2672 6.504-5.93628 8.557-7.78905 1.027-.9262 1.831-1.64876 2.38-2.14063.274-.24594.485-.43526.628-.56249.07-.06313.124-.111.161-.14356.018-.01633.033-.02867.043-.03711.004-.00412.007-.00855.01-.01074l.003-.00195.001-.00098zm-43.801 180.81978c-19.4 0-36.6494.529-49.0474 1.058-5.7553.246-10.4622.491-13.8495.684 3.0876 22.131 5.9039 38.413 7.9281 51.05l.0726.422c1.6067 8.833 8.807 15.28 17.7176 15.757l2.319.12c22.4196 1.123 44.9546 1.111 67.4046.099l4.644-.225c9.05-.486 16.331-7.128 17.781-16.173 2.024-12.637 4.838-28.919 7.925-51.05-3.387-.193-8.094-.438-13.849-.684-12.398-.529-29.647-1.058-49.046-1.058zm-3.9481-99.0874c-31.2286.1604-55.8254 2.1836-68.0558 3.42-1.5771.1659-2.8714 1.698-2.7906 3.2392l.0119.1494.005.0489c3.2299 31.7109 6.9166 59.5089 10.3775 83.0379.0293-.002.0589-.003.0885-.005 3.4785-.201 8.5176-.468 14.7777-.735 11.3621-.485 26.7597-.968 44.1622-1.054-.0045-.387-.0095-.861-.015-1.42-.017-1.739-.0366-4.292-.0487-7.56-.0243-6.536-.0177-13.933.1084-25.385.1704-15.474.5585-32.713 1.3789-53.7364zm11.2131.0235c-.826 21.0519-1.215 38.3339-1.386 53.8319-.125 11.393-.133 18.735-.109 25.226.012 3.245.032 5.777.049 7.495.006.614.011 1.125.016 1.527 17.212.092 32.437.571 43.698 1.052 6.26.267 11.3.534 14.779.735.029.002.057.003.086.005 3.46-23.529 7.146-51.326 10.372-83.037l.005-.0498c.176-1.5891-1.149-3.2156-2.776-3.3886-11.793-1.1922-35.083-3.1168-64.734-3.3965z" fill="var(--color-ink)" fill-rule="evenodd"/>
|
||||
<path d="m101.001 183.062c19.505 0 36.849.529 49.315 1.058 5.786.246 10.519.491 13.924.684-3.103 22.131-5.933 38.413-7.968 51.05-1.458 9.045-8.779 15.687-17.879 16.173l-4.669.225c-22.573 1.012-45.231 1.024-67.7731-.099l-2.3317-.12c-8.9591-.477-16.199-6.924-17.8145-15.757l-.073-.422c-2.0352-12.637-4.867-28.919-7.9714-51.05 3.4057-.193 8.1386-.438 13.9252-.684 12.4657-.529 29.8098-1.058 49.3155-1.058z" fill="#68abe9"/>
|
||||
<path d="m56.6279 193.649c2.9632-.313 5.6326 1.728 6.0947 4.602l.0376.281.2601 2.344c1.2836 11.298 2.3362 16.481 4.1927 23.957.6454 2.598.9475 4.032 1.2977 5.222.0161.055.0326.106.0475.155.8538.102 2.113.162 4.2422.244 11.6052.444 23.1581.591 34.6066.001 3.073-.159 5.693 2.172 5.854 5.206.16 3.033-2.2 5.621-5.272 5.779-11.9181.615-23.8417.456-35.6199.005-2.1972-.084-4.2851-.159-5.9622-.427-1.7844-.284-3.9749-.903-5.7881-2.707-1.6614-1.653-2.3709-3.704-2.807-5.186-.4338-1.474-.8976-3.572-1.4193-5.673-1.9779-7.965-3.1089-13.606-4.441-25.321l-.269-2.427-.0238-.282c-.1652-2.905 2.0059-5.459 4.9692-5.773z" fill="var(--color-ink-inverted)" opacity=".15"/>
|
||||
</svg>
|
||||
<strong class="txt-medium overflow-ellipsis margin-none">Fizzy</strong>
|
||||
<% end %>
|
||||
|
||||
<header class="flex flex-inline flex-column center flex-shrink">
|
||||
<div class="card-filter--collection flex-inline flex-column align-center center position-relative" data-controller="dialog" data-action="click@document->dialog#closeOnClickOutside keydown.esc->dialog#close">
|
||||
<%= tag.button class: "fizzy-menu input input--select flex align-center txt-normal shadow",
|
||||
data: {
|
||||
action: "click->dialog#open:stop keydown.meta+j@document->hotkey#click keydown.ctrl+j@document->hotkey#click",
|
||||
controller: "hotkey" } do %>
|
||||
<svg fill="none" height="275" viewBox="0 0 202 275" width="202" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m201 258c0 11.159-44.772 16-100 16-55.2285 0-100-4.841-100-16s44.7715-16 100-16c55.228 0 100 4.841 100 16z" fill="var(--color-ink)" opacity=".08"/>
|
||||
<path clip-rule="evenodd" d="m144.805 2.24222c2.294-1.843841 5.681-1.617368 7.696.56152 2.014 2.17904 1.917 5.51121-.174 7.57326l-.209.1953-.012.0117c-.009.0075-.022.0181-.039.0332-.035.0309-.087.078-.156.1397-.138.1235-.344.309-.614.5508-.54.484-1.336 1.1979-2.353 2.1152-2.033 1.835-4.952 4.4821-8.487 7.7256-7.073 6.4897-16.602 15.357-26.441 24.8759-2.543 2.4612-4.066 5.7749-4.269 9.2891-.383 6.654-.719 11.235-1.012 17.6885 27.89.2759 50.213 1.9831 62.831 3.1963l2.598.2558.018.002c7.816.8155 13.555 7.8838 12.741 15.4687l.001.001c-3.418 33.6092-7.351 63.0722-10.988 87.6142.005.178.001.359-.012.54-.03.417-.11.819-.228 1.203-3.37 24.477-6.469 42.647-8.652 56.28-2.231 13.914-13.656 24.673-28.256 25.45h-.011c-24.343 1.247-48.8273 1.346-73.2036.126l-2.3589-.122c-14.5946-.782-26.0187-11.539-28.2492-25.453-2.1836-13.632-5.2839-31.801-8.6543-56.276-.1189-.385-.1974-.789-.2278-1.208-.0133-.182-.0178-.363-.013-.542-3.6384-24.542-7.5712-54.004-10.9942-87.6112l.0009-.001c-.814-7.5854 4.9246-14.6542 12.7413-15.4697l.0179-.002c12.5608-1.2701 37.7453-3.3397 69.6834-3.4824.3004-6.6424.644-11.4215 1.0396-18.2793.3592-6.2258 3.0569-12.1147 7.5909-16.5019 9.93-9.6079 19.535-18.5451 26.654-25.0772 3.561-3.2672 6.504-5.93628 8.557-7.78905 1.027-.9262 1.831-1.64876 2.38-2.14063.274-.24594.485-.43526.628-.56249.07-.06313.124-.111.161-.14356.018-.01633.033-.02867.043-.03711.004-.00412.007-.00855.01-.01074l.003-.00195.001-.00098zm-43.801 180.81978c-19.4 0-36.6494.529-49.0474 1.058-5.7553.246-10.4622.491-13.8495.684 3.0876 22.131 5.9039 38.413 7.9281 51.05l.0726.422c1.6067 8.833 8.807 15.28 17.7176 15.757l2.319.12c22.4196 1.123 44.9546 1.111 67.4046.099l4.644-.225c9.05-.486 16.331-7.128 17.781-16.173 2.024-12.637 4.838-28.919 7.925-51.05-3.387-.193-8.094-.438-13.849-.684-12.398-.529-29.647-1.058-49.046-1.058zm-3.9481-99.0874c-31.2286.1604-55.8254 2.1836-68.0558 3.42-1.5771.1659-2.8714 1.698-2.7906 3.2392l.0119.1494.005.0489c3.2299 31.7109 6.9166 59.5089 10.3775 83.0379.0293-.002.0589-.003.0885-.005 3.4785-.201 8.5176-.468 14.7777-.735 11.3621-.485 26.7597-.968 44.1622-1.054-.0045-.387-.0095-.861-.015-1.42-.017-1.739-.0366-4.292-.0487-7.56-.0243-6.536-.0177-13.933.1084-25.385.1704-15.474.5585-32.713 1.3789-53.7364zm11.2131.0235c-.826 21.0519-1.215 38.3339-1.386 53.8319-.125 11.393-.133 18.735-.109 25.226.012 3.245.032 5.777.049 7.495.006.614.011 1.125.016 1.527 17.212.092 32.437.571 43.698 1.052 6.26.267 11.3.534 14.779.735.029.002.057.003.086.005 3.46-23.529 7.146-51.326 10.372-83.037l.005-.0498c.176-1.5891-1.149-3.2156-2.776-3.3886-11.793-1.1922-35.083-3.1168-64.734-3.3965z" fill="var(--color-ink)" fill-rule="evenodd"/>
|
||||
<path d="m101.001 183.062c19.505 0 36.849.529 49.315 1.058 5.786.246 10.519.491 13.924.684-3.103 22.131-5.933 38.413-7.968 51.05-1.458 9.045-8.779 15.687-17.879 16.173l-4.669.225c-22.573 1.012-45.231 1.024-67.7731-.099l-2.3317-.12c-8.9591-.477-16.199-6.924-17.8145-15.757l-.073-.422c-2.0352-12.637-4.867-28.919-7.9714-51.05 3.4057-.193 8.1386-.438 13.9252-.684 12.4657-.529 29.8098-1.058 49.3155-1.058z" fill="#68abe9"/>
|
||||
<path d="m56.6279 193.649c2.9632-.313 5.6326 1.728 6.0947 4.602l.0376.281.2601 2.344c1.2836 11.298 2.3362 16.481 4.1927 23.957.6454 2.598.9475 4.032 1.2977 5.222.0161.055.0326.106.0475.155.8538.102 2.113.162 4.2422.244 11.6052.444 23.1581.591 34.6066.001 3.073-.159 5.693 2.172 5.854 5.206.16 3.033-2.2 5.621-5.272 5.779-11.9181.615-23.8417.456-35.6199.005-2.1972-.084-4.2851-.159-5.9622-.427-1.7844-.284-3.9749-.903-5.7881-2.707-1.6614-1.653-2.3709-3.704-2.807-5.186-.4338-1.474-.8976-3.572-1.4193-5.673-1.9779-7.965-3.1089-13.606-4.441-25.321l-.269-2.427-.0238-.282c-.1652-2.905 2.0059-5.459 4.9692-5.773z" fill="var(--color-ink-inverted)" opacity=".15"/>
|
||||
</svg>
|
||||
<strong class="txt-medium overflow-ellipsis margin-none">Fizzy</strong>
|
||||
<% end %>
|
||||
|
||||
<%= tag.dialog class:"filter popup popup--animated panel flex-column align-start gap-half fill-white shadow",
|
||||
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" } %>
|
||||
<menu contents>
|
||||
<%= render "cards/show/collections" %>
|
||||
</menu>
|
||||
<p class="txt-small txt-align-center margin-block-half full-width">
|
||||
Press <kbd class="kbd"><%= hotkey_label(["ctrl", "J"]) -%></kbd> anytime to open this, <kbd class="kbd">esc</kbd> to close, <kbd class="kbd">↑</kbd><kbd class="kbd">↓</kbd> to move, <kbd class="kbd">enter</kbd> to navigate, <kbd class="kbd">SHIFT+ENTER</kbd> to select.
|
||||
</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="btn btn--placeholder flex-item-justify-end"></div>
|
||||
<div class="btn btn--placeholder"></div>
|
||||
</nav>
|
||||
<%= 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" %>
|
||||
<menu contents>
|
||||
<%= render "cards/show/collections" %>
|
||||
</menu>
|
||||
<p class="txt-small txt-align-center margin-block-half full-width">
|
||||
Press <kbd class="kbd"><%= hotkey_label(["ctrl", "J"]) -%></kbd> anytime to open this, <kbd class="kbd">esc</kbd> to close, <kbd class="kbd">↑</kbd><kbd class="kbd">↓</kbd> to move, <kbd class="kbd">enter</kbd> to navigate, <kbd class="kbd">SHIFT+ENTER</kbd> to select.
|
||||
</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</header>
|
||||
</nav>
|
||||
@@ -13,7 +13,7 @@
|
||||
<strong class="txt-medium overflow-ellipsis margin-none">Fizzy</strong>
|
||||
<% 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? %>
|
||||
<div contents>
|
||||
<%= 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 } %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
@@ -1,23 +1,7 @@
|
||||
<div class="flex flex-column max-width popup__list full-width">
|
||||
<div class="popup__group flex align-center full-width gap-half overflow-ellipsis" data-filter-target="item" data-navigable-list-target="item">
|
||||
<%= 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" %>
|
||||
<span class="overflow-ellipsis">Assigned to me</span>
|
||||
<span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="popup__group flex align-center full-width gap-half overflow-ellipsis" data-filter-target="item" data-navigable-list-target="item">
|
||||
<%= 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" %>
|
||||
<span class="overflow-ellipsis">Added by me</span>
|
||||
<span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% @filters.each do |filter| %>
|
||||
<div class="popup__group flex align-center full-width gap-half overflow-ellipsis" data-filter-target="item" data-navigable-list-target="item">
|
||||
<%= 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" %>
|
||||
<span class="overflow-ellipsis"><%= filter.summary %></span>
|
||||
<span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
|
||||
|
||||
@@ -1,7 +1,37 @@
|
||||
<div class="flex align-center full-width gap-half">
|
||||
<strong class="popup__title txt-medium">Collections</strong>
|
||||
<button class="btn borderless txt-x-small flex-item-justify-end" data-action="click->dialog#close" >
|
||||
<%= icon_tag "remove-med" %>
|
||||
<span class="for-screen-reader">Close</span>
|
||||
</button>
|
||||
<div class="flex flex-wrap align-center justify-center full-width max-width btn__group--chunky">
|
||||
<%= 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" %>
|
||||
<span>Home</span>
|
||||
<kbd>1</kbd>
|
||||
<% 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" %>
|
||||
<span>Assigned to me</span>
|
||||
<kbd>2</kbd>
|
||||
<% 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" %>
|
||||
<span>Added by me</span>
|
||||
<kbd>3</kbd>
|
||||
<% 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" %>
|
||||
<span>New Collection</span>
|
||||
<kbd>4</kbd>
|
||||
<% 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" %>
|
||||
<span>Notifications</span>
|
||||
<kbd>5</kbd>
|
||||
<% 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" %>
|
||||
<span>Settings</span>
|
||||
<kbd>6</kbd>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
<div class="popup__group flex align-center full-width gap-half overflow-ellipsis" data-filter-target="item" data-navigable-list-target="item">
|
||||
<%= link_to new_collection_path, class: "btn popup__new popup__item", style: "view-transition-name: new-collection" do %>
|
||||
<%= icon_tag "add" %>
|
||||
<span>Add a new collection</span>
|
||||
<% end %>
|
||||
<hr class="full-width separator--horizontal margin-none" style="--border-color: transparent;">
|
||||
</div>
|
||||
@@ -2,16 +2,9 @@
|
||||
|
||||
<% content_for :header do %>
|
||||
<nav class="align-start">
|
||||
<div class="btn btn--circle btn--placeholder flex-item-justify-start"></div>
|
||||
|
||||
<header class="flex flex-inline flex-column center flex-shrink">
|
||||
<%= render "events/filter", filter: @filter %>
|
||||
</header>
|
||||
|
||||
<%= link_to account_settings_path, class: "btn flex-item-justify-end" do %>
|
||||
<%= icon_tag "settings" %>
|
||||
<span class="for-screen-reader">Account settings</span>
|
||||
<% end %>
|
||||
</nav>
|
||||
<% end %>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user