mirror of
https://github.com/penpot/penpot.git
synced 2025-04-16 00:41:25 -05:00
✨ Styles changes to color picker
This commit is contained in:
alonso.torres
parent
69fb1426d4
commit
7d7008d405
17 changed files with 361 additions and 244 deletions
|
|
@ -56,31 +56,34 @@
|
|||
(<= % max-safe-int)))
|
||||
|
||||
|
||||
(s/def :internal.page.gradient.stop/color ::string)
|
||||
(s/def :internal.page.gradient.stop/opacity ::safe-number)
|
||||
(s/def :internal.page.gradient.stop/offset ::safe-number)
|
||||
|
||||
(s/def :internal.page.gradient/start-x ::safe-number)
|
||||
(s/def :internal.page.gradient/start-y ::safe-number)
|
||||
(s/def :internal.page.gradient/end-x ::safe-number)
|
||||
(s/def :internal.page.gradient/end-y ::safe-number)
|
||||
(s/def :internal.page.gradient/width ::safe-number)
|
||||
(s/def :internal.gradient.stop/color ::string)
|
||||
(s/def :internal.gradient.stop/opacity ::safe-number)
|
||||
(s/def :internal.gradient.stop/offset ::safe-number)
|
||||
|
||||
(s/def :internal.page.gradient/stop
|
||||
(s/keys :req-un [:internal.page.gradient.stop/color
|
||||
:internal.page.gradient.stop/opacity
|
||||
:internal.page.gradient.stop/offset]))
|
||||
(s/def :internal.gradient/type #{:linear :radial})
|
||||
(s/def :internal.gradient/start-x ::safe-number)
|
||||
(s/def :internal.gradient/start-y ::safe-number)
|
||||
(s/def :internal.gradient/end-x ::safe-number)
|
||||
(s/def :internal.gradient/end-y ::safe-number)
|
||||
(s/def :internal.gradient/width ::safe-number)
|
||||
|
||||
(s/def :internal.page.gradient/stops
|
||||
(s/map-of ::safe-number :internal.page.gradient/stop))
|
||||
(s/def :internal.gradient/stop
|
||||
(s/keys :req-un [:internal.gradient.stop/color
|
||||
:internal.gradient.stop/opacity
|
||||
:internal.gradient.stop/offset]))
|
||||
|
||||
(s/def :internal.gradient/stops
|
||||
(s/coll-of :internal.gradient/stop :kind vector?))
|
||||
|
||||
(s/def ::gradient
|
||||
(s/keys :req-un [:internal.page.gradient/start-x
|
||||
:internal.page.gradient/start-y
|
||||
:internal.page.gradient/end-x
|
||||
:internal.page.gradient/end-y
|
||||
:internal.page.gradient/width
|
||||
:internal.page.gradient/stops]))
|
||||
(s/keys :req-un [:internal.gradient/type
|
||||
:internal.gradient/start-x
|
||||
:internal.gradient/start-y
|
||||
:internal.gradient/end-x
|
||||
:internal.gradient/end-y
|
||||
:internal.gradient/width
|
||||
:internal.gradient/stops]))
|
||||
|
||||
;; Page Options
|
||||
(s/def :internal.page.grid.color/value string?)
|
||||
|
|
@ -292,13 +295,26 @@
|
|||
:internal.page/options
|
||||
:internal.page/objects]))
|
||||
|
||||
|
||||
(s/def :internal.color/name ::string)
|
||||
(s/def :internal.color/value ::string)
|
||||
(s/def :internal.color/color ::string)
|
||||
(s/def :internal.color/opacity ::safe-number)
|
||||
(s/def :internal.color/gradient ::gradient)
|
||||
|
||||
(s/def ::color
|
||||
(s/keys :req-un [::id
|
||||
:internal.color/name
|
||||
:internal.color/value]))
|
||||
:internal.color/name]
|
||||
:opt-un [:internal.color/value
|
||||
:internal.color/color
|
||||
:internal.color/opacity
|
||||
:internal.color/gradient]))
|
||||
|
||||
(s/def ::recent-color
|
||||
(s/keys :opt-un [:internal.color/value
|
||||
:internal.color/color
|
||||
:internal.color/opacity
|
||||
:internal.color/gradient]))
|
||||
|
||||
(s/def :internal.media-object/name ::string)
|
||||
(s/def :internal.media-object/path ::string)
|
||||
|
|
@ -324,7 +340,7 @@
|
|||
(s/map-of ::uuid ::color))
|
||||
|
||||
(s/def :internal.file/recent-colors
|
||||
(s/coll-of ::string :kind vector?))
|
||||
(s/coll-of ::recent-color :kind vector?))
|
||||
|
||||
(s/def :internal.typography/id ::id)
|
||||
(s/def :internal.typography/name ::string)
|
||||
|
|
@ -438,8 +454,10 @@
|
|||
(defmethod change-spec :del-color [_]
|
||||
(s/keys :req-un [::id]))
|
||||
|
||||
(s/def :internal.changes.add-recent-color/color ::recent-color)
|
||||
|
||||
(defmethod change-spec :add-recent-color [_]
|
||||
(s/keys :req-un [:recent-color/color]))
|
||||
(s/keys :req-un [:internal.changes.add-recent-color/color]))
|
||||
|
||||
(s/def :internal.changes.media/object ::media-object)
|
||||
|
||||
|
|
|
|||
|
|
@ -78,3 +78,4 @@
|
|||
@import 'main/partials/user-settings';
|
||||
@import 'main/partials/workspace';
|
||||
@import 'main/partials/workspace-header';
|
||||
@import 'main/partials/color-bullet';
|
||||
|
|
|
|||
173
frontend/resources/styles/main/partials/color-bullet.scss
Normal file
173
frontend/resources/styles/main/partials/color-bullet.scss
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
// defined by the Mozilla Public License, v. 2.0.
|
||||
//
|
||||
// Copyright (c) 2020 UXBOX Labs SL
|
||||
|
||||
.color-cell {
|
||||
.color-bullet {
|
||||
background-color: $color-white;
|
||||
// Creates strange artifacts
|
||||
border: 2px solid $color-gray-60;
|
||||
// box-shadow: 0 0 0 2px $color-gray-60;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.cell-big .color-bullet {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
&.cell-small .color-bullet {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.color-bullet.color-big {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.color-cell.current {
|
||||
.color-bullet {
|
||||
border-color: $color-gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
ul.palette-menu .color-bullet {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid $color-gray-10;
|
||||
margin-right: 5px;
|
||||
background-size: 8px;
|
||||
}
|
||||
.color-cell.add-color .color-bullet {
|
||||
align-items: center;
|
||||
background-color: $color-gray-50;
|
||||
border: 3px dashed $color-gray-10;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
padding: .6rem;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-10;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.colorpicker-content .color-bullet {
|
||||
grid-area: color;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: rgba(var(--color));
|
||||
border-radius: 12px;
|
||||
border: 1px solid $color-gray-10;
|
||||
background-size: 8px;
|
||||
}
|
||||
|
||||
.asset-group .group-list-item .color-bullet {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
margin-right: $x-small;
|
||||
}
|
||||
|
||||
.color-cell.add-color:hover .color-bullet {
|
||||
border-color: $color-gray-30;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
}
|
||||
}
|
||||
|
||||
.color-bullet {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center;
|
||||
|
||||
& > * {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.color-data .color-bullet {
|
||||
background-color: $color-gray-30;
|
||||
border: 1px solid $color-gray-30;
|
||||
border-radius: $br-small;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $color-gray-10;
|
||||
flex-shrink: 0;
|
||||
height: 20px;
|
||||
margin: 5px 4px 0 0;
|
||||
width: 20px;
|
||||
|
||||
&.color-name {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&.palette-th {
|
||||
align-items: center;
|
||||
border: 1px solid $color-gray-30;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $color-primary;
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.colorpicker-content .libraries .selected-colors .color-bullet {
|
||||
grid-area: auto;
|
||||
margin-bottom: 0.25rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
|
||||
&.button {
|
||||
background: $color-white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.button svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
fill: $color-gray-30;
|
||||
}
|
||||
|
||||
&.plus-button svg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
fill: $color-black;
|
||||
}
|
||||
}
|
||||
|
|
@ -123,7 +123,7 @@
|
|||
display: flex;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 4.8rem;
|
||||
height: 5rem;
|
||||
padding: 0.25rem;
|
||||
|
||||
&.size-small {
|
||||
|
|
@ -156,28 +156,6 @@
|
|||
flex-basis: 52px;
|
||||
}
|
||||
|
||||
.color {
|
||||
background-color: $color-gray-10;
|
||||
border: 2px solid $color-gray-60;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&.cell-big .color {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
&.cell-small .color {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.color.color-big {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.color-text {
|
||||
color: $color-gray-20;
|
||||
font-size: $fs12;
|
||||
|
|
@ -186,11 +164,9 @@
|
|||
text-overflow: ellipsis;
|
||||
width: 66px;
|
||||
text-align: center;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
&.current {
|
||||
.color {
|
||||
border-color: $color-gray-50;
|
||||
}
|
||||
.color-text {
|
||||
color: $color-gray-50;
|
||||
font-weight: bold;
|
||||
|
|
@ -217,31 +193,11 @@
|
|||
}
|
||||
&.add-color {
|
||||
margin-left: 1.5rem;
|
||||
.color {
|
||||
align-items: center;
|
||||
background-color: $color-gray-50;
|
||||
border: 3px dashed $color-gray-10;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
padding: .6rem;
|
||||
svg {
|
||||
fill: $color-gray-10;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.color-text {
|
||||
font-weight: bold;
|
||||
}
|
||||
&:hover {
|
||||
.color {
|
||||
border-color: $color-gray-30;
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
}
|
||||
}
|
||||
.color-text {
|
||||
color: $color-gray-40;
|
||||
}
|
||||
|
|
@ -336,12 +292,5 @@ ul.palette-menu {
|
|||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.color-bullet {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid $color-gray-10;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -241,15 +241,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.color-bullet {
|
||||
grid-area: color;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: rgba(var(--color));
|
||||
border-radius: 12px;
|
||||
border: 1px solid $color-gray-10;
|
||||
}
|
||||
|
||||
.shade-selector {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
|
|
@ -340,34 +331,6 @@
|
|||
content: "";
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.selected-colors .color-bullet {
|
||||
grid-area: auto;
|
||||
margin-bottom: 0.25rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
|
||||
&.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.button svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
fill: $color-gray-30;
|
||||
}
|
||||
|
||||
&.plus-button svg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
fill: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
|
|
|
|||
|
|
@ -241,13 +241,6 @@
|
|||
color: $color-white;
|
||||
cursor: pointer;
|
||||
|
||||
& .color-block {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
margin-right: $x-small;
|
||||
}
|
||||
|
||||
& span {
|
||||
margin-left: $x-small;
|
||||
color: $color-gray-30;
|
||||
|
|
|
|||
|
|
@ -467,47 +467,6 @@
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.color-th {
|
||||
background-color: $color-gray-30;
|
||||
border: 1px solid $color-gray-30;
|
||||
border-radius: $br-small;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $color-gray-10;
|
||||
flex-shrink: 0;
|
||||
height: 20px;
|
||||
margin: 5px 4px 0 0;
|
||||
width: 20px;
|
||||
|
||||
&.color-name {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&.palette-th {
|
||||
align-items: center;
|
||||
border: 1px solid $color-gray-30;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $color-primary;
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.presets {
|
||||
.custom-select-dropdown {
|
||||
width: 200px;
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@
|
|||
(assoc-in [:workspace-local :picked-color-select] value)
|
||||
(assoc-in [:workspace-local :picked-shift?] shift?)))))
|
||||
|
||||
(defn change-fill2
|
||||
(defn change-fill
|
||||
([ids color]
|
||||
(ptk/reify ::change-fill
|
||||
ptk/WatchEvent
|
||||
|
|
@ -133,7 +133,7 @@
|
|||
(map #(dwt/update-text-attrs {:id % :editor (get editors %) :attrs attrs}) text-ids)
|
||||
(dwc/update-shapes shape-ids update-fn))))))))
|
||||
|
||||
(defn change-fill
|
||||
#_(defn change-fill
|
||||
([ids color id file-id]
|
||||
(change-fill ids color 1 id file-id))
|
||||
([ids color opacity id file-id]
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
(map #(dwt/update-text-attrs {:id % :editor (get editors %) :attrs attrs}) text-ids)
|
||||
(dwc/update-shapes shape-ids update-fn))))))))
|
||||
|
||||
(defn change-stroke2 [ids color]
|
||||
(defn change-stroke [ids color]
|
||||
(ptk/reify ::change-stroke
|
||||
ptk/WatchEvent
|
||||
(watch [_ state s]
|
||||
|
|
@ -184,7 +184,8 @@
|
|||
:stroke-width 1
|
||||
:stroke-opacity 1)))]
|
||||
(rx/of (dwc/update-shapes ids update-fn))))))
|
||||
(defn change-stroke [ids color id file-id]
|
||||
|
||||
#_(defn change-stroke [ids color id file-id]
|
||||
(ptk/reify ::change-stroke
|
||||
ptk/WatchEvent
|
||||
(watch [_ state s]
|
||||
|
|
@ -212,8 +213,8 @@
|
|||
(let [ids (get-in @st/state [:workspace-local :selected])]
|
||||
(st/emit!
|
||||
(if shift?
|
||||
(change-stroke2 ids color)
|
||||
(change-fill2 ids color))
|
||||
(change-stroke ids color)
|
||||
(change-fill ids color))
|
||||
(md/hide))))]
|
||||
(ptk/reify ::start-picker
|
||||
ptk/UpdateEvent
|
||||
|
|
|
|||
|
|
@ -35,23 +35,22 @@
|
|||
|
||||
(defn add-color
|
||||
[color]
|
||||
(us/assert ::us/string color)
|
||||
(ptk/reify ::add-color
|
||||
ptk/WatchEvent
|
||||
(watch [_ state s]
|
||||
(let [id (uuid/next)
|
||||
rchg {:type :add-color
|
||||
:color {:id id
|
||||
:name color
|
||||
:value color}}
|
||||
uchg {:type :del-color
|
||||
:id id}]
|
||||
(rx/of #(assoc-in % [:workspace-local :color-for-rename] id)
|
||||
(dwc/commit-changes [rchg] [uchg] {:commit-local? true}))))))
|
||||
(let [id (uuid/next)
|
||||
color (assoc color :id id)]
|
||||
(us/assert ::cp/color color)
|
||||
(ptk/reify ::add-color
|
||||
ptk/WatchEvent
|
||||
(watch [_ state s]
|
||||
(let [rchg {:type :add-color
|
||||
:color color}
|
||||
uchg {:type :del-color
|
||||
:id id}]
|
||||
(rx/of #(assoc-in % [:workspace-local :color-for-rename] id)
|
||||
(dwc/commit-changes [rchg] [uchg] {:commit-local? true})))))))
|
||||
|
||||
(defn add-recent-color
|
||||
[color]
|
||||
(us/assert ::us/string color)
|
||||
(us/assert ::cp/recent-color color)
|
||||
(ptk/reify ::add-recent-color
|
||||
ptk/WatchEvent
|
||||
(watch [_ state s]
|
||||
|
|
|
|||
52
frontend/src/app/main/ui/components/color_bullet.cljs
Normal file
52
frontend/src/app/main/ui/components/color_bullet.cljs
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
;; defined by the Mozilla Public License, v. 2.0.
|
||||
;;
|
||||
;; Copyright (c) 2020 UXBOX Labs SL
|
||||
|
||||
(ns app.main.ui.components.color-bullet
|
||||
(:require
|
||||
#_[beicon.core :as rx]
|
||||
#_[goog.events :as events]
|
||||
#_[okulary.core :as l]
|
||||
[rumext.alpha :as mf]
|
||||
[app.util.color :as uc]
|
||||
#_[cuerdas.core :as str]
|
||||
#_[app.common.math :as mth]
|
||||
#_[app.main.data.colors :as mdc]
|
||||
#_[app.main.data.workspace :as udw]
|
||||
#_[app.main.store :as st]
|
||||
#_[app.main.ui.components.dropdown :refer [dropdown]]
|
||||
#_[app.main.ui.icons :as i]
|
||||
#_[app.main.ui.keyboard :as kbd]
|
||||
#_[app.util.color :refer [hex->rgb]]
|
||||
#_[app.util.dom :as dom]
|
||||
#_[app.util.object :as obj]
|
||||
#_[app.main.refs :as refs]
|
||||
#_[app.util.i18n :as i18n :refer [t]]))
|
||||
|
||||
(mf/defc color-bullet [{:keys [color on-click]}]
|
||||
(let [color (if (string? color) {:color color :opacity 1} color)]
|
||||
[:div.color-bullet {:on-click #(when on-click (on-click %))}
|
||||
(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 [{:keys [type]}]
|
||||
(case type
|
||||
:linear "Linear"
|
||||
:radial "Radial"))
|
||||
|
||||
(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 opacity gradient]} color
|
||||
color-str (or name color (gradient-type->string gradient))]
|
||||
#_(when (= size :big) [:span.color-text {:title (:name color) } (or (:name color) (:value color))])
|
||||
(when (= size :big)
|
||||
[:span.color-text {:on-click #(when on-click (on-click %))
|
||||
:on-double-click #(when on-double-click (on-double-click %))
|
||||
:title name } color-str])))
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
[app.main.data.workspace :as udw]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.dropdown :refer [dropdown]]
|
||||
[app.main.ui.components.color-bullet :refer [color-bullet color-name]]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.keyboard :as kbd]
|
||||
[app.util.color :refer [hex->rgb]]
|
||||
|
|
@ -55,14 +56,13 @@
|
|||
(fn [event]
|
||||
(let [ids (get-in @st/state [:workspace-local :selected])]
|
||||
(if (kbd/shift? event)
|
||||
(st/emit! (mdc/change-stroke ids (:value color) id file-id))
|
||||
(st/emit! (mdc/change-fill ids (:value color) id file-id)))))]
|
||||
(st/emit! (mdc/change-stroke ids color))
|
||||
(st/emit! (mdc/change-fill ids color)))))]
|
||||
|
||||
[:div.color-cell {:class (str "cell-"(name size))
|
||||
:key (or (str (:id color)) (:value color))
|
||||
:on-click select-color}
|
||||
[:span.color {:style {:background (:value color)}}]
|
||||
(when (= size :big) [:span.color-text {:title (:name color) } (or (:name color) (:value color))])]))
|
||||
[:& color-bullet {:color color}]
|
||||
[:& color-name {:color color :size size}]]))
|
||||
|
||||
(mf/defc palette
|
||||
[{:keys [left-sidebar? current-colors recent-colors file-colors shared-libs selected size]}]
|
||||
|
|
@ -138,9 +138,9 @@
|
|||
(when (= selected (:id cur-library)) i/tick)
|
||||
[:div.library-name (str (:name cur-library) " " (str/format "(%s)" (count colors)))]
|
||||
[:div.color-sample
|
||||
(for [[idx {:keys [id value]}] (map-indexed vector (take 7 colors))]
|
||||
[:div.color-bullet {:key (str "color-" idx)
|
||||
:style {:background-color value}}])]]))
|
||||
(for [[idx {:keys [id color]}] (map-indexed vector (take 7 colors))]
|
||||
[:& color-bullet {:key (str "color-" idx)
|
||||
:color color}])]]))
|
||||
|
||||
|
||||
[:li.palette-library
|
||||
|
|
@ -149,9 +149,9 @@
|
|||
[:div.library-name (str (t locale "workspace.libraries.colors.file-library")
|
||||
(str/format " (%s)" (count file-colors)))]
|
||||
[:div.color-sample
|
||||
(for [[idx {:keys [value]}] (map-indexed vector (take 7 (vals file-colors))) ]
|
||||
[:div.color-bullet {:key (str "color-" idx)
|
||||
:style {:background-color value}}])]]
|
||||
(for [[idx color] (map-indexed vector (take 7 (vals file-colors))) ]
|
||||
[:& color-bullet {:key (str "color-" idx)
|
||||
:color color}])]]
|
||||
|
||||
[:li.palette-library
|
||||
{:on-click #(st/emit! (mdc/change-palette-selected :recent))}
|
||||
|
|
@ -159,9 +159,9 @@
|
|||
[:div.library-name (str (t locale "workspace.libraries.colors.recent-colors")
|
||||
(str/format " (%s)" (count recent-colors)))]
|
||||
[:div.color-sample
|
||||
(for [[idx value] (map-indexed vector (take 7 (reverse recent-colors))) ]
|
||||
[:div.color-bullet {:key (str "color-" idx)
|
||||
:style {:background-color value}}])]]
|
||||
(for [[idx color] (map-indexed vector (take 7 (reverse recent-colors))) ]
|
||||
[:& color-bullet {:key (str "color-" idx)
|
||||
:color color}])]]
|
||||
|
||||
[:hr.dropdown-separator]
|
||||
|
||||
|
|
@ -191,14 +191,8 @@
|
|||
|
||||
[:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide]]))
|
||||
|
||||
(defn recent->colors [recent-colors]
|
||||
(map #(hash-map :value %) (reverse (or recent-colors []))))
|
||||
|
||||
(defn file->colors [file-colors]
|
||||
(map #(select-keys % [:id :value :name]) (vals file-colors)))
|
||||
|
||||
(defn library->colors [shared-libs selected]
|
||||
(map #(merge {:file-id selected} (select-keys % [:id :value :name]))
|
||||
(map #(merge {:file-id selected} %)
|
||||
(vals (get-in shared-libs [selected :data :colors]))))
|
||||
|
||||
(mf/defc colorpalette
|
||||
|
|
@ -217,21 +211,21 @@
|
|||
(reset! current-library-colors
|
||||
(into []
|
||||
(cond
|
||||
(= selected :recent) (recent->colors recent-colors)
|
||||
(= selected :file) (file->colors file-colors)
|
||||
(= selected :recent) (reverse recent-colors)
|
||||
(= selected :file) (vals file-colors)
|
||||
:else (library->colors shared-libs selected))))))
|
||||
|
||||
(mf/use-effect
|
||||
(mf/deps recent-colors)
|
||||
(fn []
|
||||
(when (= selected :recent)
|
||||
(reset! current-library-colors (into [] (recent->colors recent-colors))))))
|
||||
(reset! current-library-colors (reverse recent-colors)))))
|
||||
|
||||
(mf/use-effect
|
||||
(mf/deps file-colors)
|
||||
(fn []
|
||||
(when (= selected :file)
|
||||
(reset! current-library-colors (into [] (file->colors file-colors))))))
|
||||
(reset! current-library-colors (into [] (vals file-colors))))))
|
||||
|
||||
[:& palette {:left-sidebar? left-sidebar?
|
||||
:current-colors @current-library-colors
|
||||
|
|
|
|||
|
|
@ -207,7 +207,7 @@
|
|||
(dom/set-css-property node "--saturation-grad-to" (format-hsl hsl-to)))))
|
||||
|
||||
;; When closing the modal we update the recent-color list
|
||||
#_(mf/use-effect
|
||||
(mf/use-effect
|
||||
(fn [] (fn []
|
||||
(st/emit! (dc/stop-picker))
|
||||
(st/emit! (dwl/add-recent-color (state->data @state))))))
|
||||
|
|
@ -276,6 +276,14 @@
|
|||
:editing-stop (:editing-stop @state)
|
||||
:on-select-stop handle-change-stop}]
|
||||
|
||||
[:div.colorpicker-tabs
|
||||
[:div.colorpicker-tab {:class (when (= @active-tab :ramp) "active")
|
||||
:on-click (change-tab :ramp)} i/picker-ramp]
|
||||
[:div.colorpicker-tab {:class (when (= @active-tab :harmony) "active")
|
||||
:on-click (change-tab :harmony)} i/picker-harmony]
|
||||
[:div.colorpicker-tab {:class (when (= @active-tab :hsva) "active")
|
||||
:on-click (change-tab :hsva)} i/picker-hsv]]
|
||||
|
||||
(if picking-color?
|
||||
[:div.picker-detail-wrapper
|
||||
[:div.center-circle]
|
||||
|
|
@ -299,13 +307,7 @@
|
|||
|
||||
[:& libraries {:current-color current-color
|
||||
:on-select-color on-select-library-color}]]
|
||||
[:div.colorpicker-tabs
|
||||
[:div.colorpicker-tab {:class (when (= @active-tab :ramp) "active")
|
||||
:on-click (change-tab :ramp)} i/picker-ramp]
|
||||
[:div.colorpicker-tab {:class (when (= @active-tab :harmony) "active")
|
||||
:on-click (change-tab :harmony)} i/picker-harmony]
|
||||
[:div.colorpicker-tab {:class (when (= @active-tab :hsva) "active")
|
||||
:on-click (change-tab :hsva)} i/picker-hsv]]
|
||||
|
||||
(when on-accept
|
||||
[:div.actions
|
||||
[:button.btn-primary.btn-large
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
[app.main.data.modal :as modal]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.i18n :as i18n :refer [t]]
|
||||
[app.main.ui.components.color-bullet :refer [color-bullet]]
|
||||
[app.main.ui.workspace.colorpicker.gradients :refer [gradients]]
|
||||
[app.main.ui.workspace.colorpicker.harmony :refer [harmony-selector]]
|
||||
[app.main.ui.workspace.colorpicker.hsva :refer [hsva-selector]]
|
||||
|
|
@ -53,13 +54,14 @@
|
|||
(let [mapped-colors
|
||||
(cond
|
||||
(= @selected-library "recent")
|
||||
(map #(hash-map :value %) (reverse (or recent-colors [])))
|
||||
;; The `map?` check is to keep backwards compatibility. We transform from string to map
|
||||
(map #(if (map? %) % (hash-map :color %)) (reverse (or recent-colors [])))
|
||||
|
||||
(= @selected-library "file")
|
||||
(map #(select-keys % [:id :value]) (vals file-colors))
|
||||
(vals file-colors)
|
||||
|
||||
:else ;; Library UUID
|
||||
(map #(merge {:file-id (uuid @selected-library)} (select-keys % [:id :value]))
|
||||
(map #(merge {:file-id (uuid @selected-library)})
|
||||
(vals (get-in shared-libs [(uuid @selected-library) :data :colors]))))]
|
||||
(reset! current-library-colors (into [] mapped-colors)))))
|
||||
|
||||
|
|
@ -94,7 +96,6 @@
|
|||
i/palette]
|
||||
|
||||
(for [[idx color] (map-indexed vector @current-library-colors)]
|
||||
[:div.color-bullet
|
||||
{:key (str "color-" idx)
|
||||
:on-click #(on-select-color color)
|
||||
:style {:background (uc/color->background color)}}])]]))
|
||||
[:& color-bullet {:key (str "color-" idx)
|
||||
:color color
|
||||
:on-click #(on-select-color color)}])]]))
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
[app.main.ui.components.file-uploader :refer [file-uploader]]
|
||||
[app.main.ui.components.tab-container :refer [tab-container tab-element]]
|
||||
[app.main.ui.workspace.sidebar.options.typography :refer [typography-entry]]
|
||||
[app.main.ui.components.color-bullet :refer [color-bullet color-name gradient-type->string]]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.keyboard :as kbd]
|
||||
[app.main.data.modal :as modal]
|
||||
|
|
@ -198,12 +199,18 @@
|
|||
:top nil
|
||||
:left nil
|
||||
:editing rename?})
|
||||
|
||||
default-name (cond
|
||||
(:gradient color) (gradient-type->string (:gradient color))
|
||||
(:color color) (:color color)
|
||||
:else (:value color))
|
||||
|
||||
click-color
|
||||
(fn [event]
|
||||
(let [ids (get-in @st/state [:workspace-local :selected])]
|
||||
(if (kbd/shift? event)
|
||||
(st/emit! (dc/change-stroke ids (:value color) id (if local? nil file-id)))
|
||||
(st/emit! (dc/change-fill ids (:value color) id (if local? nil file-id))))))
|
||||
(st/emit! (dc/change-stroke ids color))
|
||||
(st/emit! (dc/change-fill ids color)))))
|
||||
|
||||
rename-color
|
||||
(fn [name]
|
||||
|
|
@ -211,7 +218,7 @@
|
|||
|
||||
edit-color
|
||||
(fn [value]
|
||||
(st/emit! (dwl/update-color (assoc color :value value))))
|
||||
(st/emit! (dwl/update-color (assoc color :color value))))
|
||||
|
||||
delete-color
|
||||
(fn []
|
||||
|
|
@ -245,7 +252,7 @@
|
|||
{:x (.-clientX event)
|
||||
:y (.-clientY event)
|
||||
:on-accept edit-color
|
||||
:value (:value color)
|
||||
:data color
|
||||
:disable-opacity true
|
||||
:position :right}))
|
||||
|
||||
|
|
@ -269,7 +276,8 @@
|
|||
nil))
|
||||
|
||||
[:div.group-list-item {:on-context-menu on-context-menu}
|
||||
[:div.color-block {:style {:background-color (:value color)}}]
|
||||
[:& color-bullet {:color color}]
|
||||
|
||||
(if (:editing @state)
|
||||
[:input.element-name
|
||||
{:type "text"
|
||||
|
|
@ -278,12 +286,13 @@
|
|||
:on-key-down input-key-down
|
||||
:auto-focus true
|
||||
:default-value (:name color "")}]
|
||||
|
||||
[:div.name-block
|
||||
{:on-double-click rename-color-clicked
|
||||
:on-click click-color}
|
||||
(:name color)
|
||||
(when-not (= (:name color) (:value color))
|
||||
[:span (:value color)])])
|
||||
(when-not (= (:name color) default-name)
|
||||
[:span default-name])])
|
||||
(when local?
|
||||
[:& context-menu
|
||||
{:selectable false
|
||||
|
|
|
|||
|
|
@ -63,20 +63,20 @@
|
|||
(mf/use-callback
|
||||
(mf/deps ids)
|
||||
(fn [event]
|
||||
(st/emit! (dc/change-fill2 ids {:color cp/default-color
|
||||
(st/emit! (dc/change-fill ids {:color cp/default-color
|
||||
:opacity 1}))))
|
||||
|
||||
on-delete
|
||||
(mf/use-callback
|
||||
(mf/deps ids)
|
||||
(fn [event]
|
||||
(st/emit! (dc/change-fill2 ids nil))))
|
||||
(st/emit! (dc/change-fill ids nil))))
|
||||
|
||||
on-change
|
||||
(mf/use-callback
|
||||
(mf/deps ids)
|
||||
(fn [color]
|
||||
(st/emit! (dc/change-fill2 ids color))))
|
||||
(st/emit! (dc/change-fill ids color))))
|
||||
|
||||
on-open-picker
|
||||
(mf/use-callback
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
[rumext.alpha :as mf]
|
||||
[cuerdas.core :as str]
|
||||
[app.common.math :as math]
|
||||
[app.main.ui.components.color-bullet :refer [color-bullet color-name]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.data :refer [classnames]]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
|
|
@ -115,7 +116,9 @@
|
|||
(modal/update-props! :colorpicker {:data (parse-color color)})))
|
||||
|
||||
[:div.row-flex.color-data
|
||||
[:span.color-th
|
||||
[:& color-bullet {:color color
|
||||
:on-click handle-click-color}]
|
||||
#_[:span.color-th
|
||||
{:class (when (and (:id color) (not= (:id color) :multiple)) "color-name")
|
||||
:style {:background (uc/color->background color)}
|
||||
:on-click handle-click-color}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
[app.common.data :as d]
|
||||
[app.common.math :as math]
|
||||
[app.main.data.workspace.common :as dwc]
|
||||
[app.main.data.colors :as dc]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
|
||||
|
|
@ -29,7 +30,8 @@
|
|||
:stroke-color
|
||||
:stroke-color-ref-id
|
||||
:stroke-color-ref-file
|
||||
:stroke-opacity])
|
||||
:stroke-opacity
|
||||
:stroke-color-gradient])
|
||||
|
||||
(defn- stroke-menu-props-equals?
|
||||
[np op]
|
||||
|
|
@ -72,19 +74,17 @@
|
|||
|
||||
show-options (not= (:stroke-style values :none) :none)
|
||||
|
||||
current-stroke-color {:value (:stroke-color values)
|
||||
current-stroke-color {:color (:stroke-color values)
|
||||
:opacity (:stroke-opacity values)
|
||||
:id (:stroke-color-ref-id values)
|
||||
:file-id (:stroke-color-ref-file values)}
|
||||
:file-id (:stroke-color-ref-file values)
|
||||
:gradient (:stroke-color-gradient values)}
|
||||
|
||||
handle-change-stroke-color
|
||||
(fn [value opacity id file-id]
|
||||
(let [change #(cond-> %
|
||||
value (assoc :stroke-color value
|
||||
:stroke-color-ref-id id
|
||||
:stroke-color-ref-file file-id)
|
||||
opacity (assoc :stroke-opacity opacity))]
|
||||
(st/emit! (dwc/update-shapes ids change))))
|
||||
(mf/use-callback
|
||||
(mf/deps ids)
|
||||
(fn [color]
|
||||
(st/emit! (dc/change-stroke ids color))))
|
||||
|
||||
on-stroke-style-change
|
||||
(fn [event]
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue