Merge pull request #3442 from penpot/eva-bugfixing-11

Bugfixing

CHANGES.md

@@ -89,7 +89,9 @@
 - Fix when user deletes one file during import it is impossible to finish importing of second file [Taiga #5656](https://tree.taiga.io/project/penpot/issue/5656)
 - Fix export multiple images when only one of them has export settings [Taiga #5649](https://tree.taiga.io/project/penpot/issue/5649)
 - Fix error when a user different than the thread creator edits a comment [Taiga #5647](https://tree.taiga.io/project/penpot/issue/5647)
-
+- Fix unnecessary button [Taiga #3312](https://tree.taiga.io/project/penpot/issue/3312)
+- Fix copy color information in several formats [Taiga #4723](https://tree.taiga.io/project/penpot/issue/4723)
+- Fix dropdown width [Taiga #5541](https://tree.taiga.io/project/penpot/issue/5541)
 ### :arrow_up: Deps updates
 
 - Update google fonts catalog (at 2023/07/06) [Taiga #5592](https://tree.taiga.io/project/penpot/issue/5592)

common/src/app/common/data.cljc

@@ -752,6 +752,12 @@
                [key (delay (generator-fn key))]))
         keys))
 
+(defn opacity-to-hex [opacity]
+  (let [opacity (* opacity 255)
+        value   (mth/round opacity)]
+    (.. value
+        (toString 16)
+        (padStart 2 "0"))))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; String Functions

frontend/resources/styles/main/partials/sidebar-element-options.scss

@@ -316,6 +316,22 @@
     &:hover {
       border: 1px solid $color-gray-20;
     }
+
+    &.no-check {
+      .custom-select-dropdown {
+        width: 100%;
+        min-width: unset;
+        .check-icon {
+          display: none;
+        }
+        li.checked-element {
+          padding-left: 0.5rem;
+          &.is-selected {
+            background-color: $color-primary;
+          }
+        }
+      }
+    }
   }
   .opened {
     border: 1px solid $color-primary;

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

@@ -214,7 +214,11 @@
                             :select-on-focus true
                             :on-change on-change}]
      [:div.buttons
-      [:input.btn-primary {:type "button" :value "Post" :on-click on-submit*}]
+      [:input.btn-primary {:type "button"
+                           :value "Post"
+                           :on-click on-submit*
+                           :disabled (or (fm/all-spaces? @content)
+                                         (str/empty-or-nil? @content))}]
       [:input.btn-secondary {:type "button" :value "Cancel" :on-click on-cancel}]]]))
 
 (mf/defc comment-item

frontend/src/app/main/ui/dashboard/import.cljs

@@ -400,7 +400,7 @@
 
       [:div.modal-footer
        [:div.action-buttons
-        (when (or (= :analyzing (:status @state)) pending-import?)
+        (when (= :analyzing (:status @state))
           [:input.cancel-button
            {:type "button"
             :value (tr "labels.cancel")

frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs

@@ -35,6 +35,13 @@
    {:to-prop "background"
     :format #(uc/color->background (shape->color shape))}))
 
+(defn copy-data-format [shape format]
+  (cg/generate-css-props
+   shape
+   fill-attributes
+   {:to-prop "background-color"
+    :format #(uc/color->format->background (shape->color shape) format)}))
+
 (mf/defc fill-block [{:keys [shape]}]
   (let [color-format (mf/use-state :hex)
         color (shape->color shape)]
@@ -43,7 +50,7 @@
      [:& color-row {:color color
                     :format @color-format
                     :on-change-format #(reset! color-format %)
-                    :copy-data (copy-data shape)}]]))
+                    :copy-data (copy-data-format shape  @color-format)}]]))
 
 (mf/defc fill-panel
   [{:keys [shapes]}]

frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs

@@ -152,7 +152,7 @@
      [:div.element-set-content
       [:div.row-flex
        [:& select
-        {:class "flex-grow"
+        {:class "flex-grow no-check"
          :default-value selected-blend-mode
          :options options
          :on-change handle-change-blend-mode

frontend/src/app/util/color.cljs

@@ -7,6 +7,7 @@
 (ns app.util.color
   "Color conversion utils."
   (:require
+   [app.common.data :as d]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.object :as obj]
    [app.util.strings :as ust]
@@ -150,6 +151,24 @@
 
       :else "transparent")))
 
+(defn color->format->background [{:keys [color opacity gradient]} format]
+  (let [opacity (or opacity 1)]
+    (cond
+      (and gradient (not= :multiple gradient))
+      (gradient->css gradient)
+
+      (not= color :multiple)
+      (case format
+        :rgba (let [[r g b] (hex->rgb color)]
+               (str/fmt "rgba(%s, %s, %s, %s)" r g b opacity))
+
+        :hsla (let [[h s l] (hex->hsl color)]
+                (str/fmt "hsla(%s, %s, %s, %s)" h (* 100 s) (* 100 l) opacity))
+
+        :hex (str color (str/upper (d/opacity-to-hex opacity))))
+
+      :else "transparent")))
+
 (defn multiple? [{:keys [id file-id value color gradient]}]
   (or (= value :multiple)
       (= color :multiple)