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

frontend/gulpfile.js

@@ -2,6 +2,9 @@ import fs from "fs";
 import l from "lodash";
 import path from "path";
 
+
+import log from 'fancy-log';
+
 import gulp from "gulp";
 import gulpConcat from "gulp-concat";
 import gulpGzip from "gulp-gzip";
@@ -25,15 +28,9 @@ import { rimraf } from "rimraf";
 
 import gettext from "gettext-parser";
 import * as marked from "marked";
-import cache from "gulp-cached";
 
 import mapStream from "map-stream";
 
-const paths = {};
-paths.resources = "./resources/";
-paths.output = "./resources/public/";
-paths.dist = "./target/dist/";
-
 /***********************************************
  * Marked Extensions
  ***********************************************/
@@ -147,7 +144,7 @@ function readLocales() {
 
 function readManifest() {
   try {
-    const manifestPath = path.resolve("resources/public/js/manifest.json");
+    const manifestPath = path.resolve("./resources/public/js/manifest.json");
     const content = JSON.parse(fs.readFileSync(manifestPath, { encoding: "utf8" }));
 
     const index = {
@@ -175,17 +172,49 @@ function readManifest() {
 
 function touch() {
   return mapStream(function (file, cb) {
+    // console.log("touch", file.path);
     if (file.isNull()) {
       return cb(null, file);
+    } else {
+      // Update file modification and access time
+      return fs.utimes(file.path, new Date(), new Date(), () => {
+        // console.log("touched", file.path);
+        cb(null, file);
+      });
     }
-
-    // Update file modification and access time
-    return fs.utimes(file.path, new Date(), new Date(), () => {
-      cb(null, file);
-    });
   });
 }
 
+let cacheStore = {}
+
+function cache(name){
+  if (!cacheStore[name]) {
+    cacheStore[name] = {};
+  }
+
+  return mapStream(function(file, callback) {
+    if (file.isNull()) {
+      return callback(null, file);
+    } else if (file.isStream()) {
+      return callback(null, file);
+    } else {
+      const mtime = file.stat.mtime.getTime();
+      const existingMtime = cacheStore[name][file.path];
+
+      // hit - ignore it
+      if (existingMtime !== undefined && existingMtime === mtime) {
+        callback();
+      } else {
+        log.info(`Change detected on '${file.path}'`);
+
+        // miss - add it and pass it through
+        cacheStore[name][file.path] = mtime;
+        callback(null, file);
+      }
+    }
+  });
+};
+
 function templatePipeline(options) {
   return function () {
     const input = options.input;
@@ -227,7 +256,7 @@ gulp.task("scss:modules", function () {
         .sync({ includePaths: ["./resources/styles/common/", "./resources/styles/"] })
         .on("error", gulpSass.logError),
     )
-    .pipe(cache("modules"))
+    .pipe(cache("css"))
     .pipe(
       gulpPostcss([
         modules({
@@ -247,11 +276,12 @@ gulp.task("scss:modules", function () {
         autoprefixer(),
       ]),
     )
-    .pipe(gulp.dest(paths.output + "css/"));
+    .pipe(gulp.dest("./resources/public/css/"));
 });
 
 gulp.task("scss:main", function () {
-  const sources = [`${paths.resources}styles/main-default.scss`, `${paths.resources}styles/debug.scss`];
+  const sources = ["./resources/styles/main-default.scss",
+                   "./resources/styles/debug.scss"];
 
   return gulp
     .src(sources)
@@ -261,48 +291,53 @@ gulp.task("scss:main", function () {
       }),
     )
     .pipe(gulpPostcss([autoprefixer]))
-    .pipe(gulp.dest(paths.output + "css/"));
+    .pipe(gulp.dest("./resources/public/css/"));
 });
 
 gulp.task("scss:concat", function () {
   return gulp
-    .src([paths.output + "css/main-default.css", paths.output + "css/app/**/*.css"])
+    .src(["./resources/public/css/main-default.css",
+          "./resources/public/css/app/**/*.css"])
     .pipe(gulpConcat("main.tmp.css"), { rebaseUrls: false })
-    .pipe(gulp.dest(paths.output + ".tmp/"));
+    .pipe(gulp.dest("./resources/public/.tmp/"));
 });
 
-gulp.task("scss:touch", function () {
+gulp.task("scss:touch:main", function () {
   return gulp
-    .src([paths.output + ".tmp/main.tmp.css"])
+    .src(["./resources/public/.tmp/main.tmp.css"])
     .pipe(rename("main.css"))
-    .pipe(gulp.dest(paths.output + "css/"))
+    .pipe(gulp.dest("./resources/public/css/"))
     .pipe(touch());
 });
 
-gulp.task("scss", gulp.series("scss:main", "scss:modules", "scss:concat", "scss:touch"));
+gulp.task("scss:touch:modules", function() {
+  return gulp.src("src/**/**.scss").pipe(touch());
+});
+
+gulp.task("scss", gulp.series("scss:main", "scss:modules", "scss:concat", "scss:touch:main"));
 
 gulp.task("svg:sprite:icons", function () {
   return gulp
-    .src(paths.resources + "images/icons/*.svg")
+    .src("./resources/images/icons/*.svg")
     .pipe(gulpRename({ prefix: "icon-" }))
     .pipe(svgSprite({ mode: { symbol: { inline: true, sprite: "icons.svg" } } }))
-    .pipe(gulp.dest(paths.output + "images/sprites/"));
+    .pipe(gulp.dest("./resources/public/images/sprites/"));
 });
 
 gulp.task("svg:sprite:cursors", function () {
   return gulp
-    .src(paths.resources + "images/cursors/*.svg")
+    .src("./resources/images/cursors/*.svg")
     .pipe(gulpRename({ prefix: "cursor-" }))
     .pipe(svgSprite({ mode: { symbol: { inline: true, sprite: "cursors.svg" } } }))
-    .pipe(gulp.dest(paths.output + "images/sprites/"));
+    .pipe(gulp.dest("./resources/public/images/sprites/"));
 });
 
 gulp.task(
   "template:main",
   templatePipeline({
     name: "index.html",
-    input: paths.resources + "templates/index.mustache",
+    input: "./resources/templates/index.mustache",
-    output: paths.output,
+    output: "./resources/public/",
   }),
 );
 
@@ -310,7 +345,7 @@ gulp.task(
   "template:storybook",
   templatePipeline({
     name: "preview-body.html",
-    input: paths.resources + "templates/preview-body.mustache",
+    input: "./resources/templates/preview-body.mustache",
     output: "./.storybook/",
   }),
 );
@@ -319,8 +354,8 @@ gulp.task(
   "template:render",
   templatePipeline({
     name: "render.html",
-    input: paths.resources + "templates/render.mustache",
+    input: "./resources/templates/render.mustache",
-    output: paths.output,
+    output: "./resources/public/",
   }),
 );
 
@@ -328,8 +363,8 @@ gulp.task(
   "template:rasterizer",
   templatePipeline({
     name: "rasterizer.html",
-    input: paths.resources + "templates/rasterizer.mustache",
+    input: "./resources/templates/rasterizer.mustache",
-    output: paths.output,
+    output: "./resources/public/",
   }),
 );
 
@@ -347,17 +382,17 @@ gulp.task(
 
 gulp.task("polyfills", function () {
   return gulp
-    .src(paths.resources + "polyfills/*.js")
+    .src("./resources/polyfills/*.js")
     .pipe(gulpConcat("polyfills.js"))
-    .pipe(gulp.dest(paths.output + "js/"));
+    .pipe(gulp.dest("./resources/public/js/"));
 });
 
 gulp.task("copy:assets:images", function () {
-  return gulp.src(paths.resources + "images/**/*").pipe(gulp.dest(paths.output + "images/"));
+  return gulp.src("./resources/images/**/*").pipe(gulp.dest("./resources/public/images/"));
 });
 
 gulp.task("copy:assets:fonts", function () {
-  return gulp.src(paths.resources + "fonts/**/*").pipe(gulp.dest(paths.output + "fonts/"));
+  return gulp.src("./resources/fonts/**/*").pipe(gulp.dest("./resources/public/fonts/"));
 });
 
 gulp.task("copy:assets", gulp.parallel("copy:assets:images", "copy:assets:fonts"));
@@ -369,20 +404,18 @@ gulp.task("dev:dirs", async function (next) {
 });
 
 gulp.task("watch:main", function () {
-  const watchTask = gulp.watch("src/**/**.scss", gulp.series("scss"));
+  gulp.watch("./src/**/**.scss", {delay:1000}, gulp.series("scss"));
-
+  gulp.watch("./resources/styles/**/**.scss", {delay: 100}, gulp.series("scss:touch:modules"));
-  gulp.watch(paths.resources + "styles/**/**.scss", gulp.series("scss"));
+  gulp.watch("./resources/images/**/*", gulp.series("copy:assets:images"));
-  gulp.watch(paths.resources + "images/**/*", gulp.series("copy:assets:images"));
+  gulp.watch(["./resources/templates/*.mustache", "translations/*.po"], gulp.series("templates"));
-
-  gulp.watch([paths.resources + "templates/*.mustache", "translations/*.po"], gulp.series("templates"));
 });
 
 gulp.task("clean:output", function (next) {
-  rimraf(paths.output).finally(next);
+  rimraf("./resources/public/").finally(next);
 });
 
 gulp.task("clean:dist", function (next) {
-  rimraf(paths.dist).finally(next);
+  rimraf("./target/dist/").finally(next);
 });
 
 gulp.task("build:styles", gulp.parallel("scss"));
@@ -391,5 +424,5 @@ gulp.task("build:assets", gulp.parallel("polyfills", "templates", "copy:assets")
 gulp.task("watch", gulp.series("dev:dirs", "build:styles", "build:assets", "watch:main"));
 
 gulp.task("build:copy", function () {
-  return gulp.src(paths.output + "**/*").pipe(gulp.dest(paths.dist));
+  return gulp.src("./resources/public/**/*").pipe(gulp.dest("./target/dist/"));
 });

frontend/package.json

@@ -51,9 +51,9 @@
     "animate.css": "^4.1.1",
     "autoprefixer": "^10.4.16",
     "concurrently": "^8.2.2",
+    "fancy-log": "^2.0.0",
     "gettext-parser": "^7.0.1",
     "gulp": "4.0.2",
-    "gulp-cached": "^1.1.1",
     "gulp-concat": "^2.6.1",
     "gulp-gzip": "^1.4.2",
     "gulp-mustache": "^5.0.0",

frontend/resources/styles/common/refactor/color-defs.scss

@@ -11,6 +11,7 @@
   --dark-gray-1: #1d1f20;
   --dark-gray-2: #000000;
   --dark-gray-2-30: rgba(0, 0, 0, 0.3);
+  --dark-gray-2-80: rgba(0, 0, 0, 0.8);
   --dark-gray-3: #292c2d;
   --dark-gray-4: #34393b;
   --white: #fff;

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

@@ -200,6 +200,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(--dark-gray-2-80); // TODO: penpot file has a non-existing token
   --assets-item-name-foreground-color: var(--color-foreground-secondary);
   --assets-item-name-foreground-color-hover: var(--color-foreground-primary);
   --assets-item-name-foreground-color-disabled: var(--color-foreground-disabled);

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

@@ -23,6 +23,9 @@
         editing?          (unchecked-get props "editing")
         dbl-click?        (unchecked-get props "disable-dbl-click")
         class             (unchecked-get props "class")
+        tooltip           (unchecked-get props "tooltip")
+        display-value           (unchecked-get props "display-value")
+
 
         final-class       (dm/str class " " (stl/css :editable-label))
         input-ref         (mf/use-ref nil)
@@ -82,15 +85,21 @@
       (when (and editing? (not internal-editing?))
         (start-edition)))
 
-    [:div {:class final-class}
+    (if ^boolean internal-editing?
-     [:input
+      [:div {:class final-class}
-      {:class (stl/css :editable-label-input)
+       [:input
-       :ref input-ref
+        {:class (stl/css :editable-label-input)
-       :default-value value
+         :ref input-ref
-       :on-key-up on-key-up
+         :default-value value
-       :on-double-click on-dbl-click
+         :on-key-up on-key-up
-       :on-blur cancel-edition}]
+         :on-double-click on-dbl-click
+         :on-blur cancel-edition}]
 
-     [:span {:class (stl/css :editable-label-close)
+       [:span {:class (stl/css :editable-label-close)
-             :on-click cancel-edition}
+               :on-click cancel-edition}
-      i/delete-text-refactor]]))
+        i/delete-text-refactor]]
+
+      [:span {:class final-class
+              :title tooltip
+              :on-double-click on-dbl-click}
+       display-value])))

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

@@ -86,10 +86,8 @@
           (when-not (get-in @form [:touched input-name])
             (swap! form assoc-in [:touched input-name] true)))
 
-
-
         props (-> props
-                  (dissoc :help-icon :form :trim :children)
+                  (dissoc :help-icon :form :trim :children :show-success?)
                   (assoc :id (name input-name)
                          :value value
                          :auto-focus auto-focus?
@@ -152,8 +150,6 @@
          [:> :input props]
          children])
 
-
-
       (cond
         (and touched? (:message error))
         [:div {:id (dm/str "error-" input-name)
@@ -291,20 +287,17 @@
 
 (mf/defc submit-button*
   {::mf/wrap-props false}
-  [props]
+  [{:keys [on-click children label form class-name name disabled] :as props}]
-  (let [form      (or (unchecked-get props "form")
+  (let [form      (or form (mf/use-ctx form-ctx))
-                      (mf/use-ctx form-ctx))
-
-        label     (unchecked-get props "label")
-        on-click  (unchecked-get props "onClick")
-        children  (unchecked-get props "children")
-
-        class     (d/nilv (unchecked-get props "className") "btn-primary btn-large")
-        name      (d/nilv (unchecked-get props "name") "submit")
 
         disabled? (or (and (some? form) (not (:valid @form)))
-                      (true? (unchecked-get props "disabled")))
+                      (true? disabled))
-        new-klass (dm/str class " " (if disabled? (stl/css :btn-disabled) ""))
+
+        class     (dm/str (d/nilv class-name "btn-primary btn-large")
+                          " "
+                          (if disabled? (stl/css :btn-disabled) ""))
+
+        name      (d/nilv name "submit")
 
         on-key-down
         (mf/use-fn
@@ -313,14 +306,15 @@
            (when (and (kbd/enter? event) (fn? on-click))
              (on-click event))))
 
-        props     (-> (obj/clone props)
+        props
-                      (obj/unset! "children")
+        (-> (obj/clone props)
-                      (obj/set! "disabled" disabled?)
+            (obj/set! "children" mf/undefined)
-                      (obj/set! "onKeyDown" on-key-down)
+            (obj/set! "disabled" disabled?)
-                      (obj/set! "name" name)
+            (obj/set! "onKeyDown" on-key-down)
-                      (obj/set! "label" mf/undefined)
+            (obj/set! "name" name)
-                      (obj/set! "className" new-klass)
+            (obj/set! "label" mf/undefined)
-                      (obj/set! "type" "submit"))]
+            (obj/set! "className" class)
+            (obj/set! "type" "submit"))]
 
     [:> "button" props
      (if (some? children)
@@ -331,6 +325,7 @@
   {::mf/wrap-props false}
   [{:keys [on-submit form children class]}]
   (let [on-submit' (mf/use-fn
+                    (mf/deps on-submit)
                     (fn [event]
                       (dom/prevent-default event)
                       (when (fn? on-submit)

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

@@ -36,7 +36,7 @@
         encode-fn  (unchecked-get context "encode-fn")
         checked?   (= selected value)]
 
-    [:label {:for id
+    [:label {:html-for id
              :title title
              :key unique-key
              :class (stl/css-case
@@ -104,6 +104,3 @@
      [:div {:class (dm/str class " " (stl/css :radio-btn-wrapper))
             :style {:width width}}
       children]]))
-
-
-

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

@@ -57,8 +57,10 @@
          (mf/deps exports)
          (fn [event]
            (let [index (-> (dom/get-current-target event)
-                           (dom/get-data "value"))]
+                           (dom/get-data "value")
-             (swap! exports update-in [index :enabled] not))))
+                           (d/parse-integer))]
+             (when (some? index)
+               (swap! exports update-in [index :enabled] not)))))
 
         change-all
         (fn [_]
@@ -104,7 +106,7 @@
                  [:div {:class (stl/css :selection-row)
                         :key (:id shape)}
                   [:button {:class (stl/css :selection-btn)
-                            :data-value index
+                            :data-value (str index)
                             :on-click on-toggle-enabled}
                    [:span {:class (stl/css :checkbox-wrapper)}
                     (if (:enabled export)

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

@@ -126,6 +126,7 @@
     }
     .selection-title {
       @include titleTipography;
+      color: $df-primary;
     }
   }
   .selection-wrapper {

frontend/src/app/main/ui/onboarding/team_choice.cljs

@@ -102,8 +102,8 @@
                          :label (tr "onboarding.choice.team-up.create-team-placeholder")}]
 
            [:div {:class (stl/css :action-buttons)}
-            [:& fm/submit-button*
+            [:> fm/submit-button*
-             {:className (stl/css :accept-button)
+             {:class (stl/css :accept-button)
               :label (tr "onboarding.choice.team-up.continue-creating-team")}]]]]
          [:div {:class (stl/css :second-block)}
           [:h2 {:class (stl/css :modal-title)}
@@ -236,12 +236,11 @@
                                                                :step 2}))}
           (tr "labels.back")]
 
-         [:& fm/submit-button*
+         [:> fm/submit-button*
-          {:className (stl/css :accept-button)
+          {:class (stl/css :accept-button)
-           :label
+           :label (if (> (count emails) 0)
-           (if (> (count emails) 0)
+                    (tr "onboarding.choice.team-up.create-team-and-invite")
-             (tr "onboarding.choice.team-up.create-team-and-invite")
+                    (tr "onboarding.choice.team-up.create-team-without-invite"))}]]
-             (tr "onboarding.choice.team-up.create-team-without-invite"))}]]
         [:div {:class (stl/css :modal-hint)}
          (tr "onboarding.choice.team-up.create-team-and-send-invites-description")]]]
 

frontend/src/app/main/ui/viewer/comments.cljs

@@ -56,8 +56,7 @@
          (fn [event]
            (let [mode (-> (dom/get-target event)
                           (dom/get-data "value")
-                          (boolean))
+                          (boolean))]
-                 _ (prn mode)]
              (st/emit! (dcm/update-options {:show-sidebar? (not mode)})))))]
 
     [:div {:class (stl/css :view-options)
@@ -71,7 +70,7 @@
       [:ul {:class (stl/css :dropdown)}
        [:li {:class (stl/css-case :dropdown-element true
                                   :selected (or (= :all cmode) (nil? cmode)))
-             :data-value :all
+             :data-value "all"
              :on-click update-mode}
 
         [:span {:class (stl/css :label)} (tr "labels.show-all-comments")]
@@ -80,7 +79,7 @@
 
        [:li {:class (stl/css-case :dropdown-element true
                                   :selected (= :yours cmode))
-             :data-value :yours
+             :data-value "yours"
              :on-click update-mode}
 
         [:span {:class (stl/css :label)}
@@ -94,7 +93,7 @@
 
        [:li {:class (stl/css-case :dropdown-element true
                                   :selected (= :pending cshow))
-             :data-value (if (= :pending cshow) :all :pending)
+             :data-value (if (= :pending cshow) "all" "pending")
              :on-click update-show}
 
         [:span {:class (stl/css :label)}
@@ -107,7 +106,7 @@
 
        [:li {:class (stl/css-case :dropdown-element true
                                   :selected show-sidebar?)
-             :data-value show-sidebar?
+             :data-value (str show-sidebar?)
              :on-click update-options}
 
         [:span {:class (stl/css :label)} (tr "labels.show-comments-list")]

frontend/src/app/main/ui/viewer/header.cljs

@@ -302,7 +302,7 @@
 
      [:div {:class (stl/css :mode-zone)}
       [:button {:on-click navigate
-                :data-value :interactions
+                :data-value "interactions"
                 :class (stl/css-case :mode-zone-btn true
                                      :selected (= section :interactions))
                 :title (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))}
@@ -311,7 +311,7 @@
       (when (or (:can-edit permissions)
                 (= (:who-comment permissions) "all"))
         [:button {:on-click navigate
-                  :data-value :comments
+                  :data-value "comments"
                   :class (stl/css-case :mode-zone-btn true
                                        :selected (= section :comments))
                   :title (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))}

frontend/src/app/main/ui/viewer/interactions.cljs

@@ -258,7 +258,7 @@
        [:li {:class (stl/css-case :dropdown-element true
                                   :selected (= interactions-mode :hide))
              :on-click select-mode
-             :data-mode :hide}
+             :data-mode "hide"}
 
         [:span {:class (stl/css :label)} (tr "viewer.header.dont-show-interactions")]
         (when (= interactions-mode :hide)
@@ -267,7 +267,7 @@
        [:li {:class (stl/css-case :dropdown-element true
                                   :selected (= interactions-mode :show))
              :on-click select-mode
-             :data-mode :show}
+             :data-mode "show"}
         [:span {:class (stl/css :label)} (tr "viewer.header.show-interactions")]
         (when (= interactions-mode :show)
           [:span {:class (stl/css :icon)}  i/tick-refactor])]
@@ -277,7 +277,7 @@
        [:li {:class (stl/css-case :dropdown-element true
                                   :selected (= interactions-mode :show-on-click))
              :on-click select-mode
-             :data-mode :show-on-click}
+             :data-mode "show-on-click"}
 
         [:span {:class (stl/css :label)} (tr "viewer.header.show-interactions-on-click")]
         (when (= interactions-mode :show-on-click)

frontend/src/app/main/ui/viewer/login.cljs

@@ -86,12 +86,12 @@
           [:div {:class (stl/css :links)}
            [:div {:class (stl/css :link-entry)}
             [:a {:on-click set-section
-                 :data-value :recovery-request}
+                 :data-value "recovery-request"}
              (tr "auth.forgot-password")]]
            [:div {:class (stl/css :link-entry)}
             [:span (tr "auth.register") " "]
             [:a {:on-click set-section
-                 :data-value :register}
+                 :data-value "register"}
              (tr "auth.register-submit")]]]]
 
          :register
@@ -101,7 +101,7 @@
            [:div {:class (stl/css :link-entry)}
             [:span (tr "auth.already-have-account") " "]
             [:a {:on-click set-section
-                 :data-value :login}
+                 :data-value "login"}
              (tr "auth.login-here")]]]]
 
          :register-validate
@@ -111,7 +111,7 @@
           [:div {:class (stl/css :links)}
            [:div {:class (stl/css :link-entry)}
             [:a {:on-click set-section
-                 :data-value :register}
+                 :data-value "register"}
              (tr "labels.go-back")]]]]
 
          :recovery-request

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

@@ -139,7 +139,7 @@
          (fn [event]
            (let [offset  (-> (dom/get-current-target event)
                              (dom/get-data "value")
-                             (int))]
+                             (d/parse-integer))]
              (st/emit! (dc/select-colorpicker-gradient-stop offset)))))
 
         on-select-library-color

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

@@ -30,7 +30,7 @@
     (for [{:keys [offset hex r g b alpha] :as value} stops]
       [:button {:class (stl/css-case :gradient-stop true
                                      :selected (= editing-stop offset))
-                :data-value offset
+                :data-value (str offset)
                 :on-click on-select-stop
                 :style {:left (dm/str (* offset 100) "%")
                         :backgroundColor hex}

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

@@ -36,7 +36,8 @@
 
 (defn calculate-palette-padding [rulers?]
   (let [left-sidebar           (dom/get-element "left-sidebar-aside")
-        left-sidebar-size      (d/parse-integer (dom/get-data left-sidebar "size"))
+        left-sidebar-size      (-> (dom/get-data left-sidebar "size")
+                                   (d/parse-integer))
         rulers-width           (if rulers? 22 0)
         min-left-sidebar-width 275
         left-padding           4

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

@@ -59,7 +59,7 @@
 
     [:aside {:ref parent-ref
              :id "left-sidebar-aside"
-             :data-size size
+             :data-size (str size)
              :class (stl/css-case :left-settings-bar true
                                   :global/two-row   (<= size 300)
                                   :global/three-row (and (> size 300) (<= size 400))
@@ -153,7 +153,7 @@
                                   :expanded (> size 276))
 
              :id "right-sidebar-aside"
-             :data-size size
+             :data-size (str size)
              :style #js {"--width" (when can-be-expanded? (dm/str size "px"))}}
      (when can-be-expanded?
        [:div {:class (stl/css :resize-area)

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

@@ -179,6 +179,7 @@
 
         (when visible?
           [:& cmm/component-item-thumbnail {:file-id file-id
+                                            :class (stl/css :thumbnail)
                                             :root-shape root-shape
                                             :component component
                                             :container container}])])]))

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

@@ -11,17 +11,17 @@
 }
 .asset-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax($s-112, 1fr));
-  grid-auto-rows: calc(10vh + $s-16);
+  grid-auto-rows: $s-112;
+  max-width: 100%;
   gap: $s-4;
-  margin-left: $s-8;
+  margin-inline: $s-8;
 }
 
 .grid-cell {
   @include flexCenter;
   position: relative;
   padding: $s-8;
-  border: $s-4 solid transparent;
   border-radius: $br-8;
   background-color: var(--assets-component-background-color);
   overflow: hidden;
@@ -32,68 +32,46 @@
     max-height: 100%;
     max-width: 100%;
     pointer-events: none;
+    border: 0;
   }
-  svg {
+
-    height: 10vh;
-  }
   .cell-name {
     @include titleTipography;
     @include textEllipsis;
     display: none;
     position: absolute;
-    left: 0;
+    left: $s-4;
-    bottom: 0;
+    bottom: $s-4;
-    width: 100%;
+    width: calc(100% - 2 * $s-4);
     padding: $s-2;
-    &.editing {
+    column-gap: $s-4;
+    border-radius: $br-2;
+    background-color: var(--assets-item-name-background-color);
+    color: var(--assets-item-name-foreground-color);
+    input {
+      @include textEllipsis;
+      @include titleTipography;
+      @include removeInputStyle;
+      height: auto;
+      padding: 0;
+    }
+    span {
       display: flex;
       align-items: center;
-      height: $s-32;
+    }
+    &.editing {
       border: $s-1 solid var(--input-border-color-focus);
-      border-radius: $br-8;
+      border-radius: $br-2;
+      display: flex;
+      align-items: center;
       background-color: var(--input-background-color);
-      input {
-        @include textEllipsis;
-        @include titleTipography;
-        @include removeInputStyle;
-        flex-grow: 1;
-        height: $s-28;
-        max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
-        padding-left: $s-6;
-        margin: 0;
-        border-radius: $br-8;
-        color: var(--input-foreground-color);
-      }
-      span {
-        @include flexCenter;
-        height: $s-28;
-        background-color: transparent;
-        border-radius: $br-8;
-        svg {
-          @extend .button-icon-small;
-          stroke: var(--input-foreground-color);
-          transform: rotate(90deg);
-        }
-      }
     }
   }
 
   &:hover {
     background-color: var(--assets-item-background-color-hover);
     .cell-name {
-      display: block;
+      display: flex;
-      color: var(--assets-item-name-foreground-color-hover);
-      background: linear-gradient(to top, rgba(52, 57, 59, 1) 0%, rgba(52, 57, 59, 0) 100%);
-      &.editing {
-        display: flex;
-        background: var(--input-background-color);
-        input {
-          color: var(--input-foreground-color-active);
-        }
-        span svg {
-          stroke: var(--input-foreground-color-active);
-        }
-      }
     }
   }
 
@@ -102,6 +80,12 @@
   }
 }
 
+.thumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
 .grid-placeholder {
   width: 100%;
   border-radius: $br-8;
@@ -229,18 +213,6 @@
   }
 }
 
-:global(.three-row) {
-  .asset-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-:global(.four-row) {
-  .asset-grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
 .dragging {
   position: absolute;
   top: 0;

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

@@ -18,7 +18,7 @@
   []
   (let [on-click (mf/use-fn #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))]
     [:div {:id "left-sidebar-aside"
-           :data-size 0
+           :data-size "0"
            :class (stl/css :collapsed-sidebar)}
      [:div {:class (stl/css :collapsed-title)}
       [:button {:class (stl/css :collapsed-button)

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

@@ -48,7 +48,7 @@
                                        :disabled disabled-align)
                   :disabled disabled-align
                   :title (tr "workspace.align.hleft" (sc/get-tooltip :align-left))
-                  :data-value :hleft
+                  :data-value "hleft"
                   :on-click align-objects}
          i/align-left-refactor]
 
@@ -56,7 +56,7 @@
                                        :disabled disabled-align)
                   :disabled disabled-align
                   :title (tr "workspace.align.hcenter" (sc/get-tooltip :align-hcenter))
-                  :data-value :hcenter
+                  :data-value "hcenter"
                   :on-click align-objects}
          i/align-horizontal-center-refactor]
 
@@ -64,7 +64,7 @@
                                        :disabled disabled-align)
                   :disabled disabled-align
                   :title (tr "workspace.align.hright" (sc/get-tooltip :align-right))
-                  :data-value :hright
+                  :data-value "hright"
                   :on-click align-objects}
          i/align-right-refactor]
 
@@ -72,7 +72,7 @@
                                        :disabled disabled-distribute)
                   :disabled disabled-distribute
                   :title (tr "workspace.align.hdistribute" (sc/get-tooltip :h-distribute))
-                  :data-value :horizontal
+                  :data-value "horizontal"
                   :on-click distribute-objects}
          i/distribute-horizontally-refactor]]
 
@@ -81,7 +81,7 @@
                                        :disabled disabled-align)
                   :disabled disabled-align
                   :title (tr "workspace.align.vtop" (sc/get-tooltip :align-top))
-                  :data-value :vtop
+                  :data-value "vtop"
                   :on-click  align-objects}
          i/align-top-refactor]
 
