#26 Add option to adjust font size

gandf · Apr 25, 2022 · 9804eef · 9804eef
1 parent d9d2c9e
commit 9804eef
Show file tree

Hide file tree

Showing 23 changed files with 355 additions and 46 deletions.
diff --git a/_locales/de/messages.json b/_locales/de/messages.json
@@ -511,5 +511,17 @@
   },
   "excludeUnreadCount": {
     "message": "Von der Zählung der ungelesenen Inhalte ausschließen"
+  },
+  "optionFontSize": {
+    "message": "Schriftgröße"
+  },
+  "optionSize1": {
+    "message": "Normal"
+  },
+  "optionSize2": {
+    "message": "Mittel"
+  },
+  "optionSize3": {
+    "message": "Groß"
   }
 }
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -515,6 +515,18 @@
   "excludeUnreadCount": {
     "message": "Exclude from unread count"
   },
+  "optionFontSize": {
+    "message": "Font size"
+  },
+  "optionSize1": {
+    "message": "Normal"
+  },
+  "optionSize2": {
+    "message": "Medium"
+  },
+  "optionSize3": {
+    "message": "Large"
+  },
   "enappName": {
       "message": "Slick RSS by users"
   },
@@ -1030,5 +1042,17 @@
   },
   "enexcludeUnreadCount": {
     "message": "Exclude from unread count"
+},
+  "enoptionFontSize": {
+    "message": "Font size"
+  },
+  "enoptionSize1": {
+    "message": "Normal"
+  },
+  "enoptionSize2": {
+    "message": "Medium"
+  },
+  "enoptionSize3": {
+    "message": "Large"
   }
 }
diff --git a/_locales/es/messages.json b/_locales/es/messages.json
@@ -514,5 +514,17 @@
   },
   "excludeUnreadCount": {
     "message": "Excluir del recuento de no leídos"
+  },
+  "optionFontSize": {
+    "message": "Tamaño de fuente"
+  },
+  "optionSize1": {
+    "message": "Normal"
+  },
+  "optionSize2": {
+    "message": "Medio"
+  },
+  "optionSize3": {
+    "message": "Larga"
   }
 }
diff --git a/_locales/fr/messages.json b/_locales/fr/messages.json
@@ -514,5 +514,17 @@
   },
   "excludeUnreadCount": {
     "message": "Exclure du compte des non lus"
+  },
+  "optionFontSize": {
+    "message": "Taille police"
+  },
+  "optionSize1": {
+    "message": "Normal"
+  },
+  "optionSize2": {
+    "message": "Moyen"
+  },
+  "optionSize3": {
+    "message": "Grand"
   }
 }
diff --git a/_locales/it/messages.json b/_locales/it/messages.json
@@ -511,5 +511,17 @@
   },
   "excludeUnreadCount": {
     "message": "Escludi dal conteggio non letto"
+  },
+  "optionFontSize": {
+    "message": "Dimensione del font"
+  },
+  "optionSize1": {
+    "message": "Normale"
+  },
+  "optionSize2": {
+    "message": "Medio"
+  },
+  "optionSize3": {
+    "message": "Larga"
   }
 }
diff --git a/_locales/nl/messages.json b/_locales/nl/messages.json
@@ -511,5 +511,17 @@
   },
   "excludeUnreadCount": {
     "message": "Uitsluiten van ongelezen telling"
+  },
+  "optionFontSize": {
+    "message": "Lettertypegrootte"
+  },
+  "optionSize1": {
+    "message": "Normaal"
+  },
+  "optionSize2": {
+    "message": "Medium"
+  },
+  "optionSize3": {
+    "message": "Groot"
   }
 }
