3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-08 00:51:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #445 from penpot/issue/848/detach-colors

Browse source 
Issue/848/detach colors
This commit is contained in:
Andrey Antukh 2021-01-08 11:30:19 +01:00 • committed by GitHub
commit d12b78985e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 116 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/resources/styles/main/partials/colorpicker.scss
View file

@ -488,6 +488,8 @@
} }
.color-info { .color-info {
flex: 1 1 0;
input { input {
background-color: $color-gray-50; background-color: $color-gray-50;
border: 1px solid $color-gray-30; border: 1px solid $color-gray-30;
@ -526,5 +528,10 @@
.number { .number {
color: $color-gray-60; color: $color-gray-60;
} }
.element-set-actions-button svg {
width: 10px;
height: 10px;
}
} }

1
frontend/src/app/main/ui/workspace/sidebar/options/blur.cljs
View file

@ -17,7 +17,6 @@
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
[app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]] [app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [t]])) [app.util.i18n :as i18n :refer [t]]))

39
frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs
View file

@ -60,34 +60,40 @@
on-add on-add
(mf/use-callback (mf/use-callback
(mf/deps ids) (mf/deps ids)
(fn [event] (fn [event]
(st/emit! (dc/change-fill ids {:color cp/default-color (st/emit! (dc/change-fill ids {:color cp/default-color
:opacity 1})))) :opacity 1}))))
on-delete on-delete
(mf/use-callback (mf/use-callback
(mf/deps ids) (mf/deps ids)
(fn [event] (fn [event]
(st/emit! (dc/change-fill ids nil)))) (st/emit! (dc/change-fill ids nil))))
on-change on-change
(mf/use-callback (mf/use-callback
(mf/deps ids) (mf/deps ids)
(fn [color] (fn [color]
(st/emit! (dc/change-fill ids color)))) (st/emit! (dc/change-fill ids color))))
on-detach
(mf/use-callback
(mf/deps ids)
(fn []
(st/emit! (dc/change-fill ids (dissoc color :id :file-id)))))
on-open-picker on-open-picker
(mf/use-callback (mf/use-callback
(mf/deps ids) (mf/deps ids)
(fn [value opacity id file-id] (fn [value opacity id file-id]
(st/emit! (dwc/start-undo-transaction)))) (st/emit! (dwc/start-undo-transaction))))
on-close-picker on-close-picker
(mf/use-callback (mf/use-callback
(mf/deps ids) (mf/deps ids)
(fn [value opacity id file-id] (fn [value opacity id file-id]
(st/emit! (dwc/commit-undo-transaction))))] (st/emit! (dwc/commit-undo-transaction))))]
(if show? (if show?
[:div.element-set [:div.element-set
@ -98,6 +104,7 @@
[:div.element-set-content [:div.element-set-content
[:& color-row {:color color [:& color-row {:color color
:on-change on-change :on-change on-change
:on-detach on-detach
:on-open on-open-picker :on-open on-open-picker
:on-close on-close-picker}]]] :on-close on-close-picker}]]]

77
frontend/src/app/main/ui/workspace/sidebar/options/frame_grid.cljs
View file

@ -37,67 +37,72 @@
:separator :separator
18 12 10 8 6 4 3 2]) 18 12 10 8 6 4 3 2])
(mf/defc grid-options [{:keys [frame grid default-grid-params on-change on-remove on-save-grid]}] (mf/defc grid-options
[{:keys [grid frame default-grid-params on-change on-remove on-save-grid]}]
(let [locale (i18n/use-locale) (let [locale (i18n/use-locale)
size-options (get-size-options locale) size-options (get-size-options locale)
state (mf/use-state {:show-advanced-options false state (mf/use-state {:show-advanced-options false})
:changes {}}) {:keys [type display params]} grid
{:keys [type display params] :as grid} (d/deep-merge grid (:changes @state))
toggle-advanced-options #(swap! state update :show-advanced-options not) toggle-advanced-options
#(swap! state update :show-advanced-options not)
emit-changes!
(fn [update-fn]
(swap! state update :changes update-fn)
(when on-change (on-change (d/deep-merge grid (-> @state :changes update-fn)))))
handle-toggle-visibility handle-toggle-visibility
(fn [event] (fn [event]
(emit-changes! (fn [changes] (update changes :display #(if (nil? %) false (not %)))))) (when on-change
(on-change (update grid :display #(if (nil? %) false (not %))))))
handle-remove-grid handle-remove-grid
(fn [event] (fn [event]
(when on-remove (on-remove))) (when on-remove (on-remove)))
handle-change-type handle-change-type
(fn [type] (fn [grid-type]
(let [defaults (type default-grid-params) (let [defaults (grid-type default-grid-params)]
keys (keys defaults) (when on-change
current-changes (-> @state :changes :params (select-keys keys)) (on-change (assoc grid
;; We give more priority to the current changes :type grid-type
params (merge defaults current-changes) :params defaults)))))
to-merge {:type type :params params}]
(emit-changes! #(d/deep-merge % to-merge))))
handle-change handle-change
(fn [& keys] (fn [& keys]
(fn [value] (fn [value]
(emit-changes! #(assoc-in % keys value)))) (when on-change
(on-change (assoc-in grid keys value)))))
handle-change-size handle-change-size
(fn [size] (fn [size]
(let [grid (d/deep-merge grid (:changes @state)) (let [{:keys [margin gutter item-length]} (:params grid)
{:keys [margin gutter item-length]} (:params grid)
frame-length (if (= :column (:type grid)) (:width frame) (:height frame)) frame-length (if (= :column (:type grid)) (:width frame) (:height frame))
item-length (if (or (nil? size) (= :auto size)) item-length (if (or (nil? size) (= :auto size))
(-> (gg/calculate-default-item-length frame-length margin gutter) (-> (gg/calculate-default-item-length frame-length margin gutter)
(mth/precision 2)) (mth/precision 2))
item-length)] item-length)]
(emit-changes! #(-> % (when on-change
(assoc-in [:params :size] size) (on-change (-> grid
(assoc-in [:params :item-length] item-length))))) (assoc-in [:params :size] size)
(assoc-in [:params :item-length] item-length))))))
handle-change-item-length handle-change-item-length
(fn [item-length] (fn [item-length]
(let [{:keys [margin gutter size]} (->> @state :changes :params (d/deep-merge (:params grid))) (let [{:keys [margin gutter size]} (:params grid)
size (if (and (nil? item-length) (or (nil? size) (= :auto size))) 12 size)] size (if (and (nil? item-length) (or (nil? size) (= :auto size))) 12 size)]
(emit-changes! #(-> % (when on-change
(assoc-in [:params :size] size) (on-change (-> grid
(assoc-in [:params :item-length] item-length))))) (assoc-in [:params :size] size)
(assoc-in [:params :item-length] item-length))))))
handle-change-color handle-change-color
(fn [color] (fn [color]
(emit-changes! #(-> % (assoc-in [:params :color] color)))) (when on-change
(on-change (assoc-in grid [:params :color] color))))
handle-detach-color
(fn []
(when on-change
(on-change (-> grid
(d/dissoc-in [:params :color :id])
(d/dissoc-in [:params :color :file-id])))))
handle-use-default handle-use-default
(fn [] (fn []
@ -106,14 +111,15 @@
params (-> params params (-> params
(assoc-in [:color :color] color) (assoc-in [:color :color] color)
(update :color dissoc :value))] (update :color dissoc :value))]
(emit-changes! #(hash-map :params params)))) (when on-change
(on-change (assoc grid :params params)))))
handle-set-as-default handle-set-as-default
(fn [] (fn []
(let [current-grid (d/deep-merge grid (-> @state :changes))] (when on-save-grid
(on-save-grid current-grid))) (on-save-grid grid)))
is-default (= (->> @state :changes (d/deep-merge grid) :params) is-default (= (->> grid :params)
(->> grid :type default-grid-params))] (->> grid :type default-grid-params))]
[:div.grid-option [:div.grid-option
@ -212,7 +218,8 @@
[:& color-row {:color (:color params) [:& color-row {:color (:color params)
:disable-gradient true :disable-gradient true
:on-change handle-change-color}] :on-change handle-change-color
:on-detach handle-detach-color}]
[:div.row-flex [:div.row-flex
[:button.btn-options {:disabled is-default [:button.btn-options {:disabled is-default
:on-click handle-use-default} (t locale "workspace.options.grid.params.use-default")] :on-click handle-use-default} (t locale "workspace.options.grid.params.use-default")]

15
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
View file

@ -21,6 +21,7 @@
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.ui.hooks :as h] [app.main.ui.hooks :as h]
[app.main.ui.icons :as i]
[app.main.ui.context :as ctx] [app.main.ui.context :as ctx]
[app.main.ui.components.color-bullet :as cb] [app.main.ui.components.color-bullet :as cb]
[app.main.ui.components.numeric-input :refer [numeric-input]])) [app.main.ui.components.numeric-input :refer [numeric-input]]))
@ -59,10 +60,11 @@
(if (= v :multiple) nil v)) (if (= v :multiple) nil v))
(mf/defc color-row (mf/defc color-row
[{:keys [color disable-gradient disable-opacity on-change on-open on-close]}] [{:keys [color disable-gradient disable-opacity on-change on-detach on-open on-close]}]
(let [current-file-id (mf/use-ctx ctx/current-file-id) (let [current-file-id (mf/use-ctx ctx/current-file-id)
file-colors (mf/deref refs/workspace-file-colors) file-colors (mf/deref refs/workspace-file-colors)
shared-libs (mf/deref refs/workspace-libraries) shared-libs (mf/deref refs/workspace-libraries)
hover-detach (mf/use-state false)
get-color-name (fn [{:keys [id file-id]}] get-color-name (fn [{:keys [id file-id]}]
(let [src-colors (if (= file-id current-file-id) (let [src-colors (if (= file-id current-file-id)
@ -132,8 +134,15 @@
(cond (cond
;; Rendering a color with ID ;; Rendering a color with ID
(:id color) (:id color)
[:div.color-info [:*
[:div.color-name (str (get-color-name color))]] [:div.color-info
[:div.color-name (str (get-color-name color))]]
(when on-detach
[:div.element-set-actions-button
{:on-mouse-enter #(reset! hover-detach true)
:on-mouse-leave #(reset! hover-detach false)
:on-click on-detach}
(if @hover-detach i/unchain i/chain)])]
;; Rendering a gradient ;; Rendering a gradient
(and (not (uc/multiple? color)) (and (not (uc/multiple? color))

14
frontend/src/app/main/ui/workspace/sidebar/options/shadow.cljs
View file

@ -74,7 +74,7 @@
(when (or (not valid?) (valid? value)) (when (or (not valid?) (valid? value))
(do (st/emit! (dwc/update-shapes ids #(assoc-in % [:shadow index attr] value))) (do (st/emit! (dwc/update-shapes ids #(assoc-in % [:shadow index attr] value)))
(when update-ref (dom/set-value! (mf/ref-val update-ref) value))))))) (when update-ref (dom/set-value! (mf/ref-val update-ref) value)))))))
update-color update-color
(fn [index] (fn [index]
(fn [color opacity] (fn [color opacity]
@ -84,6 +84,15 @@
(assoc-in [:shadow index :color] color) (assoc-in [:shadow index :color] color)
(assoc-in [:shadow index :opacity] opacity)))))) (assoc-in [:shadow index :opacity] opacity))))))
detach-color
(fn [index]
(fn [color opacity]
(if-not (string? (:color value))
(st/emit! (dwc/update-shapes
ids
#(assoc-in % [:shadow index :color]
(dissoc (:color value) :id :file-id)))))))
toggle-visibility toggle-visibility
(fn [index] (fn [index]
(fn [] (fn []
@ -125,7 +134,7 @@
(st/emit! (dwc/update-shapes ids #(assoc-in % [:shadow index :style] value)))))} (st/emit! (dwc/update-shapes ids #(assoc-in % [:shadow index :style] value)))))}
[:option {:value ":drop-shadow"} (t locale "workspace.options.shadow-options.drop-shadow")] [:option {:value ":drop-shadow"} (t locale "workspace.options.shadow-options.drop-shadow")]
[:option {:value ":inner-shadow"} (t locale "workspace.options.shadow-options.inner-shadow")]]] [:option {:value ":inner-shadow"} (t locale "workspace.options.shadow-options.inner-shadow")]]]
[:div.row-grid-2 [:div.row-grid-2
[:div.input-element [:div.input-element
[:> numeric-input {:ref adv-offset-x-ref [:> numeric-input {:ref adv-offset-x-ref
@ -173,6 +182,7 @@
(:color value)) (:color value))
:disable-gradient true :disable-gradient true
:on-change (update-color index) :on-change (update-color index)
:on-detach (detach-color index)
:on-open #(st/emit! (dwc/start-undo-transaction)) :on-open #(st/emit! (dwc/start-undo-transaction))
:on-close #(st/emit! (dwc/commit-undo-transaction))}]]]])) :on-close #(st/emit! (dwc/commit-undo-transaction))}]]]]))
(mf/defc shadow-menu (mf/defc shadow-menu

13
frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs
View file

@ -73,9 +73,15 @@
handle-change-stroke-color handle-change-stroke-color
(mf/use-callback (mf/use-callback
(mf/deps ids) (mf/deps ids)
(fn [color] (fn [color]
(st/emit! (dc/change-stroke ids color)))) (st/emit! (dc/change-stroke ids color))))
handle-detach
(mf/use-callback
(mf/deps ids)
(fn []
(st/emit! (dc/change-stroke ids (dissoc current-stroke-color :id :file-id)))))
on-stroke-style-change on-stroke-style-change
(fn [event] (fn [event]
@ -134,6 +140,7 @@
;; Stroke Color ;; Stroke Color
[:& color-row {:color current-stroke-color [:& color-row {:color current-stroke-color
:on-change handle-change-stroke-color :on-change handle-change-stroke-color
:on-detach handle-detach
:on-open on-open-picker :on-open on-open-picker
:on-close on-close-picker}] :on-close on-close-picker}]

6
frontend/src/app/main/ui/workspace/sidebar/options/text.cljs
View file

@ -225,7 +225,7 @@
(run! #(emit-update! % {:typography-ref-id id (run! #(emit-update! % {:typography-ref-id id
:typography-ref-file current-file-id}) ids))))) :typography-ref-file current-file-id}) ids)))))
handle-deattach-typography handle-detach-typography
(fn [] (fn []
(run! #(emit-update! % {:typography-ref-file nil (run! #(emit-update! % {:typography-ref-file nil
:typography-ref-id nil}) :typography-ref-id nil})
@ -253,13 +253,13 @@
[:& typography-entry {:typography typography [:& typography-entry {:typography typography
:read-only? (not= (:typography-ref-file values) current-file-id) :read-only? (not= (:typography-ref-file values) current-file-id)
:file (get shared-libs (:typography-ref-file values)) :file (get shared-libs (:typography-ref-file values))
:on-deattach handle-deattach-typography :on-detach handle-detach-typography
:on-change handle-change-typography}] :on-change handle-change-typography}]
(= (:typography-ref-id values) :multiple) (= (:typography-ref-id values) :multiple)
[:div.multiple-typography [:div.multiple-typography
[:div.multiple-typography-text (t locale "workspace.libraries.text.multiple-typography")] [:div.multiple-typography-text (t locale "workspace.libraries.text.multiple-typography")]
[:div.multiple-typography-button {:on-click handle-deattach-typography [:div.multiple-typography-button {:on-click handle-detach-typography
:title (t locale "workspace.libraries.text.multiple-typography-tooltip")} i/unchain]] :title (t locale "workspace.libraries.text.multiple-typography-tooltip")} i/unchain]]
:else :else

14
frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs
View file

@ -210,11 +210,11 @@
(mf/defc typography-entry (mf/defc typography-entry
[{:keys [typography read-only? on-select on-change on-deattach on-context-menu editting? focus-name? file]}] [{:keys [typography read-only? on-select on-change on-detach on-context-menu editting? focus-name? file]}]
(let [locale (mf/deref i18n/locale) (let [locale (mf/deref i18n/locale)
open? (mf/use-state editting?) open? (mf/use-state editting?)
selected (mf/deref refs/selected-shapes) selected (mf/deref refs/selected-shapes)
hover-deattach (mf/use-state false) hover-detach (mf/use-state false)
name-input-ref (mf/use-ref nil) name-input-ref (mf/use-ref nil)
#_(rt/resolve router :workspace #_(rt/resolve router :workspace
@ -254,12 +254,12 @@
(t locale "workspace.assets.typography.sample")] (t locale "workspace.assets.typography.sample")]
[:div.typography-name (:name typography)]] [:div.typography-name (:name typography)]]
[:div.element-set-actions [:div.element-set-actions
(when on-deattach (when on-detach
[:div.element-set-actions-button [:div.element-set-actions-button
{:on-mouse-enter #(reset! hover-deattach true) {:on-mouse-enter #(reset! hover-detach true)
:on-mouse-leave #(reset! hover-deattach false) :on-mouse-leave #(reset! hover-detach false)
:on-click on-deattach} :on-click on-detach}
(if @hover-deattach i/unchain i/chain)]) (if @hover-detach i/unchain i/chain)])
[:div.element-set-actions-button [:div.element-set-actions-button
{:on-click #(reset! open? true)} {:on-click #(reset! open? true)}