diff --git a/Resources/Plugins/edit-design/browser.js b/Resources/Plugins/edit-design/browser.js
index e12bb0c5..5c590f10 100644
--- a/Resources/Plugins/edit-design/browser.js
+++ b/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>');
}
diff --git a/Resources/Plugins/edit-design/modal.html b/Resources/Plugins/edit-design/modal.html
index fddbba0c..f63a3dee 100644
--- a/Resources/Plugins/edit-design/modal.html
+++ b/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 -->
diff --git a/Resources/Plugins/edit-design/notification.js b/Resources/Plugins/edit-design/notification.js
index c241bad4..db4f2dfe 100644
--- a/Resources/Plugins/edit-design/notification.js
+++ b/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 }");
};
}