From bcde27c4d168d6ed058f489d0d59e11010d4cd47 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 12 Nov 2024 15:26:16 -0600
Subject: [PATCH] New grid layout and addition of features menu

---
 app/assets/images/tag.svg                    |  1 +
 app/assets/stylesheets/bubbles.css           | 14 ++++++-
 app/assets/stylesheets/comments.css          |  1 -
 app/assets/stylesheets/layout.css            |  6 +++
 app/views/bubbles/_assignments.html.erb      |  2 +-
 app/views/bubbles/_color.html.erb            |  2 +-
 app/views/bubbles/_date.html.erb             |  2 +-
 app/views/bubbles/_image.html.erb            |  2 +-
 app/views/bubbles/_pop_toggle.html.erb       |  8 ++--
 app/views/bubbles/_tags.html.erb             |  2 +-
 app/views/bubbles/show.html.erb              | 43 ++++++++++++++++----
 app/views/bubbles/stage_pickers/new.html.erb |  2 +-
 12 files changed, 64 insertions(+), 21 deletions(-)
 create mode 100644 app/assets/images/tag.svg

diff --git a/app/assets/images/tag.svg b/app/assets/images/tag.svg
new file mode 100644
index 000000000..76591fe36
--- /dev/null
+++ b/app/assets/images/tag.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m5.5 7a1.5 1.5 0 0 1 -1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1 -1.5 1.5m15.91 4.58-9-9c-.36-.36-.86-.58-1.41-.58h-7c-1.11 0-2 .89-2 2v7c0 .55.22 1.05.59 1.41l8.99 9c.37.36.87.59 1.42.59s1.05-.23 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.56-.23-1.06-.59-1.42z"/></svg>
\ No newline at end of file
diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css
index 0b8140b00..48b6fcff0 100644
--- a/app/assets/stylesheets/bubbles.css
+++ b/app/assets/stylesheets/bubbles.css
@@ -136,7 +136,7 @@
 
   &.bubble__assignee {
     aspect-ratio: 1;
-    font-size: 4.5  cqi;
+    font-size: 4.5cqi;
     inset: -2cqi auto auto 26cqi;
     padding: 0.4em;
 
@@ -307,6 +307,15 @@
   }
 }
 
+.bubble__container {
+  inline-size: min(67ch, 75vw);
+  max-inline-size: 100vw;
+
+  @media (max-width: 70ch) {
+    inline-size: min(67ch, 100vw);
+  }
+}
+
 .bubble__image {
   border: none;
   border-radius: var(--bubble-shape);
@@ -347,7 +356,8 @@
 }
 
 .bubble__perma {
-  block-size: 65cqb;
+  block-size: 100%;
+  max-block-size: 65dvh;
   max-inline-size: 100%;
 }
 
diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index b23f6c15a..df2a2689c 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -3,7 +3,6 @@
   --comment-padding-block: 1.2em;
   --comment-padding-inline: 1.5em;
 
-  font-size: clamp(1rem, 1.6cqi, 2rem);
   max-inline-size: 70ch;
   row-gap: var(--comment-padding-block);
 
diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css
index 2fdbecf69..eccf7dcab 100644
--- a/app/assets/stylesheets/layout.css
+++ b/app/assets/stylesheets/layout.css
@@ -23,6 +23,12 @@ body {
     text-justify: distribute;
     widows: 2;
   }
