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 @@ ...@@ -358,7 +358,30 @@
"description": "Label of the option in filter languages list for no filter (display all languages)" "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": { "list_sort_alpha": {
"message": "Sort mangas in alphabetical order", "message": "Sort mangas in alphabetical order",
"description": "Tooltip for alphabetical sort on mangas list" "description": "Tooltip for alphabetical sort on mangas list"
......
<template> <template>
<div class="cat-cont"> <div class="cat-cont">
<!-- Eye button to include all / do not care about all --> <!-- 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> <v-icon class="cat-act" @click.stop="stateAll('include')" slot="activator">mdi-eye</v-icon>
<span>{{i18n("list_cat_include_all")}}</span> <span>{{i18n("list_cat_include_all")}}</span>
</v-tooltip> </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> <v-icon class="cat-act" @click.stop="stateAll('')" slot="activator">mdi-eye-off</v-icon>
<span>{{i18n("list_cat_donotcare_all")}}</span> <span>{{i18n("list_cat_donotcare_all")}}</span>
</v-tooltip> </v-tooltip>
......
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<v-container fluid class="amr-list-line" v-if="nbDisplayed > 0"> <v-container fluid class="amr-list-line" v-if="nbDisplayed > 0">
<!-- Manga line--> <!-- Manga line-->
<Manga <Manga
v-for="manga in mangas" v-for="(manga, key) in mangas"
:key="manga.key" :key="key"
:manga="manga" :manga="manga"
:is-in-group="nbDisplayed > 1" :is-in-group="nbDisplayed > 1"
:is-first="manga.key === first.key" :is-first="manga.key === first.key"
......
...@@ -8,14 +8,27 @@ ...@@ -8,14 +8,27 @@
<div v-if="loaded"> <div v-if="loaded">
<div v-if="allMangas.length" class="amr-mangas"> <div v-if="allMangas.length" class="amr-mangas">
<div class="amr-filters-container"> <div class="amr-filters-container">
<v-tooltip top content-class="icon-ttip"> <v-card v-if="visMangas.length" color="grey lighten-4" class="hover-card">
<v-icon slot="activator" @click="sort = 'az'" :class="'amr-filter ' + (sort === 'az' ? 'activated' : '')">mdi-sort-alphabetical</v-icon> <v-tooltip v-if="visNewMangas.length" top content-class="icon-ttip">
<span>{{i18n("list_sort_alpha")}}</span> <v-icon slot="activator" @click="markAllAsRead()">mdi-eye</v-icon>
</v-tooltip> <span>{{i18n("list_global_read")}}</span>
<v-tooltip top content-class="icon-ttip"> </v-tooltip>
<v-icon slot="activator" @click="sort = 'updates'" :class="'amr-filter ' + (sort === 'updates' ? 'activated' : '')">mdi-flash</v-icon> <v-tooltip top content-class="icon-ttip">
<span>{{i18n("list_sort_new")}}</span> <v-icon slot="activator" @click="deleteAll()">mdi-delete</v-icon>
</v-tooltip> <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> </div>
<!-- Categories --> <!-- Categories -->
<div class="amr-categories-container"> <div class="amr-categories-container">
...@@ -24,13 +37,13 @@ ...@@ -24,13 +37,13 @@
<!-- Load manga list --> <!-- Load manga list -->
<div class="amr-manga-list-container"> <div class="amr-manga-list-container">
<transition-group name="flip-list" tag="div"> <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" /> <MangaGroup v-if="options.groupmgs !== 0" v-for="(grp, key) in groupedMangas" v-bind:key="key" :mangas="grp" />
</transition-group> </transition-group>
</div> </div>
</div> </div>
<!-- No mangas in list because of caegories state --> <!-- 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 v-html="i18n('list_no_manga_catstate_message')">
</p> </p>
</div> </div>
...@@ -43,6 +56,21 @@ ...@@ -43,6 +56,21 @@
</p> </p>
</div> </div>
</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> </div>
</template> </template>
<script> <script>
...@@ -58,7 +86,11 @@ export default { ...@@ -58,7 +86,11 @@ export default {
data() { data() {
return { return {
loaded: false, 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: { computed: {
...@@ -71,14 +103,20 @@ export default { ...@@ -71,14 +103,20 @@ export default {
return this.options.categoriesStates; return this.options.categoriesStates;
}, },
/** /**
* Return number of displayed mangas (depending on categories state) * Return all visible mangas
*/ */
hasDispMangas: function() { visMangas: function() {
for (let mg of this.allMangas) { return this.allMangas.filter(
if (utils.displayFilterCats(mg, this.options.categoriesStates)) mg => utils.displayFilterCats(mg, this.options.categoriesStates)
return true )
} },
return false /**
* Return all visible mangas having new chapters to read
*/
visNewMangas: function() {
return this.visMangas.filter(
mg => utils.hasNew(mg)
)
}, },
/** /**
* Build mangas groups (by name) * Build mangas groups (by name)
...@@ -86,7 +124,7 @@ export default { ...@@ -86,7 +124,7 @@ export default {
groupedMangas: function() { groupedMangas: function() {
// sort mangas // sort mangas
let sort = this.sort; let sort = this.sort;
let sorted = this.allMangas.sort(function(a, b) { let sorted = this.visMangas.sort(function(a, b) {
if (sort === "az") { if (sort === "az") {
return a.name < b.name ? -1 : (a.name === b.name ? 0 : 1); return a.name < b.name ? -1 : (a.name === b.name ? 0 : 1);
} else if (sort === "updates") { } else if (sort === "updates") {
...@@ -112,6 +150,38 @@ export default { ...@@ -112,6 +150,38 @@ export default {
importSamples() { 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 // 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" }); 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() { async created() {
...@@ -142,17 +212,14 @@ export default { ...@@ -142,17 +212,14 @@ export default {
} }
.amr-filters-container { .amr-filters-container {
float: right; float: right;
margin-top: 10px; margin-top: 7px;
margin-right: 10px; margin-right: 9px;
} }
.amr-categories-container { .amr-categories-container {
margin-right: 44px; margin-right: 44px;
} }
.amr-filter { .amr-filter {
font-size: 20px;
color:grey; color:grey;
margin-left: 4px;
cursor: pointer;
} }
.theme--dark .icon.amr-filter { .theme--dark .icon.amr-filter {
color:grey; color:grey;
...@@ -166,4 +233,20 @@ export default { ...@@ -166,4 +233,20 @@ export default {
.flip-list-move { .flip-list-move {
transition: transform 1s; 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> </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