feat(ListBrowser): Add option to toggle path icon and path text

Kitware · Aug 5, 2024 · 4f2abc3 · 4f2abc3
1 parent d387185
commit 4f2abc3
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/examples/list_browser.py b/examples/list_browser.py
@@ -1,5 +1,7 @@
 import os
+
 from trame.app import get_server
+
 from trame.widgets import trame
 
 server = get_server()
@@ -50,6 +52,8 @@ def on_click(e):
             list=("listing", FILE_LISTING),
             path=("path", PATH_HIERARCHY),
             click=(on_click, "[$event]"),
+            path_separator="/",
+            show_path_with_icon=True,
         )
 
 if __name__ == "__main__":

diff --git a/trame_components/widgets/trame.py b/trame_components/widgets/trame.py
@@ -1,4 +1,5 @@
 from trame_client.widgets.core import AbstractElement
+
 from trame_components import module
 
 __all__ = [
@@ -279,7 +280,10 @@ class ListBrowser(HtmlElement):
 
     :param list: List stored in state
     :param filter: Function to filter list
-    :param path_slash_icon: The icon to use for the slash between folders
+    :param path_separator: The icon to use for the slash between folders
+    :param show_path_with_icon: Show the path next to the icon?
+    :param show_icon: Show the folder icon?
+    :param path_as_icon: Use the foldername itself as the icon?
     :param path_icon:
     :param path_selected_icon:
     :param filter_icon:
@@ -291,7 +295,9 @@ def __init__(self, children=None, **kwargs):
         self._attr_names += [
             "path_icon",
             "path_selected_icon",
-            "path_slash_style",
+            "path_separator",
+            "show_icon",
+            "show_path_with_icon",
             "filter_icon",
             "filter",
             "path",

diff --git a/vue-components/src/components/TrameListBrowser.js b/vue-components/src/components/TrameListBrowser.js
@@ -55,15 +55,24 @@ const QUERY =
 
 export default {
   props: {
+    showPathWithIcon: {
+      type: Boolean,
+      default: false
+    },
     pathIcon: {
       type: String,
       default: "mdi-folder-outline",
     },
+    showIcon: {
+      type: Boolean,
+      default: true
+    },
+    // showIcon, showPathWithIcon, separ
     pathSelectedIcon: {
       type: String,
       default: "mdi-folder",
     },
-    pathSlashStyle: {
+    pathSeparator: {
       type: String,
       default: ">",
     },
@@ -153,17 +162,24 @@ export default {
     <v-col class="pa-0">
         <v-divider v-if="path" class="mb-3" />
         <v-row v-if="path" class="mx-2 py-2 rounded-0 align-center">
-            <div v-for="item, idx in path" :key="idx" class="d-flex">
-                <span v-if="idx">{{pathSlashStyle}}</span>
+            <div v-for="item, idx in path" :key="idx" class="d-flex" >
+                <span v-if="idx">&nbsp; {{ pathSeparator }} &nbsp;</span>
                 <v-icon
+                    v-if="showIcon"
                     class="mx-1"
                     ${ICON_ATTR}="activeFolderIndex === idx ? pathSelectedIcon : pathIcon"
                     @click="goToPath(idx)"
                     @mouseenter="activatePath(idx)"
                     @mouseleave="deactivatePath"
                 />
+                <span v-if="showPathWithIcon"
+                    @click="goToPath(idx)"
+                    @mouseenter="activatePath(idx)"
+                    @mouseleave="deactivatePath">
+                    {{path[idx]}}
+                </span>
             </div>
-            <div class="text-truncate text-body-2 pl-1">{{ activeFolderName }}</div>
+            <div v-if="!showPathWithIcon"class="text-truncate text-body-2 pl-1">{{ activeFolderName }}</div>
         </v-row>
         <v-divider v-if="path" class="mt-3" />
         <v-row v-if="filter" class="px-2 py-0 ma-0" :class="{ 'mt-3': path }">