Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-03 04:49:03 -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 { .grid-row {
display: flex; display: grid;
width: 100%; width: 100%;
gap: $s-24; gap: $s-24;
} }

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

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

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

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