Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 23:49:45 -05:00
Code Issues Activity

add picker icon and new color options

Browse source
This commit is contained in:
elhombretecla 2016-04-23 12:35:50 +02:00 • committed by Andrey Antukh
parent 5a50bc80e3
commit 3531d5054a
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
4 changed files with 23 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
resources/public/images/svg/picker.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500.00001 500.00001">
<path d="M11.402 498.536c-4.64-1.613-8.317-5.335-9.896-10.02-.732-2.168-.824-7.17-.824-44.7 0-45.853-.04-45.148 2.807-49.542.653-1.01 53.238-53.866 116.855-117.46 63.617-63.59 115.667-115.852 115.667-116.134 0-.282-11.486-11.997-25.524-26.033-14.038-14.036-25.524-25.75-25.524-26.034 0-.283 14.816-15.328 32.924-33.434l32.924-32.922 29.607 29.59 29.607 29.592 44.286-44.17c32.81-32.726 45.278-44.843 48.115-46.76 7.434-5.025 16.28-8.752 24.758-10.432 5.316-1.053 18.308-.91 23.737.26 25.043 5.4 44.058 24.808 49.064 50.08.927 4.68.927 17.78 0 22.46-1.68 8.48-5.407 17.326-10.432 24.76-1.917 2.836-14.034 15.303-46.76 48.114l-44.17 44.286 29.59 29.608 29.592 29.608-32.92 32.923c-18.107 18.108-33.152 32.924-33.435 32.924-.283 0-11.998-11.485-26.034-25.523s-25.75-25.524-26.033-25.524c-.282 0-52.543 52.05-116.135 115.667-63.593 63.617-116.45 116.202-117.46 116.856-4.4 2.85-3.662 2.81-49.686 2.783-37.102-.023-42.692-.126-44.702-.824zM199.638 353.77C262.6 290.81 314.115 239.07 314.115 238.79c0-.67-52.165-52.838-52.834-52.838-.282 0-52.026 51.515-114.986 114.477L31.82 414.904v26.057c0 19.588.153 26.21.614 26.67.46.462 7.084.614 26.67.614H85.16L199.64 353.77z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

6
resources/styles/partials/sidebar-element-options.scss
View file

@ -150,14 +150,14 @@
&.palette-th {
align-items: center;
border: 2px solid $medium-ui-icons;
border: 1px solid $medium-ui-icons;
display: flex;
justify-content: center;
svg {
fill: $medium-ui-icons;
height: 18px;
width: 18px;
height: 16px;
width: 16px;
}
&:hover {

11
src/uxbox/ui/icons.cljs
View file

@ -680,3 +680,14 @@
{:style {:stroke nil}
:d
"M34 6h-24c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4v-24l-8-8zm-10 32c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm6-20h-20v-8h20v8z"}]]))
(def picker
(html
[:svg
{:viewBox "0 0 500.00001 500.00001"
:height "500"
:width "500"}
[:g
[:path
{:d
"M11.402 498.536c-4.64-1.613-8.317-5.335-9.896-10.02-.732-2.168-.824-7.17-.824-44.7 0-45.853-.04-45.148 2.807-49.542.653-1.01 53.238-53.866 116.855-117.46 63.617-63.59 115.667-115.852 115.667-116.134 0-.282-11.486-11.997-25.524-26.033-14.038-14.036-25.524-25.75-25.524-26.034 0-.283 14.816-15.328 32.924-33.434l32.924-32.922 29.607 29.59 29.607 29.592 44.286-44.17c32.81-32.726 45.278-44.843 48.115-46.76 7.434-5.025 16.28-8.752 24.758-10.432 5.316-1.053 18.308-.91 23.737.26 25.043 5.4 44.058 24.808 49.064 50.08.927 4.68.927 17.78 0 22.46-1.68 8.48-5.407 17.326-10.432 24.76-1.917 2.836-14.034 15.303-46.76 48.114l-44.17 44.286 29.59 29.608 29.592 29.608-32.92 32.923c-18.107 18.108-33.152 32.924-33.435 32.924-.283 0-11.998-11.485-26.034-25.523s-25.75-25.524-26.033-25.524c-.282 0-52.543 52.05-116.135 115.667-63.593 63.617-116.45 116.202-117.46 116.856-4.4 2.85-3.662 2.81-49.686 2.783-37.102-.023-42.692-.126-44.702-.824zM199.638 353.77C262.6 290.81 314.115 239.07 314.115 238.79c0-.67-52.165-52.838-52.834-52.838-.282 0-52.026 51.515-114.986 114.477L31.82 414.904v26.057c0 19.588.153 26.21.614 26.67.46.462 7.084.614 26.67.614H85.16L199.64 353.77z"}]]]))

7
src/uxbox/ui/workspace/sidebar/options.cljs
View file

@ -145,7 +145,12 @@
{:placeholder "RGB"
:type "text"}]]
(recent-colors shape #(change-stroke {:color %}))]]
[:span "Color options"]
[:div.row-flex
[:span.color-th.palette-th i/picker]
[:span.color-th.palette-th i/palette]]
(recent-colors shape #(change-stroke {:color %}))]]
;; SLIDEBAR FOR ROTATION AND OPACITY
[:span "Opacity"]