Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 23:49:45 -05:00
Code Issues Activity

✨ Fixing show color hex or name on hover

Browse source
This commit is contained in:
Alejandro Alonso 2022-01-13 13:32:56 +01:00 • committed by Alonso Torres
parent a86e3a8636
commit a4c45942c9
3 changed files with 43 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
frontend/resources/styles/main/partials/color-bullet.scss
View file

@ -6,7 +6,6 @@
.color-cell {
.color-bullet {
background-color: transparent;
// Creates strange artifacts
border: 2px solid $color-gray-60;
// box-shadow: 0 0 0 2px $color-gray-60;
@ -102,14 +101,28 @@ ul.palette-menu .color-bullet {
}
}
.color-bullet-left {
.color-bullet.is-library-color .color-bullet-left,
.selected-colors .color-bullet .color-bullet-left {
border-radius: 10px 0 0 10px;
}
.color-bullet-right {
.color-bullet.is-library-color .color-bullet-right,
.selected-colors .color-bullet .color-bullet-right {
border-radius: 0 10px 10px 0;
}
.color-palette .color-bullet .color-bullet-left {
border-radius: 25px 0 0 25px;
}
.color-palette .color-bullet .color-bullet-right {
border-radius: 0 25px 25px 0;
}
.color-data .color-bullet.is-library-color {
border-radius: 50%;
}
.color-data .color-bullet.multiple {
background: transparent;
@ -118,12 +131,7 @@ ul.palette-menu .color-bullet {
}
}
.color-data .color-bullet.is-library-color {
border-radius: 50%;
}
.color-data .color-bullet {
background-color: $color-gray-30;
border: 1px solid $color-gray-30;
border-radius: $br-small;
cursor: pointer;
@ -161,11 +169,6 @@ ul.palette-menu .color-bullet {
}
}
.color-data .color-bullet .color-bullet-left,
.color-data .color-bullet .color-bullet-right {
border-radius: unset;
}
.colorpicker-content .libraries .selected-colors .color-bullet {
grid-area: auto;
margin-bottom: 0.25rem;

31
frontend/src/app/main/ui/components/color_bullet.cljs
View file

@ -10,26 +10,29 @@
[app.util.i18n :as i18n :refer [tr]]
[rumext.alpha :as mf]))
(mf/defc color-bullet [{:keys [color on-click]}]
(if (uc/multiple? color)
[:div.color-bullet.multiple {:on-click #(when on-click (on-click %))}]
;; No multiple selection
(let [color (if (string? color) {:color color :opacity 1} color)]
[:div.color-bullet.tooltip.tooltip-right {:class (when (:id color) "is-library-color")
:on-click #(when on-click (on-click %))
:alt (or (:name color) (:color color))}
(when (not (:gradient color))
[:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}])
[:div.color-bullet-right {:style {:background (uc/color->background color)}}]])))
(defn gradient-type->string [type]
(case type
:linear (tr "workspace.gradients.linear")
:radial (tr "workspace.gradients.radial")
(str "???" type)))
(mf/defc color-bullet [{:keys [color on-click]}]
(if (uc/multiple? color)
[:div.color-bullet.multiple {:on-click #(when on-click (on-click %))}]
;; No multiple selection
(let [color (if (string? color) {:color color :opacity 1} color)
background (if (:gradient color) (uc/color->background color) "auto")]
[:div.color-bullet.tooltip.tooltip-right {:class (if (:id color) "is-library-color" "is-not-library-color")
:on-click #(when on-click (on-click %))
:alt (or (:name color) (:color color) (gradient-type->string (:type (:gradient color))))
:style {:background background}}
(when (not(:gradient color))
[:*
[:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}]
[:div.color-bullet-right {:style {:background (uc/color->background color)}}]]
)])))
(mf/defc color-name [{:keys [color size on-click on-double-click]}]
(let [color (if (string? color) {:color color :opacity 1} color)
{:keys [name color gradient]} color

17
frontend/src/app/main/ui/workspace/colorpicker.cljs
View file

@ -133,7 +133,8 @@
handle-change-color
(fn [changes]
(let [editing-stop (:editing-stop @state)]
(let [editing-stop (:editing-stop @state)
_ (println "handle-change-color" changes)]
(swap! state #(cond-> %
true (update :current-color merge changes)
editing-stop (update-in [:stops editing-stop] merge changes)))
@ -158,12 +159,14 @@
on-select-library-color
(fn [color]
(let [editing-stop (:editing-stop @state)
is-gradient? (some? (:gradient color))]
(if (and (some? editing-stop) (not is-gradient?))
(handle-change-color (color->components (:color color) (:opacity color)))
(do (reset! state (data->state color))
(on-change color)))))
;; TODO: FIXME
(on-change color))
;; (let [editing-stop (:editing-stop @state)
;; is-gradient? (some? (:gradient color))]
;; (if (and (some? editing-stop) (not is-gradient?))
;; (handle-change-color (color->components (:color color) (:opacity color)))
;; (do (reset! state (data->state color))
;; (on-change color)))))
on-add-library-color
(fn [_]