From 4f48e6aaf7aef349f01763a0b427cb6512fd65f4 Mon Sep 17 00:00:00 2001
From: Guillaume Delhumeau <guillaume.delhumeau@xwiki.com>
Date: Wed, 5 Jul 2023 15:44:14 +0300
Subject: [PATCH] Prototyping a file tree.

# Conflicts:
#	www/common/sframe-common-file.js
---
 .../src/less2/include/framework.less          |   3 +
 customize.dist/src/less2/include/tree.less    |  47 +++++
 www/common/sframe-common-file.js              | 179 +++++++++++++++++-
 3 files changed, 228 insertions(+), 1 deletion(-)
 create mode 100644 customize.dist/src/less2/include/tree.less

diff --git a/customize.dist/src/less2/include/framework.less b/customize.dist/src/less2/include/framework.less
index 3d5ed36a6..a81fc9c54 100644
--- a/customize.dist/src/less2/include/framework.less
+++ b/customize.dist/src/less2/include/framework.less
@@ -18,6 +18,7 @@
 @import (reference) "./mentions.less";
 @import (reference) "./forms.less";
 @import (reference) "./modals-ui-elements.less";
+@import (reference) "./tree.less";
 
 .framework_main(
     @bg-color: @colortheme_apps[default]
@@ -49,6 +50,7 @@
     .cursor_main();
     .usergrid_main();
     .forms_main();
+    .tree_main();
     .mentions_main();
     .creation_main(
         @bg-color: @bg-color,
@@ -81,6 +83,7 @@
     .password_main();
     .usergrid_main();
     .forms_main();
+    .tree_main();
     font: @colortheme_app-font;
 }
 
diff --git a/customize.dist/src/less2/include/tree.less b/customize.dist/src/less2/include/tree.less
new file mode 100644
index 000000000..4a03aafe5
--- /dev/null
+++ b/customize.dist/src/less2/include/tree.less
@@ -0,0 +1,47 @@
+@import (reference) "./colortheme-all.less";
+@import (reference) "./variables.less";
+
+.tree_main () {
+    --LessLoader_require: LessLoader_currentFile();
+}
+& {
+
+    .cp-tree {
+        color: @cryptpad_text_col;
+
+        li.cp-tree-line {
+            margin-left: 1em;
+        }
+
+        .cp-tree-line-container {
+            display: flex;
+            align-items: center;
+            height: 2em;
+
+            &.cp-tree-leaf {
+                margin-left: 2.0em;
+            }
+
+            i.cp-tree-carret {
+                font-size: 2em;
+                width: 1em;
+            }
+
+            i.cp-tree-icon {
+                font-size: 1.5em;
+                width: 1.5em;
+            }
+        }
+
+        .cp-tree-line-selectable {
+            display: inline-flex;
+            align-items: center;
+            cursor: pointer;
+
+            &.cp-tree-selected {
+                background-color: @cp_drive-selected-bg;
+            }
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/www/common/sframe-common-file.js b/www/common/sframe-common-file.js
index acb4eded7..812f42984 100644
--- a/www/common/sframe-common-file.js
+++ b/www/common/sframe-common-file.js
@@ -336,9 +336,85 @@ define([
 
             var manualStore = createManualStore();
 
+/*
             common.getFoldersList(function (tree) {
                 console.warn(tree);
             });
+*/
+            var breadcrumbContent = [
+                h('li.breadcrumb-item', [
+                    h('i.fa.fa-folder')
+                ])
+            ];
+
+            var defaultPath = 'Drive/Images/Example';
+            defaultPath.split('/').forEach(function(folder) {
+                breadcrumbContent.push(h('li.breadcrumb-item', folder));
+            });
+
+            var drives =
+            [
+                {
+                  name: "drive",
+                  pathName: "root",
+                  isShared: false,
+                  children: [
+                    {
+                      name: "Folder 1",
+                      pathName: "Folder 1",
+                      isShared: false,
+                      children: [
+                        {
+                          name: "Subfolder1",
+                          pathName: "Subfolder1",
+                          isShared: false,
+                          children: []
+                        },
+                        {
+                          name: "Subfolder2",
+                          pathName: "Subfolder2",
+                          isShared: false,
+                                                                   children: []
+                        }
+                      ]
+                    },
+                    {
+                      name: "Shared Folder",
+                      pathName: ["id675478998765", "root"],
+                      isShared: true,
+                      children: [
+                        {
+                          name: "SubFolderInSharedFolder",
+                          pathName: "SubFolderInSharedFolder",
+                          isShared: false,
+                                                                   children: []
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  name: "teamID1",
+                  isShared: false,
+                  pathName: "teamID1",
+                  children: [
+                    {
+                      name: "FolderA",
+                      pathName: "FolderA",
+                      isShared: false,
+                                                               children: []
+                    },
+                    {
+                      name: "FolderB",
+                      pathName: "FolderB",
+                      isShared: false,
+                                                               children: []
+                    }
+                  ]
+                }
+            ];
+
+            let pathContainer;
 
             // Ask for name, password and owner
             var content = h('div', [
@@ -359,7 +435,23 @@ define([
                     UI.createCheckbox('cp-upload-owned', Messages.upload_modal_owner, modalState.owned),
                     createHelper(Pages.localizeDocsLink('https://docs.cryptpad.org/en/user_guide/share_and_access.html#owners'), Messages.creation_owned1)
                 ]),
-                manualStore
+                manualStore,
+                h('div', {
+                    style: 'display:flex;'
+                    },[
+                    pathContainer = h('div', {
+                        'aria-label': 'breadcrumb',
+                        style: 'display:inline-flex;flex-grow:1;align-items:center;justify-content:space-between;padding:0;'
+                    }, [
+                        h('ol.breadcrumb', {
+                            style: 'width:100%;margin:0;'
+                        }, breadcrumbContent)
+                    ]),
+                    h('button.btn.btn-primary', [
+                        h('i.fa.fa-folder'),
+                        h('span', 'Choose')
+                    ])
+                ])
             ]);
 
             var $content = $(content);
@@ -372,6 +464,91 @@ define([
                 }
             });
 
+            // Tree initializer
+            $content.find('button').click(function() {
+                $(this).hide();
+                
+                // Just remove the breadcrumb
+                var $container = $(pathContainer);
+                $container.empty();
+                
+                // ... and here we go!
+                var $tree = $('<ul class="cp-tree">');
+                $container.append($tree);
+
+                var $selection = false;
+                var selectedPath = false;
+
+                var createTreeLine = function ($parent, item, parentPath) {
+                    var isOpen = false;
+                    
+                    var $line = $('<li class="cp-tree-line">');
+                    $parent.append($line);
+
+                    var $lineContainer = $('<span class="cp-tree-line-container">');
+                    $line.append($lineContainer);
+
+                    var itemPath = parentPath.slice();
+                    if (Array.isArray(item.pathName)) {
+                        Array.prototype.push.apply(itemPath, item.pathName);
+                    } else {
+                        itemPath.push(item.pathName);
+                    }
+
+                    if (item.children.length > 0) {
+                        var $carret = $('<i class="fa fa-angle-right cp-tree-carret"></i>');
+                        $lineContainer.append($carret);
+
+                        // Open / Close the branch
+                        $carret.click(function() {
+                            isOpen = !isOpen;
+                            $carret.removeClass(isOpen ? 'fa-angle-right' : 'fa-angle-down');
+                            $carret.addClass(isOpen ? 'fa-angle-down' : 'fa-angle-right');
+                            if (isOpen) {
+                                $line.find('> ul').show();
+                            } else {
+                                $line.find('> ul').hide();
+                            }
+                        });
+
+                    } else {
+                        $lineContainer.addClass('cp-tree-leaf');
+                    }
+
+                    var $selectable = $('<span class="cp-tree-line-selectable">');
+                    $lineContainer.append($selectable);
+
+                    var $icon = $('<i class="cptools cp-tree-icon"></i>');
+                    $icon.addClass(item.isShared ? 'cptools-shared-folder' : 'cptools-folder');
+                    $selectable.append($icon);
+                    var $folderName = $('<span>').text(item.name);
+                    $selectable.append($folderName);
+                    
+                    // Create the children nodes
+                    if (item.children.length > 0) {
+                        var $ul = $('<ul>').hide();
+                        $line.append($ul);
+                        item.children.forEach(function (child) {
+                            createTreeLine($ul, child, itemPath);
+                        });
+                    }
+
+                    $selectable.click(function() {
+                        $selectable.addClass('cp-tree-selected');
+                        if ($selection) {
+                            $selection.removeClass('cp-tree-selected');
+                        }
+                        $selection = $selectable;
+                        selectedPath = itemPath;
+                        console.log(itemPath.join('/'));
+                    });
+                }
+
+                drives.forEach(function (item) {
+                    createTreeLine($tree, item, []);
+                })
+            });
+
             UI.confirm(content, function (yes) {
                 if (!yes) { return void cb(); }