From 0a123a39178caecbc4d9d14799079491feded469 Mon Sep 17 00:00:00 2001 From: Eva Date: Tue, 2 Jan 2024 11:15:02 +0100 Subject: [PATCH] :recycle: Remove refer css from files --- .../app/main/ui/components/search_bar.cljs | 10 +- .../app/main/ui/components/search_bar.scss | 93 +++---- .../app/main/ui/workspace/context_menu.cljs | 80 ++---- .../app/main/ui/workspace/context_menu.scss | 158 ++++++------ .../workspace/sidebar/collapsable_button.cljs | 28 +-- .../main/ui/workspace/sidebar/history.cljs | 176 +++++--------- .../main/ui/workspace/sidebar/history.scss | 226 ++++++++--------- .../main/ui/workspace/sidebar/shortcuts.cljs | 230 +++++------------- 8 files changed, 401 insertions(+), 600 deletions(-) diff --git a/frontend/src/app/main/ui/components/search_bar.cljs b/frontend/src/app/main/ui/components/search_bar.cljs index 507b68d1e7..705bb3b4d7 100644 --- a/frontend/src/app/main/ui/components/search_bar.cljs +++ b/frontend/src/app/main/ui/components/search_bar.cljs @@ -5,7 +5,7 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.components.search-bar - (:require-macros [app.main.style :refer [css]]) + (:require-macros [app.main.style :as stl]) (:require [app.main.ui.icons :as i] [app.util.dom :as dom] @@ -45,16 +45,16 @@ node (dom/get-target event)] (when ^boolean enter? (dom/blur! node)) (when ^boolean esc? (dom/blur! node)))))] - [:span {:class (dom/classnames (css :search-box) true - (css :has-children) (some? children))} + [:span {:class (stl/css-case :search-box true + :has-children (some? children))} children - [:div {:class (dom/classnames (css :search-input-wrapper) true)} + [:div {:class (stl/css :search-input-wrapper)} icon [:input {:on-change handle-change :value value :placeholder placeholder :on-key-down handle-key-down}] (when (not= "" value) - [:button {:class (dom/classnames (css :clear) true) + [:button {:class (stl/css :clear) :on-click handle-clear} i/delete-text-refactor])]])) diff --git a/frontend/src/app/main/ui/components/search_bar.scss b/frontend/src/app/main/ui/components/search_bar.scss index 9f568ea286..850b8af221 100644 --- a/frontend/src/app/main/ui/components/search_bar.scss +++ b/frontend/src/app/main/ui/components/search_bar.scss @@ -13,55 +13,56 @@ width: 100%; border-radius: $br-8; background-color: var(--search-bar-background-color); +} - .search-input-wrapper { - @include flexCenter; - height: $s-32; +.search-input-wrapper { + @include flexCenter; + height: $s-32; + width: 100%; + border: $s-1 solid var(--search-bar-input-border-color); + border-radius: $br-8; + background-color: var(--search-bar-input-background-color); + input { width: 100%; - border: $s-1 solid var(--search-bar-input-border-color); - border-radius: $br-8; - background-color: var(--search-bar-input-background-color); - input { - width: 100%; - height: 100%; - margin: 0 $s-8 0 $s-4; - border: 0; - background-color: var(--input-background-color); - font-size: $fs-12; - color: var(--input-foreground-color); - &:focus { - outline: none; - } - } - &:hover { - border: $s-1 solid var(--input-background-color-hover); - background-color: var(--input-background-color-hover); - input { - background-color: var(--input-background-color-hover); - } - } - &:focus-within { - background-color: var(--input-background-color-active); - color: var(--input-foreground-color-active); - border: $s-1 solid var(--input-border-color-focus); - input { - background-color: var(--input-background-color-active); - } - } - - .clear { - @extend .button-tag; - border-radius: $br-8; - height: 100%; - svg { - @extend .button-icon-small; - color: transparent; - stroke: var(--icon-foreground); - } + height: 100%; + margin: 0 $s-8 0 $s-4; + border: 0; + background-color: var(--input-background-color); + font-size: $fs-12; + color: var(--input-foreground-color); + &:focus { + outline: none; } } - &.has-children .search-input-wrapper { - border-radius: $br-2 $br-8 $br-8 $br-2; - margin-left: 0; + &:hover { + border: $s-1 solid var(--input-background-color-hover); + background-color: var(--input-background-color-hover); + input { + background-color: var(--input-background-color-hover); + } + } + &:focus-within { + background-color: var(--input-background-color-active); + color: var(--input-foreground-color-active); + border: $s-1 solid var(--input-border-color-focus); + input { + background-color: var(--input-background-color-active); + } } } + +.clear { + @extend .button-tag; + border-radius: $br-8; + height: 100%; + svg { + @extend .button-icon-small; + color: transparent; + stroke: var(--icon-foreground); + } +} + +.search-box.has-children .search-input-wrapper { + border-radius: $br-2 $br-8 $br-8 $br-2; + margin-left: 0; +} diff --git a/frontend/src/app/main/ui/workspace/context_menu.cljs b/frontend/src/app/main/ui/workspace/context_menu.cljs index 3312782eac..e8140696aa 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/context_menu.cljs @@ -6,7 +6,7 @@ (ns app.main.ui.workspace.context-menu "A workspace specific context menu (mouse right click)." - (:require-macros [app.main.style :refer [css]]) + (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] [app.common.data.macros :as dm] @@ -31,7 +31,6 @@ [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.shape-icon-refactor :as sic] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.assets.common :as cmm] [app.util.dom :as dom] @@ -52,7 +51,6 @@ [{:keys [title shortcut on-click on-pointer-enter on-pointer-leave on-unmount children selected? icon disabled] :as props}] (let [submenu-ref (mf/use-ref nil) hovering? (mf/use-ref false) - new-css-system (mf/use-ctx ctx/new-css-system) on-pointer-enter (mf/use-callback (fn [] @@ -86,71 +84,44 @@ (constantly on-unmount)) (if icon - [:li {:class (if new-css-system - (dom/classnames (css :icon-menu-item) true) - (dom/classnames :icon-menu-item true)) + [:li {:class (stl/css :icon-menu-item) :disabled disabled :ref set-dom-node :on-click on-click :on-pointer-enter on-pointer-enter :on-pointer-leave on-pointer-leave} [:span - {:class (if new-css-system - (dom/classnames (css :icon-wrapper) true) - (dom/classnames :icon-wrapper true))} - (if selected? [:span {:class (if new-css-system - (dom/classnames (css :selected-icon) true) - (dom/classnames :selected-icon true))} - (if new-css-system - i/tick-refactor - i/tick)] - [:span {:class (if new-css-system - (dom/classnames (css :selected-icon) true) - (dom/classnames :selected-icon true))}]) - [:span {:class (if new-css-system - (dom/classnames (css :shape-icon) true) - (dom/classnames :shape-icon true))} icon]] - [:span {:class (if new-css-system - (dom/classnames (css :title) true) - (dom/classnames :title true))} title]] - [:li {:class (dom/classnames (css :context-menu-item) new-css-system) + {:class (stl/css :icon-wrapper)} + (if selected? [:span {:class (stl/css :selected-icon)} + i/tick-refactor] + [:span {:class (stl/css :selected-icon)}]) + [:span {:class (stl/css :shape-icon)} icon]] + [:span {:class (stl/css :title)} title]] + [:li {:class (stl/css :context-menu-item) :disabled disabled :ref set-dom-node :on-click on-click :on-pointer-enter on-pointer-enter :on-pointer-leave on-pointer-leave} - [:span {:class (if new-css-system - (dom/classnames (css :title) true) - (dom/classnames :title true))} title] + [:span {:class (stl/css :title)} title] (when shortcut - [:span {:class (if new-css-system - (dom/classnames (css :shortcut) true) - (dom/classnames :shortcut true))} - (if new-css-system - (for [sc (scd/split-sc shortcut)] - [:span {:class (dom/classnames (css :shortcut-key) true)} sc]) - (or shortcut ""))]) + [:span {:class (stl/css :shortcut)} + (for [sc (scd/split-sc shortcut)] + [:span {:class (stl/css :shortcut-key)} sc])]) (when (> (count children) 1) - (if new-css-system - [:span {:class (dom/classnames (css :submenu-icon) true)} i/arrow-refactor] - [:span.submenu-icon i/arrow-slide])) + [:span {:class (stl/css :submenu-icon)} i/arrow-refactor]) (when (> (count children) 1) - [:ul - {:class (if new-css-system - (dom/classnames (css :workspace-context-submenu) true) - (dom/classnames :workspace-context-menu true)) - :ref submenu-ref - :style {:display "none" :left 250} - :on-context-menu prevent-default} + [:ul {:class (stl/css :workspace-context-submenu) + :ref submenu-ref + :style {:display "none" :left 250} + :on-context-menu prevent-default} children])]))) + (mf/defc menu-separator [] - (let [new-css-system (mf/use-ctx ctx/new-css-system)] - [:li {:class (if new-css-system - (dom/classnames (css :separator) true) - (dom/classnames :separator true))}])) + [:li {:class (stl/css :separator)}]) (mf/defc context-menu-edit [_] @@ -482,8 +453,8 @@ [:* [:& menu-separator] [:& menu-entry {:title (tr "workspace.shape.menu.delete") - :shortcut (sc/get-tooltip :delete) - :on-click do-delete}]])) + :shortcut (sc/get-tooltip :delete) + :on-click do-delete}]])) (mf/defc shape-context-menu {::mf/wrap [mf/memo]} @@ -632,8 +603,7 @@ (let [mdata (mf/deref menu-ref) top (- (get-in mdata [:position :y]) 20) left (get-in mdata [:position :x]) - dropdown-ref (mf/use-ref) - new-css-system (mf/use-ctx ctx/new-css-system)] + dropdown-ref (mf/use-ref)] (mf/use-effect (mf/deps mdata) @@ -651,9 +621,7 @@ [:& dropdown {:show (boolean mdata) :on-close #(st/emit! dw/hide-context-menu)} [:ul - {:class (if new-css-system - (dom/classnames (css :workspace-context-menu) true) - (dom/classnames :workspace-context-menu true)) + {:class (stl/css :workspace-context-menu) :ref dropdown-ref :style {:top top :left left} :on-context-menu prevent-default} diff --git a/frontend/src/app/main/ui/workspace/context_menu.scss b/frontend/src/app/main/ui/workspace/context_menu.scss index 23250aa093..4a178c88f8 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.scss +++ b/frontend/src/app/main/ui/workspace/context_menu.scss @@ -19,95 +19,97 @@ border-radius: $br-8; background-color: var(--menu-background-color); z-index: $z-index-3; - .separator { - height: $s-12; - } - .context-menu-item { - display: flex; - align-items: center; - justify-content: space-between; - height: $s-28; - width: 100%; - padding: $s-6; - border-radius: $br-8; - cursor: pointer; +} - .title { +.separator { + height: $s-12; +} + +.context-menu-item { + display: flex; + align-items: center; + justify-content: space-between; + height: $s-28; + width: 100%; + padding: $s-6; + border-radius: $br-8; + cursor: pointer; + + .title { + @include titleTipography; + color: var(--menu-foreground-color); + } + .shortcut { + @include flexCenter; + gap: $s-2; + color: var(--menu-shortcut-foreground-color); + .shortcut-key { @include titleTipography; - color: var(--menu-foreground-color); + @include flexCenter; + height: $s-20; + padding: $s-2 $s-6; + border-radius: $br-6; + background-color: var(--menu-shortcut-background-color); + } + } + + .submenu-icon { + position: absolute; + right: $s-16; + svg { + @extend .button-icon-small; + stroke: var(--menu-foreground-color); + } + } + &:hover { + background-color: var(--menu-background-color-hover); + .title { + color: var(--menu-foreground-color-hover); } .shortcut { - @include flexCenter; - gap: $s-2; - color: var(--menu-shortcut-foreground-color); - .shortcut-key { - @include titleTipography; - @include flexCenter; - height: $s-20; - padding: $s-2 $s-6; - border-radius: $br-6; - background-color: var(--menu-shortcut-background-color); - } + color: var(--menu-shortcut-foreground-color-hover); } + } + &:focus { + border: 1px solid var(--menu-border-color-focus); + background-color: var(--menu-background-color-focus); + } +} - .submenu-icon { - position: absolute; - right: $s-16; - svg { - @extend .button-icon-small; - stroke: var(--menu-foreground-color); - } - } - &:hover { - background-color: var(--menu-background-color-hover); - .title { - color: var(--menu-foreground-color-hover); - } - .shortcut { - color: var(--menu-shortcut-foreground-color-hover); - } - } - &:focus { - border: 1px solid var(--menu-border-color-focus); - background-color: var(--menu-background-color-focus); +.icon-menu-item { + display: flex; + justify-content: flex-start; + align-items: center; + height: $s-28; + padding: $s-6; + border-radius: $br-8; + &:hover { + background-color: var(--menu-background-color-hover); + } + + span.title { + margin-left: $s-6; + } + + .selected-icon { + svg { + @extend .button-icon-small; + stroke: var(--menu-foreground-color); } } - .icon-menu-item { - display: flex; - justify-content: flex-start; - align-items: center; - height: $s-28; - padding: $s-6; - border-radius: $br-8; - &:hover { - background-color: var(--menu-background-color-hover); + .shape-icon { + margin-left: $s-2; + svg { + @extend .button-icon-small; + stroke: var(--menu-foreground-color); } + } - span.title { - margin-left: $s-6; - } - - .selected-icon { - svg { - @extend .button-icon-small; - stroke: var(--menu-foreground-color); - } - } - - .shape-icon { - margin-left: $s-2; - svg { - @extend .button-icon-small; - stroke: var(--menu-foreground-color); - } - } - - .icon-wrapper { - display: grid; - grid-template-columns: 1fr 1fr; - margin: 0; - } + .icon-wrapper { + display: grid; + grid-template-columns: 1fr 1fr; + margin: 0; } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs index f292e9ad4c..643114f07f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs @@ -5,31 +5,23 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.sidebar.collapsable-button - (:require-macros [app.main.style :refer [css]]) + (:require-macros [app.main.style :as stl]) (:require [app.main.data.workspace :as dw] [app.main.store :as st] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] - [app.util.dom :as dom] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) (mf/defc collapsed-button {::mf/wrap-props false} [] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - on-click (mf/use-fn #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))] - (if ^boolean new-css-system - [:div {:id "left-sidebar-aside" - :data-size 0 - :class (dom/classnames (css :collapsed-sidebar) true)} - [:div {:class (dom/classnames (css :collapsed-title) true)} - [:button {:class (dom/classnames (css :collapsed-button) true) - :on-click on-click - :aria-label (tr "workspace.sidebar.expand")} - i/arrow-refactor]]] - [:button.collapse-sidebar.collapsed - {:on-click on-click - :aria-label (tr "workspace.sidebar.expand")} - i/arrow-slide]))) + (let [on-click (mf/use-fn #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))] + [:div {:id "left-sidebar-aside" + :data-size 0 + :class (stl/css :collapsed-sidebar)} + [:div {:class (stl/css :collapsed-title)} + [:button {:class (stl/css :collapsed-button) + :on-click on-click + :aria-label (tr "workspace.sidebar.expand")} + i/arrow-refactor]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.cljs b/frontend/src/app/main/ui/workspace/sidebar/history.cljs index 67cb6075d8..c4fb5650ea 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/history.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/history.cljs @@ -5,7 +5,7 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.sidebar.history - (:require-macros [app.main.style :refer [css]]) + (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] [app.main.data.events :as ev] @@ -13,9 +13,7 @@ [app.main.data.workspace.common :as dwc] [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] - [app.util.dom :as dom] [app.util.i18n :refer [t] :as i18n] [cuerdas.core :as str] [okulary.core :as l] @@ -277,103 +275,57 @@ (mf/defc history-entry-details [{:keys [entry]}] (let [{entries :items} (mf/deref workspace-undo) - new-css-system (mf/use-ctx ctx/new-css-system) objects (mf/deref refs/workspace-page-objects)] - (if new-css-system - [:div {:class (css :history-entry-detail)} - (case (:operation entry) - :new - (:name (get-object (:detail entry) entries objects)) + [:div {:class (stl/css :history-entry-detail)} + (case (:operation entry) + :new + (:name (get-object (:detail entry) entries objects)) - :delete - [:ul {:class (css :ul.history-entry-details-list)} - (for [id (:detail entry)] - (let [shape-name (:name (get-object id entries objects))] - [:li {:key id} shape-name]))] + :delete + [:ul {:class (stl/css :history-entry-details-list)} + (for [id (:detail entry)] + (let [shape-name (:name (get-object id entries objects))] + [:li {:key id} shape-name]))] - :modify - [:ul {:class (css :ul.history-entry-details-list)} - (for [[id attributes] (:detail entry)] - (let [shape-name (:name (get-object id entries objects))] - [:li {:key id} - [:div shape-name] - [:div (str/join ", " attributes)]]))] + :modify + [:ul {:class (stl/css :history-entry-details-list)} + (for [[id attributes] (:detail entry)] + (let [shape-name (:name (get-object id entries objects))] + [:li {:key id} + [:div shape-name] + [:div (str/join ", " attributes)]]))] - nil)] - - [:div.history-entry-detail - (case (:operation entry) - :new - (:name (get-object (:detail entry) entries objects)) - - :delete - [:ul.history-entry-details-list - (for [id (:detail entry)] - (let [shape-name (:name (get-object id entries objects))] - [:li {:key id} shape-name]))] - - - :modify - [:ul.history-entry-details-list - (for [[id attributes] (:detail entry)] - (let [shape-name (:name (get-object id entries objects))] - [:li {:key id} - [:div shape-name] - [:div (str/join ", " attributes)]]))] - - nil)] - ))) + nil)])) (mf/defc history-entry [{:keys [locale entry idx-entry disabled? current?]}] (let [hover? (mf/use-state false) - new-css-system (mf/use-ctx ctx/new-css-system) show-detail? (mf/use-state false)] - (if new-css-system - [:div {:class (dom/classnames (css :history-entry) true - (css :disabled) disabled? - (css :current) current? - (css :hover) @hover? - (css :show-detail) @show-detail?) - :on-pointer-enter #(reset! hover? true) - :on-pointer-leave #(reset! hover? false) - :on-click #(st/emit! (dwc/undo-to-index idx-entry))} - [:div {:class (dom/classnames (css :history-entry-summary) true)} - [:div {:class (dom/classnames (css :history-entry-summary-icon) true)} (entry->icon-refactor entry)] - [:div {:class (dom/classnames (css :history-entry-summary-text) true)} (entry->message locale entry)] - (when (:detail entry) - [:div {:class (dom/classnames (css :history-entry-summary-button) true - (css :button-opened) @show-detail?) - :on-click #(when (:detail entry) - (swap! show-detail? not))} - i/arrow-refactor])] + [:div {:class (stl/css-case :history-entry true + :disabled disabled? + :current current? + :hover @hover? + :show-detail @show-detail?) + :on-pointer-enter #(reset! hover? true) + :on-pointer-leave #(reset! hover? false) + :on-click #(st/emit! (dwc/undo-to-index idx-entry))} + [:div {:class (stl/css :history-entry-summary)} + [:div {:class (stl/css :history-entry-summary-icon)} + (entry->icon-refactor entry)] + [:div {:class (stl/css :history-entry-summary-text)} (entry->message locale entry)] + (when (:detail entry) + [:div {:class (stl/css-case :history-entry-summary-button true + :button-opened @show-detail?) + :on-click #(when (:detail entry) + (swap! show-detail? not))} + i/arrow-refactor])] - (when @show-detail? - [:& history-entry-details {:entry entry}])] - - [:div.history-entry {:class (dom/classnames - :disabled disabled? - :current current? - :hover @hover? - :show-detail @show-detail?) - :on-pointer-enter #(reset! hover? true) - :on-pointer-leave #(reset! hover? false) - :on-click #(st/emit! (dwc/undo-to-index idx-entry))} - [:div.history-entry-summary - [:div.history-entry-summary-icon (entry->icon entry)] - [:div.history-entry-summary-text (entry->message locale entry)] - (when (:detail entry) - [:div.history-entry-summary-button {:on-click #(when (:detail entry) - (swap! show-detail? not))} - i/arrow-slide])] - - (when show-detail? - [:& history-entry-details {:entry entry}])]))) + (when @show-detail? + [:& history-entry-details {:entry entry}])])) (mf/defc history-toolbox [] (let [locale (mf/deref i18n/locale) - new-css-system (mf/use-ctx ctx/new-css-system) objects (mf/deref refs/workspace-page-objects) {:keys [items index]} (mf/deref workspace-undo) entries (parse-entries items objects) @@ -381,40 +333,24 @@ (mf/use-fn #(st/emit! (-> (dw/toggle-layout-flag :document-history) (vary-meta assoc ::ev/origin "history-toolbox"))))] - (if new-css-system - [:div {:class (css :history-toolbox)} - [:div {:class (css :history-toolbox-title)} - [:span (t locale "workspace.undo.title")] - [:div {:class (css :close-button) - :on-click toggle-history} - i/close-refactor]] - (if (empty? entries) - [:div {:class (css :history-entry-empty)} - [:div {:class (css :history-entry-empty-icon)} i/history-refactor] - [:div {:class (css :history-entry-empty-msg)} (t locale "workspace.undo.empty")]] - [:ul {:class (css :history-entries)} - (for [[idx-entry entry] (->> entries (map-indexed vector) reverse)] #_[i (range 0 10)] - [:& history-entry {:key (str "entry-" idx-entry) - :locale locale - :entry entry - :idx-entry idx-entry - :current? (= idx-entry index) - :disabled? (> idx-entry index)}])])] - - [:div.history-toolbox - [:div.history-toolbox-title (t locale "workspace.undo.title")] - (if (empty? entries) - [:div.history-entry-empty - [:div.history-entry-empty-icon i/recent] - [:div.history-entry-empty-msg (t locale "workspace.undo.empty")]] - [:ul.history-entries - (for [[idx-entry entry] (->> entries (map-indexed vector) reverse)] #_[i (range 0 10)] - [:& history-entry {:key (str "entry-" idx-entry) - :locale locale - :entry entry - :idx-entry idx-entry - :current? (= idx-entry index) - :disabled? (> idx-entry index)}])])]))) + [:div {:class (stl/css :history-toolbox)} + [:div {:class (stl/css :history-toolbox-title)} + [:span (t locale "workspace.undo.title")] + [:div {:class (stl/css :close-button) + :on-click toggle-history} + i/close-refactor]] + (if (empty? entries) + [:div {:class (stl/css :history-entry-empty)} + [:div {:class (stl/css :history-entry-empty-icon)} i/history-refactor] + [:div {:class (stl/css :history-entry-empty-msg)} (t locale "workspace.undo.empty")]] + [:ul {:class (stl/css :history-entries)} + (for [[idx-entry entry] (->> entries (map-indexed vector) reverse)] #_[i (range 0 10)] + [:& history-entry {:key (str "entry-" idx-entry) + :locale locale + :entry entry + :idx-entry idx-entry + :current? (= idx-entry index) + :disabled? (> idx-entry index)}])])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.scss b/frontend/src/app/main/ui/workspace/sidebar/history.scss index 1870531c2f..9a23cda6cc 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/history.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/history.scss @@ -10,138 +10,138 @@ display: flex; flex-direction: column; background-color: var(--panel-background-color); +} - .history-toolbox-title { +.history-toolbox-title { + @include flexCenter; + @include tabTitleTipography; + position: relative; + height: $s-32; + min-height: $s-32; + margin: $s-8 $s-8 0 $s-8; + border-radius: $br-8; + background-color: var(--panel-title-background-color); + + span { @include flexCenter; - @include tabTitleTipography; - position: relative; - height: $s-32; - min-height: $s-32; - margin: $s-8 $s-8 0 $s-8; - border-radius: $br-8; - background-color: var(--panel-title-background-color); + flex-grow: 1; + color: var(--title-foreground-color-hover); + } +} - span { - @include flexCenter; - flex-grow: 1; - color: var(--title-foreground-color-hover); - } +.close-button { + @extend .button-tertiary; + position: absolute; + right: $s-2; + top: $s-2; + height: $s-28; + width: $s-28; + border-radius: $br-6; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } +} - .close-button { - @extend .button-tertiary; - position: absolute; - right: $s-2; - top: $s-2; - height: $s-28; - width: $s-28; - border-radius: $br-6; +.history-entry-empty { + @include flexCenter; + flex-direction: column; + gap: $s-16; + padding: $s-28 $s-16; + text-align: center; +} + +.history-entry-empty-icon { + @extend .empty-icon; + svg { + margin-left: calc(-1 * $s-2); + } +} + +.history-entry-empty-msg { + @include titleTipography; + color: var(--title-foreground-secondary); +} + +.history-entries { + height: 100%; + padding: $s-12; + overflow-x: hidden; + overflow-y: auto; + font-size: $fs-12; +} + +.history-entry { + display: flex; + justify-content: center; + flex-direction: column; + min-height: $s-32; + margin: $s-4; + padding: $s-4 $s-8; + border: $s-2 solid transparent; + border-radius: $s-8; + background-color: var(--entry-background-color); + cursor: pointer; + transition: border 0.2s; + + .history-entry-summary { + display: flex; + align-items: center; + .history-entry-summary-icon { svg { - @extend .button-icon; - stroke: var(--icon-foreground); + @extend .button-icon-small; + stroke: var(--entry-foreground-color); + } + } + .history-entry-summary-text { + margin: 0 $s-8; + } + .history-entry-summary-button { + opacity: $op-0; + margin-left: auto; + &.button-opened { + svg { + transform: rotate(90deg); + } + } + svg { + @extend .button-icon-small; + stroke: var(--entry-foreground-color); } } } - .history-entry-empty { - @include flexCenter; - flex-direction: column; - gap: $s-16; - padding: $s-28 $s-16; - text-align: center; + .history-entry-detail { + display: block; + padding-top: $s-16; - .history-entry-empty-icon { - @extend .empty-icon; - svg { - margin-left: calc(-1 * $s-2); - } - } - - .history-entry-empty-msg { - @include titleTipography; - color: var(--title-foreground-secondary); + .history-entry-details-list { + margin: 0; } } - ul.history-entries { - height: 100%; - padding: $s-12; - overflow-x: hidden; - overflow-y: auto; - font-size: $fs-12; + &.disabled { + border-color: var(--entry-border-color-disabled); + background-color: var(--entry-background-color-disabled); + } - .history-entry { - display: flex; - justify-content: center; - flex-direction: column; - min-height: $s-32; - margin: $s-4; - padding: $s-4 $s-8; - border: $s-2 solid transparent; - border-radius: $s-8; - background-color: var(--entry-background-color); - cursor: pointer; - transition: border 0.2s; - - &.disabled { - border-color: var(--entry-border-color-disabled); - background-color: var(--entry-background-color-disabled); - } - - &.hover, - &:hover { - background-color: var(--entry-background-color-hover); - color: var(--entry-foreground-color-hover); - .history-entry-summary { - .history-entry-summary-icon { - svg { - stroke: var(--entry-foreground-color-hover); - } - } - .history-entry-summary-button { - opacity: $op-10; - &.button-opened { - svg { - transform: rotate(90deg); - } - } - } + &.hover, + &:hover { + background-color: var(--entry-background-color-hover); + color: var(--entry-foreground-color-hover); + .history-entry-summary { + .history-entry-summary-icon { + svg { + stroke: var(--entry-foreground-color-hover); } } - - .history-entry-summary { - display: flex; - align-items: center; - .history-entry-summary-icon { + .history-entry-summary-button { + opacity: $op-10; + &.button-opened { svg { - @extend .button-icon-small; - stroke: var(--entry-foreground-color); + transform: rotate(90deg); } } - .history-entry-summary-text { - margin: 0 $s-8; - } - .history-entry-summary-button { - opacity: $op-0; - margin-left: auto; - &.button-opened { - svg { - transform: rotate(90deg); - } - } - svg { - @extend .button-icon-small; - stroke: var(--entry-foreground-color); - } - } - } - - .history-entry-detail { - display: block; - padding-top: $s-16; - - ul.history-entry-details-list { - margin: 0; - } } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs index 65b37b1e10..04748ef406 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs @@ -5,13 +5,12 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.sidebar.shortcuts - (:require-macros [app.main.style :refer [css]]) + (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] [app.common.data.macros :as dm] [app.config :as cf] [app.main.data.dashboard.shortcuts] - [app.main.data.events :as ev] [app.main.data.shortcuts :as ds] [app.main.data.viewer.shortcuts] [app.main.data.workspace :as dw] @@ -19,21 +18,17 @@ [app.main.data.workspace.shortcuts] [app.main.store :as st] [app.main.ui.components.search-bar :refer [search-bar]] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :refer [tr]] - [app.util.keyboard :as kbd] [app.util.strings :refer [matches-search]] [clojure.set :as set] [clojure.string] - [cuerdas.core :as str] [rumext.v2 :as mf])) (mf/defc converted-chars [{:keys [char command] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - modified-keys {:up ds/up-arrow + (let [modified-keys {:up ds/up-arrow :down ds/down-arrow :left ds/left-arrow :right ds/right-arrow @@ -51,10 +46,8 @@ char (if (contains? modified-keys (keyword char)) ((keyword char) modified-keys) char) char (if (and is-macos? (contains? macos-keys (keyword char))) ((keyword char) macos-keys) char) unique-key (str (d/name command) "-" char)] - (if new-css-system - [:span {:class (css :key) - :key unique-key} char] - [:span.char-box {:key unique-key} char]))) + [:span {:class (stl/css :key) + :key unique-key} char])) (defn translation-keyname [type keyname] @@ -222,8 +215,7 @@ (mf/defc shortcuts-keys [{:keys [content command] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - managed-list (if (coll? content) + (let [managed-list (if (coll? content) content (conj () content)) chars-list (map ds/split-sc managed-list) @@ -232,43 +224,25 @@ chars-list (drop-last chars-list)) penultimate (last short-char-list)] - (if new-css-system - [:span {:class (css :keys)} - (for [chars short-char-list] - [:* - (for [char chars] - [:& converted-chars {:key (dm/str char "-" (name command)) - :char char - :command command}]) - (when (not= chars penultimate) [:span {:class (css :space)} ","])]) - (when (not= last-element penultimate) - [:* - [:span {:class (css :space)} (tr "shortcuts.or")] - (for [char last-element] - [:& converted-chars {:key (dm/str char "-" (name command)) - :char char - :command command}])])] - - [:span.keys - (for [chars short-char-list] - [:* - (for [char chars] - [:& converted-chars {:key (dm/str char "-" (name command)) - :char char - :command command}]) - (when (not= chars penultimate) [:span.space ","])]) - (when (not= last-element penultimate) - [:* - [:span.space (tr "shortcuts.or")] - (for [char last-element] - [:& converted-chars {:key (dm/str char "-" (name command)) - :char char - :command command}])])]))) + [:span {:class (stl/css :keys)} + (for [chars short-char-list] + [:* + (for [char chars] + [:& converted-chars {:key (dm/str char "-" (name command)) + :char char + :command command}]) + (when (not= chars penultimate) [:span {:class (stl/css :space)} ","])]) + (when (not= last-element penultimate) + [:* + [:span {:class (stl/css :space)} (tr "shortcuts.or")] + (for [char last-element] + [:& converted-chars {:key (dm/str char "-" (name command)) + :char char + :command command}])])])) (mf/defc shortcut-row [{:keys [elements filter-term match-section? match-subsection?] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - shortcut-name (keys elements) + (let [shortcut-name (keys elements) shortcut-translations (map #(translation-keyname :sc %) shortcut-name) match-shortcut? (some #(matches-search % @filter-term) shortcut-translations) filtered (if (and (or match-section? match-subsection?) (not match-shortcut?)) @@ -276,46 +250,32 @@ (filter #(matches-search % @filter-term) shortcut-translations)) sorted-filtered (sort filtered)] - (if new-css-system - [:ul {:class (css :sub-menu)} - (for [command-translate sorted-filtered] - (let [sc-by-translate (first (filter #(= (:translation (second %)) command-translate) elements)) - [command comand-info] sc-by-translate - content (or (:show-command comand-info) (:command comand-info))] - [:li {:class (css :shortcuts-name) - :key command-translate} - [:span {:class (css :command-name)} - command-translate] - [:& shortcuts-keys {:content content - :command command}]]))] - - [:ul.sub-menu - (for [command-translate sorted-filtered] - (let [sc-by-translate (first (filter #(= (:translation (second %)) command-translate) elements)) - [command comand-info] sc-by-translate - content (or (:show-command comand-info) (:command comand-info))] - [:li.shortcut-name {:key command-translate} - [:span.command-name command-translate] - [:& shortcuts-keys {:content content - :command command}]]))]))) + [:ul {:class (stl/css :sub-menu)} + (for [command-translate sorted-filtered] + (let [sc-by-translate (first (filter #(= (:translation (second %)) command-translate) elements)) + [command comand-info] sc-by-translate + content (or (:show-command comand-info) (:command comand-info))] + [:li {:class (stl/css :shortcuts-name) + :key command-translate} + [:span {:class (stl/css :command-name)} + command-translate] + [:& shortcuts-keys {:content content + :command command}]]))])) (mf/defc section-title [{:keys [is-visible? name is-sub?] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system)] - (if new-css-system - [:div {:class (if is-sub? (css :subsection-title) (css :section-title))} - [:span {:class (dom/classnames (css :open) is-visible? - (css :collapsed-shortcuts) true)} i/arrow-refactor] - [:span {:class (if is-sub? (css :subsection-name) (css :section-name))} name]] - - [:div {:class (if is-sub? "subsection-title" "section-title")} - [:span.collapesed-shortcuts {:class (when is-visible? "open")} i/arrow-slide] - [:span {:class (if is-sub? "subsection-name" "section-name")} name]]))) + [:div {:class (if is-sub? + (stl/css :subsection-title) + (stl/css :section-title))} + [:span {:class (stl/css-case :open is-visible? + :collapsed-shortcuts true)} i/arrow-refactor] + [:span {:class (if is-sub? + (stl/css :subsection-name) + (stl/css :section-name))} name]]) (mf/defc shortcut-subsection [{:keys [subsections manage-sections filter-term match-section? open-sections] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - subsections-names (keys subsections) + (let [subsections-names (keys subsections) subsection-translations (if (= :none (first subsections-names)) (map #(translation-keyname :sc %) subsections-names) (map #(translation-keyname :sub-sec %) subsections-names)) @@ -328,8 +288,7 @@ :match-section? match-section? :match-subsection? true}]) - [:ul {:class (dom/classnames (css :subsection-menu) new-css-system - :subsection-menu (not new-css-system))} + [:ul {:class (stl/css :subsection-menu)} (for [sub-translated sorted-translations] (let [sub-by-translate (first (filter #(= (:translation (second %)) sub-translated) subsections)) [sub-name sub-info] sub-by-translate @@ -368,7 +327,7 @@ visible? (some #(= % section-id) @open-sections)] (when (or match-section? match-subsection? match-shortcut?) - [:div {:class (css :section) + [:div {:class (stl/css :section) :on-click (manage-sections section-id)} [:& section-title {:is-visible? visible? :is-sub? false @@ -383,8 +342,7 @@ (mf/defc shortcuts-container [] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - workspace-shortcuts app.main.data.workspace.shortcuts/shortcuts + (let [workspace-shortcuts app.main.data.workspace.shortcuts/shortcuts path-shortcuts app.main.data.workspace.path.shortcuts/shortcuts all-workspace-shortcuts (->> (d/deep-merge path-shortcuts workspace-shortcuts) (add-translation :sc) @@ -496,13 +454,6 @@ (manage-section-on-search :viewer term))] (reset! open-sections ids)))) - on-search-term-change - (mf/use-callback - (fn [event] - (let [value (dom/get-target-val event)] - (manage-sections-on-search value) - (reset! filter-term value)))) - on-search-term-change-2 (mf/use-callback (fn [value] @@ -512,80 +463,31 @@ (mf/use-callback (fn [_] (reset! open-sections [[1]]) - (reset! filter-term ""))) - - manage-key-down - (mf/use-callback - (fn [event] - (when (kbd/esc? event) - (st/emit! (-> (dw/toggle-layout-flag :shortcuts) - (vary-meta assoc ::ev/origin "shortcuts-panel")))))) - - on-key-down - (mf/use-callback - (fn [event] - (when (kbd/enter? event) - (on-search-clear-click) - (dom/focus! (dom/get-element "shortcut-search")))))] + (reset! filter-term "")))] (mf/with-effect [] (dom/focus! (dom/get-element "shortcut-search"))) - (if new-css-system - [:div {:class (css :shortcuts)} - [:div {:class (css :shortcuts-header)} - [:div {:class (css :shortcuts-title)} (tr "shortcuts.title")] - [:div {:class (css :shortcuts-close-button) - :on-click close-fn} - i/close-refactor]] - [:div {:class (css :search-field)} + [:div {:class (stl/css :shortcuts)} + [:div {:class (stl/css :shortcuts-header)} + [:div {:class (stl/css :shortcuts-title)} (tr "shortcuts.title")] + [:div {:class (stl/css :shortcuts-close-button) + :on-click close-fn} + i/close-refactor]] + [:div {:class (stl/css :search-field)} - [:& search-bar {:on-change on-search-term-change-2 - :clear-action on-search-clear-click - :value @filter-term - :placeholder (tr "shortcuts.title") - :icon (mf/html [:span {:class (css :search-icon)} i/search-refactor])}]] + [:& search-bar {:on-change on-search-term-change-2 + :clear-action on-search-clear-click + :value @filter-term + :placeholder (tr "shortcuts.title") + :icon (mf/html [:span {:class (stl/css :search-icon)} i/search-refactor])}]] - (if match-any? - [:div {:class (dom/classnames (css :shortcuts-list) true)} - (for [section all-shortcuts] - [:& shortcut-section - {:section section - :manage-sections manage-sections - :open-sections open-sections - :filter-term filter-term}])] - [:div {:class (css :not-found)} (tr "shortcuts.not-found")])] - - [:div.shortcuts - [:div.shortcuts-header - [:div.shortcuts-close-button - {:on-click close-fn} i/close] - [:div.shortcuts-title (tr "shortcuts.title")]] - [:div.search-field - [:div.search-box - [:input.input-text - {:id "shortcut-search" - :placeholder (tr "shortcuts.search-placeholder") - :type "text" - :value @filter-term - :on-change on-search-term-change - :auto-complete "off" - :on-key-down manage-key-down}] - (if (str/empty? @filter-term) - [:span.icon-wrapper - i/search] - [:button.icon-wrapper - {:on-click on-search-clear-click - :on-key-down on-key-down} - [:span.icon.close - i/close]])]] - (if match-any? - [:div.shortcut-list - (for [section all-shortcuts] - [:& shortcut-section - {:section section - :manage-sections manage-sections - :open-sections open-sections - :filter-term filter-term}])] - - [:div.not-found (tr "shortcuts.not-found")])]))) + (if match-any? + [:div {:class (stl/css :shortcuts-list)} + (for [section all-shortcuts] + [:& shortcut-section + {:section section + :manage-sections manage-sections + :open-sections open-sections + :filter-term filter-term}])] + [:div {:class (stl/css :not-found)} (tr "shortcuts.not-found")])]))