From a8fae53564600c0a4004f4d4288595570f1d0509 Mon Sep 17 00:00:00 2001 From: AzazelN28 Date: Wed, 24 Apr 2024 16:07:47 +0200 Subject: [PATCH 1/3] :bug: color palette sorting --- common/src/app/common/colors.cljc | 23 +++++++++++++++++++ .../ui/workspace/colorpicker/libraries.cljs | 8 +------ 2 files changed, 24 insertions(+), 7 deletions(-) diff --git a/common/src/app/common/colors.cljc b/common/src/app/common/colors.cljc index 69de60bd5..1f34903a4 100644 --- a/common/src/app/common/colors.cljc +++ b/common/src/app/common/colors.cljc @@ -274,6 +274,13 @@ (catch #?(:clj Throwable :cljs :default) _cause [0 0 0]))) +(defn hex->lum + [color] + (let [[r g b] (hex->rgb color)] + (mth/sqrt (+ (* 0.241 r) + (* 0.691 g) + (* 0.068 b))))) + (defn- int->hex "Convert integer to hex string" [v] @@ -455,3 +462,19 @@ :else [r g (inc b)])) + +(defn reduce-range + [value range] + (/ (mth/floor (* value range)) range)) + +(defn sort-colors + [a b] + (let [[ah _ av] (hex->hsv (:color a)) + [bh _ bv] (hex->hsv (:color b)) + ah (reduce-range (/ ah 60) 8) + bh (reduce-range (/ bh 60) 8) + av (/ av 255) + bv (/ bv 255) + a (+ (* ah 100) (* av 10)) + b (+ (* bh 100) (* bv 10))] + (compare a b))) diff --git a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs index 9bb4f067e..1c3ef0ed8 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs @@ -54,13 +54,7 @@ get-sorted-colors (mf/use-fn (fn [colors] - (sort (fn [a b] - (let [[ah _ al] (c/hex->hsl (:color a)) - [bh _ bl] (c/hex->hsl (:color b)) - a (+ (* ah 100) (* al 99)) - b (+ (* bh 100) (* bl 99))] - (compare a b))) - (into [] (filter check-valid-color?) colors)))) + (sort c/sort-colors (into [] (filter check-valid-color?) colors)))) toggle-palette (mf/use-fn From 7117ea1f7ec195f3662548c636844156247d6074 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 3 May 2024 15:00:51 +0200 Subject: [PATCH 2/3] :bug: Fix style scoping problem with imported SVG --- CHANGES.md | 1 + frontend/src/app/main/ui/context.cljs | 1 + frontend/src/app/main/ui/shapes/group.cljs | 29 ++++++++++++++------ frontend/src/app/main/ui/shapes/svg_raw.cljs | 13 ++++++++- 4 files changed, 34 insertions(+), 10 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 3df22277a..70ca6e42c 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -10,6 +10,7 @@ ### :bug: Bugs fixed - Fix color palette sorting [Taiga Issue #7458](https://tree.taiga.io/project/penpot/issue/7458) +- Fix style scoping problem with imported SVG [Taiga #7671](https://tree.taiga.io/project/penpot/issue/7671) ## 2.0.1 diff --git a/frontend/src/app/main/ui/context.cljs b/frontend/src/app/main/ui/context.cljs index bfe0fa6ee..1aa4b532b 100644 --- a/frontend/src/app/main/ui/context.cljs +++ b/frontend/src/app/main/ui/context.cljs @@ -17,6 +17,7 @@ (def current-page-id (mf/create-context nil)) (def current-file-id (mf/create-context nil)) (def current-vbox (mf/create-context nil)) +(def current-svg-root-id (mf/create-context nil)) (def active-frames (mf/create-context nil)) (def render-thumbnails (mf/create-context nil)) diff --git a/frontend/src/app/main/ui/shapes/group.cljs b/frontend/src/app/main/ui/shapes/group.cljs index 8b3ad40ce..e2b3fdd35 100644 --- a/frontend/src/app/main/ui/shapes/group.cljs +++ b/frontend/src/app/main/ui/shapes/group.cljs @@ -17,6 +17,7 @@ (mf/fnc group-shape {::mf/wrap-props false} [props] + (let [shape (unchecked-get props "shape") childs (unchecked-get props "childs") render-id (mf/use-ctx muc/render-id) @@ -36,21 +37,31 @@ mask-props (if ^boolean masked-group? #js {:mask (mask-url render-id mask)} - #js {})] + #js {}) + + current-svg-root-id (mf/use-ctx muc/current-svg-root-id) + + ;; We need to create a "scope" for svg classes. The root of the imported SVG (first group) will + ;; be stored in the context. When rendering the styles we add its id as prefix. + [svg-wrapper svg-wrapper-props] + (if (and (contains? shape :svg-attrs) (not current-svg-root-id)) + [(mf/provider muc/current-svg-root-id) #js {:value (:id shape)}] + [mf/Fragment #js {}])] ;; We need to separate mask and clip into two because a bug in ;; Firefox breaks when the group has clip+mask+foreignObject ;; Clip and mask separated will work in every platform Firefox ;; bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1734805 - [:> wrapper clip-props - [:> wrapper mask-props - (when ^boolean masked-group? - [:& render-mask {:mask mask}]) + [:> svg-wrapper svg-wrapper-props + [:> wrapper clip-props + [:> wrapper mask-props + (when ^boolean masked-group? + [:& render-mask {:mask mask}]) - (for [item childs] - [:& shape-wrapper - {:shape item - :key (dm/str (dm/get-prop item :id))}])]])))) + (for [item childs] + [:& shape-wrapper + {:shape item + :key (dm/str (dm/get-prop item :id))}])]]])))) diff --git a/frontend/src/app/main/ui/shapes/svg_raw.cljs b/frontend/src/app/main/ui/shapes/svg_raw.cljs index 49578d08d..2c8b57bce 100644 --- a/frontend/src/app/main/ui/shapes/svg_raw.cljs +++ b/frontend/src/app/main/ui/shapes/svg_raw.cljs @@ -104,9 +104,20 @@ svg-root? (and (map? content) (= tag :svg)) svg-tag? (map? content) svg-leaf? (string? content) - valid-tag? (contains? csvg/svg-tags tag)] + valid-tag? (contains? csvg/svg-tags tag) + + current-svg-root-id (mf/use-ctx muc/current-svg-root-id) + + ;; We need to create a "scope" for svg classes. The root of the imported SVG (first group) will + ;; be stored in the context and with this we scoped the styles: + style-content + (when (= tag :style) + (dm/str "#shape-" current-svg-root-id "{ " (->> shape :content :content (str/join "\n")) " }"))] (cond + (= tag :style) + [:style style-content] + ^boolean svg-root? [:& svg-root {:shape shape} (for [item childs] From 8d104de41cc8cca386b1b58e29c78ac4de8ed432 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Tue, 21 May 2024 13:25:49 +0200 Subject: [PATCH 3/3] :bug: Fix scrollbar with on chrome after 121 release --- CHANGES.md | 6 ++++++ frontend/resources/styles/common/base.scss | 7 +++++++ frontend/resources/styles/common/refactor/basic-rules.scss | 4 ++++ 3 files changed, 17 insertions(+) diff --git a/CHANGES.md b/CHANGES.md index 70ca6e42c..78f96ee26 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -1,5 +1,11 @@ # CHANGELOG +## 2.0.3 + +### :bug: Bugs fixed + +- Fix chrome scrollbar styling [Taiga Issue #7852](https://tree.taiga.io/project/penpot/issue/7852) + ## 2.0.2 ### :sparkles: Enhancements diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss index fd1e4ecb0..8ca76c9ca 100644 --- a/frontend/resources/styles/common/base.scss +++ b/frontend/resources/styles/common/base.scss @@ -28,9 +28,16 @@ body { * { box-sizing: border-box; + scrollbar-width: thin; // transition: all .4s ease; } +@-moz-document url-prefix() { + * { + scrollbar-width: auto; + } +} + .global-zeroclipboard-container { transition: none; diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index c6141e431..12c7961c8 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -6,10 +6,14 @@ // SCROLLBAR .new-scrollbar { + scrollbar-width: thin; scrollbar-color: rgba(170, 181, 186, 0.3) transparent; &:hover { scrollbar-color: rgba(170, 181, 186, 0.7) transparent; } + + // These rules do not apply in chrome - 121 or higher + // We keep them to preserve backward compatibility. ::-webkit-scrollbar { background-color: transparent; cursor: pointer;