diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss index 15d63f034..1ac66ac89 100644 --- a/frontend/resources/styles/main/partials/sidebar.scss +++ b/frontend/resources/styles/main/partials/sidebar.scss @@ -174,6 +174,42 @@ } } + .empty { + color: $color-gray-20; + font-size: 12px; + line-height: 1.5; + text-align: center; + padding: 0 15px; + display: flex; + flex-direction: column; + gap: 20px; + margin-top: 12px; + + .tool-window-bar-icon { + height: 32px; + display: flex; + align-items: center; + justify-content: center; + margin-top: 16px; + } + + svg { + width: 32px; + height: 32px; + fill: $color-gray-30; + } + + .btn-primary { + margin-top: 10px; + background-color: $color-gray-60; + color: $color-gray-10; + &:hover { + background-color: $color-primary; + color: $color-black; + } + } + } + & > .resize-area { position: absolute; width: 8px; diff --git a/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs b/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs index 629cc8030..63db1d487 100644 --- a/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs +++ b/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs @@ -13,6 +13,7 @@ [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.util.dom :as dom] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -30,7 +31,7 @@ [:aside.settings-bar.settings-bar-right {:class (when @expanded "expanded")} [:div.settings-bar-inside - (when (seq shapes) + (if (seq shapes) [:div.tool-window [:div.tool-window-bar.big (if (> (count shapes) 1) @@ -69,8 +70,15 @@ [:& tab-element {:id :code :title (tr "handoff.tabs.code")} [:& code {:frame frame :shapes shapes - :on-expand (fn[] + :on-expand (fn [] (when (= from :workspace) (dw/set-inspect-expanded (not expanded))) (swap! expanded not)) - :from from}]]]]])]])) + :from from}]]]]] + [:div.empty + [:span.tool-window-bar-icon i/code] + [:div (tr "handoff.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")] + ])]])) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index c0c7d771f..f3b21bac3 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -1114,6 +1114,15 @@ msgstr "Text" msgid "handoff.tabs.info" msgstr "Info" +msgid "handoff.empty.select" +msgstr "Select a shape, board or group to inspect their properties and code" + +msgid "handoff.empty.help" +msgstr "If you want to know more about design inspect visit Penpot's help center" + +msgid "handoff.empty.more-info" +msgstr "More info about inspect" + #: src/app/main/ui/workspace/header.cljs msgid "label.shortcuts" msgstr "Shortcuts" @@ -4445,3 +4454,4 @@ msgstr "The font %s could not be loaded" msgid "errors.bad-font-plural" msgstr "The fonts %s could not be loaded" + diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 4cc50f736..730c7d13c 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -1221,6 +1221,15 @@ msgstr "Texto" msgid "handoff.tabs.info" msgstr "Información" +msgid "handoff.empty.select" +msgstr "Elige una forma, tablero o grupo para inspeccionar sus propiedades y código" + +msgid "handoff.empty.help" +msgstr "Si quieres saber más sobre la inspección puedes visitar el centro de ayuda de Penpot" + +msgid "handoff.empty.more-info" +msgstr "Más información sobre la inspección" + msgid "history.alert-message" msgstr "Estás viendo la versión %s"