groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-07-12 12:21:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

highlight changes when matching

Browse source 
Highlight values that will be updated when matching.
Also removed some dynamic class names to keep tailwind from missing things
https://tailwindcss.com/docs/content-configuration#dynamic-class-names
This commit is contained in:
MxMarx 2023-10-06 16:22:26 -07:00
parent f0929729a3
commit de58dcbb0e
5 changed files with 64 additions and 140 deletions
Download patch file Download diff file Expand all files Collapse all files

6
client/components/app/BookShelfToolbar.vue
View file

@ -49,7 +49,7 @@
<span class="font-mono">{{ numShowing }}</span> <span class="font-mono">{{ numShowing }}</span>
</div> </div>
<div class="flex-grow" /> <div class="flex-grow" />
<ui-checkbox v-if="!isBatchSelecting" v-model="settings.collapseBookSeries" :label="$strings.LabelCollapseSeries" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseBookSeries" /> <ui-checkbox v-if="!isBatchSelecting" v-model="settings.collapseBookSeries" :label="$strings.LabelCollapseSeries" checkbox-bg="bg" check-color="text-white" small class="mr-2" @input="updateCollapseBookSeries" />
<!-- RSS feed --> <!-- RSS feed -->
<ui-tooltip v-if="seriesRssFeed" :text="$strings.LabelOpenRSSFeed" direction="top"> <ui-tooltip v-if="seriesRssFeed" :text="$strings.LabelOpenRSSFeed" direction="top">
@ -65,7 +65,7 @@
<div class="flex-grow hidden sm:inline-block" /> <div class="flex-grow hidden sm:inline-block" />
<!-- collapse series checkbox --> <!-- collapse series checkbox -->
<ui-checkbox v-if="isLibraryPage && isBookLibrary && !isBatchSelecting" v-model="settings.collapseSeries" :label="$strings.LabelCollapseSeries" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseSeries" /> <ui-checkbox v-if="isLibraryPage && isBookLibrary && !isBatchSelecting" v-model="settings.collapseSeries" :label="$strings.LabelCollapseSeries" checkbox-bg="bg" check-color="text-white" small class="mr-2" @input="updateCollapseSeries" />
<!-- library filter select --> <!-- library filter select -->
<controls-library-filter-select v-if="isLibraryPage && !isBatchSelecting" v-model="settings.filterBy" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateFilter" /> <controls-library-filter-select v-if="isLibraryPage && !isBatchSelecting" v-model="settings.filterBy" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateFilter" />
@ -496,4 +496,4 @@ export default {
#toolbar { #toolbar {
box-shadow: 0px 8px 6px #111111aa; box-shadow: 0px 8px 6px #111111aa;
} }
</style> </style>

190
client/components/modals/item/tabs/Match.vue
View file

