feat(enhancement): add optional font size option in the options UI #171

jeevatkm · Aug 22, 2024 · c53474f · c53474f
1 parent df45f79
commit c53474f
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 2 deletions.
diff --git a/modules/compose.mjs b/modules/compose.mjs
@@ -179,6 +179,7 @@ class ReplyWithHeader {
 			// Originally, there's no <br> after the (unindented) cite prefix.
 			// With the table style, it looks better with an extra empty line (like everybody else has it).
             div.insertAdjacentElement(positionBeforeEnd, this._createElement('br'));
+            div.insertAdjacentElement(positionAfterBegin, this._createElement('br'));
 
             // blockquote
             if (await rwhSettings.isCleanAllBlockQuoteColor()) { // all
@@ -275,6 +276,15 @@ class ReplyWithHeader {
         }
         rwhHeaders += '>';
 
+        // font size
+        let fontSizeStyle = '';
+        if (await rwhSettings.isHeaderHtmlFontSize()) {
+            let fontSizeValue = await rwhSettings.getHeaderHtmlFontSizeValue() ?? null;
+            if (fontSizeValue) {
+                fontSizeStyle = `;font-size:${fontSizeValue}`;
+            }
+        }
+
         headerLabelSeqValues.forEach(function (hdrKey, _) {
             if (hdrKey == 'reply-to' && this.isReply) {
                 return;
@@ -286,7 +296,7 @@ class ReplyWithHeader {
             }
 
             if (headers[hdrKey]) {
-                rwhHeaders += '<p style="margin:0cm"><span><b>' + lbl + '</b> ' + headers[hdrKey] + '</span></p>';
+                rwhHeaders += '<p style="margin:0cm' + fontSizeStyle +'"><span><b>' + lbl + '</b> ' + headers[hdrKey] + '</span></p>';
             }
         }, this);
 

diff --git a/modules/settings.mjs b/modules/settings.mjs
@@ -36,6 +36,8 @@ let keyHeaderLocaleUserSelected = 'header.locale.user.selected';
 let keyHeaderPlainPrefixText = 'header.plain.prefix.text';
 let keyHeaderHtmlPrefixLine = 'header.html.prefix.line';
 let keyHeaderHtmlPrefixLineColor = 'header.html.prefix.line.color';
+let keyHeaderHtmlFontSize = 'header.html.font.size';
+let keyHeaderHtmlFontSizeValue = 'header.html.font.size.value';
 let keyTransSubjectPrefix = 'trans.subject.prefix';
 let keyCleanBlockQuoteColor = 'clean.blockquote.color';
 let keyCleanAllBlockQuoteColor = 'clean.blockquote.all.color';
@@ -50,6 +52,8 @@ let rwhDefaultSettings = {
     [keyHeaderPlainPrefixText]: true,
     [keyHeaderHtmlPrefixLine]: true,
     [keyHeaderHtmlPrefixLineColor]: '#B5C4DF',
+    [keyHeaderHtmlFontSize]: false,
+    [keyHeaderHtmlFontSizeValue]: '11.5pt',
     [keyTransSubjectPrefix]: true,
 
     // Date & Time
@@ -157,6 +161,14 @@ export async function getHeaderHtmlPrefixLineColor() {
     return await get(keyHeaderHtmlPrefixLineColor, rwhDefaultSettings[keyHeaderHtmlPrefixLineColor]);
 }
 
+export async function isHeaderHtmlFontSize() {
+    return await get(keyHeaderHtmlFontSize, rwhDefaultSettings[keyHeaderHtmlFontSize]);
+}
+
+export async function getHeaderHtmlFontSizeValue() {
+    return await get(keyHeaderHtmlFontSizeValue, rwhDefaultSettings[keyHeaderHtmlFontSizeValue]);
+}
+
 export async function isTransSubjectPrefix() {
     return await get(keyTransSubjectPrefix, rwhDefaultSettings[keyTransSubjectPrefix]);
 }

diff --git a/options/options.html b/options/options.html
@@ -84,7 +84,7 @@
                     </div>
                 </fieldset>
                 <fieldset>
-                    <legend id="lblHeaderPrefix">Header prefix</legend>
+                    <legend id="lblHeaderPrefix">Header prefix and styling</legend>
                     <div class="hbox">
                         <label>
                             <input type="checkbox" id="hdrPlainPrefixText" data-preference="header.plain.prefix.text" />
@@ -98,6 +98,13 @@
                             <input type="text" id="hdrHtmlPrefixLineColor" data-preference="header.html.prefix.line.color" style="height: 17px;width: 75px;font-size: 12px;text-align: center;" />
                         </label>
                     </div>
+                    <div class="hbox">
+                        <label>
+                            <input type="checkbox" id="hdrHtmlFontSize" data-preference="header.html.font.size" />
+                            Apply HTML header font size
+                            <input type="text" id="hdrHtmlFontSizeValue" title="E.g.: 11.5pt or 14px" data-preference="header.html.font.size.value" style="height: 17px;width: 75px;font-size: 12px;text-align: center;" />
+                        </label>
+                    </div>
                 </fieldset>
 
                 <fieldset>

diff --git a/options/options.js b/options/options.js
@@ -81,6 +81,12 @@ async function loadPref(prefElement) {
                         document.getElementById('hdrHtmlPrefixLineColor').disabled = !e.target.checked;
                     });
                 break;
+                case 'header.html.font.size':
+                    prefElement.addEventListener('click', function(e) {
+                        document.getElementById('hdrHtmlFontSizeValue').disabled = !e.target.checked;
+                    });
+                    document.getElementById('hdrHtmlFontSizeValue').disabled = !value;
+                break;
             }
             prefElement.checked = value;
             prefElement.addEventListener('change', () => savePref(prefElement));