diff --git a/frontend/resources/images/icons/asc-sort-refactor.svg b/frontend/resources/images/icons/asc-sort-refactor.svg new file mode 100644 index 000000000..c39c0b8ca --- /dev/null +++ b/frontend/resources/images/icons/asc-sort-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/desc-sort-refactor.svg b/frontend/resources/images/icons/desc-sort-refactor.svg new file mode 100644 index 000000000..c66ad72ad --- /dev/null +++ b/frontend/resources/images/icons/desc-sort-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index cb4da27ec..b76c10243 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -163,3 +163,27 @@ color: var(--assets-item-name-foreground-color-hover); } } + +.new-scrollbar { + ::-webkit-scrollbar { + background-color: transparent; + cursor: pointer; + height: $s-12; + width: $s-12; + } + ::-webkit-scrollbar-track, + ::-webkit-scrollbar-corner { + background-color: transparent; + } + + ::-webkit-scrollbar-thumb { + background-color: rgba(170, 181, 186, 0.3); + background-clip: content-box; + border: $s-2 solid transparent; + border-radius: $br-8; + &:hover { + background-color: rgba(170, 181, 186, 0.7); + outline: none; + } + } +} diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index ccd8ea328..58f303bf2 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -160,4 +160,7 @@ --library-content-foreground-color: var(--color-foreground-secondary); --dropdown-background-color: var(--color-background-tertiary); + + --not-found-background-color: var(--color-background-tertiary); + --not-found-foreground-color: var(--color-foreground-secondary); } diff --git a/frontend/resources/styles/common/refactor/spacing.scss b/frontend/resources/styles/common/refactor/spacing.scss index bcf9ed628..b0dd2f455 100644 --- a/frontend/resources/styles/common/refactor/spacing.scss +++ b/frontend/resources/styles/common/refactor/spacing.scss @@ -44,8 +44,15 @@ $s-216: calc(var(--s-4) * 54); $s-240: calc(var(--s-4) * 60); $s-248: calc(var(--s-4) * 62); $s-256: calc(var(--s-4) * 64); +$s-272: calc(var(--s-4) * 68); +$s-280: calc(var(--s-4) * 70); +$s-300: calc(var(--s-4) * 75); +$s-320: calc(var(--s-4) * 80); $s-348: calc(var(--s-4) * 87); +$s-380: calc(var(--s-4) * 95); $s-400: calc(var(--s-4) * 100); $s-480: calc(var(--s-4) * 120); +$s-520: calc(var(--s-4) * 130); $s-664: calc(var(--s-4) * 166); +$s-712: calc(var(--s-4) * 178); $s-736: calc(var(--s-4) * 184); diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss index 17f67146a..169f66ceb 100644 --- a/frontend/resources/styles/main/partials/modal.scss +++ b/frontend/resources/styles/main/partials/modal.scss @@ -1,6 +1,3 @@ -.modal-wrapper { -} - .modal-overlay { align-items: center; background-color: $color-dark-bg; diff --git a/frontend/src/app/main/data/workspace/libraries.cljs b/frontend/src/app/main/data/workspace/libraries.cljs index 1ba30dca3..011c32caf 100644 --- a/frontend/src/app/main/data/workspace/libraries.cljs +++ b/frontend/src/app/main/data/workspace/libraries.cljs @@ -232,7 +232,7 @@ (rx/of (dch/commit-changes changes) #(cond-> % edit? - (assoc-in [:workspace-global :rename-typography] (:id typography)))))))))) + (assoc-in [:workspace-global :edit-typography] (:id typography)))))))))) (defn- do-update-tipography [it state typography file-id] diff --git a/frontend/src/app/main/ui/components/color_bullet_new.css.json b/frontend/src/app/main/ui/components/color_bullet_new.css.json index c8e23cac5..7691da781 100644 --- a/frontend/src/app/main/ui/components/color_bullet_new.css.json +++ b/frontend/src/app/main/ui/components/color_bullet_new.css.json @@ -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-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","asset-element":"components_color_bullet_new_asset-element_s3Yqx","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"} \ No newline at end of file +{"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-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","asset-element":"components_color_bullet_new_asset-element_s3Yqx","new-scrollbar":"components_color_bullet_new_new-scrollbar_7U23G","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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.css.json b/frontend/src/app/main/ui/components/context_menu_a11y.css.json index 98dcbca41..d283cf4da 100644 --- a/frontend/src/app/main/ui/components/context_menu_a11y.css.json +++ b/frontend/src/app/main/ui/components/context_menu_a11y.css.json @@ -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-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","asset-element":"components_context_menu_a11y_asset-element_r3q1-","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"} \ No newline at end of file +{"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-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","asset-element":"components_context_menu_a11y_asset-element_r3q1-","new-scrollbar":"components_context_menu_a11y_new-scrollbar_tgX6p","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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/editable_label.css.json b/frontend/src/app/main/ui/components/editable_label.css.json index fce3a0861..576e6c658 100644 --- a/frontend/src/app/main/ui/components/editable_label.css.json +++ b/frontend/src/app/main/ui/components/editable_label.css.json @@ -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-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","asset-element":"components_editable_label_asset-element_Bs5bh","editable-label-input":"components_editable_label_editable-label-input_q2Puk"} \ No newline at end of file +{"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-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","asset-element":"components_editable_label_asset-element_Bs5bh","new-scrollbar":"components_editable_label_new-scrollbar_wEEzl","editable-label-input":"components_editable_label_editable-label-input_q2Puk"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/radio_buttons.css.json b/frontend/src/app/main/ui/components/radio_buttons.css.json index f806818d3..127dfd05f 100644 --- a/frontend/src/app/main/ui/components/radio_buttons.css.json +++ b/frontend/src/app/main/ui/components/radio_buttons.css.json @@ -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-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","asset-element":"components_radio_buttons_asset-element_l2wMX","radio-btn-wrapper":"components_radio_buttons_radio-btn-wrapper_mH6QX","checked":"components_radio_buttons_checked_sjVzy"} \ No newline at end of file +{"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-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","asset-element":"components_radio_buttons_asset-element_l2wMX","new-scrollbar":"components_radio_buttons_new-scrollbar_m-Mwb","radio-btn-wrapper":"components_radio_buttons_radio-btn-wrapper_mH6QX","checked":"components_radio_buttons_checked_sjVzy"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/search_bar.css.json b/frontend/src/app/main/ui/components/search_bar.css.json index e329b342a..b98cd6a8d 100644 --- a/frontend/src/app/main/ui/components/search_bar.css.json +++ b/frontend/src/app/main/ui/components/search_bar.css.json @@ -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-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","asset-element":"components_search_bar_asset-element_rH-5k","has-children":"components_search_bar_has-children_u-VSq"} \ No newline at end of file +{"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-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","asset-element":"components_search_bar_asset-element_rH-5k","new-scrollbar":"components_search_bar_new-scrollbar_rN-Bt","has-children":"components_search_bar_has-children_u-VSq"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/select.css.json b/frontend/src/app/main/ui/components/select.css.json index f9a898232..2554cd841 100644 --- a/frontend/src/app/main/ui/components/select.css.json +++ b/frontend/src/app/main/ui/components/select.css.json @@ -1 +1 @@ -{"button-primary":"components_select_button-primary_peYzv","button-secondary":"components_select_button-secondary_Kse6w","button-tertiary":"components_select_button-tertiary_srwoV","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","asset-element":"components_select_asset-element_5vxj7","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"} \ No newline at end of file +{"button-primary":"components_select_button-primary_peYzv","button-secondary":"components_select_button-secondary_Kse6w","button-tertiary":"components_select_button-tertiary_srwoV","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","asset-element":"components_select_asset-element_5vxj7","new-scrollbar":"components_select_new-scrollbar_-E7lz","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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/tab_container.css.json b/frontend/src/app/main/ui/components/tab_container.css.json index 9d8e6e6bf..066c44f18 100644 --- a/frontend/src/app/main/ui/components/tab_container.css.json +++ b/frontend/src/app/main/ui/components/tab_container.css.json @@ -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-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","asset-element":"components_tab_container_asset-element_1-YWa","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"} \ No newline at end of file +{"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-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","asset-element":"components_tab_container_asset-element_1-YWa","new-scrollbar":"components_tab_container_new-scrollbar_L-puJ","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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/title_bar.css.json b/frontend/src/app/main/ui/components/title_bar.css.json index 57d036856..e32410420 100644 --- a/frontend/src/app/main/ui/components/title_bar.css.json +++ b/frontend/src/app/main/ui/components/title_bar.css.json @@ -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-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","asset-element":"components_title_bar_asset-element_64u6f","title":"components_title_bar_title_qPuju","title-only":"components_title_bar_title-only_aSsdC","rotated":"components_title_bar_rotated_9z7Rn"} \ No newline at end of file +{"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-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","asset-element":"components_title_bar_asset-element_64u6f","new-scrollbar":"components_title_bar_new-scrollbar_dkyAb","title":"components_title_bar_title_qPuju","title-only":"components_title_bar_title-only_aSsdC","rotated":"components_title_bar_rotated_9z7Rn"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/debug/components_preview.css.json b/frontend/src/app/main/ui/debug/components_preview.css.json index ab7afd1ed..7f5ffe46a 100644 --- a/frontend/src/app/main/ui/debug/components_preview.css.json +++ b/frontend/src/app/main/ui/debug/components_preview.css.json @@ -1 +1 @@ -{"button-primary":"debug_components_preview_button-primary_Q2m40","button-secondary":"debug_components_preview_button-secondary_yPp3n","button-tertiary":"debug_components_preview_button-tertiary_FIKgJ","button-tag":"debug_components_preview_button-tag_NNepE","button-icon":"debug_components_preview_button-icon_J36A6","button-icon-small":"debug_components_preview_button-icon-small_Pf3jb","asset-element":"debug_components_preview_asset-element_LhcNS","themes-row":"debug_components_preview_themes-row_wEU8d","wrapper":"debug_components_preview_wrapper_535-4","rect":"debug_components_preview_rect_jomnq","bg-primary":"debug_components_preview_bg-primary_Rt4oW","bg-secondary":"debug_components_preview_bg-secondary_rcmll","bg-tertiary":"debug_components_preview_bg-tertiary_7rITE","bg-cuaternary":"debug_components_preview_bg-cuaternary_UEBPN","fg-primary":"debug_components_preview_fg-primary_naliT","fg-secondary":"debug_components_preview_fg-secondary_zT9IX","acc":"debug_components_preview_acc_h3Bia","acc-muted":"debug_components_preview_acc-muted_uingh","acc-secondary":"debug_components_preview_acc-secondary_oHH6y","acc-tertiary":"debug_components_preview_acc-tertiary_SwBjy","components-row":"debug_components_preview_components-row_N3f-J","title":"debug_components_preview_title_TVtzz","components-wrapper":"debug_components_preview_components-wrapper_A8IgV","component-group":"debug_components_preview_component-group_dI55k","component":"debug_components_preview_component_xBMSU","component-name":"debug_components_preview_component-name_3ZJMW"} \ No newline at end of file +{"button-primary":"debug_components_preview_button-primary_Q2m40","button-secondary":"debug_components_preview_button-secondary_yPp3n","button-tertiary":"debug_components_preview_button-tertiary_FIKgJ","button-tag":"debug_components_preview_button-tag_NNepE","button-icon":"debug_components_preview_button-icon_J36A6","button-icon-small":"debug_components_preview_button-icon-small_Pf3jb","asset-element":"debug_components_preview_asset-element_LhcNS","new-scrollbar":"debug_components_preview_new-scrollbar_KrmL7","themes-row":"debug_components_preview_themes-row_wEU8d","wrapper":"debug_components_preview_wrapper_535-4","rect":"debug_components_preview_rect_jomnq","bg-primary":"debug_components_preview_bg-primary_Rt4oW","bg-secondary":"debug_components_preview_bg-secondary_rcmll","bg-tertiary":"debug_components_preview_bg-tertiary_7rITE","bg-cuaternary":"debug_components_preview_bg-cuaternary_UEBPN","fg-primary":"debug_components_preview_fg-primary_naliT","fg-secondary":"debug_components_preview_fg-secondary_zT9IX","acc":"debug_components_preview_acc_h3Bia","acc-muted":"debug_components_preview_acc-muted_uingh","acc-secondary":"debug_components_preview_acc-secondary_oHH6y","acc-tertiary":"debug_components_preview_acc-tertiary_SwBjy","components-row":"debug_components_preview_components-row_N3f-J","title":"debug_components_preview_title_TVtzz","components-wrapper":"debug_components_preview_components-wrapper_A8IgV","component-group":"debug_components_preview_component-group_dI55k","component":"debug_components_preview_component_xBMSU","component-name":"debug_components_preview_component-name_3ZJMW"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index f62b8662e..725ba7063 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -261,6 +261,7 @@ (def add-refactor (icon-xref :add-refactor)) (def arrow-refactor (icon-xref :arrow-refactor)) +(def asc-sort-refactor (icon-xref :asc-sort-refactor)) (def absolute-refactor (icon-xref :absolute-refactor)) (def align-bottom-refactor (icon-xref :align-bottom-refactor)) (def align-content-center-refactor (icon-xref :align-content-center-refactor)) @@ -297,6 +298,7 @@ (def distribute-vertical-sapcing-refactor (icon-xref :distribute-vertical-spacing-refactor)) (def delete-refactor (icon-xref :delete-refactor)) (def delete-text-refactor (icon-xref :delete-text-refactor)) +(def desc-sort-refactor (icon-xref :desc-sort-refactor)) (def detach-refactor (icon-xref :detach-refactor)) (def document-refactor (icon-xref :document-refactor)) (def drop-refactor (icon-xref :drop-refactor)) diff --git a/frontend/src/app/main/ui/modal.cljs b/frontend/src/app/main/ui/modal.cljs index a27a8308c..5f977c85a 100644 --- a/frontend/src/app/main/ui/modal.cljs +++ b/frontend/src/app/main/ui/modal.cljs @@ -5,9 +5,12 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.modal + (:require-macros [app.main.style :refer [css]]) (:require [app.main.data.modal :as dm] + [app.main.features :as features] [app.main.store :as st] + [app.main.ui.context :as ctx] [app.util.dom :as dom] [app.util.keyboard :as k] [goog.events :as events] @@ -45,9 +48,10 @@ {::mf/wrap-props false ::mf/wrap [mf/memo]} [props] - (let [data (unchecked-get props "data") - wrapper-ref (mf/use-ref nil) - components (mf/deref dm/components) + (let [data (unchecked-get props "data") + wrapper-ref (mf/use-ref nil) + components (mf/deref dm/components) + new-css-system (mf/use-ctx ctx/new-css-system) allow-click-outside (:allow-click-outside data) @@ -73,7 +77,9 @@ (events/unlistenByKey key))))) (when-let [component (get components (:type data))] - [:div.modal-wrapper {:ref wrapper-ref} + [:div {:ref wrapper-ref + :class (dom/classnames (css :modal-wrapper) new-css-system + :modal-wrapper (not new-css-system))} (mf/element component (:props data))]))) @@ -82,7 +88,9 @@ (mf/defc modal [] - (let [modal (mf/deref modal-ref)] + (let [modal (mf/deref modal-ref) + new-css-system (features/use-feature :new-css-system)] (when modal - [:& modal-wrapper {:data modal - :key (:id modal)}]))) + [:& (mf/provider ctx/new-css-system) {:value new-css-system} + [:& modal-wrapper {:data modal + :key (:id modal)}]]))) diff --git a/frontend/src/app/main/ui/modal.css.json b/frontend/src/app/main/ui/modal.css.json new file mode 100644 index 000000000..de8c67e96 --- /dev/null +++ b/frontend/src/app/main/ui/modal.css.json @@ -0,0 +1 @@ +{"button-primary":"ui_modal_button-primary_f2CEg","button-secondary":"ui_modal_button-secondary_1wH6N","button-tertiary":"ui_modal_button-tertiary_vNip8","button-tag":"ui_modal_button-tag_pLwhJ","button-icon":"ui_modal_button-icon_aRFFQ","button-icon-small":"ui_modal_button-icon-small_HY5lR","asset-element":"ui_modal_asset-element_43PW9","new-scrollbar":"ui_modal_new-scrollbar_zPDI7","modal-wrapper":"ui_modal_modal-wrapper_NLvfo"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/modal.scss b/frontend/src/app/main/ui/modal.scss new file mode 100644 index 000000000..dc2c0e274 --- /dev/null +++ b/frontend/src/app/main/ui/modal.scss @@ -0,0 +1,10 @@ +@import "refactor/common-refactor.scss"; + +:global(:root) { + --s-4: 0.25rem; + --layer-indentation-size: calc(var(--s-4) * 5); +} + +.modal-wrapper { + @extend .new-scrollbar; +} diff --git a/frontend/src/app/main/ui/workspace.css.json b/frontend/src/app/main/ui/workspace.css.json index 9b6145dbc..6fd095888 100644 --- a/frontend/src/app/main/ui/workspace.css.json +++ b/frontend/src/app/main/ui/workspace.css.json @@ -1 +1 @@ -{"button-primary":"ui_workspace_button-primary_FZJ-T","button-secondary":"ui_workspace_button-secondary_oDzCJ","button-tertiary":"ui_workspace_button-tertiary_LVpr3","button-tag":"ui_workspace_button-tag_cU1Th","button-icon":"ui_workspace_button-icon_L5y8h","button-icon-small":"ui_workspace_button-icon-small_Ppp3W","asset-element":"ui_workspace_asset-element_LTbhl","workspace":"ui_workspace_workspace_xutJr"} \ No newline at end of file +{"button-primary":"ui_workspace_button-primary_FZJ-T","button-secondary":"ui_workspace_button-secondary_oDzCJ","button-tertiary":"ui_workspace_button-tertiary_LVpr3","button-tag":"ui_workspace_button-tag_cU1Th","button-icon":"ui_workspace_button-icon_L5y8h","button-icon-small":"ui_workspace_button-icon-small_Ppp3W","asset-element":"ui_workspace_asset-element_LTbhl","new-scrollbar":"ui_workspace_new-scrollbar_tkRN6","workspace":"ui_workspace_workspace_xutJr"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace.scss b/frontend/src/app/main/ui/workspace.scss index 251aa975a..bb956a4cb 100644 --- a/frontend/src/app/main/ui/workspace.scss +++ b/frontend/src/app/main/ui/workspace.scss @@ -14,25 +14,5 @@ } .workspace { - ::-webkit-scrollbar { - background-color: transparent; - cursor: pointer; - height: $s-12; - width: $s-12; - } - ::-webkit-scrollbar-track, - ::-webkit-scrollbar-corner { - background-color: transparent; - } - - ::-webkit-scrollbar-thumb { - background-color: rgba(170, 181, 186, 0.3); - background-clip: content-box; - border: $s-2 solid transparent; - border-radius: $br-8; - &:hover { - background-color: rgba(170, 181, 186, 0.7); - outline: none; - } - } + @extend .new-scrollbar; } diff --git a/frontend/src/app/main/ui/workspace/color_palette.css.json b/frontend/src/app/main/ui/workspace/color_palette.css.json index 5e8a9eb6f..0243ebce7 100644 --- a/frontend/src/app/main/ui/workspace/color_palette.css.json +++ b/frontend/src/app/main/ui/workspace/color_palette.css.json @@ -1 +1 @@ -{"button-primary":"workspace_color_palette_button-primary_0d2e2","button-secondary":"workspace_color_palette_button-secondary_C8qJL","button-tertiary":"workspace_color_palette_button-tertiary_X6-9C","button-tag":"workspace_color_palette_button-tag_GtZK2","button-icon":"workspace_color_palette_button-icon_-tBR6","color-palette":"workspace_color_palette_color-palette_hfJPA","left-arrow":"workspace_color_palette_left-arrow_PK7sj","right-arrow":"workspace_color_palette_right-arrow_swpS9","button-icon-small":"workspace_color_palette_button-icon-small_RrGTg","asset-element":"workspace_color_palette_asset-element_3Q2Mp","disabled":"workspace_color_palette_disabled_bz-he","color-palette-content":"workspace_color_palette_color-palette-content_okg18","color-palette-inside":"workspace_color_palette_color-palette-inside_dCIeR","color-cell":"workspace_color_palette_color-cell_ITDgl","is-not-library-color":"workspace_color_palette_is-not-library-color_EqCM6","no-text":"workspace_color_palette_no-text_QMPK0"} \ No newline at end of file +{"button-primary":"workspace_color_palette_button-primary_0d2e2","button-secondary":"workspace_color_palette_button-secondary_C8qJL","button-tertiary":"workspace_color_palette_button-tertiary_X6-9C","button-tag":"workspace_color_palette_button-tag_GtZK2","button-icon":"workspace_color_palette_button-icon_-tBR6","color-palette":"workspace_color_palette_color-palette_hfJPA","left-arrow":"workspace_color_palette_left-arrow_PK7sj","right-arrow":"workspace_color_palette_right-arrow_swpS9","button-icon-small":"workspace_color_palette_button-icon-small_RrGTg","asset-element":"workspace_color_palette_asset-element_3Q2Mp","new-scrollbar":"workspace_color_palette_new-scrollbar_ChE0u","disabled":"workspace_color_palette_disabled_bz-he","color-palette-content":"workspace_color_palette_color-palette-content_okg18","color-palette-inside":"workspace_color_palette_color-palette-inside_dCIeR","color-cell":"workspace_color_palette_color-cell_ITDgl","is-not-library-color":"workspace_color_palette_is-not-library-color_EqCM6","no-text":"workspace_color_palette_no-text_QMPK0"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs index 5780cbb27..8ac0282cf 100644 --- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs +++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs @@ -14,7 +14,6 @@ [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :refer [tr]] - [cuerdas.core :as str] [rumext.v2 :as mf])) (mf/defc color-palette-ctx-menu @@ -35,7 +34,11 @@ :data-palette (dm/str id)} [:div {:class (dom/classnames (css :option-wrapper) true)} [:div {:class (dom/classnames (css :library-name) true)} - (str (:name library) " " (str/ffmt "(%)" (count colors))) + [:div {:class (css :lib-name-wrapper)} + [:span {:class (css :lib-name)} + (dm/str (:name library))] + [:span {:class (css :lib-num)} + (dm/str "(" (count colors) ")")]] (when (= selected id) [:span {:class (dom/classnames (css :icon-wrapper) true)} i/tick-refactor])] @@ -53,9 +56,12 @@ [:div {:class (dom/classnames (css :option-wrapper) true)} [:div {:class (dom/classnames (css :library-name) true)} - (dm/str - (tr "workspace.libraries.colors.file-library") - (str/ffmt " (%)" (count file-colors))) + + [:div {:class (css :lib-name-wrapper)} + [:span {:class (css :lib-name)} + (dm/str (tr "workspace.libraries.colors.file-library"))] + [:span {:class (css :lib-num)} + (dm/str "(" (count file-colors) ")")]] (when (= selected :file) [:span {:class (dom/classnames (css :icon-wrapper) true)} @@ -71,10 +77,14 @@ (css :selected) (= selected :recent)) :on-click on-select-palette :data-palette "recent"} - [:div {:class (dom/classnames (css :option-wrapper) true)} - [:div {:class (dom/classnames (css :library-name) true)} - (str (tr "workspace.libraries.colors.recent-colors") - (str/format " (%s)" (count recent-colors))) + [:div {:class (css :option-wrapper)} + [:div {:class (css :library-name)} + [:div {:class (css :lib-name-wrapper)} + [:span {:class (css :lib-name)} + (dm/str (tr "workspace.libraries.colors.recent-colors"))] + [:span {:class (css :lib-num)} + (dm/str "("(count recent-colors) ")")]] + (when (= selected :recent) [:span {:class (dom/classnames (css :icon-wrapper) true)} i/tick-refactor])] diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.css.json b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.css.json index 0821a3a8c..1123c6df3 100644 --- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.css.json +++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.css.json @@ -1 +1 @@ -{"button-primary":"workspace_color_palette_ctx_menu_button-primary_2ka4z","button-secondary":"workspace_color_palette_ctx_menu_button-secondary_jfajf","button-tertiary":"workspace_color_palette_ctx_menu_button-tertiary_NLctS","button-tag":"workspace_color_palette_ctx_menu_button-tag_GN3ad","button-icon":"workspace_color_palette_ctx_menu_button-icon_cCaY2","button-icon-small":"workspace_color_palette_ctx_menu_button-icon-small_-knT4","palette-menu":"workspace_color_palette_ctx_menu_palette-menu_Vrjfy","palette-library":"workspace_color_palette_ctx_menu_palette-library_0LFV5","selected":"workspace_color_palette_ctx_menu_selected_lfchf","icon-wrapper":"workspace_color_palette_ctx_menu_icon-wrapper_v8-ys","recent-colors":"workspace_color_palette_ctx_menu_recent-colors_Q4fss","file-library":"workspace_color_palette_ctx_menu_file-library_8qsbr","asset-element":"workspace_color_palette_ctx_menu_asset-element_pV16m","option-wrapper":"workspace_color_palette_ctx_menu_option-wrapper_st9Cq","library-name":"workspace_color_palette_ctx_menu_library-name_BL8b8","color-sample":"workspace_color_palette_ctx_menu_color-sample_jQUGL"} \ No newline at end of file +{"button-primary":"workspace_color_palette_ctx_menu_button-primary_2ka4z","button-secondary":"workspace_color_palette_ctx_menu_button-secondary_jfajf","button-tertiary":"workspace_color_palette_ctx_menu_button-tertiary_NLctS","button-tag":"workspace_color_palette_ctx_menu_button-tag_GN3ad","button-icon":"workspace_color_palette_ctx_menu_button-icon_cCaY2","button-icon-small":"workspace_color_palette_ctx_menu_button-icon-small_-knT4","palette-menu":"workspace_color_palette_ctx_menu_palette-menu_Vrjfy","palette-library":"workspace_color_palette_ctx_menu_palette-library_0LFV5","selected":"workspace_color_palette_ctx_menu_selected_lfchf","option-wrapper":"workspace_color_palette_ctx_menu_option-wrapper_st9Cq","library-name":"workspace_color_palette_ctx_menu_library-name_BL8b8","icon-wrapper":"workspace_color_palette_ctx_menu_icon-wrapper_v8-ys","recent-colors":"workspace_color_palette_ctx_menu_recent-colors_Q4fss","file-library":"workspace_color_palette_ctx_menu_file-library_8qsbr","asset-element":"workspace_color_palette_ctx_menu_asset-element_pV16m","new-scrollbar":"workspace_color_palette_ctx_menu_new-scrollbar_0BINh","lib-name-wrapper":"workspace_color_palette_ctx_menu_lib-name-wrapper_-F9D4","lib-name":"workspace_color_palette_ctx_menu_lib-name_VPSM1","lib-num":"workspace_color_palette_ctx_menu_lib-num_neRQe","color-sample":"workspace_color_palette_ctx_menu_color-sample_jQUGL"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss index b18d45314..1a6127811 100644 --- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss +++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss @@ -9,6 +9,7 @@ .palette-menu { position: absolute; left: auto; + max-width: $s-480; bottom: $s-0; padding: $s-4; margin: 0 0 $s-4 0; @@ -22,6 +23,7 @@ position: relative; display: flex; align-items: flex-start; + width: 100%; padding: $s-8; border-radius: $br-8; margin-bottom: $s-4; @@ -29,13 +31,32 @@ margin-bottom: 0; } .option-wrapper { + width: 100%; .library-name { @include titleTipography; color: var(--context-menu-foreground-color); - display: flex; - justify-content: space-between; + display: grid; + grid-template-columns: 1fr $s-24; + .lib-name-wrapper { + display: flex; + max-width: $s-400; + .lib-name { + @include textEllipsis; + max-width: $s-380; + } + .lib-num { + margin-left: $s-4; + } + } + .icon-wrapper { + margin-left: $s-4; + @include flexCenter; + svg { + @include flexCenter; + @extend .button-icon-small; + } + } } - .color-sample { display: flex; flex-direction: row; @@ -46,15 +67,16 @@ &.selected, &:hover { - .icon-wrapper { - @include flexCenter; - svg { - @include flexCenter; - @extend .button-icon-small; - } - } .option-wrapper .library-name { color: var(--context-menu-foreground-color-selected); + .icon-wrapper { + @include flexCenter; + svg { + @include flexCenter; + @extend .button-icon-small; + stroke: var(--context-menu-foreground-color-selected); + } + } } } diff --git a/frontend/src/app/main/ui/workspace/context_menu.css.json b/frontend/src/app/main/ui/workspace/context_menu.css.json index a3b579c75..a35b28847 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.css.json +++ b/frontend/src/app/main/ui/workspace/context_menu.css.json @@ -1 +1 @@ -{"button-primary":"workspace_context_menu_button-primary_d6q-P","button-secondary":"workspace_context_menu_button-secondary_bIdqe","button-tertiary":"workspace_context_menu_button-tertiary_vGSns","button-tag":"workspace_context_menu_button-tag_rOUbd","button-icon":"workspace_context_menu_button-icon_tXvxe","button-icon-small":"workspace_context_menu_button-icon-small_c0rVU","workspace-context-menu":"workspace_context_menu_workspace-context-menu_2NyvR","icon-menu-item":"workspace_context_menu_icon-menu-item_P3-bA","shape-icon":"workspace_context_menu_shape-icon_xx1Ll","workspace-context-submenu":"workspace_context_menu_workspace-context-submenu_BUNLt","selected-icon":"workspace_context_menu_selected-icon_pZqBp","context-menu-item":"workspace_context_menu_context-menu-item_Tx-Ty","submenu-icon":"workspace_context_menu_submenu-icon_JwYm8","asset-element":"workspace_context_menu_asset-element_jkrbj","separator":"workspace_context_menu_separator_E9-aR","title":"workspace_context_menu_title_P8iFL","shortcut":"workspace_context_menu_shortcut_rypUe","shortcut-key":"workspace_context_menu_shortcut-key_3rF3t","icon-wrapper":"workspace_context_menu_icon-wrapper_n7VO2"} \ No newline at end of file +{"button-primary":"workspace_context_menu_button-primary_d6q-P","button-secondary":"workspace_context_menu_button-secondary_bIdqe","button-tertiary":"workspace_context_menu_button-tertiary_vGSns","button-tag":"workspace_context_menu_button-tag_rOUbd","button-icon":"workspace_context_menu_button-icon_tXvxe","button-icon-small":"workspace_context_menu_button-icon-small_c0rVU","workspace-context-menu":"workspace_context_menu_workspace-context-menu_2NyvR","icon-menu-item":"workspace_context_menu_icon-menu-item_P3-bA","shape-icon":"workspace_context_menu_shape-icon_xx1Ll","workspace-context-submenu":"workspace_context_menu_workspace-context-submenu_BUNLt","selected-icon":"workspace_context_menu_selected-icon_pZqBp","context-menu-item":"workspace_context_menu_context-menu-item_Tx-Ty","submenu-icon":"workspace_context_menu_submenu-icon_JwYm8","asset-element":"workspace_context_menu_asset-element_jkrbj","new-scrollbar":"workspace_context_menu_new-scrollbar_xGQzu","separator":"workspace_context_menu_separator_E9-aR","title":"workspace_context_menu_title_P8iFL","shortcut":"workspace_context_menu_shortcut_rypUe","shortcut-key":"workspace_context_menu_shortcut-key_3rF3t","icon-wrapper":"workspace_context_menu_icon-wrapper_n7VO2"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index 8b3adf122..f6dd270aa 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/libraries.cljs @@ -277,7 +277,7 @@ :icon (mf/html [:span {:class (css :search-icon)} i/search-refactor])}]] (if (seq shared-libraries) - [:div {:class (css :section-list)} + [:div {:class (css :section-list-shared)} (for [{:keys [id name] :as library} shared-libraries] [:div {:class (css :section-list-item) :key (dm/str id)} @@ -292,7 +292,7 @@ :graphics-count graphics-count :colors-count colors-count :typography-count typography-count}])]] - [:button {:class (css :item-button) + [:button {:class (css :item-button-shared) :data-library-id (dm/str id) :on-click link-library} i/add-refactor]])] @@ -457,7 +457,8 @@ (mf/use-fn #(reset! selected-tab* %)) close-dialog - (mf/use-fn (fn [_] (modal/hide!) + (mf/use-fn (fn [_] + (modal/hide!) (modal/disallow-click-outside!)))] (mf/with-effect [team-id] @@ -467,9 +468,13 @@ (if new-css-system [:div {:class (css :modal-overlay)} [:div {:class (css :modal-dialog)} + [:button {:class (css :close) + :on-click close-dialog } + i/close-refactor] + [:div {:class (css :modal-title)} + "Libraries"] [:div {:class (css :modal-content)} [:div {:class (css :libraries-header)} - [:& tab-container {:on-change-tab on-tab-change :selected selected-tab diff --git a/frontend/src/app/main/ui/workspace/libraries.css.json b/frontend/src/app/main/ui/workspace/libraries.css.json index 0ffda6689..caa0e19e2 100644 --- a/frontend/src/app/main/ui/workspace/libraries.css.json +++ b/frontend/src/app/main/ui/workspace/libraries.css.json @@ -1 +1 @@ -{"button-primary":"workspace_libraries_button-primary_Hsioh","modal-overlay":"workspace_libraries_modal-overlay_qC-df","modal-dialog":"workspace_libraries_modal-dialog_Kj293","modal-content":"workspace_libraries_modal-content_4EVEQ","libraries-content":"workspace_libraries_libraries-content_ycQdm","section":"workspace_libraries_section_SUsgi","section-list":"workspace_libraries_section-list_lGSrM","section-list-item":"workspace_libraries_section-list-item_hwASN","item-publish":"workspace_libraries_item-publish_ZMopF","item-unpublish":"workspace_libraries_item-unpublish_1seca","item-update":"workspace_libraries_item-update_GklIE","updates-content":"workspace_libraries_updates-content_lqMoE","button-secondary":"workspace_libraries_button-secondary_l5M0x","button-tertiary":"workspace_libraries_button-tertiary_C54rH","item-button":"workspace_libraries_item-button_dKUeX","close":"workspace_libraries_close_bED7B","button-tag":"workspace_libraries_button-tag_wAh-s","button-icon":"workspace_libraries_button-icon_kxS7q","item-button-icon":"workspace_libraries_item-button-icon_CeJWg","button-icon-small":"workspace_libraries_button-icon-small_Q9eo3","section-list-empty":"workspace_libraries_section-list-empty_mOKkJ","libraries-search":"workspace_libraries_libraries-search_JS70w","search-icon":"workspace_libraries_search-icon_y7N9S","asset-element":"workspace_libraries_asset-element_-FuJl","libraries-header":"workspace_libraries_libraries-header_-W6bJ","item-name":"workspace_libraries_item-name_Zjbsw","item-contents":"workspace_libraries_item-contents_EPTF6","section-title":"workspace_libraries_section-title_7rsm7","element-count":"workspace_libraries_element-count_07SV2"} \ No newline at end of file +{"button-primary":"workspace_libraries_button-primary_Hsioh","modal-overlay":"workspace_libraries_modal-overlay_qC-df","modal-dialog":"workspace_libraries_modal-dialog_Kj293","modal-content":"workspace_libraries_modal-content_4EVEQ","libraries-content":"workspace_libraries_libraries-content_ycQdm","section":"workspace_libraries_section_SUsgi","section-list":"workspace_libraries_section-list_lGSrM","section-list-item":"workspace_libraries_section-list-item_hwASN","item-publish":"workspace_libraries_item-publish_ZMopF","item-unpublish":"workspace_libraries_item-unpublish_1seca","item-update":"workspace_libraries_item-update_GklIE","section-list-shared":"workspace_libraries_section-list-shared_XZE10","updates-content":"workspace_libraries_updates-content_lqMoE","button-secondary":"workspace_libraries_button-secondary_l5M0x","item-button":"workspace_libraries_item-button_dKUeX","item-button-shared":"workspace_libraries_item-button-shared_hxOmT","button-tertiary":"workspace_libraries_button-tertiary_C54rH","close":"workspace_libraries_close_bED7B","button-tag":"workspace_libraries_button-tag_wAh-s","button-icon":"workspace_libraries_button-icon_kxS7q","item-button-icon":"workspace_libraries_item-button-icon_CeJWg","button-icon-small":"workspace_libraries_button-icon-small_Q9eo3","section-list-empty":"workspace_libraries_section-list-empty_mOKkJ","libraries-search":"workspace_libraries_libraries-search_JS70w","search-icon":"workspace_libraries_search-icon_y7N9S","asset-element":"workspace_libraries_asset-element_-FuJl","new-scrollbar":"workspace_libraries_new-scrollbar_9V-Nb","modal-title":"workspace_libraries_modal-title_Z1xKU","libraries-header":"workspace_libraries_libraries-header_-W6bJ","item-name":"workspace_libraries_item-name_Zjbsw","item-contents":"workspace_libraries_item-contents_EPTF6","section-title":"workspace_libraries_section-title_7rsm7","element-count":"workspace_libraries_element-count_07SV2"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss index 8ab144ad6..b117b0193 100644 --- a/frontend/src/app/main/ui/workspace/libraries.scss +++ b/frontend/src/app/main/ui/workspace/libraries.scss @@ -16,47 +16,62 @@ background-color: var(--overlay-color); pointer-events: none; // This is to allow outside click that closes modal. .modal-dialog { - height: $s-400; + position: relative; + height: $s-520; max-height: 100%; - width: $s-664; - border-radius: $br-8; + width: $s-712; + padding: $s-32; + border-radius: $br-10; background-color: var(--modal-background-color); pointer-events: all; .close { @extend .button-tertiary; - width: $s-32; + position: absolute; + top: $s-8; + right: $s-8; + width: $s-28; height: $s-32; border-radius: $br-8; svg { @extend .button-icon; } } - .modal-content { - .libraries-header { - padding: $s-12; - } + .modal-title { + @include tabTitleTipography; + margin-bottom: $s-16; + } + .modal-content { + height: 100%; + .libraries-header { + height: 100%; + } .libraries-content, .updates-content { display: grid; grid-template-columns: 1fr 1fr; gap: $s-24; - padding-top: $s-16; + padding-top: $s-24; height: 100%; - + max-height: $s-400; .section { - height: 100%; + height: calc(100% - $s-12); :global(.title-spacing-lib) { - margin: 0 0 $s-8 calc(-1 * $s-8); + margin: 0 0 $s-24 calc(-1 * $s-8); } - .section-list { + .section-list, + .section-list-shared { height: 100%; - max-height: 250px; + max-height: $s-320; overflow: auto; + scrollbar-gutter: stable; .section-list-item { display: grid; grid-template-columns: 1fr auto; - margin-bottom: $s-12; + margin-bottom: $s-24; + &:last-child { + margin-bottom: $s-8; + } .item-name { @include titleTipography; @@ -74,21 +89,27 @@ @include tabTitleTipography; height: $s-32; min-width: $s-92; - padding: $s-8 $s-12; + padding: $s-8 $s-24; border-radius: $br-8; } .item-unpublish { @extend .button-secondary; } - .item-button { - @extend .button-tertiary; - width: $s-32; + .item-button, + .item-button-shared { + @extend .button-secondary; + padding: $s-8 $s-24; height: $s-32; border-radius: $br-8; + margin-right: $s-2; svg { @extend .button-icon; } } + .item-button-shared { + padding: $s-8; + width: $s-32; + } .item-button-icon { width: $s-28; height: $s-28; @@ -98,6 +119,9 @@ } } } + .section-list-shared { + max-height: $s-272; + } .section-title { @include titleTipography; @@ -116,8 +140,7 @@ } .section-list-empty { @include titleTipography; - display: flex; - align-items: center; + @include flexCenter; svg { @extend .button-icon-small; diff --git a/frontend/src/app/main/ui/workspace/palette.css.json b/frontend/src/app/main/ui/workspace/palette.css.json index decd0e410..aa5cd1e9d 100644 --- a/frontend/src/app/main/ui/workspace/palette.css.json +++ b/frontend/src/app/main/ui/workspace/palette.css.json @@ -1 +1 @@ -{"button-primary":"workspace_palette_button-primary_zEUyD","button-secondary":"workspace_palette_button-secondary_ksr24","button-tertiary":"workspace_palette_button-tertiary_91YQK","palettes":"workspace_palette_palettes_JHGUw","palette-actions":"workspace_palette_palette-actions_2GwR6","palette-btn-list":"workspace_palette_palette-btn-list_x7gPS","palette-item":"workspace_palette_palette-item_50uj6","palette-btn":"workspace_palette_palette-btn_kP66y","button-tag":"workspace_palette_button-tag_S9v-Z","button-icon":"workspace_palette_button-icon_pmEDv","button-icon-small":"workspace_palette_button-icon-small_vbLDq","asset-element":"workspace_palette_asset-element_4bXi3","wide":"workspace_palette_wide_3G4e1","mid-palette":"workspace_palette_mid-palette_rGR5I","small-palette":"workspace_palette_small-palette_18Otk","resize-area":"workspace_palette_resize-area_0LwVu","selected":"workspace_palette_selected_Z6BFo","palette":"workspace_palette_palette_eqp3q","handler":"workspace_palette_handler_4JV0J","handler-btn":"workspace_palette_handler-btn_7lnlF","hidden-bts":"workspace_palette_hidden-bts_mhbc0"} \ No newline at end of file +{"button-primary":"workspace_palette_button-primary_zEUyD","button-secondary":"workspace_palette_button-secondary_ksr24","button-tertiary":"workspace_palette_button-tertiary_91YQK","palettes":"workspace_palette_palettes_JHGUw","palette-actions":"workspace_palette_palette-actions_2GwR6","palette-btn-list":"workspace_palette_palette-btn-list_x7gPS","palette-item":"workspace_palette_palette-item_50uj6","palette-btn":"workspace_palette_palette-btn_kP66y","button-tag":"workspace_palette_button-tag_S9v-Z","button-icon":"workspace_palette_button-icon_pmEDv","button-icon-small":"workspace_palette_button-icon-small_vbLDq","asset-element":"workspace_palette_asset-element_4bXi3","new-scrollbar":"workspace_palette_new-scrollbar_3WWqd","wide":"workspace_palette_wide_3G4e1","mid-palette":"workspace_palette_mid-palette_rGR5I","small-palette":"workspace_palette_small-palette_18Otk","resize-area":"workspace_palette_resize-area_0LwVu","selected":"workspace_palette_selected_Z6BFo","palette":"workspace_palette_palette_eqp3q","handler":"workspace_palette_handler_4JV0J","handler-btn":"workspace_palette_handler-btn_7lnlF","hidden-bts":"workspace_palette_hidden-bts_mhbc0"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar.css.json b/frontend/src/app/main/ui/workspace/sidebar.css.json index ac76a824b..27146ddc2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar.css.json @@ -1 +1 @@ -{"button-primary":"workspace_sidebar_button-primary_K7xW6","button-secondary":"workspace_sidebar_button-secondary_e2eQE","button-tertiary":"workspace_sidebar_button-tertiary_QKqHT","button-tag":"workspace_sidebar_button-tag_Xc0Sm","button-icon":"workspace_sidebar_button-icon_OXdmL","button-icon-small":"workspace_sidebar_button-icon-small_EYb9x","asset-element":"workspace_sidebar_asset-element_vzrfV","left-settings-bar":"workspace_sidebar_left-settings-bar_7co5t","resize-area":"workspace_sidebar_resize-area_ny1v0","settings-bar-inside":"workspace_sidebar_settings-bar-inside_YnFv8","tabs-wrapper":"workspace_sidebar_tabs-wrapper_YDo4o","layers-tab":"workspace_sidebar_layers-tab_soxRL"} \ No newline at end of file +{"button-primary":"workspace_sidebar_button-primary_K7xW6","button-secondary":"workspace_sidebar_button-secondary_e2eQE","button-tertiary":"workspace_sidebar_button-tertiary_QKqHT","button-tag":"workspace_sidebar_button-tag_Xc0Sm","button-icon":"workspace_sidebar_button-icon_OXdmL","button-icon-small":"workspace_sidebar_button-icon-small_EYb9x","asset-element":"workspace_sidebar_asset-element_vzrfV","new-scrollbar":"workspace_sidebar_new-scrollbar_zGNNO","left-settings-bar":"workspace_sidebar_left-settings-bar_7co5t","resize-area":"workspace_sidebar_resize-area_ny1v0","settings-bar-inside":"workspace_sidebar_settings-bar-inside_YnFv8","tabs-wrapper":"workspace_sidebar_tabs-wrapper_YDo4o","layers-tab":"workspace_sidebar_layers-tab_soxRL"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss index c7a1aedee..3e3a869de 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/sidebar.scss @@ -17,7 +17,6 @@ $width-settings-bar-max: 500px; max-width: 500px; width: var(--width, $width-settings-bar); height: 100%; - border-radius: $br-8; background-color: var(--color-background-primary); .resize-area { diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index cd6b7a406..b4536f350 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -68,19 +68,21 @@ {::mf/wrap [mf/memo] ::mf/wrap-props false} [] - (let [components-v2 (mf/use-ctx ctx/components-v2) - read-only? (mf/use-ctx ctx/workspace-read-only?) - new-css-system (mf/use-ctx ctx/new-css-system) - filters* (mf/use-state - {:term "" - :section "all" - :ordering :asc - :list-style :thumbs - :open-menu false}) - filters (deref filters*) - term (:term filters) - menu-open? (:open-menu filters) - section (:section filters) + (let [components-v2 (mf/use-ctx ctx/components-v2) + read-only? (mf/use-ctx ctx/workspace-read-only?) + new-css-system (mf/use-ctx ctx/new-css-system) + filters* (mf/use-state + {:term "" + :section "all" + :ordering :asc + :list-style :thumbs + :open-menu false}) + filters (deref filters*) + term (:term filters) + menu-open? (:open-menu filters) + section (:section filters) + ordering (:ordering filters) + reverse-sort? (= :desc ordering) toggle-ordering (mf/use-fn #(swap! filters* update :ordering toggle-values [:asc :desc])) @@ -160,16 +162,17 @@ :data-test "typographies"}]] (if ^boolean new-css-system - [:div {:class (dom/classnames (css :assets-bar) true)} - [:div {:class (dom/classnames (css :assets-header) true)} + [:div {:class (css :assets-bar)} + [:div {:class (css :assets-header)} (when-not read-only? - [:button {:class (dom/classnames (css :libraries-button) true) + [:button {:class (css :libraries-button) :on-click #(modal/show! :libraries-dialog {})} - [:span {:class (dom/classnames (css :libraries-icon) true)} + [:span {:class (css :libraries-icon)} i/library-refactor] (tr "workspace.assets.libraries")]) - [:& search-bar {:on-change on-search-term-change + [:div {:class (css :search-wrapper)} + [:& search-bar {:on-change on-search-term-change :value term :placeholder (tr "workspace.assets.search")} [:button @@ -186,7 +189,12 @@ :top 152 :left 64 :options options - :workspace? true}]] + :workspace? true}] + [:button {:class (css :sort-button) + :on-click toggle-ordering} + (if reverse-sort? + i/asc-sort-refactor + i/desc-sort-refactor)]]] [:& (mf/provider cmm/assets-filters) {:value filters} [:& (mf/provider cmm/assets-toggle-ordering) {:value toggle-ordering} diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets.css.json index 33be48097..80cd459a5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.css.json @@ -1 +1 @@ -{"button-primary":"sidebar_assets_button-primary_a9p4J","button-secondary":"sidebar_assets_button-secondary_hbgBA","assets-bar":"sidebar_assets_assets-bar_gzAPj","libraries-button":"sidebar_assets_libraries-button_cKUY7","button-tertiary":"sidebar_assets_button-tertiary_KoPen","button-tag":"sidebar_assets_button-tag_yzpPm","button-icon":"sidebar_assets_button-icon_M5Yy6","libraries-icon":"sidebar_assets_libraries-icon_ikusB","button-icon-small":"sidebar_assets_button-icon-small_xZWe1","asset-element":"sidebar_assets_asset-element_xHJzG","section-button":"sidebar_assets_section-button_RSjn8","sections-container":"sidebar_assets_sections-container_r2YTM","section-item":"sidebar_assets_section-item_u6EYM","section-btn":"sidebar_assets_section-btn_s4h2P","libraries-wrapper":"sidebar_assets_libraries-wrapper_agaHg","assets-header":"sidebar_assets_assets-header_aFHCj"} \ No newline at end of file +{"button-primary":"sidebar_assets_button-primary_a9p4J","button-secondary":"sidebar_assets_button-secondary_hbgBA","assets-bar":"sidebar_assets_assets-bar_gzAPj","assets-header":"sidebar_assets_assets-header_aFHCj","search-wrapper":"sidebar_assets_search-wrapper_n5kE7","sort-button":"sidebar_assets_sort-button_UvVYu","libraries-button":"sidebar_assets_libraries-button_cKUY7","button-tertiary":"sidebar_assets_button-tertiary_KoPen","button-tag":"sidebar_assets_button-tag_yzpPm","button-icon":"sidebar_assets_button-icon_M5Yy6","libraries-icon":"sidebar_assets_libraries-icon_ikusB","button-icon-small":"sidebar_assets_button-icon-small_xZWe1","asset-element":"sidebar_assets_asset-element_xHJzG","new-scrollbar":"sidebar_assets_new-scrollbar_2SXio","section-button":"sidebar_assets_section-button_RSjn8","sections-container":"sidebar_assets_sections-container_r2YTM","section-item":"sidebar_assets_section-item_u6EYM","section-btn":"sidebar_assets_section-btn_s4h2P","libraries-wrapper":"sidebar_assets_libraries-wrapper_agaHg"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.scss b/frontend/src/app/main/ui/workspace/sidebar/assets.scss index eb3603f54..ec1ff46c6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.scss @@ -107,13 +107,25 @@ overflow: auto; display: flex; flex-direction: column; - height: calc(100% - $s-72); + height: calc(100% - $s-80); overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; overflow-y: overlay; } .assets-header { - padding: $s-8 $s-12 $s-4 $s-12; + padding: $s-8 $s-12 $s-12 $s-12; + .search-wrapper { + display: flex; + gap: $s-4; + .sort-button { + @extend .button-secondary; + width: $s-32; + border-radius: $br-8; + svg { + @extend .button-icon-small; + } + } + } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.css.json index 3de5347cd..e29d95429 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.css.json @@ -1 +1 @@ -{"button-primary":"assets_colors_button-primary_6ZMmx","button-secondary":"assets_colors_button-secondary_dNSLH","button-tertiary":"assets_colors_button-tertiary_h20-o","assets-btn":"assets_colors_assets-btn_t8DHG","button-tag":"assets_colors_button-tag_ux-NH","button-icon":"assets_colors_button-icon_f-EVH","button-icon-small":"assets_colors_button-icon-small_zq8dv","asset-element":"assets_colors_asset-element_XSxD1","colors-group":"assets_colors_colors-group_fUsuo","asset-list":"assets_colors_asset-list_wMm1l","asset-list-item":"assets_colors_asset-list-item_ZFtXC","bullet-block":"assets_colors_bullet-block_ZRR2Y","name-block":"assets_colors_name-block_Zvmy3","default-name-only":"assets_colors_default-name-only_JFCGo","name":"assets_colors_name_AjZzr","default-name":"assets_colors_default-name_8gEAb","element-name":"assets_colors_element-name_ADGM8","selected":"assets_colors_selected_ElMu0","editing":"assets_colors_editing_FWnHU","grid-placeholder":"assets_colors_grid-placeholder_7wTFd","drop-space":"assets_colors_drop-space_lbzeC","dragging":"assets_colors_dragging_EmBOk"} \ No newline at end of file +{"button-primary":"assets_colors_button-primary_6ZMmx","button-secondary":"assets_colors_button-secondary_dNSLH","button-tertiary":"assets_colors_button-tertiary_h20-o","assets-btn":"assets_colors_assets-btn_t8DHG","button-tag":"assets_colors_button-tag_ux-NH","button-icon":"assets_colors_button-icon_f-EVH","button-icon-small":"assets_colors_button-icon-small_zq8dv","asset-element":"assets_colors_asset-element_XSxD1","new-scrollbar":"assets_colors_new-scrollbar_wIoIr","colors-group":"assets_colors_colors-group_fUsuo","asset-list":"assets_colors_asset-list_wMm1l","asset-list-item":"assets_colors_asset-list-item_ZFtXC","bullet-block":"assets_colors_bullet-block_ZRR2Y","name-block":"assets_colors_name-block_Zvmy3","default-name-only":"assets_colors_default-name-only_JFCGo","name":"assets_colors_name_AjZzr","default-name":"assets_colors_default-name_8gEAb","element-name":"assets_colors_element-name_ADGM8","selected":"assets_colors_selected_ElMu0","editing":"assets_colors_editing_FWnHU","grid-placeholder":"assets_colors_grid-placeholder_7wTFd","drop-space":"assets_colors_drop-space_lbzeC","dragging":"assets_colors_dragging_EmBOk"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/common.css.json index e4b336d85..06e8fe22e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.css.json @@ -1 +1 @@ -{"button-primary":"assets_common_button-primary_-eBqD","button-secondary":"assets_common_button-secondary_qo2kg","button-tertiary":"assets_common_button-tertiary_ApdBb","button-tag":"assets_common_button-tag_MHJlj","button-icon":"assets_common_button-icon_0R1zt","button-icon-small":"assets_common_button-icon-small_5kQfO","asset-element":"assets_common_asset-element_frsFR","asset-section":"assets_common_asset-section_uKhc8","title-name":"assets_common_title-name_ZOz9E","section-icon":"assets_common_section-icon_Kitcf","section-name":"assets_common_section-name_RVo-u","num-assets":"assets_common_num-assets_Dguaz"} \ No newline at end of file +{"button-primary":"assets_common_button-primary_-eBqD","button-secondary":"assets_common_button-secondary_qo2kg","button-tertiary":"assets_common_button-tertiary_ApdBb","button-tag":"assets_common_button-tag_MHJlj","button-icon":"assets_common_button-icon_0R1zt","button-icon-small":"assets_common_button-icon-small_5kQfO","asset-element":"assets_common_asset-element_frsFR","new-scrollbar":"assets_common_new-scrollbar_JN2v-","asset-section":"assets_common_asset-section_uKhc8","title-name":"assets_common_title-name_ZOz9E","section-icon":"assets_common_section-icon_Kitcf","section-name":"assets_common_section-name_RVo-u","num-assets":"assets_common_num-assets_Dguaz"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/components.css.json index 64e72325f..952bca499 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.css.json @@ -1 +1 @@ -{"button-primary":"assets_components_button-primary_lsoWq","button-secondary":"assets_components_button-secondary_P8v5X","button-tertiary":"assets_components_button-tertiary_7wMqf","add-component":"assets_components_add-component_X9o2C","button-tag":"assets_components_button-tag_ibmtY","button-icon":"assets_components_button-icon_4Lapr","button-icon-small":"assets_components_button-icon-small_7WrRR","component-group":"assets_components_component-group_AYXVI","asset-enum":"assets_components_asset-enum_iLlfH","enum-item":"assets_components_enum-item_l4zuE","item-name":"assets_components_item-name_Hwadc","editing":"assets_components_editing_3RdZy","asset-grid":"assets_components_asset-grid_mK75F","grid-cell":"assets_components_grid-cell_ctU6T","cell-name":"assets_components_cell-name_DUUMt","asset-element":"assets_components_asset-element_UsbdX","drop-space":"assets_components_drop-space_QhD1-","selected":"assets_components_selected_QLPO7","grid-placeholder":"assets_components_grid-placeholder_a3PoY","listing-options":"assets_components_listing-options_-vPIQ","listing-option-btn":"assets_components_listing-option-btn_-d9cg","first":"assets_components_first_sri1T","dragging":"assets_components_dragging_bWqQC"} \ No newline at end of file +{"button-primary":"assets_components_button-primary_lsoWq","button-secondary":"assets_components_button-secondary_P8v5X","button-tertiary":"assets_components_button-tertiary_7wMqf","add-component":"assets_components_add-component_X9o2C","button-tag":"assets_components_button-tag_ibmtY","button-icon":"assets_components_button-icon_4Lapr","button-icon-small":"assets_components_button-icon-small_7WrRR","component-group":"assets_components_component-group_AYXVI","asset-enum":"assets_components_asset-enum_iLlfH","enum-item":"assets_components_enum-item_l4zuE","item-name":"assets_components_item-name_Hwadc","editing":"assets_components_editing_3RdZy","asset-grid":"assets_components_asset-grid_mK75F","grid-cell":"assets_components_grid-cell_ctU6T","cell-name":"assets_components_cell-name_DUUMt","asset-element":"assets_components_asset-element_UsbdX","new-scrollbar":"assets_components_new-scrollbar_IvvMB","drop-space":"assets_components_drop-space_QhD1-","selected":"assets_components_selected_QLPO7","grid-placeholder":"assets_components_grid-placeholder_a3PoY","listing-options":"assets_components_listing-options_-vPIQ","listing-option-btn":"assets_components_listing-option-btn_-d9cg","first":"assets_components_first_sri1T","dragging":"assets_components_dragging_bWqQC"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss index 66ff32efa..a185ff063 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss @@ -18,7 +18,6 @@ grid-auto-rows: calc(10vh + $s-16); gap: $s-4; margin-left: $s-8; - margin-right: $s-12; .grid-cell { @include flexCenter; position: relative; @@ -107,7 +106,8 @@ .grid-placeholder { width: 100%; border-radius: $br-8; - background-color: var(--assets-item-background-color); + background-color: var(--assets-item-background-color-drag); + border: $s-2 solid var(--assets-item-border-color-drag); } } .asset-enum { diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs index a0252788e..0a1c8121e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs @@ -69,7 +69,7 @@ :target "_blank" :on-click dom/stop-propagation} i/open-link-refactor]])]] - + [:div.tool-window-bar.library-bar {:on-click toggle-open} [:div.collapse-library @@ -301,8 +301,11 @@ (not ^boolean show-graphics?) (not ^boolean show-colors?) (not ^boolean show-typography?)) - [:div {:class (css :asset-title)} (tr "workspace.assets.not-found")])] - + [:div {:class (css :asset-title)} + [:span {:class (css :no-found-icon)} + i/search-refactor] + [:span {:class (css :no-found-text)} + (tr "workspace.assets.not-found")]])] [:div.tool-window-content [:div.listing-options (when (> selected-count 0) @@ -378,7 +381,9 @@ (not ^boolean show-colors?) (not ^boolean show-typography?)) [:div.asset-section - [:div.asset-title (tr "workspace.assets.not-found")]])]))) + [:div.asset-title + (tr "workspace.assets.not-found")]])]))) + (mf/defc file-library {::mf/wrap-props false} @@ -388,6 +393,7 @@ shared? (:is-shared file) project-id (:project-id file) page-id (dm/get-in file [:data :pages 0]) + new-css-system (mf/use-ctx ctx/new-css-system) open-status-ref (mf/with-memo [file-id] (-> (l/key file-id) @@ -400,9 +406,10 @@ (mf/deps file-id) (fn [] (st/emit! (dw/unselect-all-assets file-id))))] - - [:div.tool-window {:on-context-menu dom/prevent-default - :on-click unselect-all} + [:div {:class (dom/classnames (css :tool-window) new-css-system + :tool-window (not new-css-system)) + :on-context-menu dom/prevent-default + :on-click unselect-all} [:& file-library-title {:project-id project-id :file-id file-id @@ -417,4 +424,4 @@ :local? local? :filters filters :on-clear-selection unselect-all - :open-status-ref open-status-ref}])])) \ No newline at end of file + :open-status-ref open-status-ref}])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.css.json index 6cbfca0e4..b104045fd 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.css.json @@ -1 +1 @@ -{"button-primary":"assets_file_library_button-primary_o8czr","button-secondary":"assets_file_library_button-secondary_BCBmw","button-tertiary":"assets_file_library_button-tertiary_JiCQn","library-title":"assets_file_library_library-title_FvGs6","file-link":"assets_file_library_file-link_CtN0K","button-tag":"assets_file_library_button-tag_cyg7Q","button-icon":"assets_file_library_button-icon_R-4R0","button-icon-small":"assets_file_library_button-icon-small_9UOdy","asset-element":"assets_file_library_asset-element_6ian7","file-name":"assets_file_library_file-name_Pc8ng","special-title":"assets_file_library_special-title_-Pqzq","special-subtitle":"assets_file_library_special-subtitle_9xOl9","library-content":"assets_file_library_library-content_Yto-8","asset-title":"assets_file_library_asset-title_ozD8M"} \ No newline at end of file +{"button-primary":"assets_file_library_button-primary_o8czr","button-secondary":"assets_file_library_button-secondary_BCBmw","button-tertiary":"assets_file_library_button-tertiary_JiCQn","library-title":"assets_file_library_library-title_FvGs6","file-link":"assets_file_library_file-link_CtN0K","button-tag":"assets_file_library_button-tag_cyg7Q","button-icon":"assets_file_library_button-icon_R-4R0","asset-title":"assets_file_library_asset-title_ozD8M","no-found-icon":"assets_file_library_no-found-icon_yu1td","button-icon-small":"assets_file_library_button-icon-small_9UOdy","asset-element":"assets_file_library_asset-element_6ian7","new-scrollbar":"assets_file_library_new-scrollbar_3zGUU","tool-window":"assets_file_library_tool-window_fzArb","file-name":"assets_file_library_file-name_Pc8ng","special-title":"assets_file_library_special-title_-Pqzq","special-subtitle":"assets_file_library_special-subtitle_9xOl9","library-content":"assets_file_library_library-content_Yto-8","no-found-text":"assets_file_library_no-found-text_RDTeV"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss index deb65469d..a425a1117 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss @@ -5,7 +5,9 @@ // Copyright (c) KALEIDOS INC @import "refactor/common-refactor.scss"; - +.tool-window { + margin-bottom: $s-24; +} .library-title { .file-name { @include titleTipography; @@ -28,7 +30,6 @@ @extend .button-tertiary; height: $s-32; width: $s-28; - margin-right: $s-12; border-radius: $br-8; svg { @extend .button-icon-small; @@ -39,13 +40,35 @@ .library-content { display: flex; flex-direction: column; - height: 100%; + height: calc(100% - $s-36); width: 100%; - overflow-y: auto; + overflow-y: hidden; overflow-x: hidden; + margin-top: $s-4; } .asset-title { - @include titleTipography; margin-left: $s-28; + display: flex; + flex-direction: column; + align-items: center; + gap: $s-8; + .no-found-icon { + @include flexCenter; + background-color: var(--not-found-background-color); + border-radius: $br-circle; + height: $s-48; + width: $s-48; + svg { + @extend .button-icon; + height: $s-24; + width: $s-24; + stroke: var(--not-found-foreground-color); + } + } + + .no-found-text { + @include titleTipography; + color: var(--not-found-foreground-color); + } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.css.json index 0917c975f..397437dd6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.css.json @@ -1 +1 @@ -{"button-primary":"assets_graphics_button-primary_6qIO6","button-secondary":"assets_graphics_button-secondary_0qkG4","button-tertiary":"assets_graphics_button-tertiary_bWZ1s","assets-btn":"assets_graphics_assets-btn_BIoeo","add-component":"assets_graphics_add-component_bgwrr","button-tag":"assets_graphics_button-tag_K3ckf","button-icon":"assets_graphics_button-icon_En5qq","button-icon-small":"assets_graphics_button-icon-small_xNHzC","asset-element":"assets_graphics_asset-element_-VwmF","graphics-group":"assets_graphics_graphics-group_kibPf","drop-space":"assets_graphics_drop-space_2UAKf","asset-grid":"assets_graphics_asset-grid_6ET0K","grid-cell":"assets_graphics_grid-cell_EHW4x","cell-name":"assets_graphics_cell-name_JgbUS","editing":"assets_graphics_editing_O-Ozt","editable-label-input":"assets_graphics_editable-label-input_Yc2zA","editable-label-close":"assets_graphics_editable-label-close_16VT8","selected":"assets_graphics_selected_Q9YJC","dragging":"assets_graphics_dragging_oVA41","asset-enum":"assets_graphics_asset-enum_TS6Je","enum-item":"assets_graphics_enum-item_UFh4c","item-name":"assets_graphics_item-name_HGIQs","grid-placeholder":"assets_graphics_grid-placeholder_9brkO","listing-options":"assets_graphics_listing-options_Jw51P","listing-option-btn":"assets_graphics_listing-option-btn_3IkTO","first":"assets_graphics_first_kU3zf"} \ No newline at end of file +{"button-primary":"assets_graphics_button-primary_6qIO6","button-secondary":"assets_graphics_button-secondary_0qkG4","button-tertiary":"assets_graphics_button-tertiary_bWZ1s","assets-btn":"assets_graphics_assets-btn_BIoeo","add-component":"assets_graphics_add-component_bgwrr","button-tag":"assets_graphics_button-tag_K3ckf","button-icon":"assets_graphics_button-icon_En5qq","button-icon-small":"assets_graphics_button-icon-small_xNHzC","asset-element":"assets_graphics_asset-element_-VwmF","new-scrollbar":"assets_graphics_new-scrollbar_10lYW","graphics-group":"assets_graphics_graphics-group_kibPf","drop-space":"assets_graphics_drop-space_2UAKf","asset-grid":"assets_graphics_asset-grid_6ET0K","grid-cell":"assets_graphics_grid-cell_EHW4x","cell-name":"assets_graphics_cell-name_JgbUS","editing":"assets_graphics_editing_O-Ozt","editable-label-input":"assets_graphics_editable-label-input_Yc2zA","editable-label-close":"assets_graphics_editable-label-close_16VT8","selected":"assets_graphics_selected_Q9YJC","dragging":"assets_graphics_dragging_oVA41","asset-enum":"assets_graphics_asset-enum_TS6Je","enum-item":"assets_graphics_enum-item_UFh4c","item-name":"assets_graphics_item-name_HGIQs","grid-placeholder":"assets_graphics_grid-placeholder_9brkO","listing-options":"assets_graphics_listing-options_Jw51P","listing-option-btn":"assets_graphics_listing-option-btn_3IkTO","first":"assets_graphics_first_kU3zf"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss index 2ac0a04d8..1f200316c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss @@ -17,7 +17,6 @@ grid-template-columns: repeat(4, 1fr); gap: $s-4; margin-left: $s-8; - margin-right: $s-12; .grid-cell { @include flexCenter; position: relative; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.css.json index c6166fbe3..4c2c593b4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.css.json @@ -1 +1 @@ -{"button-primary":"assets_groups_button-primary_2o3Db","button-secondary":"assets_groups_button-secondary_-qdxB","button-tertiary":"assets_groups_button-tertiary_1f4Jy","button-tag":"assets_groups_button-tag_yIgd9","button-icon":"assets_groups_button-icon_MSptS","button-icon-small":"assets_groups_button-icon-small_73Ir0","asset-element":"assets_groups_asset-element_RgKXH","group-title":"assets_groups_group-title_cV4AQ","pre-path":"assets_groups_pre-path_1rE71","path":"assets_groups_path_m0esc"} \ No newline at end of file +{"button-primary":"assets_groups_button-primary_2o3Db","button-secondary":"assets_groups_button-secondary_-qdxB","button-tertiary":"assets_groups_button-tertiary_1f4Jy","button-tag":"assets_groups_button-tag_yIgd9","button-icon":"assets_groups_button-icon_MSptS","button-icon-small":"assets_groups_button-icon-small_73Ir0","asset-element":"assets_groups_asset-element_RgKXH","new-scrollbar":"assets_groups_new-scrollbar_MiZuY","group-title":"assets_groups_group-title_cV4AQ","pre-path":"assets_groups_pre-path_1rE71","path":"assets_groups_path_m0esc"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.css.json index 569ecc824..0837c257f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.css.json @@ -1 +1 @@ -{"button-primary":"assets_typographies_button-primary_njVYq","button-secondary":"assets_typographies_button-secondary_Wzmmw","button-tertiary":"assets_typographies_button-tertiary_k3V5a","assets-btn":"assets_typographies_assets-btn_wCF-m","button-tag":"assets_typographies_button-tag_grTbB","button-icon":"assets_typographies_button-icon_7peoi","button-icon-small":"assets_typographies_button-icon-small_oHD9w","asset-element":"assets_typographies_asset-element_hvNzY","typographies-group":"assets_typographies_typographies-group_iCR4V","assets-list":"assets_typographies_assets-list_wS3At","drop-space":"assets_typographies_drop-space_kGrjB","grid-placeholder":"assets_typographies_grid-placeholder_FvcCI","typography-item":"assets_typographies_typography-item_qkADe","dragging":"assets_typographies_dragging_Ns4o7"} \ No newline at end of file +{"button-primary":"assets_typographies_button-primary_njVYq","button-secondary":"assets_typographies_button-secondary_Wzmmw","button-tertiary":"assets_typographies_button-tertiary_k3V5a","assets-btn":"assets_typographies_assets-btn_wCF-m","button-tag":"assets_typographies_button-tag_grTbB","button-icon":"assets_typographies_button-icon_7peoi","button-icon-small":"assets_typographies_button-icon-small_oHD9w","asset-element":"assets_typographies_asset-element_hvNzY","new-scrollbar":"assets_typographies_new-scrollbar_P2gpd","typographies-group":"assets_typographies_typographies-group_iCR4V","assets-list":"assets_typographies_assets-list_wS3At","drop-space":"assets_typographies_drop-space_kGrjB","grid-placeholder":"assets_typographies_grid-placeholder_FvcCI","typography-item":"assets_typographies_typography-item_qkADe","dragging":"assets_typographies_dragging_Ns4o7"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.css.json b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.css.json index a3399ec49..f7a3727a1 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.css.json @@ -1 +1 @@ -{"button-primary":"sidebar_collapsable_button_button-primary_qaRce","button-secondary":"sidebar_collapsable_button_button-secondary_OqDpe","button-tertiary":"sidebar_collapsable_button_button-tertiary_NuJrA","button-tag":"sidebar_collapsable_button_button-tag_unQKq","button-icon":"sidebar_collapsable_button_button-icon_P4-xy","button-icon-small":"sidebar_collapsable_button_button-icon-small_lQUE3","asset-element":"sidebar_collapsable_button_asset-element_BboJ7","collapsed-sidebar":"sidebar_collapsable_button_collapsed-sidebar_uQnGJ","collapsed-title":"sidebar_collapsable_button_collapsed-title_Jb62g","collapsed-button":"sidebar_collapsable_button_collapsed-button_LT5ME"} \ No newline at end of file +{"button-primary":"sidebar_collapsable_button_button-primary_qaRce","button-secondary":"sidebar_collapsable_button_button-secondary_OqDpe","button-tertiary":"sidebar_collapsable_button_button-tertiary_NuJrA","button-tag":"sidebar_collapsable_button_button-tag_unQKq","button-icon":"sidebar_collapsable_button_button-icon_P4-xy","button-icon-small":"sidebar_collapsable_button_button-icon-small_lQUE3","asset-element":"sidebar_collapsable_button_asset-element_BboJ7","new-scrollbar":"sidebar_collapsable_button_new-scrollbar_cYoQj","collapsed-sidebar":"sidebar_collapsable_button_collapsed-sidebar_uQnGJ","collapsed-title":"sidebar_collapsable_button_collapsed-title_Jb62g","collapsed-button":"sidebar_collapsable_button_collapsed-button_LT5ME"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.css.json b/frontend/src/app/main/ui/workspace/sidebar/layer_item.css.json index 3b0b58bf0..a71b66901 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.css.json @@ -1 +1 @@ -{"button-primary":"sidebar_layer_item_button-primary_74ST4","button-secondary":"sidebar_layer_item_button-secondary_e4u9V","button-tertiary":"sidebar_layer_item_button-tertiary_Mo--6","button-tag":"sidebar_layer_item_button-tag_lFKoD","button-icon":"sidebar_layer_item_button-icon_-D7KH","button-icon-small":"sidebar_layer_item_button-icon-small_1RfDl","layer-row":"sidebar_layer_item_layer-row_KibLX","element-list-body":"sidebar_layer_item_element-list-body_832JO","element-actions":"sidebar_layer_item_element-actions_ACGJI","toggle-element":"sidebar_layer_item_toggle-element_4bhRW","block-element":"sidebar_layer_item_block-element_RhKz-","button-content":"sidebar_layer_item_button-content_bPwop","icon-shape":"sidebar_layer_item_icon-shape_g9Wxn","toggle-content":"sidebar_layer_item_toggle-content_MKhsv","asset-element":"sidebar_layer_item_asset-element_AXTD0","filtered":"sidebar_layer_item_filtered_V5CHf","inverse":"sidebar_layer_item_inverse_zzZ54","absolute":"sidebar_layer_item_absolute_mYIKg","selected":"sidebar_layer_item_selected_O7P-j","element-children":"sidebar_layer_item_element-children_3iA4Q","parent-selected":"sidebar_layer_item_parent-selected_uIIyQ","hidden":"sidebar_layer_item_hidden_JRbJO","type-comp":"sidebar_layer_item_type-comp_FBSRt","tab-indentation":"sidebar_layer_item_tab-indentation_e-2dQ"} \ No newline at end of file +{"button-primary":"sidebar_layer_item_button-primary_74ST4","button-secondary":"sidebar_layer_item_button-secondary_e4u9V","button-tertiary":"sidebar_layer_item_button-tertiary_Mo--6","button-tag":"sidebar_layer_item_button-tag_lFKoD","button-icon":"sidebar_layer_item_button-icon_-D7KH","button-icon-small":"sidebar_layer_item_button-icon-small_1RfDl","layer-row":"sidebar_layer_item_layer-row_KibLX","element-list-body":"sidebar_layer_item_element-list-body_832JO","element-actions":"sidebar_layer_item_element-actions_ACGJI","toggle-element":"sidebar_layer_item_toggle-element_4bhRW","block-element":"sidebar_layer_item_block-element_RhKz-","button-content":"sidebar_layer_item_button-content_bPwop","icon-shape":"sidebar_layer_item_icon-shape_g9Wxn","toggle-content":"sidebar_layer_item_toggle-content_MKhsv","asset-element":"sidebar_layer_item_asset-element_AXTD0","new-scrollbar":"sidebar_layer_item_new-scrollbar_zvlI0","filtered":"sidebar_layer_item_filtered_V5CHf","inverse":"sidebar_layer_item_inverse_zzZ54","absolute":"sidebar_layer_item_absolute_mYIKg","selected":"sidebar_layer_item_selected_O7P-j","element-children":"sidebar_layer_item_element-children_3iA4Q","parent-selected":"sidebar_layer_item_parent-selected_uIIyQ","hidden":"sidebar_layer_item_hidden_JRbJO","type-comp":"sidebar_layer_item_type-comp_FBSRt","tab-indentation":"sidebar_layer_item_tab-indentation_e-2dQ"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_name.css.json b/frontend/src/app/main/ui/workspace/sidebar/layer_name.css.json index 4e8c50d74..39d44c4ff 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_name.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_name.css.json @@ -1 +1 @@ -{"button-primary":"sidebar_layer_name_button-primary_V-6Cp","button-secondary":"sidebar_layer_name_button-secondary_Q14Qj","button-tertiary":"sidebar_layer_name_button-tertiary_dA-v0","button-tag":"sidebar_layer_name_button-tag_fr2K0","button-icon":"sidebar_layer_name_button-icon_UQXjw","button-icon-small":"sidebar_layer_name_button-icon-small_At5P8","asset-element":"sidebar_layer_name_asset-element_WVekz","element-name":"sidebar_layer_name_element-name_hZ-lA","selected":"sidebar_layer_name_selected_MKxdm","type-comp":"sidebar_layer_name_type-comp_TNGM-","hidden":"sidebar_layer_name_hidden_e-K3G","element-name-input":"sidebar_layer_name_element-name-input_Wpnkf"} \ No newline at end of file +{"button-primary":"sidebar_layer_name_button-primary_V-6Cp","button-secondary":"sidebar_layer_name_button-secondary_Q14Qj","button-tertiary":"sidebar_layer_name_button-tertiary_dA-v0","button-tag":"sidebar_layer_name_button-tag_fr2K0","button-icon":"sidebar_layer_name_button-icon_UQXjw","button-icon-small":"sidebar_layer_name_button-icon-small_At5P8","asset-element":"sidebar_layer_name_asset-element_WVekz","new-scrollbar":"sidebar_layer_name_new-scrollbar_gOiJo","element-name":"sidebar_layer_name_element-name_hZ-lA","selected":"sidebar_layer_name_selected_MKxdm","type-comp":"sidebar_layer_name_type-comp_TNGM-","hidden":"sidebar_layer_name_hidden_e-K3G","element-name-input":"sidebar_layer_name_element-name-input_Wpnkf"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.css.json b/frontend/src/app/main/ui/workspace/sidebar/layers.css.json index ac87f734c..41ddcc336 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.css.json @@ -1 +1 @@ -{"button-primary":"sidebar_layers_button-primary_q9e2I","button-secondary":"sidebar_layers_button-secondary_H4lpi","button-tertiary":"sidebar_layers_button-tertiary_5mq-9","layers":"sidebar_layers_layers_87ZOo","tool-window-bar":"sidebar_layers_tool-window-bar_lg54C","search":"sidebar_layers_search_zjs2x","close-search":"sidebar_layers_close-search_baIhK","icon-search":"sidebar_layers_icon-search_6kWUn","button-tag":"sidebar_layers_button-tag_FT7oa","active-filters":"sidebar_layers_active-filters_-JMMP","layer-filter":"sidebar_layers_layer-filter_rHZTz","button-icon":"sidebar_layers_button-icon_SD8PP","button-icon-small":"sidebar_layers_button-icon-small_v5L-u","filters-container":"sidebar_layers_filters-container_c1Ux9","filter-menu-item":"sidebar_layers_filter-menu-item_aZd0D","filter-menu-item-tick":"sidebar_layers_filter-menu-item-tick_JNdIK","filter-menu-item-name-wrapper":"sidebar_layers_filter-menu-item-name-wrapper_DtGkH","filter-menu-item-icon":"sidebar_layers_filter-menu-item-icon_Oi3Ix","layer-filter-icon":"sidebar_layers_layer-filter-icon_0yKrb","layer-filter-close":"sidebar_layers_layer-filter-close_3mV4i","focus-title":"sidebar_layers_focus-title_35PvQ","back-button-icon":"sidebar_layers_back-button-icon_mHv6g","asset-element":"sidebar_layers_asset-element_-dbA7","page-name":"sidebar_layers_page-name_8ZDRR","filter-button":"sidebar_layers_filter-button_KXxHh","focus-name":"sidebar_layers_focus-name_Fderf","focus-mode-tag-wrapper":"sidebar_layers_focus-mode-tag-wrapper_OHXCG","focus-mode-tag":"sidebar_layers_focus-mode-tag_J5ItD","layer-filter-name":"sidebar_layers_layer-filter-name_Y4PuB","filter-menu-item-name":"sidebar_layers_filter-menu-item-name_rxeut","selected":"sidebar_layers_selected_V5Vv3","tool-window-content":"sidebar_layers_tool-window-content_YnpDB","element-list":"sidebar_layers_element-list_nAntB"} \ No newline at end of file +{"button-primary":"sidebar_layers_button-primary_q9e2I","button-secondary":"sidebar_layers_button-secondary_H4lpi","button-tertiary":"sidebar_layers_button-tertiary_5mq-9","layers":"sidebar_layers_layers_87ZOo","tool-window-bar":"sidebar_layers_tool-window-bar_lg54C","search":"sidebar_layers_search_zjs2x","close-search":"sidebar_layers_close-search_baIhK","icon-search":"sidebar_layers_icon-search_6kWUn","button-tag":"sidebar_layers_button-tag_FT7oa","active-filters":"sidebar_layers_active-filters_-JMMP","layer-filter":"sidebar_layers_layer-filter_rHZTz","button-icon":"sidebar_layers_button-icon_SD8PP","button-icon-small":"sidebar_layers_button-icon-small_v5L-u","filters-container":"sidebar_layers_filters-container_c1Ux9","filter-menu-item":"sidebar_layers_filter-menu-item_aZd0D","filter-menu-item-tick":"sidebar_layers_filter-menu-item-tick_JNdIK","filter-menu-item-name-wrapper":"sidebar_layers_filter-menu-item-name-wrapper_DtGkH","filter-menu-item-icon":"sidebar_layers_filter-menu-item-icon_Oi3Ix","layer-filter-icon":"sidebar_layers_layer-filter-icon_0yKrb","layer-filter-close":"sidebar_layers_layer-filter-close_3mV4i","focus-title":"sidebar_layers_focus-title_35PvQ","back-button-icon":"sidebar_layers_back-button-icon_mHv6g","asset-element":"sidebar_layers_asset-element_-dbA7","new-scrollbar":"sidebar_layers_new-scrollbar_62eFS","page-name":"sidebar_layers_page-name_8ZDRR","filter-button":"sidebar_layers_filter-button_KXxHh","focus-name":"sidebar_layers_focus-name_Fderf","focus-mode-tag-wrapper":"sidebar_layers_focus-mode-tag-wrapper_OHXCG","focus-mode-tag":"sidebar_layers_focus-mode-tag_J5ItD","layer-filter-name":"sidebar_layers_layer-filter-name_Y4PuB","filter-menu-item-name":"sidebar_layers_filter-menu-item-name_rxeut","selected":"sidebar_layers_selected_V5Vv3","tool-window-content":"sidebar_layers_tool-window-content_YnpDB","element-list":"sidebar_layers_element-list_nAntB"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs index 2c0940993..bea7507b7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs @@ -589,7 +589,7 @@ (mf/defc typography-advanced-options {::mf/wrap [mf/memo]} - [{:keys [visible? typography editable? name-input-ref on-close on-change on-name-blur local? navigate-to-library]}] + [{:keys [visible? typography editable? name-input-ref on-close on-change on-name-blur local? navigate-to-library on-key-down]}] (let [ref (mf/use-ref nil)] (mf/use-effect (mf/deps visible?) @@ -616,6 +616,7 @@ :type "text" :ref name-input-ref :default-value (:name typography) + :on-key-down on-key-down :on-blur on-name-blur}] [:div {:class (css :action-btn) @@ -707,7 +708,18 @@ (mf/deps file-id) (fn [] (when file-id - (st/emit! (dw/navigate-to-library file-id)))))] + (st/emit! (dw/navigate-to-library file-id))))) + + on-key-down + (mf/use-fn + (fn [event] + (let [enter? (kbd/enter? event) + esc? (kbd/esc? event) + input-node (dom/event->target event)] + (when ^boolean enter? + (dom/blur! input-node)) + (when ^boolean esc? + (dom/blur! input-node)))))] (mf/with-effect [editing?] (when editing? @@ -742,6 +754,7 @@ :type "text" :ref name-input-ref :default-value (:name typography) + :on-key-down on-key-down :on-blur on-name-blur}]] [:div {:class (dom/classnames (css :typography-selection-wrapper) true @@ -779,6 +792,7 @@ :name-input-ref name-input-ref :on-change on-change :on-name-blur on-name-blur + :on-key-down on-key-down :local? local? :navigate-to-library navigate-to-library}]] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.css.json b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.css.json index 007aeef5a..5009a9ae2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.css.json @@ -1 +1 @@ -{"button-primary":"menus_typography_button-primary_s1c9M","button-secondary":"menus_typography_button-secondary_RjAsk","button-tertiary":"menus_typography_button-tertiary_Qt18f","font-name-wrapper":"menus_typography_font-name-wrapper_Njxb6","action-btn":"menus_typography_action-btn_hCakz","button-tag":"menus_typography_button-tag_32-df","button-icon":"menus_typography_button-icon_jucwh","advanced-options-wrapper":"menus_typography_advanced-options-wrapper_k3FD6","typography-options":"menus_typography_typography-options_j1u8l","font-modifiers":"menus_typography_font-modifiers_P8cSa","font-variant-options":"menus_typography_font-variant-options_qlgLr","icon":"menus_typography_icon_eDU2Z","font-size-options":"menus_typography_font-size-options_sKQdL","font-option":"menus_typography_font-option_7mgxF","button-icon-small":"menus_typography_button-icon-small_g3fsU","font-selector":"menus_typography_font-selector_TzuGa","font-selector-dropdown":"menus_typography_font-selector-dropdown_4s6s8","font-wrapper":"menus_typography_font-wrapper_GPkHS","font-item":"menus_typography_font-item_YQffA","typography-variations":"menus_typography_typography-variations_wbNM3","spacing-options":"menus_typography_spacing-options_RUpAK","line-height":"menus_typography_line-height_S7zsF","letter-spacing":"menus_typography_letter-spacing_8R6p2","asset-element":"menus_typography_asset-element_-LlIX","text-transform":"menus_typography_text-transform_U7Y3U","typography-entry":"menus_typography_typography-entry_Y6lvA","typography-selection-wrapper":"menus_typography_typography-selection-wrapper_W6ewx","is-selectable":"menus_typography_is-selectable_O6-D2","typography-sample":"menus_typography_typography-sample_6ruld","typography-name":"menus_typography_typography-name_b14xj","typography-font":"menus_typography_typography-font_hJIgO","selected":"menus_typography_selected_Ka-O9","typography-sample-input":"menus_typography_typography-sample-input_u2i8b","adv-typography-name":"menus_typography_adv-typography-name_PvB1X","name":"menus_typography_name_1SJal","font-size-select":"menus_typography_font-size-select_yexav","font-variant-select":"menus_typography_font-variant-select_-OQsO","line-height-input":"menus_typography_line-height-input_SG7be","letter-spacing-input":"menus_typography_letter-spacing-input_LShRc","header":"menus_typography_header_e-rUh","title":"menus_typography_title_uPejx","fonts-list":"menus_typography_fonts-list_ki8X-","label":"menus_typography_label_S-7jI"} \ No newline at end of file +{"button-primary":"menus_typography_button-primary_s1c9M","button-secondary":"menus_typography_button-secondary_RjAsk","button-tertiary":"menus_typography_button-tertiary_Qt18f","font-name-wrapper":"menus_typography_font-name-wrapper_Njxb6","action-btn":"menus_typography_action-btn_hCakz","button-tag":"menus_typography_button-tag_32-df","button-icon":"menus_typography_button-icon_jucwh","advanced-options-wrapper":"menus_typography_advanced-options-wrapper_k3FD6","typography-options":"menus_typography_typography-options_j1u8l","font-modifiers":"menus_typography_font-modifiers_P8cSa","font-variant-options":"menus_typography_font-variant-options_qlgLr","icon":"menus_typography_icon_eDU2Z","font-size-options":"menus_typography_font-size-options_sKQdL","font-option":"menus_typography_font-option_7mgxF","button-icon-small":"menus_typography_button-icon-small_g3fsU","font-selector":"menus_typography_font-selector_TzuGa","font-selector-dropdown":"menus_typography_font-selector-dropdown_4s6s8","font-wrapper":"menus_typography_font-wrapper_GPkHS","font-item":"menus_typography_font-item_YQffA","typography-variations":"menus_typography_typography-variations_wbNM3","spacing-options":"menus_typography_spacing-options_RUpAK","line-height":"menus_typography_line-height_S7zsF","letter-spacing":"menus_typography_letter-spacing_8R6p2","asset-element":"menus_typography_asset-element_-LlIX","text-transform":"menus_typography_text-transform_U7Y3U","new-scrollbar":"menus_typography_new-scrollbar_mfxWK","typography-entry":"menus_typography_typography-entry_Y6lvA","typography-selection-wrapper":"menus_typography_typography-selection-wrapper_W6ewx","is-selectable":"menus_typography_is-selectable_O6-D2","typography-sample":"menus_typography_typography-sample_6ruld","typography-name":"menus_typography_typography-name_b14xj","typography-font":"menus_typography_typography-font_hJIgO","selected":"menus_typography_selected_Ka-O9","typography-sample-input":"menus_typography_typography-sample-input_u2i8b","adv-typography-name":"menus_typography_adv-typography-name_PvB1X","name":"menus_typography_name_1SJal","font-size-select":"menus_typography_font-size-select_yexav","font-variant-select":"menus_typography_font-variant-select_-OQsO","line-height-input":"menus_typography_line-height-input_SG7be","letter-spacing-input":"menus_typography_letter-spacing-input_LShRc","header":"menus_typography_header_e-rUh","title":"menus_typography_title_uPejx","fonts-list":"menus_typography_fonts-list_ki8X-","label":"menus_typography_label_S-7jI"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.css.json b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.css.json index cba898593..5e83dd7e3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.css.json @@ -1 +1 @@ -{"button-primary":"sidebar_shortcuts_button-primary_aIZ1F","button-secondary":"sidebar_shortcuts_button-secondary_dtWEN","button-tertiary":"sidebar_shortcuts_button-tertiary_3VDIw","shortcuts":"sidebar_shortcuts_shortcuts_cOJNo","shortcuts-header":"sidebar_shortcuts_shortcuts-header_0SZ19","shortcuts-close-button":"sidebar_shortcuts_shortcuts-close-button_gT7kn","button-tag":"sidebar_shortcuts_button-tag_3LImZ","button-icon":"sidebar_shortcuts_button-icon_rCHmV","button-icon-small":"sidebar_shortcuts_button-icon-small_9BnNh","shortcuts-list":"sidebar_shortcuts_shortcuts-list_z7osI","section-title":"sidebar_shortcuts_section-title_Dv7S-","collapsed-shortcuts":"sidebar_shortcuts_collapsed-shortcuts_XrOj5","subsection-title":"sidebar_shortcuts_subsection-title_--5j4","search-field":"sidebar_shortcuts_search-field_cDecA","search-icon":"sidebar_shortcuts_search-icon_NSAwd","search-box":"sidebar_shortcuts_search-box_vmYAl","clear-btn":"sidebar_shortcuts_clear-btn_vRbGu","clear-icon":"sidebar_shortcuts_clear-icon_ZL4ae","icon-wrapper":"sidebar_shortcuts_icon-wrapper_XaR8m","asset-element":"sidebar_shortcuts_asset-element_-zk6N","shortcuts-title":"sidebar_shortcuts_shortcuts-title_P38o9","input-text":"sidebar_shortcuts_input-text_e9n1x","section":"sidebar_shortcuts_section_Jxkqa","open":"sidebar_shortcuts_open_SxghD","subsection-name":"sidebar_shortcuts_subsection-name_rWvFY","section-name":"sidebar_shortcuts_section-name_SyF9-","subsection-menu":"sidebar_shortcuts_subsection-menu_FdH9L","sub-menu":"sidebar_shortcuts_sub-menu_95jTY","shortcuts-name":"sidebar_shortcuts_shortcuts-name_hPkq6","command-name":"sidebar_shortcuts_command-name_Cujed","keys":"sidebar_shortcuts_keys_-pUnF","key":"sidebar_shortcuts_key_QyU8q","space":"sidebar_shortcuts_space_aODdu","not-found":"sidebar_shortcuts_not-found_bKEb0"} \ No newline at end of file +{"button-primary":"sidebar_shortcuts_button-primary_aIZ1F","button-secondary":"sidebar_shortcuts_button-secondary_dtWEN","button-tertiary":"sidebar_shortcuts_button-tertiary_3VDIw","shortcuts":"sidebar_shortcuts_shortcuts_cOJNo","shortcuts-header":"sidebar_shortcuts_shortcuts-header_0SZ19","shortcuts-close-button":"sidebar_shortcuts_shortcuts-close-button_gT7kn","button-tag":"sidebar_shortcuts_button-tag_3LImZ","button-icon":"sidebar_shortcuts_button-icon_rCHmV","button-icon-small":"sidebar_shortcuts_button-icon-small_9BnNh","shortcuts-list":"sidebar_shortcuts_shortcuts-list_z7osI","section-title":"sidebar_shortcuts_section-title_Dv7S-","collapsed-shortcuts":"sidebar_shortcuts_collapsed-shortcuts_XrOj5","subsection-title":"sidebar_shortcuts_subsection-title_--5j4","search-field":"sidebar_shortcuts_search-field_cDecA","search-icon":"sidebar_shortcuts_search-icon_NSAwd","search-box":"sidebar_shortcuts_search-box_vmYAl","clear-btn":"sidebar_shortcuts_clear-btn_vRbGu","clear-icon":"sidebar_shortcuts_clear-icon_ZL4ae","icon-wrapper":"sidebar_shortcuts_icon-wrapper_XaR8m","asset-element":"sidebar_shortcuts_asset-element_-zk6N","new-scrollbar":"sidebar_shortcuts_new-scrollbar_bRqNw","shortcuts-title":"sidebar_shortcuts_shortcuts-title_P38o9","input-text":"sidebar_shortcuts_input-text_e9n1x","section":"sidebar_shortcuts_section_Jxkqa","open":"sidebar_shortcuts_open_SxghD","subsection-name":"sidebar_shortcuts_subsection-name_rWvFY","section-name":"sidebar_shortcuts_section-name_SyF9-","subsection-menu":"sidebar_shortcuts_subsection-menu_FdH9L","sub-menu":"sidebar_shortcuts_sub-menu_95jTY","shortcuts-name":"sidebar_shortcuts_shortcuts-name_hPkq6","command-name":"sidebar_shortcuts_command-name_Cujed","keys":"sidebar_shortcuts_keys_-pUnF","key":"sidebar_shortcuts_key_QyU8q","space":"sidebar_shortcuts_space_aODdu","not-found":"sidebar_shortcuts_not-found_bKEb0"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json b/frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json index 0aec9ae5c..b74252967 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json @@ -1 +1 @@ -{"button-primary":"sidebar_sitemap_button-primary_Z-bKW","button-secondary":"sidebar_sitemap_button-secondary_a56LZ","button-tertiary":"sidebar_sitemap_button-tertiary_E2hzd","sitemap":"sidebar_sitemap_sitemap_kvKKx","add-page":"sidebar_sitemap_add-page_r8Ibb","button-tag":"sidebar_sitemap_button-tag_u1NAz","button-icon":"sidebar_sitemap_button-icon_MkibT","button-icon-small":"sidebar_sitemap_button-icon-small_Mhipv","tool-window-content":"sidebar_sitemap_tool-window-content_G-Nut","pages-list":"sidebar_sitemap_pages-list_cb1Mx","page-element":"sidebar_sitemap_page-element_iR9wf","element-list-body":"sidebar_sitemap_element-list-body_OIVac","page-actions":"sidebar_sitemap_page-actions_QTuKw","page-icon":"sidebar_sitemap_page-icon_ujSjM","asset-element":"sidebar_sitemap_asset-element_I1-m4","view-only-mode":"sidebar_sitemap_view-only-mode_JrsYg","resize-area":"sidebar_sitemap_resize-area_JgdjZ","dnd-over-top":"sidebar_sitemap_dnd-over-top_kGfcb","dnd-over-bot":"sidebar_sitemap_dnd-over-bot_352W2","dnd-over":"sidebar_sitemap_dnd-over_Sf5e2","page-name":"sidebar_sitemap_page-name_601Ii","element-name":"sidebar_sitemap_element-name_iMex0","on-drag":"sidebar_sitemap_on-drag_v3GM8","selected":"sidebar_sitemap_selected_mCOlT","hidden":"sidebar_sitemap_hidden_viFSn"} \ No newline at end of file +{"button-primary":"sidebar_sitemap_button-primary_Z-bKW","button-secondary":"sidebar_sitemap_button-secondary_a56LZ","button-tertiary":"sidebar_sitemap_button-tertiary_E2hzd","sitemap":"sidebar_sitemap_sitemap_kvKKx","add-page":"sidebar_sitemap_add-page_r8Ibb","button-tag":"sidebar_sitemap_button-tag_u1NAz","button-icon":"sidebar_sitemap_button-icon_MkibT","button-icon-small":"sidebar_sitemap_button-icon-small_Mhipv","tool-window-content":"sidebar_sitemap_tool-window-content_G-Nut","pages-list":"sidebar_sitemap_pages-list_cb1Mx","page-element":"sidebar_sitemap_page-element_iR9wf","element-list-body":"sidebar_sitemap_element-list-body_OIVac","page-actions":"sidebar_sitemap_page-actions_QTuKw","page-icon":"sidebar_sitemap_page-icon_ujSjM","asset-element":"sidebar_sitemap_asset-element_I1-m4","new-scrollbar":"sidebar_sitemap_new-scrollbar_Pb1-Y","view-only-mode":"sidebar_sitemap_view-only-mode_JrsYg","resize-area":"sidebar_sitemap_resize-area_JgdjZ","dnd-over-top":"sidebar_sitemap_dnd-over-top_kGfcb","dnd-over-bot":"sidebar_sitemap_dnd-over-bot_352W2","dnd-over":"sidebar_sitemap_dnd-over_Sf5e2","page-name":"sidebar_sitemap_page-name_601Ii","element-name":"sidebar_sitemap_element-name_iMex0","on-drag":"sidebar_sitemap_on-drag_v3GM8","selected":"sidebar_sitemap_selected_mCOlT","hidden":"sidebar_sitemap_hidden_viFSn"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/text_palette.css.json b/frontend/src/app/main/ui/workspace/text_palette.css.json index bf4e65ccc..f90691b47 100644 --- a/frontend/src/app/main/ui/workspace/text_palette.css.json +++ b/frontend/src/app/main/ui/workspace/text_palette.css.json @@ -1 +1 @@ -{"button-primary":"workspace_text_palette_button-primary_1umSD","button-secondary":"workspace_text_palette_button-secondary_VOIWz","button-tertiary":"workspace_text_palette_button-tertiary_4AWFN","button-tag":"workspace_text_palette_button-tag_TMcKw","button-icon":"workspace_text_palette_button-icon_bcydd","text-palette":"workspace_text_palette_text-palette_0yeGp","left-arrow":"workspace_text_palette_left-arrow_iSjPL","right-arrow":"workspace_text_palette_right-arrow_cWHr6","button-icon-small":"workspace_text_palette_button-icon-small_wGyH7","asset-element":"workspace_text_palette_asset-element_edxQB","disabled":"workspace_text_palette_disabled_EF36J","text-palette-content":"workspace_text_palette_text-palette-content_anJb5","text-palette-inside":"workspace_text_palette_text-palette-inside_LgHnf","typography-item":"workspace_text_palette_typography-item_d0vFL","typography-name":"workspace_text_palette_typography-name_NVBRv","typography-font":"workspace_text_palette_typography-font_paqmC","typography-data":"workspace_text_palette_typography-data_eKyme","mid-item":"workspace_text_palette_mid-item_uTcD2","small-item":"workspace_text_palette_small-item_1Y6mx"} \ No newline at end of file +{"button-primary":"workspace_text_palette_button-primary_1umSD","button-secondary":"workspace_text_palette_button-secondary_VOIWz","button-tertiary":"workspace_text_palette_button-tertiary_4AWFN","button-tag":"workspace_text_palette_button-tag_TMcKw","button-icon":"workspace_text_palette_button-icon_bcydd","text-palette":"workspace_text_palette_text-palette_0yeGp","left-arrow":"workspace_text_palette_left-arrow_iSjPL","right-arrow":"workspace_text_palette_right-arrow_cWHr6","button-icon-small":"workspace_text_palette_button-icon-small_wGyH7","asset-element":"workspace_text_palette_asset-element_edxQB","new-scrollbar":"workspace_text_palette_new-scrollbar_51-wH","disabled":"workspace_text_palette_disabled_EF36J","text-palette-content":"workspace_text_palette_text-palette-content_anJb5","text-palette-inside":"workspace_text_palette_text-palette-inside_LgHnf","typography-item":"workspace_text_palette_typography-item_d0vFL","typography-name":"workspace_text_palette_typography-name_NVBRv","typography-font":"workspace_text_palette_typography-font_paqmC","typography-data":"workspace_text_palette_typography-data_eKyme","mid-item":"workspace_text_palette_mid-item_uTcD2","small-item":"workspace_text_palette_small-item_1Y6mx"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs index 2f6e65054..4912a2a39 100644 --- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs +++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs @@ -7,12 +7,12 @@ (ns app.main.ui.workspace.text-palette-ctx-menu (:require-macros [app.main.style :refer [css]]) (:require + [app.common.data.macros :as dm] [app.main.refs :as refs] [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :refer [tr]] - [cuerdas.core :as str] [rumext.v2 :as mf])) @@ -29,11 +29,14 @@ {:class (dom/classnames (css :palette-library) true (css :selected) (= selected (:id cur-library))) :key (str "library-" idx) - :on-click #(on-select-palette cur-library)} + :on-click #(on-select-palette cur-library)} [:div {:class (dom/classnames (css :library-name) true)} - (str (:name cur-library) " " (str/format "(%s)" (count typographies)))] - + [:span {:class (css :lib-name)} + (dm/str (:name cur-library))] + [:span {:class (css :lib-num)} + (dm/str "(" (count typographies) ")")]] + (when (= selected (:id cur-library)) [:span {:class (dom/classnames (css :icon-wrapper) true)} i/tick-refactor])])) @@ -42,11 +45,12 @@ {:class (dom/classnames (css :file-library) true (css :selected) (= selected :file)) :on-click #(on-select-palette :file)} - + [:div {:class (dom/classnames (css :library-name) true)} - (str (tr "workspace.libraries.colors.file-library") - (str/format " (%s)" (count file-typographies)))] + [:span {:class (css :lib-name)} + (tr "workspace.libraries.colors.file-library")] + [:span {:class (css :lib-num)} + (dm/str "(" (count file-typographies) ")")]] (when (= selected :file) [:span {:class (dom/classnames (css :icon-wrapper) true)} - i/tick-refactor]) - ]]])) + i/tick-refactor])]]])) diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.css.json b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.css.json index d3f82dd94..0aedf625f 100644 --- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.css.json +++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.css.json @@ -1 +1 @@ -{"button-primary":"workspace_text_palette_ctx_menu_button-primary_bkGXB","button-secondary":"workspace_text_palette_ctx_menu_button-secondary_mbPs7","button-tertiary":"workspace_text_palette_ctx_menu_button-tertiary_Z74wM","button-tag":"workspace_text_palette_ctx_menu_button-tag_OmlzA","button-icon":"workspace_text_palette_ctx_menu_button-icon_oklnh","button-icon-small":"workspace_text_palette_ctx_menu_button-icon-small_ebriD","workspace-context-menu":"workspace_text_palette_ctx_menu_workspace-context-menu_OShZn","palette-library":"workspace_text_palette_ctx_menu_palette-library_pDyi5","selected":"workspace_text_palette_ctx_menu_selected_k3kOd","icon-wrapper":"workspace_text_palette_ctx_menu_icon-wrapper_Xoj9o","file-library":"workspace_text_palette_ctx_menu_file-library_t-25M","asset-element":"workspace_text_palette_ctx_menu_asset-element_-ynNV","library-name":"workspace_text_palette_ctx_menu_library-name_TGs9Z"} \ No newline at end of file +{"button-primary":"workspace_text_palette_ctx_menu_button-primary_bkGXB","button-secondary":"workspace_text_palette_ctx_menu_button-secondary_mbPs7","button-tertiary":"workspace_text_palette_ctx_menu_button-tertiary_Z74wM","button-tag":"workspace_text_palette_ctx_menu_button-tag_OmlzA","button-icon":"workspace_text_palette_ctx_menu_button-icon_oklnh","button-icon-small":"workspace_text_palette_ctx_menu_button-icon-small_ebriD","workspace-context-menu":"workspace_text_palette_ctx_menu_workspace-context-menu_OShZn","palette-library":"workspace_text_palette_ctx_menu_palette-library_pDyi5","selected":"workspace_text_palette_ctx_menu_selected_k3kOd","icon-wrapper":"workspace_text_palette_ctx_menu_icon-wrapper_Xoj9o","file-library":"workspace_text_palette_ctx_menu_file-library_t-25M","asset-element":"workspace_text_palette_ctx_menu_asset-element_-ynNV","new-scrollbar":"workspace_text_palette_ctx_menu_new-scrollbar_6G8rs","library-name":"workspace_text_palette_ctx_menu_library-name_TGs9Z","lib-name":"workspace_text_palette_ctx_menu_lib-name_-5-Hj","lib-num":"workspace_text_palette_ctx_menu_lib-num_O7Nbx"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss index 98cbbe191..b1bafcd23 100644 --- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss +++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss @@ -33,6 +33,25 @@ .library-name { @include titleTipography; color: var(--context-menu-foreground-color); + display: grid; + grid-template-columns: 1fr $s-24; + max-width: $s-400; + .lib-name { + @include textEllipsis; + max-width: $s-380; + } + .lib-num { + background-color: green; + margin-left: $s-4; + } + } + .icon-wrapper { + margin-left: $s-4; + @include flexCenter; + svg { + @include flexCenter; + @extend .button-icon-small; + } } &.selected, &:hover { @@ -41,6 +60,7 @@ svg { @include flexCenter; @extend .button-icon-small; + stroke: var(--context-menu-foreground-color-selected); } } .library-name {