mirror of
https://github.com/penpot/penpot.git
synced 2025-02-13 10:38:13 -05:00
♻️ Remove refer css from files
This commit is contained in:
Eva
Alonso Torres
parent
dc4bf82684
commit
0a123a3917
8 changed files with 401 additions and 600 deletions
|
|
@ -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])]]))
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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]]]))
|
||||
|
|
|
|||
|
|
@ -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)}])])]))
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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")])]))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue