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

CHANGES.md

@@ -47,8 +47,9 @@
 
 ### :bug: Bugs fixed
 
-- "Show in exports" is showing in multiselections [Taiga 3194](https://tree.taiga.io/project/penpot/issue/3194)
+- Fix hidden file name on import [Taiga #3172](https://tree.taiga.io/project/penpot/issue/3172)
-- Fix line gap between shapes [Taiga #3181](https://tree.taiga.io/project/penpot/issue/3181)
+- Fix unneccessary scrollbars at the color list [Taiga #3211](https://tree.taiga.io/project/penpot/issue/3211)
+- "Show in exports" is showing in multiselections [Taiga #3194](https://tree.taiga.io/project/penpot/issue/3194)
 - Edit file name navigates to the file workspace [Taiga #3183](https://tree.taiga.io/project/penpot/issue/3183)
 - Fix scroll into view behind fixed element [Taiga #3170](https://tree.taiga.io/project/penpot/issue/3170)
 - Fix sidebar icon in viewer mode [Taiga #3184](https://tree.taiga.io/project/penpot/issue/3184)

frontend/deps.edn

@@ -8,7 +8,7 @@
   metosin/reitit-core {:mvn/version "0.5.17"}
 
   funcool/beicon {:mvn/version "2021.07.05-1"}
-  funcool/okulary {:mvn/version "2022.04.01-10"}
+  funcool/okulary {:mvn/version "2022.04.11-16"}
   funcool/potok {:mvn/version "2021.09.20-0"}
   funcool/rumext {:mvn/version "2022.03.31-133"}
   funcool/tubax {:mvn/version "2021.05.20-0"}

frontend/resources/styles/main/partials/color-bullet.scss

@@ -64,6 +64,7 @@ ul.palette-menu .color-bullet {
   height: 20px;
   border: 1px solid $color-gray-10;
   background-size: 8px;
+  overflow: hidden;
 }
 
 .asset-section .asset-list-item .color-bullet {

frontend/resources/styles/main/partials/modal.scss

@@ -369,6 +369,7 @@
       white-space: nowrap;
 
       .icon-library {
+        height: 14px;
         width: 14px;
         fill: $color-gray-20;
         margin-left: 0.5rem;

frontend/src/app/main/render.cljs

@@ -234,7 +234,8 @@
              :xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")
              :style {:width "100%"
                      :height "100%"
-                     :background bgcolor}}
+                     :background bgcolor}
+             :fill "none"}
 
        (when include-metadata?
          [:& export/export-page {:options (:options data)}])
@@ -300,7 +301,8 @@
            :version "1.1"
            :xmlns "http://www.w3.org/2000/svg"
            :xmlnsXlink "http://www.w3.org/1999/xlink"
-           :xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")}
+           :xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")
+           :fill "none"}
      (if (or (not show-thumbnails?) (nil? (:thumbnail frame)))
        [:& wrapper {:shape frame :view-box vbox}]
 
@@ -352,7 +354,8 @@
            :version "1.1"
            :xmlns "http://www.w3.org/2000/svg"
            :xmlnsXlink "http://www.w3.org/1999/xlink"
-           :xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")}
+           :xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")
+           :fill "none"}
 
      [:> shape-container {:shape group}
       [:& group-wrapper {:shape group :view-box vbox}]]]))
@@ -399,7 +402,8 @@
             :xmlnsXlink "http://www.w3.org/1999/xlink"
             ;; Fix Chromium bug about color of html texts
             ;; https://bugs.chromium.org/p/chromium/issues/detail?id=1244560#c5
-            :style {:-webkit-print-color-adjust :exact}}
+            :style {:-webkit-print-color-adjust :exact}
+            :fill "none"}
 
       (let [shapes (cph/get-children objects obj-id)]
         [:& ff/fontfaces-style {:shapes shapes}])
@@ -421,7 +425,8 @@
             :height (:height object)
             :version "1.1"
             :xmlns "http://www.w3.org/2000/svg"
-            :xmlnsXlink "http://www.w3.org/1999/xlink"}
+            :xmlnsXlink "http://www.w3.org/1999/xlink"
+            :fill "none"}
            [:& shape-wrapper {:shape (assoc object :x 0 :y 0)}]]]))]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -464,7 +469,8 @@
              :xmlns "http://www.w3.org/2000/svg"
              :xmlnsXlink "http://www.w3.org/1999/xlink"
              :xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")
