0
Fork 0
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:
Andrés Moya 2020-10-30 13:52:27 +01:00 committed by Alonso Torres
parent 8ae52be773
commit 02207dedf3
8 changed files with 133 additions and 16 deletions

View file

@ -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])))

View file

@ -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" : {

View file

@ -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;

View file

@ -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.

View file

@ -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))

View file

@ -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])]
}]]]]])))

View file

@ -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

View file

@ -28,6 +28,7 @@
[:& measures-menu {:ids ids
:type type
:values measure-values}]
[:& fill-menu {:ids ids
:type type
:values fill-values}]