Merge pull request #3680 from penpot/eva-redesign-prototype-tab

💄 Update prototype tab desgin with new UI

frontend/resources/images/icons/easing-ease-in-out-refactor.svg

@@ -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="M14 2C4.667 2 11.333 14 2 14"/>
+</svg>

frontend/resources/images/icons/easing-ease-in-refactor.svg

@@ -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 14c8.667 0 12-12 12-12"/>
+</svg>

frontend/resources/images/icons/easing-ease-out-refactor.svg

@@ -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="M14 2C5.333 2 2 14 2 14"/>
+</svg>

frontend/resources/images/icons/easing-ease-refactor.svg

@@ -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="M14 2C2 2 7.333 14 2 14"/>
+</svg>

frontend/resources/images/icons/easing-linear-refactor.svg

@@ -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.667 13.333L13.333 2.667"/>
+</svg>

frontend/resources/images/icons/interaction-refactor.svg

@@ -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="M5 7.833h6m0 0l-2.469-2.5M11 7.833l-2.469 2.5M8 15A7 7 0 108 1a7 7 0 000 14z"/>
+</svg>

frontend/resources/styles/common/refactor/basic-rules.scss

@@ -375,6 +375,37 @@
   }
 }
 
+.input-checkbox {
+  display: flex;
+  align-items: center;
+  label {
+    @include titleTipography;
+    display: flex;
+    align-items: center;
+    gap: $s-6;
+    cursor: pointer;
+    span {
+      @include flexCenter;
+      width: $s-16;
+      height: $s-16;
+      min-width: $s-16;
+      min-height: $s-16;
+      border-radius: $br-6;
+      background-color: var(--input-background-color);
+      &:global(.checked) {
+        background-color: var(--input-border-color-active);
+        svg {
+          @extend .button-icon-small;
+          stroke: var(--input-details-color);
+        }
+      }
+    }
+    input {
+      margin: 0;
+    }
+  }
+}
+
 //MODALS
 .modal-background {
   @include menuShadow;
@@ -467,8 +498,14 @@
     border-color: var(--colorpicker-details-color-selected);
   }
 }
-// SELECTS AND DROPDOWNS
 
