diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css index 5db9e7df7..6d966d0ae 100644 --- a/app/assets/stylesheets/card-perma.css +++ b/app/assets/stylesheets/card-perma.css @@ -34,16 +34,6 @@ } } - @media (max-width: 639px) { - &:has(.card__closed) { - padding-block-start: 4.5rem; - - .card-perma__bg { - box-shadow: 0 -2rem 0 0 var(--color-container); - } - } - } - @media (max-width: 799px) { --half-btn-height: 1.25rem; --padding-inline: 1.5ch; @@ -262,8 +252,7 @@ .card__closed { @media (max-width: 639px) { - inset: auto 0 100% auto; - translate: 0 30%; + inset: auto 0 3rem auto; scale: 75%; } } diff --git a/app/assets/stylesheets/native.css b/app/assets/stylesheets/native.css index 591ce8890..e636eae14 100644 --- a/app/assets/stylesheets/native.css +++ b/app/assets/stylesheets/native.css @@ -59,16 +59,26 @@ /* ------------------------------------------------------------------------ */ .card-perma { - margin-block-start: 0; + margin-block-start: var(--block-space-half); &:not(:has(.card-perma__notch-new-card-buttons)) .card-perma__bg { - padding-block: clamp(0.25rem, 2vw, var(--padding-block)); + padding-block-end: clamp(0.25rem, 2vw, var(--padding-block)); + } + + .card { + background: linear-gradient(to bottom, var(--color-canvas), var(--card-bg-color)); + box-shadow: unset; + } + + .card__board { + border-radius: 0 var(--border-radius) var(--border-radius) 0; } } .card-perma__bg { - border-start-start-radius: calc(0.2em + clamp(0.25rem, 2vw, var(--padding-block))); - border-start-end-radius: calc(0.2em + clamp(0.25rem, 2vw, var(--padding-block))); + padding-inline: 0; + padding-block-start: 0; + background-color: unset; } .card-perma__closure-message { @@ -77,21 +87,10 @@ } .card-perma--draft { - .card-perma__bg { - padding-inline: 0; - padding-block-start: 0; - background-color: unset; - } - .card { - background: linear-gradient(to bottom, var(--color-canvas), var(--card-bg-color)); box-shadow: 0 101vh 0 100vh var(--card-bg-color); } - .card__board { - border-radius: 0 var(--border-radius) var(--border-radius) 0; - } - .card-perma__notch--bottom { z-index: 1; } @@ -131,3 +130,9 @@ display: none; } } + +[data-bridge-components~=stamp] { + [data-controller~=bridge--stamp] { + display: none; + } +} diff --git a/app/javascript/controllers/bridge/stamp_controller.js b/app/javascript/controllers/bridge/stamp_controller.js new file mode 100644 index 000000000..747f5d48d --- /dev/null +++ b/app/javascript/controllers/bridge/stamp_controller.js @@ -0,0 +1,44 @@ +import { BridgeComponent } from "@hotwired/hotwire-native-bridge" + +export default class extends BridgeComponent { + static component = "stamp" + static values = { scopeSelector: { type: String, default: "body" } } + + connect() { + super.connect() + + if (this.element.closest(this.scopeSelectorValue)) { + this.notifyBridgeOfConnect() + this.#observeStamp() + } + } + + disconnect() { + super.disconnect() + this.notifyBridgeOfDisconnect() + this.stampObserver?.disconnect() + } + + notifyBridgeOfConnect() { + const bridgeElement = this.bridgeElement + + this.send("connect", { + title: bridgeElement.title, + description: bridgeElement.bridgeAttribute("description") + }) + } + + notifyBridgeOfDisconnect() { + this.send("disconnect") + } + + #observeStamp() { + this.stampObserver = new MutationObserver(() => { + this.notifyBridgeOfConnect() + }) + + this.stampObserver.observe(this.element, { + attributes: true + }) + } +} diff --git a/app/javascript/initializers/bridge/bridge_element.js b/app/javascript/initializers/bridge/bridge_element.js index 438cf22e1..76f0db8a7 100644 --- a/app/javascript/initializers/bridge/bridge_element.js +++ b/app/javascript/initializers/bridge/bridge_element.js @@ -10,7 +10,7 @@ BridgeElement.prototype.getButton = function() { } BridgeElement.prototype.getIcon = function() { - const url = this.bridgeAttribute(`icon-url`) + const url = this.bridgeAttribute("icon-url") if (url) { return { url } @@ -20,9 +20,9 @@ BridgeElement.prototype.getIcon = function() { } BridgeElement.prototype.getDisplayTitle = function() { - return !!this.bridgeAttribute(`display-title`) + return !!this.bridgeAttribute("display-title") } BridgeElement.prototype.getDisplayAsPrimaryAction = function() { - return !!this.bridgeAttribute(`display-as-primary-action`) + return !!this.bridgeAttribute("display-as-primary-action") } diff --git a/app/views/cards/container/_closure_buttons.html.erb b/app/views/cards/container/_closure_buttons.html.erb index 27db6590e..99fcad627 100644 --- a/app/views/cards/container/_closure_buttons.html.erb +++ b/app/views/cards/container/_closure_buttons.html.erb @@ -1,13 +1,27 @@
<%= link_to edit_card_path(card), class: "btn btn--circle-mobile borderless", - data: { controller: "hotkey", action: "keydown.e@document->hotkey#click", bridge__overflow_menu_target: "item", bridge_title: "Edit", turbo_frame: dom_id(card, :edit) } do %> + data: { + controller: "hotkey", + action: "keydown.e@document->hotkey#click", + bridge__overflow_menu_target: "item", + bridge_title: "Edit", + turbo_frame: dom_id(card, :edit) + } do %> <%= icon_tag "pencil", class: "icon--mobile-only" %> Edit e <% end %> - <%= button_to card_closure_path(card), class: "btn btn--circle-mobile borderless", - data: { controller: "hotkey", form_target: "submit", bridge__buttons_target: "button", bridge_title: "Mark done", bridge_display_as_primary_action: true, bridge_display_title: true, bridge_icon_url: bridge_icon("check"), action: "keydown.d@document->hotkey#click" }, + <%= button_to card_closure_path(card), class: "btn btn--circle-mobile borderless hide-on-native", + data: { + controller: "hotkey", + form_target: "submit", + bridge__buttons_target: ("button" unless card.postponed?), + bridge_title: "Mark done", + bridge_display_as_primary_action: true, + bridge_display_title: true, bridge_icon_url: bridge_icon("check"), + action: "keydown.d@document->hotkey#click" + }, form: { data: { controller: "form" } } do %> <%= icon_tag "check", class: "icon--mobile-only" %> Mark as Done diff --git a/app/views/cards/display/common/_stamp.html.erb b/app/views/cards/display/common/_stamp.html.erb index 629e4cf24..86190e0f6 100644 --- a/app/views/cards/display/common/_stamp.html.erb +++ b/app/views/cards/display/common/_stamp.html.erb @@ -1,15 +1,25 @@ <% if card.postponed? %> -
"> + <%= tag.div class: token_list("card__closed", "card__closed--system": card.postponed_by&.system?), data: { + controller: "bridge--stamp", + bridge__stamp_scope_selector_value: ".card-perma", + bridge_title: "Not Now", + bridge_description: card.postponed_at.strftime("%b %d, %Y") + } do %> Not Now <%= card.postponed_at.strftime("%b %d, %Y") %> -
+ <% end %> <% end %> <% if card.closed? %> -
+ <%= tag.div class: "card__closed", data: { + controller: "bridge--stamp", + bridge__stamp_scope_selector_value: ".card-perma", + bridge_title: "Done", + bridge_description: card.closed_at.strftime("%b %d, %Y") + } do %> Done <%= card.closed_at.strftime("%b %d, %Y") %> -
+ <% end %> <% end %>