diff --git a/static/css/index.css b/static/css/index.css index a170051..049beab 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -29,12 +29,21 @@ footer { margin-top: 2em; font-size: 0.75rem; } - .media-track { margin: 1ex 0; padding: 1ex; border: 1px solid hsl(0, 0%, 88.2%); } +.media-track-highlighted { + background-color: hsl(81, 100%, 96.1%); + border-color: hsl(118.1, 72%, 58%); + border-style: dotted; +} +.media-track-tagless { + background-color: hsl(0, 100%, 95.7%); + border-color: hsl(0, 79.5%, 67.5%); + border-style: dashed; +} option.unused { font-style: italic; color: red; diff --git a/static/library.js b/static/library.js index 34d1ee8..0d58878 100644 --- a/static/library.js +++ b/static/library.js @@ -3,10 +3,15 @@ var appData = { tracks: [], tags: [], + highlightedTag: null, }; const MediaTrack = { - props: ['track', 'tags'], + props: [ + 'track', + 'tags', + 'highlightedTag', + ], data: function() { return { editing: false, @@ -60,9 +65,19 @@ console.error(error) }); }, + highlightTag: function() { + this.$root.highlightedTag = this.track.tag; + }, + highlightNone: function() { + this.$root.highlightedTag = null; + }, }, template: ` -
+