Merge remote-tracking branch 'origin/staging' into develop

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -229,7 +229,7 @@
   --assets-title-background-color: var(--color-background-primary);
   --assets-item-background-color: var(--color-background-tertiary);
   --assets-item-background-color-hover: var(--color-background-quaternary);
-  --assets-item-name-background-color: var(--db-secondary-80); // TODO: penpot file has a non-existing token
+  --assets-item-name-background-color: var(--color-background-primary);
   --assets-item-name-foreground-color-rest: var(--color-foreground-secondary);
   --assets-item-name-foreground-color: var(--color-foreground-primary);
   --assets-item-name-foreground-color-hover: var(--color-foreground-primary);
@@ -241,6 +241,7 @@
   --assets-component-background-color-disabled: var(--df-secondary;);
   --assets-component-border-color: var(--color-background-tertiary);
   --assets-component-border-selected: var(--color-accent-tertiary);
+  --assets-component-second-border-selected: var(--color-background-primary);
 
   --radio-btns-background-color: var(--color-background-tertiary);
   --radio-btn-background-color-selected: var(--color-background-quaternary);
@@ -434,7 +435,6 @@
   --button-icon-background-color-selected: var(--color-background-primary);
   --button-icon-border-color-selected: var(--color-background-secondary);
 
-  --assets-item-name-background-color: var(--color-background-primary);
   --assets-item-name-foreground-color: var(--color-foreground-primary);
 
   --text-editor-selection-background-color: var(--la-tertiary-70);

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

@@ -27,13 +27,16 @@
     (when show-all?
       [:div {:class (stl/css :terms-login)}
        (when show-terms?
-         [:a {:href cf/terms-of-service-uri :target "_blank"} (tr "auth.terms-of-service")])
+         [:a {:href cf/terms-of-service-uri :target "_blank" :class (stl/css :auth-link)}
+          (tr "auth.terms-of-service")])
 
        (when show-all?
-         [:span (dm/str "  " (tr "labels.and") "  ")])
+         [:span {:class (stl/css :and-text)}
+          (dm/str "  " (tr "labels.and") "  ")])
 
        (when show-privacy?
-         [:a {:href cf/privacy-policy-uri :target "_blank"} (tr "auth.privacy-policy")])])))
+         [:a {:href cf/privacy-policy-uri :target "_blank" :class (stl/css :auth-link)}
+          (tr "auth.privacy-policy")])])))
 
 (mf/defc auth
   {::mf/props :obj}

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

@@ -49,7 +49,7 @@
   gap: $s-24;
   height: fit-content;
   max-width: $s-412;
-  padding-bottom: $s-8;
+  padding-block-end: $s-8;
   position: relative;
   width: 100%;
 }
@@ -60,33 +60,32 @@
   left: $s-20;
   display: flex;
   justify-content: flex-start;
-  margin-bottom: $s-52;
   width: $s-120;
+  margin-block-end: $s-52;
 
   svg {
     width: $s-120;
     height: $s-40;
-    fill: $df-primary;
+    fill: var(--main-icon-foreground);
-    stroke: $df-primary;
   }
 }
 
 .terms-login {
-  font-size: $fs-11;
+  @include bodySmallTypography;
-  width: 100%;
   display: flex;
   gap: $s-4;
   justify-content: center;
+  width: 100%;
+}
 
-  a {
+.and-text {
-    font-weight: $fw700;
+  border-bottom: $s-1 solid transparent;
-    color: $da-primary;
+  color: var(--title-foreground-color);
+}
+
+.auth-link {
+  color: var(--link-foreground-color);
   &:hover {
     text-decoration: underline;
   }
-  }
-  span {
-    border-bottom: $s-1 solid transparent;
-    color: $df-secondary;
-  }
 }

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

