From f57ed6a76373847ef76cbdac99025aa426d23e4e Mon Sep 17 00:00:00 2001 From: Aitor Date: Thu, 13 Jul 2023 10:21:45 +0200 Subject: [PATCH 1/6] :sparkles: Set smooth/instant autoscroll depending on distance --- CHANGES.md | 1 + .../main/ui/workspace/sidebar/layer_item.cljs | 22 ++++++++----- frontend/src/app/util/dom.cljs | 32 ++++++++++++++++++- 3 files changed, 46 insertions(+), 9 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 7ee9836bd1..b4a585382b 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -18,6 +18,7 @@ - Add the ability to use the registration whitelist with OICD [Github #3348](https://github.com/penpot/penpot/issues/3348) - Add support for local caching of google fonts (this avoids exposing the final user IP to goolge and reduces the amount of request sent to google) +- Set smooth/instant autoscroll depending on distance [GitHub #3377](https://github.com/penpot/penpot/issues/3377) ### :bug: Bugs fixed diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs index 9850953373..fae77ac026 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs @@ -170,22 +170,28 @@ (mf/with-effect [selected? selected] (let [single? (= (count selected) 1) node (mf/ref-val ref) - parent-node (dom/get-parent (dom/get-parent node)) + ;; NOTE: Neither get-parent-at nor get-parent-with-selector + ;; work if the component template changes, so we need to + ;; seek for an alternate solution. Maybe use-context? + scroll-node (dom/get-parent-with-selector node ".tool-window-content") + parent-node (dom/get-parent-at node 2) subid (when (and single? selected?) (let [scroll-to @scroll-to-middle?] (ts/schedule 100 - #(if scroll-to - (dom/scroll-into-view! parent-node #js {:block "center" :behavior "smooth" :inline "start"}) - (do - (dom/scroll-into-view-if-needed! parent-node #js {:block "center" :behavior "smooth" :inline "start"}) - (reset! scroll-to-middle? true))))))] + #(let [scroll-distance-ratio (dom/get-scroll-distance-ratio node scroll-node) + scroll-behavior (if (> scroll-distance-ratio 1) "instant" "smooth")] + (if scroll-to + (dom/scroll-into-view! parent-node #js {:block "center" :behavior scroll-behavior :inline "start"}) + (do + (dom/scroll-into-view-if-needed! parent-node #js {:block "center" :behavior scroll-behavior :inline "start"}) + (reset! scroll-to-middle? true)))))))] #(when (some? subid) (rx/dispose! subid)))) - + (if new-css-system [:* [:div {:on-context-menu on-context-menu @@ -343,4 +349,4 @@ :index index :objects objects :key (:id item) - :sortable? sortable?}]))])]))) \ No newline at end of file + :sortable? sortable?}]))])]))) diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index 0e670e05d1..535d7a0d01 100644 --- a/frontend/src/app/util/dom.cljs +++ b/frontend/src/app/util/dom.cljs @@ -143,9 +143,16 @@ (when (some? node) (.-parentElement ^js node))) +(defn get-parent-at + [^js node count] + (when (some? node) + (loop [current node current-count count] + (if (or (nil? current) (= current-count 0)) + current + (recur (.-parentElement current) (dec current-count)))))) + (defn get-parent-with-selector [^js node selector] - (loop [current node] (if (or (nil? current) (.matches current selector)) current @@ -180,6 +187,22 @@ :scroll-top (.-scrollTop event) :scroll-width (.-scrollWidth event)})) +(defn get-scroll-height-ratio + [^js node] + (when (some? node) + (/ (.-scrollHeight node) (.-clientHeight node)))) + +(defn get-scroll-distance + [^js node scroll-node] + (when (and (some? node) (some? scroll-node)) + (abs (- (.-scrollTop scroll-node) (.-offsetTop node))))) + +(defn get-scroll-distance-ratio + [^js node scroll-node] + (let [distance (get-scroll-distance node scroll-node) + height (.-clientHeight scroll-node)] + (/ distance height))) + (def get-target-val (comp get-value get-target)) (def get-target-scroll (comp get-scroll-position get-target)) @@ -550,6 +573,13 @@ (when (some? element) (.scrollIntoView element options)))) +;; NOTE: scrollIntoViewIfNeeded is not supported in Firefox +;; because it is not a standard API. BTW it only supports +;; centerIfNeeded as boolean option. +;; @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded +;; @see https://www.w3.org/Bugs/Public/show_bug.cgi?id=17152 +;; @see https://github.com/w3c/csswg-drafts/pull/1805 +;; @see https://github.com/w3c/csswg-drafts/pull/5677 (defn scroll-into-view-if-needed! ([^js element] (scroll-into-view-if-needed! element false)) From a940c7e9122d90485e889ed28697fc24097016bc Mon Sep 17 00:00:00 2001 From: Eva Date: Wed, 12 Jul 2023 09:23:51 +0200 Subject: [PATCH 2/6] :bug: Fix onboarding modal height --- CHANGES.md | 1 + .../resources/styles/main/partials/modal.scss | 3 +- .../main/partials/signup-questions.scss | 61 ++++++++++++------- .../src/app/main/ui/onboarding/questions.cljs | 16 ++--- 4 files changed, 49 insertions(+), 32 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 7d22d11959..f9d0b95343 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -75,6 +75,7 @@ - Fix retrieve user comments in dashboard [Taiga #5607](https://tree.taiga.io/project/penpot/issue/5607) - Locks shapes when moved inside a locked parent [Taiga #5252](https://tree.taiga.io/project/penpot/issue/5252) - Fix rotate several elements in bulk [Taiga #5165](https://tree.taiga.io/project/penpot/issue/5165) +- Fix onboarding slides height [Taiga #5373](https://tree.taiga.io/project/penpot/issue/5373) ### :arrow_up: Deps updates diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss index 17f67146a0..3636416c45 100644 --- a/frontend/resources/styles/main/partials/modal.scss +++ b/frontend/resources/styles/main/partials/modal.scss @@ -899,7 +899,8 @@ } &.onboarding-v2 { - min-height: 464px; + min-height: unset; + height: 100%; min-width: 752px; .modal-left { background-color: $color-gray-50; diff --git a/frontend/resources/styles/main/partials/signup-questions.scss b/frontend/resources/styles/main/partials/signup-questions.scss index 35ec09c5fe..ee1f426459 100644 --- a/frontend/resources/styles/main/partials/signup-questions.scss +++ b/frontend/resources/styles/main/partials/signup-questions.scss @@ -7,12 +7,16 @@ .signup-questions { background-color: $color-white; color: $color-gray-60; - height: 710px; max-width: 646px; overflow-y: auto; padding: 1.5rem 1rem; position: relative; width: 100%; + form { + display: flex; + flex-direction: column; + height: 100%; + } h1, h3 { @@ -33,6 +37,9 @@ height: 2.5rem; width: 100%; } + .custom-select { + margin-bottom: 10px; + } .step-number { background-color: $color-gray-10; @@ -71,30 +78,38 @@ margin: 0.75rem 0 2rem 0; } } - - .step-prev { - position: absolute; - left: 1rem; - bottom: 1.25rem; - button { - background-color: transparent; - border: none; - cursor: pointer; - font-size: $fs15; + .buttons { + flex-grow: 1; + display: grid; + grid-template-columns: 50% 50%; + grid-template-areas: "previous next"; + .step-prev { + display: flex; + align-items: end; + justify-content: flex-start; + grid-area: previous; + button { + background-color: transparent; + border: none; + cursor: pointer; + height: 40px; + font-size: $fs15; + } } - } - .step-next { - display: flex; - position: absolute; - right: 1rem; - bottom: 0rem; - input { - font-size: $fs15; - color: $color-black; - background-color: $color-primary; - width: 11rem; - margin-left: auto; + .step-next { + display: flex; + align-items: end; + justify-content: flex-end; + grid-area: next; + input { + font-size: $fs15; + color: $color-black; + background-color: $color-primary; + width: 11rem; + margin-left: auto; + margin: 0; + } } } diff --git a/frontend/src/app/main/ui/onboarding/questions.cljs b/frontend/src/app/main/ui/onboarding/questions.cljs index a64905e4d6..d5cd52a95d 100644 --- a/frontend/src/app/main/ui/onboarding/questions.cljs +++ b/frontend/src/app/main/ui/onboarding/questions.cljs @@ -24,15 +24,15 @@ [:div.step-number (str/ffmt "%/4" step)]] children + [:div.buttons + [:div.step-next + [:& fm/submit-button + {:label (if (< step 4) (tr "questions.next") (tr "questions.start")) + :class "step-next"}]] - [:div.step-next - [:& fm/submit-button - {:label (if (< step 4) (tr "questions.next") (tr "questions.start")) - :class "step-next"}]] - - (when on-prev - [:div.step-prev - [:button {:on-click on-prev} (tr "questions.previous")]])]) + (when on-prev + [:div.step-prev + [:button {:on-click on-prev} (tr "questions.previous")]])]]) (s/def ::questions-form-step-1 (s/keys :req-un [::planning])) From ee733849931bda16b864766b3d7b92310496c05b Mon Sep 17 00:00:00 2001 From: Eva Date: Wed, 12 Jul 2023 10:35:20 +0200 Subject: [PATCH 3/6] :bug: Fix create typography with section closed --- CHANGES.md | 1 + frontend/src/app/main/ui/workspace/sidebar/assets.cljs | 1 + 2 files changed, 2 insertions(+) diff --git a/CHANGES.md b/CHANGES.md index f9d0b95343..2c5ab69460 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -76,6 +76,7 @@ - Locks shapes when moved inside a locked parent [Taiga #5252](https://tree.taiga.io/project/penpot/issue/5252) - Fix rotate several elements in bulk [Taiga #5165](https://tree.taiga.io/project/penpot/issue/5165) - Fix onboarding slides height [Taiga #5373](https://tree.taiga.io/project/penpot/issue/5373) +- Fix create typography with section closed [Taiga #5574](https://tree.taiga.io/project/penpot/issue/5574) ### :arrow_up: Deps updates diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index d67352717d..8b8e666657 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -1879,6 +1879,7 @@ (mf/use-fn (mf/deps file-id) (fn [_] + (st/emit! (dw/set-assets-section-open file-id :typographies true)) (st/emit! (dwt/add-typography file-id)))) handle-change From 13b17628734c513126ffa4f1e325ff15a5926c4e Mon Sep 17 00:00:00 2001 From: Eva Date: Wed, 12 Jul 2023 13:04:52 +0200 Subject: [PATCH 4/6] :bug: Fix exports menu on viewer mode --- CHANGES.md | 1 + .../app/main/ui/viewer/inspect/exports.cljs | 47 ++++++++++++------- .../sidebar/options/menus/exports.cljs | 4 +- 3 files changed, 34 insertions(+), 18 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 2c5ab69460..5327be2bb8 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -77,6 +77,7 @@ - Fix rotate several elements in bulk [Taiga #5165](https://tree.taiga.io/project/penpot/issue/5165) - Fix onboarding slides height [Taiga #5373](https://tree.taiga.io/project/penpot/issue/5373) - Fix create typography with section closed [Taiga #5574](https://tree.taiga.io/project/penpot/issue/5574) +- Fix exports menu on viewer mode [Taiga #5568](https://tree.taiga.io/project/penpot/issue/5568) ### :arrow_up: Deps updates diff --git a/frontend/src/app/main/ui/viewer/inspect/exports.cljs b/frontend/src/app/main/ui/viewer/inspect/exports.cljs index fc8422f816..4a34421341 100644 --- a/frontend/src/app/main/ui/viewer/inspect/exports.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/exports.cljs @@ -13,6 +13,7 @@ [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :refer [tr c]] + [app.util.keyboard :as kbd] [rumext.v2 :as mf])) (mf/defc exports @@ -30,6 +31,11 @@ (str suffix))) (:name page)) + scale-enabled? + (mf/use-callback + (fn [export] + (#{:png :jpeg} (:type export)))) + in-progress? (:in-progress xstate) on-download @@ -97,7 +103,13 @@ (let [target (dom/get-target event) value (dom/get-value target) value (keyword value)] - (swap! exports assoc-in [index :type] value))))] + (swap! exports assoc-in [index :type] value)))) + manage-key-down + (mf/use-callback + (fn [event] + (let [esc? (kbd/esc? event)] + (when esc? + (dom/blur! (dom/get-target event))))))] (mf/use-effect (mf/deps shapes) @@ -117,24 +129,27 @@ (for [[index export] (d/enumerate @exports)] [:div.element-set-options-group {:key index} - [:select.input-select {:on-change (partial on-scale-change index) - :value (:scale export)} - [:option {:value "0.5"} "0.5x"] - [:option {:value "0.75"} "0.75x"] - [:option {:value "1"} "1x"] - [:option {:value "1.5"} "1.5x"] - [:option {:value "2"} "2x"] - [:option {:value "4"} "4x"] - [:option {:value "6"} "6x"]] + (when (scale-enabled? export) + [:select.input-select {:on-change (partial on-scale-change index) + :value (:scale export)} + [:option {:value "0.5"} "0.5x"] + [:option {:value "0.75"} "0.75x"] + [:option {:value "1"} "1x"] + [:option {:value "1.5"} "1.5x"] + [:option {:value "2"} "2x"] + [:option {:value "4"} "4x"] + [:option {:value "6"} "6x"]]) - [:input.input-text {:on-change (partial on-suffix-change index) - :value (:suffix export)}] - [:select.input-select {:on-change (partial on-type-change index) - :value (d/name (:type export))} + [:input.input-text {:value (:suffix export) + :placeholder (tr "workspace.options.export.suffix") + :on-change (partial on-suffix-change index) + :on-key-down manage-key-down}] + [:select.input-select {:value (d/name (:type export)) + :on-change (partial on-type-change index)} [:option {:value "png"} "PNG"] [:option {:value "jpeg"} "JPEG"] - [:option {:value "svg"} "SVG"]] - + [:option {:value "svg"} "SVG"] + [:option {:value "pdf"} "PDF"]] [:div.delete-icon {:on-click (partial delete-export index)} i/minus]]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs index c9f94e7151..191051640a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs @@ -125,7 +125,7 @@ (st/emit! (dch/update-shapes ids (fn [shape] (assoc shape :exports [])))))) - manage-key-down + manage-key-down (mf/use-callback (fn [event] (let [esc? (kbd/esc? event)] @@ -165,7 +165,7 @@ :placeholder (tr "workspace.options.export.suffix") :on-change (partial on-suffix-change index) :on-key-down manage-key-down}] - [:select.input-select {:value (name (:type export)) + [:select.input-select {:value (d/name (:type export)) :on-change (partial on-type-change index)} [:option {:value "png"} "PNG"] [:option {:value "jpeg"} "JPEG"] From 965c4fe243f5cc93827cc66593928a50767d0712 Mon Sep 17 00:00:00 2001 From: Eva Date: Wed, 12 Jul 2023 13:45:38 +0200 Subject: [PATCH 5/6] :bug: Fix create empty comments --- CHANGES.md | 3 ++- frontend/src/app/main/ui/comments.cljs | 13 +++++++------ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 5327be2bb8..51467bfbc2 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -78,7 +78,8 @@ - Fix onboarding slides height [Taiga #5373](https://tree.taiga.io/project/penpot/issue/5373) - Fix create typography with section closed [Taiga #5574](https://tree.taiga.io/project/penpot/issue/5574) - Fix exports menu on viewer mode [Taiga #5568](https://tree.taiga.io/project/penpot/issue/5568) - +- Fix create empty comments [Taiga #5536](https://tree.taiga.io/project/penpot/issue/5536) + ### :arrow_up: Deps updates - Update google fonts catalog (at 2023/07/06) [Taiga #5592](https://tree.taiga.io/project/penpot/issue/5592) diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs index 7adcede2d6..0b0cdff153 100644 --- a/frontend/src/app/main/ui/comments.cljs +++ b/frontend/src/app/main/ui/comments.cljs @@ -16,6 +16,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] + [app.main.ui.components.forms :as fm] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -66,8 +67,7 @@ (let [target (dom/get-target event)] (dom/select-text! target) ;; In webkit browsers the mouseup event will be called after the on-focus causing and unselect - (.addEventListener target "mouseup" dom/prevent-default #js {:once true}))))) - ] + (.addEventListener target "mouseup" dom/prevent-default #js {:once true})))))] @@ -129,7 +129,8 @@ {:type "button" :value "Post" :on-click on-submit - :disabled (str/empty-or-nil? @content)}] + :disabled (or (fm/all-spaces? @content) + (str/empty-or-nil? @content))}] [:input.btn-secondary {:type "button" :value "Cancel" @@ -186,7 +187,8 @@ {:on-click on-submit :type "button" :value "Post" - :disabled (str/empty-or-nil? content)}] + :disabled (or (fm/all-spaces? content) + (str/empty-or-nil? content))}] [:input.btn-secondary {:on-click on-esc :type "button" @@ -203,8 +205,7 @@ on-submit* (mf/use-fn (mf/deps @content) - (fn [] (on-submit @content))) - ] + (fn [] (on-submit @content)))] [:div.reply-form.edit-form From 29777094685809b9282dafbf45e0cc3f9863dc02 Mon Sep 17 00:00:00 2001 From: Aitor Date: Thu, 13 Jul 2023 13:14:41 +0200 Subject: [PATCH 6/6] :bug: Fix previous thumbnail being rendered when fill is transparent --- .../app/main/ui/workspace/shapes/frame/thumbnail_render.cljs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs b/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs index f2ee9f0d24..fd82783743 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs @@ -149,6 +149,8 @@ loading-fonts? (some? (dom/query (dm/str "#frame-container-" id " > style[data-loading='true']")))] (when (and (not loading-images?) (not loading-fonts?)) + (reset! svg-uri* nil) + (reset! bitmap-uri* nil) (generate-thumbnail) (reset! regenerate* false))))))