@@ -89,7 +89,7 @@
                                        :disabled disabled-align)
                   :disabled disabled-align
                   :title (tr "workspace.align.vcenter" (sc/get-tooltip :align-vcenter))
-                  :data-value :vcenter
+                  :data-value "vcenter"
                   :on-click  align-objects}
          i/align-vertical-center-refactor]
 
@@ -97,7 +97,7 @@
                                        :disabled disabled-align)
                   :disabled disabled-align
                   :title (tr "workspace.align.vbottom" (sc/get-tooltip :align-bottom))
-                  :data-value :vbottom
+                  :data-value "vbottom"
                   :on-click  align-objects}
          i/align-bottom-refactor]
 
@@ -105,7 +105,7 @@
                   :class (stl/css-case :align-button true
                                        :disabled disabled-distribute)
                   :disabled disabled-distribute
-                  :data-value :vertical
+                  :data-value "vertical"
                   :on-click distribute-objects}
          i/distribute-vertical-spacing-refactor]]])))
 

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

@@ -168,7 +168,7 @@
             [:button {:class (stl/css-case :constraint-btn true
                                            :active (or (= constraints-v :top)
                                                        (= constraints-v :topbottom)))
-                      :data-value :top
+                      :data-value "top"
                       :on-click on-constraint-button-clicked}
              [:span {:class (stl/css :resalted-area)}]]]
            [:div {:class (stl/css :constraints-left)}
@@ -176,19 +176,19 @@
                                            :constraint-btn-rotated true
                                            :active (or (= constraints-h :left)
                                                        (= constraints-h :leftright)))
