Commit f35f3abb7b44bd982ed14b0000ec35da8641afe3
Add User Font Size Setting
Adds a selection for the user to change the font size from the settings panel. Persists in localstorage and updates on changes as language and theme. Selection range: 8,10,12,14,16,18,20 px. Most locales updated except `ki.json` which is in english. Font size is set in a second `style` element, appended immediately after the theme is applied in `main-window.js`, overwriting the theme font size. I considered finding a more clever way to replace the original font size declaration in place but haven't got very far yet.robjloranger committed on 11/24/2017, 9:39:38 PM
Parent: 452d3838ab4f6ffb18b71fff39793437a4d88c4e
Files changed
locales/de.json | changed |
locales/en.json | changed |
locales/es.json | changed |
locales/ki.json | changed |
locales/pt-BR.json | changed |
locales/pt.json | changed |
main-window.js | changed |
modules/page/html/render/settings.js | changed |
locales/de.json | ||
---|---|---|
@@ -165,6 +165,7 @@ | ||
165 | 165 … | "Blocked": "Blockiert", |
166 | 166 … | "Click to block syncing with this person and hide their posts": "Klicke hier um die synchronisation mit dieser Person zu blockieren und deren posts zu verbergen", |
167 | 167 … | "Block": "Blocken", |
168 | 168 … | "External Link": "External Link", |
169 | - "blocked ": "blocked " | |
169 … | + "blocked ": "blocked ", | |
170 … | + "Font Size": "Schriftgröße" | |
170 | 171 … | } |
locales/en.json | ||
---|---|---|
@@ -183,6 +183,7 @@ | ||
183 | 183 … | "pt-BR": "Brazillian Portuguese", |
184 | 184 … | "See less": "See less", |
185 | 185 … | "See more": "See more", |
186 | 186 … | "(missing message)": "(missing message)", |
187 | - "assigned a description to ": "assigned a description to " | |
187 … | + "assigned a description to ": "assigned a description to ", | |
188 … | + "Font Size": "Font Size" | |
188 | 189 … | } |
locales/es.json | ||
---|---|---|
@@ -176,6 +176,7 @@ | ||
176 | 176 … | "Cannot load thead": "No se puede cargar el hilo", |
177 | 177 … | "The author of this message could be outside of your follow range or they may be blocked.": "El autor de este mensaje podría estar fuera de su rango de seguimiento o puede estar bloqueado.", |
178 | 178 … | "You follow %s people that follow this person.": {"one":"Sigues a alguien que sigue a esta persona.","other":"Sigues a %s personas que siguen a esta persona."}, |
179 | 179 … | "Followed by": "Seguido por", |
180 | - "pt-BR": "Portugués Brasileño" | |
180 … | + "pt-BR": "Portugués Brasileño", | |
181 … | + "Font Size": "Tamaño de fuente" | |
181 | 182 … | } |
locales/ki.json | ||
---|---|---|
@@ -79,6 +79,7 @@ | ||
79 | 79 … | "Browse All": "Browse All", |
80 | 80 … | "Theme": "Theme", |
81 | 81 … | "Language": "Language", |
82 | 82 … | "Filters": "Filters", |
83 | - " Hide following messages": " Hide following messages" | |
83 … | + " Hide following messages": " Hide following messages", | |
84 … | + "Font Size": "Font Size" | |
84 | 85 … | } |
locales/pt-BR.json | ||
---|---|---|
@@ -139,6 +139,7 @@ | ||
139 | 139 … | "en": "en", |
140 | 140 … | "on ": "on ", |
141 | 141 … | "Private Message": "Mensagem Privada", |
142 | 142 … | "Send Private Message": "Enviar Mensagem Privada", |
143 | - "Publish Privately": "Publicar Privadamente" | |
143 … | + "Publish Privately": "Publicar Privadamente", | |
144 … | + "Font Size": "Tamanho da fonte" | |
144 | 145 … | } |
locales/pt.json | ||
---|---|---|
@@ -140,6 +140,7 @@ | ||
140 | 140 … | "en": "English", |
141 | 141 … | "on ": "em ", |
142 | 142 … | "Private Message": "Mensagem Privada", |
143 | 143 … | "Send Private Message": "Enviar Mensagem Privada", |
144 | - "Publish Privately": "Publicar Privadamente" | |
144 … | + "Publish Privately": "Publicar Privadamente", | |
145 … | + "Font Size": "Tamanho da fonte" | |
145 | 146 … | } |
main-window.js | |||
---|---|---|---|
@@ -79,8 +79,16 @@ | |||
79 | 79 … | }) | |
80 | 80 … | }) | |
81 | 81 … | ) | |
82 | 82 … | ||
83 … | + document.head.appendChild( | ||
84 … | + h('style', { | ||
85 … | + innerHTML: computed(api.settings.obs.get('patchwork.fontSize', document.documentElement.style.fontSize), size => { | ||
86 … | + return 'html, body {font-size: ' + size + ';}' | ||
87 … | + }) | ||
88 … | + }) | ||
89 … | + ) | ||
90 … | + | ||
83 | 91 … | var container = h(`MainWindow -${process.platform}`, [ | |
84 | 92 … | h('div.top', [ | |
85 | 93 … | h('span.history', [ | |
86 | 94 … | h('a', { |
modules/page/html/render/settings.js | ||
---|---|---|
@@ -21,8 +21,10 @@ | ||
21 | 21 … | const currentTheme = api.settings.obs.get('patchwork.theme') |
22 | 22 … | const currentLang = api.settings.obs.get('patchwork.lang') |
23 | 23 … | const locales = api.intl.sync.locales() |
24 | 24 … | const localeNameLookup = api.intl.sync.localeNames() |
25 … | + const currentFontSize = api.settings.obs.get('patchwork.fontSize') | |
26 … | + const fontSizes = ['8px', '10px', '12px', '14px', '16px', '18px', '20px'] | |
25 | 27 … | const filterFollowing = api.settings.obs.get('filters.following') |
26 | 28 … | |
27 | 29 … | var prepend = [ |
28 | 30 … | h('PageHeading', [ |
@@ -69,8 +71,21 @@ | ||
69 | 71 … | ]) |
70 | 72 … | ]), |
71 | 73 … | |
72 | 74 … | h('section', [ |
75 … | + h('h2', i18n('Font Size')), | |
76 … | + h('select', { | |
77 … | + style: { | |
78 … | + 'font-size': '120%' | |
79 … | + }, | |
80 … | + value: when(currentFontSize, currentFontSize, window.getComputedStyle(document.documentElement).fontSize), | |
81 … | + 'ev-change': (ev) => api.settings.sync.set({ | |
82 … | + patchwork: {fontSize: ev.target.value} | |
83 … | + }) | |
84 … | + }, fontSizes.map(size => h('option', {value: size}, size))) | |
85 … | + ]), | |
86 … | + | |
87 … | + h('section', [ | |
73 | 88 … | h('h2', i18n('Filters')), |
74 | 89 … | h('label', [ |
75 | 90 … | h('input', { |
76 | 91 … | type: 'checkbox', |
Built with git-ssb-web