infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Improve UI, add title input and forget button

pull/1/head
yflory 2016-11-29 17:26:31 +01:00
parent bca746bbb5
commit eaeaf4df40
5 changed files with 185 additions and 32 deletions

3
customize.dist/main.css
View File

@ -391,6 +391,9 @@ form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbo
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes:after {
content: "✔";
}
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.uncommitted {
background: #ddd;
}
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine {
display: none;
}

6
customize.dist/src/cryptpad.less
View File

@ -444,6 +444,12 @@ form.realtime {
background-color: @cp-green;
&:after { content: "✔"; }
}
&.uncommitted {
background: #ddd;
}
&.mine {
display: none;
}

49
www/poll/test/index.html
View File

@ -4,6 +4,7 @@
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title data-localization="poll_title">Zero Knowledge Date Picker</title>
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/customize/main.css" />
<script data-main="main" src="/bower_components/requirejs/require.js"></script>
<script> require.config({ waitSeconds: 60, }); </script>
@ -43,21 +44,59 @@
border: .5px solid black;
}
table#table {
margin: 0px;
}
#tableContainer {
position: relative;
padding: 29px;
padding-right: 82px;
}
#tableContainer button {
height: 2rem;
}
#commit {
position: absolute;
left: 532px;
bottom: 0px;
}
#create-user {
position: absolute;
left: 0px;
top: 31px;
width: 50px;
overflow: hidden;
}
#create-option {
position: absolute;
bottom: 0px;
left: 249px;
width: 50px;
}
</style>
</head>
<body>
<div id="toolbar"></div>
<button id="create-option">create option</button>
<button id="create-user">create user</button>
<div id="howItWorks">
<h1 id="mainTitle">CryptPoll</h1>
<h2 data-localization="poll_subtitle"></h2>
<p data-localization="poll_p_save"></p>
<p data-localization="poll_p_encryption"></p>
</div>
<button id="publish" style="display: none;">publish poll</button>
<button id="commit">commit</button>
<form class="realtime">
<br />
<input type="text" id="title"><br />
<textarea rows=5 cols=50 id="description"></textarea><br />
<p id="tableContainer">
<button id="create-option"><span class="fa fa-plus"></span></button>
<button id="create-user"><span class="fa fa-plus"></span></button>
<button id="commit"><span class="fa fa-check"></span></button>
</p>
</form>

155
www/poll/test/main.js
View File

@ -15,6 +15,10 @@ define([
//'/customize/pad.js'
], function (Config, Messages, TextPatcher, Listmap, Crypto, Cryptpad, Hyperjson, Render, Toolbar) {
var $ = window.jQuery;
var HIDE_INTRODUCTION_TEXT = "hide_poll_text";
var defaultName;
var APP = window.APP = {
Toolbar: Toolbar,
Hyperjson: Hyperjson,
@ -31,6 +35,10 @@ define([
return colsOrder;
};
var isOwnColumnCommitted = function () {
return APP.proxy && APP.proxy.table.colsOrder.indexOf(APP.userid) !== -1;
};
var mergeUncommitted = function (proxy, uncommitted, commit) {
var newObj;
if (commit) {
@ -40,7 +48,7 @@ define([
}
// We have uncommitted data only if the user's column is not in the proxy
// If it is already is the proxy, nothing to merge
if (proxy.table.colsOrder.indexOf(APP.userid) !== -1) {
if (isOwnColumnCommitted()) {
return newObj;
}
// Merge uncommitted into the proxy
@ -61,6 +69,28 @@ define([
return newObj;
};
var styleUncommittedColumn = function () {
var id = APP.userid;
if (isOwnColumnCommitted()) { return; }
$('[data-rt-id^="' + id + '"]').closest('td').addClass("uncommitted");
$('td.uncommitted .remove').remove();
$('td.uncommitted .cover').addClass("uncommitted");
$('.uncommitted input[type="text"]').attr("placeholder", "New column here"); //TODO
};
var updateTableButtons = function () {
if ($('.checkbox-cell').length && !isOwnColumnCommitted()) {
$('#commit').show();
$('#commit').css('width', $($('.checkbox-cell')[0]).width());
} else {
$('#commit').hide();
}
var width = $('#table').outerWidth();
if (width) {
$('#create-user').css('left', width + 30 + 'px');
}
};
/* Any time the realtime object changes, call this function */
var change = function (o, n, path) {
if (path && path.join) {
@ -88,6 +118,8 @@ define([
window.setTimeout(function () {
var displayedObj2 = mergeUncommitted(APP.proxy, APP.uncommitted);
Render.updateTable(table, displayedObj2, conf);
updateTableButtons();
styleUncommittedColumn();
});
};
@ -193,7 +225,7 @@ define([
APP.proxy.published = true;
APP.$publish.hide();
['textarea', '#title'].forEach(function (sel) {
['textarea'].forEach(function (sel) {
$(sel).attr('disabled', bool);
});
};
@ -204,11 +236,9 @@ define([
};
// special UI elements
var $title = $('#title').attr('placeholder', Messages.poll_titleHint || 'title');
//var $title = $('#title').attr('placeholder', Messages.poll_titleHint || 'title'); TODO
var $description = $('#description').attr('placeholder', Messages.poll_descriptionHint || 'description');
var items = [$title, $description];
var ready = function (info, userid) {
console.log("READY");
console.log('userid: %s', userid);
@ -226,7 +256,6 @@ define([
var colsOrder = sortColumns(displayedObj.table.colsOrder, userid);
var $table = APP.$table = $(Render.asHTML(displayedObj, null, colsOrder));
var $createRow = APP.$createRow = $('#create-option').click(function () {
//
@ -242,7 +271,7 @@ define([
});
});
//TODO
// Commit button
var $commit = APP.$commit = $('#commit').click(function () {
var uncommittedCopy = JSON.parse(JSON.stringify(APP.uncommitted));
APP.uncommitted = {};
@ -251,20 +280,26 @@ define([
change();
});
items.forEach(function ($item) {
var id = $item.attr('id');
// Title
if (APP.proxy.info.defaultTitle) {
updateDefaultTitle(APP.proxy.info.defaultTitle);
} else {
APP.proxy.info.defaultTitle = defaultName
}
updateTitle(APP.proxy.info.title || defaultName);
$item.on('change keyup', function () {
var val = $item.val();
proxy.info[id] = val;
});
if (typeof(proxy.info[id]) !== 'undefined') {
$item.val(proxy.info[id]);
}
// Description
$description.on('change keyup', function () {
var val = $item.val();
proxy.info.description = val;
});
if (typeof(proxy.info.description) !== 'undefined') {
$description.val(proxy.info.descrption);
}
$('.realtime').append($table);
$('#tableContainer').prepend($table);
updateTableButtons();
styleUncommittedColumn();
$table
.click(handleClick)
@ -272,20 +307,18 @@ define([
proxy
.on('change', ['info'], function (o, n, p) {
var $target = $('#' + p[1]);
var el = $target[0];
var selects;
var op;
if (p[1] === 'title') {
updateTitle(n);
} else if (p[1] === 'description') {
var op = TextPatcher.diff(o, n);
var el = $description[0];
if (el && ['textarea', 'text'].indexOf(el.type) !== -1) {
op = TextPatcher.diff(o, n);
selects = ['selectionStart', 'selectionEnd'].map(function (attr) {
var selects = ['selectionStart', 'selectionEnd'].map(function (attr) {
var before = el[attr];
var after = TextPatcher.transformCursor(el[attr], op);
return after;
});
$target.val(n);
if (op) {
el.selectionStart = selects[0];
el.selectionEnd = selects[1];
@ -310,6 +343,39 @@ define([
var secret = Cryptpad.getSecrets();
var updateTitle = function (newTitle) {
if (newTitle === document.title) { return; }
// Change the title now, and set it back to the old value if there is an error
var oldTitle = document.title;
document.title = newTitle;
Cryptpad.renamePad(newTitle, function (err, data) {
if (err) {
console.log("Couldn't set pad title");
console.error(err);
document.title = oldTitle;
return;
}
document.title = data;
APP.$bar.find('.' + Toolbar.constants.title).find('span.title').text(data);
APP.$bar.find('.' + Toolbar.constants.title).find('input').val(data);
});
};
var updateDefaultTitle = function (defaultTitle) {
defaultName = defaultTitle;
APP.$bar.find('.' + Toolbar.constants.title).find('input').attr("placeholder", defaultName);
};
var renameCb = function (err, title) {
if (err) { return; }
document.title = title;
APP.proxy.info.title = title;
};
var suggestName = function (fallback) {
return document.title || defaultName || "";
};
var create = function (info) {
var realtime = APP.realtime = info.realtime;
@ -324,11 +390,35 @@ define([
var config = {
userData: {},
readOnly: false,
title: {
onRename: renameCb,
defaultName: defaultName,
suggestName: suggestName
},
common: Cryptpad
};
toolbar = info.realtime.toolbar = Toolbar.create(APP.$bar, info.myID, info.realtime, info.getLag, userList, config);
var $rightside = APP.$bar.find('.' + Toolbar.constants.rightside);
/* add a forget button */
var forgetCb = function (err, title) {
if (err) { return; }
document.title = title;
};
var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
$rightside.append($forgetPad);
Cryptpad.replaceHash(editHash);
Cryptpad.getPadTitle(function (err, title) {
if (err) {
console.error(err);
console.log("Couldn't get pad title");
return;
}
updateTitle(title || defaultName);
});
};
var disconnect = function () {
@ -348,6 +438,8 @@ define([
// don't initialize until the store is ready.
Cryptpad.ready(function () {
var parsedHash = Cryptpad.parsePadUrl(window.location.href);
defaultName = Cryptpad.getDefaultName(parsedHash);
var rt = window.rt = APP.rt = Listmap.create(config);
APP.proxy = rt.proxy;
rt.proxy
@ -363,6 +455,17 @@ define([
});
})
.on('disconnect', disconnect);
Cryptpad.getPadAttribute(HIDE_INTRODUCTION_TEXT, function (e, value) {
if (e) { console.error(e); }
if (value === null) {
Cryptpad.setPadAttribute(HIDE_INTRODUCTION_TEXT, "1", function (e) {
if (e) { console.error(e) }
});
} else if (value === "1") {
$('#howItWorks').hide();
}
});
});
});

4
www/poll/test/render.js
View File

@ -202,7 +202,8 @@ by maintaining indexes in rowsOrder and colsOrder
var result = {
'data-rt-id': col,
type: 'text',
value: getColumnValue(obj, col) || ""
value: getColumnValue(obj, col) || "",
placeholder: 'User' //TODO translate
};
return result;
}));
@ -212,6 +213,7 @@ by maintaining indexes in rowsOrder and colsOrder
'data-rt-id': row,
value: getRowValue(obj, row),
type: 'text',
placeholder: 'Option' //TODO translate
}].concat(cols.map(function (col) {
var id = [col, rows[i-1]].join('_');
var val = cells[id] || false;