Display all applications in a grid on the home page
This commit is contained in:
yflory
@@ -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,
|
||||
|
||||
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user