Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-10 00:40:30 -05:00
Code Issues Activity

🐛 Fix tooltip positioning.

Browse source
This commit is contained in:
Andrey Antukh 2021-06-17 08:38:56 +02:00 committed by Andrés Moya
parent a1ad6ca289
commit 16b5bb595c
3 changed files with 55 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/resources/styles/common/framework.scss
View file

@ -965,16 +965,8 @@ input[type=range]:focus::-ms-fill-upper {
}
}
// the default is the `right`
&.tooltip-bottom {
&:hover {
&::after {
left: -20%;
top: 130%;
}
}
}
&.tooltip-bottom-right {
&:hover {
&::after {
left: 0;

100
frontend/src/app/main/ui/workspace/sidebar/align.cljs
View file

@ -6,13 +6,13 @@
(ns app.main.ui.workspace.sidebar.align
(:require
[rumext.alpha :as mf]
[app.main.ui.icons :as i]
[app.common.uuid :as uuid]
[app.main.data.workspace :as dw]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.data.workspace :as dw]
[app.util.i18n :as i18n :refer [t]]
[app.common.uuid :as uuid]))
[app.main.ui.icons :as i]
[app.util.i18n :as i18n :refer [tr]]
[rumext.alpha :as mf]))
(mf/defc align-options
[]
@ -25,14 +25,12 @@
(empty? selected) true
(> (count selected) 1) false
:else
(= uuid/zero (:frame-id (get objects (first selected)))))
(= uuid/zero (:frame-id (get objects (first selected)))))
disabled-distribute (cond
(empty? selected) true
(< (count selected) 2) true
:else false)
locale (i18n/use-locale)
(empty? selected) true
(< (count selected) 2) true
:else false)
on-align-button-clicked
(fn [axis] (when-not disabled (st/emit! (dw/align-objects axis))))
@ -42,52 +40,52 @@
[:div.align-options
[:div.align-group
[:div.align-button.tooltip.tooltip-bottom-right
{:alt (t locale "workspace.align.hleft")
:class (when disabled "disabled")
:on-click #(on-align-button-clicked :hleft)}
i/shape-halign-left]
[:div.align-button.tooltip.tooltip-bottom
{:alt (tr "workspace.align.hleft")
:class (when disabled "disabled")
:on-click #(on-align-button-clicked :hleft)}
i/shape-halign-left]
[:div.align-button.tooltip.tooltip-bottom
{:alt (t locale "workspace.align.hcenter")
:class (when disabled "disabled")
:on-click #(on-align-button-clicked :hcenter)}
i/shape-halign-center]
[:div.align-button.tooltip.tooltip-bottom
{:alt (tr "workspace.align.hcenter")
:class (when disabled "disabled")
:on-click #(on-align-button-clicked :hcenter)}
i/shape-halign-center]
[:div.align-button.tooltip.tooltip-bottom
{:alt (t locale "workspace.align.hright")
:class (when disabled "disabled")
:on-click #(on-align-button-clicked :hright)}
i/shape-halign-right]
[:div.align-button.tooltip.tooltip-bottom
{:alt (tr "workspace.align.hright")
:class (when disabled "disabled")
:on-click #(on-align-button-clicked :hright)}
i/shape-halign-right]
[:div.align-button.tooltip.tooltip-bottom
{:alt (t locale "workspace.align.hdistribute")
:class (when disabled-distribute "disabled")
:on-click #(on-distribute-button-clicked :horizontal)}
i/shape-hdistribute]]
[:div.align-button.tooltip.tooltip-bottom
{:alt (tr "workspace.align.hdistribute")
:class (when disabled-distribute "disabled")
:on-click #(on-distribute-button-clicked :horizontal)}
i/shape-hdistribute]]
[:div.align-group
[:div.align-button.tooltip.tooltip-bottom
{:alt (t locale "workspace.align.vtop")
:class (when disabled "disabled")
:on-click #(on-align-button-clicked :vtop)}
i/shape-valign-top]
[:div.align-button.tooltip.tooltip-bottom
{:alt (tr "workspace.align.vtop")
:class (when disabled "disabled")
:on-click #(on-align-button-clicked :vtop)}
i/shape-valign-top]
[:div.align-button.tooltip.tooltip-bottom
{:alt (t locale "workspace.align.vcenter")
:class (when disabled "disabled")
:on-click #(on-align-button-clicked :vcenter)}
i/shape-valign-center]
[:div.align-button.tooltip.tooltip-bottom-left
{:alt (tr "workspace.align.vcenter")
:class (when disabled "disabled")
:on-click #(on-align-button-clicked :vcenter)}
i/shape-valign-center]
[:div.align-button.tooltip.tooltip-bottom
{:alt (t locale "workspace.align.vbottom")
:class (when disabled "disabled")
:on-click #(on-align-button-clicked :vbottom)}
i/shape-valign-bottom]
[:div.align-button.tooltip.tooltip-bottom-left
{:alt (tr "workspace.align.vbottom")
:class (when disabled "disabled")
:on-click #(on-align-button-clicked :vbottom)}
i/shape-valign-bottom]
[:div.align-button.tooltip.tooltip-bottom-left
{:alt (t locale "workspace.align.vdistribute")
:class (when disabled-distribute "disabled")
:on-click #(on-distribute-button-clicked :vertical)}
i/shape-vdistribute]]]))
[:div.align-button.tooltip.tooltip-bottom-left
{:alt (tr "workspace.align.vdistribute")
:class (when disabled-distribute "disabled")
:on-click #(on-distribute-button-clicked :vertical)}
i/shape-vdistribute]]]))

10
frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
View file

@ -117,12 +117,12 @@
(on-change {:text-direction val}))]
;; --- Align
[:div.align-icons
[:span.tooltip.tooltip-bottom
[:span.tooltip.tooltip-bottom-left
{:alt (tr "workspace.options.text-options.direction-ltr")
:class (dom/classnames :current (= "ltr" direction))
:on-click #(handle-change % "ltr")}
i/text-direction-ltr]
[:span.tooltip.tooltip-bottom
[:span.tooltip.tooltip-bottom-left
{:alt (tr "workspace.options.text-options.direction-rtl")
:class (dom/classnames :current (= "rtl" direction))
:on-click #(handle-change % "rtl")}
@ -137,17 +137,17 @@
(on-change {:vertical-align new-align}))]
[:div.align-icons
[:span.tooltip.tooltip-bottom
[:span.tooltip.tooltip-bottom-left
{:alt (tr "workspace.options.text-options.align-top")
:class (dom/classnames :current (= "top" vertical-align))
:on-click #(handle-change % "top")}
i/align-top]
[:span.tooltip.tooltip-bottom
[:span.tooltip.tooltip-bottom-left
{:alt (tr "workspace.options.text-options.align-middle")
:class (dom/classnames :current (= "center" vertical-align))
:on-click #(handle-change % "center")}
i/align-middle]
[:span.tooltip.tooltip-bottom
[:span.tooltip.tooltip-bottom-left
{:alt (tr "workspace.options.text-options.align-bottom")
:class (dom/classnames :current (= "bottom" vertical-align))
:on-click #(handle-change % "bottom")}