🐛 Fix long file names (#6216)

* 🔧 Add truncate str macro

* 🐛 Use truncate instead of prune to prevent title override

* 💄 Use text-overflow ellipsis on file names

* 📎 Add #10662 to 2.7 bugfixes

CHANGES.md

@@ -16,6 +16,7 @@
 - Fix SVG `stroke-linecap` property when importing SVGs [Taiga #9489](https://tree.taiga.io/project/penpot/issue/9489)
 - Fix position problems cutting-pasting a component [Taiga #10677](https://tree.taiga.io/project/penpot/issue/10677)
 - Fix design tab has a horizontal scroll [Taiga #10660](https://tree.taiga.io/project/penpot/issue/10660)
+- Fix long file names being clipped when longer than allowed length [Taiga #10662](https://tree.taiga.io/project/penpot/issue/10662)
 
 ## 2.6.0 (Unreleased)
 

common/src/app/common/data/macros.cljc

@@ -6,7 +6,7 @@
 
 (ns app.common.data.macros
   "Data retrieval & manipulation specific macros."
-  (:refer-clojure :exclude [get-in select-keys str with-open min max])
+  (:refer-clojure :exclude [get-in select-keys str with-open max])
   #?(:cljs (:require-macros [app.common.data.macros]))
   (:require
    #?(:clj [clojure.core :as c]
@@ -144,3 +144,8 @@
                  (str "expr assert: " (pr-str expr)))]
      (when *assert*
        `(runtime-assert ~hint (fn [] ~expr))))))
+
+(defn truncate
+  "Truncates a string to a certain length"
+  [s max-length]
+  (subs s 0 (min max-length (count s))))

frontend/src/app/main/data/workspace.cljs

@@ -698,7 +698,7 @@
 (defn rename-file
   [id name]
   {:pre [(uuid? id) (string? name)]}
-  (let [name (str/prune name 200)]
+  (let [name (dm/truncate name 200)]
     (ptk/reify ::rename-file
       IDeref
       (-deref [_]

frontend/src/app/main/ui/exports/assets.scss

@@ -304,6 +304,7 @@
     }
     .file-name-label {
       @include bodyLargeTypography;
+      @include textEllipsis;
     }
   }
   &.loading {

frontend/src/app/main/ui/exports/files.scss

@@ -199,6 +199,7 @@
 .file-entry {
   .file-name {
     @include flexRow;
+
     .file-icon {
       @include flexCenter;
       height: $s-16;
@@ -211,6 +212,7 @@
     }
     .file-name-label {
       @include bodyLargeTypography;
+      @include textEllipsis;
     }
   }
   &.loading {

frontend/src/app/main/ui/workspace/left_header.cljs

@@ -132,7 +132,7 @@
             :saved i/status-tick
             :error i/status-wrong
             nil)]
-         file-name])]
+         [:div {:class (stl/css :file-name-label)} file-name]])]
      (when ^boolean shared?
        [:span {:class (stl/css :shared-badge)} i/library])
      [:div {:class (stl/css :menu-section)}

frontend/src/app/main/ui/workspace/left_header.scss

@@ -54,6 +54,10 @@
   flex-direction: row;
 }
 
+.file-name-label {
+  @include textEllipsis;
+}
+
 .file-name-input {
   @include flexCenter;
   width: 100%;