github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-05-03 07:08:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Andrey Antukh 2024-01-11 16:18:17 +01:00
commit f0ea613d47
30 changed files with 242 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
frontend/gulpfile.js
View File

@ -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/"));
});

2
frontend/package.json
View File

@ -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",

1
frontend/resources/styles/common/refactor/color-defs.scss
View File

@ -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;

1
frontend/resources/styles/common/refactor/design-tokens.scss
View File

@ -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);

31
frontend/src/app/main/ui/components/editable_label.cljs
View File

@ -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])))

45
frontend/src/app/main/ui/components/forms.cljs
View File

@ -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]
(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")
[{:keys [on-click children label form class-name name disabled] :as props}]
(let [form (or form (mf/use-ctx form-ctx))
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
@ -313,14 +306,15 @@
(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)
@ -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)

5
frontend/src/app/main/ui/components/radio_buttons.cljs
View File

@ -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]]))

8
frontend/src/app/main/ui/export.cljs
View File

@ -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)

1
frontend/src/app/main/ui/export.scss
View File

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

15
frontend/src/app/main/ui/onboarding/team_choice.cljs
View File

@ -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")]]]

11
frontend/src/app/main/ui/viewer/comments.cljs
View File

@ -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")]

4
frontend/src/app/main/ui/viewer/header.cljs
View File

@ -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))}

6
frontend/src/app/main/ui/viewer/interactions.cljs
View File

@ -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)

8
frontend/src/app/main/ui/viewer/login.cljs
View File

@ -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

2
frontend/src/app/main/ui/workspace/colorpicker.cljs
View File

@ -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

2
frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
View File

@ -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}

3
frontend/src/app/main/ui/workspace/palette.cljs
View File

@ -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

4
frontend/src/app/main/ui/workspace/sidebar.cljs
View File

@ -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)

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

@ -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}])])]))

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

@ -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;

2
frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs
View File

@ -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)

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

@ -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]]])))

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

@ -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)}

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

@ -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}]]]

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

@ -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)}]]]]

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

@ -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)

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

@ -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)]

3
frontend/src/app/main/ui/workspace/viewport/selection.cljs
View File

@ -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

14
frontend/src/app/util/object.cljs
View File

@ -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]

30
frontend/yarn.lock
View File

@ -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: