From 16b5bb595ca8eb1e1d8f37ede08b68bab3a751d5 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 17 Jun 2021 08:38:56 +0200 Subject: [PATCH] :bug: Fix tooltip positioning. --- .../resources/styles/common/framework.scss | 10 +- .../app/main/ui/workspace/sidebar/align.cljs | 100 +++++++++--------- .../workspace/sidebar/options/menus/text.cljs | 10 +- 3 files changed, 55 insertions(+), 65 deletions(-) diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss index e6497dacb..f74c58e25 100644 --- a/frontend/resources/styles/common/framework.scss +++ b/frontend/resources/styles/common/framework.scss @@ -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; diff --git a/frontend/src/app/main/ui/workspace/sidebar/align.cljs b/frontend/src/app/main/ui/workspace/sidebar/align.cljs index 7bf85b1a6..acb3c6a42 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/align.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/align.cljs @@ -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]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs index 0d6ab2546..3cda61c33 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs @@ -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")}