github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-07-23 22:48:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Redesign my penpot review

Browse Source
This commit is contained in:
Marina López 2026-07-21 15:51:13 +02:00
parent f20e4280fc
commit 396d799c71
7 changed files with 48 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/resources/images/icons/logo-files.svg
View File

@ -1 +0,0 @@
<svg width="24" xmlns="http://www.w3.org/2000/svg" height="24" id="screenshot-5de0120c-6b0f-8021-8008-386c29a8479c" viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-5de0120c-6b0f-8021-8008-386c29a8479c" width="21" height="21" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-5de0120c-6b0f-8021-8008-386c29a8479d" style="display: none;"><g class="fills" id="fills-5de0120c-6b0f-8021-8008-386c29a8479d"><rect width="24" height="24" x="0" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: rgb(143, 157, 163); fill-opacity: 1;" ry="0" fill="none" rx="0" y="0"/></g></g><g id="shape-5de0120c-6b0f-8021-8008-386c29a8479e" rx="0" ry="0"><g id="shape-5de0120c-6b0f-8021-8008-386c29a8479f"><g class="fills" id="fills-5de0120c-6b0f-8021-8008-386c29a8479f"><path d="M15.999859809875488,16.287622451782227L15.999859809875488,3.8000736236572266L14.559430122375488,3.8000736236572266L14.559430122375488,15.740259170532227L12.529156684875488,15.740259170532227L12.529156684875488,3.8000736236572266L11.484967231750488,3.8000736236572266L11.484967231750488,15.740259170532227L9.440289497375488,15.740259170532227L9.440289497375488,3.8000736236572266L7.99985933303833,3.8000736236572266L7.99985933303833,16.287622451782227L11.999859809875488,22.000024795532227L15.999859809875488,16.287622451782227L15.999859809875488,16.287622451782227M11.307476997375488,18.838403701782227L9.845562934875488,16.784692764282227L14.154889106750488,16.784692764282227L12.677838325500488,18.838403701782227L11.307476997375488,18.838403701782227L11.307476997375488,18.838403701782227" style="fill: rgb(143, 157, 163); fill-opacity: 1;"/></g></g><g id="shape-5de0120c-6b0f-8021-8008-386c29a847a0"><g class="fills" id="fills-5de0120c-6b0f-8021-8008-386c29a847a0"><rect rx="0.9999999999995453" ry="0.9999999999995453" x="7.998480615604876" y="2.800000000000182" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="8" height="1.9999999999990905" style="fill: rgb(143, 157, 163); fill-opacity: 1;"/></g></g></g></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

24
frontend/src/app/main/ui/dashboard/sidebar.cljs
View File