@@ -177,8 +177,9 @@
         on-mount
         (fn []
           (let [dom (mf/ref-val ref)]
-            (.setAttribute dom "draggable" true) ;; In firefox it needs to be draggable for problems with event handling.
+            ;; In firefox it needs to be draggable for problems with event handling.
             ;; It will stop the drag operation in on-drag-start
+            (.setAttribute dom "draggable" (and draggable? (not disabled)))
 
             ;; Register all events in the (default) bubble mode, so that they
             ;; are captured by the most leaf item. The handler will stop

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

@@ -72,7 +72,9 @@
          (mf/deps project)
          (fn []
            (close-modals)
-           (st/emit! (dw/go-to-dashboard project))))
+           (st/emit! (dw/set-options-mode :design)
+                     (dw/set-workspace-read-only false)
+                     (dw/go-to-dashboard project))))
 
         nav-to-project
         (mf/use-fn

frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs

@@ -28,7 +28,7 @@
    [app.util.array :as array]
    [app.util.dom :as dom]
    [app.util.dom.dnd :as dnd]
-   [app.util.i18n :as i18n :refer [tr]]
+   [app.util.i18n :as i18n :refer [tr c]]
    [app.util.strings :refer [matches-search]]
    [app.util.timers :as ts]
    [cljs.spec.alpha :as s]
@@ -216,8 +216,8 @@
 (defn create-counter-element
   [asset-count]
   (let [counter-el (dom/create-element "div")]
-    (dom/set-property! counter-el "class" "drag-counter")
+    (dom/set-property! counter-el "class" (stl/css :drag-counter))
-    (dom/set-text! counter-el (str asset-count))
+    (dom/set-text! counter-el (tr "workspace.assets.sidebar.components" (c asset-count)))
     counter-el))
 
 (defn set-drag-image

frontend/src/app/main/ui/workspace/sidebar/assets/common.scss

@@ -45,3 +45,21 @@
 .asset-section.opened {
   margin-bottom: $s-12;
 }
+
+.drag-counter {
+  @include bodySmallTypography;
+  @include textEllipsis;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: calc($s-24 - $s-2);
+  background-color: var(--assets-item-name-background-color);
+  color: var(--assets-item-name-foreground-color);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin: $s-4;
+  padding-inline: $s-4;
+  z-index: 2;
+}

frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs

@@ -141,14 +141,16 @@
         on-context-menu
         (mf/use-fn
          (mf/deps on-context-menu component-id)
-         (partial on-context-menu component-id))]
+         (partial on-context-menu component-id))
+
+        renaming? (= renaming (:id component))]
 
     [:div {:ref item-ref
            :class (stl/css-case :selected (contains? selected (:id component))
                                 :grid-cell listing-thumbs?
                                 :enum-item (not listing-thumbs?))
            :id (dm/str "component-shape-id-" (:id component))
-           :draggable (not read-only?)
+           :draggable (and (not read-only?) (not renaming?))
            :on-click on-component-click
            :on-double-click on-component-double-click
            :on-context-menu on-context-menu
@@ -160,7 +162,6 @@
      (when (and (some? root-shape)
                 (some? container))
        [:*
-        (let [renaming? (= renaming (:id component))]
         [:*
          [:& editable-label
           {:class (stl/css-case :cell-name listing-thumbs?
@@ -175,7 +176,7 @@
            :on-cancel cancel-rename}]
 
          (when ^boolean dragging?
-             [:div {:class (stl/css :dragging)}])])
+           [:div {:class (stl/css :dragging)}])]
 
         (when visible?
           [:& cmm/component-item-thumbnail {:file-id file-id

frontend/src/app/main/ui/workspace/sidebar/assets/components.scss

@@ -35,12 +35,13 @@
     position: absolute;
     left: $s-4;
     bottom: $s-4;
-    height: $s-20;
+    height: calc($s-24 - $s-2);
     width: calc(100% - 2 * $s-4);
-    padding: $s-2;
+    padding: $s-2 $s-6;
     column-gap: $s-4;
-    border-radius: $br-2;
+    border-radius: $br-4;
     background-color: var(--assets-item-name-background-color);
+    border: $s-1 solid transparent;
     color: var(--assets-item-name-foreground-color);
     input {
       @include textEllipsis;
@@ -55,7 +56,7 @@
       height: 100%;
     }
     &.editing {
-      border: $s-1 solid var(--input-border-color-focus);
+      border-color: var(--input-border-color-focus);
       border-radius: $br-4;
       display: flex;
       align-items: center;
@@ -65,12 +66,24 @@
 
   &:hover {
     .cell-name {
-      display: block;
+      display: grid;
+      grid-template-columns: 1fr auto;
     }
   }
 
   &.selected {
-    border: $s-1 solid var(--assets-item-border-color);
+    border: $s-2 solid var(--assets-item-border-color);
+    &::before {
+      content: " ";
+      position: absolute;
+      z-index: $z-index-2;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border: $s-4 solid var(--assets-component-second-border-selected);
+      border-radius: $br-8;
+    }
   }
 }
 

frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs

@@ -196,6 +196,7 @@
         [:div {:class (stl/css :cap-select)}
          [:& select
           {:default-value (:stroke-cap-start stroke)
+           :dropdown-class (stl/css :stroke-cap-dropdown-start)
            :options stroke-caps-options
            :on-change on-caps-start-change}]]
 
@@ -206,5 +207,6 @@
         [:div {:class (stl/css :cap-select)}
          [:& select
           {:default-value (:stroke-cap-end stroke)
+           :dropdown-class (stl/css :stroke-cap-dropdown)
            :options stroke-caps-options
            :on-change on-caps-end-change}]]])]))

frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss

@@ -23,6 +23,19 @@
     .cap-select {
       width: $s-124;
     }
+    .stroke-cap-dropdown,
+    .stroke-cap-dropdown-start {
+      min-width: $s-124;
+      width: fit-content;
+      max-width: $s-252;
+      right: 0;
+      left: unset;
+    }
+
+    .stroke-cap-dropdown-start {
+      left: 0;
+      right: unset;
+    }
     .swap-caps-btn {
       @extend .button-secondary;
       height: $s-32;

frontend/translations/en.po

@@ -3711,6 +3711,12 @@ msgstr "Swap component"
 msgid "workspace.options.component.swap.empty"
 msgstr "There are no assets in this library yet"
 
+#: src/app/main/ui/workspace/sidebar/assets/common.cljs
+msgid "workspace.assets.sidebar.components"
+msgid_plural "workspace.assets.sidebar.components"
+msgstr[0] "1 component"
+msgstr[1] "%s components"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
 msgid "workspace.options.constraints"
 msgstr "Constraints"

frontend/translations/es.po

@@ -3711,6 +3711,12 @@ msgstr "Desvincular todas las tipografías"
 msgid "workspace.libraries.typography"
 msgstr "%s tipografías"
 
+#: src/app/main/ui/workspace/sidebar/assets/common.cljs
+msgid "workspace.assets.sidebar.components"
+msgid_plural "workspace.assets.sidebar.components"
+msgstr[0] "1 componente"
+msgstr[1] "%s componentes"
+
 #: src/app/main/ui/workspace/libraries.cljs
 msgid "workspace.libraries.update"
 msgstr "Actualizar"