-             :style {:display (when-not (some? children) "none")}}
+             :style {:display (when-not (some? children) "none")}
+             :fill "none"}
        [:defs
         (for [[id data] (:components data)]
           [:& component-symbol {:id id :key (dm/str id) :data data}])]

frontend/src/app/main/ui/components/tab_container.cljs

@@ -5,29 +5,47 @@
 ;; Copyright (c) UXBOX Labs SL
 
 (ns app.main.ui.components.tab-container
-  (:require [rumext.alpha :as mf]))
+  (:require
+   [app.common.data :as d]
+   [cuerdas.core :as str]
+   [rumext.alpha :as mf]))
 
 (mf/defc tab-element
-  [{:keys [children]}]
+  {::mf/wrap-props false}
-  [:div.tab-element
+  [props]
-   [:div.tab-element-content children]])
+  (let [children (unchecked-get props "children")]
+    [:div.tab-element
+     [:div.tab-element-content children]]))
 
 (mf/defc tab-container
-  [{:keys [children selected on-change-tab]}]
+  {::mf/wrap-props false}
-  (let [first-id (-> children first .-props .-id)
+  [props]
-        state (mf/use-state {:selected first-id})
+  (let [children  (unchecked-get props "children")
-        selected (or selected (:selected @state))
+        selected  (unchecked-get props "selected")
-        handle-select (fn [tab]
+        on-change (unchecked-get props "on-change-tab")
-                        (let [id (-> tab .-props .-id)]
+
-                          (swap! state assoc :selected id)
+        state     (mf/use-state #(or selected (-> children first .-props .-id)))
-                          (when on-change-tab (on-change-tab id))))]
+        selected  (or selected @state)
+
+        select-fn
+        (mf/use-fn
+         (mf/deps on-change)
+         (fn [event]
+           (let [id (d/read-string (.. event -target -dataset -id))]
+             (reset! state id)
+             (when (fn? on-change) (on-change id)))))]
+
     [:div.tab-container
      [:div.tab-container-tabs
       (for [tab children]
-        [:div.tab-container-tab-title
+        (let [props (.-props tab)
-         {:key (str "tab-" (-> tab .-props .-id))
+              id    (.-id props)
-          :on-click (partial handle-select tab)
+              title (.-title props)]
-          :class (when (= selected (-> tab .-props .-id)) "current")}
+          [:div.tab-container-tab-title
-         (-> tab .-props .-title)])]
+           {:key (str/concat "tab-" (d/name id))
+            :data-id (pr-str id)
+            :on-click select-fn
+            :class (when (= selected id) "current")}
+           title]))]
      [:div.tab-container-content
-      (filter #(= selected (-> % .-props .-id)) children)]]))
+      (d/seek #(= selected (-> % .-props .-id)) children)]]))

frontend/src/app/main/ui/export.cljs

@@ -104,7 +104,8 @@
                            :xmlnsXlink "http://www.w3.org/1999/xlink"
                            ;; Fix Chromium bug about color of html texts
                            ;; https://bugs.chromium.org/p/chromium/issues/detail?id=1244560#c5
-                           :style {:-webkit-print-color-adjust :exact}}
+                           :style {:-webkit-print-color-adjust :exact}
+                           :fill "none"}
 
                      [:& shape-wrapper {:shape shape}]])]
 

frontend/src/app/main/ui/shapes/custom_stroke.cljs

@@ -332,9 +332,9 @@
                         ;; There are any shadows
                         (and (seq (->> (:shadow shape) (remove :hidden))) (not (cph/frame-shape? shape)))
 
-                        ;; There are no strokes  and a blur
+                        ;; There is a blur
-                        (and (:blur shape) (-> shape :blur :hidden not) (not (cph/frame-shape? shape)) (empty? (:strokes shape))))
+                        (and (:blur shape) (-> shape :blur :hidden not) (not (cph/frame-shape? shape))))
-                        (obj/set! "filter" (dm/fmt "url(#filter_%)" render-id)))
+                       (obj/set! "filter" (dm/fmt "url(#filter_%)" render-id)))
 
         svg-defs  (:svg-defs shape {})
         svg-attrs (:svg-attrs shape {})
