From 937713311ec0daa1e89b69b29ca5ad8dc65747bd Mon Sep 17 00:00:00 2001 From: Eva Date: Thu, 5 Jan 2023 16:35:12 +0100 Subject: [PATCH 1/5] :bug: Fix some visual errors --- .../styles/main/partials/color-bullet.scss | 19 ++++++++++----- .../styles/main/partials/colorpicker.scss | 1 + .../styles/main/partials/inspect.scss | 2 +- .../styles/main/partials/sidebar-assets.scss | 5 ++++ .../partials/sidebar-element-options.scss | 23 +++++++++++++++++++ .../styles/main/partials/sidebar-layers.scss | 23 ++++++++++++++++++- .../styles/main/partials/sidebar.scss | 4 ++++ .../main/partials/workspace-header.scss | 6 +++++ .../sidebar/options/menus/measures.cljs | 3 ++- 9 files changed, 77 insertions(+), 9 deletions(-) diff --git a/frontend/resources/styles/main/partials/color-bullet.scss b/frontend/resources/styles/main/partials/color-bullet.scss index 6a86edd37..9d42a2703 100644 --- a/frontend/resources/styles/main/partials/color-bullet.scss +++ b/frontend/resources/styles/main/partials/color-bullet.scss @@ -13,7 +13,7 @@ width: 65px; .color-bullet { - border: 2px solid $color-gray-60; + border: 2px solid $color-gray-30; position: relative; width: var(--bullet-size); height: var(--bullet-size); @@ -30,21 +30,21 @@ .color-cell.current { .color-bullet { - border-color: $color-gray-50; + border-color: $color-gray-30; } } ul.palette-menu .color-bullet { width: 20px; height: 20px; - border: 1px solid $color-gray-10; + border: 1px solid $color-gray-30; margin-right: 5px; background-size: 8px; } .color-cell.add-color .color-bullet { align-items: center; background-color: $color-gray-50; - border: 3px dashed $color-gray-10; + border: 3px dashed $color-gray-30; cursor: pointer; display: flex; justify-content: center; @@ -62,17 +62,24 @@ ul.palette-menu .color-bullet { grid-area: color; width: 20px; height: 20px; - border: 1px solid $color-gray-10; + border: 1px solid $color-gray-30; background-size: 8px; overflow: hidden; } .asset-section .asset-list-item .color-bullet { - border: 1px solid $color-gray-20; + border: 1px solid $color-gray-30; height: 20px; margin-right: $size-1; width: 20px; } +.asset-list .asset-list-item { + &:hover { + .color-bullet { + border: 1px solid $color-primary; + } + } +} .color-cell.add-color:hover .color-bullet { border-color: $color-gray-30; diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss index a9d658720..d63929126 100644 --- a/frontend/resources/styles/main/partials/colorpicker.scss +++ b/frontend/resources/styles/main/partials/colorpicker.scss @@ -522,6 +522,7 @@ &:focus { border-color: $color-primary !important; color: $color-white; + outline: none; } &:hover { diff --git a/frontend/resources/styles/main/partials/inspect.scss b/frontend/resources/styles/main/partials/inspect.scss index db2fe6413..610f91edc 100644 --- a/frontend/resources/styles/main/partials/inspect.scss +++ b/frontend/resources/styles/main/partials/inspect.scss @@ -148,7 +148,7 @@ width: 24px; height: 24px; border-radius: 50%; - border: 1px solid $color-gray-60; + border: 1px solid $color-gray-30; } .hide-color .color-bullet { diff --git a/frontend/resources/styles/main/partials/sidebar-assets.scss b/frontend/resources/styles/main/partials/sidebar-assets.scss index 7fe6e0193..9fc607e51 100644 --- a/frontend/resources/styles/main/partials/sidebar-assets.scss +++ b/frontend/resources/styles/main/partials/sidebar-assets.scss @@ -67,6 +67,7 @@ &:focus { color: lighten($color-gray-10, 8%); + outline: none; } } @@ -99,6 +100,10 @@ color: lighten($color-gray-10, 8%); } + &:active { + border-color: $color-primary; + } + option { background: $color-white; color: $color-gray-60; diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index 0b6c026df..32228a0a4 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -199,6 +199,7 @@ &:focus { color: lighten($color-gray-10, 8%); + border-color: $color-primary; } option { @@ -312,6 +313,14 @@ border: 1px solid $color-gray-20; } } + .opened { + border: 1px solid $color-primary; + &:hover, + &:focus { + outline: none; + border: 1px solid $color-primary; + } + } .custom-select-dropdown { background-color: $color-white; @@ -549,6 +558,11 @@ } .presets { + &:focus, + &:focus-within { + outline: none; + border: 1px solid $color-primary; + } .custom-select-dropdown { width: 237px; @@ -968,6 +982,15 @@ input { margin-right: 1em; width: 74px; + &:focus { + border-color: $color-primary !important; + color: $color-white; + outline: none; + } + + &:hover { + border-color: $color-gray-20; + } } } } diff --git a/frontend/resources/styles/main/partials/sidebar-layers.scss b/frontend/resources/styles/main/partials/sidebar-layers.scss index 1b8e001c6..4fdd348e5 100644 --- a/frontend/resources/styles/main/partials/sidebar-layers.scss +++ b/frontend/resources/styles/main/partials/sidebar-layers.scss @@ -54,6 +54,9 @@ span { color: $color-gray-60; } + input { + color: $color-white !important; + } .toggle-content { svg { @@ -149,6 +152,9 @@ span.element-name { color: $color-gray-60; } + input.element-name { + color: $color-white !important; + } svg { fill: $color-gray-60; @@ -203,6 +209,14 @@ input.element-name { max-width: 75%; + margin-right: 5px; + background-color: $color-gray-50; + color: $color-white; + &:focus, + &:focus-within { + outline: none; + border: 1px solid $color-primary; + } } span.element-name { @@ -306,12 +320,16 @@ span.element-name { &.search { .search-box { - border: 1px solid $color-primary; + border: 1px solid $color-gray-20; border-radius: 4px; height: 32px; width: 100%; display: flex; align-items: center; + &:active, + &:focus-within { + border: 1px solid $color-primary; + } input { border: 0; width: 100%; @@ -319,6 +337,9 @@ span.element-name { color: $color-white; font-size: 12px; height: 16px; + &:focus { + outline: none; + } } span { height: 16px; diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss index 1ac66ac89..b94fa06e9 100644 --- a/frontend/resources/styles/main/partials/sidebar.scss +++ b/frontend/resources/styles/main/partials/sidebar.scss @@ -390,6 +390,7 @@ button.collapse-sidebar { justify-content: center; align-items: center; padding: 12px 10px; + .search-box { display: flex; justify-content: space-between; @@ -397,6 +398,9 @@ button.collapse-sidebar { border: 1px solid $color-gray-30; border-radius: 2px; width: 100%; + &:focus-within { + border: 1px solid $color-primary; + } .input-text { margin: 0; background: $color-gray-50; diff --git a/frontend/resources/styles/main/partials/workspace-header.scss b/frontend/resources/styles/main/partials/workspace-header.scss index d6536fcc9..b2a0a89d5 100644 --- a/frontend/resources/styles/main/partials/workspace-header.scss +++ b/frontend/resources/styles/main/partials/workspace-header.scss @@ -145,6 +145,12 @@ background: $color-gray-50; color: $color-gray-10; margin-bottom: -1px; + &:focus, + &:focus-within { + outline: none; + border-radius: 3px; + border: 1px solid $color-primary; + } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index d5a02c5d4..937e8be36 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -282,7 +282,8 @@ (when (and (options :presets) (or (nil? all-types) (= (count all-types) 1))) ;; Don't show presets if multi selected [:div.row-flex ;; some frames and some non frames - [:div.presets.custom-select.flex-grow {:on-click #(reset! show-presets-dropdown? true)} + [:div.presets.custom-select.flex-grow {:class (when @show-presets-dropdown? "opened") + :on-click #(reset! show-presets-dropdown? true)} [:span (tr "workspace.options.size-presets")] [:span.dropdown-button i/arrow-down] [:& dropdown {:show @show-presets-dropdown? From eef42acf79915aeaa7adc6078e031714a72c4dfb Mon Sep 17 00:00:00 2001 From: Eva Date: Mon, 9 Jan 2023 12:50:42 +0100 Subject: [PATCH 2/5] :bug: Fix component list on update --- frontend/resources/styles/main/partials/modal.scss | 6 ++++++ frontend/src/app/main/ui/confirm.cljs | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss index 90b917c99..174e300b8 100644 --- a/frontend/resources/styles/main/partials/modal.scss +++ b/frontend/resources/styles/main/partials/modal.scss @@ -65,6 +65,7 @@ flex-direction: column; width: 448px; background-color: $color-white; + max-height: 700px; .modal-header { align-items: center; @@ -104,6 +105,11 @@ } } + .component-list { + max-height: 408px; + overflow-y: scroll; + } + .modal-item-element { display: flex; padding-bottom: 3px; diff --git a/frontend/src/app/main/ui/confirm.cljs b/frontend/src/app/main/ui/confirm.cljs index 3e78635e2..be4d4dc56 100644 --- a/frontend/src/app/main/ui/confirm.cljs +++ b/frontend/src/app/main/ui/confirm.cljs @@ -81,7 +81,7 @@ (when (> (count items) 0) [:* [:p (tr "ds.component-subtitle")] - [:ul + [:ul.component-list (for [item items] [:li.modal-item-element [:span.modal-component-icon i/component] From fe7f4004f14840d75d49d30d83d1d5fd7d2428fa Mon Sep 17 00:00:00 2001 From: Eva Date: Mon, 9 Jan 2023 12:51:10 +0100 Subject: [PATCH 3/5] :bug: Fix scape key to clear focus on input --- .../app/main/ui/components/numeric_input.cljs | 3 ++- .../src/app/main/ui/workspace/libraries.cljs | 19 ++++++++++++++++--- .../app/main/ui/workspace/sidebar/assets.cljs | 17 +++++++++++++++-- .../app/main/ui/workspace/sidebar/layers.cljs | 17 +++++++++++++++-- 4 files changed, 48 insertions(+), 8 deletions(-) diff --git a/frontend/src/app/main/ui/components/numeric_input.cljs b/frontend/src/app/main/ui/components/numeric_input.cljs index 83a5bf029..ad772f1ac 100644 --- a/frontend/src/app/main/ui/components/numeric_input.cljs +++ b/frontend/src/app/main/ui/components/numeric_input.cljs @@ -163,7 +163,8 @@ (when enter? (dom/blur! input-node)) (when esc? - (update-input value-str))))) + (update-input value-str) + (dom/blur! input-node))))) handle-mouse-wheel (mf/use-callback diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index 1e6cdb160..a30e4f7d0 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/libraries.cljs @@ -15,6 +15,7 @@ [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] + [app.util.keyboard :as kbd] [app.util.strings :refer [matches-search]] [cuerdas.core :as str] [okulary.core :as l] @@ -93,11 +94,22 @@ (st/emit! (modal/show {:type :delete-shared :origin :unpublish - :on-accept (fn[] + :on-accept (fn [] (st/emit! (dwl/set-file-shared (:id file) false)) (modal/show! :libraries-dialog {})) :on-cancel #(modal/show! :libraries-dialog {}) - :count-libraries 1}))))] + :count-libraries 1})))) + handle-key-down + (mf/use-callback + (fn [event] + (let [enter? (kbd/enter? event) + esc? (kbd/esc? event) + input-node (dom/event->target event)] + + (when enter? + (dom/blur! input-node)) + (when esc? + (dom/blur! input-node)))))] [:* [:div.section [:div.section-title (tr "workspace.libraries.in-this-file")] @@ -130,7 +142,8 @@ {:placeholder (tr "workspace.libraries.search-shared-libraries") :type "text" :value @search-term - :on-change on-search-term-change}] + :on-change on-search-term-change + :on-key-down handle-key-down}] (if (str/empty? @search-term) [:div.search-icon i/search] diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index 44dd9af33..d29c5c903 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -2243,7 +2243,19 @@ (let [value (-> (dom/get-target event) (dom/get-value) (d/read-string))] - (swap! filters assoc :box value))))] + (swap! filters assoc :box value)))) + + handle-key-down + (mf/use-callback + (fn [event] + (let [enter? (kbd/enter? event) + esc? (kbd/esc? event) + input-node (dom/event->target event)] + + (when enter? + (dom/blur! input-node)) + (when esc? + (dom/blur! input-node)))))] [:div.assets-bar [:div.tool-window @@ -2260,7 +2272,8 @@ {:placeholder (tr "workspace.assets.search") :type "text" :value (:term @filters) - :on-change on-search-term-change}] + :on-change on-search-term-change + :on-key-down handle-key-down}] (if (str/empty? (:term @filters)) [:div.search-icon i/search] diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index caff9ca99..b5e93f97d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -468,7 +468,19 @@ handle-show-more (fn [] (when (<= (:num-items @filter-state) (count filtered-objects-total)) - (swap! filter-state update :num-items + 100)))] + (swap! filter-state update :num-items + 100))) + + handle-key-down + (mf/use-callback + (fn [event] + (let [enter? (kbd/enter? event) + esc? (kbd/esc? event) + input-node (dom/event->target event)] + + (when enter? + (dom/blur! input-node)) + (when esc? + (dom/blur! input-node)))))] [filtered-objects handle-show-more @@ -483,7 +495,8 @@ [:input {:on-change update-search-text :value (:search-text @filter-state) :auto-focus (:show-search-box @filter-state) - :placeholder (tr "workspace.sidebar.layers.search")}]] + :placeholder (tr "workspace.sidebar.layers.search") + :on-key-down handle-key-down}]] (when (not (= "" (:search-text @filter-state))) [:span.clear {:on-click clear-search-text} i/exclude])] [:span {:on-click toggle-search} i/cross]] From 2c2755b35e5de210dc5a1e877c98c66cba3ba8bc Mon Sep 17 00:00:00 2001 From: Eva Date: Mon, 9 Jan 2023 14:26:24 +0100 Subject: [PATCH 4/5] :bug: Fix allow names selection in dashboard --- .../resources/styles/main/partials/dashboard-header.scss | 2 ++ .../resources/styles/main/partials/dashboard-sidebar.scss | 2 +- .../resources/styles/main/partials/dashboard-team.scss | 7 ++++++- frontend/resources/styles/main/partials/dashboard.scss | 4 +++- frontend/src/app/main/ui/dashboard/projects.cljs | 2 +- 5 files changed, 13 insertions(+), 4 deletions(-) diff --git a/frontend/resources/styles/main/partials/dashboard-header.scss b/frontend/resources/styles/main/partials/dashboard-header.scss index 8da45d989..277920564 100644 --- a/frontend/resources/styles/main/partials/dashboard-header.scss +++ b/frontend/resources/styles/main/partials/dashboard-header.scss @@ -13,6 +13,7 @@ padding: $size-1 $size-4 $size-1 $size-2; position: relative; z-index: 10; + user-select: none; &.team { display: grid; grid-template-columns: 20% 1fr 20%; @@ -85,6 +86,7 @@ font-size: $fs22; font-weight: 600; z-index: 10; + user-select: all; } .context-menu.is-open { diff --git a/frontend/resources/styles/main/partials/dashboard-sidebar.scss b/frontend/resources/styles/main/partials/dashboard-sidebar.scss index 0298cb704..f04d4ced6 100644 --- a/frontend/resources/styles/main/partials/dashboard-sidebar.scss +++ b/frontend/resources/styles/main/partials/dashboard-sidebar.scss @@ -186,6 +186,7 @@ flex-direction: column; overflow-y: auto; margin: 0; + user-select: none; // TODO: should be deprecated / unclear name &.dashboard-common { @@ -223,7 +224,6 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - user-select: none; } &::before { diff --git a/frontend/resources/styles/main/partials/dashboard-team.scss b/frontend/resources/styles/main/partials/dashboard-team.scss index 0847c8988..ed8733583 100644 --- a/frontend/resources/styles/main/partials/dashboard-team.scss +++ b/frontend/resources/styles/main/partials/dashboard-team.scss @@ -106,6 +106,9 @@ border: 1px dashed $color-gray-20; margin-top: 16px; } + .table-header { + user-select: none; + } .table-row { background-color: $color-white; @@ -148,9 +151,11 @@ &.roles { flex-grow: 1; - user-select: none; cursor: default; position: relative; + .rol-label { + user-select: none; + } .rol-selector { &.has-priv { border: 1px solid $color-gray-20; diff --git a/frontend/resources/styles/main/partials/dashboard.scss b/frontend/resources/styles/main/partials/dashboard.scss index 2dce56ef5..f1c1eba42 100644 --- a/frontend/resources/styles/main/partials/dashboard.scss +++ b/frontend/resources/styles/main/partials/dashboard.scss @@ -164,8 +164,10 @@ flex: 1 0 0; margin-right: $size-4; overflow-y: auto; - user-select: none; width: 100%; + &.dashboard-projects { + user-select: none; + } &.no-bg { background-color: transparent; } diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs index 30aed2456..dad357e67 100644 --- a/frontend/src/app/main/ui/dashboard/projects.cljs +++ b/frontend/src/app/main/ui/dashboard/projects.cljs @@ -407,7 +407,7 @@ [:& interface-walkthrough {:close-walkthrough close-walkthrough}])]) - [:div.dashboard-container.no-bg + [:div.dashboard-container.no-bg.dashboard-projects (for [{:keys [id] :as project} projects] (let [files (when recent-map (->> (vals recent-map) From 36bc276d93740d761b949c2c46e0856df6a5a6a2 Mon Sep 17 00:00:00 2001 From: Eva Date: Mon, 9 Jan 2023 16:05:40 +0100 Subject: [PATCH 5/5] :bug: Fix outline in color type selector on view mode --- frontend/resources/styles/main/partials/inspect.scss | 5 +++++ .../styles/main/partials/sidebar-layers.scss | 1 - frontend/src/app/main/ui/components/color_input.cljs | 3 ++- .../main/ui/viewer/inspect/attributes/common.cljs | 2 +- .../ui/workspace/sidebar/options/menus/exports.cljs | 12 ++++++++++-- 5 files changed, 18 insertions(+), 5 deletions(-) diff --git a/frontend/resources/styles/main/partials/inspect.scss b/frontend/resources/styles/main/partials/inspect.scss index 610f91edc..8e0eaa949 100644 --- a/frontend/resources/styles/main/partials/inspect.scss +++ b/frontend/resources/styles/main/partials/inspect.scss @@ -173,6 +173,11 @@ background-position: 95% 48%; background-size: 10px; cursor: pointer; + outline: none; + &:focus, + &:focus-within { + border: 1px solid $color-primary; + } option { padding: 1rem; diff --git a/frontend/resources/styles/main/partials/sidebar-layers.scss b/frontend/resources/styles/main/partials/sidebar-layers.scss index 4fdd348e5..1bb42703b 100644 --- a/frontend/resources/styles/main/partials/sidebar-layers.scss +++ b/frontend/resources/styles/main/partials/sidebar-layers.scss @@ -239,7 +239,6 @@ span.element-name { margin-left: auto; position: relative; width: 32px; - right: 20px; &.is-parent { right: 0; diff --git a/frontend/src/app/main/ui/components/color_input.cljs b/frontend/src/app/main/ui/components/color_input.cljs index 380a93802..eed2d2648 100644 --- a/frontend/src/app/main/ui/components/color_input.cljs +++ b/frontend/src/app/main/ui/components/color_input.cljs @@ -86,7 +86,8 @@ (dom/blur! input-node))) (when esc? (dom/prevent-default event) - (update-input value))))) + (update-input value) + (dom/blur! input-node))))) handle-blur (mf/use-callback diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs index b0959c464..cd3b7e180 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs @@ -67,7 +67,7 @@ (when-not (:gradient color) [:div (str (* 100 (:opacity color)) "%")])])) (when-not (and on-change-format (:gradient color)) - [:select {:on-change #(-> (dom/get-target-val %) keyword on-change-format)} + [:select.color-format-select {:on-change #(-> (dom/get-target-val %) keyword on-change-format)} [:option {:value "hex"} (tr "inspect.attributes.color.hex")] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs index 5ceec2ac7..c9f94e715 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs @@ -16,6 +16,7 @@ [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :refer [tr c]] + [app.util.keyboard :as kbd] [rumext.v2 :as mf])) (def exports-attrs @@ -123,7 +124,13 @@ (fn [] (st/emit! (dch/update-shapes ids (fn [shape] - (assoc shape :exports []))))))] + (assoc shape :exports [])))))) + manage-key-down + (mf/use-callback + (fn [event] + (let [esc? (kbd/esc? event)] + (when esc? + (dom/blur! (dom/get-target event))))))] [:div.element-set.exports-options [:div.element-set-title @@ -156,7 +163,8 @@ [:option {:value "6"} "6x"]]) [:input.input-text {:value (:suffix export) :placeholder (tr "workspace.options.export.suffix") - :on-change (partial on-suffix-change index)}] + :on-change (partial on-suffix-change index) + :on-key-down manage-key-down}] [:select.input-select {:value (name (:type export)) :on-change (partial on-type-change index)} [:option {:value "png"} "PNG"]