-                      :data-value :left
+                      :data-value "left"
                       :on-click on-constraint-button-clicked}
              [:span {:class (stl/css :resalted-area)}]]]
            [:div {:class (stl/css :constraints-center)}
             [:button {:class (stl/css-case :constraint-btn true
                                            :active (= constraints-h :center))
-                      :data-value :centerh
+                      :data-value "centerh"
                       :on-click on-constraint-button-clicked}
              [:span {:class (stl/css :resalted-area)}]]
             [:button {:class (stl/css-case :constraint-btn-special true
                                            :constraint-btn-rotated true
                                            :active (= constraints-v :center))
-                      :data-value :centerv
+                      :data-value "centerv"
                       :on-click on-constraint-button-clicked}
              [:span {:class (stl/css :resalted-area)}]]]
            [:div {:class (stl/css :constraints-right)}
@@ -196,14 +196,14 @@
                                            :constraint-btn-rotated true
                                            :active (or (= constraints-h :right)
                                                        (= constraints-h :leftright)))
-                      :data-value :right
+                      :data-value "right"
                       :on-click on-constraint-button-clicked}
              [:span {:class (stl/css :resalted-area)}]]]
            [:div {:class (stl/css :constraints-bottom)}
             [:button {:class (stl/css-case :constraint-btn true
                                            :active (or (= constraints-v :bottom)
                                                        (= constraints-v :topbottom)))
-                      :data-value :bottom
+                      :data-value "bottom"
                       :on-click on-constraint-button-clicked}
              [:span {:class (stl/css :resalted-area)}]]]]
           [:div {:class (stl/css :contraints-selects)}

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

@@ -128,7 +128,7 @@
            (let [value   (dom/get-target-val event)
                  index   (-> (dom/get-current-target event)
                              (dom/get-data "value")
-                             (int))]
+                             (d/parse-integer))]
              (st/emit! (dch/update-shapes ids
                                           (fn [shape]
                                             (assoc-in shape [:exports index :suffix] value)))))))
