mirror of
https://github.com/penpot/penpot.git
synced 2025-01-06 14:50:20 -05:00
Clone over select
This commit is contained in:
Florian Schroedl
parent
2e23543c11
commit
f25db592a0
3 changed files with 260 additions and 2 deletions
|
|
@ -9,9 +9,9 @@
|
|||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.ui.workspace.tokens.theme-select :refer [theme-select]]
|
||||
[app.main.data.tokens :as dt]
|
||||
[app.main.data.tokens :as wdt]
|
||||
[app.main.ui.components.select :refer [select]]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.title-bar :refer [title-bar]]
|
||||
|
|
@ -197,7 +197,7 @@
|
|||
[:div {:class (stl/css :theme-sidebar)}
|
||||
[:span {:class (stl/css :themes-header)} "Themes"]
|
||||
[:div {:class (stl/css :theme-select-wrapper)}
|
||||
[:& select
|
||||
[:& theme-select
|
||||
{:default-value (some-> active-theme-ids first)
|
||||
:class (stl/css :select-format-wrapper)
|
||||
:options (mapcat (fn [[_ xs]]
|
||||
|
|
|
|||
129
frontend/src/app/main/ui/workspace/tokens/theme_select.cljs
Normal file
129
frontend/src/app/main/ui/workspace/tokens/theme_select.cljs
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
;; 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.workspace.tokens.theme-select
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
[app.common.uuid :as uuid]
|
||||
[app.main.ui.components.dropdown :refer [dropdown]]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
|
||||
(defn- as-key-value
|
||||
[item]
|
||||
(if (map? item)
|
||||
[(:value item) (:label item) (:icon item)]
|
||||
[item item item]))
|
||||
|
||||
(mf/defc theme-select
|
||||
[{:keys [default-value options class dropdown-class is-open? on-change on-pointer-enter-option on-pointer-leave-option disabled]}]
|
||||
(let [label-index (mf/with-memo [options]
|
||||
(into {} (map as-key-value) options))
|
||||
|
||||
state* (mf/use-state
|
||||
{:id (uuid/next)
|
||||
:is-open? (or is-open? false)
|
||||
:current-value default-value})
|
||||
|
||||
state (deref state*)
|
||||
current-id (get state :id)
|
||||
current-value (get state :current-value)
|
||||
current-label (get label-index current-value)
|
||||
is-open? (:is-open? state)
|
||||
|
||||
dropdown-element* (mf/use-ref nil)
|
||||
dropdown-direction* (mf/use-state "down")
|
||||
dropdown-direction-change* (mf/use-ref 0)
|
||||
|
||||
open-dropdown
|
||||
(mf/use-fn
|
||||
(mf/deps disabled)
|
||||
(fn []
|
||||
(when-not disabled
|
||||
(swap! state* assoc :is-open? true))))
|
||||
|
||||
close-dropdown (mf/use-fn #(swap! state* assoc :is-open? false))
|
||||
|
||||
select-item
|
||||
(mf/use-fn
|
||||
(mf/deps on-change)
|
||||
(fn [event]
|
||||
(let [value (-> (dom/get-current-target event)
|
||||
(dom/get-data "value")
|
||||
(d/read-string))]
|
||||
|
||||
(swap! state* assoc :current-value value)
|
||||
(when (fn? on-change)
|
||||
(on-change value)))))
|
||||
|
||||
highlight-item
|
||||
(mf/use-fn
|
||||
(mf/deps on-pointer-enter-option)
|
||||
(fn [event]
|
||||
(when (fn? on-pointer-enter-option)
|
||||
(let [value (-> (dom/get-current-target event)
|
||||
(dom/get-data "value")
|
||||
(d/read-string))]
|
||||
(on-pointer-enter-option value)))))
|
||||
|
||||
unhighlight-item
|
||||
(mf/use-fn
|
||||
(mf/deps on-pointer-leave-option)
|
||||
(fn [event]
|
||||
(when (fn? on-pointer-leave-option)
|
||||
(let [value (-> (dom/get-current-target event)
|
||||
(dom/get-data "value")
|
||||
(d/read-string))]
|
||||
(on-pointer-leave-option value)))))]
|
||||
|
||||
(mf/with-effect [default-value]
|
||||
(swap! state* assoc :current-value default-value))
|
||||
|
||||
(mf/with-effect [is-open? dropdown-element*]
|
||||
(let [dropdown-element (mf/ref-val dropdown-element*)]
|
||||
(when (and (= 0 (mf/ref-val dropdown-direction-change*)) dropdown-element)
|
||||
(let [is-outside? (dom/is-element-outside? dropdown-element)]
|
||||
(reset! dropdown-direction* (if is-outside? "up" "down"))
|
||||
(mf/set-ref-val! dropdown-direction-change* (inc (mf/ref-val dropdown-direction-change*)))))))
|
||||
|
||||
(let [selected-option (first (filter #(= (:value %) default-value) options))
|
||||
current-icon (:icon selected-option)
|
||||
current-icon-ref (i/key->icon current-icon)]
|
||||
[:div {:on-click open-dropdown
|
||||
:class (dm/str (stl/css-case :custom-select true
|
||||
:disabled disabled
|
||||
:icon (some? current-icon-ref))
|
||||
" " class)}
|
||||
(when (and current-icon current-icon-ref)
|
||||
[:span {:class (stl/css :current-icon)} current-icon-ref])
|
||||
[:span {:class (stl/css :current-label)} current-label]
|
||||
[:span {:class (stl/css :dropdown-button)} i/arrow]
|
||||
[:& dropdown {:show is-open? :on-close close-dropdown}
|
||||
[:ul {:ref dropdown-element* :data-direction @dropdown-direction*
|
||||
:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))}
|
||||
(for [[index item] (d/enumerate options)]
|
||||
(if (= :separator item)
|
||||
[:li {:class (dom/classnames (stl/css :separator) true)
|
||||
:key (dm/str current-id "-" index)}]
|
||||
(let [[value label icon] (as-key-value item)
|
||||
icon-ref (i/key->icon icon)]
|
||||
[:li
|
||||
{:key (dm/str current-id "-" index)
|
||||
:class (stl/css-case
|
||||
:checked-element true
|
||||
:disabled (:disabled item)
|
||||
:is-selected (= value current-value))
|
||||
:data-value (pr-str value)
|
||||
:on-pointer-enter highlight-item
|
||||
:on-pointer-leave unhighlight-item
|
||||
:on-click select-item}
|
||||
(when (and icon icon-ref) [:span {:class (stl/css :icon)} icon-ref])
|
||||
[:span {:class (stl/css :label)} label]
|
||||
[:span {:class (stl/css :check-icon)} i/tick]])))]]])))
|
||||
129
frontend/src/app/main/ui/workspace/tokens/theme_select.scss
Normal file
129
frontend/src/app/main/ui/workspace/tokens/theme_select.scss
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
// 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";
|
||||
|
||||
.custom-select {
|
||||
--border-color: var(--menu-background-color);
|
||||
--bg-color: var(--menu-background-color);
|
||||
--icon-color: var(--icon-foreground);
|
||||
--text-color: var(--menu-foreground-color);
|
||||
@extend .new-scrollbar;
|
||||
@include bodySmallTypography;
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: $s-8;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--bg-color);
|
||||
border: $s-1 solid var(--border-color);
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
|
||||
&.icon {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
--bg-color: var(--menu-background-color-hover);
|
||||
--border-color: var(--menu-background-color);
|
||||
--icon-color: var(--menu-foreground-color-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--bg-color: var(--menu-background-color-focus);
|
||||
--border-color: var(--menu-background-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
--bg-color: var(--menu-background-color-disabled);
|
||||
--border-color: var(--menu-border-color-disabled);
|
||||
--icon-color: var(--menu-foreground-color-disabled);
|
||||
--text-color: var(--menu-foreground-color-disabled);
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.dropdown-button {
|
||||
@include flexCenter;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
transform: rotate(90deg);
|
||||
stroke: var(--icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
.current-icon {
|
||||
@include flexCenter;
|
||||
width: $s-24;
|
||||
padding-right: $s-4;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-select-dropdown {
|
||||
@extend .dropdown-wrapper;
|
||||
.separator {
|
||||
margin: 0;
|
||||
height: $s-12;
|
||||
border-block-start: $s-1 solid var(--dropdown-separator-color);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-select-dropdown[data-direction="up"] {
|
||||
bottom: $s-32;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
.checked-element {
|
||||
@extend .dropdown-element-base;
|
||||
.icon {
|
||||
@include flexCenter;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
padding-right: $s-4;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
@include flexCenter;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
visibility: hidden;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
color: var(--menu-foreground-color);
|
||||
.check-icon svg {
|
||||
stroke: var(--menu-foreground-color);
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.current-label {
|
||||
@include textEllipsis;
|
||||
}
|
||||
Loading…
Reference in a new issue