Merge tag 'iid/feat/max-font-size' into dev-update

explanation: robertabcd#81 feat(term size): add max-font-size mode The max-font-size mode behaviors like the fixed-font-size mode in that a basic font size can be specified by the user. However, when the window is too narrow or too short, fixed-font-size just lets the terminal screen overflow the window, while max-font-size shrinks the font to keep the screen inside the window. This feature should benefit users who use PttChrome on a relatively small screen (e.g., mobile/tablet users) and want to maximize the use of the limited space of their screen for reading without manually tweaking the terminal size in the fixed-term-size mode. Video for demonstration: https://user-images.githubusercontent.com/37586669/116145093-6c677680-a70f-11eb-9983-7eadda00b09b.mp4 Note: After the recording of the video, the options for specifying the minimum height and width of the terminal screen size for max-font-size were dropped for the convenience of user. The minimum terminal screen size is hardcoded as 80 cols x 24 rows.
ccns · May 13, 2021 · da284a3 · da284a3
2 parents 0067c8a + 23f7cf9
commit da284a3
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 2 deletions.
diff --git a/src/components/ContextMenu/PrefModal.js b/src/components/ContextMenu/PrefModal.js
@@ -43,9 +43,9 @@ const DEFAULT_PREFS = {
   // displays
   fontFitWindowWidth: false,
   fontFace: "MingLiu,SymMingLiu,monospace",
-  fontSize: 20,
+  fontSize: 23,
   termSize: { cols: 80, rows: 24 },
-  termSizeMode: "fixed-term-size",
+  termSizeMode: "max-term-size",
   bbsMargin: 0
 };
 
@@ -331,6 +331,12 @@ export const PrefModal = ({
                       >
                         {i18n("options_fixedFontSize")}
                       </option>
+                      <option
+                        key={"options_maxFontSize"}
+                        value={"max-font-size"}
+                      >
+                        {i18n("options_maxFontSize")}
+                      </option>
                     </FormControl>
                   </FormGroup>
                   {(() => {
@@ -383,6 +389,20 @@ export const PrefModal = ({
                             />
                           </FormGroup>
                         );
+                      case "max-font-size":
+                        return (
+                          <FormGroup controlId="fontSize">
+                            <ControlLabel>
+                              {i18n("options_fontSizeMax")}
+                            </ControlLabel>
+                            <FormControl
+                              name="fontSize"
+                              type="number"
+                              value={values.fontSize}
+                              onChange={onNumberInputChange}
+                            />
+                          </FormGroup>
+                        );
                       default:
                         return null;
                     }

diff --git a/src/js/en_US_messages.js b/src/js/en_US_messages.js
@@ -126,12 +126,18 @@ export const en_US = {
   "options_fontSize": {
     "message": "Font size (px)"
   },
+  "options_fontSizeMax": {
+    "message": "Maximum font size (px)"
+  },
   "options_fixedTermSize": {
     "message": "Fixed term size"
   },
   "options_fixedFontSize": {
     "message": "Fixed font size"
   },
+  "options_maxFontSize": {
+    "message": "Maximum-limited font size"
+  },
   "options_fontFitWindowWidth": {
     "message": "Stretch font to fill the view"
   },

diff --git a/src/js/pttchrome.js b/src/js/pttchrome.js
@@ -757,6 +757,23 @@ App.prototype.onValuesPrefChange = function(values) {
         // Immediately recalc once.
         this.resizer();
         break;
+
+      case 'max-font-size':
+        this.view.fontFitWindowWidth = false;
+
+        let maxFontSize = values.fontSize;
+        let minSize = {cols: 80, rows: 24};
+        this.resizer = () => {
+          let scaledFontSize = this.view.calcFontSizeFromTerm(minSize.cols, minSize.rows);
+          let fontSize = Math.min(scaledFontSize, maxFontSize);
+          let size = this.view.calcTermSizeFromFont(fontSize);
+          this.setTermSize(size.cols, size.rows);
+          this.view.fixedResize(fontSize);
+          this.view.redraw(true);
+        };
+        // Immediately recalc once.
+        this.resizer();
+        break;
     }
 
     if (this.view.fontFitWindowWidth) {

diff --git a/src/js/term_view.js b/src/js/term_view.js
@@ -649,6 +649,16 @@ TermView.prototype = {
     };
   },
 
+  calcFontSizeFromTerm: function(termCols, termRows) {
+    termCols = Math.max(80, Math.min(200, termCols));
+    termRows = Math.max(24, Math.min(100, termRows));
+    let width = this.bbsWidth ? this.bbsWidth : this.innerBounds.width;
+    let height = this.bbsHeight ? this.bbsHeight : this.innerBounds.height;
+    let sizeX = Math.floor(2 * (width - 10) / termCols);
+    let sizeY = Math.floor(height / termRows);
+    return Math.min(sizeX, sizeY);
+  },
+
   getRowLineElement: function(node) {
     for (let r = node; r && r != r.parentNode; r = r.parentNode) {
       if (r instanceof Element &&

diff --git a/src/js/zh_TW_messages.js b/src/js/zh_TW_messages.js
@@ -126,12 +126,18 @@
   "options_fontSize": {
     "message": "字體大小 (px)"
   },
+  "options_fontSizeMax": {
+    "message": "最大字體大小 (px)"
+  },
   "options_fixedTermSize": {
     "message": "固定終端機大小"
   },
   "options_fixedFontSize": {
     "message": "固定字體大小"
   },
+  "options_maxFontSize": {
+    "message": "限制最大字體大小"
+  },
   "options_fontFitWindowWidth": {
     "message": "把字體拉大來補滿畫面"
   },