mirror of
https://github.com/penpot/penpot.git
synced 2025-01-10 08:50:57 -05:00
Merge pull request #3301 from penpot/juan-shorcuts-ui-redesign
Shorcuts UI redesign
This commit is contained in:
Alejandro
GitHub
commit
77a16a6074
10 changed files with 441 additions and 72 deletions
3
frontend/resources/images/icons/absolute-refactor.svg
Normal file
3
frontend/resources/images/icons/absolute-refactor.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M0.666992 15.3332L15.3337 0.666505M7.33367 15.3618L15.305 7.33317M13.9717 15.3618L15.305 14.0285M8.63835 0.666504L0.666992 8.69515M2.00034 0.666505L0.666999 1.99983"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 295 B |
3
frontend/resources/images/icons/library-refactor.svg
Normal file
3
frontend/resources/images/icons/library-refactor.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M2 9.75C2 9.06 2.56 8.5 3.25 8.5H10M2 9.75C2 10.44 2.56 11 3.25 11H10V1H3.25C2.56 1 2 1.56 2 2.25V9.75Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 235 B |
3
frontend/resources/images/icons/open-link-refactor.svg
Normal file
3
frontend/resources/images/icons/open-link-refactor.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m2 10 8-8m0 0H2m8 0v8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 153 B |
3
frontend/resources/images/icons/svg-refactor.svg
Normal file
3
frontend/resources/images/icons/svg-refactor.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M11.5 3.5C11.5 0 4 0 4 4s8 2 8 7-8.5 5-8.5.5m8-8a1 1 0 1 0 .002 2.002A1 1 0 0 0 11.5 3.5Zm-8 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 254 B |
|
Before Width: | Height: | Size: 313 B After Width: | Height: | Size: 313 B |
|
|
@ -26,6 +26,7 @@
|
|||
--tab-foreground-color-hover: var(--color-foreground-primary);
|
||||
--tab-foreground-color-selected: var(--color-accent-primary);
|
||||
|
||||
--title-background-color: var(--color-background-secondary);
|
||||
--title-foreground-color: var(--color-foreground-secondary);
|
||||
--title-foreground-color-hover: var(--color-foreground-primary);
|
||||
|
||||
|
|
|
|||
|
|
@ -261,21 +261,45 @@
|
|||
|
||||
(def add-refactor (icon-xref :add-refactor))
|
||||
(def arrow-refactor (icon-xref :arrow-refactor))
|
||||
(def absolute-refactor (icon-xref :absolute-refactor))
|
||||
(def align-bottom-refactor (icon-xref :align-bottom-refactor))
|
||||
(def align-content-center-refactor (icon-xref :align-content-center-refactor))
|
||||
(def align-content-end-refactor (icon-xref :align-content-end-refactor))
|
||||
(def align-content-space-around-refactor (icon-xref :align-content-space-around-refactor))
|
||||
(def align-content-space-between-refactor (icon-xref :align-content-space-between-refactor))
|
||||
(def align-content-space-evenly-refactor (icon-xref :align-content-space-evenly-refactor))
|
||||
(def align-content-start-refactor (icon-xref :align-content-start-refactor))
|
||||
(def align-horizontal-center-refactor (icon-xref :align-horizontal-center-refactor))
|
||||
(def align-vertical-center-refactor (icon-xref :align-vertical-center-refactor))
|
||||
(def align-items-center-refactor (icon-xref :align-items-center-refactor))
|
||||
(def align-items-end-refactor (icon-xref :align-items-end-refactor))
|
||||
(def align-items-start-refactor (icon-xref :align-items-start-refactor))
|
||||
(def align-left-refactor (icon-xref :align-left-refactor))
|
||||
(def align-right-refactor (icon-xref :align-right-refactor))
|
||||
(def align-top-refactor (icon-xref :align-top-refactor))
|
||||
(def board-refactor (icon-xref :board-refactor))
|
||||
(def boards-thumbnail-refactor (icon-xref :boards-thumbnail-refactor))
|
||||
(def boolean-difference-refactor (icon-xref :boolean-difference-refactor))
|
||||
(def boolean-exclude-refactor (icon-xref :boolean-exclude-refactor))
|
||||
(def boolean-flatten-refactor (icon-xref :boolean-flatten-refactor))
|
||||
(def boolean-intersection-refactor (icon-xref :boolean-intersection-refactor))
|
||||
(def boolean-union-refactor (icon-xref :boolean-union-refactor))
|
||||
(def close-refactor (icon-xref :close-refactor))
|
||||
(def close-small-refactor (icon-xref :close-small-refactor))
|
||||
(def component-refactor (icon-xref :component-refactor))
|
||||
(def copy-refactor (icon-xref :copy-refactor))
|
||||
(def column-refactor (icon-xref :column-refactor))
|
||||
(def column-reverse-refactor (icon-xref :column-reverse-refactor))
|
||||
(def constraint-horizontal-refactor (icon-xref :constraint-horizontal-refactor))
|
||||
(def constraint-vertical-refactor (icon-xref :constraint-vertical-refactor))
|
||||
(def corner-radius-refactor (icon-xref :corner-radius-refactor))
|
||||
(def curve-refactor (icon-xref :curve-refactor))
|
||||
(def distribute-vertical-sapcing-refactor (icon-xref :distribute-vertical-spacing-refactor))
|
||||
(def delete-refactor (icon-xref :delete-refactor))
|
||||
(def delete-text-refactor (icon-xref :delete-text-refactor))
|
||||
(def document-refactor (icon-xref :document-refactor))
|
||||
(def drop-refactor (icon-xref :drop-refactor))
|
||||
(def effects-refactor (icon-xref :effects-refactor))
|
||||
(def elipse-refactor (icon-xref :elipse-refactor))
|
||||
(def filter-refactor (icon-xref :filter-refactor))
|
||||
(def flex-refactor (icon-xref :flex-refactor))
|
||||
|
|
@ -283,21 +307,74 @@
|
|||
(def flex-grid-refactor (icon-xref :flex-grid-refactor))
|
||||
(def flex-vertical-refactor (icon-xref :flex-vertical-refactor))
|
||||
(def flip-horizontal-refactor (icon-xref :flip-horizontal-refactor))
|
||||
(def grid-column-refactor (icon-xref :grid-column-refactor))
|
||||
(def grid-columns-refactor (icon-xref :grid-columns-refactor))
|
||||
(def grid-gutter-refactor (icon-xref :grid-gutter-refactor))
|
||||
(def grid-margin-refactor (icon-xref :grid-margin-refactor))
|
||||
(def grid-row-refactor (icon-xref :grid-row-refactor))
|
||||
(def grid-rows-refactor (icon-xref :grid-rows-refactor))
|
||||
(def grid-square-refactor (icon-xref :grid-square-refactor))
|
||||
(def grid-refactor (icon-xref :grid-refactor))
|
||||
(def group-refactor (icon-xref :group-refactor))
|
||||
(def gutter-horizontal-refactor (icon-xref :gutter-horizontal-refactor))
|
||||
(def gutter-vertical-refactor (icon-xref :gutter-vertical-refactor))
|
||||
(def hide-refactor (icon-xref :hide-refactor))
|
||||
(def img-refactor (icon-xref :img-refactor))
|
||||
(def icon-refactor (icon-xref :icon-refactor))
|
||||
(def justify-content-center-refactor (icon-xref :justify-content-center-refactor))
|
||||
(def justify-content-end-refactor (icon-xref :justify-content-end-refactor))
|
||||
(def justify-content-start-refactor (icon-xref :justify-content-start-refactor))
|
||||
(def justify-content-space-between-refactor (icon-xref :justify-content-space-between-refactor))
|
||||
(def justify-content-space-around-refactor (icon-xref :justify-content-space-around-refactor))
|
||||
(def justify-content-space-evenly-refactor (icon-xref :justify-content-space-evenly-refactor))
|
||||
(def lock-refactor (icon-xref :lock-refactor))
|
||||
(def library-refactor (icon-xref :library-refactor))
|
||||
(def margin-bottom-refactor (icon-xref :margin-bottom-refactor))
|
||||
(def margin-left-refactor (icon-xref :margin-left-refactor))
|
||||
(def margin-left-right-refactor (icon-xref :margin-left-right-refactor))
|
||||
(def margin-right-refactor (icon-xref :margin-right-refactor))
|
||||
(def margin-top-refactor (icon-xref :margin-top-refactor))
|
||||
(def margin-top-bottom-refactor (icon-xref :margin-top-bottom-refactor))
|
||||
(def mask-refactor (icon-xref :mask-refactor))
|
||||
(def masked-refactor (icon-xref :masked-refactor))
|
||||
(def menu-refactor (icon-xref :menu-refactor))
|
||||
(def move-refactor (icon-xref :move-refactor))
|
||||
(def open-link-refactor (icon-xref :open-link-refactor))
|
||||
(def padding-bottom-refactor (icon-xref :padding-bottom-refactor))
|
||||
(def padding-top-refactor (icon-xref :padding-top-refactor))
|
||||
(def padding-top-bottom-refactor (icon-xref :padding-top-bottom-refactor))
|
||||
(def padding-left-refactor (icon-xref :padding-left-refactor))
|
||||
(def padding-left-right-refactor (icon-xref :padding-left-right-refactor))
|
||||
(def padding-right-refactor (icon-xref :padding-right-refactor))
|
||||
(def padding-extended-refactor (icon-xref :padding-extended-refactor))
|
||||
(def path-refactor (icon-xref :path-refactor))
|
||||
(def pentool-refactor (icon-xref :pentool-refactor))
|
||||
(def rectangle-refactor (icon-xref :rectangle-refactor))
|
||||
(def remove-refactor (icon-xref :remove-refactor))
|
||||
(def rotation-refactor (icon-xref :rotation-refactor))
|
||||
(def row-reverse-refactor (icon-xref :row-reverse-refactor))
|
||||
(def search-refactor (icon-xref :search-refactor))
|
||||
(def size-horizontal-refactor (icon-xref :size-horizontal-refactor))
|
||||
(def size-vertical-refactor (icon-xref :size-vertical-refactor))
|
||||
(def shown-refactor (icon-xref :shown-refactor))
|
||||
(def stroke-size-refactor (icon-xref :stroke-size-refactor))
|
||||
(def svg-refactor (icon-xref :svg-refactor))
|
||||
(def swatches-refactor (icon-xref :swatches-refactor))
|
||||
(def text-align-center-refactor (icon-xref :text-align-center-refactor))
|
||||
(def text-align-left-refactor (icon-xref :text-align-left-refactor))
|
||||
(def text-align-right-refactor (icon-xref :text-align-right-refactor))
|
||||
(def text-auto-height-refactor (icon-xref :text-auto-height-refactor))
|
||||
(def text-auto-width-refactor (icon-xref :text-auto-width-refactor))
|
||||
(def text-paragraph-refactor (icon-xref :text-paragraph-refactor))
|
||||
(def text-refactor (icon-xref :text-refactor))
|
||||
(def text-palette-refactor (icon-xref :text-palette-refactor))
|
||||
(def tick-refactor (icon-xref :tick-refactor))
|
||||
(def unlock-refactor (icon-xref :unlock-refactor))
|
||||
(def boolean-union-refactor (icon-xref :boolean-union-refactor))
|
||||
(def vertical-align-items-center-refactor (icon-xref :vertical-align-items-center-refactor))
|
||||
(def vertical-align-items-end-refactor (icon-xref :vertical-align-items-end-refactor))
|
||||
(def vertical-align-items-start-refactor (icon-xref :vertical-align-items-start-refactor))
|
||||
(def view-as-icons-refactor (icon-xref :view-as-icons-refactor))
|
||||
(def wrap-refactor (icon-xref :wrap-refactor))
|
||||
(def loader-pencil
|
||||
(mf/html
|
||||
[:svg
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.sidebar.shortcuts
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
|
|
@ -17,6 +18,7 @@
|
|||
[app.main.data.workspace.path.shortcuts]
|
||||
[app.main.data.workspace.shortcuts]
|
||||
[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]]
|
||||
|
|
@ -29,7 +31,8 @@
|
|||
|
||||
(mf/defc converted-chars
|
||||
[{:keys [char command] :as props}]
|
||||
(let [modified-keys {:up ds/up-arrow
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
modified-keys {:up ds/up-arrow
|
||||
:down ds/down-arrow
|
||||
:left ds/left-arrow
|
||||
:right ds/right-arrow
|
||||
|
|
@ -47,8 +50,10 @@
|
|||
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)]
|
||||
[:*
|
||||
[:span.char-box {:key unique-key} char]]))
|
||||
(if new-css-system
|
||||
[:span {:class (css :key)
|
||||
:key unique-key} char]
|
||||
[:span.char-box {:key unique-key} char])))
|
||||
|
||||
(defn translation-keyname
|
||||
[type keyname]
|
||||
|
|
@ -212,7 +217,8 @@
|
|||
|
||||
(mf/defc shortcuts-keys
|
||||
[{:keys [content command] :as props}]
|
||||
(let [managed-list (if (coll? content)
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
managed-list (if (coll? content)
|
||||
content
|
||||
(conj () content))
|
||||
chars-list (map ds/split-sc managed-list)
|
||||
|
|
@ -221,50 +227,90 @@
|
|||
chars-list
|
||||
(drop-last chars-list))
|
||||
penultimate (last short-char-list)]
|
||||
[: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}])])]))
|
||||
(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}])])])))
|
||||
|
||||
(mf/defc shortcut-row
|
||||
[{:keys [elements filter-term match-section? match-subsection?] :as props}]
|
||||
(let [shortcut-name (keys elements)
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
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?))
|
||||
shortcut-translations
|
||||
(filter #(matches-search % @filter-term) shortcut-translations))
|
||||
sorted-filtered (sort filtered)]
|
||||
[: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 (:command comand-info)]
|
||||
[:li.shortcut-name {:key command-translate}
|
||||
[:span.command-name command-translate]
|
||||
[:& shortcuts-keys {:content content
|
||||
:command command}]]))]))
|
||||
|
||||
(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 (: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 (:command comand-info)]
|
||||
[:li.shortcut-name {:key command-translate}
|
||||
[:span.command-name command-translate]
|
||||
[:& shortcuts-keys {:content content
|
||||
:command command}]]))])))
|
||||
|
||||
(mf/defc section-title
|
||||
[{:keys [is-visible? name is-sub?] :as props}]
|
||||
[: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]])
|
||||
(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]])))
|
||||
|
||||
(mf/defc shortcut-subsection
|
||||
[{:keys [subsections manage-sections filter-term match-section? open-sections] :as props}]
|
||||
(let [subsections-names (keys subsections)
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
subsections-names (keys subsections)
|
||||
subsection-translations (if (= :none (first subsections-names))
|
||||
(map #(translation-keyname :sc %) subsections-names)
|
||||
(map #(translation-keyname :sub-sec %) subsections-names))
|
||||
|
|
@ -276,8 +322,9 @@
|
|||
:filter-term filter-term
|
||||
:match-section? match-section?
|
||||
:match-subsection? true}])
|
||||
|
||||
[:ul.subsection-menu
|
||||
|
||||
[:ul {:class (dom/classnames (css :subsection-menu) new-css-system
|
||||
:subsection-menu (not new-css-system))}
|
||||
(for [sub-translated sorted-translations]
|
||||
(let [sub-by-translate (first (filter #(= (:translation (second %)) sub-translated) subsections))
|
||||
[sub-name sub-info] sub-by-translate
|
||||
|
|
@ -314,8 +361,10 @@
|
|||
translations (map #(translation-keyname :sc %) (keys subs-bodys))
|
||||
match-shortcut? (some #(matches-search % @filter-term) translations)
|
||||
visible? (some #(= % section-id) @open-sections)]
|
||||
|
||||
(when (or match-section? match-subsection? match-shortcut?)
|
||||
[:div {:on-click (manage-sections section-id)}
|
||||
[:div {:class (css :section)
|
||||
:on-click (manage-sections section-id)}
|
||||
[:& section-title {:is-visible? visible?
|
||||
:is-sub? false
|
||||
:name section-translation}]
|
||||
|
|
@ -329,7 +378,8 @@
|
|||
|
||||
(mf/defc shortcuts-container
|
||||
[]
|
||||
(let [workspace-shortcuts app.main.data.workspace.shortcuts/shortcuts
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
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)
|
||||
|
|
@ -468,39 +518,78 @@
|
|||
(on-search-clear-click)
|
||||
(dom/focus! (dom/get-element "shortcut-search")))))]
|
||||
|
||||
(mf/with-effect []
|
||||
(dom/focus! (dom/get-element "shortcut-search")))
|
||||
(mf/with-effect []
|
||||
(dom/focus! (dom/get-element "shortcut-search")))
|
||||
|
||||
[: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}])]
|
||||
(if new-css-system
|
||||
[:div {:class (css :shortcuts)}
|
||||
[:div {:class (css :shortcuts-header)}
|
||||
[:div {:class (css :shortcuts-title)} "Keyboard Shortcuts"]
|
||||
[:div {:class (css :shortcuts-close-button)
|
||||
:on-click close-fn}
|
||||
i/close-refactor]]
|
||||
;; TODO Change this for search bar component
|
||||
[:div {:class (css :search-field)}
|
||||
[:div {:class (css :search-box)}
|
||||
[:span {:class (css :icon-wrapper)}
|
||||
i/search-refactor]
|
||||
[:input {:class (dom/classnames (css :input-text) true)
|
||||
:id "shortcut-search"
|
||||
:placeholder (tr "shortcuts.title")
|
||||
:type "text"
|
||||
:value @filter-term
|
||||
:on-change on-search-term-change
|
||||
:auto-complete "off"
|
||||
:on-key-down manage-key-down}]
|
||||
(when (not (str/empty? @filter-term))
|
||||
|
||||
[:div.not-found (tr "shortcuts.not-found")])]))
|
||||
[:button
|
||||
{:class (css :clear-btn)
|
||||
:on-click on-search-clear-click
|
||||
:on-key-down on-key-down}
|
||||
[:span {:class (css :clear-icon)}
|
||||
i/delete-text-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")])])))
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
{"button-primary":"sidebar_shortcuts_button-primary_aIZ1F","shortcuts":"sidebar_shortcuts_shortcuts_cOJNo","shortcuts-header":"sidebar_shortcuts_shortcuts-header_0SZ19","shortcuts-close-button":"sidebar_shortcuts_shortcuts-close-button_gT7kn","button-secondary":"sidebar_shortcuts_button-secondary_dtWEN","button-icon":"sidebar_shortcuts_button-icon_rCHmV","button-icon-small":"sidebar_shortcuts_button-icon-small_9BnNh","shortcuts-list":"sidebar_shortcuts_shortcuts-list_z7osI","section-title":"sidebar_shortcuts_section-title_Dv7S-","collapsed-shortcuts":"sidebar_shortcuts_collapsed-shortcuts_XrOj5","subsection-title":"sidebar_shortcuts_subsection-title_--5j4","search-field":"sidebar_shortcuts_search-field_cDecA","search-box":"sidebar_shortcuts_search-box_vmYAl","clear-btn":"sidebar_shortcuts_clear-btn_vRbGu","clear-icon":"sidebar_shortcuts_clear-icon_ZL4ae","icon-wrapper":"sidebar_shortcuts_icon-wrapper_XaR8m","shortcuts-title":"sidebar_shortcuts_shortcuts-title_P38o9","input-text":"sidebar_shortcuts_input-text_e9n1x","section":"sidebar_shortcuts_section_Jxkqa","open":"sidebar_shortcuts_open_SxghD","subsection-name":"sidebar_shortcuts_subsection-name_rWvFY","section-name":"sidebar_shortcuts_section-name_SyF9-","subsection-menu":"sidebar_shortcuts_subsection-menu_FdH9L","sub-menu":"sidebar_shortcuts_sub-menu_95jTY","shortcuts-name":"sidebar_shortcuts_shortcuts-name_hPkq6","command-name":"sidebar_shortcuts_command-name_Cujed","keys":"sidebar_shortcuts_keys_-pUnF","key":"sidebar_shortcuts_key_QyU8q","space":"sidebar_shortcuts_space_aODdu","not-found":"sidebar_shortcuts_not-found_bKEb0"}
|
||||
189
frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
Normal file
189
frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.shortcuts {
|
||||
.shortcuts-header {
|
||||
@include flexCenter;
|
||||
@include tabTitleTipography;
|
||||
position: relative;
|
||||
height: $s-32;
|
||||
padding: $s-2 $s-2 $s-2 0;
|
||||
margin: $s-4 $s-4 0 $s-4;
|
||||
border-radius: $br-6;
|
||||
background-color: var(--title-background-color);
|
||||
|
||||
.shortcuts-title {
|
||||
@include flexCenter;
|
||||
flex-grow: 1;
|
||||
color: var(--title-foreground-color-hover);
|
||||
}
|
||||
|
||||
.shortcuts-close-button {
|
||||
@extend .button-primary;
|
||||
position: absolute;
|
||||
right: $s-2;
|
||||
top: $s-2;
|
||||
height: $s-28;
|
||||
width: $s-28;
|
||||
border-radius: $br-5;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
margin: $s-16 $s-12 $s-4 $s-12;
|
||||
border-radius: $br-8;
|
||||
font-family: "worksans", sans-serif;
|
||||
background-color: var(--color-background-tertiary);
|
||||
|
||||
.search-box {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.icon-wrapper {
|
||||
display: flex;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
}
|
||||
}
|
||||
|
||||
.input-text {
|
||||
height: $s-32;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: $s-4;
|
||||
border: 0;
|
||||
font-size: $fs-12;
|
||||
color: var(--color-foreground-primary);
|
||||
background-color: transparent;
|
||||
&::placeholder {
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
&:focus-visible {
|
||||
border-color: var(--color-accent-primary-muted);
|
||||
}
|
||||
}
|
||||
.clear-btn {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
.clear-icon {
|
||||
@include flexCenter;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
margin: 0;
|
||||
}
|
||||
.shortcuts-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 90%;
|
||||
padding: $s-12;
|
||||
margin-bottom: $s-12;
|
||||
scrollbar-gutter: stable;
|
||||
overflow-y: overlay;
|
||||
font-size: $fs-12;
|
||||
color: var(--title-foreground-color);
|
||||
|
||||
.section-title,
|
||||
.subsection-title {
|
||||
@include tabTitleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: $s-8 0;
|
||||
cursor: pointer;
|
||||
|
||||
.collapsed-shortcuts {
|
||||
@include flexCenter;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
}
|
||||
&.open {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
.subsection-name,
|
||||
.section-name {
|
||||
padding-left: $s-4;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--title-foreground-color-hover);
|
||||
.collapsed-shortcuts {
|
||||
svg {
|
||||
stroke: var(--title-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subsection-title {
|
||||
text-transform: none;
|
||||
padding-left: $s-12;
|
||||
}
|
||||
.subsection-menu {
|
||||
margin-bottom: $s-4;
|
||||
}
|
||||
.sub-menu {
|
||||
margin-bottom: $s-4;
|
||||
|
||||
.shortcuts-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
min-height: $s-32;
|
||||
padding: $s-6;
|
||||
margin-bottom: $s-4;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--pill-background-color);
|
||||
|
||||
.command-name {
|
||||
@include titleTipography;
|
||||
margin-left: $s-2;
|
||||
color: var(--pill-foreground-color);
|
||||
}
|
||||
.keys {
|
||||
@include flexCenter;
|
||||
gap: $s-2;
|
||||
color: var(--pill-foreground-color);
|
||||
|
||||
.key {
|
||||
@include titleTipography;
|
||||
@include flexCenter;
|
||||
text-transform: capitalize;
|
||||
height: $s-20;
|
||||
padding: $s-2 $s-6;
|
||||
border-radius: $s-6;
|
||||
background-color: var(--menu-shortcut-background-color);
|
||||
}
|
||||
.space {
|
||||
margin: 0 $s-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.not-found {
|
||||
@include titleTipography;
|
||||
margin: $s-12;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue