3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Redesign design tab phase one

Browse source
This commit is contained in:
Eva 2023-08-29 13:50:42 +02:00
parent d7dea040af
commit 9ed06c4483
159 changed files with 4150 additions and 1171 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/ui/components/color_bullet_new.css.json
View file

@ -1 +1 @@
{"button-primary":"components_color_bullet_new_button-primary_pDkQg","button-secondary":"components_color_bullet_new_button-secondary_y3A8V","button-tertiary":"components_color_bullet_new_button-tertiary_zPQ8t","button-warning":"components_color_bullet_new_button-warning_OxPWp","button-disabled":"components_color_bullet_new_button-disabled_Zx4Ur","button-tag":"components_color_bullet_new_button-tag_2Ur4i","button-icon":"components_color_bullet_new_button-icon_uAC1e","button-icon-small":"components_color_bullet_new_button-icon-small_rz5pc","link":"components_color_bullet_new_link_S2meo","asset-element":"components_color_bullet_new_asset-element_s3Yqx","new-scrollbar":"components_color_bullet_new_new-scrollbar_7U23G","menu-dropdown":"components_color_bullet_new_menu-dropdown_tyRPJ","menu-item":"components_color_bullet_new_menu-item_fPc3j","shortcut":"components_color_bullet_new_shortcut_qAY-Y","shortcut-key":"components_color_bullet_new_shortcut-key_sq-iu","user-icon":"components_color_bullet_new_user-icon_0LhmU","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","spin-animation":"components_color_bullet_new_spin-animation_X38rj"}
{"button-primary":"components_color_bullet_new_button-primary_pDkQg","button-secondary":"components_color_bullet_new_button-secondary_y3A8V","button-tertiary":"components_color_bullet_new_button-tertiary_zPQ8t","button-radio":"components_color_bullet_new_button-radio_gpyOW","button-warning":"components_color_bullet_new_button-warning_OxPWp","button-disabled":"components_color_bullet_new_button-disabled_Zx4Ur","button-tag":"components_color_bullet_new_button-tag_2Ur4i","button-icon":"components_color_bullet_new_button-icon_uAC1e","button-icon-small":"components_color_bullet_new_button-icon-small_rz5pc","link":"components_color_bullet_new_link_S2meo","asset-element":"components_color_bullet_new_asset-element_s3Yqx","input-element":"components_color_bullet_new_input-element_jCoxE","new-scrollbar":"components_color_bullet_new_new-scrollbar_7U23G","menu-dropdown":"components_color_bullet_new_menu-dropdown_tyRPJ","menu-item":"components_color_bullet_new_menu-item_fPc3j","shortcut":"components_color_bullet_new_shortcut_qAY-Y","shortcut-key":"components_color_bullet_new_shortcut-key_sq-iu","user-icon":"components_color_bullet_new_user-icon_0LhmU","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","spin-animation":"components_color_bullet_new_spin-animation_X38rj"}

2
frontend/src/app/main/ui/components/context_menu_a11y.css.json
View file

