diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css index 95bd3d00f3..827312842b 100644 --- a/app/assets/stylesheets/inputs.css +++ b/app/assets/stylesheets/inputs.css @@ -314,4 +314,41 @@ margin: 0; } } + + /* Checkboxes */ + .checkbox { + appearance: none; + background-color: var(--color-canvas); + block-size: 1.1em; + border: 1px solid currentColor; + border-radius: 0.15em; + color: currentColor; + display: grid; + font: inherit; + inline-size: 1.1em; + margin: 0; + place-content: center; + transform: translateY(0.1em); + + &::before { + background-color: CanvasText; + block-size: 0.65em; + box-shadow: inset 1em 1em currentColor; + clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); + content: ""; + inline-size: 0.65em; + transform: scale(0); + transform-origin: center; + transition: 150ms transform ease-in-out; + } + + &:checked::before { + transform: scale(1) rotate(10deg); + } + + &:where([disabled]):not(:hover):not(:active) { + filter: none; + opacity: 0.5; + } + } } diff --git a/app/assets/stylesheets/settings.css b/app/assets/stylesheets/settings.css index bd12916fc4..07644922eb 100644 --- a/app/assets/stylesheets/settings.css +++ b/app/assets/stylesheets/settings.css @@ -62,6 +62,16 @@ } } + .settings__section--negative { + h2 { + color: var(--color-negative); + } + + .divider { + --divider-color: oklch(var(--lch-red-light)); + } + } + .settings__section:has(.settings__scrollable-list) { @media (min-width: 640px) { display: flex; diff --git a/app/assets/stylesheets/steps.css b/app/assets/stylesheets/steps.css index b9b40c8fa5..300db79d92 100644 --- a/app/assets/stylesheets/steps.css +++ b/app/assets/stylesheets/steps.css @@ -6,44 +6,6 @@ inline-size: auto; } - .step__checkbox { - --hover-color: var(--card-color); - - appearance: none; - background-color: var(--color-canvas); - block-size: 1.1em; - border: 1px solid currentColor; - border-radius: 0.15em; - color: currentColor; - display: grid; - font: inherit; - inline-size: 1.1em; - margin: 0; - place-content: center; - transform: translateY(0.1em); - - &::before { - background-color: CanvasText; - block-size: 0.65em; - box-shadow: inset 1em 1em currentColor; - clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); - content: ""; - inline-size: 0.65em; - transform: scale(0); - transform-origin: center; - transition: 150ms transform ease-in-out; - } - - &:checked::before { - transform: scale(1) rotate(10deg); - } - - &:where([disabled]):not(:hover):not(:active) { - filter: none; - opacity: 0.5; - } - } - .step__content { --input-border-radius: 0; --input-border-size: 0; diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css index 2aa07029ce..89cf586921 100644 --- a/app/assets/stylesheets/utilities.css +++ b/app/assets/stylesheets/utilities.css @@ -223,6 +223,10 @@ padding: 0; } + :where(.list-unindented) { + padding-inline-start: 1.25em; + } + /* Accessibility */ .visually-hidden, .for-screen-reader { diff --git a/app/javascript/controllers/dispatch_event_controller.js b/app/javascript/controllers/dispatch_event_controller.js new file mode 100644 index 0000000000..cf91923394 --- /dev/null +++ b/app/javascript/controllers/dispatch_event_controller.js @@ -0,0 +1,9 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + static values = { name: String } + + fire() { + this.dispatch(this.nameValue, { target: document, prefix: false }) + } +} diff --git a/app/javascript/controllers/toggle_enable_controller.js b/app/javascript/controllers/toggle_enable_controller.js index b65ea57d4a..78496cd7d7 100644 --- a/app/javascript/controllers/toggle_enable_controller.js +++ b/app/javascript/controllers/toggle_enable_controller.js @@ -1,11 +1,20 @@ import { Controller } from "@hotwired/stimulus" export default class extends Controller { - static targets = [ "element" ] + static targets = [ "element", "checkbox" ] toggle() { this.elementTargets.forEach((element) => { element.toggleAttribute("disabled") }) } + + reset() { + this.checkboxTargets.forEach((checkbox) => { + checkbox.checked = false + }) + this.elementTargets.forEach((element) => { + element.toggleAttribute("disabled", true) + }) + } } diff --git a/app/views/account/settings/_cancellation.html.erb b/app/views/account/settings/_cancellation.html.erb index 49f87512fd..03a88833c5 100644 --- a/app/views/account/settings/_cancellation.html.erb +++ b/app/views/account/settings/_cancellation.html.erb @@ -1,26 +1,45 @@ <% if Current.account.cancellable? && Current.user.owner? %> -
+
-

Cancel account

-
Delete your Fizzy account.
+

Danger zone

+
Delete your account and everything in it, including all boards and cards.
-
- +
+ - -

