0
Fork 0
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:
alonso.torres 2022-01-24 12:04:16 +01:00 committed by Andrés Moya
parent 406c4063de
commit 5f14769abc
7 changed files with 59 additions and 70 deletions

View file

@ -58,7 +58,7 @@
}
}
.sub-menu-item {
.icon-menu-item {
display: flex;
justify-content: flex-start;

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

View file

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

View file

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

View file

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

View file

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

View file

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