bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify Name & Access on collection settings

Browse Source
This commit is contained in:
Andy Smith
2025-08-05 17:02:24 -05:00
parent 4ab48a0d9a
commit 806e1b2af2
3 changed files with 32 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/helpers/accesses_helper.rb
+2 -2
View File
@@ -1,6 +1,6 @@
module AccessesHelper
def access_menu_tag(collection, &)
tag.menu class: [ "flex flex-column gap-half unpad margin-none txt-medium", { "toggler--toggled": collection.all_access? } ], data: {
def access_menu_tag(collection, **options, &)
tag.menu class: [ options[:class], { "toggler--toggled": collection.all_access? } ], data: {
controller: "filter toggle-class",
toggle_class_toggle_class: "toggler--toggled" }, &
end
app/views/collections/edit.html.erb
+6 -4
View File
@@ -13,11 +13,13 @@
<% end %>
<section class="panels--two-up margin-block">
<div class="panel shadow center flex flex-column txt-normal">
<strong class="txt-large">Name and Access</strong>
<p class="margin-none-block-start">Choose who can access this Collection.</p>
<%= form_with model: @collection, class: "flex flex-column gap txt-large", data: { controller: "form" } do |form| %>
<div class="panel shadow center flex flex-column gap">
<header>
<h2 class="divider txt-large">Name and Access</h2>
<div>Choose who can access this Collection</div>
</header>
<%= form_with model: @collection, class: "display-contents", data: { controller: "form" } do |form| %>
<%= render "collections/edit/name", form: form %>
<%= render "collections/edit/users", collection: @collection, selected_users: @selected_users, unselected_users: @unselected_users, form: form %>
app/views/collections/edit/_users.html.erb
+24 -30
View File
@@ -1,33 +1,27 @@
<section class="margin-block fill-shade border-radius">
<%= access_menu_tag collection do %>
<li class="flex align-center gap pad unpad-block-end txt-normal">
<figure class="avatar" style="--avatar-border-radius: 0; --avatar-size: 3.5ch; margin-inline: 0.3em;">
<%= icon_tag "everyone" %>
<span class="for-screen-reader">Everyone</span>
</figure>
<%= access_menu_tag collection, class: "flex flex-column gap pad fill-shade border-radius list-style-none full-width" do %>
<li class="flex align-center gap">
<figure class="avatar" style="--avatar-border-radius: 0; --avatar-size: 3.5ch; margin-inline: 0.3em;">
<%= icon_tag "everyone" %>
<span class="for-screen-reader">Everyone</span>
</figure>
<div class="min-width">
<div class="overflow-ellipsis fill-shade"><strong>Everyone</strong></div>
</div>
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true" />
<label for="collection_all_access" class="switch">
<%= form.check_box :all_access, class: "switch__input", checked: collection.all_access?, data: { action: "change->toggle-class#toggle" } %>
<span class="switch__btn round"></span>
<span class="for-screen-reader">Give everyone access to this project</span>
</label>
</li>
<hr class="separator--horizontal margin-inline" style="--border-color: var(--color-ink-medium);" aria-hidden="true" />
<div class="pad-inline">
<input placeholder="Filter…" class="input input--transparent full-width" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-filter-target="input" data-action="input->filter#filter">
<div class="min-width">
<div class="overflow-ellipsis fill-shade"><strong>Everyone</strong></div>
</div>
<div data-filter-target="list" class="users-list pad-inline">
<%= access_toggles_for selected_users, selected: true %>
<%= access_toggles_for unselected_users, selected: false %>
</div>
<% end %>
</section>
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true" />
<label for="collection_all_access" class="switch">
<%= form.check_box :all_access, class: "switch__input", checked: collection.all_access?, data: { action: "change->toggle-class#toggle" } %>
<span class="switch__btn round"></span>
<span class="for-screen-reader">Give everyone access to this project</span>
</label>
</li>
<input placeholder="Filter…" class="input input--transparent full-width" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-filter-target="input" data-action="input->filter#filter">
<div data-filter-target="list" class="users-list">
<%= access_toggles_for selected_users, selected: true %>
<%= access_toggles_for unselected_users, selected: false %>
</div>
<% end %>