Fix clocks

pandora_console/include/visual-console-client/vc.main.css

@@ -431,14 +431,16 @@ p.error-p-validate {
 }
 
 .visual-console-item .digital-clock > span {
-  font-family: "Alarm Clock", "Courier New", Courier, monospace;
-  font-size: 50px;
-
   /* To improve legibility */
   text-rendering: optimizeLegibility;
   text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
 }
 
+.visual-console-item .digital-clock > span.time {
+  font-family: "Alarm Clock", "Courier New", Courier, monospace;
+  font-size: 50px;
+}
+
 .visual-console-item .digital-clock > span.date {
   font-size: 25px;
 }
@@ -686,9 +688,6 @@ li#li-timeZone-item > select:not(:first-child) {
 }
 
 .visual-console-item .digital-clock > span {
-  font-family: "Alarm Clock", "Courier New", Courier, monospace;
-  font-size: 50px;
-
   /* To improve legibility */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -696,6 +695,11 @@ li#li-timeZone-item > select:not(:first-child) {
   text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
 }
 
+.visual-console-item .digital-clock > span.time {
+  font-family: "Alarm Clock", "Courier New", Courier, monospace;
+  font-size: 50px;
+}
+
 .visual-console-item .digital-clock > span.date {
   font-size: 25px;
 }

visual_console_client/src/items/Clock/index.ts

@@ -333,6 +333,19 @@ export default class Clock extends Item<ClockProps> {
     return this.createClock();
   }
 
+  /**
+   * To update the content element.
+   * @override Item.updateDomElement
+   */
+  protected updateDomElement(element: HTMLElement): void {
+    if (this.props.clockType === "digital") {
+      element.classList.replace("analogic-clock", "digital-clock");
+    } else {
+      element.classList.replace("digital-clock", "analogic-clock");
+    }
+    element.innerHTML = this.createDomElement().innerHTML;
+  }
+
   /**
    * To remove the event listeners and the elements from the DOM.
    * @override
@@ -355,12 +368,12 @@ export default class Clock extends Item<ClockProps> {
       width,
       height
     ); // Destructuring assigment: http://es6-features.org/#ObjectMatchingShorthandNotation
-    super.resizeElement(newWidth, newHeight);
+    super.resizeElement(newWidth, height);
     // Re-render the item to force it calculate a new font size.
-    if (this.props.clockType === "digital") {
-      // Replace the old element with the updated date.
-      this.childElementRef.innerHTML = this.createClock().innerHTML;
-    }
+    //if (this.props.clockType === "digital") {
+    // Replace the old element with the updated date.
+    this.childElementRef.innerHTML = this.createClock().innerHTML;
+    //}
   }
 
   /**

visual_console_client/src/items/Clock/styles.css

@@ -15,9 +15,6 @@
 }
 
 .visual-console-item .digital-clock > span {
-  font-family: "Alarm Clock", "Courier New", Courier, monospace;
-  font-size: 50px;
-
   /* To improve legibility */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -25,6 +22,11 @@
   text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
 }
 
+.visual-console-item .digital-clock > span.time {
+  font-family: "Alarm Clock", "Courier New", Courier, monospace;
+  font-size: 50px;
+}
+
 .visual-console-item .digital-clock > span.date {
   font-size: 25px;
 }

visual_console_client/src/main.css

@@ -331,14 +331,16 @@ p.error-p-validate {
 }
 
 .visual-console-item .digital-clock > span {
-  font-family: "Alarm Clock", "Courier New", Courier, monospace;
-  font-size: 50px;
-
   /* To improve legibility */
   text-rendering: optimizeLegibility;
   text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
 }
 
+.visual-console-item .digital-clock > span.time {
+  font-family: "Alarm Clock", "Courier New", Courier, monospace;
+  font-size: 50px;
+}
+
 .visual-console-item .digital-clock > span.date {
   font-size: 25px;
 }