@ -1 +1 @@
{"button-primary":"components_context_menu_a11y_button-primary_FTrG6","button-secondary":"components_context_menu_a11y_button-secondary_tIeiM","button-tertiary":"components_context_menu_a11y_button-tertiary_0A2mW","button-warning":"components_context_menu_a11y_button-warning_7dlJY","button-disabled":"components_context_menu_a11y_button-disabled_WROtA","button-tag":"components_context_menu_a11y_button-tag_iLpM-","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","selected":"components_context_menu_a11y_selected_on-en","selected-icon":"components_context_menu_a11y_selected-icon_H2S7W","button-icon":"components_context_menu_a11y_button-icon_eOLGl","button-icon-small":"components_context_menu_a11y_button-icon-small_bQvvB","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","link":"components_context_menu_a11y_link_86RaE","asset-element":"components_context_menu_a11y_asset-element_r3q1-","new-scrollbar":"components_context_menu_a11y_new-scrollbar_tgX6p","menu-dropdown":"components_context_menu_a11y_menu-dropdown_-wxYa","menu-item":"components_context_menu_a11y_menu-item_J-5tZ","shortcut":"components_context_menu_a11y_shortcut_xHDI7","shortcut-key":"components_context_menu_a11y_shortcut-key_kpESe","user-icon":"components_context_menu_a11y_user-icon_Z4800","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","spin-animation":"components_context_menu_a11y_spin-animation_QUc-i"}
{"button-primary":"components_context_menu_a11y_button-primary_FTrG6","button-secondary":"components_context_menu_a11y_button-secondary_tIeiM","button-tertiary":"components_context_menu_a11y_button-tertiary_0A2mW","button-radio":"components_context_menu_a11y_button-radio_vymcq","button-warning":"components_context_menu_a11y_button-warning_7dlJY","button-disabled":"components_context_menu_a11y_button-disabled_WROtA","button-tag":"components_context_menu_a11y_button-tag_iLpM-","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","selected":"components_context_menu_a11y_selected_on-en","selected-icon":"components_context_menu_a11y_selected-icon_H2S7W","button-icon":"components_context_menu_a11y_button-icon_eOLGl","button-icon-small":"components_context_menu_a11y_button-icon-small_bQvvB","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","link":"components_context_menu_a11y_link_86RaE","asset-element":"components_context_menu_a11y_asset-element_r3q1-","input-element":"components_context_menu_a11y_input-element_QQ1zU","new-scrollbar":"components_context_menu_a11y_new-scrollbar_tgX6p","menu-dropdown":"components_context_menu_a11y_menu-dropdown_-wxYa","menu-item":"components_context_menu_a11y_menu-item_J-5tZ","shortcut":"components_context_menu_a11y_shortcut_xHDI7","shortcut-key":"components_context_menu_a11y_shortcut-key_kpESe","user-icon":"components_context_menu_a11y_user-icon_Z4800","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","spin-animation":"components_context_menu_a11y_spin-animation_QUc-i"}

2
frontend/src/app/main/ui/components/editable_label.css.json
View file

@ -1 +1 @@
{"button-primary":"components_editable_label_button-primary_fp-ma","button-secondary":"components_editable_label_button-secondary_QPaT-","button-tertiary":"components_editable_label_button-tertiary_wOORv","button-warning":"components_editable_label_button-warning_4iYB7","button-disabled":"components_editable_label_button-disabled_oVR0N","button-tag":"components_editable_label_button-tag_pwEqY","button-icon":"components_editable_label_button-icon_acX7H","button-icon-small":"components_editable_label_button-icon-small_tSz5O","link":"components_editable_label_link_pHsNR","asset-element":"components_editable_label_asset-element_Bs5bh","new-scrollbar":"components_editable_label_new-scrollbar_wEEzl","menu-dropdown":"components_editable_label_menu-dropdown_3EWKG","menu-item":"components_editable_label_menu-item_lLMBv","shortcut":"components_editable_label_shortcut_sumJi","shortcut-key":"components_editable_label_shortcut-key_ZxlB1","user-icon":"components_editable_label_user-icon_bNZJf","editable-label-input":"components_editable_label_editable-label-input_q2Puk","spin-animation":"components_editable_label_spin-animation_ziMDb"}
{"button-primary":"components_editable_label_button-primary_fp-ma","button-secondary":"components_editable_label_button-secondary_QPaT-","button-tertiary":"components_editable_label_button-tertiary_wOORv","button-radio":"components_editable_label_button-radio_nKlBJ","button-warning":"components_editable_label_button-warning_4iYB7","button-disabled":"components_editable_label_button-disabled_oVR0N","button-tag":"components_editable_label_button-tag_pwEqY","button-icon":"components_editable_label_button-icon_acX7H","button-icon-small":"components_editable_label_button-icon-small_tSz5O","link":"components_editable_label_link_pHsNR","asset-element":"components_editable_label_asset-element_Bs5bh","input-element":"components_editable_label_input-element_VRvJr","new-scrollbar":"components_editable_label_new-scrollbar_wEEzl","menu-dropdown":"components_editable_label_menu-dropdown_3EWKG","menu-item":"components_editable_label_menu-item_lLMBv","shortcut":"components_editable_label_shortcut_sumJi","shortcut-key":"components_editable_label_shortcut-key_ZxlB1","user-icon":"components_editable_label_user-icon_bNZJf","editable-label-input":"components_editable_label_editable-label-input_q2Puk","spin-animation":"components_editable_label_spin-animation_ziMDb"}

