Remove the top bar and move its content in the applications' toolbars

2016-10-25 15:22:35 +02:00
parent 3d74290c7d
commit 6351d1856f
14 changed files with 343 additions and 102 deletions
--- a/customize.dist/DecorateToolbar.js
+++ b/customize.dist/DecorateToolbar.js
@@ -10,6 +10,11 @@ define([
    var main = function () {
        var url = window.location.pathname;
        var isHtml = /\.html/.test(url) || url === '/' || url === '';
+        var isPoll = /\/poll\//.test(url);
+        if (!isHtml && !isPoll) {
+            Messages._applyTranslation();
+            return;
+        }
        $.ajax({
            url: isHtml ? '/customize/BottomBar.html' : '/customize/Header.html',
            success: function (ret) {
--- a/customize.dist/languageSelector.js
+++ b/customize.dist/languageSelector.js
@@ -20,8 +20,8 @@ define(['/bower_components/jquery/dist/jquery.min.js'], function() {
        return getStoredLanguage() || getBrowserLanguage();
    };

-    var main = out.main = function () {
-        var selector = $('#language-selector');
+    var main = out.main = function ($select) {
+        var selector = $select || $('#language-selector');
        if (!selector.length) { return; }

        // Select the current language in the list
--- a/customize.dist/messages.js
+++ b/customize.dist/messages.js
@@ -22,6 +22,15 @@ define(['/customize/languageSelector.js',
        messages = $.extend(true, {}, Default, map[language]);
    }

+    messages._languages = {
+        'en': Default._languageName
+    }
+    for (var l in map) {
+        messages._languages[l] = map[l]._languageName || l;
+    }
+
+    messages._initSelector = LS.main;
+
    // Get keys with parameters
    messages._getKey = function (key, argArray) {
        if (!messages[key]) { return '?'; }
--- a/customize.dist/src/toolbar.less
+++ b/customize.dist/src/toolbar.less
@@ -39,7 +39,7 @@
        }
    }

-    button, .rightside-element {
+    button, select, .rightside-element {
        height: 26px;
        padding-right: 5px;
        padding-left: 5px;
@@ -108,28 +108,92 @@
 .cryptpad-toolbar-top {
    display: block;
    text-align: center;
+    height: 3em;
+    position: relative;
+    margin-bottom: 3px;
+    @media screen and (max-width: 400px) {
+        height: 6em;
+    }
    .cryptpad-title {
-        text-align: center;
+        span {
+            font-size: 1.5em;
+            vertical-align: middle;
+            line-height: 2em;
+            &:hover {
+                border: 1px solid #888;
+                border-radius: 2px;
+                background: white;
+                padding: 5px;
+            }
+        }
        input {
+            font-size: 1.5em;
+            vertical-align: middle;
+            height: 100%;
+            box-sizing: border-box;
            border: 1px solid black;
            background: #fff;
            cursor: auto;
            width: 300px;
-            padding: 5px;
-            -webkit-touch-callout: text;
-            -webkit-user-select: text;
-            -khtml-user-select: text;
-            -moz-user-select: text;
-            -ms-user-select: text;
-            user-select: text;
-            &:focus {
-                -webkit-touch-callout: text;
-                -webkit-user-select: text;
-                -khtml-user-select: text;
-                -moz-user-select: text;
-                -ms-user-select: text;
-                user-select: text;
+            padding: 0px 5px;
+        }
+    }
+    .cryptpad-link {
+        position: absolute;
+        left: 0px;
+        height: 3em;
+        @media screen and (max-width: 400px) {
+            top: 3em;
+        }
+        @media screen and (min-width: 401px) {
+            top: 0px;
+        }
+
+        a.cryptpad-logo {
+            cursor: pointer;
+            height: 3em;
+            border: 1px solid #aaa;
+            border-radius: @border-radius;
+            padding: 0px 5px;
+            text-decoration: none;
+            color: inherit;
+            img {
+                vertical-align: middle;
+                height: 3em;
+                cursor: pointer;
            }
+            span {
+                font-size: 1.5em;
+                margin-left: 5px;
+                vertical-align: middle;
+                cursor: pointer;
+            }
+        }
+        .big {
+            @media screen and (max-width: 400px) {
+                display: none;
+            }
+            @media screen and (min-width: 401px) {
+                display: inline-block;
+            }
+        }
+        .small {
+            @media screen and (max-width: 400px) {
+                display: inline-block;
+            }
+            @media screen and (min-width: 401px) {
+                display: none;
+            }
+        }
+    }
+    .cryptpad-user {
+        position: absolute;
+        right: 0;
+        @media screen and (max-width: 400px) {
+            top: 3em;
+        }
+        @media screen and (min-width: 401px) {
+            top: 0px;
        }
    }
 }
--- a/customize.dist/toolbar.css
+++ b/customize.dist/toolbar.css
@@ -38,6 +38,7 @@
  margin: 2px 0px 2px 4px;
 }
 .cryptpad-toolbar button,
+.cryptpad-toolbar select,
 .cryptpad-toolbar .rightside-element {
  height: 26px;
  padding-right: 5px;
@@ -104,30 +105,105 @@
 .cryptpad-toolbar-top {
  display: block;
  text-align: center;
+  height: 3em;
+  position: relative;
+  margin-bottom: 3px;
 }
-.cryptpad-toolbar-top .cryptpad-title {
-  text-align: center;
+@media screen and (max-width: 400px) {
+  .cryptpad-toolbar-top {
+    height: 6em;
+  }
+}
+.cryptpad-toolbar-top .cryptpad-title span {
+  font-size: 1.5em;
+  vertical-align: middle;
+  line-height: 2em;
+}
+.cryptpad-toolbar-top .cryptpad-title span:hover {
+  border: 1px solid #888;
+  border-radius: 2px;
+  background: white;
+  padding: 5px;
 }
 .cryptpad-toolbar-top .cryptpad-title input {
+  font-size: 1.5em;
+  vertical-align: middle;
+  height: 100%;
+  box-sizing: border-box;
  border: 1px solid black;
  background: #fff;
  cursor: auto;
  width: 300px;
-  padding: 5px;
-  -webkit-touch-callout: text;
-  -webkit-user-select: text;
-  -khtml-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
-  user-select: text;
+  padding: 0px 5px;
 }
-.cryptpad-toolbar-top .cryptpad-title input:focus {
-  -webkit-touch-callout: text;
-  -webkit-user-select: text;
-  -khtml-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
-  user-select: text;
+.cryptpad-toolbar-top .cryptpad-link {
+  position: absolute;
+  left: 0px;
+  height: 3em;
+}
+@media screen and (max-width: 400px) {
+  .cryptpad-toolbar-top .cryptpad-link {
+    top: 3em;
+  }
+}
+@media screen and (min-width: 401px) {
+  .cryptpad-toolbar-top .cryptpad-link {
+    top: 0px;
+  }
+}
+.cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo {
+  cursor: pointer;
+  height: 3em;
+  border: 1px solid #aaa;
+  border-radius: 1px;
+  padding: 0px 5px;
+  text-decoration: none;
+  color: inherit;
+}
+.cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo img {
+  vertical-align: middle;
+  height: 3em;
+  cursor: pointer;
+}
+.cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo span {
+  font-size: 1.5em;
+  margin-left: 5px;
+  vertical-align: middle;
+  cursor: pointer;
+}
+@media screen and (max-width: 400px) {
+  .cryptpad-toolbar-top .cryptpad-link .big {
+    display: none;
+  }
+}
+@media screen and (min-width: 401px) {
+  .cryptpad-toolbar-top .cryptpad-link .big {
+    display: inline-block;
+  }
+}
+@media screen and (max-width: 400px) {
+  .cryptpad-toolbar-top .cryptpad-link .small {
+    display: inline-block;
+  }
+}
+@media screen and (min-width: 401px) {
+  .cryptpad-toolbar-top .cryptpad-link .small {
+    display: none;
+  }
+}
+.cryptpad-toolbar-top .cryptpad-user {
+  position: absolute;
+  right: 0;
+}
+@media screen and (max-width: 400px) {
+  .cryptpad-toolbar-top .cryptpad-user {
+    top: 3em;
+  }
+}
+@media screen and (min-width: 401px) {
+  .cryptpad-toolbar-top .cryptpad-user {
+    top: 0px;
+  }
 }
 .cryptpad-toolbar-leftside {
  float: left;
--- a/customize.dist/translations/messages.fr.js
+++ b/customize.dist/translations/messages.fr.js
@@ -1,6 +1,8 @@
 define(function () {
    var out = {};

+    out._languageName = "Français";
+
    out.main_title = "Cryptpad: Editeur collaboratif en temps réel, zero knowledge";

    out.type = {};
--- a/customize.dist/translations/messages.js
+++ b/customize.dist/translations/messages.js
@@ -1,6 +1,8 @@
 define(function () {
    var out = {};

+    out._languageName = 'English';
+
    out.main_title = "Cryptpad: Zero Knowledge, Collaborative Real Time Editing";

    out.type = {};