Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-24 15:56:11 -05:00
Code Issues 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
Show stats 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 {
flex: 1 1 0;
input {
background-color: $color-gray-50;
border: 1px solid $color-gray-30;
@ -526,5 +528,10 @@
.number {
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.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.color-row :refer [color-row]]
[app.util.dom :as dom]
[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
(mf/use-callback
(mf/deps ids)
(fn [event]
(st/emit! (dc/change-fill ids {:color cp/default-color
:opacity 1}))))
(mf/deps ids)
(fn [event]
(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-fill ids nil))))
(mf/deps ids)
(fn [event]
(st/emit! (dc/change-fill ids nil))))
on-change
(mf/use-callback
(mf/deps ids)
(fn [color]
(st/emit! (dc/change-fill ids color))))
(mf/deps ids)
(fn [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
(mf/use-callback
(mf/deps ids)
(fn [value opacity id file-id]
(st/emit! (dwc/start-undo-transaction))))
(mf/deps ids)
(fn [value opacity id file-id]
(st/emit! (dwc/start-undo-transaction))))
on-close-picker
(mf/use-callback
(mf/deps ids)
(fn [value opacity id file-id]
(st/emit! (dwc/commit-undo-transaction))))]
(mf/deps ids)
(fn [value opacity id file-id]
(st/emit! (dwc/commit-undo-transaction))))]
(if show?
[:div.element-set
@ -98,6 +104,7 @@
[:div.element-set-content
[:& color-row {:color color
:on-change on-change
:on-detach on-detach
:on-open on-open-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]
(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
(fn []
(let [params ((:type grid) default-grid-params)
@ -212,7 +219,8 @@
[:& color-row {:color (:color params)
:disable-gradient true
:on-change handle-change-color}]
:on-change handle-change-color
:on-detach handle-detach-color}]
[:div.row-flex
[:button.btn-options {:disabled is-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.data.modal :as modal]
[app.main.ui.hooks :as h]
[app.main.ui.icons :as i]
[app.main.ui.context :as ctx]
[app.main.ui.components.color-bullet :as cb]
[app.main.ui.components.numeric-input :refer [numeric-input]]))
@ -59,10 +60,11 @@
(if (= v :multiple) nil v))
(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)
file-colors (mf/deref refs/workspace-file-colors)
shared-libs (mf/deref refs/workspace-libraries)
hover-detach (mf/use-state false)
get-color-name (fn [{:keys [id file-id]}]
(let [src-colors (if (= file-id current-file-id)
@ -132,8 +134,15 @@
(cond
;; Rendering a color with ID
(: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
(and (not (uc/multiple? color))

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

@ -84,6 +84,15 @@
(assoc-in [:shadow index :color] color)
(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
(fn [index]
(fn []
@ -173,6 +182,7 @@
(:color value))
:disable-gradient true
:on-change (update-color index)
:on-detach (detach-color index)
:on-open #(st/emit! (dwc/start-undo-transaction))
:on-close #(st/emit! (dwc/commit-undo-transaction))}]]]]))
(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
(mf/use-callback
(mf/deps ids)
(fn [color]
(st/emit! (dc/change-stroke ids color))))
(mf/deps ids)
(fn [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
(fn [event]
@ -134,6 +140,7 @@
;; Stroke Color
[:& color-row {:color current-stroke-color
:on-change handle-change-stroke-color
:on-detach handle-detach
:on-open on-open-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
:typography-ref-file current-file-id}) ids)))))
handle-deattach-typography
handle-detach-typography
(fn []
(run! #(emit-update! % {:typography-ref-file nil
:typography-ref-id nil})
@ -253,13 +253,13 @@
[:& typography-entry {:typography typography
:read-only? (not= (:typography-ref-file values) current-file-id)
:file (get shared-libs (:typography-ref-file values))
:on-deattach handle-deattach-typography
:on-detach handle-detach-typography
:on-change handle-change-typography}]
(= (:typography-ref-id values) :multiple)
[:div.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]]
:else

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

@ -210,11 +210,11 @@
(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)
open? (mf/use-state editting?)
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)
#_(rt/resolve router :workspace
@ -254,12 +254,12 @@
(t locale "workspace.assets.typography.sample")]
[:div.typography-name (:name typography)]]
[:div.element-set-actions
(when on-deattach
(when on-detach
[:div.element-set-actions-button
{:on-mouse-enter #(reset! hover-deattach true)
:on-mouse-leave #(reset! hover-deattach false)
:on-click on-deattach}
(if @hover-deattach i/unchain i/chain)])
{: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)])
[:div.element-set-actions-button
{:on-click #(reset! open? true)}