From 13b17628734c513126ffa4f1e325ff15a5926c4e Mon Sep 17 00:00:00 2001
From: Eva <eva.marco@kaleidos.net>
Date: Wed, 12 Jul 2023 13:04:52 +0200
Subject: [PATCH] :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 2c5ab6946..5327be2bb 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 fc8422f81..4a3442134 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 c9f94e715..191051640 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"]