Merge branch 'staging' into pad2

customize.dist/pages.js

@@ -263,7 +263,7 @@ define([
                                 [ 'slide', '/slide/', Msg.main_slidePad, 'fa-file-powerpoint-o' ],
                                 [ 'poll.cp-more.cp-hidden', '/poll/', Msg.main_pollPad, 'fa-calendar' ],
                                 [ 'whiteboard.cp-more.cp-hidden', '/whiteboard/', Msg.main_whiteboardPad, 'fa-paint-brush' ],
-                                [ 'recent.cp-more.cp-hidden', '/drive/', Msg.main_recentPads, 'fa-hdd-o' ]
+                                [ 'recent.cp-more.cp-hidden', '/drive/', Msg.main_localPads, 'fa-hdd-o' ]
                             ].map(function (x) {
                                 return h('a', [
                                     { href: x[1] },
@@ -427,22 +427,29 @@ define([
                     display: 'block',
                 }
             }, [
-                h('button#clear', Msg.canvas_clear), ' ',
+                h('button#clear.btn.btn-danger', Msg.canvas_clear), ' ',
-                h('button#toggleDraw', Msg.canvas_disable),
+                h('button#toggleDraw.btn.btn-secondary', Msg.canvas_disable),
-                h('button#delete', {
+                h('button#delete.btn.btn-secondary', {
                     style: {
                         display: 'none',
                     }
-                }),
+                }, Msg.canvas_delete),
+                h('div.range-group', [
+                    h('label', {
+                        'for': 'width'
+                    }, Msg.canvas_width),
                     h('input#width', {
                         type: 'range',
                         value: "5",
                         min: "1",
                         max: "100"
                     }),
+                    h('span#width-val', '5px')
+                ]),
+                h('div.range-group', [
                     h('label', {
-                    'for': 'width'
+                        'for': 'opacity',
-                }, Msg.canvas_width),
+                    }, Msg.canvas_opacity),
                     h('input#opacity', {
                         type: 'range',
                         value: "1",
@@ -450,10 +457,13 @@ define([
                         max: "1",
                         step: "0.1"
                     }),
-                h('label', {
+                    h('span#opacity-val', '100%')
-                    'for': 'width',
+                ]),
-                }),
+                h('span.selected', [
-                h('span.selected')
+                    h('img', {
+                        title: Msg.canvas_currentBrush
+                    })
+                ])
             ]),
             setHTML(h('div#colors'), ' '),
             loadingScreen(),
@@ -480,16 +490,15 @@ define([
                         h('p', Msg.poll_p_encryption)
                     ]),
                     h('div.upper', [
-                        h('button#publish', {
+                        h('button#publish.btn.btn-success', {
                             style: { display: 'none' }
                         }, Msg.poll_publish_button),
-                        h('button#admin', {
+                        h('button#admin.btn.btn-primary', {
                             style: { display: 'none' },
                             title: Msg.poll_admin_button
                         }, Msg.poll_admin_button),
-                        h('button#help', {
+                        h('button#help.btn.btn-secondary', {
-                            title: Msg.poll_show_help_button,
+                            title: Msg.poll_show_help_button
-                            style: { display: 'none' }
                         }, Msg.poll_show_help_button)
                     ]),
                     h('div.realtime', [
@@ -504,13 +513,13 @@ define([
                         ]),
                         h('div#tableContainer', [
                             h('div#tableScroll'),
-                            h('button#create-user', {
+                            h('button#create-user.btn.btn-secondary', {
                                 title: Msg.poll_create_user
                             }, h('span.fa.fa-plus')),
-                            h('button#create-option', {
+                            h('button#create-option.btn.btn-secondary', {
                                 title: Msg.poll_create_option
                             }, h('span.fa.fa-plus')),
-                            h('button#commit', {
+                            h('button#commit.btn.btn-secondary', {
                                 title: Msg.poll_commit
                             }, h('span.fa.fa-check'))
                         ])

customize.dist/src/less/cryptpad.less

@@ -3,6 +3,7 @@
 
 @import "../less2/include/alertify.less";
 @import "../less2/include/colortheme.less";
+@import "../less2/include/modal.less";
 @import "./bar.less";
 @import "./loading.less";
 @import "./dropdown.less";
@@ -633,29 +634,29 @@ noscript {
 
 /* Upload status table */
 #uploadStatusContainer {
+    .modal_base();
     position: absolute;
     left: 10vw; right: 10vw;
-    bottom: 100px;
+    bottom: 10vh;
-    background-color: rgba(0,0,0,0.5);
+    opacity: 0.9;
-    color: white;
-    opacity: 0.7;
     box-sizing: border-box;
-    z-index:10000;
+    z-index: 10000;
     display: none;
-    font-family: @colortheme_font;
     #uploadStatus {
         width: 80vw;
-        border: 1px solid black;
-        border-collapse: collapse;
         tr:nth-child(1) {
-            background-color: #888;
+            background-color: darken(@colortheme_modal-bg, 20%);
-            border: 1px solid #999;
+            td {
-            td { text-align: center; }
+                text-align: center;
+                font-weight: bold;
+                padding: 0.25em;
+            }
         }
+        @upload_pad_h: 0.25em;
+        @upload_pad_v: 0.5em;
+
         td {
-            border-left: 1px solid #BBB;
+            padding: @upload_pad_h @upload_pad_v;
-            border-right: 1px solid #BBB;
-            padding: 0 10px;
         }
         .upProgress {
             width: 200px;
@@ -666,9 +667,10 @@ noscript {
         .progressContainer {
             position: absolute;
             width: 0px;
-            left: 5px;
+            left: @upload_pad_v;
-            top: 1px; bottom: 1px;
+            top: @upload_pad_h; bottom: @upload_pad_h;
             background-color: rgba(0,0,255,0.3);
+            z-index: -1;
         }
         .upCancel { text-align: center; }
         .fa.cancel {

customize.dist/src/less2/include/alertify.less

@@ -39,14 +39,14 @@
             box-shadow: @alertify_box-shadow;
             &, &.default {
                 // FIXME
-                background: rgba(0, 0, 0, .8);
+                background: @colortheme_notification-log;
             }
             &.error {
                 font-weight: bold;
-                background: @colortheme_cp-red;
+                background: @colortheme_notification-warn;
             }
             &.success {
-                background: rgba(0, 0, 0, .8);
+                background: @colortheme_notification-log;
             }
         }
     }
@@ -114,8 +114,7 @@
                 text-align: left;
                 padding: @alertify_padding-base;
                 background: #fff;
-                // FIXME
+                box-shadow: @alertify_box-shadow;
-                box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.084);
             }
 
             .msg {

customize.dist/src/less2/include/colortheme.less

@@ -15,6 +15,8 @@
 
 @colortheme_modal-bg: #222;
 @colortheme_modal-fg: #fff;
+@colortheme_modal-link: #eee;
+@colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%);
 @colortheme_modal-dim: rgba(0, 0, 0, 0.4);
 @colortheme_modal-padding: 12px;
 @colortheme_modal-shadow: 0 8px 32px 0 rgba(0,0,0,.4);
@@ -24,6 +26,9 @@
 @colortheme_alertify-red: #E55236;
 @colortheme_alertify-green: #77C825;
 
+@colortheme_notification-log: rgba(0, 0, 0, 0.8);
+@colortheme_notification-warn: rgba(205, 37, 50, 0.8);
+
 // Apps
 
 @colortheme_pad-bg: #1c4fa0;

customize.dist/src/less2/include/mediatag.less

@@ -0,0 +1,18 @@
+.mediatag_base() {
+    media-tag {
+        min-height: 0;
+        flex: 1;
+        display: flex;
+        flex-flow: column;
+        text-align: center;
+    }
+
+    media-tag img {
+        flex: 1;
+        max-height: 100% !important;
+    }
+
+    media-tag iframe {
+        min-height: 100%;
+    }
+}

customize.dist/src/less2/include/modal.less

@@ -0,0 +1,17 @@
+@import (once) "./colortheme.less";
+
+.modal_base() {
+    font-family: @colortheme_font;
+
+    background-color: @colortheme_modal-bg;
+    color: @colortheme_modal-fg;
+    box-shadow: @colortheme_modal-shadow;
+
+    a {
+        color: @colortheme_modal-link;
+
+        &:visited {
+            color: @colortheme_modal-link-visited;
+        }
+    }
+}

customize.dist/translations/messages.es.js

@@ -291,7 +291,7 @@ define(function () {
     out.blog = "Blog";
 
     out.initialState = [
-        '<span style="font-size:18px;"><p>',
+        '<p>',
         'Esto es&nbsp;<strong>CryptPad</strong>, el editor colaborativo en tiempo real Zero Knowledge. Todo está guardado cuando escribes.',
         '<br>',
         'Comparte el enlace a este pad para editar con amigos o utiliza el botón <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;">&nbsp;Compartir&nbsp;</span> para obtener un <em>enlace sólo lectura</em>&nbsp;que permite leer pero no escribir.',
@@ -299,7 +299,7 @@ define(function () {
 
         '<p><em>',
         'Vamos, empieza a escribir...',
-        '</em></p></span>',
+        '</em></p>',
         '<p>&nbsp;<br></p>'
     ].join('');
 

customize.dist/translations/messages.fr.js

@@ -566,7 +566,7 @@ define(function () {
     // Initial states
 
     out.initialState = [
-        '<span style="font-size:16px;"><p>',
+        '<p>',
         'Voici <strong>CryptPad</strong>, l\'éditeur collaboratif en temps-réel Zero Knowledge. Tout est sauvegardé dés que vous le tapez.',
         '<br>',
         'Partagez le lien vers ce pad avec des amis ou utilisez le bouton <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;">&nbsp;Partager&nbsp;</span> pour obtenir le <em>lien de lecture-seule</em>, qui permet la lecture mais non la modification.',
@@ -574,7 +574,7 @@ define(function () {
         '<p>',
         '<em>',
         'Lancez-vous, commencez à taper...',
-        '</em></p></span>',
+        '</em></p>',
         '<p>&nbsp;<br></p>'
     ].join('');
 

customize.dist/translations/messages.js

@@ -118,6 +118,10 @@ define(function () {
     out.shareButton = 'Share';
     out.shareSuccess = 'Copied link to clipboard';
 
+    out.userListButton = "User list";
+
+    out.userAccountButton = "Your account";
+
     out.newButton = 'New';
     out.newButtonTitle = 'Create a new pad';
     out.uploadButton = 'Upload files';
@@ -244,9 +248,11 @@ define(function () {
     out.canvas_enable = "Enable draw";
     out.canvas_width = "Width";
     out.canvas_opacity = "Opacity";
-    out.canvas_opacityLabel = "opacity: {0}";
+    out.canvas_opacityLabel = "Opacity: {0}";
     out.canvas_widthLabel = "Width: {0}";
     out.canvas_saveToDrive = "Save this image as a file in your CryptDrive";
+    out.canvas_currentBrush = "Current brush";
+    out.canvas_chooseColor = "Choose a color";
 
     // Profile
     out.profileButton = "Profile"; // dropdown menu
@@ -343,6 +349,8 @@ define(function () {
     out.fm_backup_title = 'Backup link';
     out.fm_nameFile = 'How would you like to name that file?';
     out.fm_error_cantPin = "Internal server error. Please reload the page and try again.";
+    out.fm_viewListButton = "List view";
+    out.fm_viewGridButton = "Grid view";
     // File - Context menu
     out.fc_newfolder = "New folder";
     out.fc_rename = "Rename";
@@ -483,6 +491,10 @@ define(function () {
     out.todo_markAsIncompleteTitle = "Mark this task as incomplete";
     out.todo_removeTaskTitle = "Remove this task from your todo list";
 
+    // pad
+    out.pad_showToolbar = "Show toolbar";
+    out.pad_hideToolbar = "Hide toolbar";
+
     // general warnings
     out.warn_notPinned = "This pad is not in anyone's CryptDrive. It will expire after 3 months. <a href='/about.html#pinning'>Learn more...</a>";
 
@@ -525,7 +537,7 @@ define(function () {
     out.main_slidePad = 'Markdown Presentation';
     out.main_pollPad = 'Poll or Schedule';
     out.main_whiteboardPad = 'Whiteboard';
-    out.main_recentPads = 'Recent Pads';
+    out.main_localPads = 'Local Pads';
 
     out.footer_applications = "Applications";
     out.footer_contact = "Contact";
@@ -603,7 +615,7 @@ define(function () {
     // Initial states
 
     out.initialState = [
-        '<span style="font-size:16px;"><p>',
+        '<p>',
         'This is&nbsp;<strong>CryptPad</strong>, the Zero Knowledge realtime collaborative editor. Everything is saved as you type.',
         '<br>',
         'Share the link to this pad to edit with friends or use the <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;">&nbsp;Share&nbsp;</span> button to share a <em>read-only link</em>&nbsp;which allows viewing but not editing.',
@@ -611,7 +623,7 @@ define(function () {
 
         '<p><em>',
         'Go ahead, just start typing...',
-        '</em></p></span>',
+        '</em></p>',
         '<p>&nbsp;<br></p>'
     ].join('');
 

customize.dist/translations/messages.pt-br.js

@@ -484,7 +484,7 @@ define(function () {
     // Initial states
 
     out.initialState = [
-        '<span style="font-size:16px;"><p>',
+        '<p>',
         'This is&nbsp;<strong>CryptPad</strong>, the Zero Knowledge realtime collaborative editor. Everything is saved as you type.',
         '<br>',
         'Share the link to this pad to edit with friends or use the <span style="background-color:#5cb85c;color:#ffffff;">&nbsp;Share&nbsp;</span> button to share a <em>read-only link</em>&nbsp;which allows viewing but not editing.',
@@ -492,7 +492,7 @@ define(function () {
 
         '<p><span style="color:#808080;"><em>',
         'Go ahead, just start typing...',
-        '</em></span></p></span>',
+        '</em></span></p>',
         '<p>&nbsp;<br></p>'
     ].join('');
 

customize.dist/translations/messages.ro.js

@@ -331,7 +331,7 @@ define(function () {
     out.header_france = "<a href=\"http://www.xwiki.com/\" target=\"_blank\" rel=\"noopener noreferrer\">With <img class=\"bottom-bar-heart\" src=\"/customize/heart.png\" alt=\"love\" /> from <img class=\"bottom-bar-fr\" src=\"/customize/fr.png\" title=\"Franța\" alt=\"Franța\"/> by <img src=\"/customize/logo-xwiki.png\" alt=\"XWiki SAS\" class=\"bottom-bar-xwiki\"/></a>";
     out.header_support = "<a href=\"http://ng.open-paas.org/\" title=\"OpenPaaS::ng\" target=\"_blank\" rel=\"noopener noreferrer\"> <img src=\"/customize/openpaasng.png\" alt=\"OpenPaaS-ng\" class=\"bottom-bar-openpaas\" /></a>";
     out.header_logoTitle = "Mergi la pagina principală";
-    out.initialState = "<span style=\"font-size:16px;\"><p>Acesta este&nbsp;<strong>CryptPad</strong>, editorul colaborativ bazat pe tehnologia Zero Knowledge în timp real. Totul este salvat pe măsură ce scrii.<br>Partajează link-ul către acest pad pentru a edita cu prieteni sau folosește <span class=\"fa fa-share-alt\" style=\"border:1px solid black;color:#000;\">&nbsp;Share&nbsp;</span> butonul pentru a partaja <em>read-only link</em>&nbsp;permițând vizualizarea dar nu și editarea.</p><p><em>Îndrăznește, începe să scrii...</em></p></span><p>&nbsp;<br></p>";
+    out.initialState = "<p>Acesta este&nbsp;<strong>CryptPad</strong>, editorul colaborativ bazat pe tehnologia Zero Knowledge în timp real. Totul este salvat pe măsură ce scrii.<br>Partajează link-ul către acest pad pentru a edita cu prieteni sau folosește <span class=\"fa fa-share-alt\" style=\"border:1px solid black;color:#000;\">&nbsp;Share&nbsp;</span> butonul pentru a partaja <em>read-only link</em>&nbsp;permițând vizualizarea dar nu și editarea.</p><p><em>Îndrăznește, începe să scrii...</em></p><p>&nbsp;<br></p>";
     out.codeInitialState = "/*\n   Acesta este editorul colaborativ de cod bazat pe tehnologia Zero Knowledge CryptPad.\n   Ce scrii aici este criptat, așa că doar oamenii care au link-ul pot să-l acceseze.\n   Poți să alegi ce limbaj de programare pus n evidență și schema de culori UI n dreapta sus.\n*/";
     out.slideInitialState = "# CryptSlide\n* Acesta este un editor colaborativ bazat pe tehnologia Zero Knowledge.\n* Ce scrii aici este criptat, așa că doar oamenii care au link-ul pot să-l acceseze.\n* Nici măcar serverele nu au acces la ce scrii tu.\n* Ce vezi aici, ce auzi aici, atunci când pleci, lași aici.\n\n-\n# Cum se folosește\n1. Scrie-ți conținutul slide-urilor folosind sintaxa markdown\n  - Află mai multe despre sintaxa markdown [aici](http://www.markdowntutorial.com/)\n2. Separă-ți slide-urile cu -\n3. Click pe butonul \"Play\" pentru a vedea rezultatele  - Slide-urile tale sunt actualizate în timp real.";
     out.driveReadmeTitle = "Ce este CryptDrive?";

customize.dist/translations/messages.zh.js

@@ -467,7 +467,7 @@ define(function () {
     // Initial states
 
     out.initialState = [
-        '<span style="font-size:16px;"><p>',
+        '<p>',
         '這是&nbsp;<strong>CryptPad</strong>, 零知識即時協作編輯平台，當你輸入時一切已即存好。',
         '<br>',
         '分享這個工作檔案的網址連結給友人或是使用、 <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;">&nbsp;分享&nbsp;</span> 按鈕分享<em>唯讀的連結</em>&nbsp;其只能看不能編寫。',
@@ -475,7 +475,7 @@ define(function () {
 
         '<p><em>',
         '來吧, 開始打字輸入吧...',
-        '</em></p></span>',
+        '</em></p>',
         '<p>&nbsp;<br></p>'
     ].join('');
 

www/code/code.less

@@ -59,19 +59,36 @@ body {
     box-sizing: border-box;
     font-family: Calibri,Ubuntu,sans-serif;
     word-wrap: break-word;
-    media-tag * {
+    position: relative;
+    media-tag {
+        * {
             max-width:100%;
         }
+        iframe[type="application/pdf"] {
+            max-height:50vh;
+        }
+    }
 }
 
 #preview {
     max-width: 40vw;
-    margin: auto;
+    margin: 1em auto;
 
     .markdown_preformatted-code;
     .markdown_gfm-table(black);
 }
 
+.cp-splitter {
+    position: absolute;
+    height: 100%;
+    width: 8px;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+
+    cursor: col-resize;
+}
+
 @media (max-width: @media-medium-screen) {
     .CodeMirror {
         flex: 1;

www/code/inner.js

@@ -4,6 +4,7 @@ define([
     'cm/lib/codemirror',
 
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
     'less!/code/code.less',
     'less!/customize/src/less/toolbar.less',
     'less!/customize/src/less/cryptpad.less',

www/code/main.js

@@ -387,6 +387,26 @@ define([
                     }
                 });
 
+                // add the splitter
+                var splitter = $('<div>', {
+                    'class': 'cp-splitter'
+                }).appendTo($iframe.find('#previewContainer'));
+
+                var $target = $iframe.find('.CodeMirror');
+                splitter.on('mousedown', function (e) {
+                    e.preventDefault();
+                    var x = e.pageX;
+                    var w = $target.width();
+
+                    $iframe.on('mouseup mousemove', function handler(evt) {
+                        if (evt.type === 'mouseup') {
+                            $iframe.off('mouseup mousemove', handler);
+                            return;
+                        }
+                        $target.css('width', (w - x + evt.pageX) + 'px');
+                    });
+                });
+
                 Cryptpad.removeLoadingScreen();
                 setEditable(true);
                 initializing = false;

www/common/common-file.js

@@ -56,12 +56,13 @@ define([
             $row.find('.upCancel').html('-');
             var $pv = $row.find('.progressValue');
             var $pb = $row.find('.progressContainer');
+            var $pc = $row.find('.upProgress');
             var $link = $row.find('.upLink');
 
             var updateProgress = function (progressValue) {
                 $pv.text(Math.round(progressValue*100)/100 + '%');
                 $pb.css({
-                    width: (progressValue/100)*188+'px'
+                    width: (progressValue/100)*$pc.width()+'px'
                 });
             };
 

www/common/common-interface.js

@@ -313,6 +313,7 @@ define([
                 position: 'bottom',
                 distance: 0,
                 performance: true,
+                dynamicTitle: true,
                 delay: [delay, 0]
             });
         };

www/common/common-messaging.js

@@ -79,7 +79,132 @@ define([
     // Messaging tools
     var avatars = {};
 
-    var addToFriendListUI = function (common, $block, open, remove, f) {
+    // TODO make this internal to the messenger
+    var channels = Msg.channels  = window.channels = {};
+
+    var UI = Msg.UI = {};
+    UI.init = function (common, $listContainer, $msgContainer) {
+        var ui = {
+            containers: {
+                friendList: $listContainer,
+                messages: $msgContainer,
+            },
+        };
+
+        ui.setFriendList = function (display, remove) {
+            UI.getFriendList(common, display, remove).appendTo($listContainer);
+        };
+
+        ui.notify = function (curvePublic) {
+            var $friend = $listContainer.find('.friend').filter(function (idx, el) {
+                return $(el).data('key') === curvePublic;
+            });
+            $friend.addClass('notify');
+        };
+
+        ui.unnotify = function (curvePublic) {
+            var $friend = $listContainer.find('.friend').filter(function (idx, el) {
+                return $(el).data('key') === curvePublic;
+            });
+            $friend.removeClass('notify');
+        };
+
+        ui.update = function (curvePublic, types) {
+            var data = getFriend(common, curvePublic);
+            var chan = channels[data.channel];
+            if (!chan.ready) {
+                chan.updateOnReady = (chan.updateOnReady || []).concat(types);
+                return;
+            }
+            var $friend = $listContainer.find('.friend').filter(function (idx, el) {
+                return $(el).data('key') === curvePublic;
+            });
+            if (types.indexOf('displayName') >= 0) {
+                $friend.find('.name').text(data.displayName);
+            }
+            if (types.indexOf('avatar') >= 0) {
+                $friend.find('.default').remove();
+                $friend.find('media-tag').remove();
+                if (data.avatar && avatars[data.avatar]) {
+                    $friend.prepend(avatars[data.avatar]);
+                } else {
+                    common.displayAvatar($friend, data.avatar, data.displayName, function ($img) {
+                        if (data.avatar && $img) {
+                            avatars[data.avatar] = $img[0].outerHTML;
+                        }
+                    });
+                }
+            }
+        };
+
+        ui.updateStatus = function (curvePublic) {
+            var data = getFriend(common, curvePublic);
+            var chan = channels[data.channel];
+
+            // FIXME mixes logic and presentation
+            var $friend = $listContainer.find('.friend').filter(function (idx, el) {
+                return $(el).data('key') === curvePublic;
+            });
+            var status = chan.userList.some(function (nId) {
+                return chan.mapId[nId] === curvePublic;
+            });
+            var statusText = status ? 'online' : 'offline';
+            $friend.find('.status').attr('class', 'status '+statusText);
+        };
+
+        ui.getChannel = function (curvePublic) {
+            // TODO extract into UI method
+            var $chat = $msgContainer.find('.chat').filter(function (idx, el) {
+                return $(el).data('key') === curvePublic;
+            });
+            return $chat.length? $chat: null;
+        };
+
+        ui.hideInfo = function () {
+            $msgContainer.find('.info').hide();
+        };
+
+        ui.showInfo = function () {
+            $msgContainer.find('.info').show();
+        };
+
+        ui.createChat = function (curvePublic) {
+            return $('<div>', {'class':'chat'})
+                .data('key', curvePublic).appendTo($msgContainer);
+        };
+
+        ui.hideChat = function () {
+            $msgContainer.find('.chat').hide();
+        };
+
+        ui.getFriend = function (curvePublic) {
+            return $listContainer.find('.friend').filter(function (idx, el) {
+                return $(el).data('key') === curvePublic;
+            });
+        };
+
+        ui.addToFriendList = function (curvePublic, display, remove) {
+            var $block = $listContainer.find('> div');
+            UI.addToFriendList(common, $block, display, remove, curvePublic);
+        };
+
+        ui.createMessage = function (msg, name) {
+            var $msg = $('<div>', {'class': 'message'})
+                .attr('title', msg.time ? new Date(msg.time).toLocaleString(): '?');
+
+            if (name) {
+                $('<div>', {'class':'sender'}).text(name).appendTo($msg);
+            }
+
+            $('<div>', {'class':'content'}).html(parseMessage(msg.text)).appendTo($msg);
+            return $msg;
+        };
+
+        return ui;
+    };
+
+    // internal
+    UI.addToFriendList = function (common, $block, open, remove, f) {
         var proxy = common.getProxy();
         var friends = proxy.friends || {};
         if (f === "me") { return; }
@@ -120,12 +245,14 @@ define([
         }
         $('<span>', {'class': 'status'}).appendTo($friend);
     };
-    Msg.getFriendListUI = function (common, open, remove) {
+
-        var proxy = common.getProxy();
+    //  iterate over your friends list and return a dom element containing UI
+    UI.getFriendList = function (common, open, remove) {
+        var proxy = common.getProxy(); // throws
         var $block = $('<div>');
         var friends = proxy.friends || {};
         Object.keys(friends).forEach(function (f) {
-            addToFriendListUI(common, $block, open, remove, f);
+            UI.addToFriendList(common, $block, open, remove, f);
         });
         return $block;
     };
@@ -146,7 +273,6 @@ define([
         });
     };
 
-    var channels = Msg.channels  = window.channels = {};
 
     var msgAlreadyKnown = function (channel, sig) {
         return channel.messages.some(function (message) {
@@ -162,8 +288,16 @@ define([
 
         var parsedMsg = JSON.parse(msg);
         if (parsedMsg[0] === Types.message) {
-            parsedMsg.shift();
+            // TODO validate messages here
-            channel.messages.push([sig, parsedMsg]);
+            var res = {
+                type: parsedMsg[0],
+                sig: sig,
+                channel: parsedMsg[1],
+                time: parsedMsg[2],
+                text: parsedMsg[3],
+            };
+
+            channel.messages.push(res);
             return true;
         }
         var proxy;
@@ -192,6 +326,8 @@ define([
         }
     };
 
+    /*  Broadcast a display name, profile, or avatar change to all contacts
+    */
     var updateMyData = function (common) {
         var friends = getFriendList(common);
         var mySyncData = friends.me;
@@ -218,7 +354,7 @@ define([
     var onChannelReady = function (common, chanId) {
         if (ready.indexOf(chanId) !== -1) { return; }
         ready.push(chanId);
-        channels[chanId].updateStatus();
+        channels[chanId].updateStatus(); // c'est quoi?
         var friends = getFriendList(common);
         if (ready.length === Object.keys(friends).length) {
             // All channels are ready
@@ -240,7 +376,29 @@ define([
         if (!isId) { return; }
 
         var decryptedMsg = channel.encryptor.decrypt(msg);
-        var parsed = JSON.parse(decryptedMsg);
+
+        if (decryptedMsg === null) {
+            // console.error('unable to decrypt message');
+            // console.error('potentially meant for yourself');
+
+            // message failed to parse, meaning somebody sent it to you but
+            // encrypted it with the wrong key, or you're sending a message to
+            // yourself in a different tab.
+            return;
+        }
+
+        if (!decryptedMsg) {
+            console.error('decrypted message was falsey but not null');
+            return;
+        }
+
+        var parsed;
+        try {
+            parsed = JSON.parse(decryptedMsg);
+        } catch (e) {
+            console.error(decryptedMsg);
+            return;
+        }
         if (parsed[0] !== Types.mapId && parsed[0] !== Types.mapIdAck) { return; }
         if (parsed[2] !== sender || !parsed[1]) { return; }
         channel.mapId[sender] = parsed[1];
@@ -293,9 +451,9 @@ define([
         }
     };
 
+    // TODO extract into UI method
     var createChatBox = function (common, $container, curvePublic, messenger) {
         var data = getFriend(common, curvePublic);
-        var proxy = common.getProxy();
 
         // Input
         var channel = channels[data.channel];
@@ -343,6 +501,8 @@ define([
         messenger.input = $input[0];
 
         var send = function () {
+            // TODO implement sending queue
+            // TODO separate message logic from UI
             var channel = channels[data.channel];
             if (channel.sending) {
                 console.error("still sending");
@@ -356,42 +516,26 @@ define([
                 console.error("input is disabled");
                 return;
             }
+
+            var payload = $input.val();
             // Send the message
-            var msg = [Types.message, proxy.curvePublic, +new Date(), $input.val()];
-            var msgStr = JSON.stringify(msg);
-            var cryptMsg = channel.encryptor.encrypt(msgStr);
             channel.sending = true;
-
+            channel.send(payload, function (e) {
-            console.log(channel.wc);
+                if (e) {
-            var network = common.getNetwork();
+                    channel.sending = false;
-            if (!network.webChannels.some(function (wc) {
+                    console.error(e);
-                if (wc.id === channel.wc.id) {
-                    console.error(wc.id, channel.wc.id);
-                    return true;
-                }
-                console.error(wc.id, channel.wc.id);
-                //return wc.id === channel.wc.id;
-            })) {
-                console.error('no such channel:' + channel.wc.id);
                     return;
                 }
-
-            channel.wc.bcast(cryptMsg).then(function () {
                 $input.val('');
-                pushMsg(common, channel, cryptMsg);
                 channel.refresh();
                 channel.sending = false;
-            }, function (err) {
-                channel.sending = false;
-                console.error(err);
             });
         };
-        $('<button>', {'class': 'btn btn-primary fa fa-paper-plane'})
+        $('<button>', {
-            //.text(common.Messages.contacts_send)
+            'class': 'btn btn-primary fa fa-paper-plane',
-            .appendTo($inputBlock).click(send);
+            title: common.Messages.contacts_send,
-        /*$input.on('keypress', function (e) {
+        }).appendTo($inputBlock).click(send);
-            if (e.which === 13) { send(); }
+
-        });*/
         var onKeyDown = function (e) {
             if (e.keyCode === 13) {
                 if (e.ctrlKey || e.shiftKey) {
@@ -441,88 +585,113 @@ define([
         });
     };
 
-    Msg.init = function (common, $listContainer, $msgContainer) {
+    var getMoreHistory = function (network, chan, hash, count) {
-        var messenger = {};
+        var msg = [ 'GET_HISTORY_RANGE', chan.id, {
+                from: hash,
+                count: count,
+            }
+        ];
 
+        network.sendto(network.historyKeeper, JSON.stringify(msg)).then(function () {
+        }, function (err) {
+            throw new Error(err);
+        });
+    };
+
+    var getChannelMessagesSince = function (network, proxy, chan, data, keys) {
+        var cfg = {
+            validateKey: keys.validateKey,
+            owners: [proxy.edPublic, data.edPublic],
+            lastKnownHash: data.lastKnownHash
+        };
+        var msg = ['GET_HISTORY', chan.id, cfg];
+        network.sendto(network.historyKeeper, JSON.stringify(msg))
+          .then($.noop, function (err) {
+            throw new Error(err);
+        });
+    };
+
+    Msg.init = function (common, ui) {
+        // declare common variables
         var network = common.getNetwork();
         var proxy = common.getProxy();
         Msg.hk = network.historyKeeper;
         var friends = getFriendList(common);
 
+        // listen for messages...
         network.on('message', function(msg, sender) {
             onDirectMessage(common, msg, sender);
         });
 
+        // declare messenger and common methods
+        var messenger = {
+            ui: ui,
+        };
+
+        messenger.setActive = function (id) {
+            // TODO validate id
+            messenger.active = id;
+        };
+
         // Refresh the active channel
+        // TODO extract into UI method
         var refresh = function (curvePublic) {
-            if (Msg.active !== curvePublic) { return; }
+            if (messenger.active !== curvePublic) { return; }
             var data = friends[curvePublic];
             if (!data) { return; }
             var channel = channels[data.channel];
             if (!channel) { return; }
 
-            var $chat = $msgContainer.find('.chat').filter(function (idx, el) {
+            var $chat = ui.getChannel(curvePublic);
-                return $(el).data('key') === curvePublic;
+
-            });
+            if (!$chat) { return; }
 
-            if (!$chat.length) { return; }
             // Add new messages
             var messages = channel.messages;
             var $messages = $chat.find('.messages');
-            var $msg, msg, date, name;
+            var msg, name;
             var last = typeof(channel.lastDisplayed) === 'number'? channel.lastDisplayed: -1;
             for (var i = last + 1; i<messages.length; i++) {
-                msg = messages[i][1]; // 0 is the hash, 1 the array
+                msg = messages[i];
-                $msg = $('<div>', {'class': 'message'}).appendTo($messages);
+                name = (msg.channel !== channel.lastSender)?
-
+                    getFriend(common, msg.channel).displayName: undefined;
-                // date
-                date = msg[1] ? new Date(msg[1]).toLocaleString() : '?';
-                //$('<div>', {'class':'date'}).text(date).appendTo($msg);
-                $msg.attr('title', date);
 
-                // name
+                ui.createMessage(msg, name).appendTo($messages);
-                if (msg[0] !== channel.lastSender) {
+                channel.lastSender = msg.channel;
-                    name = getFriend(common, msg[0]).displayName;
-                    $('<div>', {'class':'sender'}).text(name).appendTo($msg);
-                }
-                channel.lastSender = msg[0];
-
-                // content
-                //$('<div>', {'class':'content'}).text(msg[2]).appendTo($msg);
-                $('<div>', {'class':'content'}).html(parseMessage(msg[2])).appendTo($msg);
             }
             $messages.scrollTop($messages[0].scrollHeight);
             channel.lastDisplayed = i-1;
             channel.unnotify();
 
+            // return void channel.notify();
             if (messages.length > 10) {
                 var lastKnownMsg = messages[messages.length - 11];
-                data.lastKnownHash = lastKnownMsg[0];
+                channel.setLastMessageRead(lastKnownMsg.sig);
             }
         };
         // Display a new channel
+        // TODO extract into UI method
         var display = function (curvePublic) {
-            $msgContainer.find('.info').hide();
+            ui.hideInfo();
             var isNew = false;
-            var $chat = $msgContainer.find('.chat').filter(function (idx, el) {
+            var $chat = ui.getChannel(curvePublic);
-                return $(el).data('key') === curvePublic;
+            if (!$chat) {
-            });
+                $chat = ui.createChat(curvePublic);
-            if (!$chat.length) {
-                $chat = $('<div>', {'class':'chat'})
-                        .data('key', curvePublic).appendTo($msgContainer);
                 createChatBox(common, $chat, curvePublic, messenger);
                 isNew = true;
             }
             // Show the correct div
-            $msgContainer.find('.chat').hide();
+            ui.hideChat();
             $chat.show();
 
-            Msg.active = curvePublic;
+            // TODO set this attr per-messenger
+            messenger.setActive(curvePublic);
             // TODO don't mark messages as read unless you have displayed them
 
             refresh(curvePublic);
         };
 
+        // TODO take a callback
         var remove = function (curvePublic) {
             var data = getFriend(common, curvePublic);
             var channel = channels[data.channel];
@@ -541,106 +710,20 @@ define([
         };
 
         // Display friend list
-        common.getFriendListUI(common, display, remove).appendTo($listContainer);
+        ui.setFriendList(display, remove);
 
-        // Notify on new messages
+        // TODO extract into UI method...
-        var notify = function (curvePublic) {
-            //if (Msg.active === curvePublic) { return; }
-            var $friend = $listContainer.find('.friend').filter(function (idx, el) {
-                return $(el).data('key') === curvePublic;
-            });
-            $friend.addClass('notify');
-            common.notify();
-        };
-        var unnotify = function (curvePublic) {
-            var $friend = $listContainer.find('.friend').filter(function (idx, el) {
-                return $(el).data('key') === curvePublic;
-            });
-            $friend.removeClass('notify');
-        };
         var removeUI = function (curvePublic) {
-            var $friend = $listContainer.find('.friend').filter(function (idx, el) {
+            var $friend = ui.getFriend(curvePublic);
-                return $(el).data('key') === curvePublic;
+            var $chat = ui.getChannel(curvePublic);
-            });
-            var $chat = $msgContainer.find('.chat').filter(function (idx, el) {
-                return $(el).data('key') === curvePublic;
-            });
             $friend.remove();
             $chat.remove();
-            $msgContainer.find('.info').show();
+            ui.showInfo();
-        };
-        var updateUI = function (curvePublic, types) {
-            var data = getFriend(common, curvePublic);
-            var chan = channels[data.channel];
-            if (!chan.ready) {
-                chan.updateOnReady = (chan.updateOnReady || []).concat(types);
-                return;
-            }
-            var $friend = $listContainer.find('.friend').filter(function (idx, el) {
-                return $(el).data('key') === curvePublic;
-            });
-            if (types.indexOf('displayName') >= 0) {
-                $friend.find('.name').text(data.displayName);
-            }
-            if (types.indexOf('avatar') >= 0) {
-                $friend.find('.default').remove();
-                $friend.find('media-tag').remove();
-                if (data.avatar && avatars[data.avatar]) {
-                    $friend.prepend(avatars[data.avatar]);
-                } else {
-                    common.displayAvatar($friend, data.avatar, data.displayName, function ($img) {
-                        if (data.avatar && $img) {
-                            avatars[data.avatar] = $img[0].outerHTML;
-                        }
-                    });
-                }
-            }
-        };
-        var updateStatus = function (curvePublic) {
-            var data = getFriend(common, curvePublic);
-            var chan = channels[data.channel];
-            var $friend = $listContainer.find('.friend').filter(function (idx, el) {
-                return $(el).data('key') === curvePublic;
-            });
-            var status = chan.userList.some(function (nId) {
-                return chan.mapId[nId] === curvePublic;
-            });
-            var statusText = status ? 'online' : 'offline';
-            $friend.find('.status').attr('class', 'status '+statusText);
-        };
-        var getMoreHistory = function (network, chan, hash, count) {
-            var msg = [
-                'GET_HISTORY_RANGE',
-                chan.id,
-                {
-                    from: hash,
-                    count: count,
-                }
-            ];
-
-            console.log(msg);
-
-            network.sendto(network.historyKeeper, JSON.stringify(msg)).then(function (a, b, c) {
-                console.log(a, b, c);
-            }, function (err) {
-                throw new Error(err);
-            });
-        };
-
-        var getChannelMessagesSince = function (network, chan, data, keys) {
-            var cfg = {
-                validateKey: keys.validateKey,
-                owners: [proxy.edPublic, data.edPublic],
-                lastKnownHash: data.lastKnownHash
-            };
-            var msg = ['GET_HISTORY', chan.id, cfg];
-            network.sendto(network.historyKeeper, JSON.stringify(msg))
-              .then($.noop, function (err) {
-                throw new Error(err);
-            });
         };
 
         // Open the channels
+
+        // TODO extract this into an external function
         var openFriendChannel = function (f) {
             if (f === "me") { return; }
             var data = friends[f];
@@ -654,13 +737,25 @@ define([
                     encryptor: encryptor,
                     messages: [],
                     refresh: function () { refresh(data.curvePublic); },
-                    notify: function () { notify(data.curvePublic); },
+                    notify: function () {
-                    unnotify: function () { unnotify(data.curvePublic); },
+                        ui.notify(data.curvePublic);
+                        common.notify();
+                    },
+                    unnotify: function () { ui.unnotify(data.curvePublic); },
                     removeUI: function () { removeUI(data.curvePublic); },
-                    updateUI: function (types) { updateUI(data.curvePublic, types); },
+                    updateUI: function (types) { ui.update(data.curvePublic, types); },
-                    updateStatus: function () { updateStatus(data.curvePublic); },
+                    updateStatus: function () { ui.updateStatus(data.curvePublic); },
+                    setLastMessageRead: function (hash) {
+                        data.lastKnownHash = hash;
+                    },
+                    getLastMessageRead: function () {
+                        return data.lastKnownHash;
+                    },
+                    isActive: function () {
+                        return data.curvePublic === messenger.active;
+                    },
                     getMessagesSinceDisconnect: function () {
-                        getChannelMessagesSince(network, chan, data, keys);
+                        getChannelMessagesSince(network, proxy, chan, data, keys);
                     },
                     wc: chan,
                     userList: [],
@@ -680,6 +775,24 @@ define([
                         var messageHash = oldestMessage[0];
                         getMoreHistory(network, chan, messageHash, 10);
                     },
+                    send: function (payload, cb) {
+                        if (!network.webChannels.some(function (wc) {
+                            if (wc.id === channel.wc.id) { return true; }
+                        })) {
+                            return void cb('NO_SUCH_CHANNEL');
+                        }
+
+                        var msg = [Types.message, proxy.curvePublic, +new Date(), payload];
+                        var msgStr = JSON.stringify(msg);
+                        var cryptMsg = channel.encryptor.encrypt(msgStr);
+
+                        channel.wc.bcast(cryptMsg).then(function () {
+                            pushMsg(common, channel, cryptMsg);
+                            cb();
+                        }, function (err) {
+                            cb(err);
+                        });
+                    },
                 };
                 chan.on('message', function (msg, sender) {
                     onMessage(common, msg, sender, chan);
@@ -710,7 +823,7 @@ define([
                     channel.updateStatus();
                 });
 
-                getChannelMessagesSince(network, chan, data, keys);
+                getChannelMessagesSince(network, proxy, chan, data, keys);
             }, function (err) {
                 console.error(err);
             });
@@ -726,6 +839,7 @@ define([
             Object.keys(friends).forEach(openFriendChannel);
         };
 
+        // TODO split out into UI
         messenger.setEditable = function (bool) {
             bool = !bool;
             var input = messenger.input;
@@ -748,14 +862,14 @@ define([
 
         openFriendChannels();
 
+        // TODO split loop innards into ui methods
         var checkNewFriends = function () {
             Object.keys(friends).forEach(function (f) {
-                var $friend = $listContainer.find('.friend').filter(function (idx, el) {
+                var $friend = ui.getFriend(f);
-                    return $(el).data('key') === f;
+
-                });
                 if (!$friend.length) {
                     openFriendChannel(f);
-                    addToFriendListUI(common, $listContainer.find('> div'), display, remove, f);
+                    ui.addToFriendList(f, display, remove);
                 }
             });
         };
@@ -897,6 +1011,7 @@ define([
         if (pendingRequests.indexOf(netfluxId) === -1) {
             pendingRequests.push(netfluxId);
             var proxy = common.getProxy();
+            // FIXME this name doesn't indicate what it does
             common.changeDisplayName(proxy[common.displayNameKey]);
         }
         network.sendto(netfluxId, msgStr);

www/common/cryptpad-common.js

@@ -125,10 +125,10 @@ define([
     common.createOwnedChannel = Messaging.createOwnedChannel;
     common.getFriendList = Messaging.getFriendList;
     common.getFriendChannelsList = Messaging.getFriendChannelsList;
-    common.getFriendListUI = Messaging.getFriendListUI;
     common.createData = Messaging.createData;
     common.getPendingInvites = Messaging.getPending;
     common.getLatestMessages = Messaging.getLatestMessages;
+    common.initMessagingUI = Messaging.UI.init;
 
     // Userlist
     common.createUserList = UserList.create;

www/common/curve.js

@@ -35,6 +35,7 @@ define([
         var nonce = decodeBase64(unpacked[0]);
         var box = decodeBase64(unpacked[1]);
         var message = Nacl.box.open.after(box, nonce, secret);
+        if (message === false) { return null; }
         return encodeUTF8(message);
     };
 

www/common/diffMarked.js

@@ -60,6 +60,10 @@ define([
         return out;
     };
 
+    renderer.paragraph = function (p) {
+        return /<media\-tag[\s\S]*>/i.test(p)? p + '\n': '<p>' + p + '</p>\n';
+    };
+
     var MutationObserver = window.MutationObserver;
     var forbiddenTags = [
         'SCRIPT',

www/common/file-dialog.less

@@ -44,6 +44,7 @@
             border: 0;
             padding: 8px 12px;
             margin: 1em;
+            width: 300px;
         }
 
         .close {
@@ -60,6 +61,7 @@
         .fileContainer {
             display: flex;
             flex-wrap: wrap;
+            justify-content: center;
             overflow-y: auto;
         }
 

www/common/toolbar2.js

@@ -308,7 +308,7 @@ define([
 
         toolbar.userlistContent = $content;
 
-        var $container = $('<span>', {id: 'userButtons'});
+        var $container = $('<span>', {id: 'userButtons', title: Messages.userListButton});
 
         var $button = $('<button>').appendTo($container);
         $('<span>',{'class': 'buttonTitle'}).appendTo($button);
@@ -446,6 +446,7 @@ define([
             //$shareBlock.find('button').attr('id', 'shareButton');
             $shareBlock.find('.dropdown-bar-content').addClass(SHARE_CLS).addClass(EDITSHARE_CLS).addClass(VIEWSHARE_CLS);
             $shareBlock.addClass('shareButton');
+            $shareBlock.find('button').attr('title', Messages.shareButton);
 
             if (hashes.editHash) {
                 $shareBlock.find('a.editShare').click(function () {
@@ -628,7 +629,7 @@ define([
             title: Messages.header_logoTitle,
             'class': "cryptpad-logo"
         }).append($('<img>', {
-            src: '/customize/images/logo_white.svg'
+            src: '/customize/images/logo_white.png'
         }));
         var onClick = function (e) {
             e.preventDefault();
@@ -774,6 +775,7 @@ define([
             userMenuCfg.displayChangeName = 1;
         }
         Cryptpad.createUserAdminMenu(userMenuCfg);
+        $userAdmin.find('button').attr('title', Messages.userAccountButton);
 
         var $userButton = toolbar.$userNameButton = $userAdmin.find('a.' + USERBUTTON_CLS);
         $userButton.click(function (e) {

www/contacts/main.js

@@ -51,7 +51,8 @@ define([
             APP.messenger.setEditable(true);
         });
 
-        APP.messenger = Cryptpad.initMessaging(Cryptpad, $list, $messages);
+        var ui = APP.ui = Cryptpad.initMessagingUI(Cryptpad, $list, $messages);
+        APP.messenger = Cryptpad.initMessaging(Cryptpad, ui);
 
         var $infoBlock = $('<div>', {'class': 'info'}).appendTo($messages);
         $('<h2>').text(Messages.contacts_info1).appendTo($infoBlock);

www/drive/main.js

@@ -1374,6 +1374,8 @@ define([
             } else {
                 $gridButton.addClass('active');
             }
+            $listButton.attr('title', Messages.fm_viewListButton);
+            $gridButton.attr('title', Messages.fm_viewGridButton);
             $container.append($listButton).append($gridButton);
         };
 

www/file/file.less

@@ -128,9 +128,3 @@ media-tag {
     z-index: 10000;
     display: block;
 }
-
-body #uploadStatusContainer {
-    background-color: rgba(255, 255, 255, 0.9);
-    color: black;
-    opacity: 0.9;
-}

www/pad/main.js

@@ -520,14 +520,17 @@ define([
                     $collapse.removeClass('fa-question');
                     var updateIcon = function () {
                         $collapse.removeClass('fa-caret-down').removeClass('fa-caret-up');
+                        $collapse.attr('title', '');
                         var isCollapsed = !$bar.find('.cke_toolbox_main').is(':visible');
                         if (isCollapsed) {
                             if (!initializing) { Cryptpad.feedback('HIDETOOLBAR_PAD'); }
                             $collapse.addClass('fa-caret-down');
+                            $collapse.attr('title', Messages.pad_showToolbar);
                         }
                         else {
                             if (!initializing) { Cryptpad.feedback('SHOWTOOLBAR_PAD'); }
                             $collapse.addClass('fa-caret-up');
+                            $collapse.attr('title', Messages.pad_hideToolbar);
                         }
                     };
                     updateIcon();

www/poll/main.js

@@ -11,6 +11,7 @@ define([
     '/bower_components/file-saver/FileSaver.min.js',
 
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
     'less!/customize/src/less/toolbar.less',
     'less!/customize/src/less/cryptpad.less',
     'less!/poll/poll.less',
@@ -135,7 +136,7 @@ define([
         var $commitCell = APP.$table.find('tfoot tr td:nth-child(2)');
         $createOption.append(APP.$createRow);
         $commitCell.append(APP.$commit);
-        $('#create-user, #create-option').css('display', 'inline-block');
+        $('#create-user, #create-option').css('display', 'inline-flex');
         if (!APP.proxy || !APP.proxy.table.rowsOrder || APP.proxy.table.rowsOrder.length === 0) { $('#create-user').hide(); }
         var width = $('#table').outerWidth();
         if (width) {
@@ -458,7 +459,7 @@ define([
         var msg = (help ? Messages.poll_hide_help_button : Messages.poll_show_help_button);
 
         $('#howItWorks').toggle(help);
-        $('#help').text(msg).attr('title', msg);
+        $('#help').text(msg);
     };
 
     var Title;

www/poll/poll.less

@@ -55,9 +55,14 @@ body {
     width: 400px;
 }
 
+input[type="text"], textarea {
+    background-color: white;
+    color: black;
+    border: 0;
+}
+
 input[type="text"][disabled], textarea[disabled] {
     background-color: transparent;
-    font: white;
     border: 0px;
 }
 
@@ -114,6 +119,7 @@ table#table {
     min-height: 5em;
     font-size: 20px;
     font-weight: bold;
+    border: 1px solid black;
 
 }
 #description[disabled] {
@@ -132,6 +138,10 @@ table#table {
 div.upper {
     width: 80%;
     margin: auto;
+
+    & > * {
+        margin-right: 1em;
+    }
 }
 
 // from cryptpad.less
@@ -329,7 +339,6 @@ form.realtime, div.realtime {
         input {
             &[type="text"] {
                 height: auto;
-                border: 1px solid @base;
                 width: 80%;
             }
         }
@@ -375,6 +384,7 @@ form.realtime, div.realtime {
                 //border-radius: 20px 0 0 20px;
                 input[type="text"] {
                     width: ~"calc(100% - 50px)";
+                    padding: 0 0.5em;
                 }
                 .edit {
                     float:right;
@@ -460,3 +470,10 @@ form.realtime, div.realtime {
     #adduser { .top-left; }
     #addoption { .bottom-left; }
 }
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+

www/slide/slide.less

@@ -336,6 +336,15 @@ div#modal #content, #print {
             padding-left: 0.3em;
         }
 
+        // fixes image overflowing
+        media-tag {
+            height: 100%;
+
+            & + * {
+                margin-top: 1rem;
+            }
+        }
+
         img {
             position: relative;
             min-width: 1%;
@@ -383,19 +392,6 @@ p {
     //flex: 1;
 }
 
-media-tag {
+@import "../customize/src/less2/include/mediatag.less";
-    min-height: 0;
-    flex: 1;
-    display: flex;
-    flex-flow: column;
-    text-align: center;
-}
-
-media-tag img {
-    flex: 1;
-    max-height: 100% !important;
-}
 
-media-tag iframe {
+.mediatag_base();
-  min-height: 100%;
-}

www/whiteboard/main.js

@@ -15,6 +15,7 @@ define([
     '/bower_components/file-saver/FileSaver.min.js',
 
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
     'less!/customize/src/less/cryptpad.less',
     'less!/whiteboard/whiteboard.less',
     'less!/customize/src/less/toolbar.less',
@@ -89,13 +90,8 @@ window.canvas = canvas;
             ctx.strokeStyle = '#000000';
             ctx.stroke();
 
-
             var img = ccanvas.toDataURL("image/png");
-            var $img = $('<img>', {
+            $controls.find('.selected > img').attr('src', img);
-                src: img,
-                title: 'Current brush'
-            });
-            $controls.find('.selected').html('').append($img);
             canvas.freeDrawingCursor = 'url('+img+') '+size/2+' '+size/2+', crosshair';
         };
 
@@ -103,6 +99,7 @@ window.canvas = canvas;
             var val = $width.val();
             canvas.freeDrawingBrush.width = Number(val);
             $widthLabel.text(Cryptpad.Messages._getKey("canvas_widthLabel", [val]));
+            $('#width-val').text(val + 'px');
             createCursor();
         };
         updateBrushWidth();
@@ -114,6 +111,7 @@ window.canvas = canvas;
             brush.opacity = Number(val);
             canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
             $opacityLabel.text(Cryptpad.Messages._getKey("canvas_opacityLabel", [val]));
+            $('#opacity-val').text((Number(val) * 100) + '%');
             createCursor();
         };
         updateBrushOpacity();
@@ -188,7 +186,7 @@ window.canvas = canvas;
 
         var setEditable = function (bool) {
             if (readOnly && bool) { return; }
-            if (bool) { $controls.show(); }
+            if (bool) { $controls.css('display', 'flex'); }
             else { $controls.hide(); }
 
             canvas.isDrawingMode = bool ? module.draw : false;
@@ -199,7 +197,7 @@ window.canvas = canvas;
             canvas.forEachObject(function (object) {
                 object.selectable = bool;
             });
-            $canvasContainer.css('border-color', bool? 'black': 'red');
+            $canvasContainer.find('canvas').css('border-color', bool? 'black': 'red');
         };
 
         var saveImage = module.saveImage = function () {
@@ -289,7 +287,7 @@ window.canvas = canvas;
 
             var $color = module.$color = $('<button>', {
                 id: "color-picker",
-                title: "choose a color",
+                title: Messages.canvas_chooseColor,
                 'class': "fa fa-square rightside-button",
             })
             .on('click', function () {

www/whiteboard/whiteboard.less

@@ -27,20 +27,29 @@ body {
 }
 // created by fabricjs. styled so defaults don't break anything
 .canvas-container {
-    border: 1px solid black;
     margin: auto;
     background: white;
+    & > canvas {
+        border: 1px solid black;
+    }
 }
 
 // contains user tools
 #controls {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     position: relative;
     border-top: 1px solid black;
     background: white;
-    height: 100px;
+
-    line-height: 100px;
+    padding: 1em;
-    padding-bottom: 5px;
+
+    & > * + * {
+        margin: 0;
+        margin-left: 1em;
+    }
 
     #width, #opacity {
         .middle;
@@ -50,15 +59,36 @@ body {
         vertical-align: middle;
     }
     .selected {
-        margin-left: 20px;
+        display: flex;
-        display: inline-block;
+        align-items: center;
-        height: 135px;
+        justify-content: center;
-        width: 135px;
         z-index: 9001;
-        text-align: center;
+
-        img {
+        width: 100px;
-            vertical-align: middle;
+        height: 100px;
+    }
+
+    .range-group {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+
+        input[type="range"] {
+            background-color: inherit;
+        }
+
+        & > span {
+            cursor: default;
+            position: absolute;
+            top: 0;
+            right: 0;
+        }
     }
+    .range-group:first-of-type {
+        margin-left: 2em;
+    }
+    .range-group:last-of-type {
+        margin-right: 1em;
     }
 }
 
@@ -70,13 +100,21 @@ body {
     display: flex;
     justify-content: space-between;
 
+    padding: 1em;
+
     span.palette-color {
         height: 4vw;
         width: 4vw;
-        display: inline-block;
+        display: block;
         margin: 5px;
         border: 1px solid black;
         vertical-align: top;
+        border-radius: 50%;
+        transition: transform 0.1s;
+
+        &:hover {
+            transform: scale(1.2);
+        }
     }
 }
 
@@ -87,6 +125,7 @@ body {
 
 // input[type=color] must exist in the dom to work correctly
 // styled so that they don't break layouts
+
 #pickers {
     visibility: hidden;
     position: absolute;
@@ -94,4 +133,3 @@ body {
     height: 0;
     z-index: -5;
 }
-