enhancement(Timepicker) refactored styling towards m3 standards mater…

…ializecss#558)
gselderslaghs · Dec 30, 2024 · 0977c9e · 0977c9e
1 parent d77155f
commit 0977c9e
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 17 deletions.
diff --git a/sass/components/_timepicker.scss b/sass/components/_timepicker.scss
@@ -1,6 +1,6 @@
 /* Timepicker Containers */
-/* container removed as of v2.2.1 */
-/* .timepicker-container {
+/* modal removed as of v2.2.1 */
+/* .timepicker-modal {
   max-width: 325px;
   max-height: none;
 }*/
@@ -10,6 +10,7 @@
   flex-direction: column;
   max-width: 325px;
   padding: 0;
+  background-color: var(--md-sys-color-inverse-on-surface);
 }
 
 .text-primary {
@@ -20,7 +21,7 @@
 .timepicker-digital-display {
   width: auto;
   flex: 1 auto;
-  background-color: var(--md-sys-color-primary);;
+  // background-color: var(--md-sys-color-surface);
   padding: 2rem .67rem .67rem .67rem;
   font-weight: 300;
 }
@@ -68,19 +69,25 @@
 input[type=text].timepicker-input-hours,
 input[type=text].timepicker-input-minutes {
   height: 100%;
-  padding: .8rem;
+  padding: 1.33rem .8rem;
   border: 0;
   text-align: center;
+  color: var(--md-sys-color-on-background);
+  background-color: var(--md-sys-color-surface-variant);
+
+  &:focus {
+    background-color: var(--md-sys-color-primary-container);
+  }
 }
 
 .timepicker-input-divider-wrapper {
   width: 1.6rem;
   text-align: center;
 }
 
-input[type=text].text-primary {
+/*input[type=text].text-primary {
   color: var(--md-sys-color-on-background);
-}
+}*/
 
 .timepicker-display-am-pm {
   font-size: 1.3rem;
@@ -104,7 +111,7 @@ input[type=text].text-primary {
   line-height: 2rem;
   vertical-align: middle;
   text-align: center;
-  background-color: transparent;
+  // background-color: transparent;
   border: 1px solid var(--md-sys-color-outline);
 }
 
@@ -123,11 +130,11 @@ input[type=text].text-primary {
 .timepicker-analog-display {
   flex: 2.5 auto;
   padding: .67rem;
-  background-color: var(--md-sys-color-surface);
+  // background-color: var(--md-sys-color-surface);
 }
 
 .timepicker-plate {
-  background-color: rgba(0, 0, 0, 0.09);
+  background-color: var(--md-sys-color-surface-variant);
   border-radius: 50%;
   width: 260px;
   height: 260px;
@@ -251,13 +258,16 @@ input[type=text].text-primary {
     text-align: center;
   }
 
+  .timepicker-display-column {
+    padding: 0 3%;
+  }
+
   .timepicker-display-am-pm {
     /*position: relative;
     top: auto;
     right: auto;
     text-align: center;*/
     margin-top: 1.1rem;
-    padding: 0 3%;
   }
 
   .timepicker-span-am-pm {

diff --git a/src/timepicker.ts b/src/timepicker.ts
@@ -392,13 +392,17 @@ export class Timepicker extends Component<TimepickerOptions> {
       this._amBtn = document.createElement('div');
       this._amBtn.classList.add('am-btn', 'btn');
       this._amBtn.innerText = 'AM';
+      this._amBtn.tabIndex = 0;
       this._amBtn.addEventListener('click', this._handleAmPmClick);
+      this._amBtn.addEventListener('keypress', this._handleAmPmKeypress);
       this.spanAmPm.appendChild(this._amBtn);
       // PM Button
       this._pmBtn = document.createElement('div');
       this._pmBtn.classList.add('pm-btn', 'btn');
       this._pmBtn.innerText = 'PM';
+      this._pmBtn.tabIndex = 0;
       this._pmBtn.addEventListener('click', this._handleAmPmClick);
+      this._pmBtn.addEventListener('keypress', this._handleAmPmKeypress);
       this.spanAmPm.appendChild(this._pmBtn);
     }
     this._buildHoursView();
@@ -494,12 +498,21 @@ export class Timepicker extends Component<TimepickerOptions> {
     }
   }
 
-  _handleAmPmClick = (e) => {
-    const btnClicked = <HTMLElement>e.target;
-    this.amOrPm = btnClicked.classList.contains('am-btn') ? 'AM' : 'PM';
-    this._updateAmPmView();
+  _handleAmPmClick = (e: MouseEvent) => {
+    this._handleAmPmInteraction(<HTMLElement>e.target);
+  };
+
+  _handleAmPmKeypress = (e: KeyboardEvent) => {
+    if (Utils.keys.ENTER.includes(e.key)) {
+      this._handleAmPmInteraction(<HTMLElement>e.target);
+    }
   };
 
+  _handleAmPmInteraction = (e: HTMLElement) => {
+    this.amOrPm = e.classList.contains('am-btn') ? 'AM' : 'PM';
+    this._updateAmPmView();
+  }
+
   _updateAmPmView() {
     if (this.options.twelveHour) {
       if (this.amOrPm === 'PM') {
@@ -552,13 +565,13 @@ export class Timepicker extends Component<TimepickerOptions> {
       hideView = isHours ? this.minutesView : this.hoursView;
     this.currentView = view;
 
-    if (isHours) {
+    /*if (isHours) {
       this.inputHours.classList.add('text-primary');
       this.inputMinutes.classList.remove('text-primary');
     } else {
       this.inputHours.classList.remove('text-primary');
       this.inputMinutes.classList.add('text-primary');
-    }
+    }*/
 
     // Transition view
     hideView.classList.add('timepicker-dial-out');
@@ -771,7 +784,7 @@ export class Timepicker extends Component<TimepickerOptions> {
     Timepicker._template = `<div class="timepicker-container">
           <div class="timepicker-digital-display">
             <div class="timepicker-text-container">
-              <div class="timepicker-display-column">
+              <div class="timepicker-display-column timepicker-display-digital-clock">
                 <div class="timepicker-input-hours-wrapper">
                   <input type="text" maxlength="2" class="timepicker-input-hours text-primary" />
                 </div>