3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-30 01:27:25 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Changed handoff for inspect everywhere

Browse source
This commit is contained in:
alonso.torres 2022-12-29 13:02:43 +01:00
parent 104059a7b1
commit 3bbf632121
54 changed files with 2430 additions and 2493 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/app/main/data/viewer/shortcuts.cljs
View file

@ -51,10 +51,10 @@
:subsections [:general-viewer]
:fn #(st/emit! dv/select-next-frame)}
:open-handoff {:tooltip "G H"
:command "g h"
:open-inspect {:tooltip "G I"
:command "g i"
:subsections [:navigation-viewer]
:fn #(st/emit! (dv/go-to-section :handoff))}
:fn #(st/emit! (dv/go-to-section :inspect))}
:open-comments {:tooltip "G C"
:command "g c"

6
frontend/src/app/main/data/workspace/shortcuts.cljs
View file

@ -468,10 +468,10 @@
:subsections [:navigation-workspace]
:fn #(st/emit! (dw/go-to-viewer))}
:open-handoff {:tooltip "G H"
:command "g h"
:open-inspect {:tooltip "G I"
:command "g i"
:subsections [:navigation-workspace]
:fn #(st/emit! (dw/go-to-viewer {:section :handoff}))}
:fn #(st/emit! (dw/go-to-viewer {:section :inspect}))}
:open-comments {:tooltip "G C"
:command "g c"

2
frontend/src/app/main/render.cljs
View file

@ -229,7 +229,7 @@
;; Component that serves for render frame thumbnails, mainly used in
;; the viewer and handoff
;; the viewer and inspector
(mf/defc frame-svg
{::mf/wrap [mf/memo]}
[{:keys [objects frame zoom show-thumbnails?] :or {zoom 1} :as props}]

12
frontend/src/app/main/ui/viewer.cljs
View file

@ -26,8 +26,8 @@
[app.main.ui.icons :as i]
[app.main.ui.static :as static]
[app.main.ui.viewer.comments :refer [comments-layer comments-sidebar]]
[app.main.ui.viewer.handoff :as handoff]
[app.main.ui.viewer.header :as header]
[app.main.ui.viewer.inspect :as inspect]
[app.main.ui.viewer.interactions :as interactions]
[app.main.ui.viewer.login]
[app.main.ui.viewer.share-link]
@ -222,7 +222,7 @@
(or (:can-edit permissions)
(and (true? (:is-logged permissions))
(= (:who-comment permissions) "all"))))
(and (= section :handoff)
(and (= section :inspect)
(or (:can-edit permissions)
(and (true? (:is-logged permissions))
(= (:who-inspect permissions) "all")))))
@ -458,8 +458,8 @@
[:div#viewer-layout
{:class (dom/classnames
:force-visible (:show-thumbnails local)
:viewer-layout (not= section :handoff)
:handoff-layout (= section :handoff)
:viewer-layout (not= section :inspect)
:inspect-layout (= section :inspect)
:fullscreen fullscreen?)}
[:div.viewer-content
@ -493,8 +493,8 @@
[:span (tr "viewer.frame-not-found")])]
(some? frame)
(if (= :handoff section)
[:& handoff/viewport
(if (= :inspect section)
[:& inspect/viewport
{:frame frame
:page page
:file file

10
frontend/src/app/main/ui/viewer/header.cljs
View file

@ -188,10 +188,10 @@
(let [go-to-dashboard
#(st/emit! (dv/go-to-dashboard))
go-to-handoff
go-to-inspect
(fn[]
(if (:is-logged permissions)
(st/emit! dv/close-thumbnails-panel (dv/go-to-section :handoff))
(st/emit! dv/close-thumbnails-panel (dv/go-to-section :inspect))
(open-login-dialog)))
navigate
@ -228,9 +228,9 @@
(and (= (:type permissions) :share-link)
(= (:who-inspect permissions) "all")))
[:button.mode-zone-button.tooltip.tooltip-bottom
{:on-click go-to-handoff
:class (dom/classnames :active (= section :handoff))
:alt (tr "viewer.header.handoff-section" (sc/get-tooltip :open-handoff))}
{:on-click go-to-inspect
:class (dom/classnames :active (= section :inspect))
:alt (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))}
i/code])]
[:& header-options {:section section

14
frontend/src/app/main/ui/viewer/handoff.cljs → frontend/src/app/main/ui/viewer/inspect.cljs
View file

@ -4,13 +4,13 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.viewer.handoff
(ns app.main.ui.viewer.inspect
(:require
[app.main.data.viewer :as dv]
[app.main.store :as st]
[app.main.ui.viewer.handoff.left-sidebar :refer [left-sidebar]]
[app.main.ui.viewer.handoff.render :refer [render-frame-svg]]
[app.main.ui.viewer.handoff.right-sidebar :refer [right-sidebar]]
[app.main.ui.viewer.inspect.left-sidebar :refer [left-sidebar]]
[app.main.ui.viewer.inspect.render :refer [render-frame-svg]]
[app.main.ui.viewer.inspect.right-sidebar :refer [right-sidebar]]
[app.util.dom :as dom]
[app.util.keyboard :as kbd]
[goog.events :as events]
@ -25,7 +25,7 @@
(st/emit! (dv/select-shape (:id frame)))
(let [origin (dom/get-target event)
over-section? (dom/class? origin "handoff-svg-container")
over-section? (dom/class? origin "inspect-svg-container")
layout (dom/get-element "viewer-layout")
has-force? (dom/class? layout "force-visible")]
@ -67,9 +67,9 @@
[:& left-sidebar {:frame frame
:local local
:page page}]
[:div.handoff-svg-wrapper {:on-click (handle-select-frame frame)}
[:div.inspect-svg-wrapper {:on-click (handle-select-frame frame)}
[:& viewer-pagination {:index index :num-frames (count (:frames page)) :left-bar true :right-bar true}]
[:div.handoff-svg-container
[:div.inspect-svg-container
[:& render-frame-svg {:frame frame :page page :local local :size size}]]]
[:& right-sidebar {:frame frame

24
frontend/src/app/main/ui/viewer/handoff/attributes.cljs → frontend/src/app/main/ui/viewer/inspect/attributes.cljs
View file

@ -4,21 +4,21 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.viewer.handoff.attributes
(ns app.main.ui.viewer.inspect.attributes
(:require
[app.common.geom.shapes :as gsh]
[app.main.ui.hooks :as hooks]
[app.main.ui.viewer.handoff.attributes.blur :refer [blur-panel]]
[app.main.ui.viewer.handoff.attributes.fill :refer [fill-panel]]
[app.main.ui.viewer.handoff.attributes.image :refer [image-panel]]
[app.main.ui.viewer.handoff.attributes.layout :refer [layout-panel]]
[app.main.ui.viewer.handoff.attributes.layout-flex :refer [layout-flex-panel]]
[app.main.ui.viewer.handoff.attributes.layout-flex-element :refer [layout-flex-element-panel]]
[app.main.ui.viewer.handoff.attributes.shadow :refer [shadow-panel]]
[app.main.ui.viewer.handoff.attributes.stroke :refer [stroke-panel]]
[app.main.ui.viewer.handoff.attributes.svg :refer [svg-panel]]
[app.main.ui.viewer.handoff.attributes.text :refer [text-panel]]
[app.main.ui.viewer.handoff.exports :refer [exports]]
[app.main.ui.viewer.inspect.attributes.blur :refer [blur-panel]]
[app.main.ui.viewer.inspect.attributes.fill :refer [fill-panel]]
[app.main.ui.viewer.inspect.attributes.image :refer [image-panel]]
[app.main.ui.viewer.inspect.attributes.layout :refer [layout-panel]]
[app.main.ui.viewer.inspect.attributes.layout-flex :refer [layout-flex-panel]]
[app.main.ui.viewer.inspect.attributes.layout-flex-element :refer [layout-flex-element-panel]]
[app.main.ui.viewer.inspect.attributes.shadow :refer [shadow-panel]]
[app.main.ui.viewer.inspect.attributes.stroke :refer [stroke-panel]]
[app.main.ui.viewer.inspect.attributes.svg :refer [svg-panel]]
[app.main.ui.viewer.inspect.attributes.text :refer [text-panel]]
[app.main.ui.viewer.inspect.exports :refer [exports]]
[rumext.v2 :as mf]))
(def type->options

6
frontend/src/app/main/ui/viewer/handoff/attributes/blur.cljs → frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs
View file

@ -4,7 +4,7 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.viewer.handoff.attributes.blur
(ns app.main.ui.viewer.inspect.attributes.blur
(:require
[app.main.ui.components.copy-button :refer [copy-button]]
[app.util.code-gen :as cg]
@ -27,12 +27,12 @@
(when (seq shapes)
[:div.attributes-block
[:div.attributes-block-title
[:div.attributes-block-title-text (tr "handoff.attributes.blur")]
[:div.attributes-block-title-text (tr "inspect.attributes.blur")]
(when (= (count shapes) 1)
[:& copy-button {:data (copy-data (first shapes))}])]
(for [shape shapes]
[:div.attributes-unit-row
[:div.attributes-label (tr "handoff.attributes.blur.value")]
[:div.attributes-label (tr "inspect.attributes.blur.value")]
[:div.attributes-value (-> shape :blur :value) "px"]
[:& copy-button {:data (copy-data shape)}]])])))

8
frontend/src/app/main/ui/viewer/handoff/attributes/common.cljs → frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs
View file

@ -4,7 +4,7 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.viewer.handoff.attributes.common
(ns app.main.ui.viewer.inspect.attributes.common
(:require
[app.main.store :as st]
[app.main.ui.components.color-bullet :refer [color-bullet color-name]]
@ -58,13 +58,13 @@
(when-not (and on-change-format (:gradient color))
[:select {:on-change #(-> (dom/get-target-val %) keyword on-change-format)}
[:option {:value "hex"}
(tr "handoff.attributes.color.hex")]
(tr "inspect.attributes.color.hex")]
[:option {:value "rgba"}
(tr "handoff.attributes.color.rgba")]
(tr "inspect.attributes.color.rgba")]
[:option {:value "hsla"}
(tr "handoff.attributes.color.hsla")]])]
(tr "inspect.attributes.color.hsla")]])]
(when copy-data
[:& copy-button {:data copy-data}])]))

6
frontend/src/app/main/ui/viewer/handoff/attributes/fill.cljs → frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs
View file

@ -4,10 +4,10 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.viewer.handoff.attributes.fill
(ns app.main.ui.viewer.inspect.attributes.fill
(:require
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.viewer.handoff.attributes.common :refer [color-row]]
[app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
[app.util.code-gen :as cg]
[app.util.color :as uc]
[app.util.i18n :refer [tr]]
@ -51,7 +51,7 @@
(when (seq shapes)
[:div.attributes-block
[:div.attributes-block-title
[:div.attributes-block-title-text (tr "handoff.attributes.fill")]
[:div.attributes-block-title-text (tr "inspect.attributes.fill")]
(when (= (count shapes) 1)
[:& copy-button {:data (copy-data (first shapes))}])]

8
frontend/src/app/main/ui/viewer/handoff/attributes/image.cljs → frontend/src/app/main/ui/viewer/inspect/attributes/image.cljs
View file

@ -4,7 +4,7 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.viewer.handoff.attributes.image
(ns app.main.ui.viewer.inspect.attributes.image
(:require
[app.common.media :as cm]
[app.common.pages.helpers :as cph]
@ -27,12 +27,12 @@
[:img {:src (cf/resolve-file-media (-> shape :metadata))}]]]
[:div.attributes-unit-row
[:div.attributes-label (tr "handoff.attributes.image.width")]
[:div.attributes-label (tr "inspect.attributes.image.width")]
[:div.attributes-value (-> shape :metadata :width) "px"]
[:& copy-button {:data (cg/generate-css-props shape :width)}]]
[:div.attributes-unit-row
[:div.attributes-label (tr "handoff.attributes.image.height")]
[:div.attributes-label (tr "inspect.attributes.image.height")]
[:div.attributes-value (-> shape :metadata :height) "px"]
[:& copy-button {:data (cg/generate-css-props shape :height)}]]
@ -42,4 +42,4 @@
[:a.download-button {:target "_blank"
:download (cond-> name extension (str/concat extension))
:href (cf/resolve-file-media (-> shape :metadata))}
(tr "handoff.attributes.image.download")])]))
(tr "inspect.attributes.image.download")])]))

18
frontend/src/app/main/ui/viewer/handoff/attributes/layout.cljs → frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs
View file

@ -4,7 +4,7 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.viewer.handoff.attributes.layout
(ns app.main.ui.viewer.inspect.attributes.layout
(:require
[app.common.types.shape.radius :as ctsr]
[app.main.ui.components.copy-button :refer [copy-button]]
@ -40,36 +40,36 @@
{:keys [x y]} selrect]
[:*
[:div.attributes-unit-row
[:div.attributes-label (tr "handoff.attributes.layout.width")]
[:div.attributes-label (tr "inspect.attributes.layout.width")]
[:div.attributes-value (fmt/format-size :width (:width shape) shape)]
[:& copy-button {:data (copy-data shape :width)}]]
[:div.attributes-unit-row
[:div.attributes-label (tr "handoff.attributes.layout.height")]
[:div.attributes-label (tr "inspect.attributes.layout.height")]
[:div.attributes-value (fmt/format-size :height (:height shape) shape)]
[:& copy-button {:data (copy-data shape :height)}]]
(when (not= (:x shape) 0)
[:div.attributes-unit-row
[:div.attributes-label (tr "handoff.attributes.layout.left")]
[:div.attributes-label (tr "inspect.attributes.layout.left")]
[:div.attributes-value (fmt/format-pixels x)]
[:& copy-button {:data (copy-data selrect :x)}]])
(when (not= (:y shape) 0)
[:div.attributes-unit-row
[:div.attributes-label (tr "handoff.attributes.layout.top")]
[:div.attributes-label (tr "inspect.attributes.layout.top")]
[:div.attributes-value (fmt/format-pixels y)]
[:& copy-button {:data (copy-data selrect :y)}]])
(when (ctsr/radius-1? shape)
[:div.attributes-unit-row
[:div.attributes-label (tr "handoff.attributes.layout.radius")]
[:div.attributes-label (tr "inspect.attributes.layout.radius")]
[:div.attributes-value (fmt/format-pixels (:rx shape 0))]
[:& copy-button {:data (copy-data shape :rx)}]])
(when (ctsr/radius-4? shape)
[:div.attributes-unit-row
[:div.attributes-label (tr "handoff.attributes.layout.radius")]
[:div.attributes-label (tr "inspect.attributes.layout.radius")]
[:div.attributes-value
(fmt/format-number (:r1 shape)) ", "
(fmt/format-number (:r2 shape)) ", "
@ -79,7 +79,7 @@
(when (not= (:rotation shape 0) 0)
[:div.attributes-unit-row
[:div.attributes-label (tr "handoff.attributes.layout.rotation")]
[:div.attributes-label (tr "inspect.attributes.layout.rotation")]
[:div.attributes-value (fmt/format-number (:rotation shape)) "deg"]
[:& copy-button {:data (copy-data shape :rotation)}]])]))
@ -88,7 +88,7 @@
[{:keys [shapes]}]
[:div.attributes-block
[:div.attributes-block-title
[:div.attributes-block-title-text (tr "handoff.attributes.size")]
[:div.attributes-block-title-text (tr "inspect.attributes.size")]
(when (= (count shapes) 1)
[:& copy-button {:data (copy-data (first shapes))}])]

2
frontend/src/app/main/ui/viewer/handoff/attributes/layout_flex.cljs → frontend/src/app/main/ui/viewer/inspect/attributes/layout_flex.cljs
View file

@ -4,7 +4,7 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.viewer.handoff.attributes.layout-flex
(ns app.main.ui.viewer.inspect.attributes.layout-flex
(:require
[app.common.data :as d]
[app.main.ui.components.copy-button :refer [copy-button]]

4
frontend/src/app/main/ui/viewer/handoff/attributes/layout_flex_element.cljs → frontend/src/app/main/ui/viewer/inspect/attributes/layout_flex_element.cljs
View file

@ -4,13 +4,13 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.viewer.handoff.attributes.layout-flex-element
(ns app.main.ui.viewer.inspect.attributes.layout-flex-element
(:require
[app.common.data :as d]
[app.main.refs :as refs]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.formats :as fmt]
[app.main.ui.viewer.handoff.code :as cd]
[app.main.ui.viewer.inspect.code :as cd]
[app.util.code-gen :as cg]
[cuerdas.core :as str]
[rumext.v2 :as mf]))

6
frontend/src/app/main/ui/viewer/handoff/attributes/shadow.cljs → frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs
View file

@ -4,11 +4,11 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.viewer.handoff.attributes.shadow
(ns app.main.ui.viewer.inspect.attributes.shadow
(:require
[app.common.data :as d]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.viewer.handoff.attributes.common :refer [color-row]]
[app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
[app.util.code-gen :as cg]
[app.util.i18n :refer [tr]]
[cuerdas.core :as str]
@ -59,7 +59,7 @@
(when (and (seq shapes) (> (count shapes) 0))
[:div.attributes-block
[:div.attributes-block-title
[:div.attributes-block-title-text (tr "handoff.attributes.shadow")]]
[:div.attributes-block-title-text (tr "inspect.attributes.shadow")]]
[:div.attributes-shadow-blocks
(for [shape shapes]

26
frontend/src/app/main/ui/viewer/handoff/attributes/stroke.cljs → frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs
View file

@ -4,11 +4,11 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.viewer.handoff.attributes.stroke
(ns app.main.ui.viewer.inspect.attributes.stroke
(:require
[app.common.data :as d]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.viewer.handoff.attributes.common :refer [color-row]]
[app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
[app.util.code-gen :as cg]
[app.util.color :as uc]
[app.util.i18n :refer [tr]]
@ -65,19 +65,19 @@
stroke-style (if (= stroke-style :svg) :solid stroke-style)
stroke-alignment (or stroke-alignment :center)]
[:div.attributes-stroke-row
[:div.attributes-label (tr "handoff.attributes.stroke.width")]
[:div.attributes-label (tr "inspect.attributes.stroke.width")]
[:div.attributes-value (:stroke-width shape) "px"]
;; Execution time translation strings:
;; handoff.attributes.stroke.style.dotted
;; handoff.attributes.stroke.style.mixed
;; handoff.attributes.stroke.style.none
;; handoff.attributes.stroke.style.solid
[:div.attributes-value (->> stroke-style d/name (str "handoff.attributes.stroke.style.") (tr))]
;; inspect.attributes.stroke.style.dotted
;; inspect.attributes.stroke.style.mixed
;; inspect.attributes.stroke.style.none
;; inspect.attributes.stroke.style.solid
[:div.attributes-value (->> stroke-style d/name (str "inspect.attributes.stroke.style.") (tr))]
;; Execution time translation strings:
;; handoff.attributes.stroke.alignment.center
;; handoff.attributes.stroke.alignment.inner
;; handoff.attributes.stroke.alignment.outer
[:div.attributes-label (->> stroke-alignment d/name (str "handoff.attributes.stroke.alignment.") (tr))]
;; inspect.attributes.stroke.alignment.center
;; inspect.attributes.stroke.alignment.inner
;; inspect.attributes.stroke.alignment.outer
[:div.attributes-label (->> stroke-alignment d/name (str "inspect.attributes.stroke.alignment.") (tr))]
[:& copy-button {:data (copy-stroke-data shape)}]])]))
(mf/defc stroke-panel
@ -86,7 +86,7 @@
(when (seq shapes)
[:div.attributes-block
[:div.attributes-block-title
[:div.attributes-block-title-text (tr "handoff.attributes.stroke")]
[:div.attributes-block-title-text (tr "inspect.attributes.stroke")]
(when (= (count shapes) 1)
[:& copy-button {:data (copy-stroke-data (first shapes))}])]

2
frontend/src/app/main/ui/viewer/handoff/attributes/svg.cljs → frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs
View file

@ -4,7 +4,7 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.viewer.handoff.attributes.svg
(ns app.main.ui.viewer.inspect.attributes.svg
(:require
[app.common.data :as d]
[app.main.ui.components.copy-button :refer [copy-button]]

38
frontend/src/app/main/ui/viewer/handoff/attributes/text.cljs → frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs
View file

@ -4,14 +4,14 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.viewer.handoff.attributes.text
(ns app.main.ui.viewer.inspect.attributes.text
(:require
[app.common.data :as d]
[app.common.text :as txt]
[app.main.fonts :as fonts]
[app.main.store :as st]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.viewer.handoff.attributes.common :refer [color-row]]
[app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
[app.util.code-gen :as cg]
[app.util.color :as uc]
[app.util.i18n :refer [tr]]
@ -115,53 +115,53 @@
(when (:font-id style)
[:div.attributes-unit-row
[:div.attributes-label (tr "handoff.attributes.typography.font-family")]
[:div.attributes-label (tr "inspect.attributes.typography.font-family")]
[:div.attributes-value (-> style :font-id fonts/get-font-data :name)]
[:& copy-button {:data (copy-style-data style :font-family)}]])
(when (:font-style style)
[:div.attributes-unit-row
[:div.attributes-label (tr "handoff.attributes.typography.font-style")]
[:div.attributes-label (tr "inspect.attributes.typography.font-style")]
[:div.attributes-value (str (:font-style style))]
[:& copy-button {:data (copy-style-data style :font-style)}]])
(when (:font-size style)
[:div.attributes-unit-row
[:div.attributes-label (tr "handoff.attributes.typography.font-size")]
[:div.attributes-label (tr "inspect.attributes.typography.font-size")]
[:div.attributes-value (str (format-number (:font-size style))) "px"]
[:& copy-button {:data (copy-style-data style :font-size)}]])
(when (:line-height style)
[:div.attributes-unit-row
[:div.attributes-label (tr "handoff.attributes.typography.line-height")]
[:div.attributes-label (tr "inspect.attributes.typography.line-height")]
[:div.attributes-value (format-number (:line-height style))]
[:& copy-button {:data (copy-style-data style :line-height)}]])
(when (:letter-spacing style)
[:div.attributes-unit-row
[:div.attributes-label (tr "handoff.attributes.typography.letter-spacing")]
[:div.attributes-label (tr "inspect.attributes.typography.letter-spacing")]
[:div.attributes-value (str (format-number (:letter-spacing style))) "px"]
[:& copy-button {:data (copy-style-data style :letter-spacing)}]])
(when (:text-decoration style)
[:div.attributes-unit-row
[:div.attributes-label (tr "handoff.attributes.typography.text-decoration")]
[:div.attributes-label (tr "inspect.attributes.typography.text-decoration")]
;; Execution time translation strings:
;; handoff.attributes.typography.text-decoration.none
;; handoff.attributes.typography.text-decoration.strikethrough
;; handoff.attributes.typography.text-decoration.underline
[:div.attributes-value (->> style :text-decoration (str "handoff.attributes.typography.text-decoration.") (tr))]
;; inspect.attributes.typography.text-decoration.none
;; inspect.attributes.typography.text-decoration.strikethrough
;; inspect.attributes.typography.text-decoration.underline
[:div.attributes-value (->> style :text-decoration (str "inspect.attributes.typography.text-decoration.") (tr))]
[:& copy-button {:data (copy-style-data style :text-decoration)}]])
(when (:text-transform style)
[:div.attributes-unit-row
[:div.attributes-label (tr "handoff.attributes.typography.text-transform")]
[:div.attributes-label (tr "inspect.attributes.typography.text-transform")]
;; Execution time translation strings:
;; handoff.attributes.typography.text-transform.lowercase
;; handoff.attributes.typography.text-transform.none
;; handoff.attributes.typography.text-transform.titlecase
;; handoff.attributes.typography.text-transform.uppercase
[:div.attributes-value (->> style :text-transform (str "handoff.attributes.typography.text-transform.") (tr))]
;; inspect.attributes.typography.text-transform.lowercase
;; inspect.attributes.typography.text-transform.none
;; inspect.attributes.typography.text-transform.titlecase
;; inspect.attributes.typography.text-transform.uppercase
[:div.attributes-value (->> style :text-transform (str "inspect.attributes.typography.text-transform.") (tr))]
[:& copy-button {:data (copy-style-data style :text-transform)}]])
[:div.attributes-content-row
@ -185,7 +185,7 @@
(when-let [shapes (seq (filter has-text? shapes))]
[:div.attributes-block
[:div.attributes-block-title
[:div.attributes-block-title-text (tr "handoff.attributes.typography")]]
[:div.attributes-block-title-text (tr "inspect.attributes.typography")]]
(for [shape shapes]
[:& text-block {:shape shape

6
frontend/src/app/main/ui/viewer/handoff/code.cljs → frontend/src/app/main/ui/viewer/inspect/code.cljs
View file

@ -4,7 +4,7 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.viewer.handoff.code
(ns app.main.ui.viewer.inspect.code
(:require
["js-beautify" :as beautify]
[app.common.data.macros :as dm]
@ -76,7 +76,7 @@
(mf/deps @markup-type)
(fn []
(st/emit! (ptk/event ::ev/event
{::ev/name "copy-handoff-code"
{::ev/name "copy-inspect-code"
:type @markup-type}))))
on-style-copied
@ -84,7 +84,7 @@
(mf/deps @style-type)
(fn []
(st/emit! (ptk/event ::ev/event
{::ev/name "copy-handoff-style"
{::ev/name "copy-inspect-style"
:type @style-type}))))]
[:div.element-options

2
frontend/src/app/main/ui/viewer/handoff/exports.cljs → frontend/src/app/main/ui/viewer/inspect/exports.cljs
View file

@ -4,7 +4,7 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.viewer.handoff.exports
(ns app.main.ui.viewer.inspect.exports
(:require
[app.common.data :as d]
[app.main.data.exports :as de]

2
frontend/src/app/main/ui/viewer/handoff/left_sidebar.cljs → frontend/src/app/main/ui/viewer/inspect/left_sidebar.cljs
View file

@ -4,7 +4,7 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.viewer.handoff.left-sidebar
(ns app.main.ui.viewer.inspect.left-sidebar
(:require
[app.common.data :as d]
[app.main.data.viewer :as dv]

6
frontend/src/app/main/ui/viewer/handoff/render.cljs → frontend/src/app/main/ui/viewer/inspect/render.cljs
View file

@ -4,8 +4,8 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.viewer.handoff.render
"The main container for a frame in handoff mode"
(ns app.main.ui.viewer.inspect.render
"The main container for a frame in inspect mode"
(:require
[app.common.geom.shapes :as gsh]
[app.common.pages.helpers :as cph]
@ -21,7 +21,7 @@
[app.main.ui.shapes.shape :refer [shape-container]]
[app.main.ui.shapes.svg-raw :as svg-raw]
[app.main.ui.shapes.text :as text]
[app.main.ui.viewer.handoff.selection-feedback :refer [selection-feedback]]
[app.main.ui.viewer.inspect.selection-feedback :refer [selection-feedback]]
[app.main.ui.viewer.interactions :refer [prepare-objects]]
[app.util.dom :as dom]
[app.util.object :as obj]

44
frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs → frontend/src/app/main/ui/viewer/inspect/right_sidebar.cljs
View file

@ -4,23 +4,23 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.viewer.handoff.right-sidebar
(ns app.main.ui.viewer.inspect.right-sidebar
(:require
[app.main.data.workspace :as dw]
[app.main.store :as st]
[app.main.ui.components.shape-icon :as si]
[app.main.ui.components.tab-container :refer [tab-container tab-element]]
[app.main.ui.icons :as i]
[app.main.ui.viewer.handoff.attributes :refer [attributes]]
[app.main.ui.viewer.handoff.code :refer [code]]
[app.main.ui.viewer.handoff.selection-feedback :refer [resolve-shapes]]
[app.main.ui.viewer.inspect.attributes :refer [attributes]]
[app.main.ui.viewer.inspect.code :refer [code]]
[app.main.ui.viewer.inspect.selection-feedback :refer [resolve-shapes]]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
[rumext.v2 :as mf]))
(mf/defc right-sidebar
[{:keys [frame page file selected shapes page-id file-id from]
:or {from :handoff}}]
:or {from :inspect}}]
(let [expanded (mf/use-state false)
section (mf/use-state :info #_:code)
shapes (or shapes
@ -38,22 +38,22 @@
(if (> (count shapes) 1)
[:*
[:span.tool-window-bar-icon i/layers]
[:span.tool-window-bar-title (tr "handoff.tabs.code.selected.multiple" (count shapes))]]
[:span.tool-window-bar-title (tr "inspect.tabs.code.selected.multiple" (count shapes))]]
[:*
[:span.tool-window-bar-icon
[:& si/element-icon {:shape first-shape}]]
;; Execution time translation strings:
;; handoff.tabs.code.selected.circle
;; handoff.tabs.code.selected.component
;; handoff.tabs.code.selected.curve
;; handoff.tabs.code.selected.frame
;; handoff.tabs.code.selected.group
;; handoff.tabs.code.selected.image
;; handoff.tabs.code.selected.mask
;; handoff.tabs.code.selected.path
;; handoff.tabs.code.selected.rect
;; handoff.tabs.code.selected.svg-raw
;; handoff.tabs.code.selected.text
;; inspect.tabs.code.selected.circle
;; inspect.tabs.code.selected.component
;; inspect.tabs.code.selected.curve
;; inspect.tabs.code.selected.frame
;; inspect.tabs.code.selected.group
;; inspect.tabs.code.selected.image
;; inspect.tabs.code.selected.mask
;; inspect.tabs.code.selected.path
;; inspect.tabs.code.selected.rect
;; inspect.tabs.code.selected.svg-raw
;; inspect.tabs.code.selected.text
[:span.tool-window-bar-title (:name first-shape)]])]
[:div.tool-window-content.inspect
[:& tab-container {:on-change-tab #(do
@ -62,14 +62,14 @@
(when (= from :workspace)
(dw/set-inspect-expanded false)))
:selected @section}
[:& tab-element {:id :info :title (tr "handoff.tabs.info")}
[:& tab-element {:id :info :title (tr "inspect.tabs.info")}
[:& attributes {:page-id page-id
:file-id file-id
:frame frame
:shapes shapes
:from from}]]
[:& tab-element {:id :code :title (tr "handoff.tabs.code")}
[:& tab-element {:id :code :title (tr "inspect.tabs.code")}
[:& code {:frame frame
:shapes shapes
:on-expand (fn []
@ -79,7 +79,7 @@
:from from}]]]]]
[:div.empty
[:span.tool-window-bar-icon i/code]
[:div (tr "handoff.empty.select")]
[:div (tr "inspect.empty.select")]
[:span.tool-window-bar-icon i/help]
[:div (tr "handoff.empty.help")]
[:button.btn-primary.action {:on-click #(dom/open-new-window "https://help.penpot.app/user-guide/inspect/")} (tr "handoff.empty.more-info")]])]]))
[:div (tr "inspect.empty.help")]
[:button.btn-primary.action {:on-click #(dom/open-new-window "https://help.penpot.app/user-guide/inspect/")} (tr "inspect.empty.more-info")]])]]))

2
frontend/src/app/main/ui/viewer/handoff/selection_feedback.cljs → frontend/src/app/main/ui/viewer/inspect/selection_feedback.cljs
View file

@ -4,7 +4,7 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.viewer.handoff.selection-feedback
(ns app.main.ui.viewer.inspect.selection-feedback
(:require
[app.common.data :as d]
[app.common.geom.shapes :as gsh]

2
frontend/src/app/main/ui/workspace/sidebar/options.cljs
View file

@ -14,7 +14,7 @@
[app.main.store :as st]
[app.main.ui.components.tab-container :refer [tab-container tab-element]]
[app.main.ui.context :as ctx]
[app.main.ui.viewer.handoff.right-sidebar :as hrs]
[app.main.ui.viewer.inspect.right-sidebar :as hrs]
[app.main.ui.workspace.sidebar.options.menus.align :refer [align-options]]
[app.main.ui.workspace.sidebar.options.menus.bool :refer [bool-options]]
[app.main.ui.workspace.sidebar.options.menus.exports :refer [exports-menu]]

2
frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs
View file

@ -141,7 +141,7 @@
;; shortcuts.open-color-picker
;; shortcuts.open-comments
;; shortcuts.open-dashboard
;; shortcuts.open-handoff
;; shortcuts.open-inspect
;; shortcuts.open-interactions
;; shortcuts.open-viewer
;; shortcuts.open-workspace

2
frontend/src/app/util/code_gen.cljs
View file

@ -204,7 +204,7 @@
(reduce d/merge)))
;; TODO: used on handoff
;; TODO: used on inspect
(defn parse-style-text-blocks
[node attrs]
(letfn