+.attr-row {
+  display: grid;
+  grid-template-areas: "name content";
+  grid-template-columns: $s-92 1fr;
+}
+
+// SELECTS AND DROPDOWNS
 .menu-dropdown {
   @include menuShadow;
   position: absolute;

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

@@ -14,6 +14,8 @@
   --panel-background-color: var(--color-background-primary);
   --panel-title-background-color: var(--color-background-secondary);
 
+  // BUTTONS
+
   --button-foreground-hover: var(--color-accent-primary);
   --button-background-focus: var(--color-background-secondary);
   --button-foreground-focus: var(--color-foreground-primary);
@@ -84,6 +86,7 @@
   --constraint-widget-background-color: var(--color-background-tertiary);
   --constraint-center-area-background-color: var(--color-background-primary);
 
+  // ICONS
   --icon-foreground: var(--color-foreground-secondary);
   --icon-foreground-hover: var(--color-foreground-primary);
 

frontend/src/app/main/ui/components/select.cljs

@@ -19,8 +19,8 @@
 (defn- as-key-value
   [item]
   (if (map? item)
-    [(:value item) (:label item)]
+    [(:value item) (:label item) (:icon item)]
-    [item item]))
+    [item item item]))
 
 (mf/defc select
   [{:keys [default-value options class is-open? on-change on-pointer-enter-option on-pointer-leave-option disabled]}]
@@ -42,7 +42,7 @@
         open-dropdown
         (mf/use-fn
          (mf/deps disabled)
-         (fn[]
+         (fn []
            (when-not disabled
              (swap! state* assoc :is-open? true))))
 
@@ -82,10 +82,16 @@
 
     (mf/with-effect [default-value]
       (swap! state* assoc :current-value default-value))
+
     (if new-css-system
       [:div {:on-click open-dropdown
              :class (dm/str class " " (stl/css-case :custom-select true
                                                     :disabled disabled))}
+       (let [selected-option (first (filter #(= (:value %) default-value) options))
+             current-icon (:icon selected-option)
+             current-icon-ref (i/key->icon current-icon)]
+         (when (and current-icon current-icon-ref)
+           [:span {:class (stl/css :current-icon)} @current-icon-ref]))
        [:span {:class (stl/css :current-label)} current-label]
        [:span {:class (stl/css :dropdown-button)} i/arrow-refactor]
        [:& dropdown {:show is-open? :on-close close-dropdown}
@@ -94,7 +100,8 @@
            (if (= :separator item)
              [:li {:class (dom/classnames (stl/css :separator) true)
                    :key (dm/str current-id "-" index)}]
-             (let [[value label] (as-key-value item)]
+             (let [[value label icon] (as-key-value item)
+                   icon-ref (i/key->icon icon)]
                [:li
                 {:key (dm/str current-id "-" index)
                  :class (dom/classnames
@@ -104,10 +111,10 @@
                  :on-pointer-enter highlight-item
                  :on-pointer-leave unhighlight-item
                  :on-click select-item}
+                (when (and icon icon-ref) [:span {:class (stl/css :icon)} @icon-ref])
                 [:span {:class (stl/css :label)} label]
                 [:span {:class (stl/css :check-icon)} i/tick-refactor]])))]]]
 
-
       [:div.custom-select {:on-click open-dropdown :class class}
        [:span current-label]
        [:span.dropdown-button i/arrow-down]

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

@@ -24,6 +24,16 @@
     width: 100%;
     flex-grow: 1;
   }
+  .current-icon {
+    @include flexCenter;
+    height: $s-24;
+    width: $s-24;
+    padding-right: $s-4;
+    svg {
+      @extend .button-icon;
+      stroke: var(--icon-foreground);
+    }
+  }
   .dropdown-button {
     @include flexCenter;
     svg {
@@ -42,6 +52,17 @@
   .checked-element {
     @extend .dropdown-element-base;
 
+    .icon {
+      @include flexCenter;
+      height: $s-24;
+      width: $s-24;
+      padding-right: $s-4;
+      svg {
+        @extend .button-icon;
+        stroke: var(--icon-foreground);
+      }
+    }
+
     .label {
       flex-grow: 1;
       width: 100%;

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

@@ -7,7 +7,11 @@
 (ns app.main.ui.icons
   (:refer-clojure :exclude [import mask])
   (:require-macros [app.main.ui.icons :refer [icon-xref]])
-  (:require [rumext.v2 :as mf]))
+  (:require
+   [app.common.data :as d]
+   [rumext.v2 :as mf]))
+
+
 
 ;; Keep the list of icons sorted
 
@@ -320,6 +324,11 @@
 (def detach-refactor (icon-xref :detach-refactor))
 (def document-refactor (icon-xref :document-refactor))
 (def drop-refactor (icon-xref :drop-refactor))
+(def easing-linear-refactor (icon-xref :easing-linear-refactor))
+(def easing-ease-refactor (icon-xref :easing-ease-refactor))
+(def easing-ease-in-refactor (icon-xref :easing-ease-in-refactor))
+(def easing-ease-out-refactor (icon-xref :easing-ease-out-refactor))
+(def easing-ease-in-out-refactor (icon-xref :easing-ease-in-out-refactor))
 (def effects-refactor (icon-xref :effects-refactor))
 (def elipse-refactor (icon-xref :elipse-refactor))
 (def fill-content-refactor (icon-xref :fill-content-refactor))
@@ -348,6 +357,7 @@
 (def hug-content-refactor (icon-xref :hug-content-refactor))
 (def img-refactor (icon-xref :img-refactor))
 (def icon-refactor (icon-xref :icon-refactor))
+(def interaction-refactor (icon-xref :interaction-refactor))
 (def join-nodes-refactor (icon-xref :join-nodes-refactor))
 (def justify-content-column-around-refactor (icon-xref :justify-content-column-around-refactor))
 (def justify-content-column-between-refactor (icon-xref :justify-content-column-between-refactor))
@@ -466,3 +476,8 @@
        [:div.icon-item {:key key}
         (deref val)
         [:span (pr-str key)]]))])
+
+(defn key->icon
+  [icon-key]
+  (when icon-key
+    (get (ns-publics 'app.main.ui.icons) (symbol (d/name icon-key)))))

frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs

@@ -175,7 +175,7 @@
                     (and (= type :multiple) (some? (:hide-fill-on-export values))))
             [:div {:class (stl/css :checkbox)}
              [:label {:for "show-fill-on-export"
-                      :class (stl/css-case :checked (not hide-fill-on-export?))}
+                      :class (stl/css-case :global/checked (not hide-fill-on-export?))}
               [:span {:class (stl/css-case :check-mark true
                                            :checked (not hide-fill-on-export?))}
                (when (not hide-fill-on-export?)

frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss

@@ -38,35 +38,10 @@
       }
     }
     .checkbox {
-      display: flex;
+      @extend .input-checkbox;
-      align-items: center;
       margin-bottom: $s-8;
       margin-top: calc(-1 * $s-4);
       padding-left: $s-8;
-      input {
-        margin: 0;
-      }
-      label {
-        @include titleTipography;
-        display: flex;
-        align-items: center;
-        gap: $s-6;
-        cursor: pointer;
-        .check-mark {
-          @include flexCenter;
-          width: $s-16;
-          height: $s-16;
-          border-radius: $br-6;
-          background-color: var(--input-background-color);
-          &.checked {
-            background-color: var(--input-border-color-active);
-            svg {
-              @extend .button-icon-small;
-              stroke: var(--input-details-color);
-            }
-          }
-        }
-      }
     }
   }
 }

frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss

@@ -0,0 +1,244 @@
+// 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";
+
+.interactions-content {
+  display: flex;
+  flex-direction: column;
+  gap: $s-8;
+  .interaction-options {
+    display: flex;
+    flex-direction: column;
+    gap: $s-4;
+    .element-title {
+      .add-interaction-btn {
+        @extend .button-tertiary;
+        height: $s-32;
+        width: $s-28;
+        svg {
+          @extend .button-icon;
+          stroke: var(--icon-foreground);
+        }
+      }
+    }
+
+    .help-content {
+      .help-group {
+        margin-bottom: $s-40;
+        .interactions-help-icon {
+          @include flexCenter;
+          width: $s-48;
+          height: $s-48;
+          border-radius: $br-circle;
+          background-color: var(--pill-background-color);
+          margin: 0 auto $s-12 auto;
+          svg {
+            @extend .button-icon;
+            stroke: var(--icon-foreground);
+            height: $s-32;
+            width: $s-32;
+          }
+        }
+        .interactions-help {
+          @include titleTipography;
+          text-align: center;
+        }
+      }
+    }
+    .groups {
+      display: flex;
+      flex-direction: column;
+      gap: $s-4;
+      .element-set-options-group {
+        &.open {
+          display: flex;
+          flex-direction: column;
+          gap: $s-4;
+          .extended-options {
+            display: flex;
+            flex-direction: column;
+            gap: $s-4;
+            .property-row {
+              @extend .attr-row;
+              .interaction-name {
+                @include twoLineTextEllipsis;
+                @include titleTipography;
+                padding-left: $s-4;
+                width: $s-92;
+                margin: auto 0;
+                grid-area: name;
+              }
+              .select-wrapper {
+                display: flex;
+                align-items: center;
+                grid-area: content;
+              }
+              .input-element-wrapper {
+                @extend .input-element;
+                grid-area: content;
+              }
+              .checkbox-option {
+                @extend .input-checkbox;
+                grid-area: content;
+              }
+              .position-btns-wrapper {
+                grid-area: content;
+                display: grid;
+                grid-template-areas:
+                  "topleft top topright"
+                  "left center right"
+                  "bottomleft bottom bottomright";
+                grid-template-columns: repeat(3, 1fr);
+                grid-template-rows: repeat(3, 1fr);
+                width: $s-84;
+                height: $s-84;
+                border-radius: $br-8;
+                background-color: var(--color-background-tertiary);
+                .direction-btn {
+                  @extend .button-tertiary;
+                  height: $s-28;
+                  width: $s-28;
+                  .rectangle {
+                    height: $s-8;
+                    width: $s-8;
+                    background-color: var(--color-background-quaternary);
+                  }
+                  &:hover {
+                    .rectangle {
+                      background-color: var(--color-accent-primary);
+                    }
+                  }
+                  &.active {
+                    background-color: var(--color-background-quaternary);
+                    .rectangle {
+                      background-color: var(--color-accent-primary);
+                    }
+                  }
+                }
+                .center-btn {
+                  grid-area: center;
+                }
+                .top-left-btn {
+                  grid-area: topleft;
+                }
+                .top-right-btn {
+                  grid-area: topright;
+                }
+                .top-center-btn {
+                  grid-area: top;
+                }
+                .bottom-left-btn {
+                  grid-area: bottomleft;
+                }
+                .bottom-right-btn {
+                  grid-area: bottomright;
+                }
+                .bottom-center-btn {
+                  grid-area: bottom;
+                }
+              }
+              .buttons-wrapper {
+                grid-area: content;
+                .right svg {
+                  transform: rotate(-90deg);
+                }
+                .left svg {
+                  transform: rotate(90deg);
+                }
+                .up svg {
+                  transform: rotate(180deg);
+                }
+              }
+              .inputs-wrapper {
+                grid-area: content;
+                display: flex;
+                align-items: center;
+                gap: $s-4;
+                .radio-btn {
+                  @extend .input-checkbox;
+                }
+              }
+            }
+          }
+        }
+
+        .interactions-summary {
+          @extend .asset-element;
+          height: $s-44;
+          padding: 0;
+          gap: $s-4;
+          .extend-btn {
+            @extend .button-tertiary;
+            height: $s-32;
+            width: $s-28;
+            svg {
+              @extend .button-icon;
+            }
+          }
+
+          .interactions-info {
+            flex-grow: 1;
+            .trigger-name {
+              color: white;
+            }
+            .action-summary {
+              color: var(--color-foreground-secondary);
+            }
+          }
+          .remove-btn {
+            @extend .button-tertiary;
+            height: $s-32;
+            width: $s-28;
+            svg {
+              @extend .button-icon;
+            }
+          }
+        }
+      }
+    }
+  }
+  .element-set {
+    display: flex;
+    flex-direction: column;
+    gap: $s-4;
+    .add-flow-btn {
+      @extend .button-tertiary;
+      height: $s-32;
+      width: $s-28;
+      svg {
+        @extend .button-icon;
+      }
+    }
+  }
+}
+.flow-element {
+  @extend .asset-element;
+  padding: 0;
+  gap: $s-4;
+  .start-flow-btn {
+    @extend .button-tertiary;
+    height: $s-32;
+    width: $s-28;
+    svg {
+      @extend .button-icon;
+    }
+  }
+  .input-text {
+    @extend .input-base;
+  }
+  .flow-name-label {
+    flex-grow: 1;
+  }
+  .remove-flow-btn {
+    @extend .button-tertiary;
+    height: $s-32;
+    width: $s-28;
+    svg {
+      @extend .button-icon;
+    }
+  }
+}

frontend/translations/en.po

@@ -3676,6 +3676,10 @@ msgstr "Fill"
 msgid "workspace.options.flows.add-flow-start"
 msgstr "Add flow start"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.flows.flow"
+msgstr "Flow"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
 msgid "workspace.options.flows.flow-start"
 msgstr "Flow start"

frontend/translations/es.po

@@ -3763,6 +3763,10 @@ msgstr "Añadir inicio de flujo"
 msgid "workspace.options.flows.flow-start"
 msgstr "Inicio de flujo"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.flows.flow"
+msgstr "Flujo"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
 msgid "workspace.options.flows.flow-starts"
 msgstr "Inicios de flujo"