Upd: Theme to Material 3

Author: ollm

fonts/material_icons.css

@@ -3,21 +3,10 @@
 	font-family: 'Material Icons';
 	font-style: normal;
 	font-weight: 400;
-	src: local('Material Icons'),
-		 local('MaterialIcons-Regular'),
-		 url(./material_icons/material_icons.woff2) format('woff2');
+	src: url(./material_icons/material_symbols_rounded.woff2) format('woff2');
 }
 
-
-@font-face
-{
-	font-family: 'Material Icons Extras';
-	font-style: normal;
-	font-weight: 400;
-	src: url(./material_icons/material_icons_extras.woff2) format('woff2');
-}
-
-.material-icon, .material-icon-extras
+.material-icon
 {
 	font-family: 'Material Icons';
 	font-weight: normal;
@@ -33,17 +22,8 @@
 	word-wrap: normal;
 	white-space: nowrap;
 	direction: ltr;
-	color: #808080;
+	color: var(--md-sys-color-on-surface-variant);
 	-webkit-font-smoothing: antialiased;
 	text-rendering: optimizeLegibility;
-}
-
-.night-mode .material-icon, .night-mode .material-icon-extras
-{
-	color: #d9d9d9;
-}
-
-.material-icon-extras
-{
-	font-family: 'Material Icons Extras';
+	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
 }

fonts/material_icons/material_icons.woff2

@@ -25,7 +25,7 @@
 		"back": "Enrere",
 		"add": "Afegir",
 		"language": "Idioma",
-		"settings": "Configuracions",
+		"settings": "Configuració",
 		"theme": "Tema",
 		"valueCannotBeEmpty": "El valor no pot estar buit",
 		"nightMode": "Mode nit"

fonts/material_icons/material_icons_extras.woff2