+
+  &:has(.bubble__perma) {
+    display: grid;
+    grid-template-columns: 1fr minmax(min-content, auto) 1fr;
+    gap: var(--inline-space);
+  }
 }
 
 :where(#footer) {
diff --git a/app/views/bubbles/_assignments.html.erb b/app/views/bubbles/_assignments.html.erb
index a1851b038..143c6fa07 100644
--- a/app/views/bubbles/_assignments.html.erb
+++ b/app/views/bubbles/_assignments.html.erb
@@ -1,4 +1,4 @@
-<span class="bubble__bubble bubble__meta bubble__assignee <%= "bubble__assignee--new" if bubble.assignees.none? %>">
+<span <%= "hidden" unless bubble.assignees.any? %> id="new-assignee" class="bubble__bubble bubble__meta bubble__assignee <%= "bubble__assignee--new" if bubble.assignees.none? %>">
   <%= form_with url: bucket_bubble_assignments_path(bubble.bucket, bubble), data: { controller: "form" } do |form| %>
     <label class="btn btn--plain position-relative fill-transparent" style="<%= "--btn-icon-size: 2em;" unless bubble.assignees.any? %>">
       <% if bubble.assignees.any? %>
diff --git a/app/views/bubbles/_color.html.erb b/app/views/bubbles/_color.html.erb
index 55630ba08..ae06ca832 100644
--- a/app/views/bubbles/_color.html.erb
+++ b/app/views/bubbles/_color.html.erb
@@ -1,4 +1,4 @@
-<div class="bubble__bubble bubble__meta bubble__color" data-controller="dialog" data-action="keydown.esc->dialog#close">
+<div hidden id="new-color" class="bubble__bubble bubble__meta bubble__color" data-controller="dialog" data-action="keydown.esc->dialog#close">
   <button class="btn btn--plain" style="--btn-icon-size: 2.25em;" data-action="dialog#toggle" data-dialog-modal-value="true">
     <svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="var(--bubble-color)"><path d="m14.2 15.2c.1-.7-.4-1.4-1.1-1.5-1.8-.2-3.5.8-4.2 2.5-.5 1.2-1 1.1-1.5.9-2.7-.7-4.6-3.1-4.8-5.8.1-3.5 3.6-6.3 7.9-6.3 1.7 0 3.3.4 4.7 1.3.6.4 1.5.2 1.9-.4s.2-1.5-.4-1.9c-1.9-1.1-4-1.7-6.1-1.7-6-.1-10.6 4-10.6 9 .2 3.9 2.8 7.3 6.6 8.4 1.9.7 4-.2 4.7-2.1 0-.1.1-.2.1-.3.2-.6.8-.9 1.4-.9s1.3-.5 1.4-1.2z"/><circle cx="6.1" cy="12.8" r="1.3"/><circle cx="7.4" cy="8.4" r="1.3"/><circle cx="11.8" cy="7.5" r="1.3"/><path d="m21.8 4.4c-.3-.2-.6-.2-.9-.1s-.5.4-.5.7c0 1.1-.6 2.1-1.5 2.6-1.3 1-2.2 2-1.8 3.7.1.4.3.8.5 1.1s.2.6.1.9l-4.5 8.9c-.3.7-.1 1.5.6 1.8s1.5.1 1.8-.6l4.7-9.3c.1-.2.3-.4.6-.5.9-.2 1.6-.8 2.2-1.5.8-1.1 1.1-2.5.8-3.8-.2-1.6-1-2.9-2.1-3.9z"/></svg>
     <span class="for-screen-reader">Change color</span>
diff --git a/app/views/bubbles/_date.html.erb b/app/views/bubbles/_date.html.erb
index 3aad0d528..71dc77911 100644
--- a/app/views/bubbles/_date.html.erb
+++ b/app/views/bubbles/_date.html.erb
@@ -6,7 +6,7 @@
       <span class="for-screen-reader">Change the due date</span>
     </label>
   <% else %>
-    <div class="bubble__bubble bubble__meta bubble__date bubble__date--new">
+    <div hidden class="bubble__bubble bubble__meta bubble__date bubble__date--new" id="new-date">
       <label class="btn btn--plain" style="--btn-icon-size: 2.5em; margin-inline-end: -0.2em">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--bubble-color)"><path d="M9.569,16.5H2.5A.5.5,0,0,1,2,16V7.5A.5.5,0,0,1,2.5,7H16a.5.5,0,0,1,.5.5V9.57a7.281,7.281,0,0,1,2,0V3a1,1,0,0,0-1-1H15a.25.25,0,0,1-.25-.25v-1a.75.75,0,1,0-1.5,0V4.5a.75.75,0,1,1-1.5,0v-2a.5.5,0,0,0-.5-.5H7a.25.25,0,0,1-.25-.25v-1a.75.75,0,0,0-1.5,0V4.5a.75.75,0,1,1-1.5,0v-2a.5.5,0,0,0-.5-.5H1A1,1,0,0,0,0,3V16.5a2,2,0,0,0,2,2H9.569a7.281,7.281,0,0,1,0-2Z"/><path fill="var(--color-positive)" d="M17.5,11A6.5,6.5,0,1,0,24,17.5,6.508,6.508,0,0,0,17.5,11Zm.75,9a.75.75,0,1,1-1.5,0V18.5a.25.25,0,0,0-.25-.25H15a.75.75,0,0,1,0-1.5h1.5a.25.25,0,0,0,.25-.25V15a.75.75,0,1,1,1.5,0v1.5a.25.25,0,0,0,.25.25H20a.75.75,0,0,1,0,1.5H18.5a.25.25,0,0,0-.25.25Z"/></svg>
         <%= form.date_field :due_on, class: "input input--hidden", data: { action: "change->form#submit click->form#showPicker" } %>
