Make it possible to adjust font size in reading view

DanielSundberg · Feb 15, 2019 · 48002a4 · 48002a4
1 parent 60c48f7
commit 48002a4
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/src/Model/AppState.tsx b/src/Model/AppState.tsx
@@ -30,6 +30,7 @@ class AppState {
  @observable showAllFeeds: boolean = false;
  @observable showMenu: boolean = false;
  @observable errorMessage: string = '';
+ @observable contentFontScale: number = 1.0;
  routing: RouterStore;
 
  constructor(routing: RouterStore) {
@@ -39,6 +40,7 @@ class AppState {
  this.loggedIn = LoggedInState.Unknown;
  this.routing = routing;
  this.loginError = '';
+ this.contentFontScale = parseFloat(localStorage.getItem('contentFontScale') || "1.0");
  }
 
  async checkAuth() {
@@ -314,6 +316,20 @@ class AppState {
  throw new Error();
  }
  }
+
+ increaseFontSize() {
+ if (this.contentFontScale < 1.5) {
+ this.contentFontScale += 0.1;
+ localStorage.setItem('contentFontScale', this.contentFontScale.toString());
+ }
+ }
+
+ decreseFontSize() {
+ if (this.contentFontScale > 0.7) {
+ this.contentFontScale -= 0.1;
+ localStorage.setItem('contentFontScale', this.contentFontScale.toString());
+ }
+ }
 }
 
 export default AppState;
diff --git a/src/Views/BlogPostView.tsx b/src/Views/BlogPostView.tsx
@@ -119,7 +119,8 @@ class BlogPostView extends React.Component<RootStore, {}> {
  );
 
  const contentSegmentClasses = b.read ? "ui segment" : "ui segment";
- const contentStyle = b.read ? { color: '#808080'} : {};
+ const fontScale = `${this.props.appState.contentFontScale}rem`;
+ const contentStyle = b.read ? { color: '#808080', fontSize: fontScale } : { fontSize: fontScale };
  const readingTimeInfo = readingTime(b.content);
 
  return (
@@ -193,7 +194,15 @@ class BlogPostView extends React.Component<RootStore, {}> {
  <a className="item" onClick={() => this.props.routing.goBack()}>
  <i className="icon angle left" />
  </a>
- <div className="header borderless item">{this.props.appState.currentBlogTitle}</div>
+ <div className="header borderless item left">{this.props.appState.currentBlogTitle}</div>
+ <div className="right menu">
+ <a className="item right" onClick={() => this.props.appState.increaseFontSize()}>
+ <i className="icon plus" />
+ </a>
+ <a className="item" onClick={() => this.props.appState.decreseFontSize()}>
+ <i className="icon minus" />
+ </a>
+ </div>
  </div>
  </Headroom>
  <HeaderErrorMessage