From a5b4c88d2773aef7dde0f579b28cba8cda8525af Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Mon, 15 Sep 2025 18:01:34 -0500 Subject: [PATCH] Style web hooks forms and list WIP --- app/assets/stylesheets/utilities.css | 1 + app/views/webhooks/_webhook.html.erb | 6 +-- app/views/webhooks/edit.html.erb | 44 +++++++++++++---- app/views/webhooks/form/_actions.html.erb | 14 +++--- app/views/webhooks/index.html.erb | 59 +++++++++++++---------- app/views/webhooks/new.html.erb | 48 ++++++++++++------ 6 files changed, 113 insertions(+), 59 deletions(-) diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css index dabbec2c9..3eb820bfb 100644 --- a/app/assets/stylesheets/utilities.css +++ b/app/assets/stylesheets/utilities.css @@ -193,6 +193,7 @@ /* Lists */ :where(.list-style-none) { + list-style: none; margin: 0 auto; padding: 0; } diff --git a/app/views/webhooks/_webhook.html.erb b/app/views/webhooks/_webhook.html.erb index 7f77b9a34..44b34c54d 100644 --- a/app/views/webhooks/_webhook.html.erb +++ b/app/views/webhooks/_webhook.html.erb @@ -1,11 +1,11 @@ -
  • - <%= link_to webhook, class: "txt-ink flex gap-half align-center min-width" do %> +
  • + <%= link_to webhook, class: "txt-ink flex gap-half align-center min-width txt-medium" do %> <%= webhook.name %> <% end %> - <%= button_to webhook, method: :delete, class: "btn btn--circle btn--negative", + <%= button_to webhook, method: :delete, class: "btn btn--circle btn--negative txt-xx-small flex-item-no-shrink", data: { turbo_confirm: "Are you sure you want to permanently remove this webhook?" } do %> <%= icon_tag "minus" %> Remove <%= webhook.name %> diff --git a/app/views/webhooks/edit.html.erb b/app/views/webhooks/edit.html.erb index c6358248d..8084c8b74 100644 --- a/app/views/webhooks/edit.html.erb +++ b/app/views/webhooks/edit.html.erb @@ -1,23 +1,49 @@ -<% @page_title = "Webhooks" %> +<% @page_title = @webhook.name %> <% content_for :header do %> <%= render "filters/menu", user_filtering: @user_filtering %> -

    <%= @page_title %>

    +
    + <%= link_to collection_webhooks_path, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %> + + ← + Webhooks + + <% end %> +
    + +

    <%= @page_title %>

    <% end %> -
    - <%= form_with model: @webhook, url: @webhook, method: :put, data: { controller: "form" }, html: { class: "flex flex-column gap align-center justify-starts" } do |form| %> +
    + <%= form_with model: @webhook, url: @webhook, method: :put, data: { controller: "form" }, html: { class: "flex flex-column gap" } do |form| %>

    - <%= form.text_field :name, required: true, autofocus: true, class: "input", placeholder: "Name your Webhook…", data: { action: "keydown.esc@document->form#cancel" } %> + <%= form.text_field :name, required: true, autofocus: true, class: "input full-width", placeholder: "Name your Webhook…", data: { action: "keydown.esc@document->form#cancel" } %>

    -
    - <%= form.label :actions %> +
    + <%= form.label :url do %> + Payload URL
    +

    This is the URL for the app that will receive payloads from Fizzy.

    + <% end %> + <%= form.url_field :url, + required: true, + pattern: "https?://.*", + title: "Must be an http:// or https:// URL", + class: "input", + placeholder: "https://example.com", + data: { action: "keydown.esc@document->form#cancel" } %> +
    + +
    + <%= form.label :actions do %> + Events
    +

    Trigger a call to the Payload URL when these things occur:

    + <% end %> <%= render "webhooks/form/actions", form: form %>
    - <%= form.button type: :submit, class: "btn btn--reversed center margin-block-start txt-medium" do %> - Update Webhook + <%= form.button type: :submit, class: "btn btn--link center txt-medium" do %> + Save Changes <% end %> <%= link_to "Go back", collection_webhooks_path, data: { form_target: "cancel" }, hidden: true %> diff --git a/app/views/webhooks/form/_actions.html.erb b/app/views/webhooks/form/_actions.html.erb index bd592ca20..cd75e2dd6 100644 --- a/app/views/webhooks/form/_actions.html.erb +++ b/app/views/webhooks/form/_actions.html.erb @@ -1,16 +1,16 @@ -
      +
        <%= form.collection_check_boxes \ :subscribed_actions, Webhook::PERMITTED_ACTIONS, :itself, :humanize do |item| %> -
      • -
      • + + <%= item.text %>
        • <% end %>
      diff --git a/app/views/webhooks/index.html.erb b/app/views/webhooks/index.html.erb index 3f2c47e19..43d1f696b 100644 --- a/app/views/webhooks/index.html.erb +++ b/app/views/webhooks/index.html.erb @@ -2,12 +2,16 @@ <% content_for :header do %> <%= render "filters/menu", user_filtering: @user_filtering %> - <%= link_to cards_path(collection_ids: [ @collection ]), class: "header__title btn borderless txt-large", style: "--btn-padding: 0.25ch 1ch 0.25ch 0.75ch; view-transistion-name: webhooks-title;", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %> - - ← - <%= @collection.name %> - - <% end %> +
      + <%= link_to cards_path(collection_ids: [ @collection ]), class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %> + + ← + <%= @collection.name %> + + <% end %> +
      + +

      <%= @page_title %>

      <%= link_to new_collection_webhook_path, class: "btn" do %> @@ -17,23 +21,28 @@
      <% end %> -
      - <%= tag.div class: "panel shadow center", data: { - controller: "navigable-list", - action: "keydown->navigable-list#navigate", - navigable_list_focus_on_selection_value: true, - navigable_list_actionable_items_value: true - } do %> -

      <%= @page_title %>

      - -
      -
        - <%= render partial: "webhooks/webhook", collection: @page.records %> -
      - -
      - Press ↑↓ to move, enter to visit webhook, SHIFT+ENTER to toggle. -
      -
      +<%= tag.section class: "panel shadow center webhooks", data: { + controller: "navigable-list", + action: "keydown->navigable-list#navigate", + navigable_list_focus_on_selection_value: true, + navigable_list_actionable_items_value: true +} do %> + <% if @page.records.any? %> +
        + <%= render partial: "webhooks/webhook", collection: @page.records %> +
      + <% else %> +

      Webhooks can notify another application when something happens in this Fizzy collection. You'll choose which events to subscribe to and provide a URL to receive the data.

      +

      For example, you could create a webhook that posts to a Campfire chat in Basecamp when new cards are added to Fizzy.

      + <%= link_to new_collection_webhook_path, class: "btn btn--link" do %> + <%= icon_tag "add" %> + Set up a webhook + <% end %> <% end %> -
      + + <% if @page.records.many? %> +
      + Press ↑↓ to move, enter to visit webhook, SHIFT+ENTER to toggle. +
      + <% end %> +<% end %> diff --git a/app/views/webhooks/new.html.erb b/app/views/webhooks/new.html.erb index 780088117..27d741fd2 100644 --- a/app/views/webhooks/new.html.erb +++ b/app/views/webhooks/new.html.erb @@ -1,30 +1,48 @@ -<% @page_title = "Webhooks" %> +<% @page_title = "Set up a Webhook" %> <% content_for :header do %> <%= render "filters/menu", user_filtering: @user_filtering %> -

      <%= @page_title %>

      +
      + <%= link_to collection_webhooks_path, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %> + + ← + Webhooks + + <% end %> +
      + +

      <%= @page_title %>

      <% end %> -
      - <%= form_with model: @webhook, url: collection_webhooks_path, data: { controller: "form" }, html: { class: "flex flex-column gap align-center justify-starts" } do |form| %> +
      + <%= form_with model: @webhook, url: collection_webhooks_path, data: { controller: "form" }, html: { class: "flex flex-column gap" } do |form| %>

      - <%= form.text_field :name, required: true, autofocus: true, class: "input", placeholder: "Name your Webhook…", data: { action: "keydown.esc@document->form#cancel" } %> + <%= form.text_field :name, required: true, autofocus: true, class: "input", placeholder: "Name this Webhook…", data: { action: "keydown.esc@document->form#cancel" } %>

      - <%= form.url_field :url, - required: true, - pattern: "https?://.*", - title: "Must be an http:// or https:// URL", - class: "input", - placeholder: "https://example.com", - data: { action: "keydown.esc@document->form#cancel" } %> +
      + <%= form.label :url do %> + Payload URL
      +

      This is the URL for the app that will receive payloads from Fizzy.

      + <% end %> + <%= form.url_field :url, + required: true, + pattern: "https?://.*", + title: "Must be an http:// or https:// URL", + class: "input", + placeholder: "https://example.com", + data: { action: "keydown.esc@document->form#cancel" } %> +
      -
      - <%= form.label :actions %> +
      + <%= form.label :actions do %> + Events
      +

      Trigger a call to the Payload URL when these things occur:

      + <% end %> <%= render "webhooks/form/actions", form: form %>
      - <%= form.button type: :submit, class: "btn btn--reversed center margin-block-start txt-medium" do %> + <%= form.button type: :submit, class: "btn btn--link center txt-medium" do %> Create Webhook <% end %>