Display question type in form creator

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 {

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,

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);