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

✨ Show color hex or name on hover

Browse source
This commit is contained in:
Alejandro Alonso 2022-01-11 08:47:14 +01:00 • committed by Alonso Torres
parent d8311ac3fa
commit 04f5a6a9f9
4 changed files with 19 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -5,6 +5,7 @@
### :boom: Breaking changes ### :boom: Breaking changes
### :sparkles: New features ### :sparkles: New features
- Show color hex or name on hover [Taiga #2413](https://tree.taiga.io/project/penpot/us/2413).
- Add shortcut to create artboard from selected objects [Taiga #2412](https://tree.taiga.io/project/penpot/us/2412). - Add shortcut to create artboard from selected objects [Taiga #2412](https://tree.taiga.io/project/penpot/us/2412).
- Add shortcut for opacity [Taiga #2442](https://tree.taiga.io/project/penpot/us/2442). - Add shortcut for opacity [Taiga #2442](https://tree.taiga.io/project/penpot/us/2442).
- Setting fill automatically for new texts [Taiga #2441](https://tree.taiga.io/project/penpot/us/2441). - Setting fill automatically for new texts [Taiga #2441](https://tree.taiga.io/project/penpot/us/2441).

16
frontend/resources/styles/main/partials/color-bullet.scss
View file

@ -92,8 +92,6 @@ ul.palette-menu .color-bullet {
.color-bullet { .color-bullet {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
overflow: hidden;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
left center; left center;
background-color: $color-white; background-color: $color-white;
@ -104,6 +102,14 @@ ul.palette-menu .color-bullet {
} }
} }
.color-bullet-left {
border-radius: 10px 0 0 10px;
}
.color-bullet-right {
border-radius: 0 10px 10px 0;
}
.color-data .color-bullet.multiple { .color-data .color-bullet.multiple {
background: transparent; background: transparent;
@ -155,6 +161,11 @@ ul.palette-menu .color-bullet {
} }
} }
.color-data .color-bullet .color-bullet-left,
.color-data .color-bullet .color-bullet-right {
border-radius: unset;
}
.colorpicker-content .libraries .selected-colors .color-bullet { .colorpicker-content .libraries .selected-colors .color-bullet {
grid-area: auto; grid-area: auto;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
@ -162,6 +173,7 @@ ul.palette-menu .color-bullet {
&:hover { &:hover {
border-color: $color-primary; border-color: $color-primary;
z-index: 10;
} }
&.button { &.button {

2
frontend/resources/styles/main/partials/colorpicker.scss
View file

@ -343,8 +343,6 @@
grid-template-columns: repeat(8, 1fr); grid-template-columns: repeat(8, 1fr);
justify-content: space-between; justify-content: space-between;
margin-right: -8px; margin-right: -8px;
overflow-x: hidden;
overflow-y: auto;
max-height: 5.5rem; max-height: 5.5rem;
} }

7
frontend/src/app/main/ui/components/color_bullet.cljs
View file

@ -16,8 +16,9 @@
;; No multiple selection ;; No multiple selection
(let [color (if (string? color) {:color color :opacity 1} color)] (let [color (if (string? color) {:color color :opacity 1} color)]
[:div.color-bullet {:class (when (:id color) "is-library-color") [:div.color-bullet.tooltip.tooltip-right {:class (when (:id color) "is-library-color")
:on-click #(when on-click (on-click %))} :on-click #(when on-click (on-click %))
:alt (or (:name color) (:color color))}
(when (not (:gradient color)) (when (not (:gradient color))
[:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}]) [:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}])
@ -36,4 +37,4 @@
(when (or (not size) (= size :big)) (when (or (not size) (= size :big))
[:span.color-text {:on-click #(when on-click (on-click %)) [:span.color-text {:on-click #(when on-click (on-click %))
:on-double-click #(when on-double-click (on-double-click %)) :on-double-click #(when on-double-click (on-double-click %))
:title name } color-str]))) :title name} color-str])))