Add notification app base
This commit is contained in:
ClemDee
parent
60673103ad
commit
5601e50511
8 changed files with 264 additions and 2 deletions
|
|
@ -135,6 +135,10 @@
|
|||
@colortheme_admin-color: #FFF;
|
||||
@colortheme_admin-warn: #ffae00;
|
||||
|
||||
@colortheme_notifications-bg: #7c0404;
|
||||
@colortheme_notifications-color: #FFF;
|
||||
@colortheme_notifications-warn: #ffae00;
|
||||
|
||||
// Sidebar layout (profile / settings)
|
||||
@colortheme_sidebar-active: #fff;
|
||||
@colortheme_sidebar-left-bg: #eee;
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ define(function() {
|
|||
* users and these users will be redirected to the login page if they still try to access
|
||||
* the app
|
||||
*/
|
||||
config.registeredOnlyTypes = ['file', 'contacts', 'oodoc', 'ooslide', 'sheet'];
|
||||
config.registeredOnlyTypes = ['file', 'contacts', 'oodoc', 'ooslide', 'sheet', 'notifications'];
|
||||
|
||||
/* CryptPad is available is multiple languages, but only English and French are maintained
|
||||
* by the developers. The other languages may be outdated, and any missing string for a langauge
|
||||
|
|
|
|||
|
|
@ -17,6 +17,6 @@ define(function () {
|
|||
// Sub
|
||||
plan: 'CryptPad_plan',
|
||||
// Apps
|
||||
criticalApps: ['profile', 'settings', 'debug', 'admin']
|
||||
criticalApps: ['profile', 'settings', 'debug', 'admin', 'notifications']
|
||||
};
|
||||
});
|
||||
|
|
|
|||
16
www/notifications/app-notifications.less
Normal file
16
www/notifications/app-notifications.less
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
@import (reference) '../../customize/src/less2/include/framework.less';
|
||||
@import (reference) '../../customize/src/less2/include/sidebar-layout.less';
|
||||
|
||||
&.cp-app-notifications {
|
||||
|
||||
.framework_min_main(
|
||||
@bg-color: @colortheme_notifications-bg,
|
||||
@warn-color: @colortheme_notifications-warn,
|
||||
@color: @colortheme_notifications-color
|
||||
);
|
||||
.sidebar-layout_main();
|
||||
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
12
www/notifications/index.html
Normal file
12
www/notifications/index.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CryptPad</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="referrer" content="no-referrer" />
|
||||
<script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||
<link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<iframe id="sbox-iframe">
|
||||
18
www/notifications/inner.html
Normal file
18
www/notifications/inner.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="cp-app-noscroll">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||
<script async data-bootload="/notifications/inner.js" data-main="/common/sframe-boot.js?ver=1.6" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||
<style>
|
||||
.loading-hidden { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="cp-app-notifications">
|
||||
<div id="cp-toolbar" class="cp-toolbar-container"></div>
|
||||
<div id="cp-sidebarlayout-container"></div>
|
||||
<noscript>
|
||||
<p><strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.</p>
|
||||
<p><strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.</p>
|
||||
</noscript>
|
||||
</body>
|
||||
|
||||
157
www/notifications/inner.js
Normal file
157
www/notifications/inner.js
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
define([
|
||||
'jquery',
|
||||
'/api/config',
|
||||
'/bower_components/chainpad-crypto/crypto.js',
|
||||
'/common/toolbar3.js',
|
||||
'/bower_components/nthen/index.js',
|
||||
'/common/sframe-common.js',
|
||||
'/common/hyperscript.js',
|
||||
'/customize/messages.js',
|
||||
'/common/common-interface.js',
|
||||
'/common/common-util.js',
|
||||
|
||||
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
||||
'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
||||
'less!/notifications/app-notifications.less',
|
||||
], function (
|
||||
$,
|
||||
ApiConfig,
|
||||
Crypto,
|
||||
Toolbar,
|
||||
nThen,
|
||||
SFCommon,
|
||||
h,
|
||||
Messages,
|
||||
UI,
|
||||
Util
|
||||
)
|
||||
{
|
||||
var APP = {};
|
||||
|
||||
var common;
|
||||
var sFrameChan;
|
||||
|
||||
var categories = {
|
||||
'all': [
|
||||
'cp-notifications-all',
|
||||
],
|
||||
'friends': [
|
||||
'cp-notifications-friend-requests',
|
||||
]
|
||||
};
|
||||
|
||||
var create = {};
|
||||
|
||||
var makeBlock = function (key, addButton) {
|
||||
// Convert to camlCase for translation keys
|
||||
var safeKey = key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
|
||||
|
||||
var $div = $('<div>', {'class': 'cp-notifications-' + key + ' cp-sidebarlayout-element'});
|
||||
$('<label>').text(Messages['notification_'+safeKey+'Title'] || key).appendTo($div);
|
||||
$('<span>', {'class': 'cp-sidebarlayout-description'})
|
||||
.text(Messages['notification_'+safeKey+'Hint'] || 'Coming soon...').appendTo($div);
|
||||
if (addButton) {
|
||||
$('<button>', {
|
||||
'class': 'btn btn-primary'
|
||||
}).text(Messages['notification_'+safeKey+'Button'] || safeKey).appendTo($div);
|
||||
}
|
||||
return $div;
|
||||
};
|
||||
create['all'] = function () {
|
||||
var key = 'all';
|
||||
var $div = makeBlock(key);
|
||||
var notif = h("div");
|
||||
$div.append(notif);
|
||||
return $div;
|
||||
};
|
||||
|
||||
|
||||
var hideCategories = function () {
|
||||
APP.$rightside.find('> div').hide();
|
||||
};
|
||||
var showCategories = function (cat) {
|
||||
hideCategories();
|
||||
cat.forEach(function (c) {
|
||||
APP.$rightside.find('.'+c).show();
|
||||
});
|
||||
};
|
||||
var createLeftside = function () {
|
||||
var $categories = $('<div>', {'class': 'cp-sidebarlayout-categories'})
|
||||
.appendTo(APP.$leftside);
|
||||
var metadataMgr = common.getMetadataMgr();
|
||||
var privateData = metadataMgr.getPrivateData();
|
||||
var active = privateData.category || 'all';
|
||||
common.setHash(active);
|
||||
Object.keys(categories).forEach(function (key) {
|
||||
var $category = $('<div>', {'class': 'cp-sidebarlayout-category'}).appendTo($categories);
|
||||
if (key === 'general') { $category.append($('<span>', {'class': 'fa fa-user-o'})); }
|
||||
if (key === 'stats') { $category.append($('<span>', {'class': 'fa fa-hdd-o'})); }
|
||||
|
||||
if (key === active) {
|
||||
$category.addClass('cp-leftside-active');
|
||||
}
|
||||
|
||||
$category.click(function () {
|
||||
if (!Array.isArray(categories[key]) && categories[key].onClick) {
|
||||
categories[key].onClick();
|
||||
return;
|
||||
}
|
||||
active = key;
|
||||
common.setHash(key);
|
||||
$categories.find('.cp-leftside-active').removeClass('cp-leftside-active');
|
||||
$category.addClass('cp-leftside-active');
|
||||
showCategories(categories[key]);
|
||||
});
|
||||
|
||||
$category.append(Messages['notification_cat_'+key] || key);
|
||||
});
|
||||
showCategories(categories[active]);
|
||||
};
|
||||
|
||||
var createToolbar = function () {
|
||||
var displayed = ['useradmin', 'newpad', 'limit', 'pageTitle', 'notifications'];
|
||||
var configTb = {
|
||||
displayed: displayed,
|
||||
sfCommon: common,
|
||||
$container: APP.$toolbar,
|
||||
pageTitle: Messages.notificationsPage || 'Notifications',
|
||||
metadataMgr: common.getMetadataMgr(),
|
||||
};
|
||||
APP.toolbar = Toolbar.create(configTb);
|
||||
APP.toolbar.$rightside.hide();
|
||||
};
|
||||
|
||||
nThen(function (waitFor) {
|
||||
$(waitFor(UI.addLoadingScreen));
|
||||
SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
|
||||
}).nThen(function (waitFor) {
|
||||
APP.$container = $('#cp-sidebarlayout-container');
|
||||
APP.$toolbar = $('#cp-toolbar');
|
||||
APP.$leftside = $('<div>', {id: 'cp-sidebarlayout-leftside'}).appendTo(APP.$container);
|
||||
APP.$rightside = $('<div>', {id: 'cp-sidebarlayout-rightside'}).appendTo(APP.$container);
|
||||
sFrameChan = common.getSframeChannel();
|
||||
sFrameChan.onReady(waitFor());
|
||||
}).nThen(function (/*waitFor*/) {
|
||||
createToolbar();
|
||||
common.setTabTitle(Messages.notificationsPage || 'Notifications');
|
||||
|
||||
|
||||
// Content
|
||||
var $rightside = APP.$rightside;
|
||||
var addItem = function (cssClass) {
|
||||
var item = cssClass.slice(17); // remove 'cp-notifications-'
|
||||
if (typeof (create[item]) === "function") {
|
||||
$rightside.append(create[item]());
|
||||
}
|
||||
};
|
||||
for (var cat in categories) {
|
||||
if (!Array.isArray(categories[cat])) { continue; }
|
||||
categories[cat].forEach(addItem);
|
||||
}
|
||||
|
||||
createLeftside();
|
||||
|
||||
UI.removeLoadingScreen();
|
||||
|
||||
});
|
||||
});
|
||||
55
www/notifications/main.js
Normal file
55
www/notifications/main.js
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
// Load #1, load as little as possible because we are in a race to get the loading screen up.
|
||||
define([
|
||||
'/bower_components/nthen/index.js',
|
||||
'/api/config',
|
||||
'/common/dom-ready.js',
|
||||
'/common/requireconfig.js',
|
||||
'/common/sframe-common-outer.js',
|
||||
], function (nThen, ApiConfig, DomReady, RequireConfig, SFCommonO) {
|
||||
var requireConfig = RequireConfig();
|
||||
|
||||
// Loaded in load #2
|
||||
nThen(function (waitFor) {
|
||||
DomReady.onReady(waitFor());
|
||||
}).nThen(function (waitFor) {
|
||||
var req = {
|
||||
cfg: requireConfig,
|
||||
req: [ '/common/loading.js' ],
|
||||
pfx: window.location.origin
|
||||
};
|
||||
window.rc = requireConfig;
|
||||
window.apiconf = ApiConfig;
|
||||
document.getElementById('sbox-iframe').setAttribute('src',
|
||||
ApiConfig.httpSafeOrigin + '/notifications/inner.html?' + requireConfig.urlArgs +
|
||||
'#' + encodeURIComponent(JSON.stringify(req)));
|
||||
|
||||
// This is a cheap trick to avoid loading sframe-channel in parallel with the
|
||||
// loading screen setup.
|
||||
var done = waitFor();
|
||||
var onMsg = function (msg) {
|
||||
var data = JSON.parse(msg.data);
|
||||
if (data.q !== 'READY') { return; }
|
||||
window.removeEventListener('message', onMsg);
|
||||
var _done = done;
|
||||
done = function () { };
|
||||
_done();
|
||||
};
|
||||
window.addEventListener('message', onMsg);
|
||||
}).nThen(function (/*waitFor*/) {
|
||||
var addRpc = function (sframeChan, Cryptpad/*, Utils*/) {
|
||||
};
|
||||
var category;
|
||||
if (window.location.hash) {
|
||||
category = window.location.hash.slice(1);
|
||||
window.location.hash = '';
|
||||
}
|
||||
var addData = function (obj) {
|
||||
if (category) { obj.category = category; }
|
||||
};
|
||||
SFCommonO.start({
|
||||
noRealtime: true,
|
||||
addRpc: addRpc,
|
||||
addData: addData
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Reference in a new issue