@ -349,7 +349,7 @@
[:> dropdown-menu-item* {:on-click on-org-click
:data-value default-team-id
:class (stl/css :org-dropdown-item)}
:class (stl/css :org-dropdown-item :org-dropdown-item-default-logo)}
[:span {:class (stl/css :my-teams-icon)}
[:> raw-svg* {:id penpot-logo-icon-subtle}]]
[:span {:class (stl/css :team-text)
@ -413,13 +413,22 @@
[:> dropdown-menu* props
[:> dropdown-menu-item* {:on-click on-team-click
:data-value default-team-id
:class (stl/css :team-dropdown-item)}
[:span {:class (stl/css :penpot-icon)} (if (contains? cf/flags :nitrate) deprecated-icon/logo-files deprecated-icon/logo-icon)]
:class (stl/css-case :team-dropdown-item true
:team-dropdown-item-no-logo (contains? cf/flags :nitrate))}
(when-not (contains? cf/flags :nitrate)
[:span {:class (stl/css :penpot-icon)} deprecated-icon/logo-icon])
[:span {:class (stl/css :team-text)} (if (contains? cf/flags :nitrate) (tr "dashboard.my-files") (tr "dashboard.your-penpot"))]
(when (= default-team-id (:id team))
tick-icon)]
(when (and (contains? cf/flags :nitrate)
(seq (remove :is-default (vals teams))))
[:*
[:hr {:role "separator" :class (stl/css :team-separator)}]
[:li {:role "presentation" :class (stl/css :org-section-label)}
(tr "dashboard.section.teams")]])
(for [team-item (remove :is-default (vals teams))]
[:> dropdown-menu-item* {:on-click on-team-click
:data-value (:id team-item)
@ -780,7 +789,8 @@
:on-key-down on-show-orgs-keydown
:aria-expanded show-orgs-menu?
:aria-haspopup "menu"}
[:div {:class (stl/css :team-name)}
[:div {:class (stl/css-case :team-name true
:team-name-default-logo default-org?)}
(if default-org?
[:*
[:span {:class (stl/css :my-teams-icon-xxxl)}
@ -919,8 +929,10 @@
:aria-haspopup "menu"}
(cond
is-default?
[:div {:class (stl/css :team-name)}
[:span {:class (stl/css :penpot-icon)} (if nitrate? deprecated-icon/logo-files deprecated-icon/logo-icon)]
[:div {:class (stl/css-case :team-name true
:team-name-no-logo nitrate?)}
(when-not nitrate?
[:span {:class (stl/css :penpot-icon)} deprecated-icon/logo-icon])
[:span {:class (stl/css :team-text)} (if nitrate? (tr "dashboard.my-files") (tr "dashboard.default-team-name"))]]
(and (contains? cf/flags :subscriptions)

25
frontend/src/app/main/ui/dashboard/sidebar.scss
View File

@ -94,17 +94,25 @@
grid-template-columns: 1fr auto;
gap: var(--sp-s);
height: 100%;
padding: 0 var(--sp-m);
padding: 0 var(--sp-m) 0 var(--sp-l);
}
.team-name {
display: grid;
align-items: center;
grid-template-columns: auto 1fr;
gap: var(--sp-m);
gap: var(--sp-s);
height: $sz-40;
}
.team-name-no-logo {
grid-template-columns: 1fr;
}
.team-name-default-logo {
gap: var(--sp-xs);
}
.team-text {
@include deprecated.text-ellipsis;
@include t.use-typography("title-small");
@ -185,6 +193,11 @@
grid-template-columns: var(--sp-xxl) 1fr auto;
gap: var(--sp-s);
height: $sz-40;
padding-inline-start: var(--sp-m);
}
.team-dropdown-item-no-logo {
grid-template-columns: 1fr auto;
}
.org-dropdown-item {
@ -194,6 +207,11 @@
grid-template-columns: auto 1fr auto;
gap: var(--sp-s);
height: $sz-40;
padding-inline-start: var(--sp-m);
}
.org-dropdown-item-default-logo {
gap: var(--sp-xs);
}
.action {
@ -211,7 +229,6 @@
width: var(--sp-xxl);
height: var(--sp-xxl);
margin-right: var(--sp-m);
border-radius: 50%;
background-color: var(--sidebar-icon-backgroun-color);
}
@ -234,7 +251,7 @@
color: var(--color-foreground-secondary);
list-style: none;
padding: var(--sp-m) $sz-6 $sz-6;
padding: var(--sp-m) $sz-6 $sz-6 var(--sp-m);
text-transform: uppercase;
}

1
frontend/src/app/main/ui/icons.cljs
View File

@ -17,7 +17,6 @@
(def ^:icon logo (icon-xref :penpot-logo))
(def ^:icon logo-icon (icon-xref :penpot-logo-icon))
(def ^:icon logo-error-screen (icon-xref :logo-error-screen))
(def ^:icon logo-files (icon-xref :logo-files))
(def ^:icon logo-subscription (icon-xref :logo-subscription))
(def ^:icon logo-subscription-light (icon-xref :logo-subscription-light))
(def ^:icon nitrate-welcome (icon-xref :nitrate-welcome))

5
frontend/translations/en.po
View File

@ -869,7 +869,7 @@ msgstr "Move to other team"
#: src/app/main/ui/dashboard/sidebar.cljs:348, src/app/main/ui/dashboard/sidebar.cljs:349, src/app/main/ui/dashboard/sidebar.cljs:761
msgid "dashboard.my-teams"
msgstr "My teams"
msgstr "My Teams"
#: src/app/main/ui/dashboard/files.cljs:106, src/app/main/ui/dashboard/projects.cljs:253, src/app/main/ui/dashboard/projects.cljs:254
msgid "dashboard.new-file"
@ -1086,6 +1086,9 @@ msgstr "Searching for “%s“…"
msgid "dashboard.section.organizations"
msgstr "Organizations"
msgid "dashboard.section.teams"
msgstr "Teams"
#, unused
msgid "dashboard.select-org-modal.accept"
msgstr "ADD TO ORGANIZATION"

5
frontend/translations/es.po
View File

@ -877,7 +877,7 @@ msgstr "Mover a otro equipo"
#: src/app/main/ui/dashboard/sidebar.cljs:348, src/app/main/ui/dashboard/sidebar.cljs:349, src/app/main/ui/dashboard/sidebar.cljs:761
msgid "dashboard.my-teams"
msgstr "Mis equipos"
msgstr "Mis Equipos"
#: src/app/main/ui/dashboard/files.cljs:106, src/app/main/ui/dashboard/projects.cljs:253, src/app/main/ui/dashboard/projects.cljs:254
msgid "dashboard.new-file"
@ -1096,6 +1096,9 @@ msgstr "Buscando “%s“…"
msgid "dashboard.section.organizations"
msgstr "Organizaciones"
msgid "dashboard.section.teams"
msgstr "Equipos"
#, unused
msgid "dashboard.select-org-modal.accept"
msgstr "AÑADIR A UNA ORGANIZACIÓN"

2
frontend/translations/it.po
View File

@ -875,7 +875,7 @@ msgstr "Sposta in un altro team"
#: src/app/main/ui/dashboard/sidebar.cljs:348, src/app/main/ui/dashboard/sidebar.cljs:349, src/app/main/ui/dashboard/sidebar.cljs:761
msgid "dashboard.my-teams"
msgstr "I miei team"
msgstr "I miei Team"
#: src/app/main/ui/dashboard/files.cljs:106, src/app/main/ui/dashboard/projects.cljs:253, src/app/main/ui/dashboard/projects.cljs:254
msgid "dashboard.new-file"