@@ -216,7 +216,7 @@
                          :type "text"
                          :value (:suffix export)
                          :placeholder (tr "workspace.options.export.suffix")
-                         :data-value index
+                         :data-value (str index)
                          :on-change on-suffix-change
                          :on-key-down manage-key-down}]]]
 

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

@@ -518,57 +518,57 @@
              [:button {:class (stl/css-case :direction-btn true
                                             :center-btn true
                                             :active (= overlay-pos-type :center))
-                       :data-value :center
+                       :data-value "center"
                        :on-click toggle-overlay-pos-type}
               [:span {:class (stl/css :rectangle)}]]
              [:button {:class (stl/css-case :direction-btn true
                                             :top-left-btn true
                                             :active (= overlay-pos-type :top-left))
-                       :data-value :top-left
+                       :data-value "top-left"
                        :on-click toggle-overlay-pos-type}
               [:span {:class (stl/css :rectangle)}]]
              [:button {:class (stl/css-case :direction-btn true
                                             :top-right-btn true
                                             :active (= overlay-pos-type :top-right))
-                       :data-value :top-right
+                       :data-value "top-right"
                        :on-click toggle-overlay-pos-type}
               [:span {:class (stl/css :rectangle)}]]
 
              [:button {:class (stl/css-case :direction-btn true
                                             :top-center-btn true
                                             :active (= overlay-pos-type :top-center))
-                       :data-value :top-center
+                       :data-value "top-center"
                        :on-click toggle-overlay-pos-type}
               [:span {:class (stl/css :rectangle)}]]
              [:button {:class (stl/css-case :direction-btn true
                                             :bottom-left-btn true
                                             :active (= overlay-pos-type :bottom-left))
-                       :data-value :bottom-left
+                       :data-value "bottom-left"
                        :on-click toggle-overlay-pos-type}
               [:span {:class (stl/css :rectangle)}]]
              [:button {:class (stl/css-case :direction-btn true
                                             :bottom-left-btn true
                                             :active (= overlay-pos-type :bottom-left))
-                       :data-value :bottom-left
+                       :data-value "bottom-left"
                        :on-click toggle-overlay-pos-type}
               [:span {:class (stl/css :rectangle)}]]
 
              [:button {:class (stl/css-case :direction-btn true
                                             :bottom-left-btn true
                                             :active (= overlay-pos-type :bottom-left))
-                       :data-value :bottom-left
+                       :data-value "bottom-left"
                        :on-click toggle-overlay-pos-type}
               [:span {:class (stl/css :rectangle)}]]
              [:button {:class (stl/css-case :direction-btn true
                                             :bottom-right-btn true
                                             :active (= overlay-pos-type :bottom-right))
-                       :data-value :bottom-right
+                       :data-value "bottom-right"
                        :on-click toggle-overlay-pos-type}
               [:span {:class (stl/css :rectangle)}]]
              [:button {:class (stl/css-case :direction-btn true
                                             :bottom-center-btn true
                                             :active (= overlay-pos-type :bottom-center))
-                       :data-value :bottom-center
+                       :data-value "bottom-center"
                        :on-click toggle-overlay-pos-type}
               [:span {:class (stl/css :rectangle)}]]]]
 

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

@@ -930,7 +930,7 @@
                [:button {:class (stl/css :layout-option) :on-click set-grid} "Grid layout"]]]]
 
             [:button {:class (stl/css :add-layout)
-                      :data-value :flex
+                      :data-value "flex"
                       :on-click on-set-layout}
              i/add-refactor])
           [:button {:class (stl/css :remove-layout)

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

@@ -365,8 +365,8 @@
                  [:li {:key (:name size-preset)
                        :class (stl/css-case :dropdown-element true
                                             :match preset-match)
-                       :data-width (:width size-preset)
+                       :data-width (str (:width size-preset))
-                       :data-height (:height size-preset)
+                       :data-height (str (:height size-preset))
                        :on-click on-preset-selected}
                   [:div {:class (stl/css :name-wrapper)}
                    [:span {:class (stl/css :preset-name)} (:name size-preset)]

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

@@ -462,7 +462,8 @@
            (when (dom/left-mouse? event)
              (dom/stop-propagation event)
              (let [target   (dom/get-current-target event)
-                   position (keyword (dom/get-data target "position"))]
+                   position (-> (dom/get-data target "position")
+                                (keyword))]
                (st/emit! (dw/start-resize position #{shape-id} shape))))))
 
         on-rotate

frontend/src/app/util/object.cljs

@@ -86,10 +86,16 @@
       obj)))
 
 (defn- props-key-fn
-  [key]
+  [k]
-  (if (or (= key :class) (= key :class-name))
+  (if (or (keyword? k) (symbol? k))
-    "className"
+    (let [nword (name k)]
-    (str/camel (name key))))
+      (cond
+        (= nword "class") "className"
+        (str/starts-with? nword "--") nword
+        (str/starts-with? nword "data-") nword
+        (str/starts-with? nword "aria-") nword
+        :else (str/camel nword)))
+    k))
 
 (defn clj->props
   [props]

frontend/yarn.lock

@@ -7507,6 +7507,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fancy-log@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "fancy-log@npm:2.0.0"
+  dependencies:
+    color-support: "npm:^1.1.3"
+  checksum: a6e116f3346756a7363eea343b551c1375d2cd2afc2a92d224feb78589b6b3cff85db9dc5d5df89792a0f7c1e17f731f52cb3d2807302f0516422be6269b95a8
+  languageName: node
+  linkType: hard
+
 "fast-glob@npm:^3.2.9":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
@@ -7884,9 +7893,9 @@ __metadata:
     date-fns: "npm:^2.30.0"
     draft-js: "npm:^0.11.7"
     eventsource-parser: "npm:^1.1.1"
+    fancy-log: "npm:^2.0.0"
     gettext-parser: "npm:^7.0.1"
     gulp: "npm:4.0.2"
-    gulp-cached: "npm:^1.1.1"
     gulp-concat: "npm:^2.6.1"
     gulp-gzip: "npm:^1.4.2"
     gulp-mustache: "npm:^5.0.0"
@@ -8384,16 +8393,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gulp-cached@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "gulp-cached@npm:1.1.1"
-  dependencies:
-    lodash.defaults: "npm:^4.2.0"
-    through2: "npm:^2.0.1"
-  checksum: d0809dd40f8db2a958c0b935ff431b3c2efc3a47f219b392457794e747e45707c2099513bd0ef5d75a6acdbda404b538c3643c4163f5db57816882ad6094a64f
-  languageName: node
-  linkType: hard
-
 "gulp-cli@npm:^2.2.0":
   version: 2.3.0
   resolution: "gulp-cli@npm:2.3.0"
@@ -10093,13 +10092,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.defaults@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "lodash.defaults@npm:4.2.0"
-  checksum: d5b77aeb702caa69b17be1358faece33a84497bcca814897383c58b28a2f8dfc381b1d9edbec239f8b425126a3bbe4916223da2a576bb0411c2cefd67df80707
-  languageName: node
-  linkType: hard
-
 "lodash.escape@npm:^4.0.1":
   version: 4.0.1
   resolution: "lodash.escape@npm:4.0.1"
@@ -14212,7 +14204,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"through2@npm:^2.0.0, through2@npm:^2.0.1, through2@npm:^2.0.3, through2@npm:~2.0.0":
+"through2@npm:^2.0.0, through2@npm:^2.0.3, through2@npm:~2.0.0":
   version: 2.0.5
   resolution: "through2@npm:2.0.5"
   dependencies: