Add column width and font size options to edit-design plugin

Resources/Plugins/edit-design/browser.js

@@ -5,6 +5,8 @@ enabled(){
   this.config = null;
   
   this.defaultConfig = {
+    columnWidth: "310px",
+    fontSize: "12px",
     avatarRadius: 10
   };
   
@@ -132,6 +134,12 @@ enabled(){
         });
       }
     });
+    
+    modal.find("[data-td-theme='"+TD.settings.getTheme()+"']").prop("checked", true);
+    
+    modal.find("[data-td-theme]").change(function(){
+      TD.settings.setTheme($(this).attr("data-td-theme"));
+      $(document).trigger("uiToggleTheme");
     });
   }).methods({
     _render: () => $(this.htmlModal),
@@ -157,13 +165,60 @@ enabled(){
     this.resetLayout();
     this.resetDesign();
     
+    this.css.insert(".txt-base-smallest, .txt-base-largest { font-size: "+this.config.fontSize+" !important }");
     this.css.insert(".avatar { border-radius: "+this.config.avatarRadius+"% !important }");
+    
+    if (this.config.columnWidth[0] === '/'){
+      let cols = this.config.columnWidth.slice(1);
+      
+      this.css.insert(".column { width: calc((100vw - 205px) / "+cols+" - 8px) !important }");
+      this.css.insert(".is-condensed .column { width: calc((100vw - 55px) / "+cols+" - 8px) !important }");
+    }
+    else{
+      this.css.insert(".column { width: "+this.config.columnWidth+" !important }");
+    }
+    
+    switch(this.config.columnWidth){
+      case "/6":
+        TD.settings.setColumnWidth("narrow");
+        break;
+        
+      case "310px":
+      case "/5":
+        TD.settings.setColumnWidth("medium");
+        break;
+        
+      default:
+        TD.settings.setColumnWidth(parseInt(this.config.columnWidth, 10) < 310 ? "narrow" : "wide"); // NaN will give "wide"
+        break;
+    }
+    
+    switch(this.config.fontSize){
+      case "13px": TD.settings.setFontSize("small"); break;
+      case "14px": TD.settings.setFontSize("medium"); break;
+      case "15px": TD.settings.setFontSize("large"); break;
+      default: TD.settings.setFontSize(parseInt(this.config.fontSize, 10) >= 16 ? "largest" : "smallest"); break;
+    }
   };
 }
 
 ready(){
+  // configuration
+  switch(TD.settings.getColumnWidth()){
+    case "wide": this.defaultConfig.columnWidth = "350px"; break;
+    case "narrow": this.defaultConfig.columnWidth = "270px"; break;
+  }
+  
+  switch(TD.settings.getFontSize()){
+    case "small": this.defaultConfig.fontSize = "13px"; break;
+    case "medium": this.defaultConfig.fontSize = "14px"; break;
+    case "large": this.defaultConfig.fontSize = "15px"; break;
+    case "largest": this.defaultConfig.fontSize = "16px"; break;
+  }
+  
   this.onAppReady();
   
+  // DOM
   $("[data-action='settings-menu']").on("click", this.onSettingsMenuClickedEvent);
   $(".js-app").append('<div id="td-design-plugin-modal" class="js-modal settings-modal ovl scroll-v scroll-styled-v"></div>');
 }

Resources/Plugins/edit-design/modal.html

@@ -7,6 +7,64 @@
   </header>
   <div class="mdl-inner">
     <div class="td-modal-content mdl-content js-mdl-content horizontal-flow-container">
+      <div class="td-modal-inner-cols">
+        <div class="l-column mdl-column">
+          
+          <!-- THEME -->
+          
+          <label class="txt-uppercase touch-larger-label">
+            <b>Theme</b>
+          </label>
+          <label class="radio">
+            <input data-td-theme="dark" class="js-theme-radio touch-larger-label" name="theme" type="radio"> Dark
+          </label>
+          <label class="radio">
+            <input data-td-theme="light" class="js-theme-radio touch-larger-label" name="theme" type="radio"> Light
+          </label>
+        </div>
+        <div class="l-column mdl-column">
+          
+          <!-- COLUMN SIZE -->
+          
+          <label class="txt-uppercase touch-larger-label">
+            <b>Columns</b>
+          </label>
+          <select data-td-key="columnWidth">
+            <option disabled></option>
+            <optgroup label="Fixed width">
+              <option value="270px">Narrow (270px)</option>
+              <option value="310px">Medium (310px)</option>
+              <option value="350px">Wide (350px)</option>
+              <option value="400px">Extreme (400px)</option>
+            </optgroup>
+            <option disabled></option>
+            <optgroup label="Dynamic width">
+              <option value="/3">3 columns on screen</option>
+              <option value="/4">4 columns on screen</option>
+              <option value="/5">5 columns on screen</option>
+              <option value="/6">6 columns on screen</option>
+            </optgroup>
+            <option disabled></option>
+          </select>
+        </div>
+        <div class="l-column mdl-column">
+          
+          <!-- FONT SIZE -->
+          
+          <label class="txt-uppercase touch-larger-label">
+            <b>Font size</b>
+          </label>
+          <select data-td-key="fontSize">
+            <option value="12px" data-td-font-size="smallest">Tiny (12px)</option>
+            <option value="13px" data-td-font-size="small">Small (13px)</option>
+            <option value="14px" data-td-font-size="medium">Medium (14px)</option>
+            <option value="15px" data-td-font-size="large">Large (15px)</option>
+            <option value="16px" data-td-font-size="largest">Very Large (16px)</option>
+            <option value="18px" data-td-font-size="largest">Massive (18px)</option>
+            <option value="20px" data-td-font-size="largest">Extreme (20px)</option>
+          </select>
+        </div>
+      </div>
       
       <!-- AVATAR SHAPE -->
       

Resources/Plugins/edit-design/notification.js

@@ -21,11 +21,13 @@ run(){
   
   // config handling
   this.defaultConfig = {
+    fontSize: "12px",
     avatarRadius: 10
   };
   
   var loadConfigObject = config => {
     let css = window.TDPF_createCustomStyle(this);
+    css.insert(".txt-base-smallest, .txt-base-largest { font-size: "+config.fontSize+" !important }");
     css.insert(".avatar { border-radius: "+config.avatarRadius+"% !important }");
   };
 }