Commit c4c6c147 authored by Duhoux Pierre-Louis's avatar Duhoux Pierre-Louis

Add new options + add option for dark / light reader theme

parent ea2ff3b2
......@@ -205,7 +205,7 @@
"description": "Option Dark popup"
},
"options_gen_dark_desc": {
"message": "Use a dark background in All Mangas Reader pages",
"message": "Display a dark background in All Mangas Reader pages",
"description": "Option Dark popup description"
},
"options_gen_colors_new": {
......@@ -1219,5 +1219,33 @@
"reader_tips_next_tomorrow": {
"message": "Show me tips later",
"description": "Tips popup, button to close for now but open next tip tomorrow"
},
"options_web_chapter_display_book_opt": {
"message": "Display as a book",
"description": "Label of the option Display as a book in the options page"
},
"options_web_chapter_reading_direction_opt": {
"message": "Reading direction",
"description": "In the options page, label above options to choose reading direction"
},
"options_web_chapter_display_full_chapter_opt": {
"message": "Display full chapter",
"description": "Label of the option Display full chapter in the options page"
},
"options_web_chapter_resize_mode_opt": {
"message": "Scaling mode",
"description": "In the options page, label above options to choose scaling mode"
},
"options_web_chapter_desc": {
"message": "The options below are the global default options to display mangas. While reading, you can change these same options in the side menu. When changing display while reading, your reading preference will only be applied to the current manga.",
"description": "In the options page, text explaining that display options can be overriden while reading"
},
"options_web_chapter_darkreader_desc": {
"message": "Display a dark background while reading manga",
"description": "In the options page, description of the dark reader option"
},
"options_web_chapter_darkreader_opt": {
"message": "Dark background",
"description": "In the options page, label of the dark reader option"
}
}
......@@ -64,7 +64,7 @@
"description": "This is the header of the options page tab about supported websites"
},
"options_web_chapter_display_mode": {
"message": "Mode daffichage des chapitres",
"message": "Mode d'affichage des chapitres",
"description": "This is the title of the options page section chapter display mode"
},
"options_web_chapter_display_chapter_opt": {
......
......@@ -181,12 +181,15 @@ class HandleManga {
let loading = []
loading.push(browser.tabs.insertCSS(tabId, { file: "/reader/pre-loader.css" }))
let bgcolor = "#424242"
if (store.state.options.darkreader === 0) bgcolor = "white"
loading.push(browser.tabs.executeScript(
tabId,
{ code: `
let amr_icon_url = '${browser.extension.getURL('/icons/icon_128.png')}';
let cover = document.createElement("div")
cover.id = "amr-loading-cover"
cover.style.backgroundColor = "${bgcolor}"
let img = document.createElement("img")
img.src = amr_icon_url;
......
......@@ -21,25 +21,41 @@
<v-container fluid>
<!-- Display options -->
<div class="headline">{{ i18n("options_web_chapter_display_mode") }}</div>
<!-- Display chapter mode (chapter) -->
<div class="subtitle">{{i18n('options_web_chapter_display_chapter_desc')}}</div>
<v-checkbox v-model="displayChapters" @change="setOption('displayChapters')"
:label="i18n('options_web_chapter_display_chapter_opt')"></v-checkbox>
<div class="subtitle mb-3">{{i18n('options_web_chapter_desc')}}</div>
<!-- Display chapter mode -->
<div v-if="displayChapters">
<div class="subtitle">{{ i18n("options_web_chapter_display_mode_opt") }}</div>
<v-radio-group v-model="displayMode" @change="setOption('displayMode')" column>
<v-radio :label="i18n('options_web_chapter_display_mode_1')" :value="1" ></v-radio>
<v-radio :label="i18n('options_web_chapter_display_mode_2')" :value="2"></v-radio>
<v-radio :label="i18n('options_web_chapter_display_mode_3')" :value="3"></v-radio>
<!-- Display as a book option -->
<div class="subtitle">{{i18n('option_read_book')}}</div>
<v-checkbox v-model="displayBook" @change="setOption('displayBook')"
:label="i18n('options_web_chapter_display_book_opt')"></v-checkbox>
<!-- Reading direction -->
<div v-if="displayBook">
<div class="subtitle">{{ i18n("options_web_chapter_reading_direction_opt") }}</div>
<v-radio-group v-model="readingDirection" @change="setOption('readingDirection')" column>
<v-radio :label="i18n('option_read_book_ltr')" :value="0" ></v-radio>
<v-radio :label="i18n('option_read_book_rtl')" :value="1"></v-radio>
</v-radio-group>
</div>
<!-- Resize scans -->
<div class="subtitle">{{i18n('options_web_resize_desc')}}</div>
<v-checkbox v-model="resize" @change="setOption('resize')"
:label="i18n('options_web_resize_opt')"></v-checkbox>
<!-- Display full chapter option -->
<div class="subtitle">{{i18n('option_read_fullchapter')}}</div>
<v-checkbox v-model="displayFullChapter" @change="setOption('displayFullChapter')"
:label="i18n('options_web_chapter_display_full_chapter_opt')"></v-checkbox>
<!-- Scaling mode -->
<div class="subtitle">{{ i18n("options_web_chapter_resize_mode_opt") }}</div>
<v-radio-group v-model="resizeMode" @change="setOption('resizeMode')" column>
<v-radio :label="i18n('option_read_resize_w')" :value="0" ></v-radio>
<v-radio :label="i18n('option_read_resize_h')" :value="1" v-show="displayFullChapter" ></v-radio>
<v-radio :label="i18n('option_read_resize_c')" :value="2" v-show="displayFullChapter" ></v-radio>
<v-radio :label="i18n('option_read_resize_n')" :value="3" ></v-radio>
</v-radio-group>
<!-- Display dark reader option -->
<div class="subtitle">{{i18n('options_web_chapter_darkreader_desc')}}</div>
<v-checkbox v-model="darkreader" @change="setOption('darkreader')"
:label="i18n('options_web_chapter_darkreader_opt')"></v-checkbox>
<!-- Loading options -->
<div class="headline">{{ i18n("options_web_loading") }}</div>
<!-- Loading progression -->
......@@ -58,25 +74,10 @@
<div class="subtitle">{{i18n('options_web_markwhendownload_desc')}}</div>
<v-checkbox v-model="markwhendownload" @change="setOption('markwhendownload')"
:label="i18n('options_web_markwhendownload_opt')"></v-checkbox>
<!-- Facilities -->
<div class="headline">{{ i18n("options_web_facilities") }}</div>
<!-- Automatically add manga to updates list -->
<div class="subtitle">{{i18n('options_web_addauto_desc')}}</div>
<v-checkbox v-model="addauto" @change="setOption('addauto')"
:label="i18n('options_web_addauto_opt')"></v-checkbox>
<!-- Use right / left keys while reading for prev / next scans -->
<div class="subtitle">{{i18n('options_web_lrkeys_desc')}}</div>
<v-checkbox v-model="lrkeys" @change="setOption('lrkeys')"
:label="i18n('options_web_lrkeys_opt')"></v-checkbox>
<!-- Bookmark scans when dblclicked -->
<div class="subtitle">{{i18n('options_web_autobm_desc')}}</div>
<v-checkbox v-model="autobm" @change="setOption('autobm')"
:label="i18n('options_web_autobm_opt')"></v-checkbox>
<!-- Right key to next chapter -->
<div class="subtitle">{{i18n('options_web_rightnext_desc')}}</div>
<v-checkbox v-model="rightnext" @change="setOption('rightnext')"
:label="i18n('options_web_rightnext_opt')"></v-checkbox>
</v-container>
</v-tab-item>
<v-tab-item id="general">
......@@ -371,7 +372,10 @@ const converters = {
"nocount",
"shownotifications",
"stopupdateforaweek",
"deactivateunreadable"
"deactivateunreadable",
"displayBook",
"displayFullChapter",
"darkreader"
]
}
};
......@@ -529,6 +533,12 @@ export default {
},
nocount: function() {
amrUpdater.refreshBadgeAndIcon();
},
/** If switch from single page to fullchapter and resize mode is height or container, set it to width */
displayFullChapter(nVal, oVal) {
if (nVal && [1, 2].includes(this.resizeMode)) {
this.resizeMode = 0
}
}
},
methods: {
......
<template>
<v-app id="inspire" dark>
<v-app id="inspire" :dark="options.darkreader === 1">
<!-- Global component to show confirmation dialogs, alert dialogs / other -->
<WizDialog ref="wizdialog"></WizDialog>
<!-- Global component to show bookmarks dialog -->
......@@ -54,13 +54,13 @@
right
fixed
app
class="amr-drawer grey darken-4"
:class="'amr-drawer ' + backcolor()"
>
<v-card color="grey darken-4" class="white--text">
<v-card :color="backcolor()" class="white--text">
<!-- Manga Title -->
<v-card-title class="white--text amr-manga-title">
<div>
<div class="headline white--text">
<div class="headline">
<v-tooltip bottom>
<a slot="activator" :href="mirrorDesc.home" v-if="mirrorDesc !== null" target="_blank">
<img :src="mirrorDesc.mirrorIcon" ma-1 />
......@@ -124,7 +124,7 @@
<!-- Bookmarks button -->
<v-tooltip bottom slot="activator" class="ml-1">
<v-btn slot="activator" icon
:color="bookstate.booked ? 'yellow--text' : 'yellow--text text--lighten-4'">
:color="(options.darkreader === 0 ? 'grey ' : '') + (bookstate.booked ? 'yellow--text' : 'yellow--text text--lighten-4')">
<v-icon>mdi-star</v-icon>
</v-btn>
<span>{{i18n("content_nav_click_bm")}}</span>
......@@ -138,7 +138,7 @@
<v-card-actions>
<!-- Action to update / delete bookmark for chapter > open popup -->
<v-btn @click="bookmarkChapter"
:color="bookstate.booked ? 'yellow--text' : 'yellow--text text--lighten-4'">
:color="options.darkreader === 0 ? (bookstate.booked ? 'yellow grey--text text--darken-3' : 'yellow grey--text') : (bookstate.booked ? 'yellow--text' : 'yellow--text text--lighten-4')">
<v-icon>mdi-star</v-icon>&nbsp;
{{ bookstate.booked ?
i18n("reader_bookmark_update") :
......@@ -221,7 +221,7 @@
</v-card-actions>
</v-card>
<!-- Display options -->
<v-card color="grey darken-3" class="white--text">
<v-card :color="backcolor(1)" class="white--text">
<v-card-title>
<v-layout row wrap>
<v-flex xs12>
......@@ -564,10 +564,14 @@
sc.page = this.pages.findIndex(scans => scans.find(s => s.src === sc.url))
return sc
})
}
},
},
components: { Page, Scan, WizDialog, BookmarkPopup },
methods: {
/** Return drawer background color taking a light into account and the dark or not back */
backcolor(light = 0) {
return "grey " + (options.darkreader === 0 ? 'lighten-' + (4 - light) : 'darken-' + (4 - light))
},
/** Inform background that current chapter has been read (will update reading state and eventually add manga to list) */
async consultManga(force) {
await util.consultManga(force)
......@@ -1184,10 +1188,14 @@
}
/** Manga title link */
.amr-manga-title a {
color: white;
color: #424242;
text-decoration: none;
vertical-align: middle;
word-break: break-word;
font-weight: bold;
}
.theme--dark .amr-manga-title a {
color: white;
}
/** To prevent select to be too small due to large padding */
.v-toolbar.pa-0 .v-toolbar__content {
......
......@@ -86,7 +86,8 @@ function initReader(images) {
document.body.style.padding = "0px"
document.body.style.margin = "0px"
document.body.style.backgroundColor = "#303030"
if (options.darkreader === 1) document.body.style.backgroundColor = "#303030"
else document.body.style.backgroundColor = "white"
loadCss("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700")
loadCss("https://cdn.materialdesignicons.com/3.0.39/css/materialdesignicons.min.css")
......
......@@ -5,7 +5,6 @@
left: 0;
position: fixed;
opacity: 1;
background-color: #424242;
z-index: 99999999;
text-align: center;
display: block;
......
......@@ -17,8 +17,17 @@ const default_options = {
displayFullChapter: 1, /* Display full chapter long strip or current scan (doucle scan) */
resizeMode: 0, /* How to resize scans width (0), height (1) (only if displayFullChapter = 0), container (2) or none (3) */
addauto: 1, // automatically mark chapters as read while reading
markwhendownload: 0, // mark mangas as read when all images downloaded
prefetch: 1, // load next chapter in background while reading
load: 1, //See loading progression in the title bar
imgorder: 0, //Load scans in order
darkreader: 1, // Reader is in dark mode, if not --> light mode
/**
* Options used in content scripts (included in mangas pages) // DEPRECATED WITH NEW READER
* DEPRECATED OPTIONS --> these options are related to the old reader and will be removed
* when the old reader will be.
*/
displayChapters: 1, // display scans as a book
/**
......@@ -27,15 +36,10 @@ const default_options = {
* mode = 3 --> images are displayed two by two japanese reading mode
*/
displayMode: 3, // DEPRECATED WITH NEW READER
addauto: 1, // automatically mark chapters as read while reading
resize: 1, // resize scans to fit in viewport // DEPRECATED WITH NEW READER
autobm: 1, // bookmark automatically the scans when dlbclicked in page
markwhendownload: 0, // mark mangas as read when all images downloaded
prefetch: 1, // load next chapter in background while reading
lrkeys: 1, // use arrows keys to read chapter
rightnext: 1, // arrow right goes to next chapter at bottom
load: 1, //See loading progression in the title bar
imgorder: 0, //Load scans in order
autobm: 1, // bookmark automatically the scans when dlbclicked in page // DEPRECATED WITH NEW READER
lrkeys: 1, // use arrows keys to read chapter // DEPRECATED WITH NEW READER
rightnext: 1, // arrow right goes to next chapter at bottom // DEPRECATED WITH NEW READER
/**
* Options used by background script
......
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