Merge branch 'staging' of github.com:xwiki-labs/cryptpad into staging

7 years ago · 1c526feffb
parent fbb880f277 04b84538e1
commit 1c526feffb
33 changed files with 427 additions and 130 deletions
--- a/bower.json
+++ b/bower.json
@ -39,6 +39,7 @@
    "require-css": "0.1.10",
    "less": "^2.7.2",
    "bootstrap": "#v4.0.0-alpha.6",
-    "diff-dom": "2.1.1"
+    "diff-dom": "2.1.1",
+    "open-sans-fontface": "^1.4.2"
  }
 }
--- a/customize.dist/bkabout.jpg
+++ b/customize.dist/bkabout.jpg
--- a/customize.dist/fonts/open-sans.less
+++ b/customize.dist/fonts/open-sans.less
@ -0,0 +1,133 @@
+/* Open Sans @font-face kit */
+
+@OpenSansPath: "/bower_components/open-sans-fontface/fonts";
+
+/* BEGIN Light */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@{OpenSansPath}/Light/OpenSans-Light.eot');
+  src: url('@{OpenSansPath}/Light/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
+       url('@{OpenSansPath}/Light/OpenSans-Light.woff') format('woff'),
+       url('@{OpenSansPath}/Light/OpenSans-Light.ttf') format('truetype'),
+       url('@{OpenSansPath}/Light/OpenSans-Light.svg#OpenSansLight') format('svg');
+  font-weight: 300;
+  font-style: normal;
+}
+/* END Light */
+
+/* BEGIN Light Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@{OpenSansPath}/LightItalic/OpenSans-LightItalic.eot');
+  src: url('@{OpenSansPath}/LightItalic/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'),
+       url('@{OpenSansPath}/LightItalic/OpenSans-LightItalic.woff') format('woff'),
+       url('@{OpenSansPath}/LightItalic/OpenSans-LightItalic.ttf') format('truetype'),
+       url('@{OpenSansPath}/LightItalic/OpenSans-LightItalic.svg#OpenSansLightItalic') format('svg');
+  font-weight: 300;
+  font-style: italic;
+}
+/* END Light Italic */
+
+/* BEGIN Regular */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@{OpenSansPath}/Regular/OpenSans-Regular.eot');
+  src: url('@{OpenSansPath}/Regular/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
+       url('@{OpenSansPath}/Regular/OpenSans-Regular.woff') format('woff'),
+       url('@{OpenSansPath}/Regular/OpenSans-Regular.ttf') format('truetype'),
+       url('@{OpenSansPath}/Regular/OpenSans-Regular.svg#OpenSansRegular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* END Regular */
+
+/* BEGIN Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@{OpenSansPath}/Italic/OpenSans-Italic.eot');
+  src: url('@{OpenSansPath}/Italic/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
+       url('@{OpenSansPath}/Italic/OpenSans-Italic.woff') format('woff'),
+       url('@{OpenSansPath}/Italic/OpenSans-Italic.ttf') format('truetype'),
+       url('@{OpenSansPath}/Italic/OpenSans-Italic.svg#OpenSansItalic') format('svg');
+  font-weight: normal;
+  font-style: italic;
+}
+/* END Italic */
+
+/* BEGIN Semibold */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@{OpenSansPath}/Semibold/OpenSans-Semibold.eot');
+  src: url('@{OpenSansPath}/Semibold/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
+       url('@{OpenSansPath}/Semibold/OpenSans-Semibold.woff') format('woff'),
+       url('@{OpenSansPath}/Semibold/OpenSans-Semibold.ttf') format('truetype'),
+       url('@{OpenSansPath}/Semibold/OpenSans-Semibold.svg#OpenSansSemibold') format('svg');
+  font-weight: 600;
+  font-style: normal;
+}
+/* END Semibold */
+
+/* BEGIN Semibold Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@{OpenSansPath}/SemiboldItalic/OpenSans-SemiboldItalic.eot');
+  src: url('@{OpenSansPath}/SemiboldItalic/OpenSans-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
+       url('@{OpenSansPath}/SemiboldItalic/OpenSans-SemiboldItalic.woff') format('woff'),
+       url('@{OpenSansPath}/SemiboldItalic/OpenSans-SemiboldItalic.ttf') format('truetype'),
+       url('@{OpenSansPath}/SemiboldItalic/OpenSans-SemiboldItalic.svg#OpenSansSemiboldItalic') format('svg');
+  font-weight: 600;
+  font-style: italic;
+}
+/* END Semibold Italic */
+
+/* BEGIN Bold */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@{OpenSansPath}/Bold/OpenSans-Bold.eot');
+  src: url('@{OpenSansPath}/Bold/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
+       url('@{OpenSansPath}/Bold/OpenSans-Bold.woff') format('woff'),
+       url('@{OpenSansPath}/Bold/OpenSans-Bold.ttf') format('truetype'),
+       url('@{OpenSansPath}/Bold/OpenSans-Bold.svg#OpenSansBold') format('svg');
+  font-weight: bold;
+  font-style: normal;
+}
+/* END Bold */
+
+/* BEGIN Bold Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@{OpenSansPath}/BoldItalic/OpenSans-BoldItalic.eot');
+  src: url('@{OpenSansPath}/BoldItalic/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
+       url('@{OpenSansPath}/BoldItalic/OpenSans-BoldItalic.woff') format('woff'),
+       url('@{OpenSansPath}/BoldItalic/OpenSans-BoldItalic.ttf') format('truetype'),
+       url('@{OpenSansPath}/BoldItalic/OpenSans-BoldItalic.svg#OpenSansBoldItalic') format('svg');
+  font-weight: bold;
+  font-style: italic;
+}
+/* END Bold Italic */
+
+/* BEGIN Extrabold */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.eot');
+  src: url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
+       url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.woff') format('woff'),
+       url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.ttf') format('truetype'),
+       url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.svg#OpenSansExtrabold') format('svg');
+  font-weight: 800;
+  font-style: normal;
+}
+/* END Extrabold */
+
+/* BEGIN Extrabold Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@{OpenSansPath}/ExtraBoldItalic/OpenSans-ExtraBoldItalic.eot');
+  src: url('@{OpenSansPath}/ExtraBoldItalic/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
+       url('@{OpenSansPath}/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff') format('woff'),
+       url('@{OpenSansPath}/ExtraBoldItalic/OpenSans-ExtraBoldItalic.ttf') format('truetype'),
+       url('@{OpenSansPath}/ExtraBoldItalic/OpenSans-ExtraBoldItalic.svg#OpenSansExtraboldItalic') format('svg');
+  font-weight: 800;
+  font-style: italic;
+}
+/* END Extrabold Italic */
--- a/customize.dist/images/logo_white.png
+++ b/customize.dist/images/logo_white.png
--- a/customize.dist/pages.js
+++ b/customize.dist/pages.js
@ -14,7 +14,7 @@ define([
    };

    var footerCol = function (title, L, literal) {
-        return h('div.col', [
+        return h('div.col-6.col-sm-3', [
            h('ul.list-unstyled', [
                h('li.footer-title', {
                    'data-localization': title,
@ -46,10 +46,13 @@ define([
            h('div.container', [
                h('div.row', [
                    footerCol(null, [
+                        setHTML(h('div.cp-bio-foot'), '<p>With CryptPad, you can make quick collaborative documents for taking notes and writing down ideas together.</p>'),
+                    ], ''),
+                   /* footerCol(null, [
                        footLink('/about.html', 'about'),
                        footLink('/terms.html', 'terms'),
                        footLink('/privacy.html', 'privacy'),
-                    ], 'CryptPad'),
+                    ], 'CryptPad'),*/
                    footerCol('footer_applications', [
                        footLink('/drive/', 'main_drive'),
                        footLink('/pad/', 'main_richText'),
@ -109,13 +112,21 @@ define([
    Pages['/about.html'] = function () {
        return h('div#cp-main', [
            infopageTopbar(),
-            h('div.container.cp-container', [
+            h('div.container-fluid.cp-about-intro', [
+                h('div.container', [
                    h('center', [
+                    h('h1', Msg.about),
+                    setHTML(h('p'), 'CryptPad is created inside of the Research Team at <a href="http://xwiki.com">XWiki SAS</a>, a small business located in Paris France and Iasi Romania. There are 3 core team members working on CryptPad plus a number of contributors both inside and outside of XWiki SAS.'),
+                    ]),
+                ]),
+            ]),
+            h('div.container.cp-container', [
+                /*h('center', [
                    h('h1', Msg.about)
                ]),
-                setHTML(h('p'), 'CryptPad is created inside of the Research Team at <a href="http://xwiki.com">XWiki SAS</a>, a small business located in Paris France and Iasi Romania. There are 3 core team members working on CryptPad plus a number of contributors both inside and outside of XWiki SAS.'),
-                h('h2', 'Core Developers'),
+                setHTML(h('p'), 'CryptPad is created inside of the Research Team at <a href="http://xwiki.com">XWiki SAS</a>, a small business located in Paris France and Iasi Romania. There are 3 core team members working on CryptPad plus a number of contributors both inside and outside of XWiki SAS.'),*/
                h('div.row', [
+                    h('h2.col-12', 'Core Developers'),
                    h('div.col-md-4', [
                        h('img.bio-avatar', {'src': '/customize/images/aaron.jpg'}),
                        h('h3', "Aaron MacSween"),
@ -427,22 +438,29 @@ define([
                    display: 'block',
                }
            }, [
-                h('button#clear', Msg.canvas_clear), ' ',
-                h('button#toggleDraw', Msg.canvas_disable),
-                h('button#delete', {
+                h('button#clear.btn.btn-danger', Msg.canvas_clear), ' ',
+                h('button#toggleDraw.btn.btn-secondary', Msg.canvas_disable),
+                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'
-                }, Msg.canvas_width),
+                        'for': 'opacity',
+                    }, Msg.canvas_opacity),
                    h('input#opacity', {
                        type: 'range',
                        value: "1",
@ -450,10 +468,13 @@ define([
                        max: "1",
                        step: "0.1"
                    }),
-                h('label', {
-                    'for': 'width',
-                }),
-                h('span.selected')
+                    h('span#opacity-val', '100%')
+                ]),
+                h('span.selected', [
+                    h('img', {
+                        title: Msg.canvas_currentBrush
+                    })
+                ])
            ]),
            setHTML(h('div#colors'), '&nbsp;'),
            loadingScreen(),
@ -480,16 +501,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', {
-                            title: Msg.poll_show_help_button,
-                            style: { display: 'none' }
+                        h('button#help.btn.btn-secondary', {
+                            title: Msg.poll_show_help_button
                        }, Msg.poll_show_help_button)
                    ]),
                    h('div.realtime', [
@ -504,13 +524,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'))
                        ])
--- a/customize.dist/src/less/cryptpad.less
+++ b/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;
-    background-color: rgba(0,0,0,0.5);
-    color: white;
-    opacity: 0.7;
+    bottom: 10vh;
+    opacity: 0.9;
    box-sizing: border-box;
    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;
-            border: 1px solid #999;
-            td { text-align: center; }
+            background-color: darken(@colortheme_modal-bg, 20%);
+            td {
+                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;
-            border-right: 1px solid #BBB;
-            padding: 0 10px;
+            padding: @upload_pad_h @upload_pad_v;
        }
        .upProgress {
            width: 200px;
@ -666,9 +667,10 @@ noscript {
        .progressContainer {
            position: absolute;
            width: 0px;
-            left: 5px;
-            top: 1px; bottom: 1px;
+            left: @upload_pad_v;
+            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 {
--- a/customize.dist/src/less2/include/alertify.less
+++ b/customize.dist/src/less2/include/alertify.less
@ -114,8 +114,7 @@
                text-align: left;
                padding: @alertify_padding-base;
                background: #fff;
-                // FIXME
-                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);
+                box-shadow: @alertify_box-shadow;
            }

            .msg {
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/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);
--- a/customize.dist/src/less2/include/infopages.less
+++ b/customize.dist/src/less2/include/infopages.less
@ -74,7 +74,7 @@
    }

    footer {
-        background-color: @cryptpad_color_grey;
+        background-color: @cryptpad_color_blue;
        .container {
            .col {
                margin-top: 1em;
@ -82,20 +82,33 @@
        a {
            color: #fff;
            &:visited {
-                color: darken(#fff, 20%);
+                color: darken(#fff, 10%);
            };
        }
        margin-bottom: 1em;
        ul.list-unstyled {
-                margin: 0;
+                margin-top: 1em;
+                text-align: center;
+            }
        }
+        .cp-bio-foot {
+            background-image: url(/customize/CryptPad-white-logo.svg);
+            background-size: 100%;
+            background-repeat: no-repeat;
+            p {
+                color: #fff;
+                padding-top: 30%;
+                margin-bottom: 0;
+                
            }

+        }
        .cp-version-footer {
-            background-color: #6C6C6C;
+            background-color: @cryptpad_color_blue;
            color: #fff;
            text-align: center;
            padding: 0.5em;
+            border-top: 2px solid #fff;
        }
    }
 };
--- a/customize.dist/src/less2/include/modal.less
+++ b/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;
+        }
+    }
+}
--- a/customize.dist/src/less2/main.less
+++ b/customize.dist/src/less2/main.less
@ -2,6 +2,8 @@
 	font-family: Neuropolitical;
 	src: url(./customize/fonts/neuropolitical.ttf)
 }
+@import (once) '/customize/fonts/open-sans.less';
+
 body.cp-page-index { @import "./pages/page-index.less"; }
 body.cp-page-contact { @import "./pages/page-contact.less"; }
 body.cp-page-login { @import "./pages/page-login.less"; }
--- a/customize.dist/src/less2/pages/page-about.less
+++ b/customize.dist/src/less2/pages/page-about.less
@ -10,3 +10,26 @@
    max-width: 300px;
    max-height: 300px;
 }
+.cp-about-intro {
+	padding-top: 3em;
+	padding-bottom: 3em;
+	background-image: url(/customize/bkabout.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    .container {
+    	color: #fff;
+    	font-family: "Open Sans";
+    	h1 {
+    		font-weight: bold;
+    	}
+    	a {
+    		color: #fff;
+    		text-decoration: underline;
+    	}
+    	p {
+    		padding-top: 1em;
+    	}
+    }
+
+}
--- a/customize.dist/translations/messages.es.js
+++ b/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('');

--- a/customize.dist/translations/messages.fr.js
+++ b/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('');

--- a/customize.dist/translations/messages.js
+++ b/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>";

@ -599,11 +611,12 @@ define(function () {
    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.updated_0_header_logoTitle = 'Go to your CryptDrive';
    out.header_logoTitle = out.updated_0_header_logoTitle;
+    out.header_homeTitle = 'Go to CryptPad homepage';

    // 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 +624,7 @@ define(function () {

        '<p><em>',
        'Go ahead, just start typing...',
-        '</em></p></span>',
+        '</em></p>',
        '<p>&nbsp;<br></p>'
    ].join('');

--- a/customize.dist/translations/messages.pt-br.js
+++ b/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('');

--- a/customize.dist/translations/messages.ro.js
+++ b/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?";
--- a/customize.dist/translations/messages.zh.js
+++ b/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('');

--- a/www/code/code.less
+++ b/www/code/code.less
@ -72,7 +72,7 @@ body {

 #preview {
    max-width: 40vw;
-    margin: auto;
+    margin: 1em auto;

    .markdown_preformatted-code;
    .markdown_gfm-table(black);
--- a/www/code/main.js
+++ b/www/code/main.js
@ -402,11 +402,18 @@ define([
                });

                // add the splitter
+                if (!$iframe.has('.cp-splitter').length) {
+                    var $preview = $iframe.find('#previewContainer');
                    var splitter = $('<div>', {
                        'class': 'cp-splitter'
-                }).appendTo($iframe.find('#previewContainer'));
+                    }).appendTo($preview);
+
+                    $preview.on('scroll', function() {
+                        splitter.css('top', $preview.scrollTop() + 'px');
+                    });

                    var $target = $iframe.find('.CodeMirror');
+
                    splitter.on('mousedown', function (e) {
                        e.preventDefault();
                        var x = e.pageX;
@ -420,6 +427,7 @@ define([
                            $target.css('width', (w - x + evt.pageX) + 'px');
                        });
                    });
+                }

                Cryptpad.removeLoadingScreen();
                setEditable(true);
--- a/www/common/common-file.js
+++ b/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'
                });
            };

--- a/www/common/common-interface.js
+++ b/www/common/common-interface.js
@ -313,6 +313,7 @@ define([
                position: 'bottom',
                distance: 0,
                performance: true,
+                dynamicTitle: true,
                delay: [delay, 0]
            });
        };
--- a/www/common/file-dialog.less
+++ b/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;
        }

--- a/www/common/tippy.css
+++ b/www/common/tippy.css
--- a/www/common/tippy.min.js
+++ b/www/common/tippy.min.js
--- a/www/common/toolbar2.js
+++ b/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 () {
@ -623,20 +624,25 @@ define([
        }).appendTo(toolbar.$top);

        // We need to override the "a" tag action here because it is inside the iframe!
+        var inDrive = /^\/drive/;
+
+        var href = inDrive ? '/index.html' : '/drive/';
+        var buttonTitle = inDrive ? Messages.header_homeTitle : Messages.header_logoTitle;
+
        var $aTag = $('<a>', {
-            href: "/drive/",
-            title: Messages.header_logoTitle,
+            href: href,
+            title: buttonTitle,
            'class': "cryptpad-logo"
        }).append($('<img>', {
-            src: '/customize/images/logo_white.svg'
+            src: '/customize/images/logo_white.png'
        }));
        var onClick = function (e) {
            e.preventDefault();
            if (e.ctrlKey) {
-                window.open('/drive/');
+                window.open(href);
                return;
            }
-            window.location = "/drive/";
+            window.location = href;
        };

        var onContext = function (e) { e.stopPropagation(); };
@ -774,6 +780,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) {
--- a/www/drive/main.js
+++ b/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);
        };

--- a/www/file/file.less
+++ b/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;
-}
--- a/www/pad/main.js
+++ b/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();
--- a/www/poll/main.js
+++ b/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;
--- a/www/poll/poll.less
+++ b/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;
+}
+
--- a/www/whiteboard/main.js
+++ b/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>', {
-                src: img,
-                title: 'Current brush'
-            });
-            $controls.find('.selected').html('').append($img);
+            $controls.find('.selected > img').attr('src', 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 () {
--- a/www/whiteboard/whiteboard.less
+++ b/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-bottom: 5px;
+
+    padding: 1em;
+
+    & > * + * {
+        margin: 0;
+        margin-left: 1em;
+    }

    #width, #opacity {
        .middle;
@ -50,15 +59,36 @@ body {
        vertical-align: middle;
    }
    .selected {
-        margin-left: 20px;
-        display: inline-block;
-        height: 135px;
-        width: 135px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
        z-index: 9001;
-        text-align: center;
-        img {
-            vertical-align: middle;
+
+        width: 100px;
+        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;
 }
-