diff --git a/app/assets/images/art.svg b/app/assets/images/art.svg
new file mode 100644
index 000000000..f2dcba653
--- /dev/null
+++ b/app/assets/images/art.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 31f904638..31021bf8a 100644
--- a/app/assets/stylesheets/bubbles.css
+++ b/app/assets/stylesheets/bubbles.css
@@ -147,10 +147,20 @@
}
}
+ &.bubble__color {
+ cursor: pointer;
+ inset: 10cqi auto auto 0cqi;
+ padding: 0.4em;
+
+ .windshield & {
+ display: none;
+ }
+ }
+
&.bubble__date {
aspect-ratio: 1;
cursor: pointer;
- inset: 2cqi 2cqi auto auto;
+ inset: 2cqb 2cqi auto auto;
label {
display: grid;
@@ -214,6 +224,63 @@
}
}
+.bubble__color-picker {
+ border: 0;
+ display: none;
+ margin-block-start: -6.5em;
+
+ &[open] {
+ display: block;
+ }
+
+ .bubble__color-picker__color {
+ --btn-size: 2em;
+ --rotation: 0deg;
+
+ block-size: 4.33em;
+ inset: 0 auto auto 0;
+ position: absolute;
+ transform: rotate(var(--rotation));
+ transform-origin: bottom center;
+
+ .btn {
+ transform: rotate(calc(var(--rotation) * -1));
+ }
+
+ &:nth-of-type(2) {
+ --rotation: 40deg;
+ }
+
+ &:nth-of-type(3) {
+ --rotation: 80deg;
+ }
+
+ &:nth-of-type(4) {
+ --rotation: 120deg;
+ }
+
+ &:nth-of-type(5) {
+ --rotation: 160deg;
+ }
+
+ &:nth-of-type(6) {
+ --rotation: 200deg;
+ }
+
+ &:nth-of-type(7) {
+ --rotation: 240deg;
+ }
+
+ &:nth-of-type(8) {
+ --rotation: 280deg;
+ }
+
+ &:nth-of-type(9) {
+ --rotation: -40deg;
+ }
+ }
+}
+
.bubble__image {
mask-image: url(blob.svg);
mask-position: center;
diff --git a/app/assets/stylesheets/popover.css b/app/assets/stylesheets/popover.css
deleted file mode 100644
index cc72d9c07..000000000
--- a/app/assets/stylesheets/popover.css
+++ /dev/null
@@ -1,44 +0,0 @@
-:is([popover]) {
- --backdrop-speed: 150ms;
- --speed: 150ms;
-
- border: 0;
- opacity: 0;
- transform: translateY(50%);
- transform-origin: bottom center;
- transition:
- display var(--speed) allow-discrete,
- opacity var(--speed),
- overlay var(--speed) allow-discrete,
- transform var(--speed);
-
- &::backdrop {
- background-color: var(--color-ink);
- opacity: 0;
- transform: translateY(0);
- transition:
- display var(--backdrop-speed) allow-discrete,
- opacity var(--backdrop-speed),
- overlay var(--backdrop-speed) allow-discrete;
- }
-
- &:popover-open {
- opacity: 1;
- transform: translateY(0);
-
- &::backdrop {
- opacity: 0.5;
- }
- }
-
- @starting-style {
- &:popover-open {
- opacity: 0;
- transform: translateY(50%);
- }
-
- &:popover-open::backdrop {
- opacity: 0;
- }
- }
-}
diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js
index 1949a1124..dce37902b 100644
--- a/app/javascript/controllers/dialog_controller.js
+++ b/app/javascript/controllers/dialog_controller.js
@@ -4,6 +4,6 @@ export default class extends Controller {
static targets = [ "dialog" ]
open() {
- this.dialogTarget.showModal()
+ this.dialogTarget.show()
}
}
diff --git a/app/models/bubble.rb b/app/models/bubble.rb
index 6f80f2722..a6841431b 100644
--- a/app/models/bubble.rb
+++ b/app/models/bubble.rb
@@ -10,7 +10,7 @@ class Bubble < ApplicationRecord
has_one_attached :image, dependent: :purge_later
enum :color, %w[
- #AF2E1B #CC6324 #3B4B59 #BFA07A #ED8008 #ED3F1C #BF1B1B #736B1E #D07B53
- #736356 #AD1D1D #BF7C2A #C09C6F #698F9C #7C956B #5D618F #3B3633 #67695E
+ #BF1B1B #ED3F1C #ED8008 #7C956B
+ #698F9C #3B4B59 #5D618F #3B3633 #67695E
].index_by(&:itself), suffix: true, default: "#698F9C"
end
diff --git a/app/views/bubbles/_bubble.html.erb b/app/views/bubbles/_bubble.html.erb
index a690d64f0..7639f07d5 100644
--- a/app/views/bubbles/_bubble.html.erb
+++ b/app/views/bubbles/_bubble.html.erb
@@ -15,6 +15,7 @@
<% end %>
<%= render "bubbles/boosts", bubble: bubble %>
+ <%= render "bubbles/color", bubble: bubble %>
<%= render "bubbles/date", bubble: bubble %>
<%= render "bubbles/image", bubble: bubble %>
<%= render "bubbles/tags", bubble: bubble %>
diff --git a/app/views/bubbles/_color.html.erb b/app/views/bubbles/_color.html.erb
new file mode 100644
index 000000000..671320780
--- /dev/null
+++ b/app/views/bubbles/_color.html.erb
@@ -0,0 +1,20 @@
+