Merge pull request #2748 from penpot/eva-workspace-visual-changes

Bugfixing

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;

frontend/resources/styles/main/partials/colorpicker.scss

@@ -522,6 +522,7 @@
       &:focus {
         border-color: $color-primary !important;
         color: $color-white;
+        outline: none;
       }
 
       &:hover {

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 {

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 {

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;

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;
   }

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 {
@@ -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;

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;

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;

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;
+      }
     }
   }
 }

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 {
@@ -225,7 +239,6 @@ span.element-name {
   margin-left: auto;
   position: relative;
   width: 32px;
-  right: 20px;
 
   &.is-parent {
     right: 0;
@@ -306,12 +319,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 +336,9 @@ span.element-name {
           color: $color-white;
           font-size: 12px;
           height: 16px;
+          &:focus {
+            outline: none;
+          }
         }
         span {
           height: 16px;

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;

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;
+      }
     }
   }
 

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

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

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]

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)

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")]
 

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]

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]

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]]

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"]

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?