fix: Prevent multiline file tree labels (#16)

Mezcalito · Feb 27, 2025 · 6e88954 · 6e88954
1 parent 562a2d4
commit 6e88954
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 25 deletions.
diff --git a/assets/dist/styles.min.css b/assets/dist/styles.min.css
diff --git a/assets/src/scss/04_components/_index.scss b/assets/src/scss/04_components/_index.scss
@@ -13,4 +13,5 @@
 @forward "components.collapse";
 @forward "components.card-actions";
 @forward "components.field";
-@forward "components.custom-select";
+@forward "components.custom-select";
+@forward "components.file-tree";
diff --git a/assets/src/scss/04_components/components.collapse.scss b/assets/src/scss/04_components/components.collapse.scss
@@ -85,6 +85,18 @@
   .fm-c-collapse__action {
     display: flex;
     align-items: center;
+    text-align: left;
     gap: 4px;
+
+    svg {
+      flex-shrink: 0;
+    }
+
+    span {
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 }
diff --git a/assets/src/scss/04_components/components.file-tree.scss b/assets/src/scss/04_components/components.file-tree.scss
@@ -0,0 +1,12 @@
+.fm-c-file-tree__list {
+  max-width: 100%;
+}
+
+.fm-c-file-tree__item-header {
+  max-width: 100%;
+
+  .fm-c-collapse__action {
+    max-width: 100%;
+    overflow: hidden;
+  }
+}
diff --git a/templates/Sidebar.html.twig b/templates/Sidebar.html.twig
@@ -1,23 +1,26 @@
 {# @var filesystem \Mezcalito\FileManagerBundle\Filesystem\Filesystem #}
 
-<aside class="fm-c-sidebar fm-u-hidden@until-md" {{ attributes.defaults({'data-action': 'filemanager:refresh@window->live#$render'}) }}>
-    <ul>
-        <li class="fm-c-collapse" data-mezcalito--ux-filemanager--filemanager-target="collapse" data-visible="true">
-            <div class="fm-c-collapse__head fm-c-collapse__head--first{% if currentPath == '/' %} fm-c-collapse__head--active{% endif %}">
+<aside class="fm-c-sidebar fm-c-file-tree fm-u-hidden@until-md" {{ attributes.defaults({'data-action': 'filemanager:refresh@window->live#$render'}) }}>
+    <ul class="fm-c-file-tree__list">
+        <li class="fm-c-collapse fm-c-file-tree__item" data-mezcalito--ux-filemanager--filemanager-target="collapse" data-visible="true">
+            {% set label = 'My files'|trans(domain="FileManagerBundle") %}
+            <div class="fm-c-file-tree__item-header fm-c-collapse__head fm-c-collapse__head--first{% if currentPath == '/' %} fm-c-collapse__head--active{% endif %}">
                 <button class="fm-c-collapse__arrow" type="button">
                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
                         <path d="M5.25 11.3L8.75 7.8L5.25 4.3" stroke="#566071" stroke-width="1.169" stroke-linecap="round" stroke-linejoin="round"/>
                     </svg>
                 </button>
-                <button data-action="live#emit" data-live-event-param="updateCurrentPath" data-live-path-param="/" class="fm-c-collapse__action fm-c-text-xs fm-u-fw-700{% if currentPath == '/' %} is-active{% endif %}">
+                <button data-action="live#emit" data-live-event-param="updateCurrentPath" data-live-path-param="/" class="fm-c-collapse__action fm-c-text-xs fm-u-fw-700{% if currentPath == '/' %} is-active{% endif %}" title="{{ label }}">
                     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
                         <path d="M4.16667 4.13334H7.5L10 6.63334H15.8333C16.2754 6.63334 16.6993 6.80893 17.0118 7.12149C17.3244 7.43405 17.5 7.85798 17.5 8.30001V14.9667C17.5 15.4087 17.3244 15.8326 17.0118 16.1452C16.6993 16.4577 16.2754 16.6333 15.8333 16.6333H4.16667C3.72464 16.6333 3.30072 16.4577 2.98816 16.1452C2.67559 15.8326 2.5 15.4087 2.5 14.9667V5.80001C2.5 5.35798 2.67559 4.93405 2.98816 4.62149C3.30072 4.30893 3.72464 4.13334 4.16667 4.13334Z" stroke="#566071" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
                     </svg>
-                    {{ 'My files'|trans(domain="FileManagerBundle") }}
+                    <span>
+                        {{ label }}
+                    </span>
                 </button>
             </div>
             <div class="fm-c-collapse__wrapper">
-                <ul class="fm-c-collapse__content">
+                <ul class="fm-c-file-tree__list fm-c-collapse__content">
                     {% for node in nodes %}
                         {{ _self.folder(filesystem, currentPath, node) }}
                     {% endfor %}
@@ -29,25 +32,28 @@
 
 {% macro folder(filesystem, currentPath, node) %}
     {% set hasChild = filesystem.listDirectory(node.path)|filter(child => child.isDir())|length > 0 %}
-    <li class="{% if hasChild %}fm-c-collapse fm-c-collapse__openable{% else %}fm-c-collapse{% endif %}" {% if hasChild %}data-mezcalito--ux-filemanager--filemanager-target="collapse"{% endif %}>
-        <div class="fm-c-collapse__head{% if currentPath == node.path %} fm-c-collapse__head--active{% endif %}">
+    {% set label = node.id | split('/') | last %}
+    <li class="fm-c-file-tree__item fm-c-collapse{% if hasChild %} fm-c-collapse__openable{% endif %}" {% if hasChild %}data-mezcalito--ux-filemanager--filemanager-target="collapse"{% endif %}>
+        <div class="fm-c-file-tree__item-header fm-c-collapse__head{% if currentPath == node.path %} fm-c-collapse__head--active{% endif %}">
             {% if hasChild %}
                 <button class="fm-c-collapse__arrow" type="button">
                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
                         <path d="M5.25 11.3L8.75 7.8L5.25 4.3" stroke="#566071" stroke-width="1.169" stroke-linecap="round" stroke-linejoin="round"/>
                     </svg>
                 </button>
             {% endif %}
-            <button data-action="live#emit" data-live-event-param="updateCurrentPath" data-live-path-param="{{ node.path }}" class="fm-c-collapse__action fm-c-text-xs fm-u-fw-700{% if currentPath == node.path %} is-active{% endif %}">
+            <button data-action="live#emit" data-live-event-param="updateCurrentPath" data-live-path-param="{{ node.path }}" class="fm-c-collapse__action fm-c-text-xs fm-u-fw-700{% if currentPath == node.path %} is-active{% endif %}" title="{{ label }}">
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
                     <path d="M4.16667 4.13334H7.5L10 6.63334H15.8333C16.2754 6.63334 16.6993 6.80893 17.0118 7.12149C17.3244 7.43405 17.5 7.85798 17.5 8.30001V14.9667C17.5 15.4087 17.3244 15.8326 17.0118 16.1452C16.6993 16.4577 16.2754 16.6333 15.8333 16.6333H4.16667C3.72464 16.6333 3.30072 16.4577 2.98816 16.1452C2.67559 15.8326 2.5 15.4087 2.5 14.9667V5.80001C2.5 5.35798 2.67559 4.93405 2.98816 4.62149C3.30072 4.30893 3.72464 4.13334 4.16667 4.13334Z" stroke="#566071" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
-                {{ node.id | split('/') | last }}
+                <span>
+                    {{ label }}
+                </span>
             </button>
         </div>
         {% if hasChild %}
             <div class="fm-c-collapse__wrapper">
-                <ul class="fm-c-collapse__content">
+                <ul class="fm-c-file-tree__list fm-c-collapse__content">
                     {% for child in filesystem.listDirectory(node.path)|filter(node => node.isDir()) %}
                         {{ _self.folder(filesystem, currentPath, child) }}
                     {% endfor %}

diff --git a/templates/modal_action/files.html.twig b/templates/modal_action/files.html.twig
@@ -1,20 +1,23 @@
-<ul>
-    <li class="fm-c-collapse" data-mezcalito--ux-filemanager--filemanager-target="collapse" data-visible="true">
-        <div class="fm-c-collapse__head fm-c-collapse__head--first">
+<ul class="fm-c-file-tree__list">
+    <li class="fm-c-collapse fm-c-file-tree__item" data-mezcalito--ux-filemanager--filemanager-target="collapse" data-visible="true">
+        {% set label = 'My files'|trans(domain="FileManagerBundle") %}
+        <div class="fm-c-file-tree__item-header fm-c-collapse__head fm-c-collapse__head--first">
             <button class="fm-c-collapse__arrow" type="button">
                 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
                     <path d="M5.25 11.3L8.75 7.8L5.25 4.3" stroke="#566071" stroke-width="1.169" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
             </button>
-            <button data-action="live#update" data-model="value" data-value="/" class="fm-c-collapse__action fm-c-text-xs fm-u-fw-700">
+            <button data-action="live#update" data-model="value" data-value="/" class="fm-c-collapse__action fm-c-text-xs fm-u-fw-700" title="{{ label }}">
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
                     <path d="M4.16667 4.13334H7.5L10 6.63334H15.8333C16.2754 6.63334 16.6993 6.80893 17.0118 7.12149C17.3244 7.43405 17.5 7.85798 17.5 8.30001V14.9667C17.5 15.4087 17.3244 15.8326 17.0118 16.1452C16.6993 16.4577 16.2754 16.6333 15.8333 16.6333H4.16667C3.72464 16.6333 3.30072 16.4577 2.98816 16.1452C2.67559 15.8326 2.5 15.4087 2.5 14.9667V5.80001C2.5 5.35798 2.67559 4.93405 2.98816 4.62149C3.30072 4.30893 3.72464 4.13334 4.16667 4.13334Z" stroke="#566071" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
-                {{ 'My files'|trans(domain="FileManagerBundle") }}
+                <span>
+                    {{ label }}
+                </span>
             </button>
         </div>
         <div class="fm-c-collapse__wrapper">
-            <ul class="fm-c-collapse__content">
+            <ul class="fm-c-file-tree__list fm-c-collapse__content">
                 {% for node in filesystem.listDirectory('/')|filter(node => node.isDir()) %}
                     {{ _self.folder(filesystem, oldValue, value, node) }}
                 {% endfor %}
@@ -25,28 +28,29 @@
 
 {% macro folder(filesystem, oldValue, value, node) %}
     {% set hasChild = filesystem.listDirectory(node.path)|filter(child => child.isDir())|length > 0 %}
-    <li class="{% if hasChild %}fm-c-collapse fm-c-collapse__openable{% else %}fm-c-collapse{% endif %}" {% if hasChild %}data-mezcalito--ux-filemanager--filemanager-target="collapse"{% endif %}>
-        <div class="fm-c-collapse__head{% if value == node.path %} fm-c-collapse__head--active{% endif %}{% if oldValue == node.path %} fm-c-collapse__head--disabled{% endif %}">
+    {% set label = node.id | split('/') | last %}
+    <li class="fm-c-file-tree__item fm-c-collapse{% if hasChild %} fm-c-collapse__openable{% endif %}" {% if hasChild %}data-mezcalito--ux-filemanager--filemanager-target="collapse"{% endif %}>
+        <div class="fm-c-file-tree__item-header fm-c-collapse__head{% if value == node.path %} fm-c-collapse__head--active{% endif %}{% if oldValue == node.path %} fm-c-collapse__head--disabled{% endif %}">
             {% if hasChild %}
                 <button class="fm-c-collapse__arrow" type="button">
                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
                         <path d="M5.25 11.3L8.75 7.8L5.25 4.3" stroke="#566071" stroke-width="1.169" stroke-linecap="round" stroke-linejoin="round"/>
                     </svg>
                 </button>
             {% endif %}
-            <button {% if oldValue != node.path %}data-action="live#update" data-model="value" data-value="{{ node.path }}"{% endif%} class="fm-c-collapse__action fm-c-text-xs fm-u-fw-700{% if value == node.path %} is-active{% endif %}">
+            <button {% if oldValue != node.path %}data-action="live#update" data-model="value" data-value="{{ node.path }}"{% endif%} class="fm-c-collapse__action fm-c-text-xs fm-u-fw-700{% if value == node.path %} is-active{% endif %}" title="{{ label }}">
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
                     <path d="M4.16667 4.13334H7.5L10 6.63334H15.8333C16.2754 6.63334 16.6993 6.80893 17.0118 7.12149C17.3244 7.43405 17.5 7.85798 17.5 8.30001V14.9667C17.5 15.4087 17.3244 15.8326 17.0118 16.1452C16.6993 16.4577 16.2754 16.6333 15.8333 16.6333H4.16667C3.72464 16.6333 3.30072 16.4577 2.98816 16.1452C2.67559 15.8326 2.5 15.4087 2.5 14.9667V5.80001C2.5 5.35798 2.67559 4.93405 2.98816 4.62149C3.30072 4.30893 3.72464 4.13334 4.16667 4.13334Z" stroke="#566071" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
-                {{ node.id | split('/') | last }}
+                {{ label }}
                 {% if hasChild %}
                     <span class="fm-u-fw-400">({{ filesystem.listDirectory(node.path)|filter(child => child.isDir())|length }})</span>
                 {% endif %}
             </button>
         </div>
         {% if hasChild %}
             <div class="fm-c-collapse__wrapper">
-                <ul class="fm-c-collapse__content">
+                <ul class="fm-c-file-tree__list fm-c-collapse__content">
                     {% for child in filesystem.listDirectory(node.path)|filter(node => node.isDir()) %}
                         {{ _self.folder(filesystem, oldValue, value, child) }}
                     {% endfor %}