(henck#85) Render panel section headers; add font size setting

basinbasin · May 12, 2020 · d139686 · d139686
1 parent 2c3a36f
commit d139686
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/src/panels/renderPanel/RenderPanel.handlebars b/src/panels/renderPanel/RenderPanel.handlebars
@@ -11,12 +11,13 @@
 </div>
 
 <div class="tab-body" id="tab-settings-basic">
+  <div class="sec">Grid settings</div>
   <id-check class="js-grid-visible" data-label="Visible"></id-check>
   <id-check class="js-grid-origin" data-label="Show origin"></id-check>
   <id-check class="js-grid-snap" data-label="Snap to grid"></id-check>
   <id-range class="js-grid-size" data-min="16" data-max="128" data-label="Grid size"></id-range>
 
-  <label>Map colors</label>
+  <div class="sec">Map colors</div>
   <div style="display: flex">
     <div style="display: flex; flex-direction: column; flex-wrap: wrap">
       <id-popup title="Map background" class="map-colortype selected" data-type="background">
@@ -28,7 +29,10 @@
     <id-colorpicker class="js-map-color"></id-colorpicker>
   </div>  
 
-  <label>Quick themes</label>
+  <div class="sec">Font settings</div>
+  <id-range class="js-font-size" data-min="6" data-max="32" data-label="Font size"></id-range>
+
+  <div class="sec">Quick themes</div>
   <div class="menuitem">
     <a href="#" class="js-theme-diagram"><svg class="icon small"><use xlink:href="dist/icons.svg#paintbrush"></use></svg> Diagram</a>
   </div>  

diff --git a/src/panels/renderPanel/RenderPanel.ts b/src/panels/renderPanel/RenderPanel.ts
@@ -17,6 +17,7 @@ export class RenderPanel extends Panel implements Subscriber {
   private mapColorPicker: IdColorPicker;
   private mapColorType: string;
   private mapColorButtons: Array<IdPopup>;
+  private ctrlFontSize: IdRange;
 
   private ctrlRoomWidth: IdRange;
   private ctrlRoomHeight: IdRange;
@@ -78,6 +79,8 @@ export class RenderPanel extends Panel implements Subscriber {
       buttons[i].addEventListener('click', () => { this.onMapColorButton(popup); });
     }    
 
+    this.ctrlFontSize = new IdRange('.js-font-size', this.elem).addEventListener('input', () => { App.map.settings.basic.fontSize = this.ctrlFontSize.value; });
+
     this.elem.querySelector('.js-theme-diagram').addEventListener('click', () => { this.applyTheme('diagram'); });
     this.elem.querySelector('.js-theme-obsidian').addEventListener('click', () => { this.applyTheme('obsidian'); });
     this.elem.querySelector('.js-theme-hand-drawn').addEventListener('click', () => { this.applyTheme('hand-drawn'); });
@@ -163,6 +166,7 @@ export class RenderPanel extends Panel implements Subscriber {
         this.ctrlGridOrigin.checked = App.map.settings.grid.origin;
         this.ctrlGridSnap.checked = App.map.settings.grid.snap;
         this.ctrlGridSize.value = App.map.settings.grid.size;
+        this.ctrlFontSize.value = App.map.settings.basic.fontSize;
 
         this.ctrlRoomWidth.value = App.map.settings.room.width;
         this.ctrlRoomHeight.value = App.map.settings.room.height;

diff --git a/styl/typography.styl b/styl/typography.styl
@@ -17,4 +17,12 @@ kbd
   background-color rgb(200,200,200)
   color black
   padding 1px 4px 1px 4px
-  margin-right 4px
+  margin-right 4px
+
+.sec
+  color #333
+  font-weight bold
+  background #eeeeee
+  padding 4px
+  margin 4px 0 6px 0
+  border-radius 2px