diff --git a/frontend/src/app/main/ui/dashboard/grid.scss b/frontend/src/app/main/ui/dashboard/grid.scss index 3108fa656..a8c812c92 100644 --- a/frontend/src/app/main/ui/dashboard/grid.scss +++ b/frontend/src/app/main/ui/dashboard/grid.scss @@ -18,7 +18,7 @@ $thumbnail-default-height: $s-168; // Default width } .grid-row { - display: flex; + display: grid; width: 100%; gap: $s-24; } diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs index 82bbe0378..9135ca83b 100644 --- a/frontend/src/app/main/ui/dashboard/projects.cljs +++ b/frontend/src/app/main/ui/dashboard/projects.cljs @@ -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 diff --git a/frontend/src/app/main/ui/dashboard/projects.scss b/frontend/src/app/main/ui/dashboard/projects.scss index 13204f3d5..aa1be237a 100644 --- a/frontend/src/app/main/ui/dashboard/projects.scss +++ b/frontend/src/app/main/ui/dashboard/projects.scss @@ -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) {