81
frontend/src/app/main/ui/components/radio_buttons.cljs
View file

@ -8,7 +8,6 @@
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.math :as math]
[app.main.ui.formats :as fmt]
[app.util.dom :as dom]
[rumext.v2 :as mf]))
@ -21,55 +20,80 @@
[props]
(let [context (mf/use-ctx context)
icon (unchecked-get props "icon")
id (unchecked-get props "id")
value (unchecked-get props "value")
icon (unchecked-get props "icon")
id (unchecked-get props "id")
value (unchecked-get props "value")
disabled (unchecked-get props "disabled")
title (unchecked-get props "title")
unique-key (unchecked-get props "unique-key")
icon-class (unchecked-get props "icon-class")
on-change (unchecked-get context "on-change")
selected (unchecked-get context "selected")
name (unchecked-get context "name")
on-change (unchecked-get context "on-change")
selected (unchecked-get context "selected")
name (unchecked-get context "name")
encode-fn (unchecked-get context "encode-fn")
encode-fn (unchecked-get context "encode-fn")
checked? (= selected value)]
checked? (= selected value)]
[:label {:for id
:title title
:key unique-key
:tabIndex "0"
:class (stl/css-case
:radio-icon true
:checked checked?)}
:checked checked?
:disabled disabled)}
(when (some? icon) icon)
(if (some? icon)
[:span {:class (when icon-class icon-class)}
icon]
[:span {:class (stl/css :title-name)}
(encode-fn value)])
[:input {:id id
:on-change on-change
:type "radio"
:name name
:disabled disabled
:value (encode-fn value)
:checked checked?}]]))
(mf/defc nilable-option
{::mf/wrap-props false}
[props]
(let [context (mf/use-ctx context)
icon (unchecked-get props "icon")
id (unchecked-get props "id")
value (unchecked-get props "value")
(let [context (mf/use-ctx context)
icon (unchecked-get props "icon")
id (unchecked-get props "id")
value (unchecked-get props "value")
disabled (unchecked-get props "disabled")
unique-key (unchecked-get props "unique-key")
icon-class (unchecked-get props "icon-class")
on-change (unchecked-get context "on-change")
selected (unchecked-get context "selected")
name (unchecked-get context "name")
on-change (unchecked-get context "on-change")
selected (unchecked-get context "selected")
name (unchecked-get context "name")
encode-fn (unchecked-get context "encode-fn")
checked? (= selected value)]
encode-fn (unchecked-get context "encode-fn")
checked? (= selected value)]
[:label {:for id
:key unique-key
:class (stl/css-case
:radio-icon true
:disabled disabled
:checked checked?)}
icon
(if (some? icon)
[:span {:class (when icon-class icon-class)}
icon]
[:span {:class (stl/css :title-name)}
(encode-fn value)])
[:input {:id id
:on-change on-change
:type "checkbox"
:name name
:disabled disabled
:value (encode-fn value)
:checked checked?}]]))
@ -80,6 +104,8 @@
on-change (unchecked-get props "on-change")
selected (unchecked-get props "selected")
name (unchecked-get props "name")
class (unchecked-get props "class")
wide (unchecked-get props "wide")
encode-fn (d/nilv (unchecked-get props "encode-fn") identity)
decode-fn (d/nilv (unchecked-get props "encode-fn") identity)
@ -89,9 +115,11 @@
1)
width (mf/with-memo [nitems]
(fmt/format-pixels
(+ (math/pow 2 nitems)
(* 28 nitems))))
(if (= wide true)
"unset"
(fmt/format-pixels
(+ (* 4 (- nitems 1))
(* 28 nitems)))))
on-change'
(mf/use-fn
@ -110,6 +138,7 @@
:decode-fn decode-fn})]
[:& (mf/provider context) {:value context-value}
[:div {:class (stl/css :radio-btn-wrapper)
:style {:width width}}
[:div {:class (stl/css-case :radio-btn-wrapper true
class true)
:style {:width width}}
children]]))

