mirror of
https://github.com/penpot/penpot.git
synced 2025-06-11 01:01:37 +02:00
✨ Add new palette UI
This commit is contained in:
Eva
Andrés Moya
parent
68c1d9afaf
commit
36b016a37b
83 changed files with 1710 additions and 267 deletions
|
|
@ -8,15 +8,8 @@
|
|||
(:require
|
||||
[app.util.color :as uc]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(defn gradient-type->string [type]
|
||||
(case type
|
||||
:linear (tr "workspace.gradients.linear")
|
||||
:radial (tr "workspace.gradients.radial")
|
||||
nil))
|
||||
|
||||
(mf/defc color-bullet
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [color on-click]}]
|
||||
|
|
@ -36,7 +29,7 @@
|
|||
:is-not-library-color (nil? (:id color))
|
||||
:is-gradient (some? (:gradient color)))
|
||||
:on-click on-click
|
||||
:title (or (:color-library-name color) (:name color) (:color color) (gradient-type->string (:type (:gradient color))))}
|
||||
:title (uc/get-color-name color)}
|
||||
(if (:gradient color)
|
||||
[:div.color-bullet-wrapper {:style {:background (uc/color->background color)}}]
|
||||
[:div.color-bullet-wrapper
|
||||
|
|
@ -46,7 +39,7 @@
|
|||
(mf/defc color-name [{:keys [color size on-click on-double-click]}]
|
||||
(let [color (if (string? color) {:color color :opacity 1} color)
|
||||
{:keys [name color gradient]} color
|
||||
color-str (or name color (gradient-type->string (:type gradient)))]
|
||||
color-str (or name color (uc/gradient-type->string (:type gradient)))]
|
||||
(when (or (not size) (= size :big))
|
||||
[:span.color-text {:on-click #(when on-click (on-click %))
|
||||
:on-double-click #(when on-double-click (on-double-click %))
|
||||
|
|
|
|||
54
frontend/src/app/main/ui/components/color_bullet_new.cljs
Normal file
54
frontend/src/app/main/ui/components/color_bullet_new.cljs
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.components.color-bullet-new
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require
|
||||
[app.util.color :as uc]
|
||||
[app.util.dom :as dom]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
|
||||
(mf/defc color-bullet
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [color on-click mini?]}]
|
||||
(let [on-click (mf/use-fn
|
||||
(mf/deps color on-click)
|
||||
(fn [event]
|
||||
(when (fn? on-click)
|
||||
(^function on-click color event))))]
|
||||
(if (uc/multiple? color)
|
||||
[:div {:on-click on-click
|
||||
:class (dom/classnames (css :color-bullet) true
|
||||
(css :multiple) true)}]
|
||||
;; No multiple selection
|
||||
(let [color (if (string? color) {:color color :opacity 1} color)]
|
||||
[:div
|
||||
{:class (dom/classnames (css :color-bullet) true
|
||||
(css :mini) mini?
|
||||
(css :is-library-color) (some? (:id color))
|
||||
(css :is-not-library-color) (nil? (:id color))
|
||||
(css :is-gradient) (some? (:gradient color))
|
||||
(css :is-transparent) (and (:opacity color) (> 1 (:opacity color))))
|
||||
:on-click on-click}
|
||||
(if (:gradient color)
|
||||
[:div {:class (dom/classnames (css :color-bullet-wrapper) true)
|
||||
:style {:background (uc/color->background color)}}]
|
||||
[:div {:class (dom/classnames (css :color-bullet-wrapper) true)}
|
||||
[:div {:class (dom/classnames (css :color-bullet-left) true)
|
||||
:style {:background (uc/color->background (assoc color :opacity 1))}}]
|
||||
[:div {:class (dom/classnames (css :color-bullet-right) true)
|
||||
:style {:background (uc/color->background color)}}]])]))))
|
||||
(mf/defc color-name [{:keys [color size on-click on-double-click]}]
|
||||
(let [color (if (string? color) {:color color :opacity 1} color)
|
||||
{:keys [name color gradient]} color
|
||||
color-str (or name color (uc/gradient-type->string (:type gradient)))
|
||||
text-small (and (>= size 64) (< size 72))]
|
||||
(when (or (not size) (> size 64))
|
||||
[:span {:class (dom/classnames (css :color-text) true
|
||||
(css :small-text) text-small)
|
||||
:on-click #(when on-click (on-click %))
|
||||
:on-double-click #(when on-double-click (on-double-click %))} color-str])))
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"button-primary":"components_color_bullet_new_button-primary_pDkQg","button-secondary":"components_color_bullet_new_button-secondary_y3A8V","button-icon":"components_color_bullet_new_button-icon_uAC1e","button-icon-small":"components_color_bullet_new_button-icon-small_rz5pc","color-bullet":"components_color_bullet_new_color-bullet_b1w8U","mini":"components_color_bullet_new_mini_B261Z","is-not-library-color":"components_color_bullet_new_is-not-library-color_PSveA","color-bullet-wrapper":"components_color_bullet_new_color-bullet-wrapper_clt4r","is-gradient":"components_color_bullet_new_is-gradient_6RdV2","is-transparent":"components_color_bullet_new_is-transparent_g0iwn","color-text":"components_color_bullet_new_color-text_HM6mp","small-text":"components_color_bullet_new_small-text_Y4OeK","no-text":"components_color_bullet_new_no-text_pbTQf"}
|
||||
74
frontend/src/app/main/ui/components/color_bullet_new.scss
Normal file
74
frontend/src/app/main/ui/components/color_bullet_new.scss
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.color-bullet {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: var(--bullet-size);
|
||||
height: var(--bullet-size);
|
||||
margin-top: $s-4;
|
||||
border: $s-2 solid var(--color-bullet-border-color);
|
||||
border-radius: $br-circle;
|
||||
&.mini {
|
||||
border: 1px solid var(--color-bullet-border-color);
|
||||
}
|
||||
|
||||
&.is-not-library-color {
|
||||
overflow: hidden;
|
||||
border-radius: $br-8;
|
||||
|
||||
& .color-bullet-wrapper {
|
||||
clip-path: none;
|
||||
}
|
||||
&.mini {
|
||||
border-radius: $br-4;
|
||||
}
|
||||
}
|
||||
&.is-gradient {
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
|
||||
left center;
|
||||
background-color: var(--color-bullet-background-color);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
&.is-transparent {
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
|
||||
left center;
|
||||
background-color: var(--color-bullet-background-color);
|
||||
}
|
||||
.color-bullet-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
clip-path: circle(50%);
|
||||
}
|
||||
.color-bullet-wrapper > * {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--color-bullet-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
.color-text {
|
||||
@include twoLineTextEllipsis;
|
||||
@include titleTipography;
|
||||
width: $s-80;
|
||||
text-align: center;
|
||||
margin-top: $s-2;
|
||||
max-height: $s-28;
|
||||
color: var(--palette-text-color);
|
||||
&.small-text {
|
||||
@include textEllipsis;
|
||||
max-height: $s-16;
|
||||
}
|
||||
}
|
||||
|
||||
.no-text {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.components.context-menu-a11y.context-menu-a11y
|
||||
(ns app.main.ui.components.context-menu-a11y
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"button-primary":"components_context_menu_a11y_button-primary_FTrG6","button-secondary":"components_context_menu_a11y_button-secondary_tIeiM","button-icon":"components_context_menu_a11y_button-icon_eOLGl","button-icon-small":"components_context_menu_a11y_button-icon-small_bQvvB","context-menu":"components_context_menu_a11y_context-menu_bS2vM","context-menu-items":"components_context_menu_a11y_context-menu-items_lQC7H","context-menu-item":"components_context_menu_a11y_context-menu-item_E2GpJ","context-menu-action":"components_context_menu_a11y_context-menu-action_E53yg","submenu-back":"components_context_menu_a11y_submenu-back_AboXg","submenu-icon-back":"components_context_menu_a11y_submenu-icon-back_gy-B6","submenu":"components_context_menu_a11y_submenu_MuyM8","submenu-icon":"components_context_menu_a11y_submenu-icon_tWTVU","is-open":"components_context_menu_a11y_is-open_FbqIp","fixed":"components_context_menu_a11y_fixed_iJxPr","separator":"components_context_menu_a11y_separator_DrZoB","min-width":"components_context_menu_a11y_min-width_w-ron","is-selected":"components_context_menu_a11y_is-selected_UPMXx","is-selectable":"components_context_menu_a11y_is-selectable_n7sdb"}
|
||||
|
|
@ -9,13 +9,13 @@
|
|||
.context-menu {
|
||||
position: relative;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
opacity: $op-0;
|
||||
z-index: $z-index-2;
|
||||
|
||||
&.is-open {
|
||||
position: relative;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
opacity: $op-10;
|
||||
visibility: visible;
|
||||
}
|
||||
&.fixed {
|
||||
|
|
@ -28,9 +28,9 @@
|
|||
left: calc(-1 * $s-6);
|
||||
max-height: $s-480;
|
||||
min-width: $s-96;
|
||||
margin: 0;
|
||||
margin: $s-0;
|
||||
padding: $s-4;
|
||||
border-radius: $br8;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--menu-background-color);
|
||||
box-shadow: 0px 0px $s-12 0px var(--menu-shadow-color);
|
||||
overflow: auto;
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
height: $s-28;
|
||||
width: 100%;
|
||||
padding: $s-6;
|
||||
border-radius: $br8;
|
||||
border-radius: $br-8;
|
||||
white-space: nowrap;
|
||||
color: var(--menu-foreground-color);
|
||||
&.submenu {
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"button-primary":"context_menu_a11y_context_menu_a11y_button-primary_-nqKB","button-secondary":"context_menu_a11y_context_menu_a11y_button-secondary_3sivR","button-icon":"context_menu_a11y_context_menu_a11y_button-icon_45j80","button-icon-small":"context_menu_a11y_context_menu_a11y_button-icon-small_TNORx","context-menu":"context_menu_a11y_context_menu_a11y_context-menu_HLzPl","context-menu-items":"context_menu_a11y_context_menu_a11y_context-menu-items_r2JIA","context-menu-item":"context_menu_a11y_context_menu_a11y_context-menu-item_KB64Q","context-menu-action":"context_menu_a11y_context_menu_a11y_context-menu-action_x7nPU","submenu-back":"context_menu_a11y_context_menu_a11y_submenu-back_8iOw0","submenu-icon-back":"context_menu_a11y_context_menu_a11y_submenu-icon-back_vlCP7","submenu":"context_menu_a11y_context_menu_a11y_submenu_pUX19","submenu-icon":"context_menu_a11y_context_menu_a11y_submenu-icon_mlof4","is-open":"context_menu_a11y_context_menu_a11y_is-open_ASqQk","fixed":"context_menu_a11y_context_menu_a11y_fixed_5h8sL","separator":"context_menu_a11y_context_menu_a11y_separator_b1CzA","min-width":"context_menu_a11y_context_menu_a11y_min-width_jirG8","is-selected":"context_menu_a11y_context_menu_a11y_is-selected_jihDn","is-selectable":"context_menu_a11y_context_menu_a11y_is-selectable_wqvJa"}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.components.tab-container.tab-container
|
||||
(ns app.main.ui.components.tab-container
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"button-primary":"components_tab_container_button-primary_ibiAz","button-secondary":"components_tab_container_button-secondary_wZR80","button-icon":"components_tab_container_button-icon_2NhVr","button-icon-small":"components_tab_container_button-icon-small_yU7na","tab-container":"components_tab_container_tab-container_P6HRr","tab-container-content":"components_tab_container_tab-container-content_yfM9F","tab-element":"components_tab_container_tab-element_gBIwV","tab-container-tabs":"components_tab_container_tab-container-tabs_6gXOY","tab-container-tab-wrapper":"components_tab_container_tab-container-tab-wrapper_-ngrN","tab-container-tab-title":"components_tab_container_tab-container-tab-title_IN1Dx","current":"components_tab_container_current_jrovp","collapse-sidebar":"components_tab_container_collapse-sidebar_e5hFv","collapsed":"components_tab_container_collapsed_lfkjK"}
|
||||
|
|
@ -26,9 +26,9 @@
|
|||
flex-direction: row;
|
||||
gap: $s-2;
|
||||
height: $s-32;
|
||||
margin: $s-2 $s-2 0 $s-2;
|
||||
padding: $s-2;
|
||||
border-radius: $br8;
|
||||
margin: $s-4 $s-4 0 $s-4;
|
||||
padding: $s-2 $s-2 $s-2 0;
|
||||
border-radius: $br-8;
|
||||
background: var(--color-background-secondary);
|
||||
cursor: pointer;
|
||||
font-size: $fs12;
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
height: $s-28;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: $br5;
|
||||
border-radius: $br-5;
|
||||
background-color: transparent;
|
||||
color: var(--tab-foreground-color);
|
||||
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
height: 100%;
|
||||
width: $s-24;
|
||||
padding: 0;
|
||||
border-radius: $br5;
|
||||
border-radius: $br-5;
|
||||
svg {
|
||||
@include flexCenter;
|
||||
height: 12px;
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"button-primary":"tab_container_tab_container_button-primary_83Zqm","button-secondary":"tab_container_tab_container_button-secondary_lnkfT","button-icon":"tab_container_tab_container_button-icon_9pt7Y","button-icon-small":"tab_container_tab_container_button-icon-small_A8MNz","tab-container":"tab_container_tab_container_tab-container_UElWL","tab-container-content":"tab_container_tab_container_tab-container-content_5dioy","tab-element":"tab_container_tab_container_tab-element_ehGDK","tab-container-tabs":"tab_container_tab_container_tab-container-tabs_Vrl6C","tab-container-tab-wrapper":"tab_container_tab_container_tab-container-tab-wrapper_-g0lU","tab-container-tab-title":"tab_container_tab_container_tab-container-tab-title_lR2I4","current":"tab_container_tab_container_current_jHyvE","collapse-sidebar":"tab_container_tab_container_collapse-sidebar_cuRC2","collapsed":"tab_container_tab_container_collapsed_KWhAl"}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.components.tests.test-component
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require
|
||||
[app.util.keyboard :as kbd]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc test-component [{:keys [action icon name ]}]
|
||||
[:button.test-component
|
||||
{:class (css :button)
|
||||
:tab-index "0"
|
||||
:on-click action
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(action event)))}
|
||||
|
||||
(when icon [:span.logo icon])
|
||||
name])
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"button":"tests_test_component_button_8MQZj"}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
.button {
|
||||
color: var(--button-foreground-active);
|
||||
background-color: var(--button-background-active);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue