Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 10:38:13 -05:00
Code Issues Activity

♻️ Remove refer css from files

Browse source
This commit is contained in:
Eva 2024-01-02 11:15:02 +01:00 • committed by Alonso Torres
parent dc4bf82684
commit 0a123a3917
8 changed files with 401 additions and 600 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/app/main/ui/components/search_bar.cljs
View file

@ -5,7 +5,7 @@
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.components.search-bar (ns app.main.ui.components.search-bar
(:require-macros [app.main.style :refer [css]]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
@ -45,16 +45,16 @@
node (dom/get-target event)] node (dom/get-target event)]
(when ^boolean enter? (dom/blur! node)) (when ^boolean enter? (dom/blur! node))
(when ^boolean esc? (dom/blur! node)))))] (when ^boolean esc? (dom/blur! node)))))]
[:span {:class (dom/classnames (css :search-box) true [:span {:class (stl/css-case :search-box true
(css :has-children) (some? children))} :has-children (some? children))}
children children
[:div {:class (dom/classnames (css :search-input-wrapper) true)} [:div {:class (stl/css :search-input-wrapper)}
icon icon
[:input {:on-change handle-change [:input {:on-change handle-change
:value value :value value
:placeholder placeholder :placeholder placeholder
:on-key-down handle-key-down}] :on-key-down handle-key-down}]
(when (not= "" value) (when (not= "" value)
[:button {:class (dom/classnames (css :clear) true) [:button {:class (stl/css :clear)
:on-click handle-clear} :on-click handle-clear}
i/delete-text-refactor])]])) i/delete-text-refactor])]]))

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

@ -13,8 +13,9 @@
width: 100%; width: 100%;
border-radius: $br-8; border-radius: $br-8;
background-color: var(--search-bar-background-color); background-color: var(--search-bar-background-color);
}
.search-input-wrapper { .search-input-wrapper {
@include flexCenter; @include flexCenter;
height: $s-32; height: $s-32;
width: 100%; width: 100%;
@ -48,8 +49,9 @@
background-color: var(--input-background-color-active); background-color: var(--input-background-color-active);
} }
} }
}
.clear { .clear {
@extend .button-tag; @extend .button-tag;
border-radius: $br-8; border-radius: $br-8;
height: 100%; height: 100%;
@ -58,10 +60,9 @@
color: transparent; color: transparent;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }
} }
}
&.has-children .search-input-wrapper { .search-box.has-children .search-input-wrapper {
border-radius: $br-2 $br-8 $br-8 $br-2; border-radius: $br-2 $br-8 $br-8 $br-2;
margin-left: 0; margin-left: 0;
}
} }

68
frontend/src/app/main/ui/workspace/context_menu.cljs
View file

@ -6,7 +6,7 @@
(ns app.main.ui.workspace.context-menu (ns app.main.ui.workspace.context-menu
"A workspace specific context menu (mouse right click)." "A workspace specific context menu (mouse right click)."
(:require-macros [app.main.style :refer [css]]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
@ -31,7 +31,6 @@
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.components.shape-icon-refactor :as sic] [app.main.ui.components.shape-icon-refactor :as sic]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.assets.common :as cmm] [app.main.ui.workspace.sidebar.assets.common :as cmm]
[app.util.dom :as dom] [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}] [{: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) (let [submenu-ref (mf/use-ref nil)
hovering? (mf/use-ref false) hovering? (mf/use-ref false)
new-css-system (mf/use-ctx ctx/new-css-system)
on-pointer-enter on-pointer-enter
(mf/use-callback (mf/use-callback
(fn [] (fn []
@ -86,71 +84,44 @@
(constantly on-unmount)) (constantly on-unmount))
(if icon (if icon
[:li {:class (if new-css-system [:li {:class (stl/css :icon-menu-item)
(dom/classnames (css :icon-menu-item) true)
(dom/classnames :icon-menu-item true))
:disabled disabled :disabled disabled
:ref set-dom-node :ref set-dom-node
:on-click on-click :on-click on-click
:on-pointer-enter on-pointer-enter :on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave} :on-pointer-leave on-pointer-leave}
[:span [:span
{:class (if new-css-system {:class (stl/css :icon-wrapper)}
(dom/classnames (css :icon-wrapper) true) (if selected? [:span {:class (stl/css :selected-icon)}
(dom/classnames :icon-wrapper true))} i/tick-refactor]
(if selected? [:span {:class (if new-css-system [:span {:class (stl/css :selected-icon)}])
(dom/classnames (css :selected-icon) true) [:span {:class (stl/css :shape-icon)} icon]]
(dom/classnames :selected-icon true))} [:span {:class (stl/css :title)} title]]
(if new-css-system [:li {:class (stl/css :context-menu-item)
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)
:disabled disabled :disabled disabled
:ref set-dom-node :ref set-dom-node
:on-click on-click :on-click on-click
:on-pointer-enter on-pointer-enter :on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave} :on-pointer-leave on-pointer-leave}
[:span {:class (if new-css-system [:span {:class (stl/css :title)} title]
(dom/classnames (css :title) true)
(dom/classnames :title true))} title]
(when shortcut (when shortcut
[:span {:class (if new-css-system [:span {:class (stl/css :shortcut)}
(dom/classnames (css :shortcut) true)
(dom/classnames :shortcut true))}
(if new-css-system
(for [sc (scd/split-sc shortcut)] (for [sc (scd/split-sc shortcut)]
[:span {:class (dom/classnames (css :shortcut-key) true)} sc]) [:span {:class (stl/css :shortcut-key)} sc])])
(or shortcut ""))])
(when (> (count children) 1) (when (> (count children) 1)
(if new-css-system [:span {:class (stl/css :submenu-icon)} i/arrow-refactor])
[:span {:class (dom/classnames (css :submenu-icon) true)} i/arrow-refactor]
[:span.submenu-icon i/arrow-slide]))
(when (> (count children) 1) (when (> (count children) 1)
[:ul [:ul {:class (stl/css :workspace-context-submenu)
{:class (if new-css-system
(dom/classnames (css :workspace-context-submenu) true)
(dom/classnames :workspace-context-menu true))
:ref submenu-ref :ref submenu-ref
:style {:display "none" :left 250} :style {:display "none" :left 250}
:on-context-menu prevent-default} :on-context-menu prevent-default}
children])]))) children])])))
(mf/defc menu-separator (mf/defc menu-separator
[] []
(let [new-css-system (mf/use-ctx ctx/new-css-system)] [:li {:class (stl/css :separator)}])
[:li {:class (if new-css-system
(dom/classnames (css :separator) true)
(dom/classnames :separator true))}]))
(mf/defc context-menu-edit (mf/defc context-menu-edit
[_] [_]
@ -632,8 +603,7 @@
(let [mdata (mf/deref menu-ref) (let [mdata (mf/deref menu-ref)
top (- (get-in mdata [:position :y]) 20) top (- (get-in mdata [:position :y]) 20)
left (get-in mdata [:position :x]) left (get-in mdata [:position :x])
dropdown-ref (mf/use-ref) dropdown-ref (mf/use-ref)]
new-css-system (mf/use-ctx ctx/new-css-system)]
(mf/use-effect (mf/use-effect
(mf/deps mdata) (mf/deps mdata)
@ -651,9 +621,7 @@
[:& dropdown {:show (boolean mdata) [:& dropdown {:show (boolean mdata)
:on-close #(st/emit! dw/hide-context-menu)} :on-close #(st/emit! dw/hide-context-menu)}
[:ul [:ul
{:class (if new-css-system {:class (stl/css :workspace-context-menu)
(dom/classnames (css :workspace-context-menu) true)
(dom/classnames :workspace-context-menu true))
:ref dropdown-ref :ref dropdown-ref
:style {:top top :left left} :style {:top top :left left}
:on-context-menu prevent-default} :on-context-menu prevent-default}

14
frontend/src/app/main/ui/workspace/context_menu.scss
View file

@ -19,10 +19,13 @@
border-radius: $br-8; border-radius: $br-8;
background-color: var(--menu-background-color); background-color: var(--menu-background-color);
z-index: $z-index-3; z-index: $z-index-3;
.separator { }
.separator {
height: $s-12; height: $s-12;
} }
.context-menu-item {
.context-menu-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -71,9 +74,9 @@
border: 1px solid var(--menu-border-color-focus); border: 1px solid var(--menu-border-color-focus);
background-color: var(--menu-background-color-focus); background-color: var(--menu-background-color-focus);
} }
} }
.icon-menu-item { .icon-menu-item {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
@ -108,7 +111,6 @@
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
margin: 0; margin: 0;
} }
}
} }
.icon-menu-item[disabled], .icon-menu-item[disabled],

20
frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs
View file

@ -5,31 +5,23 @@
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.sidebar.collapsable-button (ns app.main.ui.workspace.sidebar.collapsable-button
(:require-macros [app.main.style :refer [css]]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc collapsed-button (mf/defc collapsed-button
{::mf/wrap-props false} {::mf/wrap-props false}
[] []
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [on-click (mf/use-fn #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))]
on-click (mf/use-fn #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))]
(if ^boolean new-css-system
[:div {:id "left-sidebar-aside" [:div {:id "left-sidebar-aside"
:data-size 0 :data-size 0
:class (dom/classnames (css :collapsed-sidebar) true)} :class (stl/css :collapsed-sidebar)}
[:div {:class (dom/classnames (css :collapsed-title) true)} [:div {:class (stl/css :collapsed-title)}
[:button {:class (dom/classnames (css :collapsed-button) true) [:button {:class (stl/css :collapsed-button)
:on-click on-click :on-click on-click
:aria-label (tr "workspace.sidebar.expand")} :aria-label (tr "workspace.sidebar.expand")}
i/arrow-refactor]]] i/arrow-refactor]]]))
[:button.collapse-sidebar.collapsed
{:on-click on-click
:aria-label (tr "workspace.sidebar.expand")}
i/arrow-slide])))

112
frontend/src/app/main/ui/workspace/sidebar/history.cljs
View file

@ -5,7 +5,7 @@
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.sidebar.history (ns app.main.ui.workspace.sidebar.history
(:require-macros [app.main.style :refer [css]]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.main.data.events :as ev] [app.main.data.events :as ev]
@ -13,9 +13,7 @@
[app.main.data.workspace.common :as dwc] [app.main.data.workspace.common :as dwc]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :refer [t] :as i18n] [app.util.i18n :refer [t] :as i18n]
[cuerdas.core :as str] [cuerdas.core :as str]
[okulary.core :as l] [okulary.core :as l]
@ -277,82 +275,34 @@
(mf/defc history-entry-details [{:keys [entry]}] (mf/defc history-entry-details [{:keys [entry]}]
(let [{entries :items} (mf/deref workspace-undo) (let [{entries :items} (mf/deref workspace-undo)
new-css-system (mf/use-ctx ctx/new-css-system)
objects (mf/deref refs/workspace-page-objects)] objects (mf/deref refs/workspace-page-objects)]
(if new-css-system [:div {:class (stl/css :history-entry-detail)}
[:div {:class (css :history-entry-detail)}
(case (:operation entry) (case (:operation entry)
:new :new
(:name (get-object (:detail entry) entries objects)) (:name (get-object (:detail entry) entries objects))
:delete :delete
[:ul {:class (css :ul.history-entry-details-list)} [:ul {:class (stl/css :history-entry-details-list)}
(for [id (:detail entry)] (for [id (:detail entry)]
(let [shape-name (:name (get-object id entries objects))] (let [shape-name (:name (get-object id entries objects))]
[:li {:key id} shape-name]))] [:li {:key id} shape-name]))]
:modify :modify
[:ul {:class (css :ul.history-entry-details-list)} [:ul {:class (stl/css :history-entry-details-list)}
(for [[id attributes] (:detail entry)] (for [[id attributes] (:detail entry)]
(let [shape-name (:name (get-object id entries objects))] (let [shape-name (:name (get-object id entries objects))]
[:li {:key id} [:li {:key id}
[:div shape-name] [:div shape-name]
[:div (str/join ", " attributes)]]))] [:div (str/join ", " attributes)]]))]
nil)] 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)]
)))
(mf/defc history-entry [{:keys [locale entry idx-entry disabled? current?]}] (mf/defc history-entry [{:keys [locale entry idx-entry disabled? current?]}]
(let [hover? (mf/use-state false) (let [hover? (mf/use-state false)
new-css-system (mf/use-ctx ctx/new-css-system)
show-detail? (mf/use-state false)] show-detail? (mf/use-state false)]
(if new-css-system [:div {:class (stl/css-case :history-entry true
[: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])]
(when @show-detail?
[:& history-entry-details {:entry entry}])]
[:div.history-entry {:class (dom/classnames
:disabled disabled? :disabled disabled?
:current current? :current current?
:hover @hover? :hover @hover?
@ -360,20 +310,22 @@
:on-pointer-enter #(reset! hover? true) :on-pointer-enter #(reset! hover? true)
:on-pointer-leave #(reset! hover? false) :on-pointer-leave #(reset! hover? false)
:on-click #(st/emit! (dwc/undo-to-index idx-entry))} :on-click #(st/emit! (dwc/undo-to-index idx-entry))}
[:div.history-entry-summary [:div {:class (stl/css :history-entry-summary)}
[:div.history-entry-summary-icon (entry->icon entry)] [:div {:class (stl/css :history-entry-summary-icon)}
[:div.history-entry-summary-text (entry->message locale entry)] (entry->icon-refactor entry)]
[:div {:class (stl/css :history-entry-summary-text)} (entry->message locale entry)]
(when (:detail entry) (when (:detail entry)
[:div.history-entry-summary-button {:on-click #(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))} (swap! show-detail? not))}
i/arrow-slide])] i/arrow-refactor])]
(when show-detail? (when @show-detail?
[:& history-entry-details {:entry entry}])]))) [:& history-entry-details {:entry entry}])]))
(mf/defc history-toolbox [] (mf/defc history-toolbox []
(let [locale (mf/deref i18n/locale) (let [locale (mf/deref i18n/locale)
new-css-system (mf/use-ctx ctx/new-css-system)
objects (mf/deref refs/workspace-page-objects) objects (mf/deref refs/workspace-page-objects)
{:keys [items index]} (mf/deref workspace-undo) {:keys [items index]} (mf/deref workspace-undo)
entries (parse-entries items objects) entries (parse-entries items objects)
@ -381,40 +333,24 @@
(mf/use-fn (mf/use-fn
#(st/emit! (-> (dw/toggle-layout-flag :document-history) #(st/emit! (-> (dw/toggle-layout-flag :document-history)
(vary-meta assoc ::ev/origin "history-toolbox"))))] (vary-meta assoc ::ev/origin "history-toolbox"))))]
(if new-css-system [:div {:class (stl/css :history-toolbox)}
[:div {:class (css :history-toolbox)} [:div {:class (stl/css :history-toolbox-title)}
[:div {:class (css :history-toolbox-title)}
[:span (t locale "workspace.undo.title")] [:span (t locale "workspace.undo.title")]
[:div {:class (css :close-button) [:div {:class (stl/css :close-button)
:on-click toggle-history} :on-click toggle-history}
i/close-refactor]] i/close-refactor]]
(if (empty? entries) (if (empty? entries)
[:div {:class (css :history-entry-empty)} [:div {:class (stl/css :history-entry-empty)}
[:div {:class (css :history-entry-empty-icon)} i/history-refactor] [:div {:class (stl/css :history-entry-empty-icon)} i/history-refactor]
[:div {:class (css :history-entry-empty-msg)} (t locale "workspace.undo.empty")]] [:div {:class (stl/css :history-entry-empty-msg)} (t locale "workspace.undo.empty")]]
[:ul {:class (css :history-entries)} [:ul {:class (stl/css :history-entries)}
(for [[idx-entry entry] (->> entries (map-indexed vector) reverse)] #_[i (range 0 10)] (for [[idx-entry entry] (->> entries (map-indexed vector) reverse)] #_[i (range 0 10)]
[:& history-entry {:key (str "entry-" idx-entry) [:& history-entry {:key (str "entry-" idx-entry)
:locale locale :locale locale
:entry entry :entry entry
:idx-entry idx-entry :idx-entry idx-entry
:current? (= idx-entry index) :current? (= idx-entry index)
:disabled? (> 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)}])])])))

78
frontend/src/app/main/ui/workspace/sidebar/history.scss
View file

@ -10,8 +10,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--panel-background-color); background-color: var(--panel-background-color);
}
.history-toolbox-title { .history-toolbox-title {
@include flexCenter; @include flexCenter;
@include tabTitleTipography; @include tabTitleTipography;
position: relative; position: relative;
@ -26,8 +27,9 @@
flex-grow: 1; flex-grow: 1;
color: var(--title-foreground-color-hover); color: var(--title-foreground-color-hover);
} }
}
.close-button { .close-button {
@extend .button-tertiary; @extend .button-tertiary;
position: absolute; position: absolute;
right: $s-2; right: $s-2;
@ -39,37 +41,37 @@
@extend .button-icon; @extend .button-icon;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }
} }
}
.history-entry-empty { .history-entry-empty {
@include flexCenter; @include flexCenter;
flex-direction: column; flex-direction: column;
gap: $s-16; gap: $s-16;
padding: $s-28 $s-16; padding: $s-28 $s-16;
text-align: center; text-align: center;
}
.history-entry-empty-icon { .history-entry-empty-icon {
@extend .empty-icon; @extend .empty-icon;
svg { svg {
margin-left: calc(-1 * $s-2); margin-left: calc(-1 * $s-2);
} }
} }
.history-entry-empty-msg { .history-entry-empty-msg {
@include titleTipography; @include titleTipography;
color: var(--title-foreground-secondary); color: var(--title-foreground-secondary);
} }
}
ul.history-entries { .history-entries {
height: 100%; height: 100%;
padding: $s-12; padding: $s-12;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
font-size: $fs-12; font-size: $fs-12;
}
.history-entry { .history-entry {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
@ -82,32 +84,6 @@
cursor: pointer; cursor: pointer;
transition: border 0.2s; 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);
}
}
}
}
}
.history-entry-summary { .history-entry-summary {
display: flex; display: flex;
align-items: center; align-items: center;
@ -139,10 +115,34 @@
display: block; display: block;
padding-top: $s-16; padding-top: $s-16;
ul.history-entry-details-list { .history-entry-details-list {
margin: 0; margin: 0;
} }
} }
&.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);
}
}
}
} }
} }
} }

