From 34f1f3d103e6e2334d0e170d428eb2038aa62865 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Wed, 10 Jan 2024 16:09:46 +0100 Subject: [PATCH 1/9] :bug: Fix hover on assets thumbnails + broken editable label --- .../styles/common/refactor/color-defs.scss | 1 + .../styles/common/refactor/design-tokens.scss | 1 + .../main/ui/components/editable_label.cljs | 31 +++--- .../workspace/sidebar/assets/components.cljs | 1 + .../workspace/sidebar/assets/components.scss | 94 +++++++------------ 5 files changed, 56 insertions(+), 72 deletions(-) diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss index 4efe6a28fa..7489f18840 100644 --- a/frontend/resources/styles/common/refactor/color-defs.scss +++ b/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; diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index 865de22e7e..27b2538b65 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/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); diff --git a/frontend/src/app/main/ui/components/editable_label.cljs b/frontend/src/app/main/ui/components/editable_label.cljs index caa5c5426a..0b5930c926 100644 --- a/frontend/src/app/main/ui/components/editable_label.cljs +++ b/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} - [:input - {:class (stl/css :editable-label-input) - :ref input-ref - :default-value value - :on-key-up on-key-up - :on-double-click on-dbl-click - :on-blur cancel-edition}] + (if ^boolean internal-editing? + [:div {:class final-class} + [:input + {:class (stl/css :editable-label-input) + :ref input-ref + :default-value value + :on-key-up on-key-up + :on-double-click on-dbl-click + :on-blur cancel-edition}] - [:span {:class (stl/css :editable-label-close) - :on-click cancel-edition} - i/delete-text-refactor]])) + [:span {:class (stl/css :editable-label-close) + :on-click cancel-edition} + i/delete-text-refactor]] + + [:span {:class final-class + :title tooltip + :on-double-click on-dbl-click} + display-value]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs index b443902867..edb836d23e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs +++ b/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}])])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss index 6496b917eb..116f23c128 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss +++ b/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-auto-rows: calc(10vh + $s-16); + grid-template-columns: repeat(auto-fill, minmax($s-112, 1fr)); + 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; - bottom: 0; - width: 100%; + left: $s-4; + bottom: $s-4; + 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; - 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); - } - } + display: flex; } } @@ -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; From aed5388bfd35d1e39d0b9a57befc3eb9dfa1b7f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Wed, 10 Jan 2024 17:54:31 +0100 Subject: [PATCH 2/9] :bug: Fix radio button component --- frontend/src/app/main/ui/components/radio_buttons.cljs | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/frontend/src/app/main/ui/components/radio_buttons.cljs b/frontend/src/app/main/ui/components/radio_buttons.cljs index 9099406a36..92563917a9 100644 --- a/frontend/src/app/main/ui/components/radio_buttons.cljs +++ b/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]])) - - - From ba864eaa4dae1b8d47bef1574827b46e44810e35 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 11 Jan 2024 12:56:48 +0100 Subject: [PATCH 3/9] :bug: Fix gulp cache issue on recompiling transitive scss dependencies --- frontend/gulpfile.js | 125 ++++++++++++++++++++++++++---------------- frontend/package.json | 2 +- frontend/yarn.lock | 30 ++++------ 3 files changed, 91 insertions(+), 66 deletions(-) diff --git a/frontend/gulpfile.js b/frontend/gulpfile.js index 93f6f810d1..ff35157dd1 100644 --- a/frontend/gulpfile.js +++ b/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", - output: paths.output, + input: "./resources/templates/index.mustache", + 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", - output: paths.output, + input: "./resources/templates/render.mustache", + output: "./resources/public/", }), ); @@ -328,8 +363,8 @@ gulp.task( "template:rasterizer", templatePipeline({ name: "rasterizer.html", - input: paths.resources + "templates/rasterizer.mustache", - output: paths.output, + input: "./resources/templates/rasterizer.mustache", + 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(paths.resources + "styles/**/**.scss", gulp.series("scss")); - gulp.watch(paths.resources + "images/**/*", gulp.series("copy:assets:images")); - - gulp.watch([paths.resources + "templates/*.mustache", "translations/*.po"], gulp.series("templates")); + gulp.watch("./src/**/**.scss", {delay:1000}, gulp.series("scss")); + gulp.watch("./resources/styles/**/**.scss", {delay: 100}, gulp.series("scss:touch:modules")); + gulp.watch("./resources/images/**/*", gulp.series("copy:assets:images")); + gulp.watch(["./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/")); }); diff --git a/frontend/package.json b/frontend/package.json index f398772c62..b3f0590475 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index fe5aa7d237..481011b66a 100644 --- a/frontend/yarn.lock +++ b/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: From 6c2f9b7bd3c6d76d1720765b8377143d76705ccf Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 11 Jan 2024 15:22:42 +0100 Subject: [PATCH 4/9] :bug: Do not forward invalid prop to dom node on form input component --- frontend/src/app/main/ui/components/forms.cljs | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs index 9ce9ae13d3..2056369504 100644 --- a/frontend/src/app/main/ui/components/forms.cljs +++ b/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) From 6e39c26704af07df726c419cbc2996d20d28d66e Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 11 Jan 2024 15:23:13 +0100 Subject: [PATCH 5/9] :sparkles: Improve implementation of submit-button* component --- .../src/app/main/ui/components/forms.cljs | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs index 2056369504..07ce76ed70 100644 --- a/frontend/src/app/main/ui/components/forms.cljs +++ b/frontend/src/app/main/ui/components/forms.cljs @@ -287,20 +287,18 @@ (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") (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"))) - new-klass (dm/str class " " (if disabled? (stl/css :btn-disabled) "")) + (true? 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 @@ -309,14 +307,16 @@ (when (and (kbd/enter? event) (fn? on-click)) (on-click event)))) - props (-> (obj/clone props) - (obj/unset! "children") - (obj/set! "disabled" disabled?) - (obj/set! "onKeyDown" on-key-down) - (obj/set! "name" name) - (obj/set! "label" mf/undefined) - (obj/set! "className" new-klass) - (obj/set! "type" "submit"))] + props + (-> (obj/clone props) + (obj/set! "children" mf/undefined) + (obj/set! "disabled" disabled?) + (obj/set! "onKeyDown" on-key-down) + (obj/set! "name" name) + (obj/set! "label" mf/undefined) + (obj/set! "className" class) + (obj/set! "type" "submit")) + ] [:> "button" props (if (some? children) From 9149772ce9695a9f5ccb974b79dce489c9802050 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 11 Jan 2024 15:23:42 +0100 Subject: [PATCH 6/9] :bug: Add missing mf/deps on form component --- frontend/src/app/main/ui/components/forms.cljs | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs index 07ce76ed70..2872064005 100644 --- a/frontend/src/app/main/ui/components/forms.cljs +++ b/frontend/src/app/main/ui/components/forms.cljs @@ -327,6 +327,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) From 4d547688752cb38747a1530557eeb8c00ad66b61 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 11 Jan 2024 15:23:58 +0100 Subject: [PATCH 7/9] :sparkles: Add special cases for runtime map to props conversion --- frontend/src/app/util/object.cljs | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/util/object.cljs b/frontend/src/app/util/object.cljs index 892e9e7fef..74af901023 100644 --- a/frontend/src/app/util/object.cljs +++ b/frontend/src/app/util/object.cljs @@ -86,10 +86,16 @@ obj))) (defn- props-key-fn - [key] - (if (or (= key :class) (= key :class-name)) - "className" - (str/camel (name key)))) + [k] + (if (or (keyword? k) (symbol? k)) + (let [nword (name k)] + (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] From 9ed6d5f3609652f82f5440e8cd5372a623f39c58 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 11 Jan 2024 15:25:00 +0100 Subject: [PATCH 8/9] :bug: Use correct jsx handler on team choice form --- frontend/src/app/main/ui/components/forms.cljs | 6 ++---- .../src/app/main/ui/onboarding/team_choice.cljs | 15 +++++++-------- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs index 2872064005..267cf66be0 100644 --- a/frontend/src/app/main/ui/components/forms.cljs +++ b/frontend/src/app/main/ui/components/forms.cljs @@ -288,8 +288,7 @@ (mf/defc submit-button* {::mf/wrap-props false} [{:keys [on-click children label form class-name name disabled] :as props}] - (let [form (or (unchecked-get props "form") - (mf/use-ctx form-ctx)) + (let [form (or form (mf/use-ctx form-ctx)) disabled? (or (and (some? form) (not (:valid @form))) (true? disabled)) @@ -315,8 +314,7 @@ (obj/set! "name" name) (obj/set! "label" mf/undefined) (obj/set! "className" class) - (obj/set! "type" "submit")) - ] + (obj/set! "type" "submit"))] [:> "button" props (if (some? children) diff --git a/frontend/src/app/main/ui/onboarding/team_choice.cljs b/frontend/src/app/main/ui/onboarding/team_choice.cljs index f850128ac6..9cee007d99 100644 --- a/frontend/src/app/main/ui/onboarding/team_choice.cljs +++ b/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* - {:className (stl/css :accept-button) + [:> fm/submit-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* - {:className (stl/css :accept-button) - :label - (if (> (count emails) 0) - (tr "onboarding.choice.team-up.create-team-and-invite") - (tr "onboarding.choice.team-up.create-team-without-invite"))}]] + [:> fm/submit-button* + {:class (stl/css :accept-button) + :label (if (> (count emails) 0) + (tr "onboarding.choice.team-up.create-team-and-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")]]] From 6ef85ef0e86ead93099163b7331b7e945a27aa4a Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 11 Jan 2024 15:45:12 +0100 Subject: [PATCH 9/9] :bug: Fix problems with data-value keyword --- frontend/src/app/main/ui/export.cljs | 8 +++++--- frontend/src/app/main/ui/export.scss | 1 + frontend/src/app/main/ui/viewer/comments.cljs | 11 +++++------ frontend/src/app/main/ui/viewer/header.cljs | 4 ++-- .../src/app/main/ui/viewer/interactions.cljs | 6 +++--- frontend/src/app/main/ui/viewer/login.cljs | 8 ++++---- .../src/app/main/ui/workspace/colorpicker.cljs | 2 +- .../ui/workspace/colorpicker/gradients.cljs | 2 +- .../src/app/main/ui/workspace/palette.cljs | 3 ++- .../src/app/main/ui/workspace/sidebar.cljs | 4 ++-- .../workspace/sidebar/collapsable_button.cljs | 2 +- .../workspace/sidebar/options/menus/align.cljs | 16 ++++++++-------- .../sidebar/options/menus/constraints.cljs | 12 ++++++------ .../sidebar/options/menus/exports.cljs | 4 ++-- .../sidebar/options/menus/interactions.cljs | 18 +++++++++--------- .../options/menus/layout_container.cljs | 2 +- .../sidebar/options/menus/measures.cljs | 4 ++-- .../main/ui/workspace/viewport/selection.cljs | 3 ++- 18 files changed, 57 insertions(+), 53 deletions(-) diff --git a/frontend/src/app/main/ui/export.cljs b/frontend/src/app/main/ui/export.cljs index 90df531735..1f6de24f9c 100644 --- a/frontend/src/app/main/ui/export.cljs +++ b/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"))] - (swap! exports update-in [index :enabled] not)))) + (dom/get-data "value") + (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) diff --git a/frontend/src/app/main/ui/export.scss b/frontend/src/app/main/ui/export.scss index 51e1edbd51..144036d9d6 100644 --- a/frontend/src/app/main/ui/export.scss +++ b/frontend/src/app/main/ui/export.scss @@ -126,6 +126,7 @@ } .selection-title { @include titleTipography; + color: $df-primary; } } .selection-wrapper { diff --git a/frontend/src/app/main/ui/viewer/comments.cljs b/frontend/src/app/main/ui/viewer/comments.cljs index 1372696fea..265cf6c26d 100644 --- a/frontend/src/app/main/ui/viewer/comments.cljs +++ b/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)) - _ (prn mode)] + (boolean))] (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")] diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs index cfa7324889..0ee3f575ea 100644 --- a/frontend/src/app/main/ui/viewer/header.cljs +++ b/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))} diff --git a/frontend/src/app/main/ui/viewer/interactions.cljs b/frontend/src/app/main/ui/viewer/interactions.cljs index 406e9652f3..c304d05451 100644 --- a/frontend/src/app/main/ui/viewer/interactions.cljs +++ b/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) diff --git a/frontend/src/app/main/ui/viewer/login.cljs b/frontend/src/app/main/ui/viewer/login.cljs index 3341fac27c..afec5e502f 100644 --- a/frontend/src/app/main/ui/viewer/login.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index 82ccaa7012..1477d2b6b3 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs index 9764b4eaec..2c861d01d0 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs +++ b/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} diff --git a/frontend/src/app/main/ui/workspace/palette.cljs b/frontend/src/app/main/ui/workspace/palette.cljs index 26c220c3a9..e30a18e5bf 100644 --- a/frontend/src/app/main/ui/workspace/palette.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index b38c1cd444..22201e991f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/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) diff --git a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs index 643114f07f..349ea74bd1 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs +++ b/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) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs index fc7758d99f..f6dc8e634d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs +++ b/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]]]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs index d0d5b145b4..44d5182eca 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs +++ b/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)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs index b27efded98..7c4f6d2649 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs +++ b/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}]]] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs index d88daf5c40..0fcc359e02 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +++ b/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)}]]]] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index 35901bda90..d6332d87ca 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/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) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index c05a01a0f9..6956aa30fd 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/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-height (:height size-preset) + :data-width (str (:width 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)] diff --git a/frontend/src/app/main/ui/workspace/viewport/selection.cljs b/frontend/src/app/main/ui/workspace/viewport/selection.cljs index bd7a0c7df2..2d1381b66c 100644 --- a/frontend/src/app/main/ui/workspace/viewport/selection.cljs +++ b/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