From 3f9198d543ef0c07dce91e9a23a02afa84b1feb9 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 24 Apr 2025 11:31:51 -0500 Subject: [PATCH 01/11] Give the timeline a little space on each side --- app/assets/stylesheets/events.css | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css index cc35fb77c..cbb3bcf0f 100644 --- a/app/assets/stylesheets/events.css +++ b/app/assets/stylesheets/events.css @@ -12,6 +12,7 @@ --grid-lines: 0.1rem; margin: auto; + max-inline-size: min(105ch, 100%); } .events__day-header { From a4ce130c1c5ca9cdd2e98deb0cf51571c2d552c1 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 24 Apr 2025 11:51:27 -0500 Subject: [PATCH 02/11] Adjust perma layout for larger cards --- app/assets/stylesheets/card-perma.css | 2 +- app/assets/stylesheets/comments.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css index 4f25c7810..634022ad6 100644 --- a/app/assets/stylesheets/card-perma.css +++ b/app/assets/stylesheets/card-perma.css @@ -15,7 +15,7 @@ "qw notch-top we" "actions-left card actions-right" "er notch-bottom rt"; - grid-template-columns: 48px minmax(0, 960px) 48px; + grid-template-columns: 48px minmax(0, 1120px) 48px; inline-size: fit-content; max-inline-size: 100%; margin-inline: auto; diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css index 5ac91e94e..32043d88a 100644 --- a/app/assets/stylesheets/comments.css +++ b/app/assets/stylesheets/comments.css @@ -12,7 +12,7 @@ text-align: center; @media (min-width: 160ch) { - padding-inline: calc(var(--tray-size) + var(--inline-space) * 1.5); + padding-inline: var(--tray-size); } } From adf3d520953fef2a3f0f7de765567994a430fed5 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 24 Apr 2025 12:02:46 -0500 Subject: [PATCH 03/11] Adjust collection line to contrast with comment excerpts --- app/assets/stylesheets/events.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css index cbb3bcf0f..ac3fc2a9b 100644 --- a/app/assets/stylesheets/events.css +++ b/app/assets/stylesheets/events.css @@ -83,6 +83,12 @@ z-index: 2; } + .event__collection { + font-size: var(--text-x-small); + font-weight: 500; + opacity: 0.66; + } + .event__grid-item { background-color: var(--color-container); block-size: 100%; From dca5e3b942c98fd3d571cfe62947e1911732ff75 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 24 Apr 2025 12:56:14 -0500 Subject: [PATCH 04/11] New layout for collections settings, stub entropy setting --- app/assets/stylesheets/avatars.css | 3 +- app/assets/stylesheets/panels.css | 15 +++ app/models/card/closeable.rb | 9 ++ app/views/collections/edit.html.erb | 146 ++++++++++++++++------------ 4 files changed, 108 insertions(+), 65 deletions(-) diff --git a/app/assets/stylesheets/avatars.css b/app/assets/stylesheets/avatars.css index a55112b8c..d30bb984f 100644 --- a/app/assets/stylesheets/avatars.css +++ b/app/assets/stylesheets/avatars.css @@ -10,7 +10,8 @@ margin: 0; place-items: center; - img { + img, + .icon { aspect-ratio: 1; block-size: auto; border-radius: var(--avatar-border-radius); diff --git a/app/assets/stylesheets/panels.css b/app/assets/stylesheets/panels.css index 108d7c42a..f5a9919ac 100644 --- a/app/assets/stylesheets/panels.css +++ b/app/assets/stylesheets/panels.css @@ -12,4 +12,19 @@ --panel-border-color: var(--color-subtle-dark); } } + + .panels--two-up { + --panel-size: auto; + + display: flex; + flex-wrap: wrap; + gap: var(--block-space-double); + align-content: start; + max-inline-size: min(100ch, 100%); + margin: auto; + + .panel { + flex: 1 1 25%; + } + } } diff --git a/app/models/card/closeable.rb b/app/models/card/closeable.rb index 64945af0c..1040c27dd 100644 --- a/app/models/card/closeable.rb +++ b/app/models/card/closeable.rb @@ -1,6 +1,15 @@ module Card::Closeable extend ActiveSupport::Concern + AUTO_CLOSE_OPTIONS = [ + [ "30 days", 30.days ], + [ "60 days", 60.days ], + [ "90 days", 90.days ], + [ "6 months", 180.days ], + [ "1 year", 365.days ], + [ "Never", nil ] + ].freeze + AUTO_CLOSE_AFTER = 30.days included do diff --git a/app/views/collections/edit.html.erb b/app/views/collections/edit.html.erb index a31b65d2b..299a3a555 100644 --- a/app/views/collections/edit.html.erb +++ b/app/views/collections/edit.html.erb @@ -1,81 +1,99 @@ -<% @page_title = "Edit #{@collection.name}" %> +<% @page_title = "Collection Settings" %> <% content_for :header do %> <% end %> -
- <%= form_with model: @collection, class: "flex flex-column gap txt-large", data: { controller: "form" } do |form| %> -
- -
+
+
+ Name and access +

