bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove Hotwire Combobox, adjust related styles

Browse Source
This commit is contained in:
Jason Zimdars
2025-02-10 17:01:42 -06:00
parent e3cdd863e1
commit 8ee1e670f9
10 changed files with 20 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Gemfile
-1
View File
@@ -9,7 +9,6 @@ gem "importmap-rails"
gem "propshaft"
gem "stimulus-rails"
gem "turbo-rails"
gem "hotwire_combobox", github: "josefarias/hotwire_combobox", branch: :main
# Deployment and drivers
gem "bootsnap", require: false
Gemfile.lock
-15
View File
@@ -1,14 +1,3 @@
GIT
remote: https://github.com/josefarias/hotwire_combobox.git
revision: c280da0f4b61386729959a28f32fbed728a0c773
branch: main
specs:
hotwire_combobox (0.3.2)
platform_agent (>= 1.0.1)
rails (>= 7.0.7.2)
stimulus-rails (>= 1.2)
turbo-rails (>= 1.2)
GIT
remote: https://github.com/rails/rails.git
revision: 5520bd835e3724ffafe3f719f9aafe951567f2f3
@@ -252,9 +241,6 @@ GEM
parser (3.3.6.0)
ast (~> 2.4.1)
racc
platform_agent (1.0.1)
activesupport (>= 5.2.0)
useragent (~> 0.16.3)
propshaft (1.1.0)
actionpack (>= 7.0.0)
activesupport (>= 7.0.0)
@@ -428,7 +414,6 @@ DEPENDENCIES
debug
geared_pagination (~> 1.2)
hotwire-spark
hotwire_combobox!
importmap-rails
jbuilder
kamal
app/assets/stylesheets/comboboxes.css
-50
View File
@@ -1,50 +0,0 @@
:root {
--hw-option-bg-color: var(--color-ink-reversed);
--hw-active-bg-color: var(--color-selected);
--hw-border-color: var(--color-subtle-dark);
--hw-border-radius: 1em;
}
.hw-combobox {
turbo-frame {
display: inline;
}
}
.hw-combobox__input {
--hover-size: 0;
min-inline-size: 15ch;
padding: 0 calc(var(--hw-handle-offset-right) * 2) 0 0;
}
.hw-combobox__main__wrapper {
--hw-combobox-width: auto;
accent-color: var(--input-accent-color, var(--color-ink));
background-color: var(--input-background, transparent);
border-radius: var(--input-border-radius, 0.5em);
border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-subtle-dark));
color: var(--input-color, var(--color-ink));
font-size: max(16px, 1em);
line-height: inherit;
padding: var(--input-padding, 0.2em 0.6em);
}
.combox-popup {
--panel-border-color: var(--bubble-color);
--panel-border-radius: 2em;
--panel-border-size: 2px;
--panel-padding: 0.4em 1em;
--panel-size: auto;
inline-size: auto !important;
inset: -2px auto auto 0;
max-inline-size: var(--panel-size) !important;
position: absolute;
z-index: 2;
&[open] {
display: flex;
}
}
app/assets/stylesheets/popup.css
+14
View File
@@ -0,0 +1,14 @@
.popup {
--panel-border-radius: 2em;
--panel-padding: 0.4em 1em;
--panel-size: auto;
inset: 0 auto auto 0;
max-inline-size: 30ch;
position: absolute;
z-index: 2;
&[open] {
display: flex;
}
}
app/helpers/combobox_helper.rb
-10
View File
@@ -1,10 +0,0 @@
module ComboboxHelper
# `hw_combobox_tag` overrides HotwireCombobox's helper to provide default options.
def hw_combobox_tag(...)
super do |combobox|
combobox.customize_main_wrapper class: "btn"
combobox.customize_input data: { autofocus_target: "element" }
yield combobox if block_given?
end
end
end
app/models/tag.rb
-4
View File
@@ -9,8 +9,4 @@ class Tag < ApplicationRecord
def hashtag
"#" + title
end
def to_combobox_display
title
end
end
app/models/user.rb
-4
View File
@@ -46,10 +46,6 @@ class User < ApplicationRecord
other != self
end
def to_combobox_display
name
end
private
def deactived_email_address
email_address.sub(/@/, "-deactivated-#{SecureRandom.uuid}@")
app/views/bubbles/sidebar/_assignment.html.erb
+3 -3
View File
@@ -4,12 +4,12 @@
<span>Assign</span>
</button>
<dialog class="combox-popup panel flex-column align-start gap-half fill-white shadow" style="--panel-border-radius: 1em;" data-dialog-target="dialog">
<dialog class="popup panel flex-column align-start gap-half fill-white shadow" style="--panel-border-radius: 1em;" data-dialog-target="dialog">
<strong>Assign this to…</strong>
<%= form_with url: bucket_bubble_assignment_toggles_path(bubble.bucket, bubble), class: "flex flex-column gap-half full-width", data: { controller: "form" } do |form| %>
<% users.sort_by(&:name).each do |user| %>
<div class="btn full-width borderless justify-start overflow-ellipsis" style="--btn-border-radius: 0.3em;">
<div class="btn full-width borderless justify-start" style="--btn-border-radius: 0.3em;">
<%= form.check_box "assignee_id[]", {
checked: bubble.assigned_to?(user),
data: { action: "change->form#submit" },
@@ -17,7 +17,7 @@
include_hidden: false,
}, user.id %>
<%= form.label "assignee_id[]", user.name, for: dom_id(user, :assign) %>
<%= form.label "assignee_id[]", user.name, for: dom_id(user, :assign), class: "overflow-ellipsis" %>
</div>
<% end %>
<% end %>
app/views/bubbles/sidebar/_tag.html.erb
+3 -3
View File
@@ -4,7 +4,7 @@
<span>Tag</span>
</button>
<dialog class="combox-popup panel flex-column align-start gap-half fill-white shadow" style="--panel-border-radius: 1em;" data-dialog-target="dialog">
<dialog class="popup panel flex-column align-start gap-half fill-white shadow" style="--panel-border-radius: 1em;" data-dialog-target="dialog">
<strong>Tags this…</strong>
<%= form_with url: bucket_bubble_tagging_toggles_path(bubble.bucket, bubble), class: "flex gap-half align-centerfull-width" do |form| %>
@@ -19,7 +19,7 @@
<%= form_with url: bucket_bubble_tagging_toggles_path(bubble.bucket, bubble), class: "flex flex-column gap-half full-width", data: { controller: "form" } do |form| %>
<% tags.sort_by(&:hashtag).each do |tag| %>
<div class="btn full-width borderless justify-start overflow-ellipsis" style="--btn-border-radius: 0.3em;">
<div class="btn full-width borderless justify-start" style="--btn-border-radius: 0.3em;">
<%= form.check_box "tag_id[]", {
checked: bubble.tagged_with?(tag),
data: { action: "change->form#submit" },
@@ -27,7 +27,7 @@
include_hidden: false,
}, tag.id %>
<%= form.label "tag_id[]", tag.hashtag, for: dom_id(tag, :tag) %>
<%= form.label "tag_id[]", tag.hashtag, for: dom_id(tag, :tag), class: "overflow-ellipsis" %>
</div>
<% end %>
<% end %>
app/views/layouts/application.html.erb
-1
View File
@@ -12,7 +12,6 @@
<%= csp_meta_tag %>
<%= tag.meta name: "current-user-id", content: Current.user.id if Current.user %>
<%= combobox_style_tag %>
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>