@@ -380,7 +380,10 @@
 
         (cond-> (obj/merge! props fill-props)
           (some? style)
-          (obj/set! "style" style))))))
+          (obj/set! "style" style)))
+
+      :else
+      props)))
 
 (defn build-stroke-props [position child value render-id]
   (let [props (-> (obj/get child "props")

frontend/src/app/main/ui/shapes/text/fo_text.cljs

@@ -201,9 +201,7 @@
 
         content (cond-> content
                   plain-colors?
-                  (remap-colors color-mapping))
+                  (remap-colors color-mapping))]
-
-        ]
 
     [:foreignObject
      {:x x

frontend/src/app/main/ui/shapes/text/styles.cljs

@@ -15,10 +15,11 @@
    [cuerdas.core :as str]))
 
 (defn generate-root-styles
-  [_shape node]
+  [shape node]
   (let [valign (:vertical-align node "top")
-        base   #js {:height "100%"
+        {:keys [width height]} shape
-                    :width  "100%"
+        base   #js {:height height
+                    :width  width
                     :fontFamily "sourcesanspro"
                     :display "flex"}]
     (cond-> base

frontend/src/app/main/ui/viewer/handoff/render.cljs

@@ -215,7 +215,8 @@
       :height height
       :version "1.1"
       :xmlnsXlink "http://www.w3.org/1999/xlink"
-      :xmlns "http://www.w3.org/2000/svg"}
+      :xmlns "http://www.w3.org/2000/svg"
+      :fill "none"}
 
      [:& render {:shape frame :view-box vbox}]
      [:& selection-feedback

frontend/src/app/main/ui/viewer/interactions.cljs

@@ -94,7 +94,8 @@
              :height (:height size)
              :version "1.1"
              :xmlnsXlink "http://www.w3.org/1999/xlink"
-             :xmlns "http://www.w3.org/2000/svg"}
+             :xmlns "http://www.w3.org/2000/svg"
+             :fill "none"}
        [:& wrapper {:shape frame
                     :view-box (:vbox size)}]]]]))
 

frontend/src/app/main/ui/workspace/sidebar.cljs

@@ -27,7 +27,7 @@
 
 (mf/defc left-sidebar
   {:wrap [mf/memo]}
-  [{:keys [layout ] :as props}]
+  [{:keys [layout] :as props}]
   (let [section (cond (contains? layout :layers) :layers
                       (contains? layout :assets) :assets)
 

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -212,13 +212,13 @@
        :xmlnsXlink "http://www.w3.org/1999/xlink"
        :xmlns:penpot "https://penpot.app/xmlns"
        :preserveAspectRatio "xMidYMid meet"
-       :shape-rendering "crispEdges"
        :key (str "render" page-id)
        :width (:width vport 0)
        :height (:height vport 0)
        :view-box (utils/format-viewbox vbox)
        :style {:background-color background
-               :pointer-events "none"}}
+               :pointer-events "none"}
+       :fill "none"}
 
       (when (debug? :show-export-metadata)
         [:& use/export-page {:options options}])