Style web hooks forms and list WIP
This commit is contained in:
Jason Zimdars
committed by
Stanko K.R.
Stanko K.R.
parent
ce1d6469e7
commit
a5b4c88d27
@@ -193,6 +193,7 @@
|
||||
|
||||
/* Lists */
|
||||
:where(.list-style-none) {
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<li class="flex align-center gap-half" data-navigable-list-target="item">
|
||||
<%= link_to webhook, class: "txt-ink flex gap-half align-center min-width" do %>
|
||||
<li class="list-style-none margin-none flex align-center gap full-width" data-navigable-list-target="item">
|
||||
<%= link_to webhook, class: "txt-ink flex gap-half align-center min-width txt-medium" do %>
|
||||
<strong class="overflow-ellipsis"><%= webhook.name %></strong>
|
||||
<% end %>
|
||||
|
||||
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true">
|
||||
|
||||
<%= 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" %>
|
||||
<span class="for-screen-reader">Remove <%= webhook.name %></span>
|
||||
|
||||
@@ -1,23 +1,49 @@
|
||||
<% @page_title = "Webhooks" %>
|
||||
<% @page_title = @webhook.name %>
|
||||
|
||||
<% content_for :header do %>
|
||||
<%= render "filters/menu", user_filtering: @user_filtering %>
|
||||
<h1 class="header__title" style="view-transistion-name: webhooks-title"><%= @page_title %></h1>
|
||||
<div class="header__actions header__actions--start">
|
||||
<%= link_to collection_webhooks_path, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
|
||||
<span class="overflow-ellipsis">
|
||||
←
|
||||
<strong>Webhooks</strong>
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<h1 class="header__title"><%= @page_title %></h1>
|
||||
<% end %>
|
||||
|
||||
<article class="panel center" style="--panel-size: 40ch;" style="view-transition-name: <%= dom_id(@webhook) %>">
|
||||
<%= form_with model: @webhook, url: @webhook, method: :put, data: { controller: "form" }, html: { class: "flex flex-column gap align-center justify-starts" } do |form| %>
|
||||
<article class="panel center txt-align-start" style="view-transition-name: <%= dom_id(@webhook) %>">
|
||||
<%= form_with model: @webhook, url: @webhook, method: :put, data: { controller: "form" }, html: { class: "flex flex-column gap" } do |form| %>
|
||||
<h2 class="txt-large margin-none">
|
||||
<%= 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" } %>
|
||||
</h2>
|
||||
|
||||
<div class="flex flex-column align-start full-width">
|
||||
<%= form.label :actions %>
|
||||
<div class="flex flex-column gap-half">
|
||||
<%= form.label :url do %>
|
||||
<strong>Payload URL</strong><br>
|
||||
<p class="margin-none txt-x-small txt-subtle">This is the URL for the app that will receive payloads from Fizzy.</p>
|
||||
<% 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" } %>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-column gap-half">
|
||||
<%= form.label :actions do %>
|
||||
<strong>Events</strong><br>
|
||||
<p class="margin-none txt-x-small txt-subtle">Trigger a call to the Payload URL when these things occur:</p>
|
||||
<% end %>
|
||||
<%= render "webhooks/form/actions", form: form %>
|
||||
</div>
|
||||
|
||||
<%= form.button type: :submit, class: "btn btn--reversed center margin-block-start txt-medium" do %>
|
||||
<span>Update Webhook</span>
|
||||
<%= form.button type: :submit, class: "btn btn--link center txt-medium" do %>
|
||||
<span>Save Changes</span>
|
||||
<% end %>
|
||||
|
||||
<%= link_to "Go back", collection_webhooks_path, data: { form_target: "cancel" }, hidden: true %>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<ul>
|
||||
<ul class="flex flex-column align-start gap-half margin-none unpad">
|
||||
<%= form.collection_check_boxes \
|
||||
:subscribed_actions,
|
||||
Webhook::PERMITTED_ACTIONS,
|
||||
:itself,
|
||||
:humanize do |item| %>
|
||||
<li>
|
||||
<label>
|
||||
<span>
|
||||
<%= item.check_box %>
|
||||
</span>
|
||||
<span><%= item.text %></span>
|
||||
<li class="list-style-none margin-none flex align-center gap">
|
||||
<label class="switch toggler__visible-when-off flex-item-no-shrink txt-x-small">
|
||||
<%= item.check_box(class: "switch__input") %>
|
||||
<span class="switch__btn round"></span>
|
||||
<span class="for-screen-reader"><%= item.text %></span>
|
||||
</label>
|
||||
<span><%= item.text %></span>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
|
||||
@@ -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 %>
|
||||
<span class="overflow-ellipsis">
|
||||
←
|
||||
<strong class="font-black"><%= @collection.name %></strong>
|
||||
</span>
|
||||
<% end %>
|
||||
<div class="header__actions header__actions--start">
|
||||
<%= link_to cards_path(collection_ids: [ @collection ]), class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
|
||||
<span class="overflow-ellipsis">
|
||||
←
|
||||
<strong><%= @collection.name %></strong>
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<h1 class="header__title"><%= @page_title %></h1>
|
||||
|
||||
<div class="header__actions header__actions--end">
|
||||
<%= link_to new_collection_webhook_path, class: "btn" do %>
|
||||
@@ -17,23 +21,28 @@
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<section class="webhooks">
|
||||
<%= 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 %>
|
||||
<h1 class="header__title" style="view-transistion-name: webhooks-title"><%= @page_title %></h1>
|
||||
|
||||
<div>
|
||||
<ul class="flex flex-column gap-half" data-filter-target="list">
|
||||
<%= render partial: "webhooks/webhook", collection: @page.records %>
|
||||
</ul>
|
||||
|
||||
<footer class="">
|
||||
Press <kbd class="kbd">↑</kbd><kbd class="kbd">↓</kbd> to move, <kbd class="kbd">enter</kbd> to visit webhook, <kbd class="kbd">SHIFT+ENTER</kbd> to toggle.
|
||||
</footer>
|
||||
</div>
|
||||
<%= 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? %>
|
||||
<ul class="flex flex-column align-start gap margin-none unpad" data-filter-target="list">
|
||||
<%= render partial: "webhooks/webhook", collection: @page.records %>
|
||||
</ul>
|
||||
<% else %>
|
||||
<p>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.</p>
|
||||
<p>For example, you could create a webhook that posts to a Campfire chat in Basecamp when new cards are added to Fizzy.</p>
|
||||
<%= link_to new_collection_webhook_path, class: "btn btn--link" do %>
|
||||
<%= icon_tag "add" %>
|
||||
<span>Set up a webhook</span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</section>
|
||||
|
||||
<% if @page.records.many? %>
|
||||
<footer class="popup__footer">
|
||||
Press <kbd class="kbd">↑</kbd><kbd class="kbd">↓</kbd> to move, <kbd class="kbd">enter</kbd> to visit webhook, <kbd class="kbd">SHIFT+ENTER</kbd> to toggle.
|
||||
</footer>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
@@ -1,30 +1,48 @@
|
||||
<% @page_title = "Webhooks" %>
|
||||
<% @page_title = "Set up a Webhook" %>
|
||||
|
||||
<% content_for :header do %>
|
||||
<%= render "filters/menu", user_filtering: @user_filtering %>
|
||||
<h1 class="header__title" style="view-transistion-name: webhooks-title"><%= @page_title %></h1>
|
||||
<div class="header__actions header__actions--start">
|
||||
<%= link_to collection_webhooks_path, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
|
||||
<span class="overflow-ellipsis">
|
||||
←
|
||||
<strong>Webhooks</strong>
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<h1 class="header__title"><%= @page_title %></h1>
|
||||
<% end %>
|
||||
|
||||
<article class="panel center" style="--panel-size: 40ch;" style="view-transition-name: <%= dom_id(@webhook) %>">
|
||||
<%= form_with model: @webhook, url: collection_webhooks_path, data: { controller: "form" }, html: { class: "flex flex-column gap align-center justify-starts" } do |form| %>
|
||||
<article class="panel center txt-align-start" style="view-transition-name: <%= dom_id(@webhook) %>">
|
||||
<%= form_with model: @webhook, url: collection_webhooks_path, data: { controller: "form" }, html: { class: "flex flex-column gap" } do |form| %>
|
||||
<h2 class="txt-large margin-none">
|
||||
<%= 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" } %>
|
||||
</h2>
|
||||
|
||||
<%= 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" } %>
|
||||
<div class="flex flex-column gap-half">
|
||||
<%= form.label :url do %>
|
||||
<strong>Payload URL</strong><br>
|
||||
<p class="margin-none txt-x-small txt-subtle">This is the URL for the app that will receive payloads from Fizzy.</p>
|
||||
<% 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" } %>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-column align-start full-width">
|
||||
<%= form.label :actions %>
|
||||
<div class="flex flex-column gap-half">
|
||||
<%= form.label :actions do %>
|
||||
<strong>Events</strong><br>
|
||||
<p class="margin-none txt-x-small txt-subtle">Trigger a call to the Payload URL when these things occur:</p>
|
||||
<% end %>
|
||||
<%= render "webhooks/form/actions", form: form %>
|
||||
</div>
|
||||
|
||||
<%= 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 %>
|
||||
<span>Create Webhook</span>
|
||||
<% end %>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user