Choose who can access this Collection.

+ <%= form_with model: @collection, class: "flex flex-column gap txt-large", data: { controller: "form" } do |form| %> +
+ +
-
- <%= access_menu_tag @collection do %> -
  • -
    - <%= icon_tag "everyone" %> - Everyone -
    +
    + <%= access_menu_tag @collection do %> +
  • +
    + <%= icon_tag "everyone" %> + Everyone +
    -
    -
    Everyone
    -
    +
    +
    Everyone
    +
    - + - -
    • + +
    • - + - <% if User.active.count > 20 %> - - <% end %> - -
    - <%= access_toggles_for @selected_users, selected: true %> - - <% if @selected_users.any? && @unselected_users.any? %> -
    + <% if User.active.count > 20 %> + <% end %> - <%= access_toggles_for @unselected_users, selected: false %> -
    +
    + <%= access_toggles_for @selected_users, selected: true %> + + <% if @selected_users.any? && @unselected_users.any? %> +
    + <% end %> + + <%= access_toggles_for @unselected_users, selected: false %> +
    + <% end %> +
    + + + + <%= link_to "Cancel and go back", cards_path(collection_ids: [ @collection ]), data: { form_target: "cancel", turbo_frame: "_top" }, hidden: true %> + <% end %> +
    + +
    + Workflows +

    Use a Workflow to track progress in this Collection.

    + <%= form_with model: @collection, url: collection_workflow_path(@collection), local: true, method: :patch, data: { controller: "form" } do |form| %> + <%= form.select :workflow_id, Workflow.all.map { |w| [w.name, w.id] }, { include_blank: "Choose…" }, class: "input input--select full-width", data: { action: "change->form#submit" } %> + <% end %> +

    <%= link_to "Manage workflows", workflows_path, class: "btn btn--plain txt-link" %>

    + + + + Auto-close Cards +

    Cards Fizzle Out when there is no activity for…

    + <%= select_tag :auto_close_after, options_for_select(Card::Closeable::AUTO_CLOSE_OPTIONS, Card::Closeable::AUTO_CLOSE_AFTER), { class: "input input--select full-width margin-block-end", data: { action: "change->form#submit" } } %> + + + + <%= form_with model: @collection, class: "txt-align-center", method: :delete do |form| %> + <%= form.button class: "btn txt-negative borderless txt-small", data: { turbo_confirm: "Are you sure you want to permanently delete this Collection?" } do %> + <%= icon_tag "trash" %> + Delete this Collection <% end %> -
    - - - - <%= link_to "Cancel and go back", cards_path(collection_ids: [ @collection ]), data: { form_target: "cancel", turbo_frame: "_top" }, hidden: true %> - <% end %> -
    - -
    - Choose a workflow -

    Use a workflow to track progress in this collection.

    - <%= form_with model: @collection, url: collection_workflow_path(@collection), local: true, method: :patch, data: { controller: "form" } do |form| %> - <%= form.select :workflow_id, Workflow.all.map { |w| [w.name, w.id] }, { include_blank: "Choose…" }, class: "input input--select full-width", data: { action: "change->form#submit" } %> - <% end %> -

    <%= link_to "Manage workflows", workflows_path, class: "btn btn--plain txt-link" %>

    -
    + <% end %> + + From 579c76f58a9d8cfe6dc735c353ac3f34f36a6e29 Mon Sep 17 00:00:00 2001 From: Mike Dalessio Date: Thu, 24 Apr 2025 15:07:08 -0400 Subject: [PATCH 05/11] dep: AR::Tenanted: no implicit db migrations ref: https://github.com/basecamp/active_record-tenanted/pull/86 ref: https://37s.fizzy.37signals.com/collections/693169862/cards/999008694 --- Gemfile.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Gemfile.lock b/Gemfile.lock index 999e8dae8..44c91583d 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,6 +1,6 @@ GIT remote: https://github.com/basecamp/active_record-tenanted - revision: 13b60769047226d5cb10d92eb1f2e1bc19773438 + revision: f04f4f0a153ae5da65b400021aa97fdb28ac86b5 specs: active_record-tenanted (0.1.0) activerecord (>= 8.1.alpha) From 5c2d12177a95b498630ec70fc522c327ebbba23d Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 24 Apr 2025 16:00:12 -0500 Subject: [PATCH 06/11] Type polish and sizing constraints --- app/assets/stylesheets/panels.css | 3 ++- app/views/collections/_access_toggle.erb | 2 +- app/views/collections/edit.html.erb | 14 +++++++------- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/panels.css b/app/assets/stylesheets/panels.css index f5a9919ac..3d4620288 100644 --- a/app/assets/stylesheets/panels.css +++ b/app/assets/stylesheets/panels.css @@ -24,7 +24,8 @@ margin: auto; .panel { - flex: 1 1 25%; + flex: 1 1 33%; + min-inline-size: 36ch; } } } diff --git a/app/views/collections/_access_toggle.erb b/app/views/collections/_access_toggle.erb index aee7bb248..318415703 100644 --- a/app/views/collections/_access_toggle.erb +++ b/app/views/collections/_access_toggle.erb @@ -1,4 +1,4 @@ -
  • +
  • <%= avatar_tag user %>
    diff --git a/app/views/collections/edit.html.erb b/app/views/collections/edit.html.erb index 299a3a555..3df4c91ab 100644 --- a/app/views/collections/edit.html.erb +++ b/app/views/collections/edit.html.erb @@ -13,8 +13,8 @@ <% end %>
    -
    - Name and access +
    + Name and Access

    Choose who can access this Collection.

    <%= form_with model: @collection, class: "flex flex-column gap txt-large", data: { controller: "form" } do |form| %>
    @@ -27,7 +27,7 @@
    <%= access_menu_tag @collection do %> -
  • +
  • <%= icon_tag "everyone" %> Everyone @@ -75,17 +75,17 @@
    Workflows -

    Use a Workflow to track progress in this Collection.

    <%= form_with model: @collection, url: collection_workflow_path(@collection), local: true, method: :patch, data: { controller: "form" } do |form| %> + <%= form.label :workflow_id, "Use a Workflow to track progress in this Collection.", class: "flex justify-center margin-block-end" %> <%= form.select :workflow_id, Workflow.all.map { |w| [w.name, w.id] }, { include_blank: "Choose…" }, class: "input input--select full-width", data: { action: "change->form#submit" } %> <% end %>

    <%= link_to "Manage workflows", workflows_path, class: "btn btn--plain txt-link" %>

    - Auto-close Cards -

    Cards Fizzle Out when there is no activity for…

    - <%= select_tag :auto_close_after, options_for_select(Card::Closeable::AUTO_CLOSE_OPTIONS, Card::Closeable::AUTO_CLOSE_AFTER), { class: "input input--select full-width margin-block-end", data: { action: "change->form#submit" } } %> + Auto-Close Cards + + <%= select_tag :closure, options_for_select(Card::Closeable::AUTO_CLOSE_OPTIONS, Card::Closeable::AUTO_CLOSE_AFTER), { class: "input input--select full-width margin-block-end", data: { action: "change->form#submit" } } %> From ed8cc29e59e9b7e25f71391eecf91532c4fc6324 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 24 Apr 2025 16:36:26 -0500 Subject: [PATCH 07/11] Workflows and card perma polish --- app/assets/stylesheets/_global.css | 4 ++-- app/assets/stylesheets/card-perma.css | 9 +++++++++ app/views/workflows/stages/_stage.html.erb | 6 +++--- 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css index 3dbe697a3..f5f164164 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/_global.css @@ -11,8 +11,8 @@ /* Text */ --text-xx-small: 0.55rem; - --text-x-small: 0.7rem; - --text-small: 0.8rem; + --text-x-small: 0.75rem; + --text-small: 0.85rem; --text-normal: 1rem; --text-medium: 1.1rem; --text-large: 1.5rem; diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css index 634022ad6..e9db1f020 100644 --- a/app/assets/stylesheets/card-perma.css +++ b/app/assets/stylesheets/card-perma.css @@ -31,6 +31,15 @@ border: none; } + + .card__meta, + .card__stages { + font-size: var(--text-small); + } + + .card__stages { + max-inline-size: 32ch; + } } /* Children diff --git a/app/views/workflows/stages/_stage.html.erb b/app/views/workflows/stages/_stage.html.erb index 9d68de0b3..238c2b645 100644 --- a/app/views/workflows/stages/_stage.html.erb +++ b/app/views/workflows/stages/_stage.html.erb @@ -1,9 +1,9 @@ -
    +
    <%= render "workflows/stages/color", stage: stage %> <%= turbo_frame_tag stage do %> - <%= link_to edit_workflow_stage_path(stage.workflow, stage) do %> - <%= stage.name %> + <%= link_to edit_workflow_stage_path(stage.workflow, stage), class: "txt-link overflow-ellipsis" do %> + <%= stage.name %> <% end %> <% end %>
    \ No newline at end of file From 783e7d12a13f772a256ec556dcd4bb770674a1a8 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 24 Apr 2025 16:59:48 -0500 Subject: [PATCH 08/11] Scroll users list, adjust layout --- app/assets/stylesheets/users.css | 4 ++++ app/assets/stylesheets/utilities.css | 1 + app/helpers/accesses_helper.rb | 2 +- app/views/collections/_access_toggle.erb | 2 +- app/views/collections/edit.html.erb | 12 +++++++----- 5 files changed, 14 insertions(+), 7 deletions(-) create mode 100644 app/assets/stylesheets/users.css diff --git a/app/assets/stylesheets/users.css b/app/assets/stylesheets/users.css new file mode 100644 index 000000000..e3e427779 --- /dev/null +++ b/app/assets/stylesheets/users.css @@ -0,0 +1,4 @@ +.users-list { + max-block-size: 40dvh; + overflow: auto; +} diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css index 6ec13a630..f80bbd988 100644 --- a/app/assets/stylesheets/utilities.css +++ b/app/assets/stylesheets/utilities.css @@ -107,6 +107,7 @@ .pad-inline-double { padding-inline: var(--inline-space-double); } .unpad { padding: 0; } + .unpad-block-end { padding-block-end: 0; } .unpad-inline { padding-inline: 0; } /* Margins */ diff --git a/app/helpers/accesses_helper.rb b/app/helpers/accesses_helper.rb index a139ac3d4..8715b8165 100644 --- a/app/helpers/accesses_helper.rb +++ b/app/helpers/accesses_helper.rb @@ -1,6 +1,6 @@ module AccessesHelper def access_menu_tag(collection, &) - tag.menu class: [ "flex flex-column gap margin-none pad txt-medium", { "toggler--toggled": collection.all_access? } ], data: { + tag.menu class: [ "flex flex-column gap-half unpad margin-none txt-medium", { "toggler--toggled": collection.all_access? } ], data: { controller: "filter toggle-class", filter_active_class: "filter--active", filter_selected_class: "selected", toggle_class_toggle_class: "toggler--toggled" }, & diff --git a/app/views/collections/_access_toggle.erb b/app/views/collections/_access_toggle.erb index 318415703..e08f1dc85 100644 --- a/app/views/collections/_access_toggle.erb +++ b/app/views/collections/_access_toggle.erb @@ -11,7 +11,7 @@ - <%= icon_tag "check", class: "toggler__visible-when-on" %> + <%= icon_tag "check", class: "toggler__visible-when-on margin-inline-end" %>
    -
    +
    <%= access_menu_tag @collection do %> -
  • +
  • <%= icon_tag "everyone" %> Everyone @@ -46,14 +46,16 @@
    • - + <% if User.active.count > 20 %> <% end %> -
    - <%= access_toggles_for @selected_users, selected: true %> +
    + <% 20.times do %> + <%= access_toggles_for @selected_users, selected: true %> + <% end %> <% if @selected_users.any? && @unselected_users.any? %>
    From 77b79de02f533048fa790993048cc21610ec08a7 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 24 Apr 2025 17:03:50 -0500 Subject: [PATCH 09/11] Add missing filter display classes, style input --- app/assets/stylesheets/filters.css | 8 ++++++++ app/views/collections/edit.html.erb | 4 +++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css index cf7c894f0..e374ca3d0 100644 --- a/app/assets/stylesheets/filters.css +++ b/app/assets/stylesheets/filters.css @@ -107,3 +107,11 @@ } } } + +.filter--active li { + display: none; + + &.selected { + display: flex; + } +} diff --git a/app/views/collections/edit.html.erb b/app/views/collections/edit.html.erb index af2df9798..2cd90e5c3 100644 --- a/app/views/collections/edit.html.erb +++ b/app/views/collections/edit.html.erb @@ -49,7 +49,9 @@ <% if User.active.count > 20 %> - +
    + +
    <% end %>
    From 2cecbcd77c77d70b07424cb52371905b2a3ef235 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 24 Apr 2025 17:36:48 -0500 Subject: [PATCH 10/11] Choose workflows from a small preview --- app/assets/stylesheets/workflows.css | 36 ++++++++++++++++++++++++++++ app/views/collections/edit.html.erb | 33 ++++++++++++++++++------- 2 files changed, 60 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/workflows.css b/app/assets/stylesheets/workflows.css index 21e36b9c6..a2b852b43 100644 --- a/app/assets/stylesheets/workflows.css +++ b/app/assets/stylesheets/workflows.css @@ -28,4 +28,40 @@ } } } + + .workflow-preview { + --border-size: 3px; + + flex: 1 1 30%; + max-inline-size: 33%; + padding: 0.5em 1em; + + button { + --hover-size: 0; + + appearance: none; + background: transparent; + border: none; + cursor: pointer; + inline-size: auto; + margin: 0; + max-inline-size: 100%; + outline: 0; + padding: 0; + text-align: left; + } + } + + .workflow-preview--selected { + --border-color: var(--color-link); + } + + .workflow-preview__swatch { + --btn-size: 1em; + --btn-border-radius: 50%; + --btn-border-size: 0; + --hover-size: 0; + + cursor: auto; + } } diff --git a/app/views/collections/edit.html.erb b/app/views/collections/edit.html.erb index 2cd90e5c3..bfaf7c6fd 100644 --- a/app/views/collections/edit.html.erb +++ b/app/views/collections/edit.html.erb @@ -78,19 +78,34 @@
    - Workflows - <%= form_with model: @collection, url: collection_workflow_path(@collection), local: true, method: :patch, data: { controller: "form" } do |form| %> - <%= form.label :workflow_id, "Use a Workflow to track progress in this Collection.", class: "flex justify-center margin-block-end" %> - <%= form.select :workflow_id, Workflow.all.map { |w| [w.name, w.id] }, { include_blank: "Choose…" }, class: "input input--select full-width", data: { action: "change->form#submit" } %> - <% end %> -

    <%= link_to "Manage workflows", workflows_path, class: "btn btn--plain txt-link" %>

    - - - Auto-Close Cards <%= select_tag :closure, options_for_select(Card::Closeable::AUTO_CLOSE_OPTIONS, Card::Closeable::AUTO_CLOSE_AFTER), { class: "input input--select full-width margin-block-end", data: { action: "change->form#submit" } } %> + + + Workflows +
    Use a Workflow to track progress in this Collection.
    +
    + <% Workflow.all.each do |workflow| %> +
    + <%= button_to collection_workflow_path(@collection), method: :patch do %> + <%= hidden_field_tag "collection[workflow_id]", workflow.id %> + <%= workflow.name %> +
      + <% workflow.stages.each do |stage| %> +
    • + + <%= stage.name %> +
      • + <% end %> +
    + <% end %> +
    + <% end %> +
    +

    <%= link_to "Manage workflows", workflows_path, class: "btn btn--plain txt-link" %>

    + <%= form_with model: @collection, class: "txt-align-center", method: :delete do |form| %> From ae90ddac074ec291c1fa5c9d41e0fadade5af366 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 24 Apr 2025 17:46:56 -0500 Subject: [PATCH 11/11] Account for stages where the color isn't set --- app/views/collections/edit.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/collections/edit.html.erb b/app/views/collections/edit.html.erb index bfaf7c6fd..43b022e57 100644 --- a/app/views/collections/edit.html.erb +++ b/app/views/collections/edit.html.erb @@ -95,7 +95,7 @@
      <% workflow.stages.each do |stage| %>
    • - + <%= stage.name %>
      • <% end %>