Add hover effects for missing and shared tags

This commit is contained in:
Annika Backstrom 2019-12-17 22:31:04 -05:00
parent 06e1e19f72
commit 9ad5795475
3 changed files with 32 additions and 6 deletions

View File

@ -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;

View File

@ -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: `
<div class="media-track" @click="edit()">
<div class="media-track"
:class="{ 'media-track-highlighted': track.tag === highlightedTag, 'media-track-tagless': track.tag === '' }"
@click="edit()"
@mouseover="highlightTag()"
@mouseout="highlightNone()">
<template v-if="editing">
<form method="patch" :action="patch_url" @keyup.27="cancel">
<select v-model="track.tag" :disabled="saving">
@ -81,7 +96,7 @@
};
const MediaLibrary = {
props: ['tracks', 'tags'],
props: ['tracks', 'tags', 'highlightedTag'],
components: {
'media-track': MediaTrack,
},
@ -91,6 +106,7 @@
:key="track.uuid"
:track="track"
:tags="tags"
:highlightedTag="highlightedTag"
></media-track>
</div>
`,

View File

@ -1,7 +1,8 @@
<div id="app">
<media-library
v-bind:tracks="tracks"
v-bind:tags="tags"
:tracks="tracks"
:tags="tags"
:highlighted-tag="highlightedTag"
></media-library>
<upload-box></upload-box>
</div>