0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-16 01:31:22 -05:00

Merge pull request #2648 from penpot/palba-empty-inspect

🎉 Add placeholder for empty inspect tab
This commit is contained in:
Andrey Antukh 2022-12-12 15:32:18 +01:00 committed by GitHub
commit c148326d1c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 66 additions and 3 deletions

View file

@ -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;

View file

@ -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")]
])]]))

View file

@ -1118,6 +1118,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"
@ -4449,3 +4458,4 @@ msgstr "The font %s could not be loaded"
msgid "errors.bad-font-plural"
msgstr "The fonts %s could not be loaded"

View file

@ -1225,6 +1225,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"