mirror of
https://github.com/penpot/penpot.git
synced 2025-07-25 06:57:13 +02:00
🐛 Fix tooltip position after click (#6830)
This commit is contained in:
parent
5c4fd97541
commit
a3aabf3b7d
3 changed files with 16 additions and 11 deletions
|
@ -61,6 +61,7 @@ on-premises instances** that want to keep up to date.
|
|||
- Fix shortcut error pressing G+W from the View Mode [Taiga #11061](https://tree.taiga.io/project/penpot/issue/11061)
|
||||
- Fix entering long project name [Taiga #11417](https://tree.taiga.io/project/penpot/issue/11417)
|
||||
- Fix slow color picker [Taiga #11019](https://tree.taiga.io/project/penpot/issue/11019)
|
||||
- Fix tooltip position after click [Taiga #11405](https://tree.taiga.io/project/penpot/issue/11405)
|
||||
|
||||
## 2.7.2
|
||||
|
||||
|
|
|
@ -36,8 +36,6 @@
|
|||
|
||||
(defn- hide-popover
|
||||
[node]
|
||||
(dom/unset-css-property! node "block-size")
|
||||
(dom/unset-css-property! node "display")
|
||||
(.hidePopover ^js node))
|
||||
|
||||
(defn- calculate-placement-bounding-rect
|
||||
|
@ -159,11 +157,9 @@
|
|||
(let [tooltip-brect (dom/get-bounding-rect tooltip)
|
||||
window-size (dom/get-window-size)]
|
||||
(when-let [[placement placement-rect] (find-matching-placement placement tooltip-brect origin-brect window-size offset)]
|
||||
|
||||
(let [height (if (or (= placement "right") (= placement "left"))
|
||||
(- (:height placement-rect) arrow-height)
|
||||
(:height placement-rect))]
|
||||
(dom/set-css-property! tooltip "display" "grid")
|
||||
(dom/set-css-property! tooltip "block-size" (dm/str height "px"))
|
||||
(dom/set-css-property! tooltip "inset-block-start" (dm/str (:top placement-rect) "px"))
|
||||
(dom/set-css-property! tooltip "inset-inline-start" (dm/str (:left placement-rect) "px")))
|
||||
|
@ -212,8 +208,9 @@
|
|||
|
||||
update-position
|
||||
(fn []
|
||||
(let [placement (update-tooltip-position tooltip placement origin-brect offset)]
|
||||
(reset! placement* placement)))]
|
||||
(let [new-placement (update-tooltip-position tooltip placement origin-brect offset)]
|
||||
(when (not= new-placement placement)
|
||||
(reset! placement* new-placement))))]
|
||||
|
||||
(add-schedule schedule-ref delay update-position)))))
|
||||
|
||||
|
@ -234,7 +231,7 @@
|
|||
|
||||
tooltip-class
|
||||
(stl/css-case
|
||||
:tooltip true
|
||||
:tooltip-content-wrapper true
|
||||
:tooltip-top (identical? placement "top")
|
||||
:tooltip-bottom (identical? placement "bottom")
|
||||
:tooltip-left (identical? placement "left")
|
||||
|
@ -260,10 +257,11 @@
|
|||
|
||||
[:> :div props
|
||||
children
|
||||
[:div {:class [class tooltip-class]
|
||||
[:div {:class [class (stl/css :tooltip)]
|
||||
:id id
|
||||
:popover "auto"
|
||||
:role "tooltip"}
|
||||
[:div {:class (stl/css :tooltip-content)} content]
|
||||
[:div {:class (stl/css :tooltip-arrow)
|
||||
:id "tooltip-arrow"}]]]))
|
||||
[:div {:class tooltip-class}
|
||||
[:div {:class (stl/css :tooltip-content)} content]
|
||||
[:div {:class (stl/css :tooltip-arrow)
|
||||
:id "tooltip-arrow"}]]]]))
|
||||
|
|
|
@ -19,6 +19,12 @@ $arrow-side: 12px;
|
|||
block-size: fit-content;
|
||||
}
|
||||
|
||||
.tooltip-content-wrapper {
|
||||
display: grid;
|
||||
inline-size: fit-content;
|
||||
block-size: fit-content;
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
background-color: var(--color-background-primary);
|
||||
border-radius: var(--sp-xs);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue