Merge pull request #3882 from penpot/alotor-new-ui-fixes

New UI Fixes

frontend/src/app/main/ui/components/forms.scss

@@ -31,6 +31,7 @@
       margin-top: 0;
       width: 100%;
       height: 100%;
+      padding: 0 $s-16;
 
       &:focus {
         outline: none;
@@ -82,7 +83,7 @@
   position: relative;
   width: var(--input-width, calc(100% - $s-1));
   min-width: var(--input-min-width);
-  height: var(--input-height, $s-32);
+  height: var(--input-height, $s-40);
 }
 
 .help-icon {

frontend/src/app/main/ui/dashboard.scss

@@ -25,4 +25,6 @@
   position: relative;
   grid-row: 1 / span 2;
   padding: $s-16 $s-16 0 0;
+  overflow: hidden;
+  width: 100%;
 }

frontend/src/app/main/ui/dashboard/grid.cljs

@@ -459,6 +459,7 @@
        [:button
         {:class (stl/css-case :selected selected? :library library-view?)
          :ref node-ref
+         :title (:name file)
          :draggable true
          :on-click on-select
          :on-key-down handle-key-down
@@ -634,20 +635,17 @@
          [:& loading-placeholder]
 
          (seq files)
-         [:ul
+         (for [slice (partition-all limit files)]
-          {:class (stl/css :grid-row)
+           [:ul {:class (stl/css :grid-row)}
-           :style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
+            (when @dragging?
-
+              [:li {:class (stl/css :grid-item)}])
-          (when @dragging?
+            (for [item slice]
-            [:li {:class (stl/css :grid-item)}])
+              [:& grid-item
-
+               {:file item
-          (for [item files]
+                :key (:id item)
-            [:& grid-item
+                :navigate? true
-             {:file item
+                :origin origin
-              :key (:id item)
+                :library-view? library-view?}])])
-              :navigate? true
-              :origin origin
-              :library-view? library-view?}])]
 
          :else
          [:& empty-placeholder

frontend/src/app/main/ui/dashboard/grid.scss

@@ -6,17 +6,21 @@
 
 @import "refactor/common-refactor.scss";
 
+$thumbnail-default-width: $s-252; // Default width
+$thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
+
 .dashboard-grid {
   font-size: $fs-14;
   height: 100%;
   overflow-y: auto;
-  overflow: hidden;
+  overflow-x: hidden;
+  padding: 0 $s-16;
 }
 
 .grid-row {
-  display: grid;
+  display: flex;
   width: 100%;
-  padding: 0 $s-12;
+  gap: $s-24;
 }
 
 .grid-item {
@@ -24,9 +28,7 @@
   cursor: pointer;
   display: flex;
   flex-direction: column;
-  flex: 1 0 $s-260;
+  margin: $s-12 0;
-  height: $s-232;
-  margin: $s-12 $s-16 $s-16 $s-8;
   position: relative;
   text-align: center;
 
@@ -38,16 +40,14 @@
   button {
     background-color: transparent;
     border: none;
-  }
+    padding: 0 $s-6;
-
-  @media #{$bp-max-1366} {
-    height: $s-200;
-    flex: 1 0 $s-232;
   }
 
   .grid-item-th {
     border-radius: $br-4;
     text-align: initial;
+    width: var(--th-width, #{$thumbnail-default-width});
+    height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration});
 
     img {
       object-fit: contain;
@@ -56,9 +56,10 @@
 
   &.dragged {
     border-radius: $br-4;
-    border: $br-2 solid $da-primary;
+    outline: $br-4 solid $da-primary;
     text-align: initial;
-    max-height: $s-160;
+    width: calc(var(--th-width) + $s-12);
+    height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration});
   }
 
   &.overlay {
@@ -81,6 +82,7 @@
     display: grid;
     grid-template-columns: 1fr auto;
     cursor: pointer;
+    max-width: var(--th-width, $thumbnail-default-width);
   }
 
   .item-info {
@@ -198,7 +200,7 @@
 
   .selected {
     .grid-item-th {
-      border: 2px solid $da-tertiary;
+      outline: $s-4 solid $da-tertiary;
     }
   }
 }
@@ -261,8 +263,7 @@
   background-size: auto 80%;
   background-repeat: no-repeat;
 
-  height: $s-232;
+  height: 100%;
-  max-height: $s-160;
   overflow: hidden;
   position: relative;
   width: 100%;
@@ -294,7 +295,6 @@
 
 .grid-item.project-th.library {
   height: $s-612;
-  width: $s-300;
 }
 
 .grid-item-th.library {
@@ -302,7 +302,7 @@
   flex-direction: column;
   height: 90%;
   justify-content: flex-start;
-  max-height: 550px;
+  max-height: $s-580;
   padding: $s-32;
 
   .asset-section {

frontend/src/app/main/ui/dashboard/libraries.cljs

@@ -51,10 +51,10 @@
 
     (if new-css-system
       [:*
-       [:header {:class (stl/css :dashboard-header) :ref rowref}
+       [:header {:class (stl/css :dashboard-header)}
         [:div#dashboard-libraries-title {:class (stl/css :dashboard-title)}
          [:h1 (tr "dashboard.libraries-title")]]]
-       [:section {:class (stl/css :dashboard-container :no-bg :dashboard-shared)}
+       [:section {:class (stl/css :dashboard-container :no-bg :dashboard-shared)  :ref rowref}
         [:& grid {:files files
                   :project default-project
                   :origin :libraries

frontend/src/app/main/ui/dashboard/libraries.scss

@@ -17,10 +17,6 @@
   &.dashboard-projects {
     user-select: none;
   }
-  &.dashboard-shared {
-    width: calc(100vw - $s-320);
-    margin-right: $s-52;
-  }
 
   &.search {
     margin-top: $s-12;

frontend/src/app/main/ui/dashboard/placeholder.cljs

@@ -36,8 +36,7 @@
 
         :else
         [:div
-         {:class (stl/css :grid-empty-placeholder)
+         {:class (stl/css :grid-empty-placeholder)}
-          :style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
          [:button {:class (stl/css :create-new)
                    :on-click on-click}
           i/add-refactor]])

frontend/src/app/main/ui/dashboard/placeholder.scss

@@ -5,14 +5,12 @@
 // Copyright (c) KALEIDOS INC
 
 @use "common/refactor/common-refactor.scss" as *;
-@use "./grid.scss";
+@use "./grid.scss" as g;
 
 .grid-empty-placeholder {
   border-radius: $br-12;
   display: grid;
-  padding: $s-12;
+  padding: $s-12 0;
-  margin-right: $s-12;
-  height: $s-232;
 
   &.loader {
     justify-items: center;
@@ -66,6 +64,8 @@
     margin: $s-8;
     text-transform: uppercase;
     border: $s-2 solid transparent;
+    width: var(--th-width, #{g.$thumbnail-default-width});
+    height: calc(var(--th-width, #{g.$thumbnail-default-width}) * #{g.$thumbnail-aspect-ration});
 
     svg {
       width: $s-32;

frontend/src/app/main/ui/dashboard/projects.cljs

@@ -246,7 +246,6 @@
                                   :edition? (= (:id project) edit-id)})
 
         [rowref limit] (hooks/use-dynamic-grid-item-width)
-
         on-nav
         (mf/use-fn
          (mf/deps project-id team-id)
@@ -344,7 +343,7 @@
 
     (if new-css-system
       [:article {:class (stl/css-case :dashboard-project-row true :first first?)}
-       [:header {:class (stl/css :project) :ref rowref}
+       [:header {:class (stl/css :project)}
         [:div {:class (stl/css :project-name-wrapper)}
          (if (:edition? @local)
            [:& inline-edition {:content (:name project)
@@ -403,12 +402,13 @@
             :on-key-down handle-menu-click}
            i/actions]]]]
 
-       [:& line-grid
+       [:div {:class (stl/css :grid-container) :ref rowref}
-        {:project project
+        [:& line-grid
-         :team team
+         {:project project
-         :files files
+          :team team
-         :create-fn create-file
+          :files files
-         :limit limit}]
+          :create-fn create-file
+          :limit limit}]]
 
        (when (and (> limit 0)
                   (> file-count limit))

frontend/src/app/main/ui/dashboard/projects.scss

@@ -145,6 +145,11 @@
     }
   }
 
+  .grid-container {
+    width: 100%;
+    padding: 0 $s-4;
+  }
+
   &:hover,
   &:focus,
   &:focus-within {

frontend/src/app/main/ui/dashboard/sidebar.scss

@@ -321,7 +321,7 @@
     width: $s-32;
 
     position: absolute;
-    top: $s-12;
+    top: calc(50% - $s-12);
     right: $s-2;
 
     svg {

frontend/src/app/main/ui/dashboard/team.scss

@@ -623,6 +623,10 @@
     height: $s-32;
     border-radius: $br-8;
     background-color: var(--alert-background-color-warning);
+    padding: $s-24 $s-8;
+    gap: $s-8;
+    margin-bottom: $s-16;
+
     .icon {
       @include flexCenter;
       width: $s-16;

frontend/src/app/main/ui/hooks.cljs

@@ -1,3 +1,4 @@
+
 ;; 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/.
@@ -350,9 +351,7 @@
 (defn use-dynamic-grid-item-width
   ([] (use-dynamic-grid-item-width nil))
   ([itemsize]
-   (let [;; NOTE: we pass a function to use-state for avoid repeatedly
+   (let [width*   (mf/use-state nil)
-         ;; lookup `:items-width` on storage on each render
-         width*   (mf/use-state #(:items-width @storage))
          width    (deref width*)
 
          rowref   (mf/use-ref)
@@ -365,20 +364,27 @@
          ratio    (if (some? width) (/ width itemsize) 0)
          nitems   (mth/floor ratio)
          limit    (mth/min 10 nitems)
-         limit    (mth/max 1 limit)]
+         limit    (mth/max 1 limit)
+
+         th-size (when width
+                   (- (/ (- width 32 (* (dec limit) 24)) limit) 12))]
+
+     (mf/with-effect
+       [th-size]
+       (when th-size
+         (let [node (mf/ref-val rowref)]
+           (.setProperty (.-style node) "--th-width" (str th-size "px")))))
 
      (mf/with-effect []
        (let [node (mf/ref-val rowref)
              mnt? (volatile! true)
              sub  (->> (wapi/observe-resize node)
-                       (rx/observe-on :af)
                        (rx/subs (fn [entries]
                                   (let [row       (first entries)
                                         row-rect  (.-contentRect ^js row)
                                         row-width (.-width ^js row-rect)]
                                     (when @mnt?
-                                      (reset! width* row-width)
+                                      (reset! width* row-width))))))]
-                                      (swap! storage assoc :items-width row-width))))))]
          (fn []
            (vreset! mnt? false)
            (rx/dispose! sub))))

frontend/src/app/main/ui/settings/profile.scss

@@ -48,7 +48,7 @@
   }
 
   .fields-row {
-    --input-height: $s-40;
+    --input-height: #{$s-40};
     margin-bottom: $s-20;
     flex-direction: column;
 

frontend/src/app/main/ui/workspace.cljs

@@ -81,7 +81,8 @@
         node-ref (use-resize-observer on-resize)]
     [:*
      (if new-css-system
-       [:& palette {:layout layout}]
+       (when (not hide-ui?)
+         [:& palette {:layout layout}])
        [:*
         (when (and colorpalette? (not hide-ui?))
           [:& colorpalette])

frontend/src/app/main/ui/workspace/viewport/top_bar.cljs

@@ -5,6 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.viewport.top-bar
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.common.files.helpers :as cfh]
    [app.common.types.shape.layout :as ctl]
@@ -18,6 +19,35 @@
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
+(mf/defc view-only-actions
+  []
+  (let [new-css-system  (mf/use-ctx ctx/new-css-system)
+        handle-close-view-mode
+        (mf/use-callback
+         (fn []
+           (st/emit! :interrupt
+                     (dw/set-options-mode :design)
+                     (dw/set-workspace-read-only false))))]
+    (if new-css-system
+      [:div {:class (stl/css :viewport-actions)}
+       [:div {:class (stl/css :viewport-actions-container)}
+        [:div {:class (stl/css :viewport-actions-title)}
+         [:& i18n/tr-html {:tag-name "span"
+                           :label "workspace.top-bar.read-only"}]]
+        [:button {:class (stl/css :done-btn)
+                  :on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]
+        [:button {:class (stl/css :close-btn)
+                  :on-click handle-close-view-mode} i/close-refactor]]]
+
+      ;; OLD
+      [:div.viewport-actions
+       [:div.viewport-actions-container
+        [:div.viewport-actions-title
+         [:& i18n/tr-html {:tag-name "span"
+                           :label "workspace.top-bar.read-only"}]]
+        [:button.btn-primary {:on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]
+        [:button.btn-icon-basic {:on-click handle-close-view-mode} i/close]]])))
+
 (mf/defc top-bar
   {::mf/wrap [mf/memo]}
   []
@@ -40,24 +70,11 @@
                                     (not (cfh/frame-shape? shape))))
                           draw-path?)
 
-        grid-edition? (and single? editing? (ctl/grid-layout? shape))
+        grid-edition? (and single? editing? (ctl/grid-layout? shape))]
-
-        handle-close-view-mode
-        (mf/use-callback
-         (fn []
-           (st/emit! :interrupt
-                     (dw/set-options-mode :design)
-                     (dw/set-workspace-read-only false))))]
 
     (cond
       workspace-read-only?
-      [:div.viewport-actions
+      [:& view-only-actions]
-       [:div.viewport-actions-container
-        [:div.viewport-actions-title
-         [:& i18n/tr-html {:tag-name "span"
-                           :label "workspace.top-bar.read-only"}]]
-        [:button.btn-primary {:on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]
-        [:button.btn-icon-basic {:on-click handle-close-view-mode} i/close]]]
 
       path-edition?
       [:div.viewport-actions

frontend/src/app/main/ui/workspace/viewport/top_bar.scss

@@ -0,0 +1,47 @@
+// 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";
+
+.viewport-actions {
+  pointer-events: none;
+  position: absolute;
+  top: $s-44;
+  left: 50%;
+
+  .viewport-actions-container {
+    @include flexRow;
+    background: var(--panel-background-color);
+    border-radius: $br-12;
+    box-shadow: 0 0 $s-12 0 var(--menu-shadow-color);
+    gap: $s-8;
+    height: $s-48;
+    margin-left: -50%;
+    padding: $s-8;
+    pointer-events: initial;
+    width: $s-512;
+  }
+
+  .viewport-actions-title {
+    flex: 1;
+    font-size: $fs-12;
+    color: var(--color-foreground-secondary);
+    padding-left: $s-8;
+  }
+
+  .done-btn {
+    @extend .button-primary;
+    text-transform: uppercase;
+    padding: $s-8 $s-20;
+    font-size: $fs-11;
+  }
+  .close-btn {
+    @extend .button-tertiary;
+    svg {
+      @extend .button-icon;
+    }
+  }
+}