style: fix stylings and focus selected year in year grid

motss · May 23, 2021 · e6a9dba · e6a9dba
1 parent 305168b
commit e6a9dba
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 16 deletions.
diff --git a/src/date-picker.ts b/src/date-picker.ts
@@ -92,8 +92,9 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement
 
     if (changedProperties.has('startView')) {
       const oldStartView = changedProperties.get('startView') as CalendarView;
+      const newStartView = this.startView;
 
-      if (!calendarViews.includes(this.startView)) {
+      if (!calendarViews.includes(newStartView)) {
         this.startView = this.startView = oldStartView;
       }
     }
@@ -171,11 +172,12 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement
   protected updated(changedProperties: DatePickerChangedProperties): void {
     super.updated(changedProperties);
 
-    if (this.startView === 'calendar') {
-      // TODO: Do stuff for calendar
-    } else if (this.startView === 'yearGrid') {
-      // TODO: Do stuff for year grid
-    }
+    // FIXME: focus element based on start view
+    // if (this.startView === 'calendar') {
+    //   // TODO: Do stuff for calendar
+    // } else if (this.startView === 'yearGrid') {
+    //   // TODO: Do stuff for year grid
+    // }
   }
 
   protected render(): TemplateResult {
@@ -223,12 +225,11 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement
         <div class=selected-month>${selectedMonth}</div>
         <div class=selected-year>${selectedYear}</div>
 
-        <div class=month-dropdown>
-          <mwc-icon-button
-            label=${this.yearDropdownLabel}
-            @click=${this.#updateStartView}
-          >${iconArrowDropdown}</mwc-icon-button>
-        </div>
+        <mwc-icon-button
+          class=month-dropdown
+          label=${this.yearDropdownLabel}
+          @click=${this.#updateStartView}
+        >${iconArrowDropdown}</mwc-icon-button>
       </div>
 
       ${

diff --git a/src/month-calendar/stylings.ts b/src/month-calendar/stylings.ts
@@ -19,17 +19,24 @@ export const monthCalendarStyling = css`
 .calendar-day-value,
 .weekday-value {
   position: relative;
-  font-size: 14px;
+  font-size: 13px;
 }
 
 th,
 td {
   padding: 0;
 }
 
+.weekday {
+  max-height: 28px;
+  height: 28px;
+}
+
 .weekday-value {
-  padding: 0 0 9px;
+  max-height: 16px;
+  height: 16px;
   color: #8c8c8c;
+  line-height: 1;
 }
 
 .calendar-day::after,

diff --git a/src/stylings.ts b/src/stylings.ts
@@ -13,6 +13,8 @@ export const datePickerStyling = css`
   --date-picker-width: var(--date-picker-base-width);
   --date-picker-height: var(--date-picker-base-height);
 
+  display: flex;
+  flex-direction: column;
   min-width: var(--date-picker-width);
   max-width: var(--date-picker-width);
   min-height: var(--date-picker-height);
@@ -42,13 +44,17 @@ export const datePickerStyling = css`
 .month-and-year-selector {
   display: flex;
   align-items: center;
+  font-size: 13px;
 }
 
-.selected-year,
-.month-dropdown {
+.selected-year {
   margin: 0 0 0 4px;
 }
 
+.month-dropdown {
+  margin: 0 0 0 -8px;
+}
+
 .month-pagination {
   display: flex;
   margin: 0 -4px 0 0;

diff --git a/src/year-grid-button/stylings.ts b/src/year-grid-button/stylings.ts
@@ -3,6 +3,8 @@ import { css } from '@lit/reactive-element';
 export const yearGridButtonStyling = css`
 :host {
   --mdc-button-horizontal-padding: 0;
+  --mdc-theme-primary: var(--year-grid-button-color, #000);
+  --mdc-theme-on-primary: var(--year-grid-button-text-color);
 
   align-items: center;
   justify-content: center;
@@ -18,6 +20,8 @@ export const yearGridButtonStyling = css`
   width: 52px;
   height: 28px;
   padding: 0;
+  background-color: inherit;
+  color: inherit;
   font: inherit;
   font-size: 14px;
   border-radius: 52px;

diff --git a/src/year-grid/year-grid.ts b/src/year-grid/year-grid.ts
@@ -1,6 +1,7 @@
 import '../year-grid-button/app-year-grid-button.js';
 
 import { property } from '@lit/reactive-element/decorators/property.js';
+import { queryAsync } from '@lit/reactive-element/decorators/query-async.js';
 import type { TemplateResult } from 'lit';
 import { nothing } from 'lit';
 import { html, LitElement } from 'lit';
@@ -20,6 +21,9 @@ export class YearGrid extends LitElement implements YearGridProperties {
   @property({ attribute: false })
   public data: YearGridData;
 
+  @queryAsync('app-year-grid-button[data-year][unelevated]')
+  public selectedYearGridButton!: Promise<HTMLButtonElement | null>;
+
   public static styles = [
     resetShadowRoot,
     yearGridStyling,
@@ -42,6 +46,14 @@ export class YearGrid extends LitElement implements YearGridProperties {
     return this.data.formatters != null;
   }
 
+  protected async updated(): Promise<void> {
+    const selectedYearGridButton = await this.selectedYearGridButton;
+
+    if (selectedYearGridButton) {
+      selectedYearGridButton.scrollIntoView();
+    }
+  }
+
   protected render(): TemplateResult | typeof nothing {
     const {
       date,