From f7e2d048081962bdbd766f6bc9b25822894c4be7 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Wed, 2 Apr 2025 17:27:32 -0500 Subject: [PATCH 1/6] Rework the flow for closing and moving between columns --- app/assets/stylesheets/cards.css | 10 ++++- .../bubbles/stagings_controller.rb | 6 ++- app/views/bubbles/_card.html.erb | 7 ++++ app/views/bubbles/_pop_toggle.html.erb | 38 +++++++++++++++++-- app/views/bubbles/show.html.erb | 19 ++-------- 5 files changed, 58 insertions(+), 22 deletions(-) diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 7342da211..c87d7d1b8 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -106,7 +106,11 @@ position: relative; z-index: 0; - .btn { + &:has(dialog[open]) { + z-index: 1; + } + + .btn:not(.popup__item, .btn--plain) { --btn-background: var(--bubble-color); --btn-color: var(--color-ink-reversed); } @@ -355,6 +359,10 @@ } } +.card__move-button { + --btn-background: color-mix(in srgb, var(--bubble-color) 40%, var(--color-ink)); +} + .card__stages { flex: 1 1 25%; } diff --git a/app/controllers/bubbles/stagings_controller.rb b/app/controllers/bubbles/stagings_controller.rb index 3c955a56c..591bcb790 100644 --- a/app/controllers/bubbles/stagings_controller.rb +++ b/app/controllers/bubbles/stagings_controller.rb @@ -2,7 +2,11 @@ class Bubbles::StagingsController < ApplicationController include BubbleScoped, BucketScoped def create - @bubble.toggle_stage Current.account.stages.find(params[:stage_id]) + if params[:stage_id].present? + @bubble.toggle_stage Current.account.stages.find(params[:stage_id]) + else + @bubble.update!(stage: nil) + end redirect_to @bubble end end diff --git a/app/views/bubbles/_card.html.erb b/app/views/bubbles/_card.html.erb index 69b378125..943553ed2 100644 --- a/app/views/bubbles/_card.html.erb +++ b/app/views/bubbles/_card.html.erb @@ -31,6 +31,13 @@ <%= turbo_frame_tag dom_id(bubble, :stage_picker), src: new_bucket_bubble_stage_picker_path(bubble.bucket, bubble) unless (previewing_card? && bubble.popped?) %> + + <% if bubble.stage.nil? %> + <%= button_to bucket_bubble_stagings_path(bubble.bucket, bubble, stage_id: bubble.bucket&.workflow&.stages&.first), method: :post, class: "card__move-button card__hide-on-index btn btn--reversed" do %> + Move to Doing + <%= icon_tag "arrow-right" %> + <% end %> + <% end %> From 4a2e3b6ebb2039b3c53a77ad69a42ee42e1631d8 Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Wed, 2 Apr 2025 16:27:02 +0200 Subject: [PATCH 4/6] Make frames reload compatible with page refreshes to avoid flickering --- app/views/bubbles/show.html.erb | 35 ++++++++++++++++----------------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb index ce4870b8a..aff283ffc 100644 --- a/app/views/bubbles/show.html.erb +++ b/app/views/bubbles/show.html.erb @@ -3,7 +3,7 @@ <% content_for :header do %> <% if @bubble.creating? && @bubble.can_recover_abandoned_creation? %>
+ style="view-transition-name: draft-banner; --bubble-color: <%= @bubble.color %>;"> You have an unsaved work. Would you like to continue where you left off? <%= button_to bucket_bubble_recover_path(@bubble.bucket, @bubble), class: "btn btn--reversed", data: { turbo_action: "replace" } do %> Restore @@ -13,25 +13,19 @@ <% if @bubble.drafted? %>
+ style="view-transition-name: draft-banner;"> This is a draft, it’s only visible to you. <%= render "bubbles/publish", bubble: @bubble %>
<% end %> <% end %> @@ -51,11 +45,11 @@ <% end %>
- + <% if @bubble.published? %>
- <%= turbo_frame_tag dom_id(@bubble, :watch), src: bucket_bubble_watch_path(@bubble.bucket, @bubble) %> - <%= turbo_frame_tag dom_id(@bubble, :pin), src: bucket_bubble_pin_path(@bubble.bucket, @bubble) %> + <%= turbo_frame_tag dom_id(@bubble, :watch), src: bucket_bubble_watch_path(@bubble.bucket, @bubble), refresh: :morph %> + <%= turbo_frame_tag dom_id(@bubble, :pin), src: bucket_bubble_pin_path(@bubble.bucket, @bubble), refresh: :morph %>
<% end %> @@ -77,12 +71,12 @@
-
- <%= tag.house_md @bubble.draft_comment, name: "bubble[draft_comment]", class: "input comment__input", - form: "bubble_form", + + <%= tag.house_md @bubble.draft_comment, name: "bubble[draft_comment]", class: "input comment__input", + form: "bubble_form", placeholder: new_comment_placeholder(@bubble), data: { action: "house-md:change->outlet-auto-save#change focusout->outlet-auto-save#submit", uploads_url: uploads_url(format: "json") } %>
@@ -99,3 +93,8 @@
<% end %>
+ +<%= link_to "Go back", "#", class: "btn", hidden: true, + data: { controller: "back-navigation hotkey", + action: "keydown.esc@document->hotkey#click", + back_navigation_fallback_destination_value: bubbles_path(bucket_id: @bubble.bucket) } %> From 6c201fed4cd9f5bdb49346742266267f91758119 Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Wed, 2 Apr 2025 16:42:00 +0200 Subject: [PATCH 5/6] Reload stages with morphing too --- app/views/bubbles/_card.html.erb | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/app/views/bubbles/_card.html.erb b/app/views/bubbles/_card.html.erb index 943553ed2..aa095310a 100644 --- a/app/views/bubbles/_card.html.erb +++ b/app/views/bubbles/_card.html.erb @@ -1,5 +1,5 @@ -<% cache [ bubble, previewing_card? ] do %> -
+
@@ -30,14 +30,7 @@ <% end %> - <%= turbo_frame_tag dom_id(bubble, :stage_picker), src: new_bucket_bubble_stage_picker_path(bubble.bucket, bubble) unless (previewing_card? && bubble.popped?) %> - - <% if bubble.stage.nil? %> - <%= button_to bucket_bubble_stagings_path(bubble.bucket, bubble, stage_id: bubble.bucket&.workflow&.stages&.first), method: :post, class: "card__move-button card__hide-on-index btn btn--reversed" do %> - Move to Doing - <%= icon_tag "arrow-right" %> - <% end %> - <% end %> + <%= turbo_frame_tag dom_id(bubble, :stage_picker), src: new_bucket_bubble_stage_picker_path(bubble.bucket, bubble), refresh: :morph %>