From e9726c481acc30c23d15733a00a54fbde4c24239 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Mon, 7 Apr 2025 14:50:24 -0500 Subject: [PATCH 1/9] WIP --- app/assets/stylesheets/buttons.css | 17 +++++++++++++++++ app/assets/stylesheets/cards.css | 1 - app/views/bubbles/_pop_toggle.html.erb | 25 +++++++++++++------------ 3 files changed, 30 insertions(+), 13 deletions(-) diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index 3b6b3ebcc..ccc8ebffd 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -193,3 +193,20 @@ } } } + + + + + + +.btn-dialog { + .popup { + background-color: var(--bubble-color, var(--color-bg)); + margin-top: var(--btn-size); + } + + .popup__item { + --btn-background: var(--bubble-color); + --btn-color: var(--color-bg); + } +} diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 1b9231cae..4d66afe4b 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -116,7 +116,6 @@ margin-block: calc(var(--block-space) * -1) var(--block-space); padding: var(--block-space) var(--inline-space-double); position: relative; - z-index: 0; &:has(dialog[open]) { z-index: 1; diff --git a/app/views/bubbles/_pop_toggle.html.erb b/app/views/bubbles/_pop_toggle.html.erb index 3335efdac..f9b1d4105 100644 --- a/app/views/bubbles/_pop_toggle.html.erb +++ b/app/views/bubbles/_pop_toggle.html.erb @@ -6,21 +6,22 @@ <% end %> <% else %>
- - - Close as… +
+ - <% Current.account.pop_reasons.labels.each do |label| %> - <%= button_to bubble_pop_path(bubble, reason: label), class: "btn popup__item full-width", form_class: "full-width" do %> - <%= label %> + + <% Current.account.pop_reasons.labels.each do |label| %> + <%= button_to bubble_pop_path(bubble, reason: label), class: "btn popup__item full-width", form_class: "full-width" do %> + <%= label %> + <% end %> <% end %> - <% end %> - +
+
From 620c0b885aeecfaf420183b4274457dc93298914 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Mon, 7 Apr 2025 15:49:36 -0500 Subject: [PATCH 2/9] Position "close as" dialog --- app/assets/images/caret-down.svg | 1 + app/assets/stylesheets/buttons.css | 21 +++++++-------------- app/assets/stylesheets/icons.css | 1 + app/views/bubbles/_pop_toggle.html.erb | 5 +++-- 4 files changed, 12 insertions(+), 16 deletions(-) create mode 100644 app/assets/images/caret-down.svg diff --git a/app/assets/images/caret-down.svg b/app/assets/images/caret-down.svg new file mode 100644 index 000000000..a19d0f357 --- /dev/null +++ b/app/assets/images/caret-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index ccc8ebffd..bacea74a1 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -192,21 +192,14 @@ animation: zoom-fade 300ms ease-out; } } -} + .btn--dialog { + .icon--caret-down { + font-size: 1ch; + } - - - - -.btn-dialog { - .popup { - background-color: var(--bubble-color, var(--color-bg)); - margin-top: var(--btn-size); - } - - .popup__item { - --btn-background: var(--bubble-color); - --btn-color: var(--color-bg); + + .popup { + margin-top: var(--btn-size); + } } } diff --git a/app/assets/stylesheets/icons.css b/app/assets/stylesheets/icons.css index 7937952f3..8380ef7d0 100644 --- a/app/assets/stylesheets/icons.css +++ b/app/assets/stylesheets/icons.css @@ -35,6 +35,7 @@ .icon--calendar-add { --svg: url("calendar-add.svg "); } .icon--calendar { --svg: url("calendar.svg "); } .icon--camera { --svg: url("camera.svg "); } + .icon--caret-down { --svg: url("caret-down.svg "); } .icon--chart { --svg: url("chart.svg "); } .icon--check { --svg: url("check.svg "); } .icon--close { --svg: url("close.svg "); } diff --git a/app/views/bubbles/_pop_toggle.html.erb b/app/views/bubbles/_pop_toggle.html.erb index f9b1d4105..42f1581be 100644 --- a/app/views/bubbles/_pop_toggle.html.erb +++ b/app/views/bubbles/_pop_toggle.html.erb @@ -8,8 +8,9 @@
- Date: Mon, 7 Apr 2025 15:53:53 -0500 Subject: [PATCH 3/9] Remove unused class and markup --- app/views/bubbles/_pop_toggle.html.erb | 27 ++++++++++++-------------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/app/views/bubbles/_pop_toggle.html.erb b/app/views/bubbles/_pop_toggle.html.erb index 42f1581be..59b8f6289 100644 --- a/app/views/bubbles/_pop_toggle.html.erb +++ b/app/views/bubbles/_pop_toggle.html.erb @@ -6,23 +6,20 @@ <% end %> <% else %>
+ -
- - - - <% Current.account.pop_reasons.labels.each do |label| %> - <%= button_to bubble_pop_path(bubble, reason: label), class: "btn popup__item full-width", form_class: "full-width" do %> - <%= label %> - <% end %> + + <% Current.account.pop_reasons.labels.each do |label| %> + <%= button_to bubble_pop_path(bubble, reason: label), class: "btn popup__item full-width", form_class: "full-width" do %> + <%= label %> <% end %> - -
+ <% end %> +
From 1715e9a9eefde1f8f56559f30e26abf239bcc479 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 8 Apr 2025 10:52:20 -0500 Subject: [PATCH 4/9] WIP --- app/assets/stylesheets/base.css | 1 + app/assets/stylesheets/buttons.css | 82 +++++++++++++++++++++++--- app/views/bubbles/_pop_toggle.html.erb | 15 +++++ 3 files changed, 91 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index 526b502bc..9301bbc61 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -21,6 +21,7 @@ background: var(--color-bg); color: var(--color-ink); font-family: var(--font-sans); + interpolate-size: allow-keywords; line-height: 1.375; overflow: unset; scroll-behavior: auto; diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index bacea74a1..e61b57fa9 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -192,14 +192,82 @@ animation: zoom-fade 300ms ease-out; } } +} - .btn--dialog { - .icon--caret-down { - font-size: 1ch; - } +.btn--dialog { + .icon--caret-down { + font-size: 1ch; + } - + .popup { - margin-top: var(--btn-size); - } + + .popup { + margin-top: var(--btn-size); } } + +/* NEW THING +/* -------------------------------------------------------------------------- */ + +.expandable-btn { + --btn-height: calc(1em + 1lh); + + background: gold; + position: relative; + + &[open] { + z-index: 1; + } + + &::details-content { + inline-size: 0; + transition: inline-size 1s, content-visibility 1s; + transition-behavior: allow-discrete; + } + + &:open::details-content { + inline-size: auto; + } +} + +.expandable-btn__trigger { + .icon--caret-down { + font-size: 1ch; + } + + [open] & { + box-shadow: none; + position: relative; + z-index: 1; + } +} + +.expandable-btn__content { + --btn-border-radius: calc(var(--btn-height) / 2); + + align-items: stretch; + flex-direction: column; + gap: 4px; + inset: 0 auto auto 0; + padding-block-start: var(--btn-height); + position: absolute; + text-wrap: nowrap; + transition: inline-size: 2s; + + .expandable-btn:has(:hover) & { + box-shadow: 0 0 0 var(--hover-size) var(--hover-color); + } +} + +.expandable-btn__item { + --btn-background: var(--color-subtle-light); + --btn-border-radius: 0.3em; + --btn-border-size: 0; + --btn-font-weight: 500; + --btn-padding: var(--inline-space-half) var(--inline-space-half) var(--inline-space-half) var(--inline-space); + --hover-size: 0; + --outline-color: transparent; + + justify-content: start; + margin-inline: -1ch; + padding-inline: 1ch; +} + diff --git a/app/views/bubbles/_pop_toggle.html.erb b/app/views/bubbles/_pop_toggle.html.erb index 59b8f6289..016c65167 100644 --- a/app/views/bubbles/_pop_toggle.html.erb +++ b/app/views/bubbles/_pop_toggle.html.erb @@ -6,6 +6,20 @@ <% end %> <% else %>
+ +
+ + Close As + <%= icon_tag "caret-down" %> + +
+ + + +
+
+ + - - +
+ +
- - + <% Current.account.pop_reasons.labels.each do |label| %> + <%= button_to bubble_pop_path(bubble, reason: label), class: "expander__item btn" do %> + <%= label %> + <% end %> + + <% end %>
- From ab88f5549ec24a75362cf25dca67e87b6ed8b570 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 8 Apr 2025 16:09:53 -0500 Subject: [PATCH 7/9] Working with longer text --- app/assets/stylesheets/expander.css | 28 ++++++++++++++++++++++++++ app/views/bubbles/_pop_toggle.html.erb | 2 +- 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/expander.css b/app/assets/stylesheets/expander.css index 6a649b4bc..d985d20ce 100644 --- a/app/assets/stylesheets/expander.css +++ b/app/assets/stylesheets/expander.css @@ -19,11 +19,20 @@ cursor: pointer; display: flex; inline-size: var(--expander-width); + justify-content: flex-start; padding-inline: 1.5ch; position: relative; white-space: nowrap; z-index: 1; + &::-webkit-details-marker { + display: none; + } + + [open] & { + box-shadow: none; + } + .icon { font-size: 1ch; } @@ -32,7 +41,10 @@ .expander__content { --btn-border-radius: var(--expander-radius); + align-items: stretch; border-radius: var(--expander-radius); + flex-direction: column; + gap: 0; padding-block-start: var(--expander-height); } @@ -71,5 +83,21 @@ } .expander__item { + --btn-background: transparent; + --btn-border-radius: 0.3em; + --btn-border-size: 0; + --btn-font-weight: 500; + --btn-padding: var(--inline-space-half) var(--inline-space); + --hover-size: 0; + --outline-color: transparent; + + inline-size: calc(100% + var(--inline-space) * 2); + margin-inline-start: calc(-1 * var(--inline-space)); + justify-content: flex-start; white-space: nowrap; + + &:hover, + &:focus-visible { + background-color: oklch(var(--lch-white) / 15%); + } } diff --git a/app/views/bubbles/_pop_toggle.html.erb b/app/views/bubbles/_pop_toggle.html.erb index 52c8ba23f..f61984e65 100644 --- a/app/views/bubbles/_pop_toggle.html.erb +++ b/app/views/bubbles/_pop_toggle.html.erb @@ -17,7 +17,7 @@ <%= button_to bubble_pop_path(bubble, reason: label), class: "expander__item btn" do %> <%= label %> <% end %> - <% end %> From 22ff4ee18c909c65c522250e5182344d55d3d14a Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 8 Apr 2025 16:17:05 -0500 Subject: [PATCH 8/9] Cleanup, phew! --- app/assets/stylesheets/expander.css | 14 +++++++++++--- app/views/bubbles/_pop_toggle.html.erb | 25 +------------------------ 2 files changed, 12 insertions(+), 27 deletions(-) diff --git a/app/assets/stylesheets/expander.css b/app/assets/stylesheets/expander.css index d985d20ce..fc1b5ff2b 100644 --- a/app/assets/stylesheets/expander.css +++ b/app/assets/stylesheets/expander.css @@ -4,7 +4,7 @@ --expander-height: calc(1em + 1lh); --expander-width: 11ch; --expander-radius: calc(var(--expander-height) / 2); - --expander-duration: 350ms; + --expander-duration: 150ms; interpolate-size: allow-keywords; position: relative; @@ -48,15 +48,14 @@ padding-block-start: var(--expander-height); } +/* For browsers that support animation */ @supports selector(details::details-content) { .expander::details-content { --btn-border-radius: var(--expander-radius); block-size: var(--expander-height); border-radius: var(--expander-radius); - inline-size: var(--expander-width); inset: 0 auto auto 0; - min-inline-size: var(--expander-width); overflow: clip; position: absolute; transition: content-visibility var(--expander-duration) allow-discrete, block-size var(--expander-duration), inline-size var(--expander-duration); @@ -65,9 +64,17 @@ .expander[open]::details-content { block-size: auto; inline-size: auto; + + box-shadow: 0 0 0 var(--hover-size) var(--hover-color); + } + + .expander__content { + inline-size: var(--expander-width); + min-inline-size: var(--expander-width); } } +/* Fallback for browsers that don't support animation */ @supports not selector(details::details-content) { .expander__content { border-radius: var(--expander-radius); @@ -77,6 +84,7 @@ [open] & { block-size: auto; + box-shadow: 0 0 0 var(--hover-size) var(--hover-color); inline-size: auto; } } diff --git a/app/views/bubbles/_pop_toggle.html.erb b/app/views/bubbles/_pop_toggle.html.erb index f61984e65..438f4f821 100644 --- a/app/views/bubbles/_pop_toggle.html.erb +++ b/app/views/bubbles/_pop_toggle.html.erb @@ -6,8 +6,7 @@ <% end %> <% else %>
- -
+
Close as <%= icon_tag "caret-down" %> @@ -17,31 +16,9 @@ <%= button_to bubble_pop_path(bubble, reason: label), class: "expander__item btn" do %> <%= label %> <% end %> - <% end %>
- - - - - - - - Close as… - <% Current.account.pop_reasons.labels.each do |label| %> - <%= button_to bubble_pop_path(bubble, reason: label), class: "btn popup__item full-width", form_class: "full-width" do %> - <%= label %> - <% end %> - <% end %> -
From 7b8ed815cdf8b57f7691b3706711579c0ee0762b Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 9 Apr 2025 14:09:08 -0500 Subject: [PATCH 9/9] Address PR feedback --- app/assets/stylesheets/buttons.css | 9 --------- app/assets/stylesheets/cards.css | 3 ++- app/assets/stylesheets/expander.css | 11 ++++++----- .../controllers/details_controller.js | 13 +++++++++++++ .../controllers/expand_btn_controller.js | 17 ----------------- app/views/bubbles/_pop_toggle.html.erb | 4 ++-- 6 files changed, 23 insertions(+), 34 deletions(-) create mode 100644 app/javascript/controllers/details_controller.js delete mode 100644 app/javascript/controllers/expand_btn_controller.js diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index b31080b88..0ca763506 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -194,12 +194,3 @@ } } -.btn--dialog { - .icon--caret-down { - font-size: 1ch; - } - - + .popup { - margin-top: var(--btn-size); - } -} diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 4d66afe4b..fceb080a8 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -116,8 +116,9 @@ margin-block: calc(var(--block-space) * -1) var(--block-space); padding: var(--block-space) var(--inline-space-double); position: relative; + z-index: 0; - &:has(dialog[open]) { + &:has([open]) { z-index: 1; } diff --git a/app/assets/stylesheets/expander.css b/app/assets/stylesheets/expander.css index fc1b5ff2b..e7be6c769 100644 --- a/app/assets/stylesheets/expander.css +++ b/app/assets/stylesheets/expander.css @@ -46,6 +46,10 @@ flex-direction: column; gap: 0; padding-block-start: var(--expander-height); + + &:hover { + box-shadow: none; + } } /* For browsers that support animation */ @@ -56,6 +60,7 @@ block-size: var(--expander-height); border-radius: var(--expander-radius); inset: 0 auto auto 0; + inline-size: var(--expander-width); overflow: clip; position: absolute; transition: content-visibility var(--expander-duration) allow-discrete, block-size var(--expander-duration), inline-size var(--expander-duration); @@ -64,12 +69,9 @@ .expander[open]::details-content { block-size: auto; inline-size: auto; - - box-shadow: 0 0 0 var(--hover-size) var(--hover-color); } .expander__content { - inline-size: var(--expander-width); min-inline-size: var(--expander-width); } } @@ -84,7 +86,6 @@ [open] & { block-size: auto; - box-shadow: 0 0 0 var(--hover-size) var(--hover-color); inline-size: auto; } } @@ -99,7 +100,7 @@ --hover-size: 0; --outline-color: transparent; - inline-size: calc(100% + var(--inline-space) * 2); + inline-size: calc(100% + var(--inline-space-double)); margin-inline-start: calc(-1 * var(--inline-space)); justify-content: flex-start; white-space: nowrap; diff --git a/app/javascript/controllers/details_controller.js b/app/javascript/controllers/details_controller.js new file mode 100644 index 000000000..7259fd665 --- /dev/null +++ b/app/javascript/controllers/details_controller.js @@ -0,0 +1,13 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + static targets = [ "details" ] + + close() { + this.detailsTarget.removeAttribute("open") + } + + closeOnClickOutside({ target }) { + if (!this.element.contains(target)) this.close() + } +} diff --git a/app/javascript/controllers/expand_btn_controller.js b/app/javascript/controllers/expand_btn_controller.js deleted file mode 100644 index f62605470..000000000 --- a/app/javascript/controllers/expand_btn_controller.js +++ /dev/null @@ -1,17 +0,0 @@ -import { Controller } from "@hotwired/stimulus" - -export default class extends Controller { - static targets = [ "dialog", "content" ] - - connect() { - const width = this.dialogTarget.offsetWidth; - } - - toggle() { - const isOpen = this.dialogTarget.open; - - if (!isOpen) { - console.log("isOpen"); - } - } -} diff --git a/app/views/bubbles/_pop_toggle.html.erb b/app/views/bubbles/_pop_toggle.html.erb index 438f4f821..1268061b5 100644 --- a/app/views/bubbles/_pop_toggle.html.erb +++ b/app/views/bubbles/_pop_toggle.html.erb @@ -5,8 +5,8 @@ Un-do <% end %> <% else %> -
-
+
+
Close as <%= icon_tag "caret-down" %>