@ -54,140 +54,38 @@
</a> </a>
</div> </div>
</div> </div>
</div>
<div v-if="selectedMatchOrig.title" class="flex items-center py-2">
<ui-checkbox v-model="selectedMatchUsage.title" checkbox-bg="bg" @input="checkboxToggled" />
<div class="flex-grow ml-4">
<ui-text-input-with-label v-model="selectedMatch.title" :disabled="!selectedMatchUsage.title" :label="$strings.LabelTitle" />
<p v-if="mediaMetadata.title" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.title || '' }}</p>
</div> </div>
</div>
<div v-if="selectedMatchOrig.subtitle" class="flex items-center py-2">
<ui-checkbox v-model="selectedMatchUsage.subtitle" checkbox-bg="bg" @input="checkboxToggled" />
<div class="flex-grow ml-4">
<ui-text-input-with-label v-model="selectedMatch.subtitle" :disabled="!selectedMatchUsage.subtitle" :label="$strings.LabelSubtitle" />
<p v-if="mediaMetadata.subtitle" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.subtitle || '' }}</p>
</div>
</div>
<div v-if="selectedMatchOrig.author" class="flex items-center py-2">
<ui-checkbox v-model="selectedMatchUsage.author" checkbox-bg="bg" @input="checkboxToggled" />
<div class="flex-grow ml-4">
<ui-text-input-with-label v-model="selectedMatch.author" :disabled="!selectedMatchUsage.author" :label="$strings.LabelAuthor" />
<p v-if="mediaMetadata.authorName" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.authorName || '' }}</p>
</div>
</div>
<div v-if="selectedMatchOrig.narrator" class="flex items-center py-2">
<ui-checkbox v-model="selectedMatchUsage.narrator" checkbox-bg="bg" @input="checkboxToggled" />
<div class="flex-grow ml-4">
<ui-text-input-with-label v-model="selectedMatch.narrator" :disabled="!selectedMatchUsage.narrator" :label="$strings.LabelNarrators" />
<p v-if="mediaMetadata.narratorName" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.narratorName || '' }}</p>
</div>
</div>
<div v-if="selectedMatchOrig.description" class="flex items-center py-2">
<ui-checkbox v-model="selectedMatchUsage.description" checkbox-bg="bg" @input="checkboxToggled" />
<div class="flex-grow ml-4">
<ui-textarea-with-label v-model="selectedMatch.description" :rows="3" :disabled="!selectedMatchUsage.description" :label="$strings.LabelDescription" />
<p v-if="mediaMetadata.description" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.description.substr(0, 100) + (mediaMetadata.description.length > 100 ? '...' : '') }}</p>
</div>
</div>
<div v-if="selectedMatchOrig.publisher" class="flex items-center py-2">
<ui-checkbox v-model="selectedMatchUsage.publisher" checkbox-bg="bg" @input="checkboxToggled" />
<div class="flex-grow ml-4">
<ui-text-input-with-label v-model="selectedMatch.publisher" :disabled="!selectedMatchUsage.publisher" :label="$strings.LabelPublisher" />
<p v-if="mediaMetadata.publisher" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.publisher || '' }}</p>
</div>
</div>
<div v-if="selectedMatchOrig.publishedYear" class="flex items-center py-2">
<ui-checkbox v-model="selectedMatchUsage.publishedYear" checkbox-bg="bg" @input="checkboxToggled" />
<div class="flex-grow ml-4">
<ui-text-input-with-label v-model="selectedMatch.publishedYear" :disabled="!selectedMatchUsage.publishedYear" :label="$strings.LabelPublishYear" />
<p v-if="mediaMetadata.publishedYear" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.publishedYear || '' }}</p>
</div>
</div>
<div v-if="selectedMatchOrig.series" class="flex items-center py-2"> <div
<ui-checkbox v-model="selectedMatchUsage.series" checkbox-bg="bg" @input="checkboxToggled" /> v-for="item in [
<div class="flex-grow ml-4"> {originalValue: mediaMetadata.title, key: 'title', component: 'ui-text-input-with-label', props: {label: $strings.LabelTitle}},
<widgets-series-input-widget v-model="selectedMatch.series" :disabled="!selectedMatchUsage.series" /> {originalValue: mediaMetadata.subtitle, key: 'subtitle', component: 'ui-text-input-with-label', props: {label: $strings.LabelSubtitle}},
<p v-if="mediaMetadata.seriesName" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.seriesName || '' }}</p> {originalValue: mediaMetadata.authorName, key: 'author', component: 'ui-text-input-with-label', props: {label: $strings.LabelAuthor}},
</div> {originalValue: mediaMetadata.narratorName, key: 'narrator', component: 'ui-text-input-with-label', props: {label: $strings.LabelNarrators}},
</div> {originalValue: mediaMetadata.description, key: 'description', component: 'ui-textarea-with-label', props: {label: $strings.LabelDescription}},
<div v-if="selectedMatchOrig.genres && selectedMatchOrig.genres.length" class="flex items-center py-2"> {originalValue: mediaMetadata.publisher, key: 'publisher', component: 'ui-text-input-with-label', props: {label: $strings.LabelPublisher}},
<ui-checkbox v-model="selectedMatchUsage.genres" checkbox-bg="bg" @input="checkboxToggled" /> {originalValue: mediaMetadata.publishedYear,key: 'publishedYear',component: 'ui-text-input-with-label', props: {label: $strings.LabelPublishYear}},
<div class="flex-grow ml-4"> {originalValue: mediaMetadata.seriesName, key: 'series', component: 'widgets-series-input-widget'},
<ui-multi-select v-model="selectedMatch.genres" :items="genres" :disabled="!selectedMatchUsage.genres" :label="$strings.LabelGenres" /> {originalValue: mediaMetadata.genres, key: 'genres', component: 'ui-multi-select', props: {label: $strings.LabelGenres, items: genres}},
<p v-if="mediaMetadata.genres" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.genres.join(', ') }}</p> {originalValue: media.tags, key: 'tags', component: 'ui-text-input-with-label', props: {label: $strings.LabelTags}},
</div> {originalValue: mediaMetadata.language, key: 'language', component: 'ui-text-input-with-label', props: {label: $strings.LabelLanguage}},
</div> {originalValue: mediaMetadata.isbn, key: 'isbn', component: 'ui-text-input-with-label', props: {label: 'ISBN'}},
<div v-if="selectedMatchOrig.tags" class="flex items-center py-2"> {originalValue: mediaMetadata.asin, key: 'asin', component: 'ui-text-input-with-label', props: {label: 'ASIN'}},
<ui-checkbox v-model="selectedMatchUsage.tags" checkbox-bg="bg" @input="checkboxToggled" /> {originalValue: mediaMetadata.itunesId, key: 'itunesId', component: 'ui-text-input-with-label', props: {label: 'iTunes ID'}},
<div class="flex-grow ml-4"> {originalValue: mediaMetadata.feedUrl, key: 'feedUrl', component: 'ui-text-input-with-label', props: {label: 'RSS Feed URL'}},
<ui-text-input-with-label v-model="selectedMatch.tags" :disabled="!selectedMatchUsage.tags" :label="$strings.LabelTags" /> {originalValue: mediaMetadata.itunesPageUrl,key: 'itunesPageUrl',component: 'ui-text-input-with-label', props: {label: 'iTunes Page URL'}},
<p v-if="media.tags" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ media.tags.join(', ') }}</p> {originalValue: mediaMetadata.releaseDate, key: 'releaseDate', component: 'ui-text-input-with-label', props: {label: $strings.LabelReleaseDate}},
</div> {originalValue: mediaMetadata.explicit, key: 'explicit', component: 'ui-checkbox', props: {label: $strings.LabelExplicit}, originalValueLabel: mediaMetadata.explicit ? 'explicit (checked)' : 'Not Explicit (unchecked)'},
</div> {originalValue: mediaMetadata.abridged, key: 'abridged', component: 'ui-checkbox', props: {label: $strings.LabelAbridged}, originalValueLabel: mediaMetadata.abridged ? 'Abridged (checked)' : 'Unabridged (unchecked)'},
<div v-if="selectedMatchOrig.language" class="flex items-center py-2"> ]"
<ui-checkbox v-model="selectedMatchUsage.language" checkbox-bg="bg" @input="checkboxToggled" /> :key="item.key"
<div class="flex-grow ml-4"> @checkbox-toggled="checkboxToggled">
<ui-text-input-with-label v-model="selectedMatch.language" :disabled="!selectedMatchUsage.language" :label="$strings.LabelLanguage" /> <div v-if="shouldRender(selectedMatch[item.key])" class="flex items-center py-2">
<p v-if="mediaMetadata.language" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.language || '' }}</p> <ui-checkbox v-model="selectedMatchUsage[item.key]" checkbox-bg="bg" :check-color="isChanged(item.originalValue, item.key) ? 'text-green-500' : 'text-green-600'" :border-color="isChanged(item.originalValue, item.key) ? 'gray-400' : 'gray-600'" @input="$emit('checkbox-toggled')" />
</div> <div class="flex-grow ml-4 min-w-0" :class="{ 'pt-4': typeof item.originalValue == 'boolean', 'hasNewValue': isChanged(item.originalValue, item.key) }">
</div> <component :is="item.component" v-bind="item.props" v-model="selectedMatch[item.key]" :disabled="!selectedMatchUsage[item.key]" :checkbox-bg="!selectedMatchUsage[item.key] ? 'bg' : 'primary'" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
<div v-if="selectedMatchOrig.isbn" class="flex items-center py-2"> <p v-if="shouldRender(item.originalValue)" class="text-xs ml-1 text-white text-opacity-60 truncate ..." :title="valueToString(item.originalValue, item.key)"> {{ $strings.LabelCurrently }} {{ item.originalValueLabel || valueToString(item.originalValue, item.key) }} </p>
<ui-checkbox v-model="selectedMatchUsage.isbn" checkbox-bg="bg" @input="checkboxToggled" /> </div>
<div class="flex-grow ml-4">
<ui-text-input-with-label v-model="selectedMatch.isbn" :disabled="!selectedMatchUsage.isbn" label="ISBN" />
<p v-if="mediaMetadata.isbn" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.isbn || '' }}</p>
</div>
</div>
<div v-if="selectedMatchOrig.asin" class="flex items-center py-2">
<ui-checkbox v-model="selectedMatchUsage.asin" checkbox-bg="bg" @input="checkboxToggled" />
<div class="flex-grow ml-4">
<ui-text-input-with-label v-model="selectedMatch.asin" :disabled="!selectedMatchUsage.asin" label="ASIN" />
<p v-if="mediaMetadata.asin" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.asin || '' }}</p>
</div>
</div>
<div v-if="selectedMatchOrig.itunesId" class="flex items-center py-2">
<ui-checkbox v-model="selectedMatchUsage.itunesId" checkbox-bg="bg" @input="checkboxToggled" />
<div class="flex-grow ml-4">
<ui-text-input-with-label v-model="selectedMatch.itunesId" type="number" :disabled="!selectedMatchUsage.itunesId" label="iTunes ID" />
<p v-if="mediaMetadata.itunesId" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.itunesId || '' }}</p>
</div>
</div>
<div v-if="selectedMatchOrig.feedUrl" class="flex items-center py-2">
<ui-checkbox v-model="selectedMatchUsage.feedUrl" checkbox-bg="bg" @input="checkboxToggled" />
<div class="flex-grow ml-4">
<ui-text-input-with-label v-model="selectedMatch.feedUrl" :disabled="!selectedMatchUsage.feedUrl" label="RSS Feed URL" />
<p v-if="mediaMetadata.feedUrl" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.feedUrl || '' }}</p>
</div>
</div>
<div v-if="selectedMatchOrig.itunesPageUrl" class="flex items-center py-2">
<ui-checkbox v-model="selectedMatchUsage.itunesPageUrl" checkbox-bg="bg" @input="checkboxToggled" />
<div class="flex-grow ml-4">
<ui-text-input-with-label v-model="selectedMatch.itunesPageUrl" :disabled="!selectedMatchUsage.itunesPageUrl" label="iTunes Page URL" />
<p v-if="mediaMetadata.itunesPageUrl" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.itunesPageUrl || '' }}</p>
</div>
</div>
<div v-if="selectedMatchOrig.releaseDate" class="flex items-center py-2">
<ui-checkbox v-model="selectedMatchUsage.releaseDate" checkbox-bg="bg" @input="checkboxToggled" />
<div class="flex-grow ml-4">
<ui-text-input-with-label v-model="selectedMatch.releaseDate" :disabled="!selectedMatchUsage.releaseDate" :label="$strings.LabelReleaseDate" />
<p v-if="mediaMetadata.releaseDate" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.releaseDate || '' }}</p>
</div>
</div>
<div v-if="selectedMatchOrig.explicit != null" class="flex items-center pb-2" :class="{ 'pt-2': mediaMetadata.explicit == null }">
<ui-checkbox v-model="selectedMatchUsage.explicit" checkbox-bg="bg" @input="checkboxToggled" />
<div class="flex-grow ml-4" :class="{ 'pt-4': mediaMetadata.explicit != null }">
<ui-checkbox v-model="selectedMatch.explicit" :label="$strings.LabelExplicit" :disabled="!selectedMatchUsage.explicit" :checkbox-bg="!selectedMatchUsage.explicit ? 'bg' : 'primary'" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
<p v-if="mediaMetadata.explicit != null" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.explicit ? 'Explicit (checked)' : 'Not Explicit (unchecked)' }}</p>
</div>
</div>
<div v-if="selectedMatchOrig.abridged != null" class="flex items-center pb-2" :class="{ 'pt-2': mediaMetadata.abridged == null }">
<ui-checkbox v-model="selectedMatchUsage.abridged" checkbox-bg="bg" @input="checkboxToggled" />
<div class="flex-grow ml-4" :class="{ 'pt-4': mediaMetadata.abridged != null }">
<ui-checkbox v-model="selectedMatch.abridged" :label="$strings.LabelAbridged" :disabled="!selectedMatchUsage.abridged" :checkbox-bg="!selectedMatchUsage.abridged ? 'bg' : 'primary'" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
<p v-if="mediaMetadata.abridged != null" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.abridged ? 'Abridged (checked)' : 'Unabridged (unchecked)' }}</p>
</div> </div>
</div> </div>
@ -309,6 +207,28 @@ export default {
} }
}, },
methods: { methods: {
valueToString(value, key) {
if (Array.isArray(value) && key === 'series') {
return value.map(item => item.displayName).join(",")
} else if (Array.isArray(value)) {
return value.join(', ')
} else if (typeof value == "boolean") {
return value
} else {
// strip html tags for rich text descriptions
return value.replace(/(<([^>]+)>)/gi, "") || ''
}
},
shouldRender(value) {
if (typeof value == "boolean") {
return value != null
} else {
return value && value.length
}
},
isChanged(originalValue, key) {
return this.valueToString(originalValue, key) != this.valueToString(this.selectedMatch[key], key)
},
selectAllToggled(val) { selectAllToggled(val) {
for (const key in this.selectedMatchUsage) { for (const key in this.selectedMatchUsage) {
this.selectedMatchUsage[key] = val this.selectedMatchUsage[key] = val
@ -576,7 +496,7 @@ export default {
} }
</script> </script>
<style> <style lang="postcss" scoped>
.matchListWrapper { .matchListWrapper {
height: calc(100% - 124px); height: calc(100% - 124px);
} }
@ -586,4 +506,8 @@ export default {
height: calc(100% - 80px); height: calc(100% - 80px);
} }
} }
::v-deep .hasNewValue * {
@apply text-green-500
}
</style> </style>

2
client/components/modals/podcast/RemoveEpisode.vue
View file

@ -14,7 +14,7 @@
<p class="text-xs font-semibold text-warning text-opacity-90">Note: This does not delete the audio file unless toggling "Hard delete file"</p> <p class="text-xs font-semibold text-warning text-opacity-90">Note: This does not delete the audio file unless toggling "Hard delete file"</p>
</div> </div>
<div class="flex justify-between items-center pt-4"> <div class="flex justify-between items-center pt-4">
<ui-checkbox v-model="hardDeleteFile" :label="$strings.LabelHardDeleteFile" check-color="error" checkbox-bg="bg" small label-class="text-base text-gray-200 pl-3" /> <ui-checkbox v-model="hardDeleteFile" :label="$strings.LabelHardDeleteFile" check-color="text-error" checkbox-bg="bg" small label-class="text-base text-gray-200 pl-3" />
<ui-btn @click="submit">{{ btnText }}</ui-btn> <ui-btn @click="submit">{{ btnText }}</ui-btn>
</div> </div>

4
client/components/ui/Checkbox.vue
View file

@ -25,7 +25,7 @@ export default {
}, },
checkColor: { checkColor: {
type: String, type: String,
default: 'green-500' default: 'text-green-500'
}, },
labelClass: { labelClass: {
type: String, type: String,
@ -62,7 +62,7 @@ export default {
return classes.join(' ') return classes.join(' ')
}, },
svgClass() { svgClass() {
var classes = [`text-${this.checkColor}`] var classes = [this.checkColor]
if (this.small) classes.push('w-3 h-3') if (this.small) classes.push('w-3 h-3')
else if (this.medium) classes.push('w-3.5 h-3.5') else if (this.medium) classes.push('w-3.5 h-3.5')
else classes.push('w-4 h-4') else classes.push('w-4 h-4')

2
client/pages/batch/index.vue
View file

@ -65,7 +65,7 @@
:label="$strings.LabelExplicit" :label="$strings.LabelExplicit"
:disabled="!selectedBatchUsage.explicit" :disabled="!selectedBatchUsage.explicit"
:checkbox-bg="!selectedBatchUsage.explicit ? 'bg' : 'primary'" :checkbox-bg="!selectedBatchUsage.explicit ? 'bg' : 'primary'"
:check-color="!selectedBatchUsage.explicit ? 'gray-600' : 'green-500'" :check-color="!selectedBatchUsage.explicit ? 'text-gray-600' : 'text-green-500'"
border-color="gray-600" border-color="gray-600"
:label-class="!selectedBatchUsage.explicit ? 'pl-2 text-base text-gray-400 font-semibold' : 'pl-2 text-base font-semibold'" :label-class="!selectedBatchUsage.explicit ? 'pl-2 text-base text-gray-400 font-semibold' : 'pl-2 text-base font-semibold'"
/> />