diff --git a/css/80_app.css b/css/80_app.css index a99b480a3..d4828d11f 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -259,10 +259,12 @@ table.tags, table.tags td, table.tags th { .ar { right: 0; } input.hide, +textarea.hide, div.hide, form.hide, button.hide, a.hide, +ul.hide, li.hide { display: none; } @@ -2400,8 +2402,26 @@ div.combobox { /* Raw Tag Editor ------------------------------------------------------- */ +.raw-tag-options { + display: flex; + flex-flow: row nowrap; + flex-direction: row-reverse; + margin-top: -25px; +} +.raw-tag-option { + padding: 5px; +} + +.tag-text { + width: 100%; + height: 100%; + font-family: monospace; + white-space: pre; +} + +.tag-text, .tag-list { - padding-top: 10px; + margin-top: 10px; } .tag-row { width: 100%; diff --git a/modules/ui/raw_tag_editor.js b/modules/ui/raw_tag_editor.js index 72c48745f..ee5d97ac2 100644 --- a/modules/ui/raw_tag_editor.js +++ b/modules/ui/raw_tag_editor.js @@ -75,6 +75,51 @@ export function uiRawTagEditor(context) { rowData.push({ index: _indexedKeys.length, key: '', value: '' }); } + // --------- EXPERIMENT! + var options = wrap.selectAll('.raw-tag-options') + .data([0]) + + var optionsEnter = options.enter() + .append('div') + .attr('class', 'raw-tag-options'); + + var optionEnter = optionsEnter.selectAll('.raw-tag-option') + .data(['text', 'list']) + .enter(); + + optionEnter + .append('a') + .attr('class', 'raw-tag-option') + .attr('href', '#') + .text(function(d) { return d; }) + .on('click', function(d) { + wrap.selectAll('.tag-text') + .classed('hide', (d === 'list')); + wrap.selectAll('.tag-list, .add-row') + .classed('hide', (d === 'text')); + }); + + + var textarea = wrap.selectAll('.tag-text') + .data([0]); + + textarea = textarea.enter() + .append('textarea') + .attr('class', 'tag-text hide') + .merge(textarea); + + textarea + .attr('rows', rowData.length + 1) + .text(asText(rowData)); + + function asText(rows) { + return rows + .filter(function(row) { return row.key && row.key.trim() !== ''; }) + .map(function(row) { return row.key + '=' + row.value; }) + .join('\n') + '\n'; + } + // --------- END + // List of tags var list = wrap.selectAll('.tag-list') .data([0]);