mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 16:21:57 -05:00
🎉 Show master component in options
This commit is contained in:
parent
8ae52be773
commit
02207dedf3
8 changed files with 133 additions and 16 deletions
|
@ -53,9 +53,9 @@
|
|||
(get-in container [:objects shape-id]))
|
||||
|
||||
(defn get-component
|
||||
[component-id file-id local-file libraries]
|
||||
[component-id file-id local-library libraries]
|
||||
(let [file (if (nil? file-id)
|
||||
local-file
|
||||
local-library
|
||||
(get-in libraries [file-id :data]))]
|
||||
(get-in file [:components component-id])))
|
||||
|
||||
|
|
|
@ -2693,6 +2693,12 @@
|
|||
"es" : "Color de fondo"
|
||||
}
|
||||
},
|
||||
"workspace.options.component" : {
|
||||
"translations" : {
|
||||
"en" : "Component",
|
||||
"es" : "Componente"
|
||||
}
|
||||
},
|
||||
"workspace.options.design" : {
|
||||
"used-in" : [ "src/app/main/ui/workspace/sidebar/options.cljs:69" ],
|
||||
"translations" : {
|
||||
|
|
|
@ -295,6 +295,7 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
.custom-select-dropdown {
|
||||
background-color: $color-white;
|
||||
border-radius: $br-small;
|
||||
|
@ -307,7 +308,6 @@
|
|||
top: 30px;
|
||||
z-index: 12;
|
||||
|
||||
|
||||
.presets {
|
||||
width: 200px;
|
||||
}
|
||||
|
@ -471,6 +471,37 @@
|
|||
}
|
||||
}
|
||||
|
||||
.element-set-content .component-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $fs12;
|
||||
color: $color-gray-10;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-right: $small;
|
||||
}
|
||||
|
||||
.row-actions {
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.context-menu-items {
|
||||
right: 0.5rem;
|
||||
left: unset;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-option .custom-select {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
@ -921,8 +952,6 @@
|
|||
border-right: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.size-option .custom-select-dropdown {
|
||||
position: fixed;
|
||||
max-height: 16rem;
|
||||
|
|
|
@ -345,13 +345,6 @@
|
|||
(get-in state [:workspace-data asset-type])
|
||||
(get-in state [:workspace-libraries library-id :data asset-type])))
|
||||
|
||||
(defn- get-component
|
||||
[state file-id component-id]
|
||||
(let [components (if (nil? file-id)
|
||||
(get-in state [:workspace-data :components])
|
||||
(get-in state [:workspace-libraries file-id :data :components]))]
|
||||
(get components component-id)))
|
||||
|
||||
(defn generate-sync-shape-and-children-components
|
||||
"Generate changes to synchronize one shape that the root of a component
|
||||
instance, and all its children, from the given component.
|
||||
|
|
|
@ -39,7 +39,6 @@
|
|||
|
||||
;; ---- Workspace refs
|
||||
|
||||
|
||||
(def workspace-local
|
||||
(l/derived :workspace-local st/state))
|
||||
|
||||
|
@ -56,7 +55,6 @@
|
|||
(def selected-zoom
|
||||
(l/derived :zoom workspace-local))
|
||||
|
||||
|
||||
(def selected-drawing-tool
|
||||
(l/derived :tool workspace-drawing))
|
||||
|
||||
|
@ -89,7 +87,6 @@
|
|||
(assoc :pages (get-in file [:data :pages])))))
|
||||
st/state =))
|
||||
|
||||
|
||||
(def workspace-file-colors
|
||||
(l/derived (fn [state]
|
||||
(when-let [file (:workspace-file state)]
|
||||
|
@ -113,6 +110,15 @@
|
|||
(def workspace-shared-files
|
||||
(l/derived :workspace-shared-files st/state))
|
||||
|
||||
(def workspace-local-library
|
||||
(l/derived (fn [state]
|
||||
(select-keys (get state :workspace-data)
|
||||
[:colors
|
||||
:media
|
||||
:typographies
|
||||
:components]))
|
||||
st/state))
|
||||
|
||||
(def workspace-libraries
|
||||
(l/derived :workspace-libraries st/state))
|
||||
|
||||
|
|
|
@ -0,0 +1,76 @@
|
|||
;; 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.workspace.sidebar.options.component
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[app.common.pages-helpers :as cph]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.components.context-menu :refer [context-menu]]
|
||||
[app.main.data.workspace.common :as dwc]
|
||||
[app.main.data.workspace.libraries :as dwl]
|
||||
[app.util.i18n :as i18n :refer [t]]
|
||||
[app.util.dom :as dom]))
|
||||
|
||||
(def component-attrs [:component-id :component-file :shape-ref])
|
||||
|
||||
(mf/defc component-menu
|
||||
[{:keys [ids values] :as props}]
|
||||
(let [id (first ids)
|
||||
locale (mf/deref i18n/locale)
|
||||
local (mf/use-state {:menu-open false})
|
||||
|
||||
show? (some? (:component-id values))
|
||||
local-library (mf/deref refs/workspace-local-library)
|
||||
libraries (mf/deref refs/workspace-libraries)
|
||||
component (cph/get-component (:component-id values)
|
||||
(:component-file values)
|
||||
local-library
|
||||
libraries)
|
||||
|
||||
on-menu-click (mf/use-callback
|
||||
(fn [event]
|
||||
(dom/prevent-default event)
|
||||
(dom/stop-propagation event)
|
||||
(swap! local assoc :menu-open true)))
|
||||
|
||||
on-menu-close (mf/use-callback
|
||||
#(swap! local assoc :menu-open false))
|
||||
|
||||
do-detach-component #(st/emit! (dwl/detach-component id))
|
||||
do-reset-component #(st/emit! (dwl/reset-component id))
|
||||
do-update-component #(do
|
||||
(st/emit! dwc/start-undo-transaction)
|
||||
(st/emit! (dwl/update-component id))
|
||||
(st/emit! (dwl/sync-file nil))
|
||||
(st/emit! dwc/commit-undo-transaction))
|
||||
do-navigate-component-file #(st/emit! (dwl/nav-to-component-file
|
||||
(:component-file values)))]
|
||||
(when show?
|
||||
[:div.element-set
|
||||
[:div.element-set-title
|
||||
[:span (t locale "workspace.options.component")]]
|
||||
[:div.element-set-content
|
||||
[:div.row-flex.component-row
|
||||
i/component
|
||||
(:name component)
|
||||
[:div.row-actions
|
||||
{:on-click on-menu-click}
|
||||
i/actions
|
||||
[:& context-menu {:on-close on-menu-close
|
||||
:show (:menu-open @local)
|
||||
:options [[(t locale "workspace.shape.menu.detach-instance") do-detach-component]
|
||||
[(t locale "workspace.shape.menu.reset-overrides") do-reset-component]
|
||||
(if (:component-file values)
|
||||
[(t locale "workspace.shape.menu.go-master") do-navigate-component-file]
|
||||
[(t locale "workspace.shape.menu.update-master") do-update-component])]
|
||||
}]]]]])))
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
[app.main.data.workspace.texts :as dwt]
|
||||
[app.main.ui.workspace.sidebar.options.multiple :refer [get-shape-attrs]]
|
||||
[app.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.component :refer [component-attrs component-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.blur :refer [blur-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]]
|
||||
|
@ -59,6 +60,9 @@
|
|||
shape-with-children)
|
||||
[:rx :ry]))
|
||||
|
||||
component-values
|
||||
(select-keys shape component-attrs)
|
||||
|
||||
fill-values
|
||||
(geom/get-attrs-multi shape-with-children fill-attrs)
|
||||
|
||||
|
@ -136,13 +140,15 @@
|
|||
:ids-with-children ids-with-children
|
||||
:type type
|
||||
:values measure-values}]
|
||||
[:& component-menu {:ids [id]
|
||||
:values component-values}]
|
||||
[:& fill-menu {:ids ids-with-children
|
||||
:type type
|
||||
:values fill-values}]
|
||||
|
||||
[:& blur-menu {:ids [id]
|
||||
:values (select-keys shape [:blur])}]
|
||||
|
||||
|
||||
(when-not (empty? other-ids)
|
||||
[:& stroke-menu {:ids other-ids
|
||||
:type type
|
||||
|
|
|
@ -28,6 +28,7 @@
|
|||
[:& measures-menu {:ids ids
|
||||
:type type
|
||||
:values measure-values}]
|
||||
|
||||
[:& fill-menu {:ids ids
|
||||
:type type
|
||||
:values fill-values}]
|
||||
|
|
Loading…
Add table
Reference in a new issue