Update UI in poll and remove old code

customize.dist/pages.js

@@ -570,15 +570,12 @@ define([
     };
 
     var appToolbar = function () {
-        return h('div#toolbar.cryptpad-toolbar');
-    };
-    var appToolbar3 = function () {
         return h('div#cp-toolbar.cp-toolbar-container');
     };
 
     Pages['/whiteboard/'] = Pages['/whiteboard/index.html'] = function () {
         return [
-            appToolbar3(),
+            appToolbar(),
             h('div#cp-app-whiteboard-canvas-area', h('canvas#cp-app-whiteboard-canvas', {
                 width: 600,
                 height: 600
@@ -638,7 +635,7 @@ define([
 
     Pages['/poll/'] = Pages['/poll/index.html'] = function () {
         return [
-            appToolbar3(),
+            appToolbar(),
             h('div#cp-app-poll-content', [
                 h('div#cp-app-poll-form', [
                     h('div#cp-app-poll-help', [
@@ -647,18 +644,6 @@ define([
                         h('p', Msg.poll_p_save),
                         h('p', Msg.poll_p_encryption)
                     ]),
-                    h('div.cp-app-poll-upper', [
-                        h('button#cp-app-poll-action-publish.btn.btn-success', {
-                            style: { display: 'none' }
-                        }, Msg.poll_publish_button),
-                        h('button#cp-app-poll-action-admin.btn.btn-primary', {
-                            style: { display: 'none' },
-                            title: Msg.poll_admin_button
-                        }, Msg.poll_admin_button),
-                        h('button#cp-app-poll-action-help.btn.btn-secondary', {
-                            title: Msg.poll_show_help_button
-                        }, Msg.poll_show_help_button)
-                    ]),
                     h('div.cp-app-poll-realtime', [
                         h('br'),
                         h('center', [

customize.dist/translations/messages.fr.js

@@ -256,6 +256,10 @@ define(function () {
     out.poll_show_help_button = "Afficher l'aide";
     out.poll_hide_help_button = "Cacher l'aide";
 
+    out.poll_bookmark_col = "Marquer cette colonne comme favorite pour qu'elle soit toujours déverouillée et affichée en première position.";
+    out.poll_bookmarked_col = "Voici votre colonne favorite; elle sera toujours dévérouillée et affichée en première position.";
+    out.poll_total = 'TOTAL';
+
     // Canvas
     out.canvas_clear = "Nettoyer";
     out.canvas_delete = "Supprimer la sélection";

customize.dist/translations/messages.js

@@ -258,6 +258,10 @@ define(function () {
     out.poll_show_help_button = "Show help";
     out.poll_hide_help_button = "Hide help";
 
+    out.poll_bookmark_col = 'Bookmark this column so that it is always unlocked and displayed at the beginning for you';
+    out.poll_bookmarked_col = 'This is your bookmarked column. It will always be unlocked and displayed at the beginning for you.';
+    out.poll_total = 'TOTAL';
+
     // Canvas
     out.canvas_clear = "Clear";
     out.canvas_delete = "Delete selection";

www/common/sframe-common-outer.js

@@ -62,6 +62,7 @@ define([
                 Cryptpad.ready(waitFor());
             }));
         }).nThen(function (waitFor) {
+            $('#sbox-iframe').focus();
 
             sframeChan.on('EV_CACHE_PUT', function (x) {
                 Object.keys(x).forEach(function (k) {

www/poll/app-poll.less

@@ -4,6 +4,7 @@
 @import (once) '../../customize/src/less2/include/fileupload.less';
 @import (once) '../../customize/src/less2/include/alertify.less';
 @import (once) '../../customize/src/less2/include/tokenfield.less';
+@import (once) '../../customize/src/less2/include/tools.less';
 
 .toolbar_main();
 .fileupload_main();
@@ -93,13 +94,6 @@ table#cp-app-poll-table {
     border-radius: 0;
     border: 0;
 }
-#cp-app-poll-publish {
-    display: none;
-}
-#cp-app-poll-action-publish, #cp-app-poll-action-admin {
-    margin-top: 15px;
-    margin-bottom: 15px;
-}
 #cp-app-poll-create-user {
     display: inline-flex;
     height: 24px;
@@ -128,29 +122,24 @@ table#cp-app-poll-table {
     min-width: 80%;
     width: 80%;
     min-height: 7em;
-    font-size: 20px;
+    font: @colortheme_app-font;
-    font-weight: bold;
+    //font-size: 20px;
+    /*font-weight: bold;*/
     border: 1px solid black;
 
 }
 #cp-app-poll-description[disabled] {
     resize: none;
     color: #000;
-    border: 1px solid #444;
+    border: 1px solid transparent;
+    background-color: #eeeeee;
+    font: @colortheme_app-font;
 }
 
 #cp-app-poll-help {
     width: 80%;
     margin: auto;
 }
-div.cp-app-poll-upper {
-    width: 80%;
-    margin: auto;
-
-    & > * {
-        margin-right: 1em;
-    }
-}
 
 // from cryptpad.less
 
@@ -169,6 +158,7 @@ tbody {
     }
 
     td {
+        .tools_unselectable();
         border-right: 1px solid @poll-border-color;
         padding: 12px;
         padding-top: 0px;
@@ -274,7 +264,7 @@ div.cp-app-poll-realtime {
                     margin: 0px;
                     padding: 0px;
                     height: 100%;
-                    min-width: 150px;
+                    min-width: 100px;
 
                     div.cp-app-poll-table-checkbox-contain {
                         display: inline-block;
@@ -387,6 +377,8 @@ div.cp-app-poll-realtime {
                 }
                 input {
                     &[type="text"] {
+                        overflow: hidden;
+                        text-overflow: ellipsis;
                         break-after: always;
                         width: ~"calc(100% - 2px)"; // borders...
                         box-sizing: border-box;

www/poll/inner.js

@@ -2,7 +2,6 @@ define([
     'jquery',
     '/bower_components/textpatcher/TextPatcher.js',
     '/common/toolbar3.js',
-    'json.sortify',
     '/common/cryptpad-common.js',
     '/common/common-util.js',
     '/common/cryptget.js',
@@ -23,7 +22,6 @@ define([
     $,
     TextPatcher,
     Toolbar,
-    JSONSortify,
     Cryptpad,
     Util,
     Cryptget,
@@ -51,36 +49,16 @@ define([
 
     var debug = $.noop; //console.log;
 
-    var stringify = function (obj) {
-        return JSONSortify(obj);
-    };
-
-    var onConnectError = function () {
-        Cryptpad.errorLoadingScreen(Messages.websocketError);
-    };
-
     var HIDE_INTRODUCTION_TEXT = "hide-text";
 
     var metadataMgr;
     var Title;
-    var defaultName;
     var common;
-    var readOnly;
-
-
-
-
-
-
-
-
 
     var copyObject = function (obj) {
         return JSON.parse(JSON.stringify(obj));
     };
 
-
-
     /*
         Make sure that the realtime data structure has all the required fields
     */
@@ -102,8 +80,9 @@ define([
         proxy.type = 'poll';
     };
 
-
+    /*
-
+        Set the user id (user column) in the pad attributes
+    */
     var setUserId = function (id, cb) {
         cb  =cb || $.noop;
         APP.userid = id;
@@ -128,8 +107,11 @@ define([
     };
 
     var isUncommitted = function (id) {
-        return APP.uncommitted.content.colsOrder.indexOf(id) !== -1 ||
+        var idArr = id.split('_');
-               APP.uncommitted.content.rowsOrder.indexOf(id) !== -1;
+        var idx = idArr[0];
+        var idy = idArr[1] || idArr[0]; // if id is y-{...} (no 'x'), use idArr[0] as 'y' coordinate
+        return APP.uncommitted.content.colsOrder.indexOf(idx) !== -1 ||
+               APP.uncommitted.content.rowsOrder.indexOf(idy) !== -1;
     };
 
     var mergeUncommitted = function (proxy, uncommitted, commit) {
@@ -175,10 +157,9 @@ define([
         return newObj;
     };
 
-    var styleUncommittedColumn = function () {
+    var styleUserColumn = function () {
         var userid = APP.userid;
 
-        // TODO: move?
         // Enable input for the userid column
         $('input[disabled="disabled"][data-rt-id^="' + userid + '"]').removeAttr('disabled')
             .attr('placeholder', Messages.poll_userPlaceholder);
@@ -188,10 +169,9 @@ define([
             .addClass("cp-app-poll-table-own");
         $('.cp-app-poll-table-bookmark[data-rt-id="' + userid + '"]').css('visibility', '')
             .removeClass('fa-bookmark-o').addClass('fa-bookmark')
-            .attr('title', 'TODO: this is your bookmarked column. It will always be unlocked and displayed at the beginning for you');
+            .attr('title', Messages.poll_bookmarked_col);
-        //.addClass('fa-unlock').removeClass('fa-lock').attr('title', Messages.poll_unlocked);
+    };
-        //$('.cp-app-poll-table-remove[data-rt-id="' + userid + '"]').remove();
+    var styleUncommittedColumn = function () {
-
         var $scroll = $('#cp-app-poll-table-scroll');
         var hasScroll = $scroll.width() < $scroll[0].scrollWidth;
         APP.uncommitted.content.colsOrder.forEach(function(id) {
@@ -222,7 +202,6 @@ define([
             //$('.uncommitted input[type="text"]').attr("placeholder", Messages.poll_userPlaceholder);
         });
     };
-
     var unlockElements = function () {
         APP.unlocked.row.forEach(function (id) {
             var $input = $('input[type="text"][disabled="disabled"][data-rt-id="' + id + '"]').removeAttr('disabled');
@@ -238,7 +217,6 @@ define([
                 .removeClass('fa-lock').attr('title', Messages.poll_unlocked);
         });
     };
-
     var updateTableButtons = function () {
         var uncomColId = APP.uncommitted.content.colsOrder[0];
         var uncomRowId = APP.uncommitted.content.rowsOrder[0];
@@ -264,7 +242,6 @@ define([
             //$('#create-user').css('left', width + 30 + 'px');
         }
     };
-
     var setTablePublished = function (bool) {
         if (bool) {
             if (APP.$publish) { APP.$publish.hide(); }
@@ -276,7 +253,6 @@ define([
             $('#cp-app-poll-form').removeClass('cp-app-poll-published');
         }
     };
-
     var addCount = function () {
         var $scroll = $('#cp-app-poll-table-scroll');
         var hasScroll = $scroll.width() < $scroll[0].scrollWidth;
@@ -292,7 +268,7 @@ define([
                 'text-align': 'center',
                 'line-height': $thead.height()+'px'
             })
-            .text('TOTAL'); // TODO
+            .text(Messages.poll_total);
         var winner = {
             v: 0,
             ids: []
@@ -322,16 +298,12 @@ define([
     };
 
     var updateDisplayedTable = function () {
+        styleUserColumn();
         styleUncommittedColumn();
         unlockElements();
         updateTableButtons();
         setTablePublished(APP.proxy.published);
         addCount();
-
-        /*
-        APP.proxy.table.rowsOrder.forEach(function (rowId) {
-            $('[data-rt-id="' + rowId +'"]').val(APP.proxy.table.rows[rowId] || '');
-        });*/
     };
 
     var unlockColumn = function (id, cb) {
@@ -386,7 +358,7 @@ define([
         var colsOrder = sortColumns(displayedObj.content.colsOrder, APP.userid);
         var conf = {
             cols: colsOrder,
-            readOnly: readOnly
+            readOnly: APP.readOnly
         };
 
         common.notify();
@@ -530,7 +502,6 @@ define([
                     });
                 });
             } else if (isEdit) {
-                //hideInputs(span);
                 unlockRow(id, function () {
                     change(null, null, null, null, function() {
                         $('input[data-rt-id="' + id + '"]').focus();
@@ -546,10 +517,8 @@ define([
                     });
                 });
             } else if (isBookmark) {
-                //hideInputs(span);
                 handleBookmark(id);
             } else if (isLock && isLocked) {
-                //hideInputs(span);
                 unlockColumn(id, function () {
                     change(null, null, null, null, function() {
                         $('input[data-rt-id="' + id + '"]').focus();
@@ -581,12 +550,6 @@ define([
         if (!target) { return void debug("NO TARGET"); }
 
         var nodeName = target && target.nodeName;
-        //var shouldLock = $(target).hasClass('fa-unlock');
-
-        /*if ((!$(target).parents('#cp-app-poll-table tbody').length &&
-            $(target).hasClass('cp-app-poll-table-lock'))) {
-            //hideInputs(e);
-        }*/
 
         switch (nodeName) {
             case 'INPUT':
@@ -619,9 +582,6 @@ define([
                 handleInput(input[0]);
                 break;
             case 'SPAN':
-                /*if (shouldLock) {
-                    break;
-                }*/
                 handleSpan(target);
                 break;
             case undefined:
@@ -636,17 +596,45 @@ define([
     /*
 
     */
+    var updatePublishButton = function () {
+        if (!APP.ready || !APP.proxy || !APP.$publishButton) { return; }
+        var p = APP.proxy.published;
+        var msg = (p ? Messages.poll_admin_button : Messages.poll_publish_button);
+        APP.$publishButton.attr('title', msg);
+        if (p) {
+            APP.$publishButton.removeClass('fa-check').addClass('fa-pencil');
+            return;
+        }
+        APP.$publishButton.addClass('fa-check').removeClass('fa-pencil');
+    };
     var publish = APP.publish = function (bool) {
+        if (!APP.readOnly) {
             if (!APP.ready) { return; }
             if (APP.proxy.published !== bool) {
                 APP.proxy.published = bool;
             }
+        } else {
+            // If readOnly, always put the app in published mode
+            bool = true;
+        }
         setTablePublished(bool);
         ['textarea'].forEach(function (sel) {
             $(sel).attr('disabled', bool);
         });
+        updatePublishButton();
     };
 
+    var updateHelpButton = function () {
+        if (!APP.$helpButton) { return; }
+        var help = $('#cp-app-poll-help').is(':visible');
+        var msg = (help ? Messages.poll_hide_help_button : Messages.poll_show_help_button);
+        APP.$helpButton.attr('title', msg);
+        if (help) {
+            APP.$helpButton.addClass('cp-toolbar-button-active');
+            return;
+        }
+        APP.$helpButton.removeClass('cp-toolbar-button-active');
+    };
     var showHelp = function(help) {
         if (typeof help === 'undefined') {
             help = !$('#cp-app-poll-help').is(':visible');
@@ -656,22 +644,9 @@ define([
 
         $('#cp-app-poll-help').toggle(help);
         $('#cp-app-poll-action-help').text(msg);
+        updateHelpButton();
     };
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
     var setEditable = function (editable) {
         APP.readOnly = !editable;
 
@@ -710,7 +685,7 @@ define([
         APP.proxy.description = n;
     };
 
-    var onReady = function (info, userid, readOnly) {
+    var onReady = function (info, userid) {
         var proxy = APP.proxy;
 
         var isNew = false;
@@ -750,7 +725,7 @@ define([
         var uncommitted = APP.uncommitted = {};
         prepareProxy(proxy, copyObject(Render.Example));
         prepareProxy(uncommitted, copyObject(Render.Example));
-        if (!readOnly) {
+        if (!APP.readOnly) {
             var coluid = Render.coluid();
             if (proxy.content.colsOrder.indexOf(userid) === -1 &&
                 uncommitted.content.colsOrder.indexOf(userid) === -1) {
@@ -772,7 +747,7 @@ define([
 
         var colsOrder = sortColumns(displayedObj.content.colsOrder, userid);
 
-        var $table = APP.$table = $(Render.asHTML(displayedObj, null, colsOrder, readOnly));
+        var $table = APP.$table = $(Render.asHTML(displayedObj, null, colsOrder, APP.readOnly));
 
         var getUncommitted = function (type) {
             var ret = {}, toRemove;
@@ -830,23 +805,7 @@ define([
             });
         });
 
-        // #publish button is removed in readonly
+        if (!APP.readOnly) {
-        APP.$publish = $('#cp-app-poll-action-publish')
-            .click(function () {
-                publish(true);
-            });
-
-        APP.$admin = $('#cp-app-poll-action-admin')
-            .click(function () {
-                publish(false);
-            });
-
-        APP.$help = $('#cp-app-poll-action-help')
-            .click(function () {
-                showHelp();
-            });
-
-        if (!readOnly) {
             setUserId(userid);
         }
 
@@ -899,19 +858,18 @@ define([
         }
 
         Cryptpad.removeLoadingScreen();
+        if (isNew) {
+            common.openTemplatePicker();
+        }
     };
 
     var onDisconnect = function () {
         setEditable(false);
-        // TODO toolar.failed?
-        APP.toolbar.failed();
         Cryptpad.alert(Messages.common_connectionLost, undefined, true);
     };
 
-    var onReconnect = function (info) {
+    var onReconnect = function () {
         setEditable(true);
-        // TODO: reconnecting??
-        APP.toolbar.reconnecting(info.myId);
         Cryptpad.findOKButton().click();
     };
 
@@ -934,14 +892,14 @@ define([
             displayed: ['title', 'useradmin', 'spinner', 'share', 'userlist', 'newpad', 'limit'],
             title: Title.getTitleConfig(),
             metadataMgr: metadataMgr,
-            readOnly: readOnly,
+            readOnly: APP.readOnly,
             realtime: info.realtime,
             common: Cryptpad,
             sfCommon: common,
             $container: APP.$bar,
             $contentContainer: APP.$content
         };
-        var toolbar = APP.toolbar = Toolbar.create(configTb);
+        APP.toolbar = Toolbar.create(configTb);
 
         Title.setToolbar(APP.toolbar);
 
@@ -951,32 +909,35 @@ define([
             var md = copyObject(metadataMgr.getMetadata());
             APP.proxy.metadata = md;
         });
-        return; // TODO
-
-
-
 
         /* add a forget button */
         var forgetCb = function (err) {
             if (err) { return; }
             setEditable(false);
         };
-        var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
+        var $forgetPad = common.createButton('forget', true, {}, forgetCb);
         $rightside.append($forgetPad);
 
-        // set the hash
-        if (!readOnly) { Cryptpad.replaceHash(editHash); }
-
         /* save as template */
-        if (!Cryptpad.isTemplate(window.location.href)) {
+        if (!metadataMgr.getPrivateData().isTemplate) {
             var templateObj = {
                 rt: info.realtime,
-                Crypt: Cryptget,
+                getTitle: function () { return metadataMgr.getMetadata().title; }
-                getTitle: function () { return document.title; }
             };
-            var $templateButton = Cryptpad.createButton('template', true, templateObj);
+            var $templateButton = common.createButton('template', true, templateObj);
             $rightside.append($templateButton);
         }
+
+        var $help = common.createButton().click(function () { showHelp(); }).appendTo($rightside);
+        APP.$helpButton = $help;
+        updateHelpButton();
+
+        if (APP.readOnly) { publish(true); return; }
+        var $publish = common.createButton()
+            .removeClass('fa-question').addClass('fa-check')
+            .click(function () { publish(!APP.proxy.published); }).appendTo($rightside);
+        APP.$publishButton = $publish;
+        updatePublishButton();
     };
 
 
@@ -998,7 +959,7 @@ define([
             }
             metadataMgr.onChange(function () {
                 if (typeof(metadataMgr.getPrivateData().readOnly) === 'boolean') {
-                    readOnly = metadataMgr.getPrivateData().readOnly;
+                    APP.readOnly = metadataMgr.getPrivateData().readOnly;
                     privReady();
                 }
             });
@@ -1018,11 +979,10 @@ define([
                 logLevel: 1
             };
 
-            if (readOnly) {
+            if (APP.readOnly) {
-                $('#cp-app-poll-create-user, #cp-app-poll-create-option, #cp-app-poll-action-publish, #cp-app-poll-action-admin').remove();
+                $('#cp-app-poll-create-user, #cp-app-poll-create-option').remove();
             }
 
-            var metadataMgr;
             var rt = APP.rt = Listmap.create(listmapConfig);
             APP.proxy = rt.proxy;
 
@@ -1032,7 +992,7 @@ define([
                         if (e) { console.error(e); }
                         if (!userid) { userid = Render.coluid(); }
                         APP.userid = userid;
-                        onReady(info, userid, readOnly);
+                        onReady(info, userid);
                     });
                  })
                  .on('disconnect', onDisconnect)
@@ -1049,13 +1009,6 @@ define([
                     showHelp(false);
                 }
             });
-
-            /*Cryptpad.onError(function (info) {
-                if (info && info.type === "store") {
-                    onConnectError();
-                }
-            });*/
-            //Cryptpad.onLogout(function () { setEditable(false); });
         });
     };
     main();

www/poll/main.js

@@ -5,7 +5,7 @@ define([
     'jquery',
     '/common/requireconfig.js',
     '/common/sframe-common-outer.js',
-], function (nThen, ApiConfig, $, RequireConfig, SFCommonO, Cryptpad, Netflux) {
+], function (nThen, ApiConfig, $, RequireConfig, SFCommonO) {
     var requireConfig = RequireConfig();
 
     // Loaded in load #2

www/poll/render.js

@@ -287,7 +287,7 @@ var Renderer = function (Cryptpad) {
     var makeBookmarkElement = Render.makeBookmarkElement = function (id) {
         return ['SPAN', {
             'data-rt-id': id,
-            'title': 'TODO: Bookmark this column so that it is always unlocked and displayed at the beginning for you.',
+            'title': Cryptpad.Messages.poll_bookmark_col,
             'style': 'visibility: hidden;',
             class: 'cp-app-poll-table-bookmark fa fa-bookmark-o',
         }, []];