168
frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs
View file

@ -5,13 +5,12 @@
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.sidebar.shortcuts (ns app.main.ui.workspace.sidebar.shortcuts
(:require-macros [app.main.style :refer [css]]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.config :as cf] [app.config :as cf]
[app.main.data.dashboard.shortcuts] [app.main.data.dashboard.shortcuts]
[app.main.data.events :as ev]
[app.main.data.shortcuts :as ds] [app.main.data.shortcuts :as ds]
[app.main.data.viewer.shortcuts] [app.main.data.viewer.shortcuts]
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
@ -19,21 +18,17 @@
[app.main.data.workspace.shortcuts] [app.main.data.workspace.shortcuts]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.search-bar :refer [search-bar]] [app.main.ui.components.search-bar :refer [search-bar]]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[app.util.keyboard :as kbd]
[app.util.strings :refer [matches-search]] [app.util.strings :refer [matches-search]]
[clojure.set :as set] [clojure.set :as set]
[clojure.string] [clojure.string]
[cuerdas.core :as str]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc converted-chars (mf/defc converted-chars
[{:keys [char command] :as props}] [{:keys [char command] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [modified-keys {:up ds/up-arrow
modified-keys {:up ds/up-arrow
:down ds/down-arrow :down ds/down-arrow
:left ds/left-arrow :left ds/left-arrow
:right ds/right-arrow :right ds/right-arrow
@ -51,10 +46,8 @@
char (if (contains? modified-keys (keyword char)) ((keyword char) modified-keys) char) 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) char (if (and is-macos? (contains? macos-keys (keyword char))) ((keyword char) macos-keys) char)
unique-key (str (d/name command) "-" char)] unique-key (str (d/name command) "-" char)]
(if new-css-system [:span {:class (stl/css :key)
[:span {:class (css :key) :key unique-key} char]))
:key unique-key} char]
[:span.char-box {:key unique-key} char])))
(defn translation-keyname (defn translation-keyname
[type keyname] [type keyname]
@ -222,8 +215,7 @@
(mf/defc shortcuts-keys (mf/defc shortcuts-keys
[{:keys [content command] :as props}] [{:keys [content command] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [managed-list (if (coll? content)
managed-list (if (coll? content)
content content
(conj () content)) (conj () content))
chars-list (map ds/split-sc managed-list) chars-list (map ds/split-sc managed-list)
@ -232,43 +224,25 @@
chars-list chars-list
(drop-last chars-list)) (drop-last chars-list))
penultimate (last short-char-list)] penultimate (last short-char-list)]
(if new-css-system [:span {:class (stl/css :keys)}
[:span {:class (css :keys)}
(for [chars short-char-list] (for [chars short-char-list]
[:* [:*
(for [char chars] (for [char chars]
[:& converted-chars {:key (dm/str char "-" (name command)) [:& converted-chars {:key (dm/str char "-" (name command))
:char char :char char
:command command}]) :command command}])
(when (not= chars penultimate) [:span {:class (css :space)} ","])]) (when (not= chars penultimate) [:span {:class (stl/css :space)} ","])])
(when (not= last-element penultimate) (when (not= last-element penultimate)
[:* [:*
[:span {:class (css :space)} (tr "shortcuts.or")] [:span {:class (stl/css :space)} (tr "shortcuts.or")]
(for [char last-element] (for [char last-element]
[:& converted-chars {:key (dm/str char "-" (name command)) [:& converted-chars {:key (dm/str char "-" (name command))
:char char :char char
:command command}])])] :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}])])])))
(mf/defc shortcut-row (mf/defc shortcut-row
[{:keys [elements filter-term match-section? match-subsection?] :as props}] [{:keys [elements filter-term match-section? match-subsection?] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [shortcut-name (keys elements)
shortcut-name (keys elements)
shortcut-translations (map #(translation-keyname :sc %) shortcut-name) shortcut-translations (map #(translation-keyname :sc %) shortcut-name)
match-shortcut? (some #(matches-search % @filter-term) shortcut-translations) match-shortcut? (some #(matches-search % @filter-term) shortcut-translations)
filtered (if (and (or match-section? match-subsection?) (not match-shortcut?)) filtered (if (and (or match-section? match-subsection?) (not match-shortcut?))
@ -276,46 +250,32 @@
(filter #(matches-search % @filter-term) shortcut-translations)) (filter #(matches-search % @filter-term) shortcut-translations))
sorted-filtered (sort filtered)] sorted-filtered (sort filtered)]
(if new-css-system [:ul {:class (stl/css :sub-menu)}
[:ul {:class (css :sub-menu)}
(for [command-translate sorted-filtered] (for [command-translate sorted-filtered]
(let [sc-by-translate (first (filter #(= (:translation (second %)) command-translate) elements)) (let [sc-by-translate (first (filter #(= (:translation (second %)) command-translate) elements))
[command comand-info] sc-by-translate [command comand-info] sc-by-translate
content (or (:show-command comand-info) (:command comand-info))] content (or (:show-command comand-info) (:command comand-info))]
[:li {:class (css :shortcuts-name) [:li {:class (stl/css :shortcuts-name)
:key command-translate} :key command-translate}
[:span {:class (css :command-name)} [:span {:class (stl/css :command-name)}
command-translate] command-translate]
[:& shortcuts-keys {:content content [:& shortcuts-keys {:content content
:command command}]]))] :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}]]))])))
(mf/defc section-title (mf/defc section-title
[{:keys [is-visible? name is-sub?] :as props}] [{:keys [is-visible? name is-sub?] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)] [:div {:class (if is-sub?
(if new-css-system (stl/css :subsection-title)
[:div {:class (if is-sub? (css :subsection-title) (css :section-title))} (stl/css :section-title))}
[:span {:class (dom/classnames (css :open) is-visible? [:span {:class (stl/css-case :open is-visible?
(css :collapsed-shortcuts) true)} i/arrow-refactor] :collapsed-shortcuts true)} i/arrow-refactor]
[:span {:class (if is-sub? (css :subsection-name) (css :section-name))} name]] [:span {:class (if is-sub?
(stl/css :subsection-name)
[:div {:class (if is-sub? "subsection-title" "section-title")} (stl/css :section-name))} name]])
[:span.collapesed-shortcuts {:class (when is-visible? "open")} i/arrow-slide]
[:span {:class (if is-sub? "subsection-name" "section-name")} name]])))
(mf/defc shortcut-subsection (mf/defc shortcut-subsection
[{:keys [subsections manage-sections filter-term match-section? open-sections] :as props}] [{:keys [subsections manage-sections filter-term match-section? open-sections] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [subsections-names (keys subsections)
subsections-names (keys subsections)
subsection-translations (if (= :none (first subsections-names)) subsection-translations (if (= :none (first subsections-names))
(map #(translation-keyname :sc %) subsections-names) (map #(translation-keyname :sc %) subsections-names)
(map #(translation-keyname :sub-sec %) subsections-names)) (map #(translation-keyname :sub-sec %) subsections-names))
@ -328,8 +288,7 @@
:match-section? match-section? :match-section? match-section?
:match-subsection? true}]) :match-subsection? true}])
[:ul {:class (dom/classnames (css :subsection-menu) new-css-system [:ul {:class (stl/css :subsection-menu)}
:subsection-menu (not new-css-system))}
(for [sub-translated sorted-translations] (for [sub-translated sorted-translations]
(let [sub-by-translate (first (filter #(= (:translation (second %)) sub-translated) subsections)) (let [sub-by-translate (first (filter #(= (:translation (second %)) sub-translated) subsections))
[sub-name sub-info] sub-by-translate [sub-name sub-info] sub-by-translate
@ -368,7 +327,7 @@
visible? (some #(= % section-id) @open-sections)] visible? (some #(= % section-id) @open-sections)]
(when (or match-section? match-subsection? match-shortcut?) (when (or match-section? match-subsection? match-shortcut?)
[:div {:class (css :section) [:div {:class (stl/css :section)
:on-click (manage-sections section-id)} :on-click (manage-sections section-id)}
[:& section-title {:is-visible? visible? [:& section-title {:is-visible? visible?
:is-sub? false :is-sub? false
@ -383,8 +342,7 @@
(mf/defc shortcuts-container (mf/defc shortcuts-container
[] []
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [workspace-shortcuts app.main.data.workspace.shortcuts/shortcuts
workspace-shortcuts app.main.data.workspace.shortcuts/shortcuts
path-shortcuts app.main.data.workspace.path.shortcuts/shortcuts path-shortcuts app.main.data.workspace.path.shortcuts/shortcuts
all-workspace-shortcuts (->> (d/deep-merge path-shortcuts workspace-shortcuts) all-workspace-shortcuts (->> (d/deep-merge path-shortcuts workspace-shortcuts)
(add-translation :sc) (add-translation :sc)
@ -496,13 +454,6 @@
(manage-section-on-search :viewer term))] (manage-section-on-search :viewer term))]
(reset! open-sections ids)))) (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 on-search-term-change-2
(mf/use-callback (mf/use-callback
(fn [value] (fn [value]
@ -512,80 +463,31 @@
(mf/use-callback (mf/use-callback
(fn [_] (fn [_]
(reset! open-sections [[1]]) (reset! open-sections [[1]])
(reset! filter-term ""))) (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")))))]
(mf/with-effect [] (mf/with-effect []
(dom/focus! (dom/get-element "shortcut-search"))) (dom/focus! (dom/get-element "shortcut-search")))
(if new-css-system [:div {:class (stl/css :shortcuts)}
[:div {:class (css :shortcuts)} [:div {:class (stl/css :shortcuts-header)}
[:div {:class (css :shortcuts-header)} [:div {:class (stl/css :shortcuts-title)} (tr "shortcuts.title")]
[:div {:class (css :shortcuts-title)} (tr "shortcuts.title")] [:div {:class (stl/css :shortcuts-close-button)
[:div {:class (css :shortcuts-close-button)
:on-click close-fn} :on-click close-fn}
i/close-refactor]] i/close-refactor]]
[:div {:class (css :search-field)} [:div {:class (stl/css :search-field)}
[:& search-bar {:on-change on-search-term-change-2 [:& search-bar {:on-change on-search-term-change-2
:clear-action on-search-clear-click :clear-action on-search-clear-click
:value @filter-term :value @filter-term
:placeholder (tr "shortcuts.title") :placeholder (tr "shortcuts.title")
:icon (mf/html [:span {:class (css :search-icon)} i/search-refactor])}]] :icon (mf/html [:span {:class (stl/css :search-icon)} i/search-refactor])}]]
(if match-any? (if match-any?
[:div {:class (dom/classnames (css :shortcuts-list) true)} [:div {:class (stl/css :shortcuts-list)}
(for [section all-shortcuts] (for [section all-shortcuts]
[:& shortcut-section [:& shortcut-section
{:section section {:section section
:manage-sections manage-sections :manage-sections manage-sections
:open-sections open-sections :open-sections open-sections
:filter-term filter-term}])] :filter-term filter-term}])]
[:div {:class (css :not-found)} (tr "shortcuts.not-found")])] [:div {:class (stl/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")])])))