2
frontend/src/app/main/ui/components/radio_buttons.css.json
View file

@ -1 +1 @@
{"button-primary":"components_radio_buttons_button-primary_-XZNO","button-secondary":"components_radio_buttons_button-secondary_yj3Oe","button-tertiary":"components_radio_buttons_button-tertiary_s2RvI","radio-icon":"components_radio_buttons_radio-icon_1OnG1","button-warning":"components_radio_buttons_button-warning_lkAzy","button-disabled":"components_radio_buttons_button-disabled_C-rUC","button-tag":"components_radio_buttons_button-tag_4VTp-","button-icon":"components_radio_buttons_button-icon_jP0XC","button-icon-small":"components_radio_buttons_button-icon-small_3AO-R","link":"components_radio_buttons_link_cdc3r","asset-element":"components_radio_buttons_asset-element_l2wMX","new-scrollbar":"components_radio_buttons_new-scrollbar_m-Mwb","menu-dropdown":"components_radio_buttons_menu-dropdown_Qn0oF","menu-item":"components_radio_buttons_menu-item_SWV2N","shortcut":"components_radio_buttons_shortcut_25Uf9","shortcut-key":"components_radio_buttons_shortcut-key_S2Y64","user-icon":"components_radio_buttons_user-icon_Ab9su","radio-btn-wrapper":"components_radio_buttons_radio-btn-wrapper_mH6QX","checked":"components_radio_buttons_checked_sjVzy","spin-animation":"components_radio_buttons_spin-animation_iz1sC"}
{"button-primary":"components_radio_buttons_button-primary_-XZNO","button-secondary":"components_radio_buttons_button-secondary_yj3Oe","button-tertiary":"components_radio_buttons_button-tertiary_s2RvI","button-radio":"components_radio_buttons_button-radio_AfWrP","radio-icon":"components_radio_buttons_radio-icon_1OnG1","button-warning":"components_radio_buttons_button-warning_lkAzy","button-disabled":"components_radio_buttons_button-disabled_C-rUC","button-tag":"components_radio_buttons_button-tag_4VTp-","button-icon":"components_radio_buttons_button-icon_jP0XC","button-icon-small":"components_radio_buttons_button-icon-small_3AO-R","link":"components_radio_buttons_link_cdc3r","asset-element":"components_radio_buttons_asset-element_l2wMX","input-element":"components_radio_buttons_input-element_iC9Tc","new-scrollbar":"components_radio_buttons_new-scrollbar_m-Mwb","menu-dropdown":"components_radio_buttons_menu-dropdown_Qn0oF","menu-item":"components_radio_buttons_menu-item_SWV2N","shortcut":"components_radio_buttons_shortcut_25Uf9","shortcut-key":"components_radio_buttons_shortcut-key_S2Y64","user-icon":"components_radio_buttons_user-icon_Ab9su","radio-btn-wrapper":"components_radio_buttons_radio-btn-wrapper_mH6QX","title-name":"components_radio_buttons_title-name_UZBUe","checked":"components_radio_buttons_checked_sjVzy","disabled":"components_radio_buttons_disabled_V4CO5","spin-animation":"components_radio_buttons_spin-animation_iz1sC"}

35
frontend/src/app/main/ui/components/radio_buttons.scss
View file

@ -10,12 +10,12 @@
@include flexCenter;
border-radius: $br-8;
height: $s-32;
background-color: var(--radio-btns-background-color);
background-color: var(--input-background-color);
}
.radio-icon {
@extend .button-tertiary;
@extend .button-radio;
height: $s-28;
width: 100%;
flex-grow: 1;
border-radius: $s-6;
border: solid $s-2 transparent;
box-sizing: content-box;
@ -26,17 +26,38 @@
@extend .button-icon;
stroke: var(--radio-btn-foreground-color);
}
&:hover {
border: solid $s-2 var(--radio-btns-background-color);
.title-name {
@include tabTitleTipography;
color: var(--radio-btn-foreground-color);
}
&.checked {
background-color: var(--radio-btn-background-color-selected);
border: $s-2 solid var(--radio-btn-border-color-selected);
svg {
stroke: var(--radio-btn-foreground-color-selected);
}
.title-name {
color: var(--radio-btn-foreground-color-selected);
}
}
&.disabled {
cursor: default;
svg {
stroke: var(--button-foreground-color-disabled);
}
.title-name {
color: var(--button-foreground-color-disabled);
}
&:hover {
border: $s-2 solid var(--radio-btn-border-color-selected);
border: none;
background-color: transparent;
svg {
stroke: var(--button-foreground-color-disabled);
}
.title-name {
color: var(--button-foreground-color-disabled);
}
}
}
}

2
frontend/src/app/main/ui/components/search_bar.css.json
View file

@ -1 +1 @@
{"button-primary":"components_search_bar_button-primary_-9D1J","button-secondary":"components_search_bar_button-secondary_GbDgI","button-tertiary":"components_search_bar_button-tertiary_VTCfX","button-warning":"components_search_bar_button-warning_A-XnD","button-disabled":"components_search_bar_button-disabled_Y9B7M","button-tag":"components_search_bar_button-tag_dKink","search-box":"components_search_bar_search-box_AFEzz","search-input-wrapper":"components_search_bar_search-input-wrapper_Djsml","clear":"components_search_bar_clear_B6lfz","button-icon":"components_search_bar_button-icon_CdwNa","button-icon-small":"components_search_bar_button-icon-small_gSOsT","link":"components_search_bar_link_VjGo-","asset-element":"components_search_bar_asset-element_rH-5k","new-scrollbar":"components_search_bar_new-scrollbar_rN-Bt","menu-dropdown":"components_search_bar_menu-dropdown_BDHD4","menu-item":"components_search_bar_menu-item_7wbp0","shortcut":"components_search_bar_shortcut_sPxgB","shortcut-key":"components_search_bar_shortcut-key_fp81A","user-icon":"components_search_bar_user-icon_QZlpB","has-children":"components_search_bar_has-children_u-VSq","spin-animation":"components_search_bar_spin-animation_Uxq5m"}
{"button-primary":"components_search_bar_button-primary_-9D1J","button-secondary":"components_search_bar_button-secondary_GbDgI","button-tertiary":"components_search_bar_button-tertiary_VTCfX","button-radio":"components_search_bar_button-radio_vMkry","button-warning":"components_search_bar_button-warning_A-XnD","button-disabled":"components_search_bar_button-disabled_Y9B7M","button-tag":"components_search_bar_button-tag_dKink","search-box":"components_search_bar_search-box_AFEzz","search-input-wrapper":"components_search_bar_search-input-wrapper_Djsml","clear":"components_search_bar_clear_B6lfz","button-icon":"components_search_bar_button-icon_CdwNa","button-icon-small":"components_search_bar_button-icon-small_gSOsT","link":"components_search_bar_link_VjGo-","asset-element":"components_search_bar_asset-element_rH-5k","input-element":"components_search_bar_input-element_9SCvY","new-scrollbar":"components_search_bar_new-scrollbar_rN-Bt","menu-dropdown":"components_search_bar_menu-dropdown_BDHD4","menu-item":"components_search_bar_menu-item_7wbp0","shortcut":"components_search_bar_shortcut_sPxgB","shortcut-key":"components_search_bar_shortcut-key_fp81A","user-icon":"components_search_bar_user-icon_QZlpB","has-children":"components_search_bar_has-children_u-VSq","spin-animation":"components_search_bar_spin-animation_Uxq5m"}

1
frontend/src/app/main/ui/components/search_bar.scss
View file

@ -56,6 +56,7 @@
svg {
@extend .button-icon-small;
color: transparent;
stroke: var(--icon-foreground);
}
}
}

