Use a <select> for column types.

stencila · Sep 13, 2017 · 37160a6 · 37160a6
1 parent e966d69
commit 37160a6
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 6 deletions.
diff --git a/src/spreadsheet/ColumnSettingsDialog.js b/src/spreadsheet/ColumnSettingsDialog.js
@@ -27,20 +27,32 @@ export default class ColumnSettingsDialog extends Component {
 
   _renderBody($$) {
     const node = this._getNode()
+    const type = node.attr('type')
     let body = $$('div').addClass('se-body')
     body.append($$('div').append(
       $$('div').addClass('se-label').text(this.getLabel('name')),
       $$('input').ref('name')
-        .addClass('sm-name')
+        .addClass('se-input sm-name')
         .attr('type', 'text')
         .val(node.attr('name'))
     ))
+
+    let typeSelect = $$('select').ref('type')
+      .addClass('se-input sm-type')
+      .val(node.attr('type'))
+    // TODO: get types from schema
+    ;['any', 'number', 'string'].forEach((t) => {
+      let option = $$('option')
+        .attr('value', t)
+        .text(this.getLabel(t))
+      if (t === type) {
+        option.attr('selected', true)
+      }
+      typeSelect.append(option)
+    })
     body.append($$('div').append(
       $$('div').addClass('se-label').text(this.getLabel('type')),
-      $$('input').ref('type')
-        .addClass('sm-type')
-        .attr('type', 'text')
-        .val(node.attr('type'))
+      typeSelect
     ))
     return body
   }

diff --git a/src/spreadsheet/_sheet-dialogs.css b/src/spreadsheet/_sheet-dialogs.css
@@ -28,4 +28,22 @@
 
 .sc-dialog > .se-foot > * {
   flex: 1;
-}
+}
+
+.sc-column-settings-dialog .se-input {
+  width: 100%;
+  margin: 0;
+  outline: none;
+  padding: 10px;
+  background: #fff;
+  border: 1px solid #dadada;
+  border-radius: 5px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+.sc-column-settings-dialog .se-input.sm-type {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}