diff --git a/www/form/app-form.less b/www/form/app-form.less index 86bd9a2ed..e22f3030d 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -151,6 +151,17 @@ flex-flow: column; } } + div.cp-form-creator-content { + .cp-form-block-type { + margin-top: -35px; + &.editable { + cursor: pointer; + } + .fa-caret-down { + margin-left: 5px; + } + } + } div.cp-form-creator-content, div.cp-form-creator-results { max-width: 1000px; min-width: 300px; @@ -337,6 +348,7 @@ .cp-form-block-drag-handle { display: flex; flex-flow: column; + height: 25px; align-items: center; color: @cp_sidebar-hint; i { @@ -573,14 +585,6 @@ .cp-form-block-question { margin-bottom: 5px; } - .cp-form-block-type { - float: right; - padding: 5px; - margin-top: -10px; - margin-right: -10px; - i { margin-right: 5px; } - background: fade(@cryptpad_text_col, 15%); - } .cp-form-results-type-text { max-height: 300px; overflow: auto; @@ -666,6 +670,14 @@ } } } + .cp-form-block-type { + float: right; + padding: 5px; + margin-top: -10px; + margin-right: -10px; + i { margin-right: 5px; } + background: fade(@cryptpad_text_col, 15%); + } } .cp-form-type-radio, .cp-form-type-checkbox { diff --git a/www/form/inner.js b/www/form/inner.js index 9b3ed0a57..6ac16626f 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -2633,6 +2633,7 @@ define([ }); } + var changeType; if (editable) { // Drag handle dragHandle = h('span.cp-form-block-drag-handle', [ @@ -2690,7 +2691,6 @@ define([ // Delete question var edit = h('span'); - var changeType; var del = h('button.btn.btn-danger-alt', [ h('i.fa.fa-trash-o'), h('span', Messages.form_delete) @@ -2758,12 +2758,18 @@ define([ }); } - Messages.form_changeType = "Change type"; // XXX + changeType = h('div.cp-form-block-type', [ + model.icon.cloneNode(), + h('span', Messages['form_type_'+type]) + ]); + + //Messages.form_changeType = "Change type"; // XXX Messages.form_changeTypeConfirm = "Select the new type of this question and click OK."; // XXX if (Array.isArray(model.compatible)) { - changeType = h('button.btn.btn-secondary', [ - h('i.fa.fa-question'), - h('span', Messages.form_changeType) + changeType = h('div.cp-form-block-type.editable', [ + model.icon.cloneNode(), + h('span', Messages['form_type_'+type]), + h('i.fa.fa-caret-down') ]); $(changeType).click(function () { var name = Util.uid(); @@ -2807,7 +2813,7 @@ define([ } editButtons = h('div.cp-form-edit-buttons-container', [ - edit, changeType, del + edit, del ]); } var editableCls = editable ? ".editable" : ""; @@ -2815,6 +2821,7 @@ define([ 'data-id':uid }, [ APP.isEditor ? dragHandle : undefined, + changeType, isStatic ? undefined : q, h('div.cp-form-block-content', [ APP.isEditor && !isStatic ? requiredDiv : undefined, @@ -2890,7 +2897,7 @@ define([ if (editable) { APP.mainSortable = Sortable.create($container[0], { direction: "vertical", - filter: "input, button, .CodeMirror, .cp-form-type-sort", + filter: "input, button, .CodeMirror, .cp-form-type-sort, .cp-form-block-type.editable", preventOnFilter: false, draggable: ".cp-form-block", //forceFallback: true, diff --git a/www/form/templates.js b/www/form/templates.js index 66256b7ab..ff75f8254 100644 --- a/www/form/templates.js +++ b/www/form/templates.js @@ -11,7 +11,7 @@ define([ d8.setMilliseconds(0); var d14 = new Date(d8); d14.setHours(14); - [0,1,2].forEach(function (el) { + [0,1,2].forEach(function () { d8.setDate(d8.getDate() + 1); d14.setDate(d14.getDate() + 1); pollValues.push(+d8);