Display all applications in a grid on the home page

customize.dist/pages/index.js

@@ -3,11 +3,13 @@ define([
     '/api/config',
     '/common/hyperscript.js',
     '/common/common-feedback.js',
+    '/common/common-interface.js',
+    '/common/textFit.min.js',
     '/customize/messages.js',
     '/customize/application_config.js',
     '/common/outer/local-store.js',
     '/customize/pages.js'
-], function ($, Config, h, Feedback, Msg, AppConfig, LocalStore, Pages) {
+], function ($, Config, h, Feedback, UI, TextFit, Msg, AppConfig, LocalStore, Pages) {
     var urlArgs = Config.requireConf.urlArgs;
 
     var isAvailableType = function (x) {
@@ -26,31 +28,53 @@ define([
         var showingMore = false;
 
         var icons = [
-                [ 'pad', Msg.main_richTextPad],
+                [ 'pad', Msg.type.pad],
-                [ 'code', Msg.main_codePad],
+                [ 'code', Msg.type.code],
-                [ 'slide', Msg.main_slidePad],
+                [ 'slide', Msg.type.slide],
-                [ 'sheet', Msg.main_sheetPad],
+                [ 'sheet', Msg.type.sheet],
-                [ 'poll', Msg.main_pollPad],
+                [ 'poll', Msg.type.poll],
-                [ 'kanban', Msg.main_kanbanPad],
+                [ 'kanban', Msg.type.kanban],
-                [ 'whiteboard', Msg.main_whiteboardPad],
+                [ 'whiteboard', Msg.type.whiteboard],
-                [ 'drive', LocalStore.isLoggedIn() ? Msg.main_yourCryptDrive : Msg.main_localPads]
+                [ 'drive', Msg.type.drive]
             ].filter(function (x) {
-                return isAvailableType(x[0]) && checkRegisteredType(x[0]);
+                return isAvailableType(x[0]);
             })
             .map(function (x, i) {
                 var s = 'div.bs-callout.cp-callout-' + x[0];
-                if (i > 2) { s += '.cp-more.cp-hidden'; }
+                var isEnabled = checkRegisteredType(x[0]);
+                //if (i > 2) { s += '.cp-more.cp-hidden'; }
                 var icon = AppConfig.applicationsIcon[x[0]];
                 var font = icon.indexOf('cptools') === 0 ? 'cptools' : 'fa';
+                var href = '/'+ x[0] +'/';
+                var attr = isEnabled ? { href: href } : {
+                    onclick: function () {
+                         sessionStorage.redirectTo = href;
+                         window.location.href = '/login/';
+                    }
+                };
+                if (!isEnabled) {
+                    s += '.cp-app-disabled';
+                    attr.title = Msg.mustLogin;
+                }
                 return h('a', [
-                    { href: '/'+ x[0] +'/' },
+                    attr,
                     h(s, [
                         h('i.' + font + '.' + icon),
-                        h('div.pad-button-text', [ h('h4', x[1]) ])
+                        h('div.pad-button-text', {
+                            style: 'width:120px;height:30px;'
+                        }, [ x[1] ])
                     ])
                 ]);
             });
 
+        icons.forEach(function (a) {
+            setTimeout(function () {
+                TextFit($(a).find('.pad-button-text')[0], {minFontSize: 13, maxFontSize: 18});
+            });
+        });
+        UI.addTooltips();
+
+        /*
         var more = icons.length < 4? undefined: h('div.bs-callout.cp-callout-more', [
                 h('div.cp-callout-more-lessmsg.cp-hidden', [
                     "see less ",
@@ -72,7 +96,7 @@ define([
                         showingMore = !showingMore;
                     }
                 }
-            ]);
+            ]);*/
 
         var _link = h('a', {
             href: "https://opencollective.com/cryptpad/contribute",
@@ -131,9 +155,9 @@ define([
                             h('h1', 'CryptPad'),
                             h('p', Msg.main_catch_phrase)
                         ]),
-                        h('div.col-12.col-sm-6', [
+                        h('div.col-12.col-sm-6.cp-app-grid', [
                             icons,
-                            more
+                            //more
                         ])
                     ]),
                     blocks,

customize.dist/src/less2/pages/page-index.less

@@ -103,16 +103,28 @@
     a:hover {
         text-decoration: none;
     }
+
+    .cp-app-grid {
+        display: flex;
+        flex-wrap: wrap;
+        & > a {
+            margin: 20px;
+        }
+    }
+    @icons-size: 120px;
+    @icons-text-size: 30px;
     .bs-callout {
         display: flex;
         align-items: stretch;
-        margin: 25px 0;
+        margin: 0;
         background: rgba(255,255,255,0.6);
         color: black;
         transition: all .1s ease-in-out;
         box-sizing: border-box;
-        height: 5em;
         position: relative;
+        flex-flow: column;
+        height: @icons-size;
+        width: @icons-size;
         a {
             color: black;
             &:hover { text-decoration-line: none; }
@@ -122,6 +134,31 @@
                 font-size: 1.3em;
             }
         }
+        div {
+            flex: 1;
+            min-height: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            font-size: 16px;
+        }
+        .fa, .cptools {
+            display: flex;
+            align-items: center;
+            font-size: @icons-size - 60px;
+            justify-content: center;
+            width: @icons-size;
+            height: @icons-size - @icons-text-size;
+            transition: width 0.1s;
+            color: #fff;
+        }
+        &.cp-app-disabled {
+            cursor: not-allowed !important;
+            opacity: 0.5;
+        }
     }
     h4 {
         margin: 0;
@@ -129,14 +166,6 @@
     .cp-callout-more-moremsg,.cp-callout-more-lessmsg {
         transform: none !important;
     }
-    .bs-callout div {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        position: absolute;
-        left: 5em;
-    }
     .bs-callout+.bs-callout {
         margin-top: -5px;
     }
@@ -147,18 +176,7 @@
         cursor: pointer;
     }
     .bs-callout:hover.cp-callout-more {
-            transform: none !important;
+        transform: none !important;
-    }
-    .bs-callout {
-        .fa, .cptools {
-            display: flex;
-            align-items: center;
-            font-size: 2.5em;
-            justify-content: center;
-            width: 1.3em;
-            transition: width 0.1s;
-            color: #fff;
-        }
     }
     .cp-callout-pad .cptools { background-color: @colortheme_pad-bg; }
     .cp-callout-code .cptools { background-color: @colortheme_code-bg; }

www/common/textFit.min.js

@@ -0,0 +1 @@
+(function(root,factory){"use strict";if(typeof define==="function"&&define.amd){define([],factory)}else if(typeof exports==="object"){module.exports=factory()}else{root.textFit=factory()}})(typeof global==="object"?global:this,function(){"use strict";var defaultSettings={alignVert:false,alignHoriz:false,multiLine:false,detectMultiLine:true,minFontSize:6,maxFontSize:80,reProcess:true,widthOnly:false,alignVertWithFlexbox:false};return function textFit(els,options){if(!options)options={};var settings={};for(var key in defaultSettings){if(options.hasOwnProperty(key)){settings[key]=options[key]}else{settings[key]=defaultSettings[key]}}if(typeof els.toArray==="function"){els=els.toArray()}var elType=Object.prototype.toString.call(els);if(elType!=="[object Array]"&&elType!=="[object NodeList]"&&elType!=="[object HTMLCollection]"){els=[els]}for(var i=0;i<els.length;i++){processItem(els[i],settings)}};function processItem(el,settings){if(!isElement(el)||!settings.reProcess&&el.getAttribute("textFitted")){return false}if(!settings.reProcess){el.setAttribute("textFitted",1)}var innerSpan,originalHeight,originalHTML,originalWidth;var low,mid,high;originalHTML=el.innerHTML;originalWidth=innerWidth(el);originalHeight=innerHeight(el);if(!originalWidth||!settings.widthOnly&&!originalHeight){if(!settings.widthOnly)throw new Error("Set a static height and width on the target element "+el.outerHTML+" before using textFit!");else throw new Error("Set a static width on the target element "+el.outerHTML+" before using textFit!")}if(originalHTML.indexOf("textFitted")===-1){innerSpan=document.createElement("span");innerSpan.className="textFitted";innerSpan.style["display"]="inline-block";innerSpan.innerHTML=originalHTML;el.innerHTML="";el.appendChild(innerSpan)}else{innerSpan=el.querySelector("span.textFitted");if(hasClass(innerSpan,"textFitAlignVert")){innerSpan.className=innerSpan.className.replace("textFitAlignVert","");innerSpan.style["height"]="";el.className.replace("textFitAlignVertFlex","")}}if(settings.alignHoriz){el.style["text-align"]="center";innerSpan.style["text-align"]="center"}var multiLine=settings.multiLine;if(settings.detectMultiLine&&!multiLine&&innerSpan.scrollHeight>=parseInt(window.getComputedStyle(innerSpan)["font-size"],10)*2){multiLine=true}if(!multiLine){el.style["white-space"]="nowrap"}low=settings.minFontSize+1;high=settings.maxFontSize+1;while(low<=high){mid=parseInt((low+high)/2,10);innerSpan.style.fontSize=mid+"px";if(innerSpan.scrollWidth<=originalWidth&&(settings.widthOnly||innerSpan.scrollHeight<=originalHeight)){low=mid+1}else{high=mid-1}}innerSpan.style.fontSize=mid-1+"px";if(settings.alignVert){addStyleSheet();var height=innerSpan.scrollHeight;if(window.getComputedStyle(el)["position"]==="static"){el.style["position"]="relative"}if(!hasClass(innerSpan,"textFitAlignVert")){innerSpan.className=innerSpan.className+" textFitAlignVert"}innerSpan.style["height"]=height+"px";if(settings.alignVertWithFlexbox&&!hasClass(el,"textFitAlignVertFlex")){el.className=el.className+" textFitAlignVertFlex"}}}function innerHeight(el){var style=window.getComputedStyle(el,null);return el.clientHeight-parseInt(style.getPropertyValue("padding-top"),10)-parseInt(style.getPropertyValue("padding-bottom"),10)}function innerWidth(el){var style=window.getComputedStyle(el,null);return el.clientWidth-parseInt(style.getPropertyValue("padding-left"),10)-parseInt(style.getPropertyValue("padding-right"),10)}function isElement(o){return typeof HTMLElement==="object"?o instanceof HTMLElement:o&&typeof o==="object"&&o!==null&&o.nodeType===1&&typeof o.nodeName==="string"}function hasClass(element,cls){return(" "+element.className+" ").indexOf(" "+cls+" ")>-1}function addStyleSheet(){if(document.getElementById("textFitStyleSheet"))return;var style=[".textFitAlignVert{","position: absolute;","top: 0; right: 0; bottom: 0; left: 0;","margin: auto;","display: flex;","justify-content: center;","flex-direction: column;","}",".textFitAlignVertFlex{","display: flex;","}",".textFitAlignVertFlex .textFitAlignVert{","position: static;","}"].join("");var css=document.createElement("style");css.type="text/css";css.id="textFitStyleSheet";css.innerHTML=style;document.body.appendChild(css)}});

www/common/translations/messages.json

@@ -12,7 +12,7 @@
         "media": "Media",
         "todo": "Todo",
         "contacts": "Contacts",
-        "sheet": "Spreadsheet (Beta)"
+        "sheet": "Sheet (Beta)"
     },
     "button_newpad": "New Rich Text pad",
     "button_newcode": "New Code pad",
@@ -20,6 +20,7 @@
     "button_newslide": "New Presentation",
     "button_newwhiteboard": "New Whiteboard",
     "button_newkanban": "New Kanban",
+    "button_newsheet": "New Sheet",
     "common_connectionLost": "<b>Server Connection Lost</b><br>You're now in read-only mode until the connection is back.",
     "websocketError": "Unable to connect to the websocket server...",
     "typeError": "This pad is not compatible with the selected application",
@@ -614,20 +615,6 @@
     "main_about_p26": "If you have any questions or comments, feel free to reach out!",
     "main_info": "<h2>Collaborate in Confidence</h2> Grow your ideas together with shared documents while <strong>Zero Knowledge</strong> technology secures your privacy; <strong>even from us</strong>.",
     "main_catch_phrase": "The Zero Knowledge Cloud",
-    "main_richText": "Rich Text editor",
-    "main_code": "Code editor",
-    "main_slide": "Slide editor",
-    "main_poll": "Polls",
-    "main_drive": "CryptDrive",
-    "main_richTextPad": "Rich Text Pad",
-    "main_codePad": "Markdown/Code Pad",
-    "main_sheetPad": "Spreadsheets (Beta)",
-    "main_slidePad": "Markdown Presentation",
-    "main_pollPad": "Poll or Schedule",
-    "main_whiteboardPad": "Whiteboard",
-    "main_kanbanPad": "Kanban",
-    "main_localPads": "Local Pads",
-    "main_yourCryptDrive": "Your CryptDrive",
     "main_footerText": "With CryptPad, you can make quick collaborative documents for taking notes and writing down ideas together.",
     "footer_applications": "Applications",
     "footer_contact": "Contact",