Merge pull request #1144 from penpot/colorpicker-tooltips

🎉 Add tooltips to color picker tabs
This commit is contained in:
Andrey Antukh 2021-08-12 11:23:34 +02:00 committed by GitHub
commit 58f0ad999c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 47 additions and 9 deletions

View file

@ -4,6 +4,7 @@
### :sparkles: New features ### :sparkles: New features
- Add tooltips to color picker tabs [Taiga #1814](https://tree.taiga.io/project/penpot/us/1814).
- Allow to zoom with ctrl + middle button [Taiga #1428](https://tree.taiga.io/project/penpot/us/1428). - Allow to zoom with ctrl + middle button [Taiga #1428](https://tree.taiga.io/project/penpot/us/1428).
- Auto placement of duplicated objects [Taiga #1386](https://tree.taiga.io/project/penpot/us/1386). - Auto placement of duplicated objects [Taiga #1386](https://tree.taiga.io/project/penpot/us/1386).
- Enable penpot SVG metadata only when exporting complete files [Taiga #1914](https://tree.taiga.io/project/penpot/us/1914?milestone=295883). - Enable penpot SVG metadata only when exporting complete files [Taiga #1914](https://tree.taiga.io/project/penpot/us/1914?milestone=295883).

View file

@ -975,6 +975,14 @@ input[type=range]:focus::-ms-fill-upper {
} }
} }
&.tooltip-expand {
&:hover {
&::after {
min-width: 100%;
}
}
}
&.tooltip-bottom-left { &.tooltip-bottom-left {
&:hover { &:hover {
&::after { &::after {

View file

@ -20,7 +20,7 @@
[app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]] [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]]
[app.util.color :as uc] [app.util.color :as uc]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [t]] [app.util.i18n :as i18n :refer [tr]]
[cuerdas.core :as str] [cuerdas.core :as str]
[okulary.core :as l] [okulary.core :as l]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
@ -113,7 +113,6 @@
[{:keys [data disable-gradient disable-opacity on-change on-accept]}] [{:keys [data disable-gradient disable-opacity on-change on-accept]}]
(let [state (mf/use-state (data->state data)) (let [state (mf/use-state (data->state data))
active-tab (mf/use-state :ramp #_:harmony #_:hsva) active-tab (mf/use-state :ramp #_:harmony #_:hsva)
locale (mf/deref i18n/locale)
ref-picker (mf/use-ref) ref-picker (mf/use-ref)
@ -291,12 +290,18 @@
:on-select-stop handle-change-stop}] :on-select-stop handle-change-stop}]
[:div.colorpicker-tabs [:div.colorpicker-tabs
[:div.colorpicker-tab {:class (when (= @active-tab :ramp) "active") [:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand
:on-click (change-tab :ramp)} i/picker-ramp] {:class (when (= @active-tab :ramp) "active")
[:div.colorpicker-tab {:class (when (= @active-tab :harmony) "active") :alt (tr "workspace.libraries.colors.rgba")
:on-click (change-tab :harmony)} i/picker-harmony] :on-click (change-tab :ramp)} i/picker-ramp]
[:div.colorpicker-tab {:class (when (= @active-tab :hsva) "active") [:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand
:on-click (change-tab :hsva)} i/picker-hsv]] {:class (when (= @active-tab :harmony) "active")
:alt (tr "workspace.libraries.colors.rgb-complementary")
:on-click (change-tab :harmony)} i/picker-harmony]
[:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand
{:class (when (= @active-tab :hsva) "active")
:alt (tr "workspace.libraries.colors.hsv")
:on-click (change-tab :hsva)} i/picker-hsv]]
(if picking-color? (if picking-color?
[:div.picker-detail-wrapper [:div.picker-detail-wrapper
@ -331,7 +336,7 @@
{:on-click (fn [] {:on-click (fn []
(on-accept (state->data @state)) (on-accept (state->data @state))
(modal/hide!))} (modal/hide!))}
(t locale "workspace.libraries.colors.save-color")]])]])) (tr "workspace.libraries.colors.save-color")]])]]))
(defn calculate-position (defn calculate-position
"Calculates the style properties for the given coordinates and position" "Calculates the style properties for the given coordinates and position"

View file

@ -1849,6 +1849,18 @@ msgstr "Recent colors"
msgid "workspace.libraries.colors.save-color" msgid "workspace.libraries.colors.save-color"
msgstr "Save color style" msgstr "Save color style"
#: src/app/main/ui/workspace/colorpicker.cljs
msgid "workspace.libraries.colors.rgba"
msgstr "RGBA"
#: src/app/main/ui/workspace/colorpicker.cljs
msgid "workspace.libraries.colors.rgb-complementary"
msgstr "RGB Complementary"
#: src/app/main/ui/workspace/colorpicker.cljs
msgid "workspace.libraries.colors.hsv"
msgstr "HSV"
#: src/app/main/ui/workspace/colorpalette.cljs #: src/app/main/ui/workspace/colorpalette.cljs
msgid "workspace.libraries.colors.small-thumbnails" msgid "workspace.libraries.colors.small-thumbnails"
msgstr "Small thumbnails" msgstr "Small thumbnails"

View file

@ -1843,6 +1843,18 @@ msgstr "Colores recientes"
msgid "workspace.libraries.colors.save-color" msgid "workspace.libraries.colors.save-color"
msgstr "Guardar estilo de color" msgstr "Guardar estilo de color"
#: src/app/main/ui/workspace/colorpicker.cljs
msgid "workspace.libraries.colors.rgba"
msgstr "RGBA"
#: src/app/main/ui/workspace/colorpicker.cljs
msgid "workspace.libraries.colors.rgb-complementary"
msgstr "RGB Complementario"
#: src/app/main/ui/workspace/colorpicker.cljs
msgid "workspace.libraries.colors.hsv"
msgstr "HSV"
#: src/app/main/ui/workspace/colorpalette.cljs #: src/app/main/ui/workspace/colorpalette.cljs
msgid "workspace.libraries.colors.small-thumbnails" msgid "workspace.libraries.colors.small-thumbnails"
msgstr "Miniaturas pequeñas" msgstr "Miniaturas pequeñas"