Commit 5115896c authored by Duhoux Pierre-Louis's avatar Duhoux Pierre-Louis

delete all visible, mark all visible as read

parent af971b0a
......@@ -358,7 +358,30 @@
"description": "Label of the option in filter languages list for no filter (display all languages)"
},
"list_global_read": {
"message": "Mark all visible mangas as read",
"description": "Tooltip for button to mark all visible mangas as read"
},
"list_global_read_title": {
"message": "Mark all as read",
"description": "Title of the dialog to mark all visible mangas as read"
},
"list_global_read_text": {
"message": "Mark all currently visible mangas which have new chapters ($1 mangas) as read ?",
"description": "Text of the dialog to mark all visible mangas as read, $1 is the number of mangas which have new chapters and which will be affected by the action"
},
"list_global_delete": {
"message": "Delete all visible mangas",
"description": "Tooltip for button to delete all visible mangas"
},
"list_global_delete_title": {
"message": "Delete all visible",
"description": "Title of the dialog to delete all visible mangas"
},
"list_global_delete_text": {
"message": "Delete all currently visible mangas ($1 mangas) ?",
"description": "Text of the dialog to delete all visible mangas, $1 is the number of mangas which will be affected by the action"
},
"list_sort_alpha": {
"message": "Sort mangas in alphabetical order",
"description": "Tooltip for alphabetical sort on mangas list"
......
<template>
<div class="cat-cont">
<!-- Eye button to include all / do not care about all -->
<v-tooltip v-if="!allincluded" top content-class="icon-ttip">
<v-tooltip v-if="!staticCats && !allincluded" top content-class="icon-ttip">
<v-icon class="cat-act" @click.stop="stateAll('include')" slot="activator">mdi-eye</v-icon>
<span>{{i18n("list_cat_include_all")}}</span>
</v-tooltip>
<v-tooltip v-if="allincluded" top content-class="icon-ttip">
<v-tooltip v-if="!staticCats && allincluded" top content-class="icon-ttip">
<v-icon class="cat-act" @click.stop="stateAll('')" slot="activator">mdi-eye-off</v-icon>
<span>{{i18n("list_cat_donotcare_all")}}</span>
</v-tooltip>
......
......@@ -3,8 +3,8 @@
<v-container fluid class="amr-list-line" v-if="nbDisplayed > 0">
<!-- Manga line-->
<Manga
v-for="manga in mangas"
:key="manga.key"
v-for="(manga, key) in mangas"
:key="key"
:manga="manga"
:is-in-group="nbDisplayed > 1"
:is-first="manga.key === first.key"
......
......@@ -8,14 +8,27 @@
<div v-if="loaded">
<div v-if="allMangas.length" class="amr-mangas">
<div class="amr-filters-container">
<v-tooltip top content-class="icon-ttip">
<v-icon slot="activator" @click="sort = 'az'" :class="'amr-filter ' + (sort === 'az' ? 'activated' : '')">mdi-sort-alphabetical</v-icon>
<span>{{i18n("list_sort_alpha")}}</span>
</v-tooltip>
<v-tooltip top content-class="icon-ttip">
<v-icon slot="activator" @click="sort = 'updates'" :class="'amr-filter ' + (sort === 'updates' ? 'activated' : '')">mdi-flash</v-icon>
<span>{{i18n("list_sort_new")}}</span>
</v-tooltip>
<v-card v-if="visMangas.length" color="grey lighten-4" class="hover-card">
<v-tooltip v-if="visNewMangas.length" top content-class="icon-ttip">
<v-icon slot="activator" @click="markAllAsRead()">mdi-eye</v-icon>
<span>{{i18n("list_global_read")}}</span>
</v-tooltip>
<v-tooltip top content-class="icon-ttip">
<v-icon slot="activator" @click="deleteAll()">mdi-delete</v-icon>
<span>{{i18n("list_global_delete")}}</span>
</v-tooltip>
</v-card>
<v-card v-if="visMangas.length" color="grey lighten-2" class="hover-card">
<v-icon class="filters-icon">mdi-filter</v-icon>
<v-tooltip top content-class="icon-ttip">
<v-icon slot="activator" @click="sort = 'az'" :class="'amr-filter ' + (sort === 'az' ? 'activated' : '')">mdi-sort-alphabetical</v-icon>
<span>{{i18n("list_sort_alpha")}}</span>
</v-tooltip>
<v-tooltip top content-class="icon-ttip">
<v-icon slot="activator" @click="sort = 'updates'" :class="'amr-filter ' + (sort === 'updates' ? 'activated' : '')">mdi-flash</v-icon>
<span>{{i18n("list_sort_new")}}</span>
</v-tooltip>
</v-card>
</div>
<!-- Categories -->
<div class="amr-categories-container">
......@@ -24,13 +37,13 @@
<!-- Load manga list -->
<div class="amr-manga-list-container">
<transition-group name="flip-list" tag="div">
<MangaGroup v-if="options.groupmgs === 0" v-for="mg in allMangas" v-bind:key="mg.key" :mangas="[mg]" />
<MangaGroup v-if="options.groupmgs === 0" v-for="(mg, key) in allMangas" v-bind:key="key" :mangas="[mg]" />
<MangaGroup v-if="options.groupmgs !== 0" v-for="(grp, key) in groupedMangas" v-bind:key="key" :mangas="grp" />
</transition-group>
</div>
</div>
<!-- No mangas in list because of caegories state -->
<div v-if="!hasDispMangas && allMangas.length > 0" class="amr-nomangas">
<div v-if="visMangas.length === 0 && allMangas.length > 0" class="amr-nomangas">
<p v-html="i18n('list_no_manga_catstate_message')">
</p>
</div>
......@@ -43,6 +56,21 @@
</p>
</div>
</div>
<v-dialog v-model="showDialog" max-width="500px">
<v-card>
<v-card-title>
<span class="headline" v-html="dialogTitle"></span>
</v-card-title>
<v-card-text>
<span v-html="dialogText"></span>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat @click.native="showDialog = false">{{i18n("button_no")}}</v-btn>
<v-btn color="blue darken-1" flat @click.native="dialogAction">{{i18n("button_yes")}}</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
......@@ -58,7 +86,11 @@ export default {
data() {
return {
loaded: false,
sort: "updates" // sort mode for list (az : alphabetical, updates : mangas with updates first)
sort: "updates", // sort mode for list (az : alphabetical, updates : mangas with updates first)
showDialog: false, // do show dialog to ask smthg
dialogTitle: "", //title of opened dialog
dialogText: "", // text of opened dialog
dialogAction: () => {} // action to take on yes in dialog
};
},
computed: {
......@@ -71,14 +103,20 @@ export default {
return this.options.categoriesStates;
},
/**
* Return number of displayed mangas (depending on categories state)
* Return all visible mangas
*/
hasDispMangas: function() {
for (let mg of this.allMangas) {
if (utils.displayFilterCats(mg, this.options.categoriesStates))
return true
}
return false
visMangas: function() {
return this.allMangas.filter(
mg => utils.displayFilterCats(mg, this.options.categoriesStates)
)
},
/**
* Return all visible mangas having new chapters to read
*/
visNewMangas: function() {
return this.visMangas.filter(
mg => utils.hasNew(mg)
)
},
/**
* Build mangas groups (by name)
......@@ -86,7 +124,7 @@ export default {
groupedMangas: function() {
// sort mangas
let sort = this.sort;
let sorted = this.allMangas.sort(function(a, b) {
let sorted = this.visMangas.sort(function(a, b) {
if (sort === "az") {
return a.name < b.name ? -1 : (a.name === b.name ? 0 : 1);
} else if (sort === "updates") {
......@@ -112,6 +150,38 @@ export default {
importSamples() {
// we don't do this.$store.dispatch("importSamples"); because to load list of chapters, implementations rely on jQuery, which is not loaded in pages, rely on background page to do so
browser.runtime.sendMessage({ action: "importSamples" });
},
markAllAsRead() {
this.dialogTitle = i18n("list_global_read_title");
this.dialogText = i18n("list_global_read_text", this.visNewMangas.length);
let self = this;
this.dialogAction = () => {
self.visNewMangas.forEach(mg => {
self.$store.dispatch("readManga", {
url: mg.url,
mirror: mg.mirror,
lastChapterReadName: mg.listChaps[0][0],
lastChapterReadURL: mg.listChaps[0][1],
name: mg.name
})
})
self.showDialog = false
}
this.showDialog = true;
},
deleteAll() {
this.dialogTitle = i18n("list_global_delete_title");
this.dialogText = i18n("list_global_delete_text", this.visMangas.length);
let self = this;
this.dialogAction = () => {
self.visMangas.forEach(mg => {
self.$store.dispatch("deleteManga", {
key: mg.key
})
})
self.showDialog = false
}
this.showDialog = true;
}
},
async created() {
......@@ -142,17 +212,14 @@ export default {
}
.amr-filters-container {
float: right;
margin-top: 10px;
margin-right: 10px;
margin-top: 7px;
margin-right: 9px;
}
.amr-categories-container {
margin-right: 44px;
}
.amr-filter {
font-size: 20px;
color:grey;
margin-left: 4px;
cursor: pointer;
}
.theme--dark .icon.amr-filter {
color:grey;
......@@ -166,4 +233,20 @@ export default {
.flip-list-move {
transition: transform 1s;
}
.hover-card {
margin: 0px 2px;
padding: 0px 2px;
display: inline-block;
}
.hover-card i {
font-size: 16px;
margin: 0px 2px;
}
.hover-card .tooltip {
cursor: pointer;
}
.hover-card .filters-icon {
margin: 0;
font-size: 10px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment