From 3413235d6359a73993063ed7d887e43c24f5ac6b Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 28 Mar 2019 16:58:46 +0100 Subject: [PATCH] Display all applications in a grid on the home page --- customize.dist/pages/index.js | 56 ++++++++++++----- .../src/less2/pages/page-index.less | 62 ++++++++++++------- www/common/textFit.min.js | 1 + www/common/translations/messages.json | 17 +---- 4 files changed, 83 insertions(+), 53 deletions(-) create mode 100644 www/common/textFit.min.js diff --git a/customize.dist/pages/index.js b/customize.dist/pages/index.js index ab2a01fc5..51589ebca 100644 --- a/customize.dist/pages/index.js +++ b/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], - [ 'code', Msg.main_codePad], - [ 'slide', Msg.main_slidePad], - [ 'sheet', Msg.main_sheetPad], - [ 'poll', Msg.main_pollPad], - [ 'kanban', Msg.main_kanbanPad], - [ 'whiteboard', Msg.main_whiteboardPad], - [ 'drive', LocalStore.isLoggedIn() ? Msg.main_yourCryptDrive : Msg.main_localPads] + [ 'pad', Msg.type.pad], + [ 'code', Msg.type.code], + [ 'slide', Msg.type.slide], + [ 'sheet', Msg.type.sheet], + [ 'poll', Msg.type.poll], + [ 'kanban', Msg.type.kanban], + [ 'whiteboard', Msg.type.whiteboard], + [ '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, diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less index a989b7d88..b0070de53 100644 --- a/customize.dist/src/less2/pages/page-index.less +++ b/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; - } - .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; - } + transform: none !important; } .cp-callout-pad .cptools { background-color: @colortheme_pad-bg; } .cp-callout-code .cptools { background-color: @colortheme_code-bg; } diff --git a/www/common/textFit.min.js b/www/common/textFit.min.js new file mode 100644 index 000000000..f6ce43954 --- /dev/null +++ b/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=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)}}); \ No newline at end of file diff --git a/www/common/translations/messages.json b/www/common/translations/messages.json index 5f377e9ba..8d0d2c107 100644 --- a/www/common/translations/messages.json +++ b/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": "Server Connection Lost
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": "

Collaborate in Confidence

Grow your ideas together with shared documents while Zero Knowledge technology secures your privacy; even from us.", "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",