Merge pull request #269 from nhubbard/v2-beta

clockBold's Re-Incarnation

modules/default/clock/README.md

@@ -47,14 +47,21 @@ The following properties can be configured:
 		</tr>
 		<tr>
 			<td><code>showPeriod</code></td>
-			<td>Show the period (am/pm) with 12 hour format<br>
+			<td>Show the period (am/pm) with 12 hour format.<br>
 				<br><b>Possible values:</b> <code>true</code> or <code>false</code>
 				<br><b>Default value:</b> <code>true</code>
 			</td>
 		</tr>
 		<tr>
 			<td><code>showPeriodUpper</code></td>
-			<td>Show the period (AM/PM) with 12 hour format as uppercase<br>
+			<td>Show the period (AM/PM) with 12 hour format as uppercase.<br>
+				<br><b>Possible values:</b> <code>true</code> or <code>false</code>
+				<br><b>Default value:</b> <code>false</code>
+			</td>
+		</tr>
+		<tr>
+			<td><code>clockBold</code></td>
+			<td>Remove the colon and bold the minutes to make a more modern look.<br>
 				<br><b>Possible values:</b> <code>true</code> or <code>false</code>
 				<br><b>Default value:</b> <code>false</code>
 			</td>

modules/default/clock/clock.js

@@ -1,41 +1,34 @@
 /* global Log, Module, moment, config */
-
 /* Magic Mirror
  * Module: Clock
  *
  * By Michael Teeuw http://michaelteeuw.nl
  * MIT Licensed.
  */
-
 Module.register("clock",{
-
 	// Module config defaults.
 	defaults: {
 		timeFormat: config.timeFormat,
 		displaySeconds: true,
 		showPeriod: true,
 		showPeriodUpper: false,
+		clockBold: false
 	},
-
 	// Define required scripts.
 	getScripts: function() {
 		return ["moment.js"];
 	},
-
 	// Define start sequence.
 	start: function() {
 		Log.info("Starting module: " + this.name);
-
 		// Schedule update interval.
 		var self = this;
 		setInterval(function() {
 			self.updateDom();
 		}, 1000);
-
 		// Set locale.
 		moment.locale(config.language);
 	},
-
 	// Override dom generator.
 	getDom: function() {
 		// Create wrappers.
@@ -44,35 +37,36 @@ Module.register("clock",{
 		var timeWrapper = document.createElement("div");
 		var secondsWrapper = document.createElement("sup");
 		var periodWrapper = document.createElement("span");
-
 		// Style Wrappers
 		dateWrapper.className = "date normal medium";
 		timeWrapper.className = "time bright large light";
 		secondsWrapper.className = "dimmed";
-
 		// Set content of wrappers.
-		// The moment().format('h') method has a bug on the Raspberry Pi. 
+		// The moment().format("h") method has a bug on the Raspberry Pi.
 		// So we need to generate the timestring manually.
 		// See issue: https://github.com/MichMich/MagicMirror/issues/181
-		var timeString = moment().format('HH:mm');
+		if (this.config.clockBold === true) {
+			var timeString = moment().format("HH[<span class=\"bold\">]mm[</span>]");
+		} else {
+			var timeString = moment().format("HH:mm");
+		}
 		if (this.config.timeFormat !== 24) {
 			var now = new Date();
 			var hours = now.getHours() % 12 || 12;
-			timeString = hours + moment().format(':mm');
+			if (this.config.clockBold === true) {
+				timeString = hours + moment().format("[<span class=\"bold\">]mm[</span>]");
+			} else {
+				timeString = hours + moment().format(":mm");
+			}
 		}
-
 		dateWrapper.innerHTML = moment().format("dddd, LL");
 		timeWrapper.innerHTML = timeString;
 		secondsWrapper.innerHTML = moment().format("ss");
-
-
 		if (this.config.showPeriodUpper) {
-			periodWrapper.innerHTML = moment().format('A');
+			periodWrapper.innerHTML = moment().format("A");
 		} else {
-			periodWrapper.innerHTML = moment().format('a');
+			periodWrapper.innerHTML = moment().format("a");
 		}
-	
-
 		// Combine wrappers.
 		wrapper.appendChild(dateWrapper);
 		wrapper.appendChild(timeWrapper);
@@ -82,7 +76,6 @@ Module.register("clock",{
 		if (this.config.showPeriod && this.config.timeFormat !== 24) {
 			timeWrapper.appendChild(periodWrapper);
 		}
-
 		// Return the wrapper to the dom.
 		return wrapper;
 	}