Improve UI for offline teams

package.json

@@ -39,6 +39,7 @@
     "dev": "DEV=1 node server.js",
     "fresh": "FRESH=1 node server.js",
     "offline": "FRESH=1 OFFLINE=1 node server.js",
+    "offlinedev": "DEV=1 OFFLINE=1 node server.js",
     "package": "PACKAGE=1 node server.js",
     "lint": "jshint --config .jshintrc --exclude-path .jshintignore . && ./node_modules/lesshint/bin/lesshint -c ./.lesshintrc ./customize.dist/src/less2/",
     "lint:js": "jshint --config .jshintrc --exclude-path .jshintignore .",

www/common/outer/team.js

@@ -1041,6 +1041,7 @@ define([
         if (!teamId) { return void cb({error: 'EINVAL'}); }
         var team = ctx.teams[teamId];
         if (!team) { return void cb ({error: 'ENOENT'}); }
+        if (team.offline) { return void cb({error: 'OFFLINE'}); }
         if (!team.roster) { return void cb({error: 'NO_ROSTER'}); }
         team.roster.metadata(data.metadata, function (err) {
             if (err) { return void cb({error: err}); }

www/teams/app-team.less

@@ -24,6 +24,21 @@
 
     .export_main();
 
+    &:not(.cp-app-team-offline) {
+        .cp-offline {
+            display: none !important;
+        }
+    }
+    &.cp-app-team-offline {
+        .cp-online {
+            display: none !important;
+        }
+        .cp-online-alt {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+    }
+
     #cp-sidebarlayout-container {
         @media screen and (max-width: 900px) {
             .cp-app-drive-toolbar-leftside {

www/teams/inner.js

@@ -171,12 +171,15 @@ define([
             'cp-team-drive'
         ],
         'members': [
+            'cp-team-offline',
             'cp-team-roster'
         ],
         'chat': [
+            'cp-team-offline',
             'cp-team-chat'
         ],
         'admin': [
+            'cp-team-offline',
             'cp-team-edpublic',
             'cp-team-name',
             'cp-team-avatar',
@@ -285,10 +288,12 @@ define([
     var buildUI = APP.buildUI = function (common, team, teamAdmin) {
         var $rightside = APP.$rightside;
         $rightside.empty();
+        var added = [];
         var addItem = function (cssClass) {
             var item = cssClass.slice(8);
-            if (typeof (create[item]) === "function") {
+            if (typeof (create[item]) === "function" && added.indexOf(item) < 0) {
                 $rightside.append(create[item](common));
+                added.push(item);
             }
         };
         var categories = team ? teamCategories : mainCategories;
@@ -393,6 +398,14 @@ define([
             var t = Messages._getKey('team_title', [Util.fixHTML(team.metadata.name)]);
             sframeChan.query('Q_SET_TEAM', id, function (err) {
                 if (err) { return void console.error(err); }
+                // Set editable
+                var metadataMgr = common.getMetadataMgr();
+                var privateData = metadataMgr.getPrivateData();
+                if (team.offline) {
+                    APP.$body.addClass('cp-app-team-offline');
+                } else if (!privateData.offline) {
+                    APP.$body.removeClass('cp-app-team-offline');
+                }
                 // Change title
                 $('.cp-toolbar-title-value').text(t);
                 sframeChan.event('EV_SET_TAB_TITLE', t);
@@ -534,9 +547,10 @@ define([
                 name: name
             }, function (obj) {
                 if (obj && obj.error) {
-                    if (obj.error === "OFFLINE") { return UI.alert(Messages.driveOfflineError); }
-                    console.error(obj.error);
                     $spinner.hide();
+                    state = false;
+                    if (obj.error === "OFFLINE") { return UI.alert(Messages.disconnected); } // XXX
+                    console.error(obj.error);
                     return void UI.warn(Messages.error);
                 }
                 // Redraw the create block
@@ -700,7 +714,7 @@ define([
         // Status
         var status = h('span.cp-team-member-status'+(data.online ? '.online' : ''));
         // Actions
-        var actions = h('span.cp-team-member-actions');
+        var actions = h('span.cp-online.cp-team-member-actions');
         var $actions = $(actions);
         var isMe = me && me.curvePublic === data.curvePublic;
         var myRole = me ? (ROLES.indexOf(me.role) || 1) : -1;
@@ -866,7 +880,7 @@ define([
         // If you're an admin or an owner, you can invite your friends to the team
         // TODO and acquaintances later?
         if (me && (me.role === 'ADMIN' || me.role === 'OWNER')) {
-            var invite = h('button.btn.btn-primary', Messages.team_inviteButton);
+            var invite = h('button.cp-online.btn.btn-primary', Messages.team_inviteButton);
             var inviteFriends = common.getFriends();
             Object.keys(inviteFriends).forEach(function (curve) {
                 // Keep only friends that are not already in the team and that you can contact
@@ -888,7 +902,7 @@ define([
         }
 
         if (me && (me.role !== 'OWNER')) {
-            var leave = h('button.btn.btn-danger', Messages.team_leaveButton);
+            var leave = h('button.cp-online.btn.btn-danger', Messages.team_leaveButton);
             $(leave).click(function () {
                 UI.confirm(Messages.team_leaveConfirm, function (yes) {
                     if (!yes) { return; }
@@ -937,6 +951,11 @@ define([
         cb(content);
     });
 
+    makeBlock('offline', function (common, cb, $div) {
+        $div.addClass('cp-offline');
+        cb(h('div.alert.alert-danger', Messages.disconnected));
+    });
+
     makeBlock('chat', function (common, cb) {
         var container = h('div#cp-app-contacts-container.cp-app-contacts-inapp');
         var content = [container];
@@ -985,7 +1004,7 @@ define([
             'type': 'text',
             'id': 'cp-settings-displayname',
             'placeholder': Messages.anonymous}).appendTo($inputBlock);
-        var $save = $('<button>', {'class': 'btn btn-primary'}).text(Messages.settings_save).appendTo($inputBlock);
+        var $save = $('<button>', {'class': 'cp-online-alt btn btn-primary'}).text(Messages.settings_save).appendTo($inputBlock);
 
         var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved}).hide();
         var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}).hide();
@@ -998,12 +1017,20 @@ define([
                 teamId: APP.team
             }, function (obj) {
                 if (obj && obj.error) { return void UI.warn(Messages.error); }
+                var oldName = obj.name;
                 obj.name = newName;
                 APP.module.execCommand('SET_TEAM_METADATA', {
                     teamId: APP.team,
                     metadata: obj
-                }, function () {
+                }, function (res) {
                     $spinner.hide();
+                    if (res && res.error) {
+                        $input.val(oldName);
+                        if (res.error === 'OFFLINE') {
+                            return void UI.warn(Messages.disconnected);
+                        }
+                        return void UI.warn(Messages.error);
+                    }
                     $ok.show();
                 });
             });
@@ -1051,6 +1078,7 @@ define([
             });
         });
         var $upButton = common.createButton('upload', false, data);
+        $upButton.addClass('cp-online');
         $upButton.removeProp('title');
         $upButton.text(Messages.profile_upload);
         $upButton.prepend($('<span>', {'class': 'fa fa-upload'}));
@@ -1126,7 +1154,8 @@ define([
         cb(button);
     }, true);
 
-    makeBlock('delete', function (common, cb) {
+    makeBlock('delete', function (common, cb, $div) {
+        $div.addClass('cp-online');
         var deleteTeam = h('button.btn.btn-danger', Messages.team_deleteButton);
         var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved}).hide();
         var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}).hide();
@@ -1463,7 +1492,7 @@ define([
                 delete mainCategories.create;
             }
 
-            $('body').css('display', '');
+            var $body = APP.$body = $('body').css('display', '');
             loadMain(common);
 
             metadataMgr.onChange(function () {
@@ -1490,6 +1519,7 @@ define([
             var onDisconnect = function (teamId) {
                 if (APP.team && teamId && APP.team !== teamId) { return; }
                 setEditable(false);
+                $body.addClass('cp-app-team-offline');
                 if (APP.team && driveAPP.refresh) { driveAPP.refresh(); }
                 toolbar.failed();
                 UIElements.disconnectAlert();
@@ -1497,6 +1527,7 @@ define([
             var onReconnect = function (teamId) {
                 if (APP.team && teamId && APP.team !== teamId) { return; }
                 setEditable(true);
+                $body.removeClass('cp-app-team-offline');
                 if (APP.team && driveAPP.refresh) { driveAPP.refresh(); }
                 toolbar.reconnecting();
                 UIElements.reconnectAlert();