diff --git a/common-page.js b/common-page.js
@@ -1,4 +1,10 @@
+function switchTheme(themesize) {
+  let app = document.getElementById("app");
+  app.setAttribute('themesize', themesize);
+}
+
 function activeDarkMode() {
+    switchTheme('' + options.fontSize);
     var keys = Object.keys(document.getElementsByTagName("link"));
     for (var i = 0; i < keys.length; i++) {
         var oldlink = document.getElementsByTagName("link").item(keys[i]);
@@ -7,6 +13,7 @@ function activeDarkMode() {
 }
 
 function disableDarkMode() {
+    switchTheme('' + options.fontSize);
     var keys = Object.keys(document.getElementsByTagName("link"));
     for (var i = 0; i < keys.length; i++) {
         var oldlink = document.getElementsByTagName("link").item(keys[i]);

diff --git a/common.css b/common.css
@@ -1,4 +1,76 @@
-html {
+[themesize="1"] {
+	--body-font-size: 11px;
+	--header-font-size: 20px;
+	--headerMessage-font-size: smaller;
+	--header-td-td-td-font-size: 14px;
+	--header-a-font-size: 12px;
+	--feedHeader-font-size: 11px;
+	--feedHeader-a-font-size: 12px;
+	--feedsLoading-font-size: small;
+	--feedPreview-font-size: 14px;
+	--feedPreviewContainerRead-a-font-size: 12px;
+	--feedPreviewTitle-a-font-size: 12px;
+	--feedPreviewDate-font-size: smaller;
+	--feedPreviewAuthor-font-size: smaller;
+	--noFeedsManaged-font-size: 12px;
+	--feedError-font-size: 12px;
+	--noItems-font-size: 12px;
+	--dateHelp-font-size: 11px;
+	--input-font-size: 11px;
+	--select-font-size: 11px;
+	--maxItems-width: 25px;
+	--levelSearchTag-width: 20px;
+}
+
+[themesize="2"] {
+	--body-font-size: 15px;
+	--header-font-size: 24px;
+	--headerMessage-font-size: smaller;
+	--header-td-td-td-font-size: 18px;
+	--header-a-font-size: 16px;
+	--feedHeader-font-size: 15px;
+	--feedHeader-a-font-size: 16px;
+	--feedsLoading-font-size: small;
+	--feedPreview-font-size: 19px;
+	--feedPreviewContainerRead-a-font-size: 16px;
+	--feedPreviewTitle-a-font-size: 16px;
+	--feedPreviewDate-font-size: smaller;
+	--feedPreviewAuthor-font-size: smaller;
+	--noFeedsManaged-font-size: 16px;
+	--feedError-font-size: 16px;
+	--noItems-font-size: 16px;
+	--dateHelp-font-size: 15px;
+	--input-font-size: 15px;
+	--select-font-size: 15px;
+	--maxItems-width: 30px;
+	--levelSearchTag-width: 25px;
+}
+
+[themesize="3"] {
+	--body-font-size: 18px;
+	--header-font-size: 27px;
+	--headerMessage-font-size: larger;
+	--header-td-td-td-font-size: 21px;
+	--header-a-font-size: 19px;
+	--feedHeader-font-size: 18px;
+	--feedHeader-a-font-size: 19px;
+	--feedsLoading-font-size: larger;
+	--feedPreview-font-size: 21px;
+	--feedPreviewContainerRead-a-font-size: 19px;
+	--feedPreviewTitle-a-font-size: 19px;
+	--feedPreviewDate-font-size: larger;
+	--feedPreviewAuthor-font-size: larger;
+	--noFeedsManaged-font-size: 19px;
+	--feedError-font-size: 19px;
+	--noItems-font-size: 19px;
+	--dateHelp-font-size: 18px;
+	--input-font-size: 18px;
+	--select-font-size: 18px;
+	--maxItems-width: 36px;
+	--levelSearchTag-width: 30px;
+}
+
+html {
 	height: 100%;
 }
 
@@ -13,15 +85,19 @@ body {
 	height: 100%;
 }
 
+#app {
+	font-size: var(--body-font-size);
+}
+
 #header {
-	font-size: 20px;
+	font-size: var(--header-font-size);
 	/*border-bottom: 1px solid #DEDEDE;*/
 	background-color: #454d5e;
 	color: White;
 }
 
 #headerMessage span {
-	font-size: smaller;
+	font-size: var(--headerMessage-font-size);
 }
 
 #header td {
@@ -44,13 +120,13 @@ body {
 #header td + td + td {
 	text-align: right;
 	white-space: nowrap;
-	font-size: 14px;
+	font-size: var(--header-td-td-td-font-size);
 	color: #aaa;
 	padding-right: 10px;
 }
 
 #header a {
-	font-size: 12px;
+	font-size: var(--header-a-font-size);
 	color: white;
 	text-decoration: none;
 }

diff --git a/common.js b/common.js
@@ -267,6 +267,7 @@ function GetDefaultOptions() {
         "feedsmaxheight": 200,
         "playSoundNotif": false,
         "darkmode": false,
+        "fontSize": 1,
         "forcelangen": false,
         "levelSearchTag": 5,
         "levelSearchTags": 8

diff --git a/common_dark.css b/common_dark.css
@@ -1,27 +1,102 @@
-html {
+[themesize="1"] {
+	--body-font-size: 11px;
+	--header-font-size: 20px;
+	--headerMessage-font-size: smaller;
+	--header-td-td-td-font-size: 14px;
+	--header-a-font-size: 12px;
+	--feedHeader-font-size: 11px;
+	--feedHeader-a-font-size: 12px;
+	--feedsLoading-font-size: small;
+	--feedPreview-font-size: 14px;
+	--feedPreviewContainerRead-a-font-size: 12px;
+	--feedPreviewTitle-a-font-size: 12px;
+	--feedPreviewDate-font-size: smaller;
+	--feedPreviewAuthor-font-size: smaller;
+	--noFeedsManaged-font-size: 12px;
+	--feedError-font-size: 12px;
+	--noItems-font-size: 12px;
+	--dateHelp-font-size: 11px;
+	--input-font-size: 11px;
+	--select-font-size: 11px;
+	--maxItems-width: 25px;
+	--levelSearchTag-width: 20px;
+}
+
+[themesize="2"] {
+	--body-font-size: 15px;
+	--header-font-size: 24px;
+	--headerMessage-font-size: smaller;
+	--header-td-td-td-font-size: 18px;
+	--header-a-font-size: 16px;
+	--feedHeader-font-size: 15px;
+	--feedHeader-a-font-size: 16px;
+	--feedsLoading-font-size: small;
+	--feedPreview-font-size: 19px;
+	--feedPreviewContainerRead-a-font-size: 16px;
+	--feedPreviewTitle-a-font-size: 16px;
+	--feedPreviewDate-font-size: smaller;
+	--feedPreviewAuthor-font-size: smaller;
+	--noFeedsManaged-font-size: 16px;
+	--feedError-font-size: 16px;
+	--noItems-font-size: 16px;
+	--dateHelp-font-size: 15px;
+	--input-font-size: 15px;
+	--select-font-size: 15px;
+	--maxItems-width: 30px;
+	--levelSearchTag-width: 25px;
+}
+
+[themesize="3"] {
+	--body-font-size: 18px;
+	--header-font-size: 27px;
+	--headerMessage-font-size: larger;
+	--header-td-td-td-font-size: 21px;
+	--header-a-font-size: 19px;
+	--feedHeader-font-size: 18px;
+	--feedHeader-a-font-size: 19px;
+	--feedsLoading-font-size: larger;
+	--feedPreview-font-size: 21px;
+	--feedPreviewContainerRead-a-font-size: 19px;
+	--feedPreviewTitle-a-font-size: 19px;
+	--feedPreviewDate-font-size: larger;
+	--feedPreviewAuthor-font-size: larger;
+	--noFeedsManaged-font-size: 19px;
+	--feedError-font-size: 19px;
+	--noItems-font-size: 19px;
+	--dateHelp-font-size: 18px;
+	--input-font-size: 18px;
+	--select-font-size: 18px;
+	--maxItems-width: 36px;
+	--levelSearchTag-width: 30px;
+}
+
+html {
 	height: 100%;
 }
 
 body {
 	margin: 0px;
 	padding: 0px;
 	font-family: sans-serif;
-	font-size: 11px;
 	color: #999FAA;
 	background-color: #292C33;
 	width: 100%;
 	height: 100%;
 }
 
+#app {
+	font-size: var(--body-font-size);
+}
+
 #header {
-	font-size: 20px;
+	font-size: var(--header-font-size);
 	/*border-bottom: 1px solid #DEDEDE;*/
 	background-color: #454d5e;
 	color: #999FAA;
 }
 
 #headerMessage span {
-	font-size: smaller;
+	font-size: var(--headerMessage-font-size);
 }
 
 #header td {
@@ -44,13 +119,13 @@ body {
 #header td + td + td {
 	text-align: right;
 	white-space: nowrap;
-	font-size: 14px;
+	font-size: var(--header-td-td-td-font-size);
 	color: #aaa;
 	padding-right: 10px;
 }
 
 #header a {
-	font-size: 12px;
+	font-size: var(--header-a-font-size);
 	color: #999FAA;
 	text-decoration: none;
 }