mirror of
https://github.com/gotson/komga.git
synced 2025-12-22 16:33:29 +01:00
fix(webui): fix combobox search value remaining after list selection
update vuetify
This commit is contained in:
Gauthier Roebroeck
parent
a6c47f1b85
commit
d114b0efb2
6 changed files with 135 additions and 125 deletions
22
komga-webui/package-lock.json
generated
22
komga-webui/package-lock.json
generated
|
|
@ -25,7 +25,7 @@
|
|||
"vue-typed-mixins": "^0.2.0",
|
||||
"vuedraggable": "^2.24.0",
|
||||
"vuelidate": "^0.7.5",
|
||||
"vuetify": "^2.3.7",
|
||||
"vuetify": "^2.5.1",
|
||||
"vuex": "^3.5.1",
|
||||
"vuex-persistedstate": "^3.2.0",
|
||||
"vuex-router-sync": "^5.0.0"
|
||||
|
|
@ -19870,9 +19870,16 @@
|
|||
}
|
||||
},
|
||||
"node_modules/vuetify": {
|
||||
"version": "2.3.7",
|
||||
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.3.7.tgz",
|
||||
"integrity": "sha512-9PNorMNNcn0okT78ZpN86qL5Zx4xu0yzcO2w1IdN3ECdbAP00rHe8CEYCThakwXGUuTZ8Iv7gAMDqH6zfxSMtA=="
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.5.1.tgz",
|
||||
"integrity": "sha512-L7bn8yVMXbt1QeTGaLTeyKE/tvhRUtGm5aQdCzUGu6lsGgEm7H707I4fjHftGNGNmmrUr3pmjpVrtqx65BMpUw==",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/johnleider"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^2.6.4"
|
||||
}
|
||||
},
|
||||
"node_modules/vuetify-loader": {
|
||||
"version": "1.6.0",
|
||||
|
|
@ -37680,9 +37687,10 @@
|
|||
"integrity": "sha512-GAAG8QAFVp7BFeQlNaThpTbimq3+HypBPNwdkCkHZZeVaD5zmXXfhp357dcUJXHXTZjSln0PvP6wiwLZXkFTwg=="
|
||||
},
|
||||
"vuetify": {
|
||||
"version": "2.3.7",
|
||||
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.3.7.tgz",
|
||||
"integrity": "sha512-9PNorMNNcn0okT78ZpN86qL5Zx4xu0yzcO2w1IdN3ECdbAP00rHe8CEYCThakwXGUuTZ8Iv7gAMDqH6zfxSMtA=="
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.5.1.tgz",
|
||||
"integrity": "sha512-L7bn8yVMXbt1QeTGaLTeyKE/tvhRUtGm5aQdCzUGu6lsGgEm7H707I4fjHftGNGNmmrUr3pmjpVrtqx65BMpUw==",
|
||||
"requires": {}
|
||||
},
|
||||
"vuetify-loader": {
|
||||
"version": "1.6.0",
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
"vue-typed-mixins": "^0.2.0",
|
||||
"vuedraggable": "^2.24.0",
|
||||
"vuelidate": "^0.7.5",
|
||||
"vuetify": "^2.3.7",
|
||||
"vuetify": "^2.5.1",
|
||||
"vuex": "^3.5.1",
|
||||
"vuex-persistedstate": "^3.2.0",
|
||||
"vuex-router-sync": "^5.0.0"
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<v-divider/>
|
||||
|
||||
<v-card-text style="height: 50%">
|
||||
<v-container fluid class="pa-0">
|
||||
<v-container fluid class="">
|
||||
|
||||
<v-row justify="space-around" v-if="!single">
|
||||
<v-col cols="auto" class="pa-1">{{ $t('dialog.transient_book_viewer.label_candidate') }}</v-col>
|
||||
|
|
|
|||
|
|
@ -185,7 +185,7 @@
|
|||
</settings-select>
|
||||
</v-list-item>
|
||||
|
||||
<div v-if="continuousReader">
|
||||
<template v-if="continuousReader">
|
||||
<v-subheader class="font-weight-black text-h6">{{ $t('bookreader.settings.webtoon') }}</v-subheader>
|
||||
<v-list-item>
|
||||
<settings-select
|
||||
|
|
@ -201,9 +201,9 @@
|
|||
:label="$t('bookreader.settings.side_padding')"
|
||||
/>
|
||||
</v-list-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="!continuousReader">
|
||||
<template v-if="!continuousReader">
|
||||
<v-subheader class="font-weight-black text-h6">{{ $t('bookreader.settings.paged') }}</v-subheader>
|
||||
<v-list-item>
|
||||
<settings-select
|
||||
|
|
@ -220,7 +220,7 @@
|
|||
:label="$t('bookreader.settings.page_layout')"
|
||||
/>
|
||||
</v-list-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
</v-list>
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@
|
|||
</v-btn>
|
||||
</toolbar-sticky>
|
||||
|
||||
<v-container fluid class="px-6">
|
||||
<v-container fluid class="pa-6">
|
||||
<v-row>
|
||||
<v-col cols="4" sm="4" md="auto" lg="auto" xl="auto">
|
||||
<item-card
|
||||
|
|
@ -98,77 +98,79 @@
|
|||
</v-col>
|
||||
|
||||
<v-col cols="8">
|
||||
<v-row>
|
||||
<v-col class="py-1">
|
||||
<router-link :to="{name:'browse-series', params: {seriesId: book.seriesId}}" class="link-underline">
|
||||
<span class="text-h5" v-if="!$_.isEmpty(series)">{{ series.metadata.title }}</span>
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col class="py-1">
|
||||
<div class="text-h6">{{ book.metadata.title }}</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row class="text-caption">
|
||||
<v-col cols="auto">
|
||||
{{ book.metadata.number }} · {{ book.media.pagesCount }} {{ $t('common.pages') }}
|
||||
</v-col>
|
||||
<v-col cols="auto" v-if="book.metadata.releaseDate">
|
||||
{{
|
||||
new Intl.DateTimeFormat($i18n.locale, {dateStyle: 'long'}).format(new Date(book.metadata.releaseDate))
|
||||
}}
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<div class="hidden-xs-only">
|
||||
<v-row class="align-center">
|
||||
<v-col cols="auto">
|
||||
<v-btn color="accent"
|
||||
small
|
||||
:title="$t('browse_book.read_book')"
|
||||
:to="{name: 'read-book', params: { bookId: bookId}, query: { context: context.origin, contextId: context.id}}"
|
||||
:disabled="book.media.status !== 'READY' || !canReadPages"
|
||||
>
|
||||
<v-icon left small>mdi-book-open-page-variant</v-icon>
|
||||
{{ $t('common.read') }}
|
||||
</v-btn>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col class="py-1">
|
||||
<router-link :to="{name:'browse-series', params: {seriesId: book.seriesId}}" class="link-underline">
|
||||
<span class="text-h5" v-if="!$_.isEmpty(series)">{{ series.metadata.title }}</span>
|
||||
</router-link>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="auto">
|
||||
<v-btn small
|
||||
:title="$t('browse_book.read_incognito')"
|
||||
:to="{name: 'read-book', params: { bookId: bookId}, query: { context: context.origin, contextId: context.id, incognito: true}}"
|
||||
:disabled="book.media.status !== 'READY' || !canReadPages"
|
||||
>
|
||||
<v-icon left small>mdi-incognito</v-icon>
|
||||
{{ $t('common.read') }}
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="auto">
|
||||
<v-btn :title="$t('browse_book.download_file')"
|
||||
small
|
||||
:disabled="!canDownload"
|
||||
:href="fileUrl">
|
||||
<v-icon left small>mdi-file-download</v-icon>
|
||||
{{ $t('common.download') }}
|
||||
</v-btn>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col class="py-1">
|
||||
<div class="text-h6">{{ book.metadata.title }}</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row v-if="book.metadata.summary">
|
||||
<v-col>
|
||||
<read-more>{{ book.metadata.summary }}</read-more>
|
||||
<v-row class="text-caption">
|
||||
<v-col cols="auto">
|
||||
{{ book.metadata.number }} · {{ book.media.pagesCount }} {{ $t('common.pages') }}
|
||||
</v-col>
|
||||
<v-col cols="auto" v-if="book.metadata.releaseDate">
|
||||
{{
|
||||
new Intl.DateTimeFormat($i18n.locale, {dateStyle: 'long'}).format(new Date(book.metadata.releaseDate))
|
||||
}}
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
|
||||
|
||||
<template v-if="$vuetify.breakpoint.smAndUp">
|
||||
<v-row class="align-center">
|
||||
<v-col cols="auto">
|
||||
<v-btn color="accent"
|
||||
small
|
||||
:title="$t('browse_book.read_book')"
|
||||
:to="{name: 'read-book', params: { bookId: bookId}, query: { context: context.origin, contextId: context.id}}"
|
||||
:disabled="book.media.status !== 'READY' || !canReadPages"
|
||||
>
|
||||
<v-icon left small>mdi-book-open-page-variant</v-icon>
|
||||
{{ $t('common.read') }}
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="auto">
|
||||
<v-btn small
|
||||
:title="$t('browse_book.read_incognito')"
|
||||
:to="{name: 'read-book', params: { bookId: bookId}, query: { context: context.origin, contextId: context.id, incognito: true}}"
|
||||
:disabled="book.media.status !== 'READY' || !canReadPages"
|
||||
>
|
||||
<v-icon left small>mdi-incognito</v-icon>
|
||||
{{ $t('common.read') }}
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="auto">
|
||||
<v-btn :title="$t('browse_book.download_file')"
|
||||
small
|
||||
:disabled="!canDownload"
|
||||
:href="fileUrl">
|
||||
<v-icon left small>mdi-file-download</v-icon>
|
||||
{{ $t('common.download') }}
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row v-if="book.metadata.summary">
|
||||
<v-col>
|
||||
<read-more>{{ book.metadata.summary }}</read-more>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
</v-container>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<div class="hidden-sm-and-up">
|
||||
<template v-if="$vuetify.breakpoint.xsOnly">
|
||||
<v-row class="align-center">
|
||||
<v-col cols="auto">
|
||||
<v-btn color="accent"
|
||||
|
|
@ -209,43 +211,40 @@
|
|||
<read-more>{{ book.metadata.summary }}</read-more>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-for="role in authorRoles"
|
||||
:key="role"
|
||||
<v-row v-for="role in displayedRoles"
|
||||
:key="role"
|
||||
class="align-center text-caption"
|
||||
>
|
||||
<v-row class="align-center text-caption"
|
||||
v-if="authorsByRole[role]"
|
||||
>
|
||||
<v-col cols="4" sm="3" md="2" xl="1" class="py-1 text-uppercase">{{ $t(`author_roles.${role}`) }}</v-col>
|
||||
<v-col cols="8" sm="9" md="10" xl="11" class="py-1">
|
||||
<vue-horizontal>
|
||||
<template v-slot:btn-prev>
|
||||
<v-btn icon small>
|
||||
<v-icon>mdi-chevron-left</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-col cols="4" sm="3" md="2" xl="1" class="py-1 text-uppercase">{{ $t(`author_roles.${role}`) }}</v-col>
|
||||
<v-col cols="8" sm="9" md="10" xl="11" class="py-1">
|
||||
<vue-horizontal>
|
||||
<template v-slot:btn-prev>
|
||||
<v-btn icon small>
|
||||
<v-icon>mdi-chevron-left</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<template v-slot:btn-next>
|
||||
<v-btn icon small>
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-chip v-for="(name, i) in authorsByRole[role]"
|
||||
:key="i"
|
||||
:class="$vuetify.rtl ? 'ml-2' : 'mr-2'"
|
||||
:title="name"
|
||||
:to="{name:'browse-series', params: {seriesId: book.seriesId }, query: {[role]: name}}"
|
||||
label
|
||||
small
|
||||
outlined
|
||||
link
|
||||
>{{ name }}
|
||||
</v-chip>
|
||||
</vue-horizontal>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
<template v-slot:btn-next>
|
||||
<v-btn icon small>
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-chip v-for="(name, i) in authorsByRole[role]"
|
||||
:key="i"
|
||||
:class="$vuetify.rtl ? 'ml-2' : 'mr-2'"
|
||||
:title="name"
|
||||
:to="{name:'browse-series', params: {seriesId: book.seriesId }, query: {[role]: name}}"
|
||||
label
|
||||
small
|
||||
outlined
|
||||
link
|
||||
>{{ name }}
|
||||
</v-chip>
|
||||
</vue-horizontal>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row v-if="book.metadata.tags.length > 0" class="align-center text-caption">
|
||||
<v-col cols="4" sm="3" md="2" xl="1" class="py-1">TAGS</v-col>
|
||||
|
|
@ -340,7 +339,6 @@ export default Vue.extend({
|
|||
components: {ReadMore, ToolbarSticky, ItemCard, BookActionsMenu, ReadListsExpansionPanels, VueHorizontal, RtlIcon},
|
||||
data: () => {
|
||||
return {
|
||||
authorRoles,
|
||||
book: {} as BookDto,
|
||||
series: {} as SeriesDto,
|
||||
context: {} as Context,
|
||||
|
|
@ -431,6 +429,9 @@ export default Vue.extend({
|
|||
route: {name: 'browse-series', params: {seriesId: this.book.seriesId}},
|
||||
}
|
||||
},
|
||||
displayedRoles(): string[] {
|
||||
return authorRoles.filter(x => this.authorsByRole[x])
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
libraryDeleted(event: EventLibraryDeleted) {
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
</template>
|
||||
</filter-drawer>
|
||||
|
||||
<v-container fluid class="px-6">
|
||||
<v-container fluid class="pa-6">
|
||||
<v-row>
|
||||
<v-col cols="4" sm="4" md="auto" lg="auto" xl="auto">
|
||||
<item-card
|
||||
|
|
@ -85,6 +85,7 @@
|
|||
</v-col>
|
||||
|
||||
<v-col cols="8">
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col class="py-1">
|
||||
<div class="text-h5" v-if="$_.get(series, 'metadata.title')">{{ series.metadata.title }}</div>
|
||||
|
|
@ -133,7 +134,7 @@
|
|||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<div class="hidden-xs-only">
|
||||
<template v-if="$vuetify.breakpoint.smAndUp">
|
||||
<v-row class="align-center">
|
||||
<v-col cols="auto">
|
||||
<v-btn :title="$t('menu.download_series')"
|
||||
|
|
@ -165,12 +166,12 @@
|
|||
<read-more>{{ series.booksMetadata.summary }}</read-more>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</v-container>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<div class="hidden-sm-and-up">
|
||||
<template v-if="$vuetify.breakpoint.xsOnly">
|
||||
<!-- Download button -->
|
||||
<v-row class="align-center">
|
||||
<v-col cols="auto">
|
||||
|
|
@ -205,9 +206,9 @@
|
|||
<read-more>{{ series.booksMetadata.summary }}</read-more>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Pubisher -->
|
||||
<!-- Publisher -->
|
||||
<v-row v-if="series.metadata.publisher" class="align-center text-caption">
|
||||
<v-col cols="4" sm="3" md="2" xl="1" class="py-1 text-uppercase">{{ $t('common.publisher') }}</v-col>
|
||||
<v-col cols="8" sm="9" md="10" xl="11" class="py-1">
|
||||
|
|
@ -286,11 +287,10 @@
|
|||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-divider v-if="series.booksMetadata.authors.length > 0"/>
|
||||
<div v-for="role in authorRolesSeries"
|
||||
:key="role">
|
||||
<v-divider v-if="series.booksMetadata.authors.length > 0" class="my-3"/>
|
||||
<v-row class="align-center text-caption"
|
||||
v-if="authorsByRole[role]"
|
||||
v-for="role in displayedRoles"
|
||||
:key="role"
|
||||
>
|
||||
<v-col cols="4" sm="3" md="2" xl="1" class="py-1 text-uppercase">{{ $t(`author_roles.${role}`) }}</v-col>
|
||||
<v-col cols="8" sm="9" md="10" xl="11" class="py-1">
|
||||
|
|
@ -321,7 +321,6 @@
|
|||
</vue-horizontal>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
|
|
@ -329,7 +328,7 @@
|
|||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-divider class="my-1"/>
|
||||
<v-divider class="mt-4 mb-1"/>
|
||||
|
||||
<empty-state
|
||||
v-if="totalPages === 0"
|
||||
|
|
@ -418,7 +417,6 @@ export default Vue.extend({
|
|||
},
|
||||
data: function () {
|
||||
return {
|
||||
authorRolesSeries,
|
||||
series: {} as SeriesDto,
|
||||
books: [] as BookDto[],
|
||||
selectedBooks: [] as BookDto[],
|
||||
|
|
@ -510,6 +508,9 @@ export default Vue.extend({
|
|||
authorsByRole(): any {
|
||||
return groupAuthorsByRole(this.series.booksMetadata.authors)
|
||||
},
|
||||
displayedRoles(): string[] {
|
||||
return authorRolesSeries.filter(x => this.authorsByRole[x])
|
||||
},
|
||||
},
|
||||
props: {
|
||||
seriesId: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue