diff --git a/MMM-Trello.css b/MMM-Trello.css index e73dc10..f970944 100644 --- a/MMM-Trello.css +++ b/MMM-Trello.css @@ -9,3 +9,11 @@ .is-completed { text-decoration: line-through; } + +.medium { + font-size: 20px; +} + +.large { + font-size: 30px; +} diff --git a/MMM-Trello.js b/MMM-Trello.js index 25de6a4..3757524 100644 --- a/MMM-Trello.js +++ b/MMM-Trello.js @@ -24,7 +24,8 @@ Module.register("MMM-Trello", { showChecklists: true, showChecklistTitle: false, wholeList: false, - isCompleted: false + isCompleted: false, + fontSize: "medium" // added fontSize option with default value }, // Define start sequence. @@ -109,86 +110,89 @@ Module.register("MMM-Trello", { }; }, - // Override dom generator. - getDom: function () { - var wrapper = document.createElement("div"); +// Override dom generator. +getDom: function () { + var wrapper = document.createElement("div"); - if (this.activeItem >= this.listContent.length) { - this.activeItem = 0; - } + if (this.activeItem >= this.listContent.length) { + this.activeItem = 0; + } - if (this.loaded) { - if (this.listContent.length === 0) { - wrapper.innerHTML = this.translate("NO_CARDS"); - wrapper.className = "small dimmed"; - } else { - var content, card, startat = 0, endat = this.listContent.length - 1; - if (!this.config.wholeList) { - startat = this.activeItem; - endat = this.activeItem; - } - for (card = startat; card <= endat; card++) { - if (this.config.showTitle || this.config.showDueDate) { - var name = document.createElement("div"); - name.className = "medium light " + (this.config.isCompleted ? "is-completed" : "bright"); + var fontSizeClass = this.config.fontSize === "large" ? "large" : "medium"; - content = ""; + if (this.loaded) { + if (this.listContent.length === 0) { + wrapper.innerHTML = this.translate("NO_CARDS"); + wrapper.className = fontSizeClass + " dimmed"; + } else { + var content, card, startat = 0, endat = this.listContent.length - 1; + if (!this.config.wholeList) { + startat = this.activeItem; + endat = this.activeItem; + } + for (card = startat; card <= endat; card++) { + if (this.config.showTitle || this.config.showDueDate) { + var name = document.createElement("div"); + name.className = fontSizeClass + " light " + (this.config.isCompleted ? "is-completed" : "bright"); + + content = ""; + if (this.config.showTitle) { + content = this.listContent[card].name; + } + + if (this.config.showDueDate && this.listContent[card].due) { if (this.config.showTitle) { - content = this.listContent[card].name; + content += " (" + moment(this.listContent[card].due).fromNow() + ")"; } - - if (this.config.showDueDate && this.listContent[card].due) { - if (this.config.showTitle) { - content += " (" + moment(this.listContent[card].due).fromNow() + ")"; - } - else { - content += moment(this.listContent[card].due).fromNow() + ":"; - } + else { + content += moment(this.listContent[card].due).fromNow() + ":"; } + } - name.innerHTML = content; + name.innerHTML = content; - wrapper.appendChild(name); - } - if(this.config.showDescription){ - var desc = document.createElement("div"); - desc.className = "small light " + (this.config.isCompleted ? "is-completed dimmed" : ""); - - content = this.listContent[card].desc; - - if (this.config.showLineBreaks) { - var lines = content.split('\n'); - for (var i in lines) { - var lineElement = document.createElement("div"); - lineElement.innerHTML = lines[i]; - desc.appendChild(lineElement); - } - } - else { - desc.innerHTML = content; + wrapper.appendChild(name); + } + if(this.config.showDescription){ + var desc = document.createElement("div"); + desc.className = fontSizeClass + " light " + (this.config.isCompleted ? "is-completed dimmed" : ""); + + content = this.listContent[card].desc; + + if (this.config.showLineBreaks) { + var lines = content.split('\n'); + for (var i in lines) { + var lineElement = document.createElement("div"); + lineElement.innerHTML = lines[i]; + desc.appendChild(lineElement); } - wrapper.appendChild(desc); } - if (this.config.showChecklists) { - var checklistWrapper = document.createElement("div"); - checklistWrapper.className = "checklist-wrapper"; - this.getChecklistDom(checklistWrapper, card); - wrapper.appendChild(checklistWrapper); + else { + desc.innerHTML = content; } + wrapper.appendChild(desc); + } + if (this.config.showChecklists) { + var checklistWrapper = document.createElement("div"); + checklistWrapper.className = "checklist-wrapper"; + this.getChecklistDom(checklistWrapper, card); + wrapper.appendChild(checklistWrapper); } } + } + } else { + if (this.error) { + wrapper.innerHTML = "Please check your config file, an error occured: " + this.errorMessage; + wrapper.className = "xsmall dimmed"; } else { - if (this.error) { - wrapper.innerHTML = "Please check your config file, an error occured: " + this.errorMessage; - wrapper.className = "xsmall dimmed"; - } else { - wrapper.innerHTML = ""; - wrapper.className = "small dimmed"; - } + wrapper.innerHTML = ""; + wrapper.className = "small dimmed"; } + } + + return wrapper; +}, - return wrapper; - }, /* getChecklistDom() * return the dom for all checklists on current card diff --git a/README.md b/README.md index c9c636a..7137298 100644 --- a/README.md +++ b/README.md @@ -95,6 +95,13 @@ The following properties can be configured:
Possible values: true or false
Default value: true + + + fontSize + Change the size of the heather for the card.
+
Possible values: large or medium +
Default value: large + showDescription