Merge remote-tracking branch 'origin/rebrand' into rebrand

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

@@ -96,7 +96,7 @@
                 a {
                     position: absolute;
                     top: 7px;
-                    margin-left: 10px;
+                    margin-left: 30px;
                     font-size: 16px;
                     color: inherit;
                 }
@@ -290,6 +290,7 @@
                 width: 100%;
                 //flex: 1 0 auto;
                 flex-wrap: nowrap;
+                justify-content: space-between;
                 .cp-creation-template-more {
                     font-size: 30px;
                     cursor: pointer;
@@ -311,21 +312,22 @@
             }
             .cp-creation-template-container {
                 width: 100%;
+                max-width: ~"calc(100% - 60px)";
                 flex: 1;
                 display: flex;
-                flex-wrap: wrap;
+                flex-flow: column wrap;
-                justify-content: center;
                 //overflow-y: auto;
+                max-height: 156px;
                 align-items: center;
                 .cp-creation-template-element {
                     box-shadow: 2px 2px 7px @colortheme_form-border;
-                    width: 135px;
+                    width: 300px;
+                    max-width: calc(100% - 10px);
                     padding: 5px;
                     margin: 5px;
                     display: inline-flex;
-                    flex-flow: column;
 
-                    box-sizing: content-box;
+                    box-sizing: border-box;
 
                     text-align: left;
                     line-height: 1em;
@@ -350,9 +352,10 @@
                     align-items: center;
 
                     img {
-                        max-width: 100px;
+                        max-width: 30px;
-                        max-height: 100px;
+                        max-height: 30px;
                         background: #fff;
+                        margin-right: 10px;
                     }
 
                     .cp-creation-template-element-name {
@@ -363,18 +366,15 @@
                         min-height: 20px;
                         height: 20px;
                         line-height: 20px;
-                        margin-top: 5px;
                         max-width: 100%;
                     }
                     .fa, .cptools {
                         color: @creation-bg-color;
                         color: var(--creation-bg-color);
                         cursor: pointer;
-                        width: 100px;
+                        font-size: 30px;
-                        height: 100px;
-                        font-size: 70px;
                         text-align: center;
-                        line-height: 100px;
+                        margin-right: 10px;
                     }
                 }
             }
@@ -401,12 +401,12 @@
             }
         }
     }
-        @media screen and (max-width: 500px) {
+    @media screen and (max-width: 400px) {
         #cp-creation {
             #cp-creation-form {
                 & > div {
                     width: 95%;
-                        margin: 10px auto;
+                    margin: 0 auto;
                 }
                 .cp-creation-expire {
                     &.active {
@@ -423,35 +423,12 @@
             }
         }
     }
-        @media screen and (max-width: @browser_media-medium-screen) {
+    @media screen and (max-width: 800px) {
         #cp-creation {
-                height: auto;
+            height: 550px;
             #cp-creation-form {
                 div.cp-creation-template {
-                        margin: 0;
+                    flex-flow: column;
-                        padding: 5px;
-                        .cp-creation-template-container {
-                            .cp-creation-template-element {
-                                flex-flow: row;
-                                margin: 1px;
-                                padding: 5px;
-                                width: 155px;
-                                img {
-                                    display: none;
-                                }
-                                .fa {
-                                    font-size: 18px;
-                                    width: 20px;
-                                    height: 20px;
-                                    line-height: 20px;
-                                    display: inline !important;
-                                }
-                                .cp-creation-template-element-name {
-                                    margin: 0;
-                                    margin-left: 5px;
-                                }
-                            }
-                        }
                 }
             }
         }

www/common/common-interface.js

@@ -1163,7 +1163,14 @@ define([
             }
         });
 
-        $input.change(function () { $mark.focus(); });
+        $input.change(function () {
+            if (!opts.labelAlt) { return; }
+            if ($input.is(':checked') !== checked) {
+                $(label).text(opts.labelAlt);
+            } else {
+                $(label).text(labelTxt);
+            }
+        });
 
         return h('label.cp-checkmark', labelOpts, [
             input,

www/common/common-ui-elements.js

@@ -2188,8 +2188,13 @@ define([
 
         // XXX rewrite "creation_expire2": "An <b>expiring</b> pad has a set lifetime, after which it will be automatically removed from the server and other users' CryptDrives."
 
+
+        Messages.creation_expiration = "Expiration date"; // XXX
+        Messages.creation_expiresIn = "Expires in"; // XXX
         var expire = h('div.cp-creation-expire', [
-            UI.createCheckbox('cp-creation-expire', Messages.creation_expire, false),
+            UI.createCheckbox('cp-creation-expire', Messages.creation_expiration, false, {
+                labelAlt: Messages.creation_expiresIn
+            }),
             h('span.cp-creation-expire-picker.cp-creation-slider', [
                 h('input#cp-creation-expire-val', {
                     type: "number",
@@ -2209,6 +2214,7 @@ define([
         ]);
 
         // Password
+        Messages.creation_password = "Password"; // XXX
         var password = h('div.cp-creation-password', [
             UI.createCheckbox('cp-creation-password', Messages.creation_password, false),
             h('span.cp-creation-password-picker.cp-creation-slider', [
@@ -2220,8 +2226,15 @@ define([
             //createHelper('#', "TODO: password protection adds another layer of security ........") // TODO
         ]);
 
+        var $w = $(window);
+        var big = $w.width() > 800;
+
         var right = h('span.fa.fa-chevron-right.cp-creation-template-more');
         var left = h('span.fa.fa-chevron-left.cp-creation-template-more');
+        if (!big) {
+            $(left).removeClass('fa-chevron-left').addClass('fa-chevron-up');
+            $(right).removeClass('fa-chevron-right').addClass('fa-chevron-down');
+        }
         var templates = h('div.cp-creation-template', [
             left,
             h('div.cp-creation-template-container', [
@@ -2245,7 +2258,7 @@ define([
         // Display templates
 
         var selected = 0; // Selected template in the list (highlighted)
-        var TEMPLATES_DISPLAYED = 4; // Max templates displayed per page
+        var TEMPLATES_DISPLAYED = big ? 6 : 3; // Max templates displayed per page
         var next = function () {}; // Function called when pressing tab to highlight the next template
         var i = 0; // Index of the first template displayed in the current page
         sframeChan.query("Q_CREATE_TEMPLATES", type, function (err, res) {
@@ -2359,6 +2372,20 @@ define([
                     .addClass('cp-creation-template-selected');
             };
 
+            $w.on('resize', function () {
+                var _big = $w.width() > 800;
+                if (big === _big) { return; }
+                big = _big;
+                if (!big) {
+                    $(left).removeClass('fa-chevron-left').addClass('fa-chevron-up');
+                    $(right).removeClass('fa-chevron-right').addClass('fa-chevron-down');
+                } else {
+                    $(left).removeClass('fa-chevron-up').addClass('fa-chevron-left');
+                    $(right).removeClass('fa-chevron-down').addClass('fa-chevron-right');
+                }
+                TEMPLATES_DISPLAYED = big ? 6 : 3;
+                redraw(0);
+            });
         });
 
         // Display expiration form when checkbox checked