Delete your account?

-
    -
  • All users, including you, will lose access
  • - <% if Current.account.try(:active_subscription) %> -
  • Your subscription will be canceled
  • - <% end %> -
  • After 30 days, your data will be permanently deleted
  • -
+ +

Delete account

+
+

What happens next:

+
    +
  • Your <%= Current.account.name %> account will be closed immediately.
  • +
  • All users, including you, will lose access.
  • + <% if Current.account.try(:active_subscription) %> +
  • Your subscription will be canceled.
  • + <% end %> +
  • All your data will be permanently deleted within 30 days.
  • +
+ +

Remember to export your data

+

+ before you go. You won’t be able to do it after you delete your account. +

+
+ +
- - <%= button_to "Delete my account", account_cancellation_path, method: :post, class: "btn btn--negative", form: { data: { action: "submit->dialog#close", turbo: false } } %> + + <%= button_to "Delete my account", account_cancellation_path, + method: :post, + class: "btn btn--negative", + disabled: true, + form: { data: { action: "submit->dialog#close", turbo: false } }, + data: { toggle_enable_target: "element" } %>
diff --git a/app/views/account/settings/_export.html.erb b/app/views/account/settings/_export.html.erb index 3608e764fb..932b6a490f 100644 --- a/app/views/account/settings/_export.html.erb +++ b/app/views/account/settings/_export.html.erb @@ -4,7 +4,7 @@
Download a complete archive of all account data.
-
+
diff --git a/app/views/cards/display/perma/_steps.html.erb b/app/views/cards/display/perma/_steps.html.erb index 9f65dec2a8..286d06bbfe 100644 --- a/app/views/cards/display/perma/_steps.html.erb +++ b/app/views/cards/display/perma/_steps.html.erb @@ -3,7 +3,7 @@ <% unless card.closed? %>
  • - + <%= form_with model: [card, Step.new], url: card_steps_path(card), class: "min-width", data: { controller: "form", action: "submit->form#preventEmptySubmit submit->form#preventComposingSubmit turbo:submit-end->form#reset" } do |form| %> <%= form.text_field :content, class: "input step__content hide-focus-ring", placeholder: "Add a step…", autocomplete: "off", data: { form_target: "input", "1p-ignore": "true", action: "compositionstart->form#compositionStart compositionend->form#compositionEnd" }, aria: { label: "Add a step" } %> <% end %> diff --git a/app/views/cards/steps/_step.html.erb b/app/views/cards/steps/_step.html.erb index 052419d390..3a122106d1 100644 --- a/app/views/cards/steps/_step.html.erb +++ b/app/views/cards/steps/_step.html.erb @@ -1,8 +1,8 @@ <%= turbo_frame_tag step do %>
  • <%= form_with model: [step.card, step], data: { controller: "form" } do |form| %> - <%= form.check_box :completed, { class: "step__checkbox", data: { action: "change->form#submit" } } %> + <%= form.check_box :completed, { class: "checkbox", data: { action: "change->form#submit" } } %> <% end %> <%= link_to step.content, edit_card_step_path(step.card, step), class: "step__content" %> -
  • + <% end %> diff --git a/app/views/cards/steps/edit.html.erb b/app/views/cards/steps/edit.html.erb index 9784fe6ac2..46a8972265 100644 --- a/app/views/cards/steps/edit.html.erb +++ b/app/views/cards/steps/edit.html.erb @@ -1,7 +1,7 @@ <%= turbo_frame_tag @step do %>
    <%= form_with model: [@card, @step], class: "step", data: { controller: "form" } do |form| %> - <%= form.check_box :completed, { class: "step__checkbox", checked: @step.completed?, disabled: true } %> + <%= form.check_box :completed, { class: "checkbox", checked: @step.completed?, disabled: true } %> <%= form.text_field :content, class: "input step__content step__content--edit hide-focus-ring", placeholder: "Name this step…", required: true, autofocus: true, autocomplete: "off", data: { action: "keydown.esc->form#cancel focus->form#select", "1p-ignore": "true" } %> <%= form.button type: "submit", class: "btn btn--positive txt-xx-small" do %> diff --git a/app/views/public/cards/show/_steps.html.erb b/app/views/public/cards/show/_steps.html.erb index e6f8e1f3a3..99b4a28791 100644 --- a/app/views/public/cards/show/_steps.html.erb +++ b/app/views/public/cards/show/_steps.html.erb @@ -1,8 +1,8 @@
      <% card.steps.each do |step| %>
    1. - <%= check_box_tag :completed, { class: "step__checkbox", disabled: true, checked: step.completed? } %> + <%= check_box_tag :completed, { class: "checkbox", disabled: true, checked: step.completed? } %> <%= tag.span step.content, class: "step__content" %> -
    2. + <% end %> -
    \ No newline at end of file +