QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-04-07 14:31:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: New tag creation UI (#1014)

Browse Source 
* feat: Update tag creation UI

* fix: remove unused target

* fix: remove connect/disconnect functions

* fix: remove unnecessary target
This commit is contained in:
Alessio Cappa
2026-02-19 19:55:10 +01:00
committed by GitHub
parent cfadff641f
commit 13c2335a6a
5 changed files with 37 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/javascript/controllers/color_badge_controller.js Normal file
View File

@@ -0,0 +1,18 @@
import { Controller } from "@hotwired/stimulus";
// Connects to data-controller="color-badge"
// Used by the transaction merchant form to show a preview of what the avatar will look like
export default class extends Controller {
static targets = ["name", "badge"];
handleNameChange = (e) => {
this.nameTarget.textContent = e.currentTarget.value || "?";
};
handleColorChange(e) {
const color = e.currentTarget.value;
this.badgeTarget.style.backgroundColor = `color-mix(in oklab, ${color} 10%, transparent)`;
this.badgeTarget.style.borderColor = `color-mix(in oklab, ${color} 10%, transparent)`;
this.badgeTarget.style.color = color;
}
}

10
app/views/shared/_color_badge.html.erb Normal file
View File

@@ -0,0 +1,10 @@
<%# locals: (name: nil, color: "#000") %>
<% background_color = "color-mix(in oklab, #{color} 10%, transparent)" %>
<% border_color = "color-mix(in oklab, #{color} 10%, transparent)" %>
<span data-color-badge-target="badge"
class="border text-sm font-medium px-3 py-1 rounded-full inline-flex items-center gap-2"
style="background-color: <%= background_color %>; border-color: <%= border_color %>; color: <%= color %>">
<span class="size-1.5 rounded-full" style="background-color: currentColor;"></span>
<span data-color-badge-target="name"><%= name || "?" %></span>
</span>

8
app/views/tags/_badge.html.erb
View File

@@ -1,10 +1,10 @@
<%# locals: (tag:) %>
<% tag ||= null_category %>
<span class="border text-sm font-medium px-2.5 py-1 rounded-full content-center"
<span class="border text-sm font-medium px-3 py-1 rounded-full inline-flex items-center gap-2"
style="
background-color: color-mix(in srgb, <%= tag.color %> 5%, white);
border-color: color-mix(in srgb, <%= tag.color %> 10%, white);
background-color: color-mix(in oklab, <%= tag.color %> 10%, transparent);
border-color: color-mix(in oklab, <%= tag.color %> 10%, transparent);
color: <%= tag.color %>;">
<span class="size-1.5 rounded-full" style="background-color: <%= tag.color %>;"></span>
<%= tag.name %>
</span>

8
app/views/tags/_form.html.erb
View File

@@ -1,19 +1,19 @@
<div data-controller="color-avatar">
<div data-controller="color-badge">
<%= styled_form_with model: tag, class: "space-y-4", data: { turbo_frame: :_top } do |f| %>
<section class="space-y-4">
<div class="w-fit m-auto mb-4">
<%= render partial: "shared/color_avatar", locals: { name: tag.name, color: tag.color } %>
<%= render partial: "shared/color_badge", locals: { name: tag.name, color: tag.color } %>
</div>
<div class="flex gap-2 items-center justify-center">
<% Tag::COLORS.each do |color| %>
<label class="relative">
<%= f.radio_button :color, color, class: "sr-only peer", data: { action: "change->color-avatar#handleColorChange" } %>
<%= f.radio_button :color, color, class: "sr-only peer", data: { action: "change->color-badge#handleColorChange" } %>
<div class="w-6 h-6 rounded-full cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-blue-500" style="background-color: <%= color %>"></div>
</label>
<% end %>
</div>
<div class="relative flex items-center border border-secondary rounded-lg text-subdued">
<%= f.text_field :name, placeholder: t(".placeholder"), autofocus: true, required: true, data: { color_avatar_target: "name" } %>
<%= f.text_field :name, placeholder: t(".placeholder"), autofocus: true, required: true, data: { action: "input->color-badge#handleNameChange" } %>
</div>
</section>

3
app/views/tags/_tag.html.erb
View File

@@ -2,9 +2,8 @@
<div id="<%= dom_id(tag) %>" class="flex justify-between items-center p-4 bg-container hover:bg-surface-hover">
<div class="flex w-full items-center gap-2.5">
<%= render partial: "shared/color_avatar", locals: { name: tag.name, color: tag.color } %>
<p class="text-primary text-sm truncate">
<%= tag.name %>
<%= render partial: "tags/badge", locals: { tag: tag } %>
</p>
</div>
<div class="justify-self-end">