@@ -22,10 +22,10 @@
 		"url": "git+https://github.com/ollm/OpenComic.git"
 	},
 	"scripts": {
-		"start": "npm run prebuild && electron scripts/main.js",
+		"start": "npm run prebuild && electron --trace-warnings scripts/main.js",
 		"rebuild": "electron-rebuild -f -w sharp",
 		"rebuild2": "electron-builder node-gyp-rebuild",
-		"prebuild": "node scripts/build.js",
+		"prebuild": "node scripts/build.js; node themes/material-design/colors/generate-colors.js",
 		"watch": "nodemon --ignore 'dist/' --ignore scripts/builded --watch * --exec npm run start",
 		"build": "npm run prebuild && electron-builder build",
 		"build-dist": "npm run prebuild && electron-builder --x64 --linux deb rpm AppImage 7z && electron-builder --arm64 --linux deb rpm AppImage 7z && electron-builder --mac 7z",

fonts/material_icons/material_symbols_rounded.woff2

@@ -577,6 +577,8 @@ var currentPath = false, currentPathScrollTop = [];
 
 async function loadIndexPage(animation = true, path = false, content = false, keepScroll = false, mainPath = false, fromGoBack = false)
 {
+	selectMenuItem('library');
+
 	onReading = false;
 
 	reading.hideContent();
@@ -677,7 +679,7 @@ async function loadIndexPage(animation = true, path = false, content = false, ke
 
 		if(!content)
 		{
-			template.loadContentLeft('index.content.left.html', animation);
+			if(template.contentLeft('.menu-list').length === 0) template.loadContentLeft('index.content.left.html', animation);
 			template.loadGlobalElement('index.elements.menus.html', 'menus');
 			floatingActionButton(true, 'dom.addComicButtons();');
 		}
@@ -989,6 +991,7 @@ function indexPathControl(path = false, mainPath = false, isComic = false, fromN
 function loadLanguagesPage(animation = true)
 {
 	indexPathControl(false);
+	selectMenuItem('language');
 
 	onReading = false;
 
@@ -1024,6 +1027,8 @@ function loadLanguagesPage(animation = true)
 	template.loadHeader('languages.header.html', animation);
 	floatingActionButton(false);
 
+	events.events();
+
 	if(readingActive)
 		readingActive = false;
 }
@@ -1045,6 +1050,7 @@ function changeLanguage(lan)
 function loadSettingsPage(animation = true)
 {
 	indexPathControl(false);
+	selectMenuItem('settings');
 
 	onReading = false;
 
@@ -1062,6 +1068,41 @@ function loadSettingsPage(animation = true)
 		readingActive = false;
 }
 
+/* Page - Theme */
+
+function loadThemePage(animation = true)
+{
+	indexPathControl(false);
+	selectMenuItem('theme');
+
+	onReading = false;
+
+	reading.hideContent();
+
+	generateAppMenu();
+
+	//template.loadContentRight('theme.content.right.html', animation);
+	template.loadHeader('theme.header.html', animation);
+	floatingActionButton(false);
+
+	theme.start();
+
+	if(readingActive)
+		readingActive = false;
+}
+
+function selectMenuItem(page)
+{
+	let contentLeft = template.contentLeft().get(0);
+	//let contentLeft = dom.this(contentLeft);
+
+	let active = contentLeft.querySelector('.menu-item.active');
+	if(active) active.classList.remove('active');
+
+	page = contentLeft.querySelector('.menu-item-'+page);
+	if(page) page.classList.add('active');
+}
+
 var addComicButtonsST = false, addComicButtonsActive = false;
 
 function addComicButtons(show = true, first = true)
@@ -1239,28 +1280,26 @@ function justifyViewModule()
 {
 	if(config.viewIndex == 'module')
 	{
-		var contentWidth = template.contentRight().children().width();
+		let contentRight = template.contentRight().get(0);
+		let rect = contentRight.firstElementChild.getBoundingClientRect();
 
-		var contentPerLine = Math.floor((contentWidth - 16) / (150 + 16));
+		let contentPerLine = Math.floor((rect.width - 16) / (150 + 16));
+		contentPerLine = contentPerLine > 0 ? contentPerLine : 1;
 
-		var marginLeft = ((contentWidth - 16) - (contentPerLine * (150 + 16))) / (contentPerLine - 1);
+		let marginLeft = ((rect.width - 16) - (contentPerLine * (150 + 16))) / (contentPerLine - 1);
 
-		if(contentPerLine > 0)
-		{
-			template.contentRight('.content-view-module > div').each(function(index){
-
-				if(contentPerLine == 1)
-					$(this).css('margin-left', ((contentWidth / 2) - (150 / 2))+'px');
-				else if(index % contentPerLine == 0)
-					$(this).css('margin-left', '16px');
-				else
-					$(this).css('margin-left', (marginLeft + 16)+'px');
+		let viewModule = contentRight.querySelectorAll('.content-view-module > div');
 
-			});
-		}
-		else
+		for(let i = 0, len = viewModule.length; i < len; i++)
 		{
-			template.contentRight('.content-view-module > div').css('margin-left', '16px');
+			let _this = viewModule[i];
+
+			if(contentPerLine == 1)
+				_this.style.marginLeft = ((rect.width / 2) - (150 / 2))+'px';
+			else if(i % contentPerLine == 0)
+				_this.style.marginLeft = '16px';
+			else
+				_this.style.marginLeft = (marginLeft + 16)+'px';
 		}
 	}
 }
@@ -1272,14 +1311,14 @@ function nightMode()
 	if($('.app').hasClass('night-mode'))
 	{
 		$('.app').removeClass('night-mode');
-		$('.button-night-mode').html('sun');
+		$('.button-night-mode').html('light_mode');
 		handlebarsContext.nightMode = false;
 		storage.updateVar('config', 'nightMode', false);
 	}
 	else
 	{
 		$('.app').addClass('night-mode');
-		$('.button-night-mode').html('moon');
+		$('.button-night-mode').html('dark_mode');
 		handlebarsContext.nightMode = true;
 		storage.updateVar('config', 'nightMode', true);
 	}
@@ -1467,6 +1506,7 @@ module.exports = {
 	loadIndexPage: loadIndexPage,
 	loadLanguagesPage: loadLanguagesPage,
 	loadSettingsPage: loadSettingsPage,
+	loadThemePage: loadThemePage,
 	changeLanguage: changeLanguage,
 	floatingActionButton: floatingActionButton,
 	changeView: changeView,

languages/ca.json

@@ -125,56 +125,119 @@ function eventHover()
 
 }
 
-function eventSwitch()
+switchRemoveAnimeST = false;
+
+function switchRemoveAnime()
 {
+	clearTimeout(switchRemoveAnimeST);
+
+	switchRemoveAnimeST = setTimeout(function(){
+
+		let switchs = document.querySelectorAll('.switch.animeOn, .switch.animeOff');
+
+		for(let i = 0, len = switchs.length; i < len; i++)
+		{
+			switchs[i].classList.remove('animeOn', 'animeOff');
+		}
+
+	}, 1000);
+}
 
+function eventSwitch()
+{
 	$('.switch').on('click.events', function(){
 
-		if($(this).hasClass('a'))
+		let _this = $(this);
+
+		if(_this.hasClass('a'))
 		{
-			$(this).removeClass('a');
-			callbackString($(this).attr('off'));
+			_this.addClass('animeOff').removeClass('a animeOn');
+			callbackString(_this.attr('off'));
 		}
 		else
 		{
-			$(this).addClass('a');
-			callbackString($(this).attr('on'));
+			_this.addClass('a animeOn').removeClass('animeOff');
+			callbackString(_this.attr('on'));
 		}
 
+		switchRemoveAnime();
+
 	});
 }
 
+function rangePosition(input, range)
+{
+	let value = +input.value;
+	let min = +input.getAttribute('min') || 0;
+	let max = +input.getAttribute('max');
+	let step = input.getAttribute('step');
+
+	let percent = (value - min) / (max - min) * 100;
+
+	range.querySelector('.range-line').style.width = percent+'%';
+	range.querySelector('.range-point').style.left = percent+'%';
+
+	if(step && (max - min) / step < 60) // Only show steps if has less 60
+	{
+		let total = Math.round((max - min) / step);
+		let steps = '';
+
+		for(let i = 0; i <= total; i++)
+		{
+			let stepValue = i * step;
+			steps += '<div'+(stepValue > (value - min) ? '' : ' class="active"')+' style="left: '+(i / total * 100)+'%"></div>';
+		}
+
+		range.querySelector('.range-steps').innerHTML = steps;
+	}
+}
+
 
 function eventRange()
 {
-	$('.range').on('change.events input.events', function(event) {
+	$('.range input').on('change.events input.events', function(event) {
 
-		var onrange = $(this).attr('onrange');
+		let range = $(this).closest('.range');
 
-		var value;
-		var value_txt = value = $(this).val();
+		let onrange = this.getAttribute('onrange');
 
-		var step = $(this).attr('step');
+		let value;
+		let value_txt = value = this.value;
 
-		if(typeof step != 'undefined')
+		let step = this.getAttribute('step');
+
+		rangePosition(this, range.get(0));
+
+		if(step)
 		{
-			var num_v = value_txt.replace(/.*?(\.|$)/, '').length;
+			let num_v = value_txt.replace(/.*?(\.|$)/, '').length;
 
-			var num_s = step.replace(/.*?(\.|$)/, '').length;
+			let num_s = step.replace(/.*?(\.|$)/, '').length;
 
 			if(num_s != 0)
 				value_txt = value_txt+(value_txt.match(/\./) ? '' : '.')+('0'.repeat(num_s - num_v));
 		}
 
-		var callback = hb.compile(onrange)({
+		let callback = hb.compile(onrange)({
 			value: value,
 			toEnd: (event.type == 'input' ? 'false' : 'true'),
 		});
 
 		callbackString(callback);
 
-		$(this).siblings('.simple-slider-text').find('span').html(value_txt);
+		range.siblings('.simple-slider-text').find('span').html(value_txt);
 	});
+
+	let ranges = document.querySelectorAll('.range');
+
+	for(let i = 0, len = ranges.length; i < len; i++)
+	{
+		let range = ranges[i];
+		let input = range.querySelector('input');
+
+		rangePosition(input, range);
+	}
+
 }
 
 function events()

package.json

@@ -10,6 +10,8 @@ require('@electron/remote/main').initialize();
 // be closed automatically when the JavaScript object is garbage collected.
 var win, appClosing;
 
+process.traceProcessWarnings = true;
+
 function createWindow() {
 	// Create the browser window.
 
@@ -57,7 +59,7 @@ function createWindow() {
 	var menu = Menu.buildFromTemplate(menuTemplate);
 	win.setMenu(menu);
 
-	// win.webContents.openDevTools();
+	win.webContents.openDevTools();
 
 	win.removeMenu();