From 2d527b2caf14458bc8fa7ade9cc0874facc1be14 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 7 Jun 2024 11:55:43 +0200 Subject: [PATCH 01/22] :bug: Fix issue with annotation menu rerendering --- .../sidebar/options/menus/component.cljs | 24 +++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs index fef5e2bee..0e3730166 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs @@ -38,8 +38,9 @@ (l/derived :workspace-annotations st/state)) (mf/defc component-annotation - {::mf/props :obj} - [{:keys [id shape component]}] + {::mf/props :obj + ::mf/private true} + [{:keys [id shape component rerender-fn]}] (let [main-instance? (:main-instance shape) component-id (:component-id shape) annotation (:annotation component) @@ -57,6 +58,7 @@ textarea-ref (mf/use-ref) state (mf/deref ref:annotations-state) + expanded? (:expanded state) create-id (:id-for-create state) creating? (= id create-id) @@ -84,6 +86,7 @@ (mf/deps adjust-textarea-size creating?) (fn [event] (dom/stop-propagation event) + (rerender-fn) (when-let [textarea (mf/ref-val textarea-ref)] (dom/set-value! textarea annotation) (reset! editing* false) @@ -95,6 +98,7 @@ (mf/use-fn (fn [event] (dom/stop-propagation event) + (rerender-fn) (when ^boolean main-instance? (when-let [textarea (mf/ref-val textarea-ref)] (reset! editing* true) @@ -105,6 +109,7 @@ (mf/deps creating?) (fn [event] (dom/stop-propagation event) + (rerender-fn) (when-let [textarea (mf/ref-val textarea-ref)] (let [text (dom/get-value textarea)] (when-not (str/blank? text) @@ -113,13 +118,13 @@ (when ^boolean creating? (st/emit! (dw/set-annotations-id-for-create nil)))))))) - on-delete-annotation (mf/use-fn (mf/deps shape-id component-id creating?) (fn [event] (dom/stop-propagation event) (let [on-accept (fn [] + (rerender-fn) (st/emit! ;; (ptk/data-event {::ev/name "delete-component-annotation"}) (when creating? @@ -566,6 +571,17 @@ (when can-swap? (st/emit! (dwsp/open-specialized-panel :component-swap))) (tm/schedule-on-idle #(dom/focus! (dom/get-element search-id)))))) + ;; NOTE: function needed for force rerender from the bottom + ;; components. This is because `component-annotation` + ;; component changes the component but that has no direct + ;; reflection on shape which is passed on params. So for avoid + ;; the need to modify the shape artificially we just pass a + ;; rerender helper to it via react context mechanism + rerender-fn + (mf/use-fn + (fn [] + (swap! state* update :render inc))) + menu-entries (cmm/generate-components-menu-entries shapes components-v2) show-menu? (seq menu-entries) path (->> component (:path) (cfh/split-path) (cfh/join-path-with-dot))] @@ -631,6 +647,6 @@ [:& component-swap {:shapes copies}]) (when (and (not swap-opened?) (not multi) components-v2) - [:& component-annotation {:id id :shape shape :component component}]) + [:& component-annotation {:id id :shape shape :component component :rerender-fn rerender-fn}]) (when (dbg/enabled? :display-touched) [:div ":touched " (str (:touched shape))])])]))) From 6896a4e9f04993a01f8c2fedda3cdcdf5f732322 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 11 Jun 2024 10:51:38 +0200 Subject: [PATCH 02/22] :sparkles: Add minor improvements on how logout is handled The profile-id is now required on the body of logout request --- backend/src/app/rpc/commands/auth.clj | 15 ++++++++++++--- frontend/src/app/main/data/users.cljs | 14 +++++++++----- 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/backend/src/app/rpc/commands/auth.clj b/backend/src/app/rpc/commands/auth.clj index 4073de2c3..b38fa83b5 100644 --- a/backend/src/app/rpc/commands/auth.clj +++ b/backend/src/app/rpc/commands/auth.clj @@ -130,12 +130,21 @@ ;; ---- COMMAND: Logout +(def ^:private schema:logout + [:map {:title "logoug"} + [:profile-id {:optional true} ::sm/uuid]]) + (sv/defmethod ::logout "Clears the authentication cookie and logout the current session." {::rpc/auth false - ::doc/added "1.15"} - [cfg _] - (rph/with-transform {} (session/delete-fn cfg))) + ::doc/changes [["2.1" "Now requires profile-id passed in the body"]] + ::doc/added "1.0" + ::sm/params schema:logout} + [cfg params] + (if (= (:profile-id params) + (::rpc/profile-id params)) + (rph/with-transform {} (session/delete-fn cfg)) + {})) ;; ---- COMMAND: Recover Profile diff --git a/frontend/src/app/main/data/users.cljs b/frontend/src/app/main/data/users.cljs index e49925038..e4f8c4d07 100644 --- a/frontend/src/app/main/data/users.cljs +++ b/frontend/src/app/main/data/users.cljs @@ -328,11 +328,15 @@ (-data [_] {}) ptk/WatchEvent - (watch [_ _ _] - (->> (rp/cmd! :logout) - (rx/delay-at-least 300) - (rx/catch (constantly (rx/of 1))) - (rx/map #(logged-out params))))))) + (watch [_ state _] + (let [profile-id (:profile-id state)] + (->> (rx/interval 500) + (rx/take 1) + (rx/mapcat (fn [_] + (->> (rp/cmd! :logout {:profile-id profile-id}) + (rx/delay-at-least 300) + (rx/catch (constantly (rx/of 1)))))) + (rx/map #(logged-out params)))))))) ;; --- Update Profile From c14f6aecf354fad02722796049b0d6dff35a90e3 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 11 Jun 2024 10:56:02 +0200 Subject: [PATCH 03/22] :paperclip: Update THANKYOU.md file --- THANKYOU.md | 1 + 1 file changed, 1 insertion(+) diff --git a/THANKYOU.md b/THANKYOU.md index 77a1483aa..17627df25 100644 --- a/THANKYOU.md +++ b/THANKYOU.md @@ -7,6 +7,7 @@ We want to thank to the amazing people that help us! Thank you! You're the best! * [Shiraz Ali Khan](https://www.linkedin.com/in/shiraz-ali-khan-1ba508180/) * Vaibhav Shukla * Hassan Ahmed (Alias Xen Lee) +* Michal Biesiada (@mbiesiad) ## Internationalization * [00ff88](https://hosted.weblate.org/user/00ff88) From eba6f519533257b46f7329e2be2fb17f6fa21599 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 11 Jun 2024 10:56:45 +0200 Subject: [PATCH 04/22] :paperclip: Update THANKYOU.md file --- THANKYOU.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/THANKYOU.md b/THANKYOU.md index 17627df25..8c075112b 100644 --- a/THANKYOU.md +++ b/THANKYOU.md @@ -2,7 +2,11 @@ We want to thank to the amazing people that help us! Thank you! You're the best! +Feel free you make a PR updating this file if you miss you in the +list. + ## Security + * Husnain Iqbal (CEO OF ALPHA INFERNO PVT LTD) * [Shiraz Ali Khan](https://www.linkedin.com/in/shiraz-ali-khan-1ba508180/) * Vaibhav Shukla @@ -10,6 +14,7 @@ We want to thank to the amazing people that help us! Thank you! You're the best! * Michal Biesiada (@mbiesiad) ## Internationalization + * [00ff88](https://hosted.weblate.org/user/00ff88) * [AhmadHB](https://hosted.weblate.org/user/AhmadHB) * [Aimee](https://hosted.weblate.org/user/Aimee) @@ -91,6 +96,7 @@ We want to thank to the amazing people that help us! Thank you! You're the best! * [zcraber](https://hosted.weblate.org/user/zcraber) ## Libraries & templates + * systxema * plumilla * victor crespo From 0e0ceaa9bfd77331e4f08f4fa1897488ccd101aa Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Mon, 10 Jun 2024 13:04:30 +0200 Subject: [PATCH 05/22] :bug: Fix move guides with board --- CHANGES.md | 1 + .../src/app/main/data/workspace/guides.cljs | 11 ++-- .../app/main/data/workspace/modifiers.cljs | 2 +- .../logic/frame_guides_test.cljs | 57 +++++++++++++++++++ 4 files changed, 65 insertions(+), 6 deletions(-) create mode 100644 frontend/test/frontend_tests/logic/frame_guides_test.cljs diff --git a/CHANGES.md b/CHANGES.md index bbb9796e0..5999d5c16 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -19,6 +19,7 @@ ### :bug: Bugs fixed +- Fix guides move when board is moved by inputs [Taiga 8010](https://tree.taiga.io/project/penpot/issue/8010) - Fix clickable area of Penptot logo in the viewer [Taiga #7988](https://tree.taiga.io/project/penpot/issue/7988) - Fix constraints dropdown when selecting multiple shapes [Taiga #7686](https://tree.taiga.io/project/penpot/issue/7686) - Layout and scrollign fixes for the bottom palette [Taiga #7559](https://tree.taiga.io/project/penpot/issue/7559) diff --git a/frontend/src/app/main/data/workspace/guides.cljs b/frontend/src/app/main/data/workspace/guides.cljs index 404787341..4e2895bb2 100644 --- a/frontend/src/app/main/data/workspace/guides.cljs +++ b/frontend/src/app/main/data/workspace/guides.cljs @@ -79,20 +79,21 @@ (rx/from (->> guides (mapv #(remove-guide %)))))))) (defmethod ptk/resolve ::move-frame-guides - [_ ids] + [_ args] (dm/assert! "expected a coll of uuids" - (every? uuid? ids)) + (every? uuid? (:ids args))) (ptk/reify ::move-frame-guides ptk/WatchEvent (watch [_ state _] - (let [objects (wsh/lookup-page-objects state) + (let [ids (:ids args) + object-modifiers (:modifiers args) + + objects (wsh/lookup-page-objects state) is-frame? (fn [id] (= :frame (get-in objects [id :type]))) frame-ids? (into #{} (filter is-frame?) ids) - object-modifiers (get state :workspace-modifiers) - build-move-event (fn [guide] (let [frame (get objects (:frame-id guide)) diff --git a/frontend/src/app/main/data/workspace/modifiers.cljs b/frontend/src/app/main/data/workspace/modifiers.cljs index ace8816c5..74e243af8 100644 --- a/frontend/src/app/main/data/workspace/modifiers.cljs +++ b/frontend/src/app/main/data/workspace/modifiers.cljs @@ -497,7 +497,7 @@ (if undo-transation? (rx/of (dwu/start-undo-transaction undo-id)) (rx/empty)) - (rx/of (ptk/event ::dwg/move-frame-guides ids-with-children) + (rx/of (ptk/event ::dwg/move-frame-guides {:ids ids-with-children :modifiers object-modifiers}) (ptk/event ::dwcm/move-frame-comment-threads ids-with-children) (dwsh/update-shapes ids diff --git a/frontend/test/frontend_tests/logic/frame_guides_test.cljs b/frontend/test/frontend_tests/logic/frame_guides_test.cljs new file mode 100644 index 000000000..8d1217973 --- /dev/null +++ b/frontend/test/frontend_tests/logic/frame_guides_test.cljs @@ -0,0 +1,57 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; Copyright (c) KALEIDOS INC +(ns frontend-tests.logic.frame-guides-test + (:require + [app.common.test-helpers.compositions :as ctho] + [app.common.test-helpers.files :as cthf] + [app.common.test-helpers.shapes :as cths] + [app.common.uuid :as uuid] + [app.main.data.workspace :as dw] + [app.main.data.workspace.guides :as-alias dwg] + [cljs.test :as t :include-macros true] + [frontend-tests.helpers.pages :as thp] + [frontend-tests.helpers.state :as ths])) + +(t/use-fixtures :each + {:before thp/reset-idmap!}) + + +(t/deftest test-remove-swap-slot-copy-paste-blue1-to-root + (t/async + done + (let [;; ==== Setup + file (-> (cthf/sample-file :file1) + (ctho/add-frame :frame1)) + store (ths/setup-store file) + frame1 (cths/get-shape file :frame1) + + guide {:axis :x + :frame-id (:id frame1) + :id (uuid/next) + :position 0} + + ;; ==== Action + events + [(dw/update-guides guide) + (dw/update-position (:id frame1) {:x 100})]] + + (ths/run-store + store done events + (fn [new-state] + (let [;; ==== Get + file' (ths/get-file-from-store new-state) + page' (cthf/current-page file') + + guide' (-> page' + :options + :guides + (vals) + (first))] + ;; ==== Check + ;; guide has moved + (t/is (= (:position guide') 100)))))))) + + From 40570849817a916bf5fa03de20f4c712f88b6fec Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 11 Jun 2024 11:54:17 +0200 Subject: [PATCH 06/22] :sparkles: Improve how email is passed on post-signup page --- frontend/src/app/main/ui/auth/register.cljs | 101 ++++++++++++-------- 1 file changed, 62 insertions(+), 39 deletions(-) diff --git a/frontend/src/app/main/ui/auth/register.cljs b/frontend/src/app/main/ui/auth/register.cljs index 91ed32601..54da6e976 100644 --- a/frontend/src/app/main/ui/auth/register.cljs +++ b/frontend/src/app/main/ui/auth/register.cljs @@ -20,6 +20,7 @@ [app.main.ui.icons :as i] [app.util.i18n :refer [tr tr-html]] [app.util.router :as rt] + [app.util.storage :as sto] [beicon.v2.core :as rx] [cljs.spec.alpha :as s] [rumext.v2 :as mf])) @@ -163,11 +164,7 @@ ;; --- PAGE: register validation -(defn- handle-register-error - [_form _data] - (st/emit! (msg/error (tr "errors.generic")))) - -(defn- handle-register-success +(defn- on-register-success [data] (cond (some? (:invitation-token data)) @@ -178,7 +175,9 @@ (st/emit! (du/login-from-register)) :else - (st/emit! (rt/nav :auth-register-success {} {:email (:email data)})))) + (do + (swap! sto/storage assoc ::email (:email data)) + (st/emit! (rt/nav :auth-register-success))))) (s/def ::accept-terms-and-privacy (s/and ::us/boolean true?)) (s/def ::accept-newsletter-subscription ::us/boolean) @@ -192,31 +191,63 @@ :opt-un [::accept-terms-and-privacy ::accept-newsletter-subscription]))) +(mf/defc terms-and-privacy + {::mf/props :obj + ::mf/private true} + [] + (let [terms-label + (mf/html + [:& tr-html + {:tag-name "div" + :label "auth.terms-and-privacy-agreement" + :params [cf/terms-of-service-uri cf/privacy-policy-uri]}])] + + [:div {:class (stl/css :fields-row :input-visible :accept-terms-and-privacy-wrapper)} + [:& fm/input {:name :accept-terms-and-privacy + :class (stl/css :checkbox-terms-and-privacy) + :type "checkbox" + :default-checked false + :label terms-label}]])) + (mf/defc register-validate-form + {::mf/props :obj} [{:keys [params on-success-callback]}] - (let [form (fm/use-form :spec ::register-validate-form - :validators [(fm/validate-not-empty :fullname (tr "auth.name.not-all-space")) - (fm/validate-length :fullname fm/max-length-allowed (tr "auth.name.too-long"))] + (let [validators (mf/with-memo [] + [(fm/validate-not-empty :fullname (tr "auth.name.not-all-space")) + (fm/validate-length :fullname fm/max-length-allowed (tr "auth.name.too-long"))]) + + form (fm/use-form :spec ::register-validate-form + :validators validators :initial params) + submitted? (mf/use-state false) - on-success (fn [p] - (if (nil? on-success-callback) - (handle-register-success p) - (on-success-callback (:email p)))) + on-success + (mf/use-fn + (mf/deps on-success-callback) + (fn [params] + (if (nil? on-success-callback) + (on-register-success params) + (on-success-callback (:email params))))) + + on-error + (mf/use-fn + (fn [_cause] + (st/emit! (msg/error (tr "errors.generic"))))) on-submit (mf/use-fn - (fn [form _event] + (fn [form _] (reset! submitted? true) (let [params (:clean-data @form)] (->> (rp/cmd! :register-profile params) (rx/finalize #(reset! submitted? false)) - (rx/subs! on-success - (partial handle-register-error form))))))] + (rx/subs! on-success on-error)))))] - [:& fm/form {:on-submit on-submit :form form + [:& fm/form {:on-submit on-submit + :form form :class (stl/css :register-validate-form)} + [:div {:class (stl/css :fields-row)} [:& fm/input {:name :fullname :label (tr "auth.fullname") @@ -225,18 +256,7 @@ :class (stl/css :form-field)}]] (when (contains? cf/flags :terms-and-privacy-checkbox) - (let [terms-label - (mf/html - [:& tr-html - {:tag-name "div" - :label "auth.terms-and-privacy-agreement" - :params [cf/terms-of-service-uri cf/privacy-policy-uri]}])] - [:div {:class (stl/css :fields-row :input-visible :accept-terms-and-privacy-wrapper)} - [:& fm/input {:name :accept-terms-and-privacy - :class (stl/css :checkbox-terms-and-privacy) - :type "checkbox" - :default-checked false - :label terms-label}]])) + [:& terms-and-privacy]) [:> fm/submit-button* {:label (tr "auth.register-submit") @@ -245,6 +265,7 @@ (mf/defc register-validate-page + {::mf/props :obj} [{:keys [params]}] [:div {:class (stl/css :auth-form-wrapper)} [:h1 {:class (stl/css :logo-container)} @@ -263,13 +284,15 @@ (tr "labels.go-back")]]]]) (mf/defc register-success-page - [{:keys [params]}] - [:div {:class (stl/css :auth-form-wrapper :register-success)} - [:h1 {:class (stl/css :logo-container)} - [:a {:href "#/" :title "Penpot" :class (stl/css :logo-btn)} i/logo]] - [:div {:class (stl/css :auth-title-wrapper)} - [:h2 {:class (stl/css :auth-title)} - (tr "auth.check-mail")] - [:div {:class (stl/css :notification-text)} (tr "auth.verification-email-sent")]] - [:div {:class (stl/css :notification-text-email)} (:email params "")] - [:div {:class (stl/css :notification-text)} (tr "auth.check-your-email")]]) + {::mf/props :obj} + [] + (let [email (::email @sto/storage)] + [:div {:class (stl/css :auth-form-wrapper :register-success)} + [:h1 {:class (stl/css :logo-container)} + [:a {:href "#/" :title "Penpot" :class (stl/css :logo-btn)} i/logo]] + [:div {:class (stl/css :auth-title-wrapper)} + [:h2 {:class (stl/css :auth-title)} + (tr "auth.check-mail")] + [:div {:class (stl/css :notification-text)} (tr "auth.verification-email-sent")]] + [:div {:class (stl/css :notification-text-email)} email] + [:div {:class (stl/css :notification-text)} (tr "auth.check-your-email")]])) From a90baa91c7f590a4e223a3b8e648116d7b64afb8 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Fri, 7 Jun 2024 13:35:04 +0200 Subject: [PATCH 07/22] :sparkles: Add integration test to the onboarding process --- frontend/playwright/ui/pages/DashboardPage.js | 5 --- .../playwright/ui/pages/OnboardingPage.js | 45 +++++++++++++++++++ .../playwright/ui/specs/dashboard.spec.js | 5 +++ .../playwright/ui/specs/onboarding.spec.js | 32 +++++++++++++ 4 files changed, 82 insertions(+), 5 deletions(-) create mode 100644 frontend/playwright/ui/pages/OnboardingPage.js create mode 100644 frontend/playwright/ui/specs/onboarding.spec.js diff --git a/frontend/playwright/ui/pages/DashboardPage.js b/frontend/playwright/ui/pages/DashboardPage.js index 285e47d95..e83c62dd9 100644 --- a/frontend/playwright/ui/pages/DashboardPage.js +++ b/frontend/playwright/ui/pages/DashboardPage.js @@ -4,11 +4,6 @@ export class DashboardPage extends BaseWebSocketPage { static async init(page) { await BaseWebSocketPage.initWebSockets(page); - await BaseWebSocketPage.mockRPC( - page, - "get-profile", - "logged-in-user/get-profile-logged-in-no-onboarding.json", - ); await BaseWebSocketPage.mockRPC(page, "get-teams", "logged-in-user/get-teams-default.json"); await BaseWebSocketPage.mockRPC( page, diff --git a/frontend/playwright/ui/pages/OnboardingPage.js b/frontend/playwright/ui/pages/OnboardingPage.js new file mode 100644 index 000000000..0fe68e78a --- /dev/null +++ b/frontend/playwright/ui/pages/OnboardingPage.js @@ -0,0 +1,45 @@ +import { BaseWebSocketPage } from "./BaseWebSocketPage"; + +export class OnboardingPage extends BaseWebSocketPage { + constructor(page) { + super(page); + this.submitButton = page.getByRole("Button",{ name: "Next" }) + } + + async fillOnboardingInputsStep1() { + await this.page.getByText('Personal').click(); + await this.page.getByText('Select option').click(); + await this.page.getByText('Testing before self-hosting').click(); + + await this.submitButton.click(); + } + + async fillOnboardingInputsStep2() { + await this.page.getByText('Figma').click(); + + await this.submitButton.click(); + } + + async fillOnboardingInputsStep3() { + await this.page.getByText('Select option').first().click(); + await this.page.getByText('Product Managment').click(); + await this.page.getByText('Select option').first().click(); + await this.page.getByText('Director').click(); + await this.page.getByText('Select option').click(); + await this.page.getByText('11-30').click(); + + await this.submitButton.click(); + } + + async fillOnboardingInputsStep4() { + await this.page.getByText('Other').click(); + await this.page.getByPlaceholder('Other (specify)').fill("Another"); + await this.submitButton.click(); + } + + async fillOnboardingInputsStep5() { + await this.page.getByText('Event').click(); + } +} + +export default OnboardingPage; diff --git a/frontend/playwright/ui/specs/dashboard.spec.js b/frontend/playwright/ui/specs/dashboard.spec.js index 145c1321a..23e71efad 100644 --- a/frontend/playwright/ui/specs/dashboard.spec.js +++ b/frontend/playwright/ui/specs/dashboard.spec.js @@ -3,6 +3,11 @@ import DashboardPage from "../pages/DashboardPage"; test.beforeEach(async ({ page }) => { await DashboardPage.init(page); + await DashboardPage.mockRPC( + page, + "get-profile", + "logged-in-user/get-profile-logged-in-no-onboarding.json", + ); }); test("Dashboad page has title ", async ({ page }) => { diff --git a/frontend/playwright/ui/specs/onboarding.spec.js b/frontend/playwright/ui/specs/onboarding.spec.js new file mode 100644 index 000000000..39efa967c --- /dev/null +++ b/frontend/playwright/ui/specs/onboarding.spec.js @@ -0,0 +1,32 @@ +import { test, expect } from "@playwright/test"; +import DashboardPage from "../pages/DashboardPage"; + import OnboardingPage from "../pages/OnboardingPage" + +test.beforeEach(async ({ page }) => { + await DashboardPage.init(page); + await DashboardPage.mockRPC(page, "get-profile", "logged-in-user/get-profile-logged-in.json"); +}); + + +test("User can complete the onboarding", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + const onboardingPage = new OnboardingPage(page); + + await dashboardPage.goToWorkspace(); + await expect(page.getByRole("heading", { name: "Help us get to know you" })).toBeVisible(); + + await onboardingPage.fillOnboardingInputsStep1(); + await expect(page.getByRole("heading", { name: "Which one of these tools do" })).toBeVisible(); + + await onboardingPage.fillOnboardingInputsStep2(); + await expect(page.getByRole("heading", { name: "Tell us about your job" })).toBeVisible(); + + await onboardingPage.fillOnboardingInputsStep3(); + await expect(page.getByRole("heading", { name: "Where would you like to get" })).toBeVisible(); + + await onboardingPage.fillOnboardingInputsStep4(); + await expect(page.getByRole("heading", { name: "How did you hear about Penpot?" })).toBeVisible(); + + await onboardingPage.fillOnboardingInputsStep5(); + await expect(page.getByRole("button", { name: "Start" })).toBeEnabled(); +}); From 04f341ce1dcb7df41674e5944eccfd75cf5b702b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Tue, 11 Jun 2024 13:37:32 +0200 Subject: [PATCH 08/22] :bug: Fix layers tree not expanding towards the bottom edge --- CHANGES.md | 3 ++- frontend/playwright/ui/pages/WorkspacePage.js | 24 +++++++++++-------- frontend/playwright/ui/specs/sidebar.spec.js | 23 ++++++++++++++++++ .../playwright/ui/specs/workspace.spec.js | 17 ++++++++----- .../app/main/ui/components/tab_container.cljs | 1 - .../src/app/main/ui/workspace/sidebar.cljs | 9 ++++--- .../src/app/main/ui/workspace/sidebar.scss | 2 -- .../app/main/ui/workspace/sidebar/layers.cljs | 2 +- .../main/ui/workspace/sidebar/sitemap.cljs | 1 - 9 files changed, 57 insertions(+), 25 deletions(-) create mode 100644 frontend/playwright/ui/specs/sidebar.spec.js diff --git a/CHANGES.md b/CHANGES.md index 5999d5c16..beeea77a4 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -19,7 +19,8 @@ ### :bug: Bugs fixed -- Fix guides move when board is moved by inputs [Taiga 8010](https://tree.taiga.io/project/penpot/issue/8010) +- Fix layer tree not expanding to the bottom edge [Taiga #7466](https://tree.taiga.io/project/penpot/issue/7466) +- Fix guides move when board is moved by inputs [Taiga #8010](https://tree.taiga.io/project/penpot/issue/8010) - Fix clickable area of Penptot logo in the viewer [Taiga #7988](https://tree.taiga.io/project/penpot/issue/7988) - Fix constraints dropdown when selecting multiple shapes [Taiga #7686](https://tree.taiga.io/project/penpot/issue/7686) - Layout and scrollign fixes for the bottom palette [Taiga #7559](https://tree.taiga.io/project/penpot/issue/7559) diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js index 72e0fa9fd..e2c7b11d8 100644 --- a/frontend/playwright/ui/pages/WorkspacePage.js +++ b/frontend/playwright/ui/pages/WorkspacePage.js @@ -45,10 +45,9 @@ export class WorkspacePage extends BaseWebSocketPage { this.rootShape = page.locator(`[id="shape-00000000-0000-0000-0000-000000000000"]`); this.rectShapeButton = page.getByRole("button", { name: "Rectangle (R)" }); this.colorpicker = page.getByTestId("colorpicker"); - this.layers = page.getByTestId("layers"); + this.layers = page.getByTestId("layer-tree"); this.palette = page.getByTestId("palette"); - this.assets = page.getByTestId("assets"); - this.libraries = page.getByTestId("libraries"); + this.sidebar = page.getByTestId("left-sidebar"); this.closeLibraries = page.getByTestId("close-libraries"); this.librariesModal = page.getByTestId("libraries-modal"); } @@ -102,6 +101,11 @@ export class WorkspacePage extends BaseWebSocketPage { await this.page.mouse.up(); } + async togglePages() { + const pagesToggle = this.page.getByText("Pages"); + await pagesToggle.click(); + } + async clickLeafLayer(name, clickOptions = {}) { const layer = this.layers.getByText(name); await layer.click(clickOptions); @@ -113,15 +117,17 @@ export class WorkspacePage extends BaseWebSocketPage { } async expectSelectedLayer(name) { - await expect(this.layers.getByTestId("layer-row").filter({ has: this.page.getByText(name) })).toHaveClass(/selected/); + await expect(this.layers.getByTestId("layer-row").filter({ has: this.page.getByText(name) })).toHaveClass( + /selected/, + ); } async clickAssets(clickOptions = {}) { - await this.assets.click(clickOptions); + await this.sidebar.getByText("Assets").click(clickOptions); } async clickLibraries(clickOptions = {}) { - await this.libraries.click(clickOptions); + await this.sidebar.getByText("Libraries").click(clickOptions); } async clickLibrary(name, clickOptions = {}) { @@ -129,7 +135,7 @@ export class WorkspacePage extends BaseWebSocketPage { .getByTestId("library-item") .filter({ hasText: name }) .getByRole("button") - .click(clickOptions); + .click(clickOptions); } async clickCloseLibraries(clickOptions = {}) { @@ -137,8 +143,6 @@ export class WorkspacePage extends BaseWebSocketPage { } async clickColorPalette(clickOptions = {}) { - await this.palette - .getByRole("button", { name: "Color Palette (Alt+P)" }) - .click(clickOptions); + await this.palette.getByRole("button", { name: "Color Palette (Alt+P)" }).click(clickOptions); } } diff --git a/frontend/playwright/ui/specs/sidebar.spec.js b/frontend/playwright/ui/specs/sidebar.spec.js new file mode 100644 index 000000000..f88fd613c --- /dev/null +++ b/frontend/playwright/ui/specs/sidebar.spec.js @@ -0,0 +1,23 @@ +import { test, expect } from "@playwright/test"; +import { WorkspacePage } from "../pages/WorkspacePage"; + +test.beforeEach(async ({ page }) => { + await WorkspacePage.init(page); +}); + +test.describe("Layers tab", () => { + test("BUG 7466 - Layers tab height extends to the bottom when 'Pages' is collapsed", async ({ page }) => { + const workspace = new WorkspacePage(page); + await workspace.setupEmptyFile(); + + await workspace.goToWorkspace(); + + const { height: heightExpanded } = await workspace.layers.boundingBox(); + await workspace.togglePages(); + const { height: heightCollapsed } = await workspace.layers.boundingBox(); + + console.log(heightExpanded, heightCollapsed); + + expect(heightExpanded > heightCollapsed); + }); +}); diff --git a/frontend/playwright/ui/specs/workspace.spec.js b/frontend/playwright/ui/specs/workspace.spec.js index f391949b4..c0d495b7e 100644 --- a/frontend/playwright/ui/specs/workspace.spec.js +++ b/frontend/playwright/ui/specs/workspace.spec.js @@ -44,8 +44,11 @@ test("User adds a library and its automatically selected in the color palette", await workspacePage.setupEmptyFile(); await workspacePage.mockRPC("link-file-to-library", "workspace/link-file-to-library.json"); await workspacePage.mockRPC("unlink-file-from-library", "workspace/unlink-file-from-library.json"); - await workspacePage.mockRPC("get-team-shared-files?team-id=*", "workspace/get-team-shared-libraries-non-empty.json"); - + await workspacePage.mockRPC( + "get-team-shared-files?team-id=*", + "workspace/get-team-shared-libraries-non-empty.json", + ); + await workspacePage.goToWorkspace(); // Add Testing library 1 @@ -54,17 +57,19 @@ test("User adds a library and its automatically selected in the color palette", // Now the get-file call should return a library await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-library.json"); await workspacePage.clickLibraries(); - await workspacePage.clickLibrary("Testing library 1") - await workspacePage.clickCloseLibraries(); + await workspacePage.clickLibrary("Testing library 1"); + await workspacePage.clickCloseLibraries(); await expect(workspacePage.palette.getByRole("button", { name: "test-color-187cd5" })).toBeVisible(); // Remove Testing library 1 await workspacePage.clickLibraries(); - await workspacePage.clickLibrary("Testing library 1") + await workspacePage.clickLibrary("Testing library 1"); await workspacePage.clickCloseLibraries(); - await expect(workspacePage.palette.getByText('There are no color styles in your library yet')).toBeVisible(); + await expect( + workspacePage.palette.getByText("There are no color styles in your library yet"), + ).toBeVisible(); }); diff --git a/frontend/src/app/main/ui/components/tab_container.cljs b/frontend/src/app/main/ui/components/tab_container.cljs index 1e3b99079..20c79a417 100644 --- a/frontend/src/app/main/ui/components/tab_container.cljs +++ b/frontend/src/app/main/ui/components/tab_container.cljs @@ -59,7 +59,6 @@ [:div {:key (str/concat "tab-" sid) :title tooltip :data-id sid - :data-testid sid :on-click on-click :class (stl/css-case :tab-container-tab-title true diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index d64842075..1aaf88c7b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -38,8 +38,7 @@ (let [options-mode (mf/deref refs/options-mode-global) mode-inspect? (= options-mode :inspect) project (mf/deref refs/workspace-project) - show-pages? (mf/use-state true) - toggle-pages (mf/use-callback #(reset! show-pages? not)) + section (cond (or mode-inspect? (contains? layout :layers)) :layers (contains? layout :assets) :assets) @@ -50,9 +49,12 @@ {on-pointer-down :on-pointer-down on-lost-pointer-capture :on-lost-pointer-capture on-pointer-move :on-pointer-move parent-ref :parent-ref size :size} (use-resize-hook :left-sidebar 275 275 500 :x false :left) - {on-pointer-down-pages :on-pointer-down on-lost-pointer-capture-pages :on-lost-pointer-capture on-pointer-move-pages :on-pointer-move size-pages :size} + {on-pointer-down-pages :on-pointer-down on-lost-pointer-capture-pages :on-lost-pointer-capture on-pointer-move-pages :on-pointer-move size-pages-opened :size} (use-resize-hook :sitemap 200 38 400 :y false nil) + show-pages? (mf/use-state true) + toggle-pages (mf/use-callback #(reset! show-pages? not)) + size-pages (mf/use-memo (mf/deps show-pages? size-pages-opened) (fn [] (if @show-pages? size-pages-opened 32))) handle-collapse (mf/use-fn #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar))) @@ -63,6 +65,7 @@ [:& (mf/provider muc/sidebar) {:value :left} [:aside {:ref parent-ref :id "left-sidebar-aside" + :data-testid "left-sidebar" :data-size (str size) :class (stl/css-case :left-settings-bar true :global/two-row (<= size 300) diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss index 192a8416e..f70e37e5e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/sidebar.scss @@ -84,10 +84,8 @@ $width-settings-bar-max: $s-500; .resize-area-horiz { position: absolute; - // top: calc($s-88 + var(--height, 200px)); left: 0; width: 100%; - // height: $s-8; border-bottom: $s-2 solid var(--resize-area-border-color); cursor: ns-resize; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index 737f80fdd..ec072f367 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -510,7 +510,7 @@ (mf/use-fn #(st/emit! (dw/toggle-focus-mode)))] - [:div#layers {:class (stl/css :layers) :data-testid "layers"} + [:div#layers {:class (stl/css :layers) :data-testid "layer-tree"} (if (d/not-empty? focus) [:div {:class (stl/css :tool-window-bar)} [:button {:class (stl/css :focus-title) diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs index 39064f7c7..1d9cc9e4d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs @@ -205,7 +205,6 @@ (fn [event] (st/emit! (dw/create-page {:file-id file-id :project-id project-id})) (-> event dom/get-current-target dom/blur!))) - size (if show-pages? size 32) read-only? (mf/use-ctx ctx/workspace-read-only?)] [:div {:class (stl/css :sitemap) From 7719cd8d0b6cdd182b1ba649f02d9b9f5ec29e30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Tue, 11 Jun 2024 15:43:28 +0200 Subject: [PATCH 09/22] :recycle: Move libraries test to sidebar spec file --- frontend/playwright/ui/specs/sidebar.spec.js | 35 ++++++++++++++++ .../playwright/ui/specs/workspace.spec.js | 40 ++----------------- 2 files changed, 38 insertions(+), 37 deletions(-) diff --git a/frontend/playwright/ui/specs/sidebar.spec.js b/frontend/playwright/ui/specs/sidebar.spec.js index f88fd613c..9333749f8 100644 --- a/frontend/playwright/ui/specs/sidebar.spec.js +++ b/frontend/playwright/ui/specs/sidebar.spec.js @@ -21,3 +21,38 @@ test.describe("Layers tab", () => { expect(heightExpanded > heightCollapsed); }); }); + +test.describe("Assets tab", () => { + test("User adds a library and its automatically selected in the color palette", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await workspacePage.setupEmptyFile(); + await workspacePage.mockRPC("link-file-to-library", "workspace/link-file-to-library.json"); + await workspacePage.mockRPC("unlink-file-from-library", "workspace/unlink-file-from-library.json"); + await workspacePage.mockRPC( + "get-team-shared-files?team-id=*", + "workspace/get-team-shared-libraries-non-empty.json", + ); + + await workspacePage.goToWorkspace(); + + // Add Testing library 1 + await workspacePage.clickColorPalette(); + await workspacePage.clickAssets(); + // Now the get-file call should return a library + await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-library.json"); + await workspacePage.clickLibraries(); + await workspacePage.clickLibrary("Testing library 1"); + await workspacePage.clickCloseLibraries(); + + await expect(workspacePage.palette.getByRole("button", { name: "test-color-187cd5" })).toBeVisible(); + + // Remove Testing library 1 + await workspacePage.clickLibraries(); + await workspacePage.clickLibrary("Testing library 1"); + await workspacePage.clickCloseLibraries(); + + await expect( + workspacePage.palette.getByText("There are no color styles in your library yet"), + ).toBeVisible(); + }); +}); diff --git a/frontend/playwright/ui/specs/workspace.spec.js b/frontend/playwright/ui/specs/workspace.spec.js index c0d495b7e..c96967384 100644 --- a/frontend/playwright/ui/specs/workspace.spec.js +++ b/frontend/playwright/ui/specs/workspace.spec.js @@ -39,49 +39,15 @@ test("User draws a rect", async ({ page }) => { await expect(shape).toHaveAttribute("height", "100"); }); -test("User adds a library and its automatically selected in the color palette", async ({ page }) => { - const workspacePage = new WorkspacePage(page); - await workspacePage.setupEmptyFile(); - await workspacePage.mockRPC("link-file-to-library", "workspace/link-file-to-library.json"); - await workspacePage.mockRPC("unlink-file-from-library", "workspace/unlink-file-from-library.json"); - await workspacePage.mockRPC( - "get-team-shared-files?team-id=*", - "workspace/get-team-shared-libraries-non-empty.json", - ); - - await workspacePage.goToWorkspace(); - - // Add Testing library 1 - await workspacePage.clickColorPalette(); - await workspacePage.clickAssets(); - // Now the get-file call should return a library - await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-library.json"); - await workspacePage.clickLibraries(); - await workspacePage.clickLibrary("Testing library 1"); - await workspacePage.clickCloseLibraries(); - - await expect(workspacePage.palette.getByRole("button", { name: "test-color-187cd5" })).toBeVisible(); - - // Remove Testing library 1 - await workspacePage.clickLibraries(); - await workspacePage.clickLibrary("Testing library 1"); - await workspacePage.clickCloseLibraries(); - - await expect( - workspacePage.palette.getByText("There are no color styles in your library yet"), - ).toBeVisible(); -}); - - test("User makes a group", async ({ page }) => { const workspacePage = new WorkspacePage(page); await workspacePage.setupEmptyFile(); await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-not-empty.json"); await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-create-rect.json"); - await workspacePage.goToWorkspace({ - fileId: "6191cd35-bb1f-81f7-8004-7cc63d087374", - pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375" + await workspacePage.goToWorkspace({ + fileId: "6191cd35-bb1f-81f7-8004-7cc63d087374", + pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375", }); await workspacePage.clickLeafLayer("Rectangle"); await workspacePage.page.keyboard.press("ControlOrMeta+g"); From f417445f31325370100aea478acb982d11b5fc62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Tue, 11 Jun 2024 15:48:18 +0200 Subject: [PATCH 10/22] :sparkles: Refactor WorkspacePage so it has more semantic locators --- frontend/playwright/ui/pages/WorkspacePage.js | 7 +++---- frontend/playwright/ui/specs/sidebar.spec.js | 8 ++++---- frontend/src/app/main/ui/workspace/libraries.cljs | 2 +- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js index e2c7b11d8..131f94943 100644 --- a/frontend/playwright/ui/pages/WorkspacePage.js +++ b/frontend/playwright/ui/pages/WorkspacePage.js @@ -48,7 +48,6 @@ export class WorkspacePage extends BaseWebSocketPage { this.layers = page.getByTestId("layer-tree"); this.palette = page.getByTestId("palette"); this.sidebar = page.getByTestId("left-sidebar"); - this.closeLibraries = page.getByTestId("close-libraries"); this.librariesModal = page.getByTestId("libraries-modal"); } @@ -126,7 +125,7 @@ export class WorkspacePage extends BaseWebSocketPage { await this.sidebar.getByText("Assets").click(clickOptions); } - async clickLibraries(clickOptions = {}) { + async openLibrariesModal(clickOptions = {}) { await this.sidebar.getByText("Libraries").click(clickOptions); } @@ -138,8 +137,8 @@ export class WorkspacePage extends BaseWebSocketPage { .click(clickOptions); } - async clickCloseLibraries(clickOptions = {}) { - await this.closeLibraries.click(clickOptions); + async closeLibrariesModal(clickOptions = {}) { + await this.librariesModal.getByRole("button", { name: "Close" }).click(clickOptions); } async clickColorPalette(clickOptions = {}) { diff --git a/frontend/playwright/ui/specs/sidebar.spec.js b/frontend/playwright/ui/specs/sidebar.spec.js index 9333749f8..468a661fa 100644 --- a/frontend/playwright/ui/specs/sidebar.spec.js +++ b/frontend/playwright/ui/specs/sidebar.spec.js @@ -40,16 +40,16 @@ test.describe("Assets tab", () => { await workspacePage.clickAssets(); // Now the get-file call should return a library await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-library.json"); - await workspacePage.clickLibraries(); + await workspacePage.openLibrariesModal(); await workspacePage.clickLibrary("Testing library 1"); - await workspacePage.clickCloseLibraries(); + await workspacePage.closeLibrariesModal(); await expect(workspacePage.palette.getByRole("button", { name: "test-color-187cd5" })).toBeVisible(); // Remove Testing library 1 - await workspacePage.clickLibraries(); + await workspacePage.openLibrariesModal(); await workspacePage.clickLibrary("Testing library 1"); - await workspacePage.clickCloseLibraries(); + await workspacePage.closeLibrariesModal(); await expect( workspacePage.palette.getByText("There are no color styles in your library yet"), diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index d07517c7b..6d5813c0d 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/libraries.cljs @@ -519,7 +519,7 @@ [:div {:class (stl/css :modal-dialog)} [:button {:class (stl/css :close-btn) :on-click close-dialog - :data-testid "close-libraries"} + :aria-label (tr "labels.close")} close-icon] [:div {:class (stl/css :modal-title)} (tr "workspace.libraries.libraries")] From a5ba9d113fc9e1390491c6d4de79b1459ec2add1 Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Tue, 11 Jun 2024 11:27:14 +0200 Subject: [PATCH 11/22] :sparkles: Improve create group tests --- .../src/app/main/data/workspace/groups.cljs | 6 ++- .../app/main/data/workspace/shortcuts.cljs | 4 +- .../app/main/ui/workspace/context_menu.cljs | 4 +- .../frontend_tests/logic/groups_test.cljs | 51 +++++++++++++++++++ 4 files changed, 59 insertions(+), 6 deletions(-) create mode 100644 frontend/test/frontend_tests/logic/groups_test.cljs diff --git a/frontend/src/app/main/data/workspace/groups.cljs b/frontend/src/app/main/data/workspace/groups.cljs index 384eed100..04beaa553 100644 --- a/frontend/src/app/main/data/workspace/groups.cljs +++ b/frontend/src/app/main/data/workspace/groups.cljs @@ -198,7 +198,8 @@ (dws/select-shapes (d/ordered-set (:id group)))) (ptk/data-event :layout/update {:ids parents})))))))) -(def group-selected +(defn group-selected + [] (ptk/reify ::group-selected ptk/WatchEvent (watch [_ state _] @@ -258,7 +259,8 @@ (when change-selection? (dws/select-shapes child-ids)))))))) -(def ungroup-selected +(defn ungroup-selected + [] (ptk/reify ::ungroup-selected ptk/WatchEvent (watch [_ state _] diff --git a/frontend/src/app/main/data/workspace/shortcuts.cljs b/frontend/src/app/main/data/workspace/shortcuts.cljs index 2d808a9bd..45a763cca 100644 --- a/frontend/src/app/main/data/workspace/shortcuts.cljs +++ b/frontend/src/app/main/data/workspace/shortcuts.cljs @@ -119,12 +119,12 @@ :group {:tooltip (ds/meta "G") :command (ds/c-mod "g") :subsections [:modify-layers] - :fn #(emit-when-no-readonly dw/group-selected)} + :fn #(emit-when-no-readonly (dw/group-selected))} :ungroup {:tooltip (ds/shift "G") :command "shift+g" :subsections [:modify-layers] - :fn #(emit-when-no-readonly dw/ungroup-selected)} + :fn #(emit-when-no-readonly (dw/ungroup-selected))} :mask {:tooltip (ds/meta "M") :command (ds/c-mod "m") diff --git a/frontend/src/app/main/ui/workspace/context_menu.cljs b/frontend/src/app/main/ui/workspace/context_menu.cljs index 4dd499d18..c25d5cdfe 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/context_menu.cljs @@ -243,8 +243,8 @@ is-group? (and single? has-group?) is-bool? (and single? has-bool?) - do-create-group #(st/emit! dw/group-selected) - do-remove-group #(st/emit! dw/ungroup-selected) + do-create-group #(st/emit! (dw/group-selected)) + do-remove-group #(st/emit! (dw/ungroup-selected)) do-mask-group #(st/emit! (dw/mask-group)) do-unmask-group #(st/emit! (dw/unmask-group)) do-create-artboard-from-selection diff --git a/frontend/test/frontend_tests/logic/groups_test.cljs b/frontend/test/frontend_tests/logic/groups_test.cljs new file mode 100644 index 000000000..a535a586f --- /dev/null +++ b/frontend/test/frontend_tests/logic/groups_test.cljs @@ -0,0 +1,51 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; Copyright (c) KALEIDOS INC +(ns frontend-tests.logic.groups-test + (:require + [app.common.data :as d] + [app.common.test-helpers.compositions :as ctho] + [app.common.test-helpers.files :as cthf] + [app.common.test-helpers.shapes :as cths] + [app.common.uuid :as uuid] + [app.main.data.workspace :as dw] + [app.main.data.workspace.groups :as dwgr] + [app.main.data.workspace.selection :as dws] + [cljs.test :as t :include-macros true] + [frontend-tests.helpers.pages :as thp] + [frontend-tests.helpers.state :as ths])) + +(t/use-fixtures :each + {:before thp/reset-idmap!}) + + +(t/deftest test-create-group + (t/async + done + (let [;; ==== Setup + file (-> (cthf/sample-file :file1) + (cths/add-sample-shape :test-shape)) + store (ths/setup-store file) + test-shape (cths/get-shape file :test-shape) + + ;; ==== Action + events + [(dws/select-shapes (d/ordered-set (:id test-shape))) + (dwgr/group-selected)]] + + (ths/run-store + store done events + (fn [new-state] + (let [;; ==== Get + file' (ths/get-file-from-store new-state) + page' (cthf/current-page file') + group-id (->> (:objects page') + vals + (filter #(= :group (:type %))) + first + :id)] + ;; ==== Check + ;; Group has been created and is selected + (t/is (= (get-in new-state [:workspace-local :selected]) #{group-id})))))))) From a861691ffdb4de7215a99f5c05e4b5047de78b80 Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Tue, 11 Jun 2024 13:52:54 +0200 Subject: [PATCH 12/22] :bug: Fix change color on imported svg also changes the stroke alignment --- CHANGES.md | 3 +- .../src/app/main/data/workspace/colors.cljs | 2 +- .../frontend_tests/basic_shapes_test.cljs | 34 +++++++++++++++++++ 3 files changed, 37 insertions(+), 2 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index beeea77a4..2385cddb8 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -35,7 +35,8 @@ - Fix "Attribute overrides in copies are not exported in zip file" [Taiga #8072](https://tree.taiga.io/project/penpot/issue/8072) - Fix group not automatically selected in the Layers panel after creation [Taiga #8078](https://tree.taiga.io/project/penpot/issue/8078) - Fix export boards loses opacity [Taiga #7592](https://tree.taiga.io/project/penpot/issue/7592) -- Fix show in view mode and interactions workflow [Taiga #4711](https://github.com/penpot/penpot/pull/4711) +- Fix show in view mode and interactions workflow +- Fix change color on imported svg also changes the stroke alignment[Taiga #7673](https://github.com/penpot/penpot/pull/7673) ## 2.0.3 diff --git a/frontend/src/app/main/data/workspace/colors.cljs b/frontend/src/app/main/data/workspace/colors.cljs index 70a19585f..71a3903b8 100644 --- a/frontend/src/app/main/data/workspace/colors.cljs +++ b/frontend/src/app/main/data/workspace/colors.cljs @@ -248,7 +248,7 @@ (assoc :stroke-style :solid) (not (contains? new-attrs :stroke-alignment)) - (assoc :stroke-alignment :inner) + (assoc :stroke-alignment :center) :always (d/without-nils))] diff --git a/frontend/test/frontend_tests/basic_shapes_test.cljs b/frontend/test/frontend_tests/basic_shapes_test.cljs index 8f7700120..301773837 100644 --- a/frontend/test/frontend_tests/basic_shapes_test.cljs +++ b/frontend/test/frontend_tests/basic_shapes_test.cljs @@ -9,6 +9,7 @@ [app.common.test-helpers.files :as cthf] [app.common.test-helpers.ids-map :as cthi] [app.common.test-helpers.shapes :as cths] + [app.main.data.workspace.colors :as dc] [app.main.data.workspace.shapes :as dwsh] [cljs.test :as t :include-macros true] [frontend-tests.helpers.state :as ths])) @@ -46,3 +47,36 @@ (t/is (= (count fills') 1)) (t/is (= (:fill-color fill') "#fabada")) (t/is (= (:fill-opacity fill') 1)))))))) + +(t/deftest test-update-stroke + ;; Old shapes without stroke-alignment are rendered as if it is centered + (t/async + done + (let [;; ==== Setup + store + (ths/setup-store + (-> (cthf/sample-file :file1 :page-label :page1) + (cths/add-sample-shape :shape1 :strokes [{:stroke-color "#000000" + :stroke-opacity 1 + :stroke-width 2}]))) + + ;; ==== Action + events + [(dc/change-stroke #{(cthi/id :shape1)} {:color "#FABADA"} 0)]] + + (ths/run-store + store done events + (fn [new-state] + (let [;; ==== Get + shape1' (get-in new-state [:workspace-data + :pages-index + (cthi/id :page1) + :objects + (cthi/id :shape1)]) + stroke' (-> (:strokes shape1') + first)] + + ;; ==== Check + (println stroke') + (t/is (some? shape1')) + (t/is (= (:stroke-alignment stroke') :center)))))))) \ No newline at end of file From 9f7a002a78565b3103262e80d31c1a4eeb3fce8b Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Fri, 7 Jun 2024 12:16:13 +0200 Subject: [PATCH 13/22] :bug: Fix misaligned input on comments --- CHANGES.md | 1 + frontend/src/app/main/ui/comments.scss | 5 ++--- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 2385cddb8..2a1895142 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -16,6 +16,7 @@ - Allow library colors as recent colors [Taiga #7640](https://tree.taiga.io/project/penpot/issue/7640) - Missing scroll in viewmode comments [Taiga #7427](https://tree.taiga.io/project/penpot/issue/7427) - Comments in View mode should mimic the positioning behavior of the Workspace [Taiga #7346](https://tree.taiga.io/project/penpot/issue/7346) +- Misaligned input on comments [Taiga #7461](https://tree.taiga.io/project/penpot/issue/7461) ### :bug: Bugs fixed diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss index c3237c10d..a2d1fdc52 100644 --- a/frontend/src/app/main/ui/comments.scss +++ b/frontend/src/app/main/ui/comments.scss @@ -142,11 +142,10 @@ // thread-content .thread-content { position: absolute; - overflow-y: scroll; - scrollbar-gutter: stable; + overflow-y: auto; width: $s-284; padding: $s-12; - padding-inline-end: 0; + padding-inline-end: $s-8; pointer-events: auto; user-select: text; From 058a72b81772518edf4246ca5775e7fb43057e45 Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Mon, 10 Jun 2024 11:02:17 +0200 Subject: [PATCH 14/22] :bug: Fix internal error when I set up a stroke for some objects without and with stroke --- CHANGES.md | 3 +- .../design/get-file-multiple-attributes.json | 343 ++++++++++++++++++ ...object-thumbnails-multiple-attributes.json | 1 + .../playwright/ui/specs/design-tab.spec.js | 48 +++ .../workspace/sidebar/options/menus/blur.cljs | 1 + .../workspace/sidebar/options/menus/fill.cljs | 1 + .../sidebar/options/menus/shadow.cljs | 1 + .../sidebar/options/menus/stroke.cljs | 7 +- 8 files changed, 401 insertions(+), 4 deletions(-) create mode 100644 frontend/playwright/data/design/get-file-multiple-attributes.json create mode 100644 frontend/playwright/data/design/get-file-object-thumbnails-multiple-attributes.json diff --git a/CHANGES.md b/CHANGES.md index 2a1895142..e5a698f34 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -36,8 +36,9 @@ - Fix "Attribute overrides in copies are not exported in zip file" [Taiga #8072](https://tree.taiga.io/project/penpot/issue/8072) - Fix group not automatically selected in the Layers panel after creation [Taiga #8078](https://tree.taiga.io/project/penpot/issue/8078) - Fix export boards loses opacity [Taiga #7592](https://tree.taiga.io/project/penpot/issue/7592) -- Fix show in view mode and interactions workflow - Fix change color on imported svg also changes the stroke alignment[Taiga #7673](https://github.com/penpot/penpot/pull/7673) +- Fix show in view mode and interactions workflow [Taiga #4711](https://github.com/penpot/penpot/pull/4711) +- Fix internal error when I set up a stroke for some objects without and with stroke [Taiga #7558](https://tree.taiga.io/project/penpot/issue/7558) ## 2.0.3 diff --git a/frontend/playwright/data/design/get-file-multiple-attributes.json b/frontend/playwright/data/design/get-file-multiple-attributes.json new file mode 100644 index 000000000..c0a67da95 --- /dev/null +++ b/frontend/playwright/data/design/get-file-multiple-attributes.json @@ -0,0 +1,343 @@ +{ + "~:features":{ + "~#set":[ + "layout/grid", + "styles/v2", + "fdata/shape-data-type" + ] + }, + "~:permissions":{ + "~:type":"~:membership", + "~:is-owner":true, + "~:is-admin":true, + "~:can-edit":true, + "~:can-read":true, + "~:is-logged":true + }, + "~:has-media-trimmed":false, + "~:comment-thread-seqn":0, + "~:name":"New File 12", + "~:revn":2, + "~:modified-at":"~m1718012938567", + "~:id":"~u1795a568-0df0-8095-8004-7ba741f56be2", + "~:is-shared":false, + "~:version":48, + "~:project-id":"~u4dc640b0-5cbf-11ec-a7c5-91e9eb4f238d", + "~:created-at":"~m1718012912598", + "~:data":{ + "~:pages":[ + "~u1795a568-0df0-8095-8004-7ba741f56be3" + ], + "~:pages-index":{ + "~u1795a568-0df0-8095-8004-7ba741f56be3":{ + "~:options":{ + + }, + "~:objects":{ + "~u00000000-0000-0000-0000-000000000000":{ + "~#shape":{ + "~:y":0, + "~:hide-fill-on-export":false, + "~:transform":{ + "~#matrix":{ + "~:a":1.0, + "~:b":0.0, + "~:c":0.0, + "~:d":1.0, + "~:e":0.0, + "~:f":0.0 + } + }, + "~:rotation":0, + "~:name":"Root Frame", + "~:width":0.01, + "~:type":"~:frame", + "~:points":[ + { + "~#point":{ + "~:x":0, + "~:y":0 + } + }, + { + "~#point":{ + "~:x":0.01, + "~:y":0 + } + }, + { + "~#point":{ + "~:x":0.01, + "~:y":0.01 + } + }, + { + "~#point":{ + "~:x":0, + "~:y":0.01 + } + } + ], + "~:proportion-lock":false, + "~:transform-inverse":{ + "~#matrix":{ + "~:a":1.0, + "~:b":0.0, + "~:c":0.0, + "~:d":1.0, + "~:e":0.0, + "~:f":0.0 + } + }, + "~:id":"~u00000000-0000-0000-0000-000000000000", + "~:parent-id":"~u00000000-0000-0000-0000-000000000000", + "~:frame-id":"~u00000000-0000-0000-0000-000000000000", + "~:strokes":[ + + ], + "~:x":0, + "~:proportion":1.0, + "~:selrect":{ + "~#rect":{ + "~:x":0, + "~:y":0, + "~:width":0.01, + "~:height":0.01, + "~:x1":0, + "~:y1":0, + "~:x2":0.01, + "~:y2":0.01 + } + }, + "~:fills":[ + { + "~:fill-color":"#FFFFFF", + "~:fill-opacity":1 + } + ], + "~:flip-x":null, + "~:height":0.01, + "~:flip-y":null, + "~:shapes":[ + "~u2ace9ce8-8e01-8086-8004-7ba745d4305a", + "~u2ace9ce8-8e01-8086-8004-7ba748566e02" + ] + } + }, + "~u2ace9ce8-8e01-8086-8004-7ba745d4305a":{ + "~#shape":{ + "~:y":221, + "~:rx":0, + "~:transform":{ + "~#matrix":{ + "~:a":1.0, + "~:b":0.0, + "~:c":0.0, + "~:d":1.0, + "~:e":0.0, + "~:f":0.0 + } + }, + "~:rotation":0, + "~:grow-type":"~:fixed", + "~:hide-in-viewer":false, + "~:name":"Rectangle", + "~:width":105, + "~:type":"~:rect", + "~:points":[ + { + "~#point":{ + "~:x":165, + "~:y":221 + } + }, + { + "~#point":{ + "~:x":270, + "~:y":221 + } + }, + { + "~#point":{ + "~:x":270, + "~:y":316 + } + }, + { + "~#point":{ + "~:x":165, + "~:y":316 + } + } + ], + "~:proportion-lock":false, + "~:transform-inverse":{ + "~#matrix":{ + "~:a":1.0, + "~:b":0.0, + "~:c":0.0, + "~:d":1.0, + "~:e":0.0, + "~:f":0.0 + } + }, + "~:id":"~u2ace9ce8-8e01-8086-8004-7ba745d4305a", + "~:parent-id":"~u00000000-0000-0000-0000-000000000000", + "~:frame-id":"~u00000000-0000-0000-0000-000000000000", + "~:strokes":[ + + ], + "~:x":165, + "~:proportion":1, + "~:selrect":{ + "~#rect":{ + "~:x":165, + "~:y":221, + "~:width":105, + "~:height":95, + "~:x1":165, + "~:y1":221, + "~:x2":270, + "~:y2":316 + } + }, + "~:fills":[ + { + "~:fill-color":"#B1B2B5", + "~:fill-opacity":1 + } + ], + "~:flip-x":null, + "~:ry":0, + "~:height":95, + "~:flip-y":null + } + }, + "~u2ace9ce8-8e01-8086-8004-7ba748566e02":{ + "~#shape":{ + "~:y":228, + "~:transform":{ + "~#matrix":{ + "~:a":1.0, + "~:b":0.0, + "~:c":0.0, + "~:d":1.0, + "~:e":0.0, + "~:f":0.0 + } + }, + "~:rotation":0, + "~:grow-type":"~:fixed", + "~:hide-in-viewer":false, + "~:name":"Ellipse", + "~:width":85, + "~:type":"~:circle", + "~:points":[ + { + "~#point":{ + "~:x":344, + "~:y":228 + } + }, + { + "~#point":{ + "~:x":429, + "~:y":228 + } + }, + { + "~#point":{ + "~:x":429, + "~:y":308 + } + }, + { + "~#point":{ + "~:x":344, + "~:y":308 + } + } + ], + "~:proportion-lock":false, + "~:transform-inverse":{ + "~#matrix":{ + "~:a":1.0, + "~:b":0.0, + "~:c":0.0, + "~:d":1.0, + "~:e":0.0, + "~:f":0.0 + } + }, + "~:blur":{ + "~:id":"~u2ace9ce8-8e01-8086-8004-7ba757cdd271", + "~:type":"~:layer-blur", + "~:value":4, + "~:hidden":false + }, + "~:id":"~u2ace9ce8-8e01-8086-8004-7ba748566e02", + "~:parent-id":"~u00000000-0000-0000-0000-000000000000", + "~:frame-id":"~u00000000-0000-0000-0000-000000000000", + "~:strokes":[ + { + "~:stroke-alignment":"~:inner", + "~:stroke-style":"~:solid", + "~:stroke-color":"#000000", + "~:stroke-opacity":1, + "~:stroke-width":1 + } + ], + "~:x":344, + "~:proportion":1, + "~:shadow":[ + { + "~:color":{ + "~:color":"#000000", + "~:opacity":0.2 + }, + "~:spread":0, + "~:offset-y":4, + "~:style":"~:drop-shadow", + "~:blur":4, + "~:hidden":false, + "~:id":"~u2ace9ce8-8e01-8086-8004-7ba756ddebd5", + "~:offset-x":4 + } + ], + "~:selrect":{ + "~#rect":{ + "~:x":344, + "~:y":228, + "~:width":85, + "~:height":80, + "~:x1":344, + "~:y1":228, + "~:x2":429, + "~:y2":308 + } + }, + "~:fills":[ + { + "~:fill-color":"#1247e7", + "~:fill-opacity":1 + } + ], + "~:flip-x":null, + "~:height":80, + "~:flip-y":null + } + } + }, + "~:id":"~u1795a568-0df0-8095-8004-7ba741f56be3", + "~:name":"Page 1" + } + }, + "~:id":"~u1795a568-0df0-8095-8004-7ba741f56be2", + "~:recent-colors":[ + { + "~:color":"#1247e7", + "~:opacity":1 + } + ] + } +} \ No newline at end of file diff --git a/frontend/playwright/data/design/get-file-object-thumbnails-multiple-attributes.json b/frontend/playwright/data/design/get-file-object-thumbnails-multiple-attributes.json new file mode 100644 index 000000000..0637a088a --- /dev/null +++ b/frontend/playwright/data/design/get-file-object-thumbnails-multiple-attributes.json @@ -0,0 +1 @@ +[] \ No newline at end of file diff --git a/frontend/playwright/ui/specs/design-tab.spec.js b/frontend/playwright/ui/specs/design-tab.spec.js index 0d637bace..0c890c07e 100644 --- a/frontend/playwright/ui/specs/design-tab.spec.js +++ b/frontend/playwright/ui/specs/design-tab.spec.js @@ -7,6 +7,8 @@ test.beforeEach(async ({ page }) => { const multipleConstraintsFileId = `03bff843-920f-81a1-8004-756365e1eb6a`; const multipleConstraintsPageId = `03bff843-920f-81a1-8004-756365e1eb6b`; +const multipleAttributesFileId = `1795a568-0df0-8095-8004-7ba741f56be2`; +const multipleAttributesPageId = `1795a568-0df0-8095-8004-7ba741f56be3`; const setupFileWithMultipeConstraints = async (workspace) => { await workspace.setupEmptyFile(); @@ -21,6 +23,15 @@ const setupFileWithMultipeConstraints = async (workspace) => { ); }; +const setupFileWithMultipeAttributes = async (workspace) => { + await workspace.setupEmptyFile(); + await workspace.mockRPC(/get\-file\?/, "design/get-file-multiple-attributes.json"); + await workspace.mockRPC( + "get-file-object-thumbnails?file-id=*", + "design/get-file-object-thumbnails-multiple-attributes.json", + ); +}; + test.describe("Constraints", () => { test("Constraint dropdown shows 'Mixed' when multiple layers are selected with different constraints", async ({ page, @@ -44,3 +55,40 @@ test.describe("Constraints", () => { expect(false); }); }); + +test.describe("Multiple shapes attributes", () => { + test("User selects multiple shapes with sames fills, strokes, shadows and blur", async ({ page }) => { + const workspace = new WorkspacePage(page); + await setupFileWithMultipeConstraints(workspace); + await workspace.goToWorkspace({ + fileId: multipleConstraintsFileId, + pageId: multipleConstraintsPageId, + }); + + await workspace.clickToggableLayer("Board"); + await workspace.clickLeafLayer("Ellipse"); + await workspace.clickLeafLayer("Rectangle", { modifiers: ["Shift"] }); + + await expect(workspace.page.getByTestId("add-fill")).toBeVisible(); + await expect(workspace.page.getByTestId("add-stroke")).toBeVisible(); + await expect(workspace.page.getByTestId("add-shadow")).toBeVisible(); + await expect(workspace.page.getByTestId("add-blur")).toBeVisible(); + }); + + test("User selects multiple shapes with different fills, strokes, shadows and blur", async ({ page }) => { + const workspace = new WorkspacePage(page); + await setupFileWithMultipeAttributes(workspace); + await workspace.goToWorkspace({ + fileId: multipleAttributesFileId, + pageId: multipleAttributesPageId, + }); + + await workspace.clickLeafLayer("Ellipse"); + await workspace.clickLeafLayer("Rectangle", { modifiers: ["Shift"] }); + + await expect(workspace.page.getByTestId("add-fill")).toBeHidden(); + await expect(workspace.page.getByTestId("add-stroke")).toBeHidden(); + await expect(workspace.page.getByTestId("add-shadow")).toBeHidden(); + await expect(workspace.page.getByTestId("add-blur")).toBeHidden(); + }); +}); diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs index cd1573982..b943680e8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs @@ -87,6 +87,7 @@ :class (stl/css-case :title-spacing-blur (not has-value?))} (when-not has-value? [:button {:class (stl/css :add-blur) + :data-testid "add-blur" :on-click handle-add} i/add])]] (when (and open? has-value?) [:div {:class (stl/css :element-set-content)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs index 7dfc6f075..3d8574ef1 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs @@ -146,6 +146,7 @@ (when (and (not disable-remove?) (not (= :multiple fills))) [:button {:class (stl/css :add-fill) + :data-testid "add-fill" :on-click on-add} i/add])]] (when open? diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs index ab65f806a..db3b28f85 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs @@ -298,6 +298,7 @@ (when-not (= :multiple shadows) [:button {:class (stl/css :add-shadow) + :data-testid "add-shadow" :on-click on-add-shadow} i/add])]] (when open? diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs index 3539f693f..9f7969f2c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs @@ -169,9 +169,10 @@ :on-collapsed toggle-content :title label :class (stl/css-case :title-spacing-stroke (not has-strokes?))} - - [:button {:class (stl/css :add-stroke) - :on-click on-add-stroke} i/add]]] + (when (not (= :multiple strokes)) + [:button {:class (stl/css :add-stroke) + :data-testid "add-stroke" + :on-click on-add-stroke} i/add])]] (when open? [:div {:class (stl/css-case :element-content true :empty-content (not has-strokes?))} From 03aa0817f7ca753d8a4f6f33a92f6ab8f574a03d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Tue, 11 Jun 2024 17:14:28 +0200 Subject: [PATCH 15/22] :bug: Fix swap slots when detaching a copy with subcopies --- backend/src/app/srepl/fixes.clj | 5 +--- common/src/app/common/files/repair.cljc | 2 +- common/src/app/common/logic/libraries.cljc | 31 +++++++++++++--------- common/src/app/common/types/component.cljc | 16 +++++++++++ 4 files changed, 37 insertions(+), 17 deletions(-) diff --git a/backend/src/app/srepl/fixes.clj b/backend/src/app/srepl/fixes.clj index ee40421df..0db429aa3 100644 --- a/backend/src/app/srepl/fixes.clj +++ b/backend/src/app/srepl/fixes.clj @@ -184,10 +184,7 @@ (ctk/instance-head? child)) (let [slot (guess-swap-slot component-child component-container)] (l/dbg :hint "child" :id (:id child) :name (:name child) :slot slot) - (ctn/update-shape container (:id child) - #(update % :touched - cfh/set-touched-group - (ctk/build-swap-slot-group slot)))) + (ctn/update-shape container (:id child) #(ctk/set-swap-slot % slot))) container)] (recur (process-copy-head container child) (rest children) diff --git a/common/src/app/common/files/repair.cljc b/common/src/app/common/files/repair.cljc index cd2a656d2..c40b60227 100644 --- a/common/src/app/common/files/repair.cljc +++ b/common/src/app/common/files/repair.cljc @@ -481,7 +481,7 @@ (let [slot (:swap-slot args)] (when (some? slot) (log/debug :hint (str " -> set swap-slot to " slot)) - (update shape :touched cfh/set-touched-group (ctk/build-swap-slot-group slot)))))] + (ctk/set-swap-slot shape slot))))] (log/dbg :hint "repairing shape :missing-slot" :id (:id shape) :name (:name shape) :page-id page-id) (-> (pcb/empty-changes nil page-id) diff --git a/common/src/app/common/logic/libraries.cljc b/common/src/app/common/logic/libraries.cljc index 595ed5726..ec40277e0 100644 --- a/common/src/app/common/logic/libraries.cljc +++ b/common/src/app/common/logic/libraries.cljc @@ -284,9 +284,17 @@ (let [children (cfh/get-children-with-self (:objects container) shape-id) skip-near (fn [changes shape] (let [ref-shape (ctf/find-ref-shape file container libraries shape {:include-deleted? true})] - (if (some? (:shape-ref ref-shape)) - (pcb/update-shapes changes [(:id shape)] #(assoc % :shape-ref (:shape-ref ref-shape))) - changes)))] + (cond-> changes + (some? (:shape-ref ref-shape)) + (pcb/update-shapes [(:id shape)] #(assoc % :shape-ref (:shape-ref ref-shape))) + + ;; When advancing level, if the referenced shape has a swap slot, it must be + ;; copied to the current shape, because the shape-ref now will not be pointing + ;; to a near main (except for first level subcopies). + (and (some? (ctk/get-swap-slot ref-shape)) + (nil? (ctk/get-swap-slot shape)) + (not= (:id shape) shape-id)) + (pcb/update-shapes [(:id shape)] #(ctk/set-swap-slot % (ctk/get-swap-slot ref-shape))))))] (reduce skip-near changes children))) (defn prepare-restore-component @@ -1194,7 +1202,7 @@ :shapes all-parents})) changes' (reduce del-obj-change changes' new-shapes)] - (if (and (cfh/touched-group? parent-shape :shapes-group) omit-touched?) + (if (and (ctk/touched-group? parent-shape :shapes-group) omit-touched?) changes changes'))) @@ -1349,7 +1357,7 @@ changes' ids)] - (if (and (cfh/touched-group? parent :shapes-group) omit-touched?) + (if (and (ctk/touched-group? parent :shapes-group) omit-touched?) changes changes'))) @@ -1385,7 +1393,7 @@ :ignore-touched true :syncing true})))] - (if (and (cfh/touched-group? parent :shapes-group) omit-touched?) + (if (and (ctk/touched-group? parent :shapes-group) omit-touched?) changes changes'))) @@ -1846,12 +1854,11 @@ ;; if the shape isn't inside a main component, it shouldn't have a swap slot (and (nil? (ctk/get-swap-slot new-shape)) inside-comp?) - (update :touched cfh/set-touched-group (-> (ctf/find-swap-slot shape - page - {:id (:id file) - :data file} - libraries) - (ctk/build-swap-slot-group))))] + (ctk/set-swap-slot (ctf/find-swap-slot shape + page + {:id (:id file) + :data file} + libraries)))] [new-shape (-> changes ;; Restore the properties diff --git a/common/src/app/common/types/component.cljc b/common/src/app/common/types/component.cljc index bcd6ef3b3..b4060abed 100644 --- a/common/src/app/common/types/component.cljc +++ b/common/src/app/common/types/component.cljc @@ -183,6 +183,15 @@ (and (= shape-id (:main-instance-id component)) (= page-id (:main-instance-page component)))) +(defn set-touched-group + [touched group] + (when group + (conj (or touched #{}) group))) + +(defn touched-group? + [shape group] + ((or (:touched shape) #{}) group)) + (defn build-swap-slot-group "Convert a swap-slot into a :touched group" [swap-slot] @@ -204,6 +213,13 @@ (when group (group->swap-slot group)))) +(defn set-swap-slot + "Add a touched group with a form :swap-slot-." + [shape swap-slot] + (cond-> shape + (some? swap-slot) + (update :touched set-touched-group (build-swap-slot-group swap-slot)))) + (defn match-swap-slot? [shape-main shape-inst] (let [slot-main (get-swap-slot shape-main) From bbd9207191d8ba9220f23e27924007e836569801 Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Wed, 12 Jun 2024 11:52:59 +0200 Subject: [PATCH 16/22] :sparkles: Improve email verify threshold --- backend/src/app/config.clj | 9 +++++++-- backend/src/app/rpc/commands/auth.clj | 8 +++----- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/backend/src/app/config.clj b/backend/src/app/config.clj index 1ca637396..aed780694 100644 --- a/backend/src/app/config.clj +++ b/backend/src/app/config.clj @@ -87,7 +87,10 @@ :ldap-attrs-fullname "cn" ;; a server prop key where initial project is stored. - :initial-project-skey "initial-project"}) + :initial-project-skey "initial-project" + + ;; time to avoid email sending after profile modification + :email-verify-threshold "15m"}) (s/def ::default-rpc-rlimit ::us/vector-of-strings) (s/def ::rpc-rlimit-config ::fs/path) @@ -213,6 +216,7 @@ (s/def ::telemetry-uri ::us/string) (s/def ::telemetry-with-taiga ::us/boolean) (s/def ::tenant ::us/string) +(s/def ::email-verify-threshold ::dt/duration) (s/def ::config (s/keys :opt-un [::secret-key @@ -334,7 +338,8 @@ ::telemetry-uri ::telemetry-referer ::telemetry-with-taiga - ::tenant])) + ::tenant + ::email-verify-threshold])) (def default-flags [:enable-backend-api-doc diff --git a/backend/src/app/rpc/commands/auth.clj b/backend/src/app/rpc/commands/auth.clj index b38fa83b5..e4b36e84b 100644 --- a/backend/src/app/rpc/commands/auth.clj +++ b/backend/src/app/rpc/commands/auth.clj @@ -38,13 +38,11 @@ (def schema:token [::sm/word-string {:max 6000}]) -(def ^:private default-verify-threshold - (dt/duration "15m")) - (defn- elapsed-verify-threshold? [profile] - (let [elapsed (dt/diff (:modified-at profile) (dt/now))] - (pos? (compare elapsed default-verify-threshold)))) + (let [elapsed (dt/diff (:modified-at profile) (dt/now)) + verify-threshold (cf/get :email-verify-threshold)] + (pos? (compare elapsed verify-threshold)))) ;; ---- COMMAND: login with password From 740a8722312f2a3e43f5cf514f649c0be4c64abd Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Wed, 12 Jun 2024 13:12:58 +0200 Subject: [PATCH 17/22] :bug: Toolbar keeps toggling on and off on spacebar press --- CHANGES.md | 1 + frontend/playwright/ui/pages/WorkspacePage.js | 6 ++++++ frontend/playwright/ui/specs/workspace.spec.js | 11 +++++++++++ frontend/src/app/main/ui/workspace/top_toolbar.cljs | 11 ++++++++--- frontend/translations/en.po | 4 ++++ frontend/translations/es.po | 4 ++++ 6 files changed, 34 insertions(+), 3 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index e5a698f34..5ec9ccca7 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -39,6 +39,7 @@ - Fix change color on imported svg also changes the stroke alignment[Taiga #7673](https://github.com/penpot/penpot/pull/7673) - Fix show in view mode and interactions workflow [Taiga #4711](https://github.com/penpot/penpot/pull/4711) - Fix internal error when I set up a stroke for some objects without and with stroke [Taiga #7558](https://tree.taiga.io/project/penpot/issue/7558) +- Toolbar keeps toggling on and off on spacebar press [Taiga #7654](https://github.com/penpot/penpot/pull/7654) ## 2.0.3 diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js index 131f94943..723a3947c 100644 --- a/frontend/playwright/ui/pages/WorkspacePage.js +++ b/frontend/playwright/ui/pages/WorkspacePage.js @@ -43,7 +43,9 @@ export class WorkspacePage extends BaseWebSocketPage { this.presentUserListItems = page.getByTestId("active-users-list").getByAltText("Princesa Leia"); this.viewport = page.getByTestId("viewport"); this.rootShape = page.locator(`[id="shape-00000000-0000-0000-0000-000000000000"]`); + this.toolbarOptions = page.getByTestId("toolbar-options"); this.rectShapeButton = page.getByRole("button", { name: "Rectangle (R)" }); + this.toggleToolbarButton = page.getByRole("button", { name: "Toggle toolbar" }); this.colorpicker = page.getByTestId("colorpicker"); this.layers = page.getByTestId("layer-tree"); this.palette = page.getByTestId("palette"); @@ -121,6 +123,10 @@ export class WorkspacePage extends BaseWebSocketPage { ); } + async expectHiddenToolbarOptions() { + await expect(this.toolbarOptions).toHaveCSS("opacity", "0"); + } + async clickAssets(clickOptions = {}) { await this.sidebar.getByText("Assets").click(clickOptions); } diff --git a/frontend/playwright/ui/specs/workspace.spec.js b/frontend/playwright/ui/specs/workspace.spec.js index c96967384..46c292269 100644 --- a/frontend/playwright/ui/specs/workspace.spec.js +++ b/frontend/playwright/ui/specs/workspace.spec.js @@ -53,3 +53,14 @@ test("User makes a group", async ({ page }) => { await workspacePage.page.keyboard.press("ControlOrMeta+g"); await workspacePage.expectSelectedLayer("Group"); }); + +test("Bug 7654 - Toolbar keeps toggling on and off on spacebar press", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await workspacePage.setupEmptyFile(); + await workspacePage.goToWorkspace(); + + await workspacePage.toggleToolbarButton.click(); + await workspacePage.page.keyboard.press("Backspace"); + await workspacePage.page.keyboard.press("Enter"); + await workspacePage.expectHiddenToolbarOptions(); +}); diff --git a/frontend/src/app/main/ui/workspace/top_toolbar.cljs b/frontend/src/app/main/ui/workspace/top_toolbar.cljs index 979c84e19..a7546507b 100644 --- a/frontend/src/app/main/ui/workspace/top_toolbar.cljs +++ b/frontend/src/app/main/ui/workspace/top_toolbar.cljs @@ -115,13 +115,16 @@ toggle-toolbar (mf/use-fn - #(st/emit! (dwc/toggle-toolbar-visibility)))] + (fn [event] + (dom/blur! (dom/get-target event)) + (st/emit! (dwc/toggle-toolbar-visibility))))] (when-not ^boolean read-only? [:aside {:class (stl/css-case :main-toolbar true :main-toolbar-no-rulers (not rulers?) :main-toolbar-hidden hide-toolbar?)} - [:ul {:class (stl/css :main-toolbar-options)} + [:ul {:class (stl/css :main-toolbar-options) + :data-testid "toolbar-options"} [:li [:button {:title (tr "workspace.toolbar.move" (sc/get-tooltip :move)) @@ -197,7 +200,9 @@ :on-click toggle-debug-panel} i/bug]])]] - [:button {:class (stl/css :toolbar-handler) + [:button {:title (tr "workspace.toolbar.toggle-toolbar") + :aria-label (tr "workspace.toolbar.toggle-toolbar") + :class (stl/css :toolbar-handler) :on-click toggle-toolbar} [:div {:class (stl/css :toolbar-handler-btn)}]]]))) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 46f507c17..6f87ee268 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -5109,6 +5109,10 @@ msgstr "Text (%s)" msgid "workspace.toolbar.text-palette" msgstr "Typographies (%s)" +#: src/app/main/ui/workspace/left_toolbar.cljs +msgid "workspace.toolbar.toggle-toolbar" +msgstr "Toggle toolbar" + msgid "workspace.top-bar.read-only.done" msgstr "Done" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index ea0c9e5d6..35c05984f 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -5271,6 +5271,10 @@ msgstr "Texto (%s)" msgid "workspace.toolbar.text-palette" msgstr "Tipografías (%s)" +#: src/app/main/ui/workspace/left_toolbar.cljs +msgid "workspace.toolbar.toggle-toolbar" +msgstr "Alternar barra de herramientas" + msgid "workspace.top-bar.read-only.done" msgstr "Hecho" From b4004af2559fc3b8fb00c05718fcdb5e1e34fe76 Mon Sep 17 00:00:00 2001 From: AzazelN28 Date: Wed, 12 Jun 2024 14:43:27 +0200 Subject: [PATCH 18/22] :bug: Fix toolbar keeps hiding when clicking outside --- CHANGES.md | 1 + frontend/src/app/main/data/workspace/path/helpers.cljs | 1 + 2 files changed, 2 insertions(+) diff --git a/CHANGES.md b/CHANGES.md index 5ec9ccca7..ffe137f5f 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -40,6 +40,7 @@ - Fix show in view mode and interactions workflow [Taiga #4711](https://github.com/penpot/penpot/pull/4711) - Fix internal error when I set up a stroke for some objects without and with stroke [Taiga #7558](https://tree.taiga.io/project/penpot/issue/7558) - Toolbar keeps toggling on and off on spacebar press [Taiga #7654](https://github.com/penpot/penpot/pull/7654) +- Fix toolbar keeps hiding when click outside workspace [Taiga #7776](https://tree.taiga.io/project/penpot/issue/7776) ## 2.0.3 diff --git a/frontend/src/app/main/data/workspace/path/helpers.cljs b/frontend/src/app/main/data/workspace/path/helpers.cljs index 2facaf53a..b52ab6e72 100644 --- a/frontend/src/app/main/data/workspace/path/helpers.cljs +++ b/frontend/src/app/main/data/workspace/path/helpers.cljs @@ -22,6 +22,7 @@ (or (= type ::common/finish-path) (= type :app.main.data.workspace.path.shortcuts/esc-pressed) (= type :app.main.data.workspace.common/clear-edition-mode) + (= type :app.main.data.workspace.edition/clear-edition-mode) (= type :app.main.data.workspace/finalize-page) (= event :interrupt) ;; ESC (and ^boolean (mse/mouse-event? event) From 232cfea70976871f8b265dad1cc27d27d89176ed Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Wed, 12 Jun 2024 12:02:12 +0200 Subject: [PATCH 19/22] :bug: Fix move scrollbar create a selection rectangle --- CHANGES.md | 1 + frontend/playwright/ui/pages/WorkspacePage.js | 10 +++++++ frontend/playwright/ui/specs/sidebar.spec.js | 2 -- .../playwright/ui/specs/workspace.spec.js | 28 +++++++++++++++++++ .../src/app/main/ui/workspace/viewport.cljs | 4 +-- .../ui/workspace/viewport/scroll_bars.cljs | 6 ++-- .../main/ui/workspace/viewport/widgets.cljs | 1 + 7 files changed, 46 insertions(+), 6 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index ffe137f5f..65781b268 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -20,6 +20,7 @@ ### :bug: Bugs fixed +- Fix selection rectangle appears on scroll [Taiga #7525](https://tree.taiga.io/project/penpot/issue/7525) - Fix layer tree not expanding to the bottom edge [Taiga #7466](https://tree.taiga.io/project/penpot/issue/7466) - Fix guides move when board is moved by inputs [Taiga #8010](https://tree.taiga.io/project/penpot/issue/8010) - Fix clickable area of Penptot logo in the viewer [Taiga #7988](https://tree.taiga.io/project/penpot/issue/7988) diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js index 723a3947c..3baa3ece1 100644 --- a/frontend/playwright/ui/pages/WorkspacePage.js +++ b/frontend/playwright/ui/pages/WorkspacePage.js @@ -51,6 +51,8 @@ export class WorkspacePage extends BaseWebSocketPage { this.palette = page.getByTestId("palette"); this.sidebar = page.getByTestId("left-sidebar"); this.librariesModal = page.getByTestId("libraries-modal"); + this.selectionRect = page.getByTestId("workspace-selection-rect"); + this.horizontalScrollbar = page.getByTestId("horizontal-scrollbar"); } async goToWorkspace({ fileId = WorkspacePage.anyFileId, pageId = WorkspacePage.anyPageId } = {}) { @@ -102,6 +104,14 @@ export class WorkspacePage extends BaseWebSocketPage { await this.page.mouse.up(); } + async panOnViewportAt(x, y, width, height) { + await this.page.waitForTimeout(100); + await this.viewport.hover({ position: { x, y } }); + await this.page.mouse.down({ button: "middle" }); + await this.viewport.hover({ position: { x: x + width, y: y + height } }); + await this.page.mouse.up({ button: "middle" }); + } + async togglePages() { const pagesToggle = this.page.getByText("Pages"); await pagesToggle.click(); diff --git a/frontend/playwright/ui/specs/sidebar.spec.js b/frontend/playwright/ui/specs/sidebar.spec.js index 468a661fa..bb0a4d451 100644 --- a/frontend/playwright/ui/specs/sidebar.spec.js +++ b/frontend/playwright/ui/specs/sidebar.spec.js @@ -16,8 +16,6 @@ test.describe("Layers tab", () => { await workspace.togglePages(); const { height: heightCollapsed } = await workspace.layers.boundingBox(); - console.log(heightExpanded, heightCollapsed); - expect(heightExpanded > heightCollapsed); }); }); diff --git a/frontend/playwright/ui/specs/workspace.spec.js b/frontend/playwright/ui/specs/workspace.spec.js index 46c292269..2800163b2 100644 --- a/frontend/playwright/ui/specs/workspace.spec.js +++ b/frontend/playwright/ui/specs/workspace.spec.js @@ -64,3 +64,31 @@ test("Bug 7654 - Toolbar keeps toggling on and off on spacebar press", async ({ await workspacePage.page.keyboard.press("Enter"); await workspacePage.expectHiddenToolbarOptions(); }); + +test("Bug 7525 - User moves a scrollbar and no selciont rectangle appears", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await workspacePage.setupEmptyFile(); + await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-not-empty.json"); + await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-create-rect.json"); + + await workspacePage.goToWorkspace({ + fileId: "6191cd35-bb1f-81f7-8004-7cc63d087374", + pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375", + }); + + // Move created rect to a corner, in orther to get scrollbars + await workspacePage.panOnViewportAt(128, 128, 300, 300); + + // Check scrollbars appear + const horizontalScrollbar = workspacePage.horizontalScrollbar; + await expect(horizontalScrollbar).toBeVisible(); + + // Grab scrollbar and move + const {x, y} = await horizontalScrollbar.boundingBox(); + await page.waitForTimeout(100); + await workspacePage.viewport.hover({ position: { x: x, y: y + 5 } }); + await page.mouse.down(); + await workspacePage.viewport.hover({ position: { x: x - 130, y: y - 95 } }); + + await expect(workspacePage.selectionRect).not.toBeInViewport(); +}); diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index d2697e018..670bd2c4c 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -636,8 +636,8 @@ :objects base-objects :modifiers modifiers :shape frame - :view-only true}])) - + :view-only true}]))] + [:g.scrollbar-wrapper {:clipPath "url(#clip-handlers)"} [:& scroll-bars/viewport-scrollbars {:objects base-objects :zoom zoom diff --git a/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs b/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs index 1dd7a6f79..76640fd88 100644 --- a/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs @@ -196,7 +196,8 @@ [:* (when show-v-scroll? - [:g.v-scroll {:fill clr/black} + [:g.v-scroll {:fill clr/black + :data-testid "vertical-scrollbar"} [:rect {:on-pointer-move #(on-pointer-move % :y) :on-pointer-down #(on-pointer-down % :y) :on-pointer-up on-pointer-up @@ -210,7 +211,8 @@ :style {:stroke "white" :stroke-width (/ 0.15 zoom)}}]]) (when show-h-scroll? - [:g.h-scroll {:fill clr/black} + [:g.h-scroll {:fill clr/black + :data-testid "horizontal-scrollbar"} [:rect {:on-pointer-move #(on-pointer-move % :x) :on-pointer-down #(on-pointer-down % :x) :on-pointer-up on-pointer-up diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs index 6674446fc..a9da0fd7c 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs @@ -67,6 +67,7 @@ [:rect.selection-rect {:x (:x data) :y (:y data) + :data-testid "workspace-selection-rect" :width (:width data) :height (:height data) :style {;; Primary with 0.1 opacity From 67e1081f11e8d368ec6498753d53634af1ce794e Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Wed, 12 Jun 2024 13:28:36 +0200 Subject: [PATCH 20/22] :bug: Fix open overlay relative to a frame --- CHANGES.md | 1 + frontend/src/app/main/ui/viewer/shapes.cljs | 28 ++++++++++++++++----- 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 65781b268..70ac184d5 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -42,6 +42,7 @@ - Fix internal error when I set up a stroke for some objects without and with stroke [Taiga #7558](https://tree.taiga.io/project/penpot/issue/7558) - Toolbar keeps toggling on and off on spacebar press [Taiga #7654](https://github.com/penpot/penpot/pull/7654) - Fix toolbar keeps hiding when click outside workspace [Taiga #7776](https://tree.taiga.io/project/penpot/issue/7776) +- Fix open overlay relative to a frame [Taiga #7563](https://tree.taiga.io/project/penpot/issue/7563) ## 2.0.3 diff --git a/frontend/src/app/main/ui/viewer/shapes.cljs b/frontend/src/app/main/ui/viewer/shapes.cljs index 5832f28ce..833a9fd79 100644 --- a/frontend/src/app/main/ui/viewer/shapes.cljs +++ b/frontend/src/app/main/ui/viewer/shapes.cljs @@ -44,9 +44,17 @@ (or (empty? overlays-ids) (nil? shape) (cfh/root? shape)) base-frame :else (find-relative-to-base-frame (cfh/get-parent objects (:id shape)) objects overlays-ids base-frame))) +(defn- ignore-frame-shape + [shape objects manual?] + (let [shape (cond-> shape ;; When the the interaction is not manual and its origin is a frame, + ;; we need to ignore it on all the find-frame calculations + (and (:frame-id shape) (not manual?)) + (assoc :type :rect)) + objects (assoc objects (:id shape) shape)] + [shape objects])) + (defn- activate-interaction [interaction shape base-frame frame-offset objects overlays] - (case (:action-type interaction) :navigate (when-let [frame-id (:destination interaction)] @@ -58,9 +66,11 @@ (dv/go-to-frame frame-id (:animation interaction))))) :open-overlay - (let [dest-frame-id (:destination interaction) + (let [manual? (= :manual (:overlay-pos-type interaction)) + [shape objects] (ignore-frame-shape shape objects manual?) + dest-frame-id (:destination interaction) dest-frame (get objects dest-frame-id) - relative-to-id (if (= :manual (:overlay-pos-type interaction)) + relative-to-id (if manual? (if (= (:type shape) :frame) ;; manual interactions are always from "self" (:frame-id shape) (:id shape)) @@ -88,7 +98,9 @@ fixed-base?)))) :toggle-overlay - (let [dest-frame-id (:destination interaction) + (let [manual? (= :manual (:overlay-pos-type interaction)) + [shape objects] (ignore-frame-shape shape objects manual?) + dest-frame-id (:destination interaction) dest-frame (get objects dest-frame-id) relative-to-id (if (= :manual (:overlay-pos-type interaction)) (if (= (:type shape) :frame) ;; manual interactions are always from "self" @@ -146,7 +158,9 @@ (st/emit! (dv/close-overlay frame-id))) :toggle-overlay - (let [dest-frame-id (:destination interaction) + (let [manual? (= :manual (:overlay-pos-type interaction)) + [shape objects] (ignore-frame-shape shape objects manual?) + dest-frame-id (:destination interaction) dest-frame (get objects dest-frame-id) relative-to-id (if (= :manual (:overlay-pos-type interaction)) (if (= (:type shape) :frame) ;; manual interactions are always from "self" @@ -178,7 +192,9 @@ :close-overlay - (let [dest-frame-id (:destination interaction) + (let [manual? (= :manual (:overlay-pos-type interaction)) + [shape objects] (ignore-frame-shape shape objects manual?) + dest-frame-id (:destination interaction) dest-frame (get objects dest-frame-id) relative-to-id (if (= :manual (:overlay-pos-type interaction)) (if (= (:type shape) :frame) ;; manual interactions are always from "self" From c15c3b14ee8f358808a5346c2225b13de9e98714 Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Thu, 6 Jun 2024 12:28:41 +0200 Subject: [PATCH 21/22] :sparkles: Add e2e tests for fix color palette default library --- frontend/playwright/ui/pages/WorkspacePage.js | 8 +++++- .../playwright/ui/specs/workspace.spec.js | 28 +++++++++++++++++++ .../app/main/ui/components/tab_container.cljs | 1 + .../src/app/main/ui/workspace/libraries.cljs | 3 +- 4 files changed, 38 insertions(+), 2 deletions(-) diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js index 3baa3ece1..4eac37d7f 100644 --- a/frontend/playwright/ui/pages/WorkspacePage.js +++ b/frontend/playwright/ui/pages/WorkspacePage.js @@ -50,9 +50,9 @@ export class WorkspacePage extends BaseWebSocketPage { this.layers = page.getByTestId("layer-tree"); this.palette = page.getByTestId("palette"); this.sidebar = page.getByTestId("left-sidebar"); - this.librariesModal = page.getByTestId("libraries-modal"); this.selectionRect = page.getByTestId("workspace-selection-rect"); this.horizontalScrollbar = page.getByTestId("horizontal-scrollbar"); + this.librariesModal = page.getByTestId("libraries-modal"); } async goToWorkspace({ fileId = WorkspacePage.anyFileId, pageId = WorkspacePage.anyPageId } = {}) { @@ -160,4 +160,10 @@ export class WorkspacePage extends BaseWebSocketPage { async clickColorPalette(clickOptions = {}) { await this.palette.getByRole("button", { name: "Color Palette (Alt+P)" }).click(clickOptions); } + + async clickColorPalette(clickOptions = {}) { + await this.palette + .getByRole("button", { name: "Color Palette (Alt+P)" }) + .click(clickOptions); + } } diff --git a/frontend/playwright/ui/specs/workspace.spec.js b/frontend/playwright/ui/specs/workspace.spec.js index 2800163b2..3682ecf68 100644 --- a/frontend/playwright/ui/specs/workspace.spec.js +++ b/frontend/playwright/ui/specs/workspace.spec.js @@ -92,3 +92,31 @@ test("Bug 7525 - User moves a scrollbar and no selciont rectangle appears", asyn await expect(workspacePage.selectionRect).not.toBeInViewport(); }); + +test("User adds a library and its automatically selected in the color palette", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await workspacePage.setupEmptyFile(); + await workspacePage.mockRPC("link-file-to-library", "workspace/link-file-to-library.json"); + await workspacePage.mockRPC("unlink-file-from-library", "workspace/unlink-file-from-library.json"); + await workspacePage.mockRPC("get-team-shared-files?team-id=*", "workspace/get-team-shared-libraries-non-empty.json"); + + await workspacePage.goToWorkspace(); + + // Add Testing library 1 + await workspacePage.clickColorPalette(); + await workspacePage.clickAssets(); + // Now the get-file call should return a library + await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-library.json"); + await workspacePage.openLibrariesModal(); + await workspacePage.clickLibrary("Testing library 1") + await workspacePage.closeLibrariesModal(); + + await expect(workspacePage.palette.getByRole("button", { name: "test-color-187cd5" })).toBeVisible(); + + // Remove Testing library 1 + await workspacePage.openLibrariesModal(); + await workspacePage.clickLibrary("Testing library 1") + await workspacePage.closeLibrariesModal(); + + await expect(workspacePage.palette.getByText('There are no color styles in your library yet')).toBeVisible(); +}); diff --git a/frontend/src/app/main/ui/components/tab_container.cljs b/frontend/src/app/main/ui/components/tab_container.cljs index 20c79a417..1e3b99079 100644 --- a/frontend/src/app/main/ui/components/tab_container.cljs +++ b/frontend/src/app/main/ui/components/tab_container.cljs @@ -59,6 +59,7 @@ [:div {:key (str/concat "tab-" sid) :title tooltip :data-id sid + :data-testid sid :on-click on-click :class (stl/css-case :tab-container-tab-title true diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index 6d5813c0d..5e354e423 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/libraries.cljs @@ -519,7 +519,8 @@ [:div {:class (stl/css :modal-dialog)} [:button {:class (stl/css :close-btn) :on-click close-dialog - :aria-label (tr "labels.close")} + :aria-label (tr "labels.close") + :data-testid "close-libraries"} close-icon] [:div {:class (stl/css :modal-title)} (tr "workspace.libraries.libraries")] From d48e4866681470f576853f6534224cc002e63d52 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Mon, 10 Jun 2024 16:03:07 +0200 Subject: [PATCH 22/22] :bug: Fix problem moving layout to frame --- common/src/app/common/types/shape/layout.cljc | 29 +- .../data/workspace/get-file-7760.json | 49 +++ .../workspace/get-file-fragment-7760.json | 383 ++++++++++++++++++ frontend/playwright/ui/pages/WorkspacePage.js | 7 + .../playwright/ui/specs/design-tab.spec.js | 32 ++ .../app/main/ui/components/radio_buttons.cljs | 2 +- frontend/src/app/main/ui/shapes/shape.cljs | 1 + .../sidebar/options/menus/layout_item.cljs | 4 +- 8 files changed, 492 insertions(+), 15 deletions(-) create mode 100644 frontend/playwright/data/workspace/get-file-7760.json create mode 100644 frontend/playwright/data/workspace/get-file-fragment-7760.json diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc index 7f5e6e83a..f791eaee1 100644 --- a/common/src/app/common/types/shape/layout.cljc +++ b/common/src/app/common/types/shape/layout.cljc @@ -604,18 +604,23 @@ (defn remove-layout-item-data [shape] - (dissoc shape - :layout-item-margin - :layout-item-margin-type - :layout-item-h-sizing - :layout-item-v-sizing - :layout-item-max-h - :layout-item-min-h - :layout-item-max-w - :layout-item-min-w - :layout-item-align-self - :layout-item-absolute - :layout-item-z-index)) + (-> shape + (dissoc :layout-item-margin + :layout-item-margin-type + :layout-item-max-h + :layout-item-min-h + :layout-item-max-w + :layout-item-min-w + :layout-item-align-self + :layout-item-absolute + :layout-item-z-index) + (cond-> (or (not (any-layout? shape)) + (= :fill (:layout-item-h-sizing shape))) + (dissoc :layout-item-h-sizing) + + (or (not (any-layout? shape)) + (= :fill (:layout-item-v-sizing shape))) + (dissoc :layout-item-v-sizing)))) (defn update-flex-scale [shape scale] diff --git a/frontend/playwright/data/workspace/get-file-7760.json b/frontend/playwright/data/workspace/get-file-7760.json new file mode 100644 index 000000000..ff33a7a94 --- /dev/null +++ b/frontend/playwright/data/workspace/get-file-7760.json @@ -0,0 +1,49 @@ +{ + "~:features": { + "~#set": [ + "layout/grid", + "styles/v2", + "fdata/pointer-map", + "fdata/objects-map", + "components/v2", + "fdata/shape-data-type" + ] + }, + "~:permissions": { + "~:type": "~:membership", + "~:is-owner": true, + "~:is-admin": true, + "~:can-edit": true, + "~:can-read": true, + "~:is-logged": true + }, + "~:has-media-trimmed": false, + "~:comment-thread-seqn": 0, + "~:name": "New File 6", + "~:revn": 5, + "~:modified-at": "~m1718094617219", + "~:id": "~ucd90e028-326a-80b4-8004-7cdec16ffad5", + "~:is-shared": false, + "~:version": 48, + "~:project-id": "~u128636f9-5e78-812b-8004-350dd1a8869a", + "~:created-at": "~m1718094569923", + "~:data": { + "~:pages": [ + "~ucd90e028-326a-80b4-8004-7cdec16ffad6" + ], + "~:pages-index": { + "~ucd90e028-326a-80b4-8004-7cdec16ffad6": { + "~#penpot/pointer": [ + "~ucd90e028-326a-80b4-8004-7cdeefa23ece", + { + "~:created-at": "~m1718094617224" + } + ] + } + }, + "~:id": "~ucd90e028-326a-80b4-8004-7cdec16ffad5", + "~:options": { + "~:components-v2": true + } + } +} diff --git a/frontend/playwright/data/workspace/get-file-fragment-7760.json b/frontend/playwright/data/workspace/get-file-fragment-7760.json new file mode 100644 index 000000000..0c8011553 --- /dev/null +++ b/frontend/playwright/data/workspace/get-file-fragment-7760.json @@ -0,0 +1,383 @@ +{ + "~:id": "~ucd90e028-326a-80b4-8004-7cdeefa23ece", + "~:file-id": "~ucd90e028-326a-80b4-8004-7cdec16ffad5", + "~:created-at": "~m1718094617214", + "~:content": { + "~:options": {}, + "~:objects": { + "~u00000000-0000-0000-0000-000000000000": { + "~#shape": { + "~:y": 0, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:name": "Root Frame", + "~:width": 0.01, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 0, + "~:y": 0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.01 + } + }, + { + "~#point": { + "~:x": 0, + "~:y": 0.01 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u00000000-0000-0000-0000-000000000000", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 0, + "~:proportion": 1.0, + "~:selrect": { + "~#rect": { + "~:x": 0, + "~:y": 0, + "~:width": 0.01, + "~:height": 0.01, + "~:x1": 0, + "~:y1": 0, + "~:x2": 0.01, + "~:y2": 0.01 + } + }, + "~:fills": [ + { + "~:fill-color": "#FFFFFF", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 0.01, + "~:flip-y": null, + "~:shapes": [ + "~u86087f92-9a17-8067-8004-7cdec45bee43", + "~u86087f92-9a17-8067-8004-7cded1cbe70e" + ] + } + }, + "~u86087f92-9a17-8067-8004-7cdec45bee43": { + "~#shape": { + "~:y": 341, + "~:hide-fill-on-export": false, + "~:layout-gap-type": "~:multiple", + "~:layout-padding": { + "~:p1": 34, + "~:p2": 36, + "~:p3": 34, + "~:p4": 36 + }, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:layout-wrap-type": "~:nowrap", + "~:grow-type": "~:fixed", + "~:layout": "~:flex", + "~:hide-in-viewer": false, + "~:name": "Flex Board", + "~:layout-align-items": "~:start", + "~:width": 176, + "~:layout-padding-type": "~:simple", + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 217, + "~:y": 341 + } + }, + { + "~#point": { + "~:x": 393, + "~:y": 341 + } + }, + { + "~#point": { + "~:x": 393, + "~:y": 511 + } + }, + { + "~#point": { + "~:x": 217, + "~:y": 511 + } + } + ], + "~:layout-item-h-sizing": "~:auto", + "~:proportion-lock": false, + "~:layout-gap": { + "~:row-gap": 0, + "~:column-gap": 0 + }, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:layout-item-v-sizing": "~:auto", + "~:layout-justify-content": "~:start", + "~:id": "~u86087f92-9a17-8067-8004-7cdec45bee43", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:layout-flex-dir": "~:row", + "~:layout-align-content": "~:stretch", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 217, + "~:proportion": 1, + "~:selrect": { + "~#rect": { + "~:x": 217, + "~:y": 341, + "~:width": 176, + "~:height": 170, + "~:x1": 217, + "~:y1": 341, + "~:x2": 393, + "~:y2": 511 + } + }, + "~:fills": [ + { + "~:fill-color": "#FFFFFF", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 170, + "~:flip-y": null, + "~:shapes": [ + "~u86087f92-9a17-8067-8004-7cdec98dfa7f" + ] + } + }, + "~u86087f92-9a17-8067-8004-7cdec98dfa7f": { + "~#shape": { + "~:y": 375, + "~:rx": 0, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 104, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 253, + "~:y": 375 + } + }, + { + "~#point": { + "~:x": 357, + "~:y": 375 + } + }, + { + "~#point": { + "~:x": 357, + "~:y": 477 + } + }, + { + "~#point": { + "~:x": 253, + "~:y": 477 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u86087f92-9a17-8067-8004-7cdec98dfa7f", + "~:parent-id": "~u86087f92-9a17-8067-8004-7cdec45bee43", + "~:frame-id": "~u86087f92-9a17-8067-8004-7cdec45bee43", + "~:strokes": [], + "~:x": 253, + "~:proportion": 1, + "~:selrect": { + "~#rect": { + "~:x": 253, + "~:y": 375, + "~:width": 104, + "~:height": 102, + "~:x1": 253, + "~:y1": 375, + "~:x2": 357, + "~:y2": 477 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:ry": 0, + "~:height": 102, + "~:flip-y": null + } + }, + "~u86087f92-9a17-8067-8004-7cded1cbe70e": { + "~#shape": { + "~:y": 300, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Container Board", + "~:width": 434, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 689, + "~:y": 300 + } + }, + { + "~#point": { + "~:x": 1123, + "~:y": 300 + } + }, + { + "~#point": { + "~:x": 1123, + "~:y": 741 + } + }, + { + "~#point": { + "~:x": 689, + "~:y": 741 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u86087f92-9a17-8067-8004-7cded1cbe70e", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 689, + "~:proportion": 1, + "~:selrect": { + "~#rect": { + "~:x": 689, + "~:y": 300, + "~:width": 434, + "~:height": 441, + "~:x1": 689, + "~:y1": 300, + "~:x2": 1123, + "~:y2": 741 + } + }, + "~:fills": [ + { + "~:fill-color": "#FFFFFF", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 441, + "~:flip-y": null, + "~:shapes": [] + } + } + }, + "~:id": "~ucd90e028-326a-80b4-8004-7cdec16ffad6", + "~:name": "Page 1" + } +} diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js index 4eac37d7f..c8f0c49cc 100644 --- a/frontend/playwright/ui/pages/WorkspacePage.js +++ b/frontend/playwright/ui/pages/WorkspacePage.js @@ -117,6 +117,13 @@ export class WorkspacePage extends BaseWebSocketPage { await pagesToggle.click(); } + async moveSelectionToShape(name) { + await this.page.locator('rect.viewport-selrect').hover(); + await this.page.mouse.down(); + await this.viewport.getByTestId(name).first().hover({ force: true }); + await this.page.mouse.up(); + } + async clickLeafLayer(name, clickOptions = {}) { const layer = this.layers.getByText(name); await layer.click(clickOptions); diff --git a/frontend/playwright/ui/specs/design-tab.spec.js b/frontend/playwright/ui/specs/design-tab.spec.js index 0c890c07e..7a43aa166 100644 --- a/frontend/playwright/ui/specs/design-tab.spec.js +++ b/frontend/playwright/ui/specs/design-tab.spec.js @@ -92,3 +92,35 @@ test.describe("Multiple shapes attributes", () => { await expect(workspace.page.getByTestId("add-blur")).toBeHidden(); }); }); + +test("BUG 7760 - Layout losing properties when changing parents", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await workspacePage.setupEmptyFile(); + await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-7760.json"); + await workspacePage.mockRPC( + "get-file-fragment?file-id=*&fragment-id=*", + "workspace/get-file-fragment-7760.json", + ); + await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-create-rect.json"); + + await workspacePage.goToWorkspace({ + fileId: "cd90e028-326a-80b4-8004-7cdec16ffad5", + pageId: "cd90e028-326a-80b4-8004-7cdec16ffad6", + }); + + // Select the flex board and drag it into the other container board + await workspacePage.clickLeafLayer("Flex Board"); + + // Move the first board into the second + const hAuto = await workspacePage.page.getByTitle("Fit content (Horizontal)"); + const vAuto = await workspacePage.page.getByTitle("Fit content (Vertical)"); + + await expect(vAuto.locator("input")).toBeChecked(); + await expect(hAuto.locator("input")).toBeChecked(); + + await workspacePage.moveSelectionToShape("Container Board"); + + // The first board properties should still be auto width/height + await expect(vAuto.locator("input")).toBeChecked(); + await expect(hAuto.locator("input")).toBeChecked(); +}); diff --git a/frontend/src/app/main/ui/components/radio_buttons.cljs b/frontend/src/app/main/ui/components/radio_buttons.cljs index 0d7cce294..dbaffebb5 100644 --- a/frontend/src/app/main/ui/components/radio_buttons.cljs +++ b/frontend/src/app/main/ui/components/radio_buttons.cljs @@ -54,7 +54,7 @@ :name name :disabled disabled :value value - :checked checked?}]])) + :default-checked checked?}]])) (mf/defc radio-buttons {::mf/props :obj} diff --git a/frontend/src/app/main/ui/shapes/shape.cljs b/frontend/src/app/main/ui/shapes/shape.cljs index e4082b89c..c344ec857 100644 --- a/frontend/src/app/main/ui/shapes/shape.cljs +++ b/frontend/src/app/main/ui/shapes/shape.cljs @@ -96,6 +96,7 @@ (obj/unset! "disable-shadows?") (obj/set! "ref" ref) (obj/set! "id" (dm/fmt "shape-%" shape-id)) + (obj/set! "data-testid" (:name shape)) ;; TODO: This is added for backward compatibility. (cond-> (and (cfh/text-shape? shape) (empty? (:position-data shape))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs index 5092d025b..681e879f3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -250,7 +250,7 @@ [:& radio-button {:value "auto" :icon i/hug-content - :title "Fit content" + :title "Fit content (Horizontal)" :id "behaviour-h-auto"}])]]) (mf/defc element-behaviour-vertical @@ -288,7 +288,7 @@ {:value "auto" :icon i/hug-content :icon-class (stl/css :rotated) - :title "Fit content" + :title "Fit content (Vertical)" :id "behaviour-v-auto"}])]]) (mf/defc align-self-row