From 30a53252f875578c75a877f7902aacab96271453 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Thu, 11 Jan 2024 14:50:02 +0100 Subject: [PATCH 1/9] :bug: Fix asset list UI --- frontend/src/app/main/render.cljs | 6 +- .../ui/workspace/sidebar/assets/common.cljs | 4 +- .../workspace/sidebar/assets/components.cljs | 3 +- .../workspace/sidebar/assets/components.scss | 103 ++++++++---------- 4 files changed, 54 insertions(+), 62 deletions(-) diff --git a/frontend/src/app/main/render.cljs b/frontend/src/app/main/render.cljs index a8efca58a..a9a943a27 100644 --- a/frontend/src/app/main/render.cljs +++ b/frontend/src/app/main/render.cljs @@ -336,7 +336,7 @@ ;; used to render thumbnails on assets panel. (mf/defc component-svg {::mf/wrap [mf/memo #(mf/deferred % ts/idle-then-raf)]} - [{:keys [objects root-shape show-grids? zoom] :or {zoom 1} :as props}] + [{:keys [objects root-shape show-grids? zoom class] :or {zoom 1} :as props}] (when root-shape (let [root-shape-id (:id root-shape) include-metadata (mf/use-ctx export/include-metadata-ctx) @@ -373,6 +373,7 @@ :width (ust/format-precision width viewbox-decimal-precision) :height (ust/format-precision height viewbox-decimal-precision) :version "1.1" + :class class :xmlns "http://www.w3.org/2000/svg" :xmlnsXlink "http://www.w3.org/1999/xlink" :xmlns:penpot (when include-metadata "https://penpot.app/xmlns") @@ -388,7 +389,7 @@ (mf/defc component-svg-thumbnail {::mf/wrap [mf/memo #(mf/deferred % ts/idle-then-raf)]} - [{:keys [thumbnail-uri on-error show-grids? + [{:keys [thumbnail-uri on-error show-grids? class objects root-shape zoom] :or {zoom 1} :as props}] (when root-shape @@ -421,6 +422,7 @@ :width (ust/format-precision width-zoom viewbox-decimal-precision) :height (ust/format-precision height-zoom viewbox-decimal-precision) :version "1.1" + :class class :xmlns "http://www.w3.org/2000/svg" :xmlnsXlink "http://www.w3.org/1999/xlink" :fill "none"} diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs index 7b4194a7f..b46e6a809 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs @@ -281,7 +281,7 @@ (mf/defc component-item-thumbnail "Component that renders the thumbnail image or the original SVG." {::mf/wrap-props false} - [{:keys [file-id root-shape component container]}] + [{:keys [file-id root-shape component container class]}] (let [retry (mf/use-state 0) thumbnail-uri (get-component-thumbnail-uri file-id component) handle-error @@ -294,6 +294,7 @@ (if (some? thumbnail-uri) [:& component-svg-thumbnail {:thumbnail-uri thumbnail-uri + :class class :on-error handle-error :root-shape root-shape :objects (:objects container) @@ -301,6 +302,7 @@ [:& component-svg {:root-shape root-shape + :class class :objects (:objects container) :show-grids? true}]))) 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 edb836d23..3175edcf9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs @@ -179,7 +179,8 @@ (when visible? [:& cmm/component-item-thumbnail {:file-id file-id - :class (stl/css :thumbnail) + :class (stl/css-case :thumbnail true + :asset-list-thumbnail (not listing-thumbs?)) :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 116f23c12..baef288b8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss @@ -26,14 +26,6 @@ background-color: var(--assets-component-background-color); overflow: hidden; cursor: pointer; - img { - height: auto; - width: auto; - max-height: 100%; - max-width: 100%; - pointer-events: none; - border: 0; - } .cell-name { @include titleTipography; @@ -84,6 +76,8 @@ width: 100%; height: 100%; object-fit: contain; + pointer-events: none; + border: 0; } .grid-placeholder { @@ -96,10 +90,13 @@ .asset-enum { margin: 0 $s-12; } + .enum-item { position: relative; - display: flex; + display: grid; + grid-template-columns: auto 1fr; align-items: center; + column-gap: $s-8; height: $s-36; margin-bottom: $s-4; padding: $s-2; @@ -107,55 +104,6 @@ background-color: var(--assets-item-background-color); cursor: pointer; - svg, - img { - @include flexCenter; - flex-shrink: 0; - padding: $s-2; - height: $s-32; - width: $s-32; - border-radius: $br-6; - background-color: var(--color-foreground-secondary); - } - - .item-name { - @include titleTipography; - @include textEllipsis; - padding-left: $s-8; - color: var(--assets-item-name-foreground-color); - &.editing { - display: flex; - align-items: center; - height: $s-32; - border: $s-1 solid var(--input-border-color-focus); - border-radius: $br-8; - 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); .item-name { @@ -176,6 +124,45 @@ } } +.item-name { + @include titleTipography; + @include textEllipsis; + order: 2; + color: var(--assets-item-name-foreground-color); + input { + @include textEllipsis; + @include titleTipography; + @include removeInputStyle; + height: $s-32; + padding: $s-4; + } + span { + display: flex; + place-items: center; + padding-inline-end: $s-4; + } + + &.editing { + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + column-gap: $s-8; + border: $s-1 solid var(--input-border-color-focus); + border-radius: $br-8; + background-color: var(--input-background-color); + } +} + +.asset-list-thumbnail { + @include flexCenter; + flex-shrink: 0; + padding: $s-2; + height: $s-32; + width: $s-32; + border-radius: $br-6; + background-color: var(--assets-component-background-color); +} + .grid-placeholder { height: $s-2; width: 100%; From d204ae86f298983a8166d7de9ffe14142b4f6e48 Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Thu, 11 Jan 2024 11:23:39 +0100 Subject: [PATCH 2/9] :bug: Fix swap styles for groups names too long --- .../src/app/main/ui/workspace/sidebar/assets/groups.scss | 2 ++ .../main/ui/workspace/sidebar/options/menus/component.scss | 6 ++++++ 2 files changed, 8 insertions(+) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss index c3091a7cb..209c441e3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss @@ -17,6 +17,8 @@ } .path { + @include textEllipsis; + max-width: 90%; margin-left: $s-2; text-transform: initial; color: var(--title-foreground-color-hover); diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss index 1c190f2d7..c6f098a98 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss @@ -47,6 +47,8 @@ .component-name { @include titleTipography; @include textEllipsis; + direction: rtl; + text-align: left; width: 70%; flex-grow: 2; margin-left: $s-8; @@ -55,6 +57,9 @@ .component-parent-name { @include titleTipography; @include textEllipsis; + direction: rtl; + text-align: left; + max-width: 95%; padding-left: $s-36; color: var(--title-foreground-color); } @@ -224,6 +229,7 @@ display: flex; align-items: center; margin-bottom: $s-4; + padding-right: $s-8; font-size: $s-12; cursor: pointer; width: 100%; From b7bfb73134f1416536b202d0fe2e224d1d0555cb Mon Sep 17 00:00:00 2001 From: Eva Date: Wed, 10 Jan 2024 14:01:00 +0100 Subject: [PATCH 3/9] :bug: Fix spacing in prototype tab --- .../sidebar/options/menus/interactions.cljs | 35 ++++++++++--------- .../sidebar/options/menus/interactions.scss | 5 +++ 2 files changed, 23 insertions(+), 17 deletions(-) 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 0fcc359e0..3f0b3d8cb 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 @@ -654,7 +654,8 @@ [:span {:class (stl/css :interaction-name)} (tr "workspace.options.interaction-duration")] [:div {:class (stl/css :input-element-wrapper) :title (tr "workspace.options.interaction-ms")} - [:span.after (tr "workspace.options.interaction-ms")] + [:span {:class (stl/css :after)} + (tr "workspace.options.interaction-ms")] [:> numeric-input* {:ref ext-duration-ref :on-change change-duration :value (-> interaction :animation :duration) @@ -719,22 +720,22 @@ [:button {:class (stl/css :add-interaction-btn) :on-click add-interaction} i/add-refactor]]]) - [:div {:class (stl/css :help-content)} - (when (= (count interactions) 0) - [:* - (when (and shape (not (cfh/unframed-shape? shape))) - [:div {:class (stl/css :help-group)} - [:div {:class (stl/css :interactions-help-icon)} i/add-refactor] - [:div {:class (stl/css :interactions-help)} - (tr "workspace.options.add-interaction")]]) - [:div {:class (stl/css :help-group)} - [:div {:class (stl/css :interactions-help-icon)} i/interaction-refactor] - [:div {:class (stl/css :interactions-help)} - (tr "workspace.options.select-a-shape")]] - [:div {:class (stl/css :help-group)} - [:div {:class (stl/css :interactions-help-icon)} i/play-refactor] - [:div {:class (stl/css :interactions-help)} - (tr "workspace.options.use-play-button")]]])] + + (when (= (count interactions) 0) + [:div {:class (stl/css :help-content)} + (when (and shape (not (cfh/unframed-shape? shape))) + [:div {:class (stl/css :help-group)} + [:div {:class (stl/css :interactions-help-icon)} i/add-refactor] + [:div {:class (stl/css :interactions-help)} + (tr "workspace.options.add-interaction")]]) + [:div {:class (stl/css :help-group)} + [:div {:class (stl/css :interactions-help-icon)} i/interaction-refactor] + [:div {:class (stl/css :interactions-help)} + (tr "workspace.options.select-a-shape")]] + [:div {:class (stl/css :help-group)} + [:div {:class (stl/css :interactions-help-icon)} i/play-refactor] + [:div {:class (stl/css :interactions-help)} + (tr "workspace.options.use-play-button")]]]) [:div {:class (stl/css :groups)} (for [[index interaction] (d/enumerate interactions)] [:& interaction-entry {:key (dm/str (:id shape) "-" index) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss index 93d9bb562..f3ca1d977 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss @@ -54,6 +54,11 @@ } } +.after { + @include titleTipography; + margin-top: $s-1; +} + .interactions-help { @include titleTipography; text-align: center; From 6de70ff5b73d4e129bb8448e0d8461cbb07031df Mon Sep 17 00:00:00 2001 From: Eva Date: Thu, 11 Jan 2024 12:53:16 +0100 Subject: [PATCH 4/9] :bug: Fix checkbox colors --- .../styles/common/refactor/basic-rules.scss | 23 +++++++++++++------ .../styles/common/refactor/design-tokens.scss | 8 +++++-- .../sidebar/options/menus/constraints.scss | 2 +- 3 files changed, 23 insertions(+), 10 deletions(-) diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index 9c11fc4fb..b4a5f2481 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -406,10 +406,9 @@ height: $s-16; min-width: $s-16; min-height: $s-16; - border-radius: $br-6; - background-color: var(--input-checkbox-inactive-background-color); + background-color: var(--input-checkbox-background-color-rest); + border: $s-1 solid var(--input-checkbox-border-color-rest); border-radius: $br-4; - box-shadow: inset 0 0 0px 2px rgb(255 255 255 / 20%); svg { width: $s-16; height: $s-16; @@ -422,22 +421,25 @@ &:focus { border-color: var(--input-checkbox-border-color-focus); } + &:global(.checked) { border-color: var(--input-checkbox-border-color-active); - background-color: var(--input-checkbox-active-background-color); + background-color: var(--input-checkbox-background-color-active); svg { @extend .button-icon-small; - stroke: var(--input-checkbox-active-foreground-color); + stroke: var(--input-checkbox-foreground-color-active); } } + &:global(.intermediate) { background-color: var(--input-checkbox-background-color-intermediate); - border-color: var(--input-checkbox-border-color-active); + border-color: var(--input-checkbox-border-color-intermediate); svg { @extend .button-icon-small; - stroke: var(--input-details-color); + stroke: var(--input-checkbox-foreground-color-intermediate); } } + &:global(.unchecked) { background-color: var(--input-checkbox-background-color-rest); border: $s-1 solid var(--input-checkbox-background-color-rest); @@ -468,6 +470,13 @@ border-color: var(--input-checkbox-border-color-hover); } } + + &:focus, + &:focus-within { + span { + border-color: var(--input-checkbox-border-color-focus); + } + } } } diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index 27b2538b6..41950ee19 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -159,18 +159,22 @@ --input-border-color-error: var(--error-color); --input-border-color-success: var(--color-accent-primary); --input-details-color: var(--color-background-primary); + --input-checkbox-background-color-rest: var(--color-background-quaternary); + --input-checkbox-border-color-rest: var(--color-foreground-secondary); --input-checkbox-border-color-active: var(--color-background-quaternary); --input-checkbox-border-color-focus: var(--color-accent-primary); --input-checkbox-border-color: var(--color-background-secondary); --input-checkbox-border-color-hover: var(--color-accent-primary-muted); --input-checkbox-background-color-intermediate: var(--color-foreground-secondary); + --input-checkbox-border-color-intermediate: var(--color-foreground-secondary); + --input-checkbox-foreground-color-intermediate: var(--color-background-secondary); // Checkbox color --input-checkbox-inactive-background-color: var(--color-foreground-secondary); --input-checkbox-inactive-foreground-color: var(--color-background-primary); - --input-checkbox-active-background-color: var(--color-accent-primary); - --input-checkbox-active-foreground-color: var(--color-background-primary); + --input-checkbox-background-color-active: var(--color-accent-primary); + --input-checkbox-foreground-color-active: var(--color-background-primary); --input-checkbox-text-foreground-color: var(--color-foreground-secondary); --menu-background-color: var(--color-background-tertiary); diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss index cf275fba9..c3d33b3f1 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss @@ -147,7 +147,7 @@ border-radius: $br-6; background-color: var(--input-checkbox-inactive-background-color); &.checked { - background-color: var(--input-checkbox-active-background-color); + background-color: var(--input-checkbox-background-color-active); svg { @extend .button-icon-small; stroke: var(--input-details-color); From cdc8c270dcc35bbcd79752486c44c2156850927e Mon Sep 17 00:00:00 2001 From: Eva Date: Thu, 11 Jan 2024 12:53:44 +0100 Subject: [PATCH 5/9] :bug: Fix share modal when the file has 1 file only --- frontend/src/app/main/ui/viewer/share_link.cljs | 14 +++++++++----- frontend/src/app/main/ui/viewer/share_link.scss | 8 ++++++++ 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/frontend/src/app/main/ui/viewer/share_link.cljs b/frontend/src/app/main/ui/viewer/share_link.cljs index 0c2769cc9..1c4c6e088 100644 --- a/frontend/src/app/main/ui/viewer/share_link.cljs +++ b/frontend/src/app/main/ui/viewer/share_link.cljs @@ -240,17 +240,21 @@ (tr "common.share-link.permissions-pages")] [:div {:class (stl/css :items)} (if (= 1 (count pages)) - [:div {:class (stl/css :checkbox-wrapper)} + + [:label {:for (str "page-" current-page-id) + :class (stl/css-case :global/checked true)} + + [:span {:class (stl/css :checked)} + i/status-tick-refactor] + + (:name current-page)] + [:input {:type "checkbox" :id (dm/str "page-" current-page-id) :data-page-id (dm/str current-page-id) :on-change on-mark-checked-page :checked true}] - [:label {:for (str "page-" current-page-id)} (:name current-page)] - [:span {:class (stl/css-case :checkobox-tick true - :global/checked true)} - i/status-tick-refactor] [:span (str " " (tr "common.share-link.current-tag"))]] [:* diff --git a/frontend/src/app/main/ui/viewer/share_link.scss b/frontend/src/app/main/ui/viewer/share_link.scss index 29a807c2d..259fe954b 100644 --- a/frontend/src/app/main/ui/viewer/share_link.scss +++ b/frontend/src/app/main/ui/viewer/share_link.scss @@ -187,4 +187,12 @@ @extend .input-checkbox; height: $s-32; padding: 0; + span.checked { + background-color: var(--input-checkbox-background-color-active); + border: $s-1 solid var(--input-checkbox-background-color-active); + svg { + @extend .button-icon-small; + stroke: var(--input-checkbox-foreground-color-active); + } + } } From 7f4bc246c6e9eeb52d248cd68bcc6c51f786dfa4 Mon Sep 17 00:00:00 2001 From: Eva Date: Thu, 11 Jan 2024 12:54:52 +0100 Subject: [PATCH 6/9] :bug: Fix checkbox of the file export modal --- frontend/src/app/main/ui/viewer/share_link.cljs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/main/ui/viewer/share_link.cljs b/frontend/src/app/main/ui/viewer/share_link.cljs index 1c4c6e088..8a7961a8b 100644 --- a/frontend/src/app/main/ui/viewer/share_link.cljs +++ b/frontend/src/app/main/ui/viewer/share_link.cljs @@ -245,8 +245,8 @@ [:label {:for (str "page-" current-page-id) :class (stl/css-case :global/checked true)} - [:span {:class (stl/css :checked)} - i/status-tick-refactor] + [:span {:class (stl/css :checked)} + i/status-tick-refactor] (:name current-page)] From 9ea440b6f74ae2611f768928bf893a95091c7efa Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 10 Jan 2024 22:35:31 +0100 Subject: [PATCH 7/9] :bug: Fix import from components v1 to v2 --- backend/src/app/rpc/commands/files_temp.clj | 35 ++++++++++++++++----- common/src/app/common/files/builder.cljc | 10 +++--- 2 files changed, 33 insertions(+), 12 deletions(-) diff --git a/backend/src/app/rpc/commands/files_temp.clj b/backend/src/app/rpc/commands/files_temp.clj index 2d339f0cc..9ac4f7e5e 100644 --- a/backend/src/app/rpc/commands/files_temp.clj +++ b/backend/src/app/rpc/commands/files_temp.clj @@ -14,6 +14,7 @@ [app.config :as cf] [app.db :as db] [app.db.sql :as sql] + [app.features.components-v2 :as feat.compv2] [app.features.fdata :as fdata] [app.rpc :as-alias rpc] [app.rpc.commands.files :as files] @@ -46,22 +47,26 @@ [cfg {:keys [::rpc/profile-id project-id] :as params}] (db/tx-run! cfg (fn [{:keys [::db/conn] :as cfg}] (projects/check-edition-permissions! conn profile-id project-id) - (let [team (teams/get-team conn - :profile-id profile-id - :project-id project-id) + (let [team (teams/get-team conn :profile-id profile-id :project-id project-id) ;; When we create files, we only need to respect the team ;; features, because some features can be enabled ;; globally, but the team is still not migrated properly. - features (-> (cfeat/get-team-enabled-features cf/flags team) - (cfeat/check-client-features! (:features params))) + input-features (:features params #{}) + + ;; If the imported project doesn't contain v2 we need to remove it + team-features + (cond-> (cfeat/get-team-enabled-features cf/flags team) + (not (contains? input-features "components/v2")) + (disj "components/v2")) + ;; We also include all no migration features declared by ;; client; that enables the ability to enable a runtime ;; feature on frontend and make it permanent on file - features (-> (:features params #{}) + features (-> input-features (set/intersection cfeat/no-migration-features) - (set/union features)) + (set/union team-features)) params (-> params (assoc :profile-id profile-id) @@ -100,7 +105,7 @@ ;; --- MUTATION COMMAND: persist-temp-file (defn persist-temp-file - [{:keys [::db/conn] :as cfg} {:keys [id] :as params}] + [{:keys [::db/conn] :as cfg} {:keys [id ::rpc/profile-id] :as params}] (let [file (files/get-file cfg id :migrate? false :lock-for-update? true)] @@ -109,6 +114,7 @@ (ex/raise :type :validation :code :cant-persist-already-persisted-file)) + (let [changes (->> (db/cursor conn (sql/select :file-change {:file-id id} {:order-by [[:revn :asc]]}) @@ -133,6 +139,19 @@ :revn 1 :data (blob/encode (:data file))} {:id id}) + + (let [team (teams/get-team conn :profile-id profile-id :project-id (:project-id file)) + file-features (:features file) + team-features (cfeat/get-team-enabled-features cf/flags team)] + (when (and (contains? team-features "components/v2") + (not (contains? file-features "components/v2"))) + ;; Migrate components v2 + (feat.compv2/migrate-file! cfg + (:id file) + :max-procs 2 + :validate? true + :throw-on-validate? true))) + nil))) (def ^:private schema:persist-temp-file diff --git a/common/src/app/common/files/builder.cljc b/common/src/app/common/files/builder.cljc index 0fe6b98d3..ac9b24f6e 100644 --- a/common/src/app/common/files/builder.cljc +++ b/common/src/app/common/files/builder.cljc @@ -524,7 +524,10 @@ (dissoc :main-instance-y)) obj (-> (cts/setup-shape attrs) - (check-name file root-type))] + (check-name file root-type) + ;; Components need to have nil values for frame and parent + (assoc :frame-id nil) + (assoc :parent-id nil))] (-> file (commit-change @@ -537,10 +540,9 @@ :shapes [obj]}) (assoc :last-id (:id obj)) - (update :parent-stack conjv (:id obj)) + (assoc :parent-stack [(:id obj)]) (assoc :current-component-id (:id obj)) - (assoc :current-frame-id (when (= (:type obj) :frame) - (:id obj))))))) + (assoc :current-frame-id (if (= (:type obj) :frame) (:id obj) uuid/zero)))))) (defn finish-component [file] From 28981e5d461f7e1a1f338f6d2b234e20f2414bb9 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 11 Jan 2024 17:46:50 +0100 Subject: [PATCH 8/9] :bug: Fix import of zip files from v2 to v2 --- common/src/app/common/files/builder.cljc | 7 +++++++ frontend/src/app/main/render.cljs | 2 +- frontend/src/app/worker/import.cljs | 13 ++++++++++--- 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/common/src/app/common/files/builder.cljc b/common/src/app/common/files/builder.cljc index ac9b24f6e..0f838c147 100644 --- a/common/src/app/common/files/builder.cljc +++ b/common/src/app/common/files/builder.cljc @@ -508,6 +508,7 @@ grc/empty-rect) name (:name data) path (:path data) + component-id (:component-id data) main-instance-id (:main-instance-id data) main-instance-page (:main-instance-page data) attrs (-> data @@ -547,11 +548,17 @@ (defn finish-component [file] (let [component-id (:current-component-id file) + component-data (ctkl/get-component (:data file) component-id) + component (lookup-shape file component-id) children (->> component :shapes (mapv #(lookup-shape file %))) file (cond + ;; Components-v2 component we skip this step + (and component-data (:main-instance-id component-data)) + file + (empty? children) (commit-change file diff --git a/frontend/src/app/main/render.cljs b/frontend/src/app/main/render.cljs index a9a943a27..861935a54 100644 --- a/frontend/src/app/main/render.cljs +++ b/frontend/src/app/main/render.cljs @@ -508,7 +508,7 @@ (mf/deps objects) (fn [] (frame-wrapper-factory objects)))] - [:> "symbol" #js {:id (str root-id) + [:> "symbol" #js {:id (str (:id component)) :viewBox vbox "penpot:path" path "penpot:main-instance-id" main-instance-id diff --git a/frontend/src/app/worker/import.cljs b/frontend/src/app/worker/import.cljs index cc7e3dff5..ef8abf2d6 100644 --- a/frontend/src/app/worker/import.cljs +++ b/frontend/src/app/worker/import.cljs @@ -137,7 +137,11 @@ :is-shared (:shared context) :project-id (:project-id context) :create-page false - :features features}))) + + ;; If the features object exists send that. Otherwise we remove the components/v2 because + ;; if the features attribute doesn't exist is a version < 2.0. The other features will + ;; be kept so the shapes are created full featured + :features (d/nilv (:features context) (disj features "components/v2"))}))) (defn link-file-libraries "Create a new file on the back-end" @@ -154,7 +158,8 @@ [context file] (let [file-id (:id file) session-id (uuid/next) - batches (->> (fb/generate-changes file) + changes (fb/generate-changes file) + batches (->> changes (partition change-batch-size change-batch-size nil) (mapv vec)) @@ -538,7 +543,9 @@ (rx/merge-map (comp d/kebab-keys parser/string->uuid)) (rx/mapcat (fn [[id media]] - (let [media (assoc media :id (resolve id))] + (let [media (-> media + (assoc :id (resolve id)) + (update :name str))] (->> (get-file context :media id media) (rx/map (fn [blob] (let [content (.slice blob 0 (.-size blob) (:mtype media))] From 19e40175be0c88a2d6f27dc27325be8a9a06e3f1 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 11 Jan 2024 18:05:36 +0100 Subject: [PATCH 9/9] :bug: Disable import to v1 from v2 --- common/src/app/common/files/builder.cljc | 1 - frontend/src/app/main/ui/dashboard/import.cljs | 15 +++++++++------ frontend/src/app/worker/import.cljs | 13 +++++++++++-- frontend/translations/en.po | 3 +++ frontend/translations/es.po | 3 +++ 5 files changed, 26 insertions(+), 9 deletions(-) diff --git a/common/src/app/common/files/builder.cljc b/common/src/app/common/files/builder.cljc index 0f838c147..d10b494d9 100644 --- a/common/src/app/common/files/builder.cljc +++ b/common/src/app/common/files/builder.cljc @@ -508,7 +508,6 @@ grc/empty-rect) name (:name data) path (:path data) - component-id (:component-id data) main-instance-id (:main-instance-id data) main-instance-page (:main-instance-page data) attrs (-> data diff --git a/frontend/src/app/main/ui/dashboard/import.cljs b/frontend/src/app/main/ui/dashboard/import.cljs index 2ac73e421..d207630b9 100644 --- a/frontend/src/app/main/ui/dashboard/import.cljs +++ b/frontend/src/app/main/ui/dashboard/import.cljs @@ -80,12 +80,13 @@ (assoc :deleted? true)))))) (defn set-analyze-error - [files uri] + [files uri error] (->> files (mapv (fn [file] (cond-> file (= uri (:uri file)) - (assoc :status :analyze-error)))))) + (-> (assoc :status :analyze-error) + (assoc :error error))))))) (defn set-analyze-result [files uri type data] (let [existing-files? (into #{} (->> files (map :file-id) (filter some?))) @@ -150,7 +151,6 @@ (mf/defc import-entry [{:keys [state file editing? can-be-deleted?]}] - (let [loading? (or (= :analyzing (:status file)) (= :importing (:status file))) analyze-error? (= :analyze-error (:status file)) @@ -226,7 +226,9 @@ (cond analyze-error? [:div {:class (stl/css :error-message)} - (tr "dashboard.import.analyze-error")] + (if (some? (:error file)) + (tr (:error file)) + (tr "dashboard.import.analyze-error"))] import-error? [:div {:class (stl/css :error-message)} @@ -260,13 +262,14 @@ (fn [files] (->> (uw/ask-many! {:cmd :analyze-import - :files files}) + :files files + :features @features/features-ref}) (rx/mapcat #(rx/delay emit-delay (rx/of %))) (rx/filter some?) (rx/subs! (fn [{:keys [uri data error type] :as msg}] (if (some? error) - (swap! state update :files set-analyze-error uri) + (swap! state update :files set-analyze-error uri error) (swap! state update :files set-analyze-result uri type data))))))) import-files diff --git a/frontend/src/app/worker/import.cljs b/frontend/src/app/worker/import.cljs index ef8abf2d6..b1db05f9d 100644 --- a/frontend/src/app/worker/import.cljs +++ b/frontend/src/app/worker/import.cljs @@ -632,7 +632,7 @@ "other"))) (defmethod impl/handler :analyze-import - [{:keys [files]}] + [{:keys [files features]}] (->> (rx/from files) (rx/merge-map @@ -653,7 +653,16 @@ (rx/merge-map #(zip/loadAsync (:body %))) (rx/merge-map #(get-file {:zip %} :manifest)) (rx/map (comp d/kebab-keys parser/string->uuid)) - (rx/map #(hash-map :uri (:uri file) :data % :type "application/zip"))) + (rx/map + (fn [data] + ;; Checks if the file is exported with components v2 and the current team only + ;; supports components v1 + (let [has-file-v2? + (->> (:files data) + (d/seek (fn [[_ file]] (contains? (set (:features file)) "components/v2"))))] + (if (and has-file-v2? (not (contains? features "components/v2"))) + {:uri (:uri file) :error "dashboard.import.analyze-error.components-v2"} + (hash-map :uri (:uri file) :data data :type "application/zip")))))) (->> st (rx/filter (fn [data] (= "application/octet-stream" (:type data)))) (rx/map (fn [_] diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 1d1addfc4..428cf98f5 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -534,6 +534,9 @@ msgstr "Import Penpot files" msgid "dashboard.import.analyze-error" msgstr "Oops! We couldn't import this file" +msgid "dashboard.import.analyze-error.components-v2" +msgstr "File with components v2 activated but this team doesn't support it yet." + msgid "dashboard.import.import-error" msgstr "There was a problem importing the file. The file wasn't imported." diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 8845dc484..be493d3c2 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -542,6 +542,9 @@ msgstr "Importar archivos Penpot" msgid "dashboard.import.analyze-error" msgstr "¡Vaya! No hemos podido importar el fichero" +msgid "dashboard.import.analyze-error.components-v2" +msgstr "Fichero exportado con componentes-v2 pero el equipo actual no lo soporta aún." + msgid "dashboard.import.import-error" msgstr "Hubo un problema importando el fichero. No ha podido ser importado."