diff --git a/build_data.js b/build_data.js index 1f2daac3a..50d282f7a 100644 --- a/build_data.js +++ b/build_data.js @@ -55,9 +55,12 @@ module.exports = function buildData() { // Font Awesome icons used var faIcons = { - 'fas-long-arrow-alt-right': {} + 'fas-i-cursor': {}, + 'fas-long-arrow-alt-right': {}, + 'fas-th-list': {} }; + // The Noun Project icons used var tnpIcons = {}; // Start clean diff --git a/css/80_app.css b/css/80_app.css index d4828d11f..29398a406 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -2407,10 +2407,40 @@ div.combobox { flex-flow: row nowrap; flex-direction: row-reverse; margin-top: -25px; + padding: 0 3px; } -.raw-tag-option { - padding: 5px; +button.raw-tag-option { + flex: 0 0 20px; + height: 20px; + width: 20px; + background: #aaa; + color: #eee; + margin: 0 3px; } +button.raw-tag-option:focus, +button.raw-tag-option:hover, +button.raw-tag-option.active { + color: #fff; + background: #597be7; +} +button.raw-tag-option.selected { + color: #fff; + background: #7092ff; +} +button.raw-tag-option svg.icon { + width: 14px; + height: 14px; + vertical-align: text-bottom; +} +[dir='ltr'] button.raw-tag-option-list { + -moz-transform: scaleX(-1); + -o-transform: scaleX(-1); + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + filter: FlipH; + -ms-filter: "FlipH"; +} + .tag-text { width: 100%; diff --git a/modules/ui/raw_tag_editor.js b/modules/ui/raw_tag_editor.js index 3d83424e5..bb28cc875 100644 --- a/modules/ui/raw_tag_editor.js +++ b/modules/ui/raw_tag_editor.js @@ -14,8 +14,8 @@ export function uiRawTagEditor(context) { var taginfo = services.taginfo; var dispatch = d3_dispatch('change'); var availableViews = [ - { id: 'text' }, - { id: 'list' } + { id: 'text', icon: '#fas-i-cursor' }, + { id: 'list', icon: '#fas-th-list' } ]; var _tagView = (context.storage('raw-tag-editor-view') || 'list'); // 'list, 'text' @@ -94,16 +94,25 @@ export function uiRawTagEditor(context) { .enter(); optionEnter - .append('a') - .attr('class', 'raw-tag-option') - .attr('href', '#') - .text(function(d) { return d.id; }) + .append('button') + .attr('class', function(d) { + return 'raw-tag-option raw-tag-option-' + d.id + (_tagView === d.id ? ' selected' : ''); + }) + .attr('title', function(d) { return d.id; }) .on('click', function(d) { + _tagView = d.id; context.storage('raw-tag-editor-view', d.id); + + wrap.selectAll('.raw-tag-option') + .classed('selected', function(datum) { return datum === d; }); wrap.selectAll('.tag-text') .classed('hide', (d.id !== 'text')); wrap.selectAll('.tag-list, .add-row') .classed('hide', (d.id !== 'list')); + }) + .each(function(d) { + d3_select(this) + .call(svgIcon(d.icon)); }); diff --git a/svg/fontawesome/fas-i-cursor.svg b/svg/fontawesome/fas-i-cursor.svg new file mode 100644 index 000000000..8670a48aa --- /dev/null +++ b/svg/fontawesome/fas-i-cursor.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svg/fontawesome/fas-th-list.svg b/svg/fontawesome/fas-th-list.svg new file mode 100644 index 000000000..108272386 --- /dev/null +++ b/svg/fontawesome/fas-th-list.svg @@ -0,0 +1 @@ + \ No newline at end of file