3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-30 21:56:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Allow to detach color styles

Browse source
This commit is contained in:
Andrés Moya 2021-01-07 12:00:44 +01:00
parent 5b79928590
commit b9e4861f16
9 changed files with 83 additions and 36 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}]]]

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

@ -99,6 +99,13 @@
(fn [color] (fn [color]
(emit-changes! #(-> % (assoc-in [:params :color] color)))) (emit-changes! #(-> % (assoc-in [:params :color] color))))
handle-detach-color
(fn []
(emit-changes! #(-> % (assoc-in [:params :color]
(-> (:color params)
(assoc :id nil)
(assoc :file-id nil))))))
handle-use-default handle-use-default
(fn [] (fn []
(let [params ((:type grid) default-grid-params) (let [params ((:type grid) default-grid-params)
@ -212,7 +219,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)}