diff --git a/app/views/bubbles/_image.html.erb b/app/views/bubbles/_image.html.erb
index 718ce9262..efded6184 100644
--- a/app/views/bubbles/_image.html.erb
+++ b/app/views/bubbles/_image.html.erb
@@ -2,7 +2,7 @@
   <%= image_tag bubble.image.presence || "", data: { upload_preview_target: "image" } %>
 </div>
 
-<div class="bubble__bubble bubble__meta bubble__attachment">
+<div hidden class="bubble__bubble bubble__meta bubble__attachment" id="new-attachment">
   <% if bubble.image.attached? %>
     <%= button_to bucket_bubble_image_path(bubble.bucket, bubble), method: :delete, class: "btn btn--plain", style: "--btn-icon-size: 3em; margin-block-start: -0.5em; margin-inline-end: -0.2em" do %>
       <svg viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg" fill="var(--bubble-color)"><path fill="var(--color-negative)" d="m19.1 0c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm-.8 5.7h-1.2c-.3 0-.6-.3-.6-.6s.3-.6.6-.6h1.2s1.6 0 1.6 0h1.2c.3 0 .6.3.6.6s-.3.6-.6.6h-1.2s-1.6 0-1.6 0z"/><path d="m6.7 10.5c.9 0 1.6-.7 1.6-1.6s-.7-1.6-1.6-1.6-1.6.7-1.6 1.6.7 1.6 1.6 1.6z" fill="none"/><path d="m9.7 16.9h.1l-.1-.1z"/><path d="m19.2 11.6v6.3c0 .2 0 .4-.4.4h-16.8v-13.7c0-.2 0-.4.4-.4h10.1c0-.7.3-1.3.5-1.8h-11.6c-.9.2-1.4.9-1.4 1.8v14c0 1 .8 1.8 1.8 1.8h17.5c1 0 1.8-.8 1.8-1.8v-6.9c-.6.2-1.2.3-1.8.3z"/><path d="m4.8 5.5c-.7 0-1.3.6-1.3 1.3v8.9c0 .4.2.7.5 1l2.6-3.5c.2-.3.6-.5.9-.5s0 0 0 0c.4 0 .7.2.9.5l.9 1.3 2.3-3.5c.3-.4.8-.7 1.3-.7s0 0 0 0c.5 0 1 .3 1.3.7l3.1 5c0-.1 0-.2 0-.3v-4.2c-2.8-.6-4.9-3-5.1-6h-7.6zm1.9 5c-.9 0-1.6-.7-1.6-1.6s.7-1.6 1.6-1.6 1.6.7 1.6 1.6-.7 1.6-1.6 1.6z"/><path d="m5.2 16.9h2.6l1-1.5-1.2-1.7z"/><path d="m10.4 15.8-.7 1 .1.1h1.3 5.1l-3.1-5.1z"/></svg>
diff --git a/app/views/bubbles/_pop_toggle.html.erb b/app/views/bubbles/_pop_toggle.html.erb
index 146ea5aee..a5d8e48aa 100644
--- a/app/views/bubbles/_pop_toggle.html.erb
+++ b/app/views/bubbles/_pop_toggle.html.erb
@@ -1,11 +1,11 @@
 <% if bubble.popped? %>
-  <%= button_to bucket_bubble_pop_path(bubble.bucket, bubble), method: :delete, class: "btn" do %>
+  <%= button_to bucket_bubble_pop_path(bubble.bucket, bubble), method: :delete, class: "btn full-width justify-start borderless" do %>
     <%= image_tag "pop.svg", aria: { hidden: true }, size: 24 %>
-    <span>Un-pop</span>
+    <span>Restore it</span>
   <% end %>
 <% else %>
-  <%= button_to bucket_bubble_pop_path(bubble.bucket, bubble), class: "btn" do %>
+  <%= button_to bucket_bubble_pop_path(bubble.bucket, bubble), class: "btn full-width justify-start borderless" do %>
     <%= image_tag "pop.svg", aria: { hidden: true }, size: 24 %>
-    <span>Pop</span>
+    <span>Pop it</span>
   <% end %>
 <% end %>
diff --git a/app/views/bubbles/_tags.html.erb b/app/views/bubbles/_tags.html.erb
index afd4a69e1..bb0a4788f 100644
--- a/app/views/bubbles/_tags.html.erb
+++ b/app/views/bubbles/_tags.html.erb
@@ -3,7 +3,7 @@
 <% end %>
 
 <% if bubble.tags.size < 3 %>
-  <span class="bubble__bubble bubble__meta bubble__tag">
+  <span class="bubble__bubble bubble__meta bubble__tag" id="new-tag" hidden>
     <%= turbo_frame_tag :new_tag do %>
       <%= link_to "#", new_bucket_bubble_tag_path(bubble.bucket, bubble), class: "bubble__tag--new" %>
     <% end %>
diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb
index 9d941ee9e..96e508712 100644
--- a/app/views/bubbles/show.html.erb
+++ b/app/views/bubbles/show.html.erb
@@ -6,16 +6,43 @@
       <%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
       <span class="for-screen-reader">Back</span>
     <% end %>
-
-    <section class="flex flex-column align-end gap">
-      <%= render "bubbles/pop_toggle", bubble: @bubble %>
-      <%= turbo_frame_tag dom_id(@bubble, :stage_picker), src: new_bucket_bubble_stage_picker_path(@bubble.bucket, @bubble) %>
-    </section>
   </nav>
 <% end %>
 
-<div class="bubble__perma flex justify-center center margin-block-end-double">
-  <%= render "bubbles/bubble", bubble: @bubble %>
+<div class="flex align-start justify-end">
+  <%= turbo_frame_tag dom_id(@bubble, :stage_picker), src: new_bucket_bubble_stage_picker_path(@bubble.bucket, @bubble) %>
 </div>
 
-<%= render "bubbles/messages", bubble: @bubble %>
+<div class="bubble__container">
+  <div class="bubble__perma flex justify-center center margin-block-end-double">
+    <%= render "bubbles/bubble", bubble: @bubble %>
+  </div>
+
+  <%= render "bubbles/messages", bubble: @bubble %>
+</div>
+
+<aside class="flex align-start justify-start" style="--bubble-color: <%= @bubble.color %>">
+  <div class="flex flex-column gap-half">
+    <button class="btn full-width justify-start borderless" onclick="document.getElementById('new-color').removeAttribute('hidden')">
+      <%= image_tag "art.svg", aria: { hidden: true }, size: 24 %>
+      <span>Color it</span>
+    </button>
+    <button class="btn full-width justify-start borderless" onclick="document.getElementById('new-date').removeAttribute('hidden')">
+      <%= image_tag "calendar-add.svg", aria: { hidden: true }, size: 24 %>
+      <span>Add a due date</span>
+    </button>
+    <button class="btn full-width justify-start borderless" onclick="document.getElementById('new-tag').removeAttribute('hidden')">
+      <%= image_tag "tag.svg", aria: { hidden: true }, size: 24 %>
+      <span>Tag this</span>
+    </button>
+    <button class="btn full-width justify-start borderless" onclick="document.getElementById('new-assignee').removeAttribute('hidden')">
+      <%= image_tag "person.svg", aria: { hidden: true }, size: 24 %>
+      <span>Assign to…</span>
+    </button>
+    <button class="btn full-width justify-start borderless" onclick="document.getElementById('new-attachment').removeAttribute('hidden')">
+      <%= image_tag "picture-add.svg", aria: { hidden: true }, size: 24 %>
+      <span>Attach a file</span>
+    </button>
+    <%= render "bubbles/pop_toggle", bubble: @bubble %>
+  </div>
+</aside>
diff --git a/app/views/bubbles/stage_pickers/new.html.erb b/app/views/bubbles/stage_pickers/new.html.erb
index 949dd5ff3..6be75fea6 100644
--- a/app/views/bubbles/stage_pickers/new.html.erb
+++ b/app/views/bubbles/stage_pickers/new.html.erb
@@ -1,6 +1,6 @@
 <%= turbo_frame_tag dom_id(@bubble, :stage_picker) do %>
   <% if @selected_workflow %>
-    <aside style="position: absolute; top: 10rem; right: 3rem; --bubble-color: <%= @bubble.color %>"
+    <aside class="position-relative" style="--bubble-color: <%= @bubble.color %>"
         data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
       <div class="flex flex-column">
         <button class="btn center" data-action="click->dialog#toggle" data-dialog-modal-value="true">