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