mirror of
https://github.com/penpot/penpot.git
synced 2025-03-30 16:41:20 -05:00
🐛 Fix problem with hover-ids
This commit is contained in:
parent
406c4063de
commit
5f14769abc
7 changed files with 59 additions and 70 deletions
|
@ -58,7 +58,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.sub-menu-item {
|
||||
.icon-menu-item {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
|
|
34
frontend/src/app/main/ui/components/shape_icon.cljs
Normal file
34
frontend/src/app/main/ui/components/shape_icon.cljs
Normal file
|
@ -0,0 +1,34 @@
|
|||
;; 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/.
|
||||
;;
|
||||
;; Copyright (c) UXBOX Labs SL
|
||||
|
||||
(ns app.main.ui.components.shape-icon
|
||||
(:require
|
||||
[app.main.ui.icons :as i]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
|
||||
(mf/defc element-icon
|
||||
[{:keys [shape] :as props}]
|
||||
(case (:type shape)
|
||||
:frame i/artboard
|
||||
:image i/image
|
||||
:line i/line
|
||||
:circle i/circle
|
||||
:path i/curve
|
||||
:rect i/box
|
||||
:text i/text
|
||||
:group (if (some? (:component-id shape))
|
||||
i/component
|
||||
(if (:masked-group? shape)
|
||||
i/mask
|
||||
i/folder))
|
||||
:bool (case (:bool-type shape)
|
||||
:difference i/bool-difference
|
||||
:exclude i/bool-exclude
|
||||
:intersection i/bool-intersection
|
||||
#_:default i/bool-union)
|
||||
:svg-raw i/file-svg
|
||||
nil))
|
|
@ -9,8 +9,9 @@
|
|||
[app.common.data :as d]
|
||||
[app.main.data.viewer :as dv]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.shape-icon :as si]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.sidebar.layers :refer [element-icon layer-name]]
|
||||
[app.main.ui.workspace.sidebar.layers :refer [layer-name]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.keyboard :as kbd]
|
||||
[okulary.core :as l]
|
||||
|
@ -70,7 +71,7 @@
|
|||
[:div.element-list-body {:class (dom/classnames :selected selected?
|
||||
:icon-layer (= (:type item) :icon))
|
||||
:on-click select-shape}
|
||||
[:& element-icon {:shape item}]
|
||||
[:& si/element-icon {:shape item}]
|
||||
[:& layer-name {:shape item}]
|
||||
|
||||
(when (and (not disable-collapse?) (:shapes item))
|
||||
|
|
|
@ -7,12 +7,12 @@
|
|||
(ns app.main.ui.viewer.handoff.right-sidebar
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.main.ui.components.shape-icon :as si]
|
||||
[app.main.ui.components.tab-container :refer [tab-container tab-element]]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.viewer.handoff.attributes :refer [attributes]]
|
||||
[app.main.ui.viewer.handoff.code :refer [code]]
|
||||
[app.main.ui.viewer.handoff.selection-feedback :refer [resolve-shapes]]
|
||||
[app.main.ui.workspace.sidebar.layers :refer [element-icon]]
|
||||
[app.util.i18n :refer [tr]]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
|
@ -44,7 +44,7 @@
|
|||
[:span.tool-window-bar-title (tr "handoff.tabs.code.selected.multiple" (count shapes))]]
|
||||
[:*
|
||||
[:span.tool-window-bar-icon
|
||||
[:& element-icon {:shape first-shape}]]
|
||||
[:& si/element-icon {:shape first-shape}]]
|
||||
[:span.tool-window-bar-title (->> selected-type d/name (str "handoff.tabs.code.selected.") (tr))]])
|
||||
]
|
||||
[:div.tool-window-content
|
||||
|
|
|
@ -18,6 +18,7 @@
|
|||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.dropdown :refer [dropdown]]
|
||||
[app.main.ui.components.shape-icon :as si]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
|
@ -35,32 +36,10 @@
|
|||
(dom/stop-propagation event))
|
||||
|
||||
|
||||
(mf/defc element-icon
|
||||
[{:keys [shape] :as props}]
|
||||
(case (:type shape)
|
||||
:frame i/artboard
|
||||
:image i/image
|
||||
:line i/line
|
||||
:circle i/circle
|
||||
:path i/curve
|
||||
:rect i/box
|
||||
:text i/text
|
||||
:group (if (some? (:component-id shape))
|
||||
i/component
|
||||
(if (:masked-group? shape)
|
||||
i/mask
|
||||
i/folder))
|
||||
:bool (case (:bool-type shape)
|
||||
:difference i/bool-difference
|
||||
:exclude i/bool-exclude
|
||||
:intersection i/bool-intersection
|
||||
#_:default i/bool-union)
|
||||
:svg-raw i/file-svg
|
||||
nil))
|
||||
|
||||
|
||||
(mf/defc menu-entry
|
||||
[{:keys [title shortcut on-click children selected has-icon? shape] :as props}]
|
||||
[{:keys [title shortcut on-click children selected? icon] :as props}]
|
||||
(let [submenu-ref (mf/use-ref nil)
|
||||
hovering? (mf/use-ref false)
|
||||
|
||||
|
@ -90,16 +69,15 @@
|
|||
(when (and (some? dom) (some? submenu-node))
|
||||
(dom/set-css-property! submenu-node "top" (str (.-offsetTop dom) "px"))))))]
|
||||
|
||||
(if has-icon?
|
||||
[:li.sub-menu-item {:ref set-dom-node
|
||||
:on-click on-click
|
||||
:on-pointer-enter on-pointer-enter
|
||||
:on-pointer-leave on-pointer-leave}
|
||||
(when has-icon?
|
||||
[:span.icon-wrapper
|
||||
(if selected [:span.selected-icon i/tick]
|
||||
[:span.selected-icon])
|
||||
[:span.shape-icon (element-icon {:shape shape})]])
|
||||
(if icon
|
||||
[:li.icon-menu-item {:ref set-dom-node
|
||||
:on-click on-click
|
||||
:on-pointer-enter on-pointer-enter
|
||||
:on-pointer-leave on-pointer-leave}
|
||||
[:span.icon-wrapper
|
||||
(if selected? [:span.selected-icon i/tick]
|
||||
[:span.selected-icon])
|
||||
[:span.shape-icon icon]]
|
||||
[:span.title title]]
|
||||
[:li {:ref set-dom-node
|
||||
:on-click on-click
|
||||
|
@ -156,10 +134,9 @@
|
|||
[:& menu-entry {:title (tr "workspace.shape.menu.select-layer")}
|
||||
(for [object hover-objs]
|
||||
[:& menu-entry {:title (:name object)
|
||||
:selected (some #(= object %) shapes)
|
||||
:selected? (some #(= object %) shapes)
|
||||
:on-click (select-shapes (:id object))
|
||||
:has-icon? true
|
||||
:shape object}])])
|
||||
:icon (si/element-icon {:shape object})}])])
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.forward")
|
||||
:shortcut (sc/get-tooltip :bring-forward)
|
||||
:on-click do-bring-forward}]
|
||||
|
|
|
@ -13,6 +13,7 @@
|
|||
[app.main.data.workspace.common :as dwc]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.shape-icon :as si]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
|
@ -24,31 +25,6 @@
|
|||
[okulary.core :as l]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
;; --- Helpers
|
||||
|
||||
(mf/defc element-icon
|
||||
[{:keys [shape] :as props}]
|
||||
(case (:type shape)
|
||||
:frame i/artboard
|
||||
:image i/image
|
||||
:line i/line
|
||||
:circle i/circle
|
||||
:path i/curve
|
||||
:rect i/box
|
||||
:text i/text
|
||||
:group (if (some? (:component-id shape))
|
||||
i/component
|
||||
(if (:masked-group? shape)
|
||||
i/mask
|
||||
i/folder))
|
||||
:bool (case (:bool-type shape)
|
||||
:difference i/bool-difference
|
||||
:exclude i/bool-exclude
|
||||
:intersection i/bool-intersection
|
||||
#_:default i/bool-union)
|
||||
:svg-raw i/file-svg
|
||||
nil))
|
||||
|
||||
;; --- Layer Name
|
||||
|
||||
(def shape-for-rename-ref
|
||||
|
@ -227,7 +203,7 @@
|
|||
:icon-layer (= (:type item) :icon))
|
||||
:on-click select-shape
|
||||
:on-double-click #(dom/stop-propagation %)}
|
||||
[:& element-icon {:shape item}]
|
||||
[:& si/element-icon {:shape item}]
|
||||
[:& layer-name {:shape item
|
||||
:on-start-edit #(reset! disable-drag true)
|
||||
:on-stop-edit #(reset! disable-drag false)}]
|
||||
|
|
|
@ -164,9 +164,10 @@
|
|||
@ctrl?
|
||||
(into (filter is-group?) ids))
|
||||
|
||||
ids (filterv (comp not remove-id?) ids)
|
||||
hover-shape (get objects (first ids))]
|
||||
|
||||
hover-shape (->> ids
|
||||
(filterv (comp not remove-id?))
|
||||
(first)
|
||||
(get objects))]
|
||||
(reset! hover hover-shape)
|
||||
(reset! hover-ids ids))))))
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue