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

Update form creator UI

pull/1/head
yflory 2021-06-02 18:50:36 +02:00
parent 4cc84b8c80
commit 9d2b60a044
2 changed files with 140 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
www/form/app-form.less
View File

@ -64,6 +64,61 @@
flex: 1;
overflow: auto;
.cp-form-creator-add-inline {
display: flex;
flex-flow: column;
align-items: center;
margin-bottom: 20px;
button {
width: 50px;
i {
margin-right: 0;
}
}
.cp-form-creator-inline-add {
.add-close { display: none; }
&.displayed {
.add-close { display: inline; }
.add-open { display: none; }
}
}
.cp-form-creator-control-inline {
display: flex;
justify-content: space-around;
margin-top: 10px;
button:not(:last-child) {
margin-right: 5px;
}
.cp-form-creator-types:first-child {
margin-right: 50px;
}
}
}
.cp-form-creator-add-full {
display: flex;
align-items: center;
margin-bottom: 20px;
&> div:first-child {
border-right: 1px solid black;
display: flex;
height: 100%;
align-items: center;
padding-right: 10px;
margin-right: 10px;
}
.cp-form-creator-control-inline {
display: flex;
flex-flow: column;
justify-content: space-around;
button:not(:last-child) {
margin-right: 5px;
}
.cp-form-creator-types:first-child {
margin-right: 50px;
}
}
}
.cp-form-page + .cp-form-send-container {
margin-top: 10px;
}

113
www/form/inner.js
View File

@ -1487,8 +1487,80 @@ define([
APP.formBlocks = [];
// XXX order array later
var elements = content.order.map(function (uid) {
var getFormCreator = function (uid) {
var full = !uid;
var idx = content.order.indexOf(uid);
var addControl = function (type) {
var btn = h('button.btn.small', {
title: full ? undefined : Messages['form_type_'+type]
}, [
(TYPES[type] || STATIC_TYPES[type]).icon.cloneNode(),
full ? h('span', Messages['form_type_'+type]) : undefined
]);
$(btn).click(function () {
var uid = Util.uid();
content.form[uid] = {
//q: Messages.form_default,
//opts: opts
type: type,
};
if (full) {
content.order.push(uid);
} else {
content.order.splice(idx, 0, uid);
}
framework.localChange();
updateForm(framework, content, true);
});
return btn;
};
var controls = Object.keys(TYPES).map(addControl);
var staticControls = Object.keys(STATIC_TYPES).map(addControl);
var buttons = h('div.cp-form-creator-control-inline', [
h('div.cp-form-creator-types', controls),
h('div.cp-form-creator-types', staticControls)
]);
var add = h('div', Messages.tag_add);
if (!full) {
add = h('button.btn.cp-form-creator-inline-add', {
title: Messages.tag_add
}, [
h('i.fa.fa-plus.add-open'),
h('i.fa.fa-times.add-close')
]);
var $b = $(buttons).hide();
$(add).click(function () {
$b.toggle();
$(add).toggleClass('displayed');
});
}
var inlineCls = full ? '-full' : '-inline'
return h('div.cp-form-creator-add'+inlineCls, [
h('div', add),
buttons
]);
};
var updateAddInline = function () {
console.log($container, $container.find('.cp-form-block'));
$container.find('.cp-form-creator-add-inline').remove();
$container.find('.cp-form-block').each(function (i, el) {
console.log(i, el);
if (i === 0) { return; }
var $el = $(el);
var uid = $el.attr('data-id');
$el.before(getFormCreator(uid));
});
};
var elements = [];
content.order.forEach(function (uid, i) {
var block = form[uid];
var type = block.type;
var model = TYPES[type] || STATIC_TYPES[type];
@ -1511,7 +1583,8 @@ define([
if (answers && answers[uid] && data.setValue) { data.setValue(answers[uid]); }
if (data.pageBreak && !editable) {
return data;
elements.push(data);
return;
}
@ -1584,6 +1657,7 @@ define([
content.order.splice(idx, 1);
$('.cp-form-block[data-id="'+uid+'"]').remove();
framework.localChange();
updateAddInline();
});
// Values
@ -1637,7 +1711,7 @@ define([
]);
}
var editableCls = editable ? ".editable" : "";
return h('div.cp-form-block'+editableCls, {
elements.push(h('div.cp-form-block'+editableCls, {
'data-id':uid
}, [
isStatic ? undefined : q,
@ -1646,9 +1720,13 @@ define([
editButtons
]),
editContainer
]);
]));
});
if (APP.isEditor) {
elements.push(getFormCreator());
}
var _content = elements;
if (!editable) {
_content = [];
@ -1702,6 +1780,7 @@ define([
}
$container.empty().append(_content);
updateAddInline();
if (editable) {
Sortable.create($container[0], {
@ -1712,6 +1791,7 @@ define([
set: function (s) {
content.order = s.toArray();
framework.localChange();
updateAddInline();
}
}
});
@ -1924,33 +2004,10 @@ define([
var controlContainer;
if (APP.isEditor) {
var addControl = function (type) {
var btn = h('button.btn', [
(TYPES[type] || STATIC_TYPES[type]).icon.cloneNode(),
h('span', Messages['form_type_'+type])
]);
$(btn).click(function () {
var uid = Util.uid();
content.form[uid] = {
//q: Messages.form_default,
//opts: opts
type: type,
};
content.order.push(uid);
framework.localChange();
updateForm(framework, content, true);
});
return btn;
};
var controls = Object.keys(TYPES).map(addControl);
var staticControls = Object.keys(STATIC_TYPES).map(addControl);
var settings = makeFormSettings();
controlContainer = h('div.cp-form-creator-control', [
h('div.cp-form-creator-settings', settings),
h('div.cp-form-creator-types', controls),
h('div.cp-form-creator-types', staticControls)
]);
}