Team APP UI

www/common/common-ui-elements.js

@@ -1883,6 +1883,7 @@ define([
         If changes are made to your drive in the interim, they will trigger an
         update.
     */
+    // NOTE: The callback must stay SYNCHRONOUS
     var LIMIT_REFRESH_RATE = 30000; // milliseconds
     UIElements.createUsageBar = function (common, cb) {
         if (AppConfig.hideUsageBar) { return cb('USAGE_BAR_HIDDEN'); }

www/common/drive-ui.js

@@ -535,7 +535,6 @@ define([
         // manager
         config.loggedIn = APP.loggedIn;
         config.sframeChan = sframeChan;
-        // XXX Teams. provide team id
         var manager = ProxyManager.createInner(files, sframeChan, edPublic, config);
 
         var LS = makeLS(teamId);
@@ -585,7 +584,6 @@ define([
 
         var virtualCategories = [SEARCH, RECENT, OWNED, TAGS];
 
-        // XXX Teams. not logged in should not be allowe din the team APP
         if (!APP.loggedIn) {
             $tree.hide();
             if (APP.newSharedFolder) {
@@ -4318,7 +4316,6 @@ define([
         refresh();
         UI.removeLoadingScreen();
 
-        // XXX Teams. should provide a team ID (or null for main drive)
         sframeChan.query('Q_DRIVE_GETDELETED', null, function (err, data) {
             var ids = manager.findChannels(data);
             var titles = [];
@@ -4331,6 +4328,10 @@ define([
             if (!titles.length) { return; }
             UI.log(Messages._getKey('fm_deletedPads', [titles.join(', ')]));
         });
+
+        return {
+            refresh: refresh
+        };
     };
 
     return {

www/common/outer/team.js

@@ -145,11 +145,10 @@ define([
         }));
 
         Object.keys(teams).forEach(function (id) {
-            // XXX waitFor?
             // only if we want to make sure teams are loaded before remore the loading screen
-            openChannel(ctx, teams[id], id, function () {
+            openChannel(ctx, teams[id], id, waitFor(function () {
                 console.error('team '+id+' ready');
-            });
+            }));
         });
 
         team.getTeam = function (id) {
@@ -169,6 +168,9 @@ define([
                 // Only the team app will subscribe to events?
                 return void subscribe(ctx, data, clientId, cb);
             }
+            if (cmd === 'LIST_TEAMS') {
+                return void cb(ctx.teams);
+            }
         };
 
         return team;

www/common/sframe-common.js

@@ -692,9 +692,10 @@ define([
             });
 
             ctx.sframeChan.ready();
-            cb(funcs);
 
             Mailbox.create(funcs);
+
+            cb(funcs);
         });
     } };
 });

www/drive/inner.js

@@ -217,7 +217,7 @@ define([
             if (!proxy.drive || typeof(proxy.drive) !== 'object') {
                 throw new Error("Corrupted drive");
             }
-            DriveUI.create(common, {
+            var drive = DriveUI.create(common, {
                 proxy: proxy,
                 folders: folders,
                 updateObject: updateObject,
@@ -228,13 +228,13 @@ define([
 
             var onDisconnect = function (noAlert) {
                 setEditable(false);
-                if (APP.refresh) { APP.refresh(); }
+                if (drive.refresh) { drive.refresh(); }
                 APP.toolbar.failed();
                 if (!noAlert) { UI.alert(Messages.common_connectionLost, undefined, true); }
             };
             var onReconnect = function (info) {
                 setEditable(true);
-                if (APP.refresh) { APP.refresh(); }
+                if (drive.refresh) { drive.refresh(); }
                 APP.toolbar.reconnecting(info.myId);
                 UI.findOKButton().click();
             };

www/team/app-team.less

@@ -1,5 +1,6 @@
 @import (reference) '../../customize/src/less2/include/framework.less';
 @import (reference) '../../customize/src/less2/include/drive.less';
+@import (reference) '../../customize/src/less2/include/sidebar-layout.less';
 
 &.cp-app-team {
     .framework_min_main(
@@ -9,5 +10,21 @@
     );
 
     .drive_main();
+    .sidebar-layout_main();
+
+    .cp-app-team-container {
+        flex: 1;
+        display: flex;
+        width: 100%;
+        flex-flow: row;
+        .cp-app-team-drive {
+            flex: 1;
+            display: flex;
+            &.hidden {
+                display: none;
+            }
+        }
+        
+    }
 }
 

www/team/inner.html

@@ -10,14 +10,19 @@
     </style>
 </head>
 <body class="cp-app-team cp-body-drive">
-  <div id="cp-toolbar" class="cp-toolbar-container"></div>
+    <div id="cp-toolbar" class="cp-toolbar-container"></div>
-    <div class="cp-app-drive-container" tabindex="0">
+    <div id="cp-sidebarlayout-container" class="cp-app-team-container">
-        <div id="cp-app-drive-tree">
+<!--        <div class="cp-app-team-drive">
-        </div>
+            <div class="cp-app-drive-container" tabindex="0">
-        <div id="cp-app-drive-content-container">
+                <div id="cp-app-drive-tree">
-            <div id="cp-app-drive-toolbar"></div>
+                </div>
-            <div id="cp-app-drive-content" tabindex="2"></div>
+                <div id="cp-app-drive-content-container">
+                    <div id="cp-app-drive-toolbar"></div>
+                    <div id="cp-app-drive-content" tabindex="2"></div>
+                </div>
+            </div>
         </div>
+-->
     </div>
 </body>
 </html>

www/team/inner.js

@@ -28,6 +28,7 @@ define([
     Messages)
 {
     var APP = {};
+    var driveAPP = {};
     var SHARED_FOLDER_NAME = Messages.fm_sharedFolderName;
 
     var copyObjectValue = function (objRef, objToCopy) {
@@ -58,26 +59,155 @@ define([
     var updateObject = function (sframeChan, obj, cb) {
         sframeChan.query('Q_DRIVE_GETOBJECT', null, function (err, newObj) {
             copyObjectValue(obj, newObj);
-            if (!APP.loggedIn && APP.newSharedFolder) {
+            if (!driveAPP.loggedIn && driveAPP.newSharedFolder) {
                 obj.drive.sharedFolders = obj.drive.sharedFolders || {};
-                obj.drive.sharedFolders[APP.newSharedFolder] = {};
+                obj.drive.sharedFolders[driveAPP.newSharedFolder] = {};
             }
             cb();
         });
     };
 
-    var history = {
-        isHistoryMode: false,
-    };
-
     var setEditable = DriveUI.setEditable;
 
-    var setHistory = function (bool, update) {
+    var mainCategories = {
-        history.isHistoryMode = bool;
+        'general': [
-        setEditable(!bool);
+            'cp-team-info',
-        if (!bool && update) {
+        ],
-            history.onLeaveHistory();
+        'list': [
+            'cp-team-list',
+        ],
+        'create': [
+            'cp-team-create',
+        ],
+    };
+    var teamCategories = {
+        'back': [
+        ],
+        'drive': [
+        ],
+        'members': [
+        ],
+    };
+
+    var create = {};
+
+    var makeBlock = function (key, getter) {
+        create[key] = function (common) {
+            var $div = $('<div>', {'class': 'cp-team-' + key + ' cp-sidebarlayout-element'});
+            getter(common, function (content) {
+                $div.append(content);
+            });
+            return $div;
+        };
+    };
+
+    makeBlock('info', function (common, cb) {
+        cb([
+            h('h3', 'Team application'), // XXX
+            h('p', 'From here you can ...') // XXX
+        ]);
+    });
+
+    makeBlock('list', function (common, cb) {
+        var content = [];
+        var sframeChan = common.getSframeChannel();
+        APP.module.execCommand('LIST_TEAMS', null, function (obj) {
+            
+        });
+    });
+
+    // Sidebar layout
+
+    var hideCategories = function () {
+        APP.$rightside.find('> div').hide();
+    };
+    var showCategories = function (cat) {
+        hideCategories();
+        cat.forEach(function (c) {
+            APP.$rightside.find('.'+c).show();
+        });
+    };
+    var createLeftside = function (team) {
+        APP.$leftside.empty();
+        var $categories = $('<div>', {'class': 'cp-sidebarlayout-categories'})
+                            .appendTo(APP.$leftside);
+
+        var categories = team ? teamCategories : mainCategories;
+        var active = team ? 'drive' : 'general';
+
+        Object.keys(categories).forEach(function (key) {
+            var $category = $('<div>', {'class': 'cp-sidebarlayout-category'}).appendTo($categories);
+            if (key === 'general') { $category.append($('<span>', {'class': 'fa fa-info-circle'})); }
+            if (key === 'list') { $category.append($('<span>', {'class': 'fa fa-list'})); }
+            if (key === 'create') { $category.append($('<span>', {'class': 'fa fa-plus-circle'})); }
+            if (key === 'back') { $category.append($('<span>', {'class': 'fa fa-arrow-left'})); }
+            if (key === 'members') { $category.append($('<span>', {'class': 'fa fa-users'})); }
+            if (key === 'drive') { $category.append($('<span>', {'class': 'fa fa-hdd-o'})); }
+
+            if (key === active) {
+                $category.addClass('cp-leftside-active');
+            }
+
+            $category.click(function () {
+                if (!Array.isArray(categories[key]) && categories[key].onClick) {
+                    categories[key].onClick();
+                    return;
+                }
+                $categories.find('.cp-leftside-active').removeClass('cp-leftside-active');
+                $category.addClass('cp-leftside-active');
+                showCategories(categories[key]);
+            });
+
+            $category.append(Messages['team_cat_'+key] || key); // XXX
+        });
+        showCategories(categories[active]);
+    };
+
+    var buildUI = function (common, team) {
+        var $rightside = APP.$rightside;
+        $rightside.empty();
+        var addItem = function (cssClass) {
+            var item = cssClass.slice(8);
+            if (typeof (create[item]) === "function") {
+                $rightside.append(create[item](common));
+            }
+        };
+        var categories = team ? teamCategories : mainCategories;
+        for (var cat in categories) {
+            if (!Array.isArray(categories[cat])) { continue; }
+            categories[cat].forEach(addItem);
         }
+
+        createLeftside(team);
+    };
+
+    // Team APP
+
+    var loadTeam = function (common) {
+        var sframeChan = common.getSframeChannel();
+        nThen(function (waitFor) {
+            updateObject(sframeChan, proxy, waitFor(function () {
+                updateSharedFolders(sframeChan, null, proxy.drive, folders, waitFor());
+            }));
+        }).nThen(function (waitFor) {
+            if (!proxy.drive || typeof(proxy.drive) !== 'object') {
+                throw new Error("Corrupted drive");
+            }
+            var drive = DriveUI.create(common, {
+                proxy: proxy,
+                folders: folders,
+                updateObject: updateObject,
+                updateSharedFolders: updateSharedFolders,
+                APP: driveAPP
+            });
+            driveAPP.refresh = drive.refresh;
+        });
+        buildUI(common, true);
+    };
+
+    var loadMain = function (common) {
+        buildUI(common);
+        UI.removeLoadingScreen();
     };
 
     var main = function () {
@@ -91,151 +221,86 @@ define([
                 UI.addLoadingScreen();
             }));
             window.cryptpadStore.getAll(waitFor(function (val) {
-                APP.store = JSON.parse(JSON.stringify(val));
+                driveAPP.store = JSON.parse(JSON.stringify(val));
             }));
             SFCommon.create(waitFor(function (c) { common = c; }));
         }).nThen(function (waitFor) {
-            var privReady = Util.once(waitFor());
+            APP.$container = $('#cp-sidebarlayout-container');
-            var metadataMgr = common.getMetadataMgr();
+            APP.$leftside = $('<div>', {id: 'cp-sidebarlayout-leftside'}).appendTo(APP.$container);
-            if (JSON.stringify(metadataMgr.getPrivateData()) !== '{}') {
+            APP.$rightside = $('<div>', {id: 'cp-sidebarlayout-rightside'}).appendTo(APP.$container);
-                privReady();
+            sFrameChan = common.getSframeChannel();
-                return;
+            sFrameChan.onReady(waitFor());
-            }
-            metadataMgr.onChange(function () {
-                if (typeof(metadataMgr.getPrivateData().readOnly) === 'boolean') {
-                    readOnly = APP.readOnly = metadataMgr.getPrivateData().readOnly;
-                    privReady();
-                }
-            });
         }).nThen(function (waitFor) {
-            APP.loggedIn = common.isLoggedIn();
+            var sframeChan = common.getSframeChannel();
-            if (!APP.loggedIn) { Feedback.send('ANONYMOUS_DRIVE'); }
+            var metadataMgr = common.getMetadataMgr();
-            APP.$body = $('body');
+            var privateData = metadataMgr.getPrivateData();
-            APP.$bar = $('#cp-toolbar');
+            readOnly = driveAPP.readOnly = metadataMgr.getPrivateData().readOnly;
 
-            common.setTabTitle(Messages.type.drive);
+            driveAPP.loggedIn = common.isLoggedIn();
+            if (!driveAPP.loggedIn) { throw new Error('NOT_LOGGED_IN'); }
 
+            common.setTabTitle('TEAMS'); // XXX
+
+            // Drive data
             var metadataMgr = common.getMetadataMgr();
             var privateData = metadataMgr.getPrivateData();
             if (privateData.newSharedFolder) {
-                APP.newSharedFolder = privateData.newSharedFolder;
+                driveAPP.newSharedFolder = privateData.newSharedFolder;
             }
+            driveAPP.disableSF = !privateData.enableSF && AppConfig.disableSharedFolders;
 
-            var sframeChan = common.getSframeChannel();
+            // Toolbar
-            updateObject(sframeChan, proxy, waitFor(function () {
+            var $bar = $('#cp-toolbar');
-                updateSharedFolders(sframeChan, null, proxy.drive, folders, waitFor());
-            }));
-        }).nThen(function () {
-            var sframeChan = common.getSframeChannel();
-            var metadataMgr = common.getMetadataMgr();
-            var privateData = metadataMgr.getPrivateData();
-
-            APP.disableSF = !privateData.enableSF && AppConfig.disableSharedFolders;
-            if (APP.newSharedFolder && !APP.loggedIn) {
-                readOnly = APP.readOnly = true;
-                var data = folders[APP.newSharedFolder];
-                if (data) {
-                    sframeChan.query('Q_SET_PAD_TITLE_IN_DRIVE', {
-                        title: data.metadata && data.metadata.title,
-                    }, function () {});
-                }
-            }
-
-            // ANON_SHARED_FOLDER
-            var pageTitle = (!APP.loggedIn && APP.newSharedFolder) ? SHARED_FOLDER_NAME : Messages.type.drive;
-
             var configTb = {
                 displayed: ['useradmin', 'pageTitle', 'newpad', 'limit', 'notifications'],
-                pageTitle: pageTitle,
+                pageTitle: 'TEAMS', // XXX
                 metadataMgr: metadataMgr,
                 readOnly: privateData.readOnly,
                 sfCommon: common,
-                $container: APP.$bar
+                $container: $bar
             };
-            var toolbar = APP.toolbar = Toolbar.create(configTb);
+            var toolbar = Toolbar.create(configTb);
-
+            toolbar.$rightside.hide(); // hide the bottom part of the toolbar
-            var $rightside = toolbar.$rightside;
+            // Update the name in the user menu
-            $rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
+            driveAPP.$displayName = $bar.find('.' + Toolbar.constants.username);
-            APP.$displayName = APP.$bar.find('.' + Toolbar.constants.username);
+            metadataMgr.onChange(function () {
+                var name = metadataMgr.getUserData().name || Messages.anonymous;
+                driveAPP.$displayName.text(name);
+            });
 
             /* add the usage */
-            if (APP.loggedIn) {
+            // XXX Teams
+            if (false) {
+                // Synchronous callback...
                 common.createUsageBar(function (err, $limitContainer) {
                     if (err) { return void DriveUI.logError(err); }
-                    APP.$limit = $limitContainer;
+                    driveAPP.$limit = $limitContainer;
                 }, true);
             }
 
-            /* add a history button */
+            // Load the Team module
-            APP.histConfig = {
+            APP.module = common.makeUniversal('team', {
-                onLocal: function () {
+                onEvent: onEvent
-                    UI.addLoadingScreen({ loadingText: Messages.fm_restoreDrive });
-                    var data = {};
-                    if (history.sfId) {
-                        copyObjectValue(folders[history.sfId], history.currentObj);
-                        data.sfId = history.sfId;
-                        data.drive = history.currentObj;
-                    } else {
-                        proxy.drive = history.currentObj.drive;
-                        data.drive = history.currentObj.drive;
-                    }
-                    sframeChan.query("Q_DRIVE_RESTORE", data, function () {
-                        UI.removeLoadingScreen();
-                    }, {
-                        timeout: 5 * 60 * 1000
-                    });
-                },
-                onOpen: function () {},
-                onRemote: function () {},
-                setHistory: setHistory,
-                applyVal: function (val) {
-                    var obj = JSON.parse(val || '{}');
-                    history.currentObj = obj;
-                    history.onEnterHistory(obj);
-                },
-                $toolbar: APP.$bar,
-            };
-
-            // Add a "Burn this drive" button
-            if (!APP.loggedIn) {
-                APP.$burnThisDrive = common.createButton(null, true).click(function () {
-                    UI.confirm(Messages.fm_burnThisDrive, function (yes) {
-                        if (!yes) { return; }
-                        common.getSframeChannel().event('EV_BURN_ANON_DRIVE');
-                    }, null, true);
-                }).attr('title', Messages.fm_burnThisDriveButton)
-                  .removeClass('fa-question')
-                  .addClass('fa-ban');
-            }
-
-            metadataMgr.onChange(function () {
-                var name = metadataMgr.getUserData().name || Messages.anonymous;
-                APP.$displayName.text(name);
             });
 
             $('body').css('display', '');
-            if (!proxy.drive || typeof(proxy.drive) !== 'object') {
+            if (privateData.teamId) {
-                throw new Error("Corrupted drive");
+                loadTeam(common, privateData.teamId);
+            } else {
+                loadMain(common);
             }
-            DriveUI.create(common, {
+
-                proxy: proxy,
-                folders: folders,
-                updateObject: updateObject,
-                updateSharedFolders: updateSharedFolders,
-                history: history,
-                APP: APP
-            });
 
             var onDisconnect = function (noAlert) {
                 setEditable(false);
-                if (APP.refresh) { APP.refresh(); }
+                if (driveAPP.refresh) { driveAPP.refresh(); }
-                APP.toolbar.failed();
+                toolbar.failed();
                 if (!noAlert) { UI.alert(Messages.common_connectionLost, undefined, true); }
             };
             var onReconnect = function (info) {
                 setEditable(true);
-                if (APP.refresh) { APP.refresh(); }
+                if (driveAPP.refresh) { driveAPP.refresh(); }
-                APP.toolbar.reconnecting(info.myId);
+                toolbar.reconnecting(info.myId);
                 UI.findOKButton().click();
             };