Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-23 23:18:48 -05:00
Code Issues Activity

🐛 Fix project name too long

Browse source
This commit is contained in:
Eva Marco 2024-03-12 13:05:51 +01:00 • committed by Alonso Torres
parent 9328974511
commit d478a7d8d9
3 changed files with 49 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/ui/dashboard/grid.scss
View file

@ -18,7 +18,7 @@ $thumbnail-default-height: $s-168; // Default width
}
.grid-row {
display: flex;
display: grid;
width: 100%;
gap: $s-24;
}

69
frontend/src/app/main/ui/dashboard/projects.cljs
View file

@ -276,7 +276,8 @@
(fn [event]
(when (kbd/enter? event)
(dom/stop-propagation event)
(on-menu-click event))))]
(on-menu-click event))))
title-width (/ 100 limit)]
[:article {:class (stl/css-case :dashboard-project-row true :first first?)}
[:header {:class (stl/css :project)}
@ -285,46 +286,52 @@
[:& inline-edition {:content (:name project)
:on-end on-edit}]
[:h2 {:on-click on-nav
:style {:max-width (str title-width "%")}
:class (stl/css :project-name)
:title (if (:is-default project)
(tr "labels.drafts")
(:name project))
:on-context-menu on-menu-click}
(if (:is-default project)
(tr "labels.drafts")
(:name project))])
[:& project-menu
{:project project
:show? (:menu-open @local)
:left (+ 24 (:x (:menu-pos @local)))
:top (:y (:menu-pos @local))
:on-edit on-edit-open
:on-menu-close on-menu-close
:on-import on-import}]
[:div {:class (stl/css :info-wrapper)}
[:& project-menu
{:project project
:show? (:menu-open @local)
:left (+ 24 (:x (:menu-pos @local)))
:top (:y (:menu-pos @local))
:on-edit on-edit-open
:on-menu-close on-menu-close
:on-import on-import}]
[:span {:class (stl/css :info)} (str (tr "labels.num-of-files" (i18n/c file-count)))]
[:span {:class (stl/css :info)} (str (tr "labels.num-of-files" (i18n/c file-count)))]
(let [time (-> (:modified-at project)
(dt/timeago {:locale locale}))]
[:span {:class (stl/css :recent-files-row-title-info)} (str ", " time)])
(let [time (-> (:modified-at project)
(dt/timeago {:locale locale}))]
[:span {:class (stl/css :recent-files-row-title-info)} (str ", " time)])
[:div {:class (stl/css :project-actions)}
(when-not (:is-default project)
[:> pin-button* {:class (stl/css :pin-button) :is-pinned (:is-pinned project) :on-click toggle-pin :tab-index 0}])
[:div {:class (stl/css :project-actions)}
(when-not (:is-default project)
[:> pin-button* {:class (stl/css :pin-button) :is-pinned (:is-pinned project) :on-click toggle-pin :tab-index 0}])
[:button {:class (stl/css :btn-secondary :btn-small :tooltip :tooltip-bottom)
:on-click on-create-click
:alt (tr "dashboard.new-file")
:aria-label (tr "dashboard.new-file")
:data-test "project-new-file"
:on-key-down handle-create-click}
i/add]
[:button {:class (stl/css :btn-secondary :btn-small)
:on-click on-create-click
:title (tr "dashboard.new-file")
:aria-label (tr "dashboard.new-file")
:data-test "project-new-file"
:on-key-down handle-create-click}
i/add]
[:button
{:class (stl/css :btn-secondary :btn-small :tooltip :tooltip-bottom)
:on-click on-menu-click
:alt (tr "dashboard.options")
:aria-label (tr "dashboard.options")
:data-test "project-options"
:on-key-down handle-menu-click}
i/menu]]]]
[:button
{:class (stl/css :btn-secondary :btn-small)
:on-click on-menu-click
:title (tr "dashboard.options")
:aria-label (tr "dashboard.options")
:data-test "project-options"
:on-key-down handle-menu-click}
i/menu]]]]]
[:div {:class (stl/css :grid-container) :ref rowref}
[:& line-grid

13
frontend/src/app/main/ui/dashboard/projects.scss
View file

@ -48,6 +48,7 @@
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: $s-32;
margin-left: $s-8;
}
@ -57,7 +58,8 @@
padding: $s-8;
}
h2 {
.project-name {
@include textEllipsis;
cursor: pointer;
font-size: $fs-16;
line-height: 0.8;
@ -65,8 +67,13 @@
color: $df-primary;
margin-right: $s-4;
margin-right: $s-12;
width: fit-content;
}
.info-wrapper {
display: flex;
align-items: center;
gap: $s-8;
}
.info,
.recent-files-row-title-info {
font-size: $fs-14;
@ -80,7 +87,7 @@
.project-actions {
display: flex;
opacity: 1;
opacity: 0;
margin-left: $s-32;
.btn-small:not(.pin-button) {