3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-27 01:37:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix tooltip position after click (#6830)

Browse source
This commit is contained in:
Eva Marco 2025-07-02 09:56:14 +02:00 • committed by GitHub
parent 5c4fd97541
commit a3aabf3b7d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 16 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

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

16
frontend/src/app/main/ui/ds/tooltip/tooltip.cljs
View file

@ -36,8 +36,6 @@
(defn- hide-popover (defn- hide-popover
[node] [node]
(dom/unset-css-property! node "block-size")
(dom/unset-css-property! node "display")
(.hidePopover ^js node)) (.hidePopover ^js node))
(defn- calculate-placement-bounding-rect (defn- calculate-placement-bounding-rect
@ -159,11 +157,9 @@
(let [tooltip-brect (dom/get-bounding-rect tooltip) (let [tooltip-brect (dom/get-bounding-rect tooltip)
window-size (dom/get-window-size)] window-size (dom/get-window-size)]
(when-let [[placement placement-rect] (find-matching-placement placement tooltip-brect origin-brect window-size offset)] (when-let [[placement placement-rect] (find-matching-placement placement tooltip-brect origin-brect window-size offset)]
(let [height (if (or (= placement "right") (= placement "left")) (let [height (if (or (= placement "right") (= placement "left"))
(- (:height placement-rect) arrow-height) (- (:height placement-rect) arrow-height)
(:height placement-rect))] (: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 "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-block-start" (dm/str (:top placement-rect) "px"))
(dom/set-css-property! tooltip "inset-inline-start" (dm/str (:left placement-rect) "px"))) (dom/set-css-property! tooltip "inset-inline-start" (dm/str (:left placement-rect) "px")))
@ -212,8 +208,9 @@
update-position update-position
(fn [] (fn []
(let [placement (update-tooltip-position tooltip placement origin-brect offset)] (let [new-placement (update-tooltip-position tooltip placement origin-brect offset)]
(reset! placement* placement)))] (when (not= new-placement placement)
(reset! placement* new-placement))))]
(add-schedule schedule-ref delay update-position))))) (add-schedule schedule-ref delay update-position)))))
@ -234,7 +231,7 @@
tooltip-class tooltip-class
(stl/css-case (stl/css-case
:tooltip true :tooltip-content-wrapper true
:tooltip-top (identical? placement "top") :tooltip-top (identical? placement "top")
:tooltip-bottom (identical? placement "bottom") :tooltip-bottom (identical? placement "bottom")
:tooltip-left (identical? placement "left") :tooltip-left (identical? placement "left")
@ -260,10 +257,11 @@
[:> :div props [:> :div props
children children
[:div {:class [class tooltip-class] [:div {:class [class (stl/css :tooltip)]
:id id :id id
:popover "auto" :popover "auto"
:role "tooltip"} :role "tooltip"}
[:div {:class tooltip-class}
[:div {:class (stl/css :tooltip-content)} content] [:div {:class (stl/css :tooltip-content)} content]
[:div {:class (stl/css :tooltip-arrow) [:div {:class (stl/css :tooltip-arrow)
:id "tooltip-arrow"}]]])) :id "tooltip-arrow"}]]]]))

6
frontend/src/app/main/ui/ds/tooltip/tooltip.scss
View file

@ -19,6 +19,12 @@ $arrow-side: 12px;
block-size: fit-content; block-size: fit-content;
} }
.tooltip-content-wrapper {
display: grid;
inline-size: fit-content;
block-size: fit-content;
}
.tooltip-arrow { .tooltip-arrow {
background-color: var(--color-background-primary); background-color: var(--color-background-primary);
border-radius: var(--sp-xs); border-radius: var(--sp-xs);