From fdf93b2bc036bce294da44e8412d3c2fcfb712d9 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Tue, 17 Dec 2024 10:10:31 -0600 Subject: [PATCH 1/6] Make close and trash more distinct --- app/assets/images/trash.svg | 1 + app/views/comments/edit.html.erb | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) create mode 100644 app/assets/images/trash.svg diff --git a/app/assets/images/trash.svg b/app/assets/images/trash.svg new file mode 100644 index 000000000..fc95dc1a8 --- /dev/null +++ b/app/assets/images/trash.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/views/comments/edit.html.erb b/app/views/comments/edit.html.erb index a4ecf07df..23aa3d499 100644 --- a/app/views/comments/edit.html.erb +++ b/app/views/comments/edit.html.erb @@ -9,13 +9,13 @@ Save <% end %> <%= link_to bucket_bubble_comment_path(@bubble.bucket, @bubble, @comment), class: "btn btn--small", data: { form_target: "cancel" } do %> - <%= image_tag "close.svg", aria: { hidden: true }, size: 16 %> + <%= image_tag "remove-med.svg", aria: { hidden: true }, size: 16 %> Cancel <% end %> <%= tag.button type: :submit, class: "btn btn--small btn--negative flex-item-justify-end", form: dom_id(@comment, :delete_form), data: { turbo_confirm: "Are you sure you want to delete this comment?" } do %> - <%= image_tag "remove.svg", aria: { hidden: true }, size: 16 %> + <%= image_tag "trash.svg", aria: { hidden: true }, size: 16 %> Delete <% end %> From 2c038a57398772324b956c5210dafdba6209b99b Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Tue, 17 Dec 2024 14:06:33 -0600 Subject: [PATCH 2/6] Stub draggable collection size divider --- app/assets/images/drag.svg | 1 + app/assets/stylesheets/bubbles.css | 29 +++++++++++++++++++--------- app/assets/stylesheets/utilities.css | 4 ++-- app/views/bubbles/index.html.erb | 12 ++++++++++++ 4 files changed, 35 insertions(+), 11 deletions(-) create mode 100644 app/assets/images/drag.svg diff --git a/app/assets/images/drag.svg b/app/assets/images/drag.svg new file mode 100644 index 000000000..26b655f04 --- /dev/null +++ b/app/assets/images/drag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css index 608a8d2da..e3cd9d117 100644 --- a/app/assets/stylesheets/bubbles.css +++ b/app/assets/stylesheets/bubbles.css @@ -369,15 +369,6 @@ position: relative; transition: background-color 200ms ease-out; - &:nth-of-type(10)::after { - border-bottom: 1px dashed var(--color-subtle-dark); - block-size: 0; - content: ""; - inline-size: 100%; - inset: auto 0 0 0; - position: absolute; - } - @media (hover: hover) { &:hover { background-color: color(from var(--bubble-color) srgb r g b / 0.15); @@ -396,6 +387,26 @@ } } +.bubbles-list__divider { + --border-color: var(--divider-color); + --border-size: 2px; + --divider-color: var(--color-subtle-dark); + + font-size: 1rem; +} + +.btn--reversed.bubbles-list__handle { + --btn-background: var(--divider-color); + + font-size: 0.9rem; +} + +.bubbles-list__count { + background-color: var(--divider-color); + color: var(--color-ink-reversed); + padding: 0.1em 0.7em; +} + .bubble__title-text { font-weight: 600; flex-grow: 1; diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css index 60de39c8d..6cf59bfed 100644 --- a/app/assets/stylesheets/utilities.css +++ b/app/assets/stylesheets/utilities.css @@ -216,7 +216,7 @@ .separator { border-block: 0; border-inline-end: 0; - border-inline-start: 1px var(--border-style, solid) var(--border-color, currentColor); + border-inline-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, currentColor); display: inline-flex; inline-size: 0; } @@ -224,7 +224,7 @@ .separator--horizontal { block-size: 0; border-block-end: 0; - border-block-start: 1px var(--border-style, solid) var(--border-color, currentColor); + border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, currentColor); border-inline: 0; display: flex; } diff --git a/app/views/bubbles/index.html.erb b/app/views/bubbles/index.html.erb index af61d2e44..277f7684a 100644 --- a/app/views/bubbles/index.html.erb +++ b/app/views/bubbles/index.html.erb @@ -32,6 +32,18 @@
    +
  • + +
    + + Top 10 + +
    + +
    • <%= render partial: "bubbles/list/bubble", collection: @bubbles, cached: true %>
From 43ed808ecff1b2d232c6f2dedf4b41a8fdcbaccb Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Tue, 17 Dec 2024 14:08:12 -0600 Subject: [PATCH 3/6] Indicate draggable element --- app/assets/stylesheets/bubbles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css index e3cd9d117..fc3be96b7 100644 --- a/app/assets/stylesheets/bubbles.css +++ b/app/assets/stylesheets/bubbles.css @@ -399,6 +399,7 @@ --btn-background: var(--divider-color); font-size: 0.9rem; + cursor: grab; } .bubbles-list__count { From bd35da79c3f0ac029b749ea9c1c177c24f56b305 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Tue, 17 Dec 2024 15:58:12 -0600 Subject: [PATCH 4/6] Add button and action to delete a bubble --- app/controllers/bubbles_controller.rb | 7 ++++++- app/views/bubbles/show.html.erb | 8 ++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/app/controllers/bubbles_controller.rb b/app/controllers/bubbles_controller.rb index 974c9aec9..920b8b181 100644 --- a/app/controllers/bubbles_controller.rb +++ b/app/controllers/bubbles_controller.rb @@ -4,7 +4,7 @@ class BubblesController < ApplicationController skip_before_action :set_bucket, only: :index before_action :set_filter, only: :index - before_action :set_bubble, only: %i[ show edit update ] + before_action :set_bubble, only: %i[ show edit update destroy ] def index @bubbles = @filter.bubbles @@ -22,6 +22,11 @@ class BubblesController < ApplicationController def edit end + def destroy + @bubble.destroy! + redirect_to bubbles_path, notice: "Bubble deleted" + end + def update @bubble.update! bubble_params redirect_to @bubble diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb index 7f0f2793e..1b48b031b 100644 --- a/app/views/bubbles/show.html.erb +++ b/app/views/bubbles/show.html.erb @@ -56,6 +56,14 @@ <%= image_tag "picture-double.svg", aria: { hidden: true }, size: 24 %> I've seen this + + <%= button_to bucket_bubble_path(@bubble.bucket, @bubble), + method: :delete, + class: "btn full-width justify-start borderless", + data: { turbo_confirm: "Are you sure you want to delete this bubble?" } do %> + <%= image_tag "trash.svg", aria: { hidden: true }, size: 24 %> + Delete bubble + <% end %> From bb4ee3cb653ff1f3a48ba4e6c3bc845e4bf94285 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Tue, 17 Dec 2024 16:08:01 -0600 Subject: [PATCH 5/6] Fix for Safari which doesn't support `field-sizing: content` --- app/assets/stylesheets/bubbles.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css index fc3be96b7..91b65091e 100644 --- a/app/assets/stylesheets/bubbles.css +++ b/app/assets/stylesheets/bubbles.css @@ -81,6 +81,7 @@ border-radius: var(--bubble-shape); display: flex; font-size: 6cqi; + inline-size: min-content; inset: 70cqi 7cqi auto auto; min-inline-size: 4.5ch; padding: 0; @@ -104,10 +105,13 @@ .boost__input { color: var(--bubble-color); - field-sizing: content; font-weight: 800; padding: 0; text-align: center; + + @supports (field-sizing: content) { + field-sizing: content; + } } &.boosting { From 4c9779a0e907a23fc8cdfe01c569ad54ebbfec9b Mon Sep 17 00:00:00 2001 From: Jose Farias Date: Wed, 18 Dec 2024 16:25:57 -0600 Subject: [PATCH 6/6] Add hotwire-spark --- Gemfile | 4 ++++ Gemfile.lock | 21 +++++++++++++++++++++ 2 files changed, 25 insertions(+) diff --git a/Gemfile b/Gemfile index 785e0dac9..63067f44b 100644 --- a/Gemfile +++ b/Gemfile @@ -30,6 +30,10 @@ group :development, :test do gem "rubocop-rails-omakase", require: false end +group :development do + gem "hotwire-spark" +end + group :test do gem "capybara" gem "selenium-webdriver" diff --git a/Gemfile.lock b/Gemfile.lock index b53b26b78..73ede311a 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -142,8 +142,22 @@ GEM reline (>= 0.3.8) drb (2.2.1) erubi (1.13.0) + ffi (1.17.0-aarch64-linux-gnu) + ffi (1.17.0-aarch64-linux-musl) + ffi (1.17.0-arm-linux-gnu) + ffi (1.17.0-arm-linux-musl) + ffi (1.17.0-arm64-darwin) + ffi (1.17.0-x86-linux-gnu) + ffi (1.17.0-x86-linux-musl) + ffi (1.17.0-x86_64-darwin) + ffi (1.17.0-x86_64-linux-gnu) + ffi (1.17.0-x86_64-linux-musl) globalid (1.2.1) activesupport (>= 6.1) + hotwire-spark (0.1.3) + listen + rails (>= 8.0.0) + zeitwerk i18n (1.14.6) concurrent-ruby (~> 1.0) importmap-rails (2.0.3) @@ -156,6 +170,9 @@ GEM reline (>= 0.4.2) json (2.9.0) language_server-protocol (3.17.0.3) + listen (3.9.0) + rb-fsevent (~> 0.10, >= 0.10.3) + rb-inotify (~> 0.9, >= 0.9.10) logger (1.6.2) loofah (2.23.1) crass (~> 1.0.2) @@ -227,6 +244,9 @@ GEM nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0) rainbow (3.1.1) rake (13.2.1) + rb-fsevent (0.11.2) + rb-inotify (0.11.1) + ffi (~> 1.0) rdoc (6.8.1) psych (>= 4.0.0) regexp_parser (2.9.3) @@ -340,6 +360,7 @@ DEPENDENCIES brakeman capybara debug + hotwire-spark hotwire_combobox! importmap-rails propshaft