mirror of
https://github.com/penpot/penpot.git
synced 2025-03-19 19:21:23 -05:00
Merge pull request #1144 from penpot/colorpicker-tooltips
🎉 Add tooltips to color picker tabs
This commit is contained in:
commit
58f0ad999c
5 changed files with 47 additions and 9 deletions
|
@ -4,6 +4,7 @@
|
|||
|
||||
### :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).
|
||||
- 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).
|
||||
|
|
|
@ -975,6 +975,14 @@ input[type=range]:focus::-ms-fill-upper {
|
|||
}
|
||||
}
|
||||
|
||||
&.tooltip-expand {
|
||||
&:hover {
|
||||
&::after {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-bottom-left {
|
||||
&:hover {
|
||||
&::after {
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
[app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]]
|
||||
[app.util.color :as uc]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [t]]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[cuerdas.core :as str]
|
||||
[okulary.core :as l]
|
||||
[rumext.alpha :as mf]))
|
||||
|
@ -113,7 +113,6 @@
|
|||
[{:keys [data disable-gradient disable-opacity on-change on-accept]}]
|
||||
(let [state (mf/use-state (data->state data))
|
||||
active-tab (mf/use-state :ramp #_:harmony #_:hsva)
|
||||
locale (mf/deref i18n/locale)
|
||||
|
||||
ref-picker (mf/use-ref)
|
||||
|
||||
|
@ -291,12 +290,18 @@
|
|||
:on-select-stop handle-change-stop}]
|
||||
|
||||
[:div.colorpicker-tabs
|
||||
[:div.colorpicker-tab {:class (when (= @active-tab :ramp) "active")
|
||||
:on-click (change-tab :ramp)} i/picker-ramp]
|
||||
[:div.colorpicker-tab {:class (when (= @active-tab :harmony) "active")
|
||||
:on-click (change-tab :harmony)} i/picker-harmony]
|
||||
[:div.colorpicker-tab {:class (when (= @active-tab :hsva) "active")
|
||||
:on-click (change-tab :hsva)} i/picker-hsv]]
|
||||
[:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand
|
||||
{:class (when (= @active-tab :ramp) "active")
|
||||
:alt (tr "workspace.libraries.colors.rgba")
|
||||
:on-click (change-tab :ramp)} i/picker-ramp]
|
||||
[:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand
|
||||
{: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?
|
||||
[:div.picker-detail-wrapper
|
||||
|
@ -331,7 +336,7 @@
|
|||
{:on-click (fn []
|
||||
(on-accept (state->data @state))
|
||||
(modal/hide!))}
|
||||
(t locale "workspace.libraries.colors.save-color")]])]]))
|
||||
(tr "workspace.libraries.colors.save-color")]])]]))
|
||||
|
||||
(defn calculate-position
|
||||
"Calculates the style properties for the given coordinates and position"
|
||||
|
|
|
@ -1849,6 +1849,18 @@ msgstr "Recent colors"
|
|||
msgid "workspace.libraries.colors.save-color"
|
||||
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
|
||||
msgid "workspace.libraries.colors.small-thumbnails"
|
||||
msgstr "Small thumbnails"
|
||||
|
|
|
@ -1843,6 +1843,18 @@ msgstr "Colores recientes"
|
|||
msgid "workspace.libraries.colors.save-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
|
||||
msgid "workspace.libraries.colors.small-thumbnails"
|
||||
msgstr "Miniaturas pequeñas"
|
||||
|
|
Loading…
Add table
Reference in a new issue