Todo in sframe with less2
This commit is contained in:
yflory
130
www/todo/app-todo.less
Normal file
130
www/todo/app-todo.less
Normal file
@@ -0,0 +1,130 @@
|
||||
@import (once) "../../customize/src/less2/include/browser.less";
|
||||
@import (once) "../../customize/src/less2/include/toolbar.less";
|
||||
@import (once) "../../customize/src/less2/include/markdown.less";
|
||||
@import (once) '../../customize/src/less2/include/fileupload.less';
|
||||
@import (once) '../../customize/src/less2/include/alertify.less';
|
||||
//@import (once) '../../customize/src/less/mixins.less';
|
||||
//@import (once) '../../customize/src/less/variables.less";
|
||||
|
||||
@import (once) '../../customize/src/less2/include/avatar.less';
|
||||
|
||||
|
||||
.toolbar_main();
|
||||
.fileupload_main();
|
||||
.alertify_main();
|
||||
|
||||
// body
|
||||
&.cp-app-todo {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
@button-border: 2px;
|
||||
|
||||
#cp-toolbar {
|
||||
display: flex; // We need this to remove a 3px border at the bottom of the toolbar
|
||||
}
|
||||
|
||||
.cp-cryptpad-toolbar {
|
||||
padding: 0px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#cp-app-todo-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-flow: column;
|
||||
padding: 20px;
|
||||
align-items: center;
|
||||
background-color: lighten(@colortheme_todo-bg, 15%);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@spacing: 15px;
|
||||
|
||||
#cp-app-todo-taskslist {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
min-width: 40%;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.cp-app-todo-create-form {
|
||||
margin: @spacing;
|
||||
min-width: 40%;
|
||||
display: flex;
|
||||
|
||||
#cp-app-todo-newtodo {
|
||||
flex: 1;
|
||||
margin-right: 15px;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
background-color: darken(@colortheme_todo-bg, 10%);
|
||||
color: #fff;
|
||||
padding: 5px 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
background-color: darken(@colortheme_todo-bg, 20%);
|
||||
border:0;
|
||||
&:hover {
|
||||
background-color: darken(@colortheme_todo-bg, 25%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cp-app-todo-task {
|
||||
border: 1px solid black;
|
||||
padding: @spacing;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
|
||||
&.cp-app-todo-task-complete {
|
||||
background-color: #f0f0f0;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.cp-app-todo-task-text {
|
||||
margin: @spacing;
|
||||
flex: 1;
|
||||
word-wrap: break-word;
|
||||
min-width: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
.cp-app-todo-task-date {
|
||||
margin: @spacing;
|
||||
}
|
||||
.cp-app-todo-task-remove {
|
||||
margin: @spacing;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cp-app-todo-task-checkbox {
|
||||
font-size: 45px;
|
||||
width: 45px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.cp-app-todo-task-checkbox-checked {
|
||||
|
||||
}
|
||||
.cp-app-todo-task-checkbox-unchecked {
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
border:0;
|
||||
}
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
}
|
||||
|
||||
@@ -1,16 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="cp pad">
|
||||
<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">
|
||||
<script async data-bootload="/customize/template.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||
<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>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
#pad-iframe {
|
||||
#sbox-iframe {
|
||||
position:fixed;
|
||||
top:0px;
|
||||
left:0px;
|
||||
@@ -23,8 +24,15 @@
|
||||
padding:0;
|
||||
overflow:hidden;
|
||||
}
|
||||
#sbox-filePicker-iframe {
|
||||
position: fixed;
|
||||
top:0; left:0;
|
||||
bottom:0; right:0;
|
||||
width:100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
|
||||
|
||||
<iframe id="sbox-iframe">
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html class="cp-app-noscroll">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
|
||||
<script async data-bootload="/todo/inner.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||
<style>.loading-hidden, .loading-hidden * {display: none !important;}</style>
|
||||
<script async data-bootload="/todo/inner.js" data-main="/common/sframe-boot.js?ver=1.4" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||
<style>
|
||||
.loading-hidden { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="loading-hidden">
|
||||
<div id="toolbar" class="toolbar-container"></div>
|
||||
<div id="container">
|
||||
<div class="cp-create-form">
|
||||
<input type="text" id="newTodoName" data-localization-placeholder="todo_newTodoNamePlaceholder" />
|
||||
<body class="cp-app-todo">
|
||||
<div id="cp-toolbar" class="cp-toolbar-container"></div>
|
||||
<div id="cp-app-todo-container">
|
||||
<div class="cp-app-todo-create-form">
|
||||
<input type="text" id="cp-app-todo-newtodo" data-localization-placeholder="todo_newTodoNamePlaceholder" />
|
||||
<button class="btn btn-success fa fa-plus" data-localization-title="todo_newTodoNameTitle"></button>
|
||||
</div>
|
||||
<div id="tasksList"></div>
|
||||
<div id="cp-app-todo-taskslist"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -1,15 +1,229 @@
|
||||
define([
|
||||
'jquery',
|
||||
'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
||||
'/bower_components/chainpad-crypto/crypto.js',
|
||||
'/common/sframe-chainpad-listmap.js',
|
||||
'/common/toolbar3.js',
|
||||
'/common/cryptpad-common.js',
|
||||
'/bower_components/nthen/index.js',
|
||||
'/common/sframe-common.js',
|
||||
'/todo/todo.js',
|
||||
|
||||
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
||||
'less!/todo/todo.less',
|
||||
//'less!/customize/src/less/cryptpad.less',
|
||||
'less!/customize/src/less/toolbar.less',
|
||||
], function ($) {
|
||||
$('.loading-hidden').removeClass('loading-hidden');
|
||||
// dirty hack to get rid the flash of the lock background
|
||||
/*
|
||||
setTimeout(function () {
|
||||
$('#app').addClass('ready');
|
||||
}, 100);*/
|
||||
'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
||||
'less!/customize/src/less2/main.less',
|
||||
], function (
|
||||
$,
|
||||
Crypto,
|
||||
Listmap,
|
||||
Toolbar,
|
||||
Cryptpad,
|
||||
nThen,
|
||||
SFCommon,
|
||||
Todo
|
||||
)
|
||||
{
|
||||
var Messages = Cryptpad.Messages;
|
||||
var APP = window.APP = {};
|
||||
var onConnectError = function () {
|
||||
Cryptpad.errorLoadingScreen(Messages.websocketError);
|
||||
};
|
||||
|
||||
var common;
|
||||
var sFrameChan;
|
||||
nThen(function (waitFor) {
|
||||
$(waitFor(Cryptpad.addLoadingScreen));
|
||||
SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
|
||||
}).nThen(function (waitFor) {
|
||||
sFrameChan = common.getSframeChannel();
|
||||
sFrameChan.onReady(waitFor());
|
||||
}).nThen(function (/*waitFor*/) {
|
||||
Cryptpad.onError(function (info) {
|
||||
if (info && info.type === "store") {
|
||||
onConnectError();
|
||||
}
|
||||
});
|
||||
|
||||
var $body = $('body');
|
||||
var $list = $('#cp-app-todo-taskslist');
|
||||
|
||||
var removeTips = function () {
|
||||
Cryptpad.clearTooltips();
|
||||
};
|
||||
|
||||
var onReady = function () {
|
||||
var todo = Todo.init(APP.lm.proxy);
|
||||
|
||||
var deleteTask = function(id) {
|
||||
todo.remove(id);
|
||||
|
||||
var $els = $list.find('.cp-app-todo-task').filter(function (i, el) {
|
||||
return $(el).data('id') === id;
|
||||
});
|
||||
$els.fadeOut(null, function () {
|
||||
$els.remove();
|
||||
removeTips();
|
||||
});
|
||||
//APP.display();
|
||||
};
|
||||
|
||||
// TODO make this actually work, and scroll to bottom...
|
||||
var scrollTo = function (t) {
|
||||
$list.animate({
|
||||
scrollTop: t,
|
||||
});
|
||||
};
|
||||
scrollTo = scrollTo;
|
||||
|
||||
var makeCheckbox = function (id, cb) {
|
||||
var entry = APP.lm.proxy.data[id];
|
||||
var checked = entry.state === 1 ?
|
||||
'cp-app-todo-task-checkbox-checked fa-check-square-o':
|
||||
'cp-app-todo-task-checkbox-unchecked fa-square-o';
|
||||
|
||||
var title = entry.state === 1?
|
||||
Messages.todo_markAsIncompleteTitle:
|
||||
Messages.todo_markAsCompleteTitle;
|
||||
title = title;
|
||||
|
||||
removeTips();
|
||||
return $('<span>', {
|
||||
'class': 'cp-app-todo-task-checkbox fa ' + checked,
|
||||
//title: title,
|
||||
}).on('click', function () {
|
||||
entry.state = (entry.state + 1) % 2;
|
||||
if (typeof(cb) === 'function') {
|
||||
cb(entry.state);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var addTaskUI = function (el, animate) {
|
||||
var $taskDiv = $('<div>', {
|
||||
'class': 'cp-app-todo-task'
|
||||
});
|
||||
if (animate) {
|
||||
$taskDiv.prependTo($list);
|
||||
} else {
|
||||
$taskDiv.appendTo($list);
|
||||
}
|
||||
$taskDiv.data('id', el);
|
||||
|
||||
makeCheckbox(el, function (/*state*/) {
|
||||
APP.display();
|
||||
})
|
||||
.appendTo($taskDiv);
|
||||
|
||||
var entry = APP.lm.proxy.data[el];
|
||||
|
||||
if (entry.state) {
|
||||
$taskDiv.addClass('cp-app-todo-task-complete');
|
||||
}
|
||||
|
||||
$('<span>', { 'class': 'cp-app-todo-task-text' })
|
||||
.text(entry.task)
|
||||
.appendTo($taskDiv);
|
||||
/*$('<span>', { 'class': 'cp-app-todo-task-date' })
|
||||
.text(new Date(entry.ctime).toLocaleString())
|
||||
.appendTo($taskDiv);*/
|
||||
$('<button>', {
|
||||
'class': 'fa fa-times cp-app-todo-task-remove btn btn-danger',
|
||||
title: Messages.todo_removeTaskTitle,
|
||||
}).appendTo($taskDiv).on('click', function() {
|
||||
deleteTask(el);
|
||||
});
|
||||
|
||||
if (animate) {
|
||||
$taskDiv.hide();
|
||||
window.setTimeout(function () {
|
||||
// ???
|
||||
$taskDiv.fadeIn();
|
||||
}, 0);
|
||||
}
|
||||
removeTips();
|
||||
};
|
||||
var display = APP.display = function () {
|
||||
$list.empty();
|
||||
removeTips();
|
||||
APP.lm.proxy.order.forEach(function (el) {
|
||||
addTaskUI(el);
|
||||
});
|
||||
//scrollTo('300px');
|
||||
};
|
||||
|
||||
var addTask = function () {
|
||||
var $input = $('#cp-app-todo-newtodo');
|
||||
// if the input is empty after removing leading and trailing spaces
|
||||
// don't create a new entry
|
||||
if (!$input.val().trim()) { return; }
|
||||
|
||||
var obj = {
|
||||
"state": 0,
|
||||
"task": $input.val(),
|
||||
"ctime": +new Date(),
|
||||
"mtime": +new Date()
|
||||
};
|
||||
|
||||
var id = Cryptpad.createChannelId();
|
||||
todo.add(id, obj);
|
||||
|
||||
$input.val("");
|
||||
addTaskUI(id, true);
|
||||
//display();
|
||||
};
|
||||
|
||||
var $formSubmit = $('.cp-app-todo-create-form button').on('click', addTask);
|
||||
$('#cp-app-todo-newtodo').on('keypress', function (e) {
|
||||
switch (e.which) {
|
||||
case 13:
|
||||
$formSubmit.click();
|
||||
break;
|
||||
default:
|
||||
//console.log(e.which);
|
||||
}
|
||||
}).focus();
|
||||
|
||||
var editTask = function () {
|
||||
|
||||
};
|
||||
editTask = editTask;
|
||||
|
||||
display();
|
||||
Cryptpad.removeLoadingScreen();
|
||||
};
|
||||
|
||||
var onInit = function () {
|
||||
Cryptpad.addLoadingScreen();
|
||||
|
||||
$body.on('dragover', function (e) { e.preventDefault(); });
|
||||
$body.on('drop', function (e) { e.preventDefault(); });
|
||||
|
||||
var $bar = $('.cp-toolbar-container');
|
||||
|
||||
var displayed = ['useradmin', 'newpad', 'limit', 'pageTitle'];
|
||||
var configTb = {
|
||||
displayed: displayed,
|
||||
common: Cryptpad,
|
||||
sfCommon: common,
|
||||
$container: $bar,
|
||||
pageTitle: Messages.todo_title,
|
||||
metadataMgr: common.getMetadataMgr(),
|
||||
};
|
||||
APP.toolbar = Toolbar.create(configTb);
|
||||
APP.toolbar.$rightside.hide();
|
||||
};
|
||||
var createTodo = function() {
|
||||
var listmapConfig = {
|
||||
data: {},
|
||||
common: common,
|
||||
userName: 'todo',
|
||||
logLevel: 1
|
||||
};
|
||||
|
||||
var lm = APP.lm = Listmap.create(listmapConfig);
|
||||
|
||||
lm.proxy.on('create', onInit)
|
||||
.on('ready', onReady);
|
||||
};
|
||||
createTodo();
|
||||
});
|
||||
});
|
||||
|
||||
260
www/todo/main.js
260
www/todo/main.js
@@ -1,229 +1,49 @@
|
||||
// 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',
|
||||
'jquery',
|
||||
'/bower_components/chainpad-crypto/crypto.js',
|
||||
'/bower_components/chainpad-listmap/chainpad-listmap.js',
|
||||
'/common/toolbar2.js',
|
||||
'/common/cryptpad-common.js',
|
||||
'/todo/todo.js',
|
||||
'/common/requireconfig.js',
|
||||
'/common/sframe-common-outer.js'
|
||||
], function (nThen, ApiConfig, $, RequireConfig, SFCommonO) {
|
||||
var requireConfig = RequireConfig();
|
||||
|
||||
//'/common/media-tag.js',
|
||||
//'/bower_components/file-saver/FileSaver.min.js',
|
||||
|
||||
'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
||||
'less!/customize/src/less/cryptpad.less',
|
||||
], function ($, Crypto, Listmap, Toolbar, Cryptpad, Todo) {
|
||||
var Messages = Cryptpad.Messages;
|
||||
|
||||
var APP = window.APP = {};
|
||||
$(function () {
|
||||
|
||||
var $iframe = $('#pad-iframe').contents();
|
||||
var $body = $iframe.find('body');
|
||||
var ifrw = $('#pad-iframe')[0].contentWindow;
|
||||
var $list = $iframe.find('#tasksList');
|
||||
|
||||
var removeTips = function () {
|
||||
Cryptpad.clearTooltips();
|
||||
};
|
||||
|
||||
var onReady = function () {
|
||||
|
||||
var todo = Todo.init(APP.lm.proxy, Cryptpad);
|
||||
|
||||
var deleteTask = function(id) {
|
||||
todo.remove(id);
|
||||
|
||||
var $els = $list.find('.cp-task').filter(function (i, el) {
|
||||
return $(el).data('id') === id;
|
||||
});
|
||||
$els.fadeOut(null, function () {
|
||||
$els.remove();
|
||||
removeTips();
|
||||
});
|
||||
//APP.display();
|
||||
// Loaded in load #2
|
||||
nThen(function (waitFor) {
|
||||
$(waitFor());
|
||||
}).nThen(function (waitFor) {
|
||||
var req = {
|
||||
cfg: requireConfig,
|
||||
req: [ '/common/loading.js' ],
|
||||
pfx: window.location.origin
|
||||
};
|
||||
window.rc = requireConfig;
|
||||
window.apiconf = ApiConfig;
|
||||
$('#sbox-iframe').attr('src',
|
||||
ApiConfig.httpSafeOrigin + '/todo/inner.html?' + requireConfig.urlArgs +
|
||||
'#' + encodeURIComponent(JSON.stringify(req)));
|
||||
|
||||
// TODO make this actually work, and scroll to bottom...
|
||||
var scrollTo = function (t) {
|
||||
var $list = $iframe.find('#tasksList');
|
||||
|
||||
$list.animate({
|
||||
scrollTop: t,
|
||||
});
|
||||
// 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();
|
||||
};
|
||||
scrollTo = scrollTo;
|
||||
|
||||
var makeCheckbox = function (id, cb) {
|
||||
var entry = APP.lm.proxy.data[id];
|
||||
var checked = entry.state === 1? 'cp-task-checkbox-checked fa-check-square-o': 'cp-task-checkbox-unchecked fa-square-o';
|
||||
|
||||
var title = entry.state === 1?
|
||||
Messages.todo_markAsIncompleteTitle:
|
||||
Messages.todo_markAsCompleteTitle;
|
||||
title = title;
|
||||
|
||||
removeTips();
|
||||
return $('<span>', {
|
||||
'class': 'cp-task-checkbox fa ' + checked,
|
||||
//title: title,
|
||||
}).on('click', function () {
|
||||
entry.state = (entry.state + 1) % 2;
|
||||
if (typeof(cb) === 'function') {
|
||||
cb(entry.state);
|
||||
}
|
||||
});
|
||||
window.addEventListener('message', onMsg);
|
||||
}).nThen(function (/*waitFor*/) {
|
||||
var getSecrets = function (Cryptpad) {
|
||||
var proxy = Cryptpad.getProxy();
|
||||
var hash = proxy.todo || Cryptpad.createRandomHash();
|
||||
return Cryptpad.getSecrets('todo', hash)
|
||||
};
|
||||
|
||||
var addTaskUI = function (el, animate) {
|
||||
var $taskDiv = $('<div>', {
|
||||
'class': 'cp-task'
|
||||
});
|
||||
if (animate) {
|
||||
$taskDiv.prependTo($list);
|
||||
} else {
|
||||
$taskDiv.appendTo($list);
|
||||
}
|
||||
$taskDiv.data('id', el);
|
||||
|
||||
makeCheckbox(el, function (/*state*/) {
|
||||
APP.display();
|
||||
})
|
||||
.appendTo($taskDiv);
|
||||
|
||||
var entry = APP.lm.proxy.data[el];
|
||||
|
||||
if (entry.state) {
|
||||
$taskDiv.addClass('cp-task-complete');
|
||||
}
|
||||
|
||||
$('<span>', { 'class': 'cp-task-text' })
|
||||
.text(entry.task)
|
||||
.appendTo($taskDiv);
|
||||
/*$('<span>', { 'class': 'cp-task-date' })
|
||||
.text(new Date(entry.ctime).toLocaleString())
|
||||
.appendTo($taskDiv);*/
|
||||
$('<button>', {
|
||||
'class': 'fa fa-times cp-task-remove btn btn-danger',
|
||||
title: Messages.todo_removeTaskTitle,
|
||||
}).appendTo($taskDiv).on('click', function() {
|
||||
deleteTask(el);
|
||||
});
|
||||
|
||||
if (animate) {
|
||||
$taskDiv.hide();
|
||||
window.setTimeout(function () {
|
||||
// ???
|
||||
$taskDiv.fadeIn();
|
||||
}, 0);
|
||||
}
|
||||
removeTips();
|
||||
};
|
||||
var display = APP.display = function () {
|
||||
$list.empty();
|
||||
removeTips();
|
||||
APP.lm.proxy.order.forEach(function (el) {
|
||||
addTaskUI(el);
|
||||
});
|
||||
//scrollTo('300px');
|
||||
};
|
||||
|
||||
var addTask = function () {
|
||||
var $input = $iframe.find('#newTodoName');
|
||||
// if the input is empty after removing leading and trailing spaces
|
||||
// don't create a new entry
|
||||
if (!$input.val().trim()) { return; }
|
||||
|
||||
var obj = {
|
||||
"state": 0,
|
||||
"task": $input.val(),
|
||||
"ctime": +new Date(),
|
||||
"mtime": +new Date()
|
||||
};
|
||||
|
||||
var id = Cryptpad.createChannelId();
|
||||
todo.add(id, obj);
|
||||
|
||||
$input.val("");
|
||||
addTaskUI(id, true);
|
||||
//display();
|
||||
};
|
||||
|
||||
var $formSubmit = $iframe.find('.cp-create-form button').on('click', addTask);
|
||||
$iframe.find('#newTodoName').on('keypress', function (e) {
|
||||
switch (e.which) {
|
||||
case 13:
|
||||
$formSubmit.click();
|
||||
break;
|
||||
default:
|
||||
console.log(e.which);
|
||||
}
|
||||
}).focus();
|
||||
|
||||
var editTask = function () {
|
||||
|
||||
};
|
||||
editTask = editTask;
|
||||
|
||||
display();
|
||||
Cryptpad.removeLoadingScreen();
|
||||
};
|
||||
|
||||
var onInit = function () {
|
||||
Cryptpad.addLoadingScreen();
|
||||
|
||||
$body.on('dragover', function (e) { e.preventDefault(); });
|
||||
$body.on('drop', function (e) { e.preventDefault(); });
|
||||
|
||||
var Title;
|
||||
var $bar = $iframe.find('.toolbar-container');
|
||||
|
||||
Title = Cryptpad.createTitle({}, function(){}, Cryptpad);
|
||||
|
||||
var configTb = {
|
||||
displayed: ['useradmin', 'newpad', 'limit', 'upgrade', 'pageTitle'],
|
||||
ifrw: ifrw,
|
||||
common: Cryptpad,
|
||||
//hideDisplayName: true,
|
||||
$container: $bar,
|
||||
pageTitle: Messages.todo_title
|
||||
};
|
||||
|
||||
APP.toolbar = Toolbar.create(configTb);
|
||||
APP.toolbar.$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
|
||||
};
|
||||
|
||||
var createTodo = function() {
|
||||
var obj = Cryptpad.getProxy();
|
||||
var hash = Cryptpad.createRandomHash();
|
||||
|
||||
if(obj.todo) {
|
||||
hash = obj.todo;
|
||||
} else {
|
||||
obj.todo = hash;
|
||||
}
|
||||
|
||||
var secret = Cryptpad.getSecrets('todo', hash);
|
||||
|
||||
var listmapConfig = {
|
||||
data: {},
|
||||
websocketURL: Cryptpad.getWebsocketURL(),
|
||||
channel: secret.channel,
|
||||
validateKey: secret.keys.validateKey || undefined,
|
||||
crypto: Crypto.createEncryptor(secret.keys),
|
||||
userName: 'todo',
|
||||
logLevel: 1,
|
||||
};
|
||||
|
||||
var lm = APP.lm = Listmap.create(listmapConfig);
|
||||
|
||||
lm.proxy.on('create', onInit)
|
||||
.on('ready', onReady);
|
||||
};
|
||||
|
||||
Cryptpad.ready(function () {
|
||||
createTodo();
|
||||
Cryptpad.reportAppUsage();
|
||||
});
|
||||
|
||||
SFCommonO.start({
|
||||
getSecrets: getSecrets,
|
||||
noHash: true,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -2,7 +2,6 @@ define([
|
||||
|
||||
], function () {
|
||||
var Todo = {};
|
||||
var Cryptpad;
|
||||
|
||||
/* data model
|
||||
{
|
||||
@@ -60,9 +59,7 @@ define([
|
||||
if (proxy.data[id]) { delete proxy.data[id]; }
|
||||
};
|
||||
|
||||
Todo.init = function (proxy, common) {
|
||||
Cryptpad = common;
|
||||
|
||||
Todo.init = function (proxy) {
|
||||
var api = {};
|
||||
initialize(proxy);
|
||||
|
||||
|
||||
@@ -1,121 +0,0 @@
|
||||
@import "/customize/src/less/variables.less";
|
||||
@import "/customize/src/less/mixins.less";
|
||||
|
||||
@button-border: 2px;
|
||||
|
||||
html, body {
|
||||
margin: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#toolbar {
|
||||
display: flex; // We need this to remove a 3px border at the bottom of the toolbar
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
#app {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.cryptpad-toolbar {
|
||||
padding: 0px;
|
||||
display: inline-block;
|
||||
}
|
||||
#container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-flow: column;
|
||||
padding: 20px;
|
||||
align-items: center;
|
||||
background-color: lighten(@toolbar-todo-bg, 15%);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@spacing: 15px;
|
||||
|
||||
#tasksList {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
min-width: 40%;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.cp-create-form {
|
||||
margin: @spacing;
|
||||
min-width: 40%;
|
||||
display: flex;
|
||||
|
||||
#newTodoName {
|
||||
flex: 1;
|
||||
margin-right: 15px;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
background-color: darken(@toolbar-todo-bg, 10%);
|
||||
color: #fff;
|
||||
padding: 5px 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
background-color: darken(@toolbar-todo-bg, 20%);
|
||||
border:0;
|
||||
&:hover {
|
||||
background-color: darken(@toolbar-todo-bg, 25%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cp-task {
|
||||
border: 1px solid black;
|
||||
padding: @spacing;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
|
||||
&.cp-task-complete {
|
||||
background-color: #f0f0f0;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.cp-task-text {
|
||||
margin: @spacing;
|
||||
flex: 1;
|
||||
word-wrap: break-word;
|
||||
min-width: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
.cp-task-date {
|
||||
margin: @spacing;
|
||||
}
|
||||
.cp-task-remove {
|
||||
margin: @spacing;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cp-task-checkbox {
|
||||
font-size: 45px;
|
||||
width: 45px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.cp-task-checkbox-checked {
|
||||
|
||||
}
|
||||
.cp-task-checkbox-unchecked {
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
border:0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user