2
frontend/src/app/main/ui/components/select.cljs
View file

@ -107,8 +107,6 @@
[:span {:class (css :label)} label]
[:span {:class (css :check-icon)} i/tick-refactor]])))]]]
[:div.custom-select {:on-click open-dropdown :class class}
[:span current-label]
[:span.dropdown-button i/arrow-down]

2
frontend/src/app/main/ui/components/select.css.json
View file

@ -1 +1 @@
{"button-primary":"components_select_button-primary_peYzv","button-secondary":"components_select_button-secondary_Kse6w","button-tertiary":"components_select_button-tertiary_srwoV","button-warning":"components_select_button-warning_i4KNg","button-disabled":"components_select_button-disabled_1r9-1","button-tag":"components_select_button-tag_AJXtX","button-icon":"components_select_button-icon_86LWm","custom-select":"components_select_custom-select_OM8-6","dropdown-button":"components_select_dropdown-button_IcpuR","button-icon-small":"components_select_button-icon-small_H0Bue","checked-element":"components_select_checked-element_c5-i4","check-icon":"components_select_check-icon_9x082","link":"components_select_link_tQfh4","asset-element":"components_select_asset-element_5vxj7","new-scrollbar":"components_select_new-scrollbar_-E7lz","menu-dropdown":"components_select_menu-dropdown_kxQ7x","menu-item":"components_select_menu-item_ZCcV2","shortcut":"components_select_shortcut_RvVt6","shortcut-key":"components_select_shortcut-key_CLR8L","user-icon":"components_select_user-icon_tLWU4","current-label":"components_select_current-label_CUaQs","custom-select-dropdown":"components_select_custom-select-dropdown_2yZj9","label":"components_select_label_kTY8t","is-selected":"components_select_is-selected_nTUGr","spin-animation":"components_select_spin-animation_YEDae"}
{"button-primary":"components_select_button-primary_peYzv","button-secondary":"components_select_button-secondary_Kse6w","button-tertiary":"components_select_button-tertiary_srwoV","button-radio":"components_select_button-radio_xDb5D","button-warning":"components_select_button-warning_i4KNg","button-disabled":"components_select_button-disabled_1r9-1","button-tag":"components_select_button-tag_AJXtX","button-icon":"components_select_button-icon_86LWm","custom-select":"components_select_custom-select_OM8-6","dropdown-button":"components_select_dropdown-button_IcpuR","button-icon-small":"components_select_button-icon-small_H0Bue","checked-element":"components_select_checked-element_c5-i4","check-icon":"components_select_check-icon_9x082","link":"components_select_link_tQfh4","asset-element":"components_select_asset-element_5vxj7","input-element":"components_select_input-element_-7lw0","new-scrollbar":"components_select_new-scrollbar_-E7lz","menu-dropdown":"components_select_menu-dropdown_kxQ7x","menu-item":"components_select_menu-item_ZCcV2","shortcut":"components_select_shortcut_RvVt6","shortcut-key":"components_select_shortcut-key_CLR8L","user-icon":"components_select_user-icon_tLWU4","current-label":"components_select_current-label_CUaQs","custom-select-dropdown":"components_select_custom-select-dropdown_2yZj9","label":"components_select_label_kTY8t","is-selected":"components_select_is-selected_nTUGr","spin-animation":"components_select_spin-animation_YEDae"}

4
frontend/src/app/main/ui/components/select.scss
View file

@ -22,6 +22,7 @@
svg {
@extend .button-icon;
transform: rotate(90deg);
stroke: var(--icon-foreground);
}
}
.custom-select-dropdown {
@ -42,7 +43,7 @@
display: flex;
align-items: center;
height: $s-32;
padding: $s-8;
padding: 0 $s-8;
border-radius: $br-6;
color: var(--menu-foreground-color);
.label {
@ -55,6 +56,7 @@
svg {
@extend .button-icon-small;
visibility: hidden;
stroke: var(--icon-foreground);
}
}

4
frontend/src/app/main/ui/components/tab_container.cljs
View file

@ -36,6 +36,7 @@
collapsable? (unchecked-get props "collapsable?")
handle-collapse (unchecked-get props "handle-collapse")
klass (unchecked-get props "klass")
content-class (unchecked-get props "content-class")
state (mf/use-state #(or selected (-> children first .-props .-id)))
selected (or selected @state)
@ -69,5 +70,6 @@
:class (dom/classnames (css :tab-container-tab-title) true
(css :current) (= selected id))}
title]))]]
[:div {:class (dom/classnames (css :tab-container-content) true)}
[:div {:class (dom/classnames (css :tab-container-content) true
content-class (some? content-class))}
(d/seek #(= selected (-> % .-props .-id)) children)]]))

2
frontend/src/app/main/ui/components/tab_container.css.json
View file

@ -1 +1 @@
{"button-primary":"components_tab_container_button-primary_ibiAz","button-secondary":"components_tab_container_button-secondary_wZR80","button-tertiary":"components_tab_container_button-tertiary_JHJAx","button-warning":"components_tab_container_button-warning_SFGWo","button-disabled":"components_tab_container_button-disabled_FZXHD","button-tag":"components_tab_container_button-tag_NnL8y","button-icon":"components_tab_container_button-icon_2NhVr","button-icon-small":"components_tab_container_button-icon-small_yU7na","link":"components_tab_container_link_KmrN7","asset-element":"components_tab_container_asset-element_1-YWa","new-scrollbar":"components_tab_container_new-scrollbar_L-puJ","menu-dropdown":"components_tab_container_menu-dropdown_hkr9S","menu-item":"components_tab_container_menu-item_jbhvD","shortcut":"components_tab_container_shortcut_PBP6z","shortcut-key":"components_tab_container_shortcut-key_eFC8J","user-icon":"components_tab_container_user-icon_pY-wv","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","spin-animation":"components_tab_container_spin-animation_mPm0p"}
{"button-primary":"components_tab_container_button-primary_ibiAz","button-secondary":"components_tab_container_button-secondary_wZR80","button-tertiary":"components_tab_container_button-tertiary_JHJAx","button-radio":"components_tab_container_button-radio_oNen8","button-warning":"components_tab_container_button-warning_SFGWo","button-disabled":"components_tab_container_button-disabled_FZXHD","button-tag":"components_tab_container_button-tag_NnL8y","button-icon":"components_tab_container_button-icon_2NhVr","button-icon-small":"components_tab_container_button-icon-small_yU7na","link":"components_tab_container_link_KmrN7","asset-element":"components_tab_container_asset-element_1-YWa","input-element":"components_tab_container_input-element_m8IEj","new-scrollbar":"components_tab_container_new-scrollbar_L-puJ","menu-dropdown":"components_tab_container_menu-dropdown_hkr9S","menu-item":"components_tab_container_menu-item_jbhvD","shortcut":"components_tab_container_shortcut_PBP6z","shortcut-key":"components_tab_container_shortcut-key_eFC8J","user-icon":"components_tab_container_user-icon_pY-wv","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","spin-animation":"components_tab_container_spin-animation_mPm0p"}

2
frontend/src/app/main/ui/components/tab_container.scss
View file

@ -17,7 +17,7 @@
}
.tab-element {
height: 100%;
height: fit-content;
}
}
.tab-container-tabs {

6
frontend/src/app/main/ui/components/title_bar.cljs
View file

@ -13,14 +13,14 @@
(mf/defc title-bar
{::mf/wrap-props false}
[{:keys [collapsable? collapsed? on-collapsed title children on-btn-click btn-children klass]}]
(let [klass (dm/str (stl/css :title-bar) " " klass)]
[{:keys [collapsable? collapsed? on-collapsed title children on-btn-click btn-children class]}]
(let [klass (dm/str (stl/css :title-bar) " " class)]
[:div {:class klass}
(if collapsable?
[:button {:class (stl/css :toggle-btn) :on-click on-collapsed}
[:span {:class (stl/css-case
:collased-icon true
:rotated collapsed?)}
:rotated collapsed?)}
i/arrow-refactor]
[:div {:class (stl/css :title)} title]]
[:div {:class (stl/css :title-only)} title])

2
frontend/src/app/main/ui/components/title_bar.css.json
View file

@ -1 +1 @@
{"button-primary":"components_title_bar_button-primary_svLtU","button-secondary":"components_title_bar_button-secondary_JA5NP","button-tertiary":"components_title_bar_button-tertiary_yqQfO","title-bar":"components_title_bar_title-bar_oUkS0","title-button":"components_title_bar_title-button_xTE-7","button-warning":"components_title_bar_button-warning_XpojP","button-disabled":"components_title_bar_button-disabled_X72-5","button-tag":"components_title_bar_button-tag_o9yFT","button-icon":"components_title_bar_button-icon_ROHrz","button-icon-small":"components_title_bar_button-icon-small_WibJp","toggle-btn":"components_title_bar_toggle-btn_9ekUv","collased-icon":"components_title_bar_collased-icon_SJ1ls","link":"components_title_bar_link_m-lOt","asset-element":"components_title_bar_asset-element_64u6f","new-scrollbar":"components_title_bar_new-scrollbar_dkyAb","menu-dropdown":"components_title_bar_menu-dropdown_uk31D","menu-item":"components_title_bar_menu-item_cGiAC","shortcut":"components_title_bar_shortcut_M9Wv0","shortcut-key":"components_title_bar_shortcut-key_w8Q95","user-icon":"components_title_bar_user-icon_FMwxz","title":"components_title_bar_title_qPuju","title-only":"components_title_bar_title-only_aSsdC","rotated":"components_title_bar_rotated_9z7Rn","spin-animation":"components_title_bar_spin-animation_7EFXa"}
{"button-primary":"components_title_bar_button-primary_svLtU","button-secondary":"components_title_bar_button-secondary_JA5NP","button-tertiary":"components_title_bar_button-tertiary_yqQfO","title-bar":"components_title_bar_title-bar_oUkS0","title-button":"components_title_bar_title-button_xTE-7","button-radio":"components_title_bar_button-radio_vhlSa","button-warning":"components_title_bar_button-warning_XpojP","button-disabled":"components_title_bar_button-disabled_X72-5","button-tag":"components_title_bar_button-tag_o9yFT","button-icon":"components_title_bar_button-icon_ROHrz","button-icon-small":"components_title_bar_button-icon-small_WibJp","toggle-btn":"components_title_bar_toggle-btn_9ekUv","collased-icon":"components_title_bar_collased-icon_SJ1ls","link":"components_title_bar_link_m-lOt","asset-element":"components_title_bar_asset-element_64u6f","input-element":"components_title_bar_input-element_Q0DAR","new-scrollbar":"components_title_bar_new-scrollbar_dkyAb","menu-dropdown":"components_title_bar_menu-dropdown_uk31D","menu-item":"components_title_bar_menu-item_cGiAC","shortcut":"components_title_bar_shortcut_M9Wv0","shortcut-key":"components_title_bar_shortcut-key_w8Q95","user-icon":"components_title_bar_user-icon_FMwxz","title":"components_title_bar_title_qPuju","title-only":"components_title_bar_title-only_aSsdC","rotated":"components_title_bar_rotated_9z7Rn","spin-animation":"components_title_bar_spin-animation_7EFXa"}

8
frontend/src/app/main/ui/components/title_bar.scss
View file

@ -23,11 +23,11 @@
flex-grow: 1;
height: 100%;
min-height: $s-32;
margin-right: $s-8;
margin-left: $s-8;
color: var(--title-foreground-color);
}
.title-only {
// margin-left: $s-8;
margin-left: $s-8;
}
.toggle-btn {
@ -42,10 +42,11 @@
@include flexCenter;
height: $s-24;
border-radius: $br-8;
padding-left: $s-8;
svg {
@extend .button-icon-small;
transform: rotate(90deg);
stroke: var(--icon-foreground);
}
&.rotated svg {
transform: rotate(0deg);
@ -72,6 +73,7 @@
border-radius: $br-8;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
}