Planner: fixed DateEditor layout (#6696)

packages/theme/styles/button.scss

@@ -1,3 +1,177 @@
+.hulyButton {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  gap: var(--spacing-1);
+  border: 1px solid transparent;
+
+  &:not(:disabled, .disabled, .loading) { cursor: pointer; }
+  &.inheritFont { font: inherit; }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacing-2_5);
+    height: var(--spacing-2_5);
+  }
+  span { white-space: nowrap; }
+
+  &:focus {
+    outline: 2px solid var(--global-focus-BorderColor);
+    outline-offset: 2px;
+  }
+  &.type-button-icon { padding: 0; }
+  &.large {
+    height: var(--global-large-Size);
+    border-radius: var(--medium-BorderRadius);
+
+    &.round { border-radius: var(--large-BorderRadius); }
+
+    &.type-button:not(.iconOnly) { padding: 0 var(--spacing-2); }
+    &.iconOnly,
+    &.type-button-icon { width: var(--global-large-Size); }
+  }
+  &.medium {
+    height: var(--global-medium-Size);
+    border-radius: var(--medium-BorderRadius);
+
+    &.round { border-radius: var(--large-BorderRadius); }
+    &.type-button:not(.iconOnly) { padding: 0 var(--spacing-2); }
+    &.iconOnly,
+    &.type-button-icon { width: var(--global-medium-Size); }
+  }
+  &.small {
+    height: var(--global-small-Size);
+    gap: var(--spacing-0_5);
+    border-radius: var(--small-BorderRadius);
+
+    &.round { border-radius: var(--large-BorderRadius); }
+    &.type-button:not(.iconOnly) { padding: 0 var(--spacing-1); }
+    &.iconOnly,
+    &.type-button-icon { width: var(--global-small-Size); }
+  }
+  &.extra-small {
+    height: var(--global-extra-small-Size);
+    border-radius: var(--extra-small-BorderRadius);
+
+    &.round { border-radius: var(--large-BorderRadius); }
+    &.type-button:not(.iconOnly) { padding: 0 var(--spacing-1); }
+    &.iconOnly,
+    &.type-button-icon { width: var(--global-extra-small-Size); }
+  }
+  &.min {
+    height: var(--global-min-Size);
+    border: 0;
+    border-radius: var(--min-BorderRadius);
+  }
+  &.type-button-icon .icon,
+  &.menu .icon {
+    width: var(--spacing-2);
+    height: var(--spacing-2);
+  }
+
+  &:disabled:not(.loading),
+  &.disabled:not(.loading) {
+    border-color: transparent;
+    cursor: not-allowed;
+
+    .icon { color: var(--button-disabled-IconColor); }
+    span { color: var(--button-disabled-LabelColor); }
+  }
+
+  &.primary {
+    border-color: var(--button-primary-BorderColor);
+    background-color: var(--button-primary-BackgroundColor);
+
+    .icon { color: var(--button-accent-IconColor); }
+    span { color: var(--button-accent-LabelColor); }
+
+    &:not(.disabled, :disabled):hover { background-color: var(--button-primary-hover-BackgroundColor); }
+    &:not(.disabled, :disabled):active,
+    &.pressed:not(.disabled, :disabled) { background-color: var(--button-primary-active-BackgroundColor); }
+    &.menu:not(.disabled, :disabled):active,
+    &.pressed:not(.disabled, :disabled) { border-color: var(--button-menu-active-BorderColor); }
+    &:disabled:not(.loading),
+    &.disabled:not(.loading) { background-color: var(--button-disabled-BackgroundColor); }
+    &.loading {
+      background-color: var(--button-primary-active-BackgroundColor);
+
+      span { color: var(--button-primary-loading-LabelColor); }
+    }
+  }
+
+  &.secondary {
+    border-color: var(--button-secondary-BorderColor);
+    background-color: var(--button-secondary-BackgroundColor);
+
+    .icon { color: var(--button-subtle-IconColor); }
+    span { color: var(--button-subtle-LabelColor); }
+
+    &:not(.disabled, :disabled):hover { background-color: var(--button-secondary-hover-BackgroundColor); }
+    &:not(.disabled, :disabled):active,
+    &.pressed:not(.disabled, :disabled) { background-color: var(--button-secondary-active-BackgroundColor); }
+    &.menu:not(.disabled, :disabled):active,
+    &.pressed:not(.disabled, :disabled) { border-color: var(--button-menu-active-BorderColor); }
+    &:disabled:not(.loading),
+    &.disabled:not(.loading) { background-color: var(--button-disabled-BackgroundColor); }
+    &.loading {
+      background-color: var(--button-secondary-active-BackgroundColor);
+
+      span { color: var(--button-disabled-LabelColor); }
+    }
+  }
+
+  &.tertiary {
+    border-color: transparent;
+    background-color: transparent;
+
+    &:not(.inheritColor) .icon { color: var(--button-subtle-IconColor); }
+    &.inheritColor {
+      color: inherit;
+
+      .icon { color: currentColor; }
+    }
+    span { color: var(--button-subtle-LabelColor); }
+
+    &:not(.disabled, :disabled):hover { background-color: var(--button-tertiary-hover-BackgroundColor); }
+    &:not(.disabled, :disabled):active,
+    &.pressed:not(.disabled, :disabled) { background-color: var(--button-tertiary-active-BackgroundColor); }
+    &.menu:not(.disabled, :disabled):active,
+    &.pressed:not(.disabled, :disabled) { border-color: var(--button-menu-active-BorderColor); }
+    &.loading {
+      background-color: var(--button-tertiary-active-BackgroundColor);
+
+      span { color: var(--button-disabled-LabelColor); }
+    }
+  }
+
+  &.negative {
+    border-color: var(--button-negative-BorderColor);
+    background-color: var(--button-negative-BackgroundColor);
+
+    .icon { color: var(--button-accent-IconColor); }
+    span { color: var(--button-accent-LabelColor); }
+
+    &:not(.disabled, :disabled):hover { background-color: var(--button-negative-hover-BackgroundColor); }
+    &:not(.disabled, :disabled):active,
+    &.pressed:not(.disabled, :disabled) { background-color: var(--button-negative-active-BackgroundColor); }
+    &.menu:not(.disabled, :disabled):active,
+    &.pressed:not(.disabled, :disabled) { border-color: var(--button-menu-active-BorderColor); }
+    &:disabled:not(.loading),
+    &.disabled:not(.loading) { background-color: var(--button-disabled-BackgroundColor); }
+    &.loading {
+      background-color: var(--button-negative-active-BackgroundColor);
+
+      span { color: var(--button-negative-loading-LabelColor); }
+    }
+  }
+
+  & > * { pointer-events: none; }
+}
+
+// Old style Button
 .antiButton {
   display: flex;
   align-items: center;

packages/ui/src/components/ButtonBase.svelte

@@ -92,7 +92,7 @@
 <button
   {id}
   bind:this={element}
-  class="font-medium-14 {kind} {size} {type} {shape}"
+  class="hulyButton font-medium-14 {kind} {size} {type} {shape}"
   class:loading
   class:pressed
   class:inheritColor
@@ -115,300 +115,3 @@
   {#if title}<span>{title}</span>{/if}
   <slot />
 </button>
-
-<style lang="scss">
-  button {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
-    gap: var(--spacing-1);
-
-    border: 1px solid transparent;
-
-    &:not(:disabled, .loading) {
-      cursor: pointer;
-    }
-    &.inheritFont {
-      font: inherit;
-    }
-
-    .icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--spacing-2_5);
-      height: var(--spacing-2_5);
-    }
-    span {
-      white-space: nowrap;
-    }
-
-    &:focus {
-      outline: 2px solid var(--global-focus-BorderColor);
-      outline-offset: 2px;
-    }
-    &.type-button-icon {
-      padding: 0;
-    }
-    &.large {
-      height: var(--global-large-Size);
-      border-radius: var(--medium-BorderRadius);
-
-      &.round {
-        border-radius: var(--large-BorderRadius);
-      }
-
-      &.type-button:not(.iconOnly) {
-        padding: 0 var(--spacing-2);
-      }
-      &.iconOnly,
-      &.type-button-icon {
-        width: var(--global-large-Size);
-      }
-    }
-    &.medium {
-      height: var(--global-medium-Size);
-      border-radius: var(--medium-BorderRadius);
-
-      &.round {
-        border-radius: var(--large-BorderRadius);
-      }
-      &.type-button:not(.iconOnly) {
-        padding: 0 var(--spacing-2);
-      }
-      &.iconOnly,
-      &.type-button-icon {
-        width: var(--global-medium-Size);
-      }
-    }
-    &.small {
-      height: var(--global-small-Size);
-      gap: var(--spacing-0_5);
-      border-radius: var(--small-BorderRadius);
-
-      &.round {
-        border-radius: var(--large-BorderRadius);
-      }
-      &.type-button:not(.iconOnly) {
-        padding: 0 var(--spacing-1);
-      }
-      &.iconOnly,
-      &.type-button-icon {
-        width: var(--global-small-Size);
-      }
-    }
-    &.extra-small {
-      height: var(--global-extra-small-Size);
-      border-radius: var(--extra-small-BorderRadius);
-
-      &.round {
-        border-radius: var(--large-BorderRadius);
-      }
-      &.type-button:not(.iconOnly) {
-        padding: 0 var(--spacing-1);
-      }
-      &.iconOnly,
-      &.type-button-icon {
-        width: var(--global-extra-small-Size);
-      }
-    }
-    &.min {
-      height: var(--global-min-Size);
-      border: 0;
-      border-radius: var(--min-BorderRadius);
-    }
-    &.type-button-icon .icon,
-    &.menu .icon {
-      width: var(--spacing-2);
-      height: var(--spacing-2);
-    }
-
-    &.primary {
-      border-color: var(--button-primary-BorderColor);
-      background-color: var(--button-primary-BackgroundColor);
-
-      .icon {
-        color: var(--button-accent-IconColor);
-      }
-      span {
-        color: var(--button-accent-LabelColor);
-      }
-      &:hover {
-        background-color: var(--button-primary-hover-BackgroundColor);
-      }
-      &:active,
-      &.pressed {
-        background-color: var(--button-primary-active-BackgroundColor);
-      }
-      &.menu:enabled:active,
-      &.pressed {
-        border-color: var(--button-menu-active-BorderColor);
-      }
-      &:disabled:not(.loading) {
-        background-color: var(--button-disabled-BackgroundColor);
-        border-color: transparent;
-        cursor: not-allowed;
-
-        .icon {
-          color: var(--button-disabled-IconColor);
-        }
-        span {
-          color: var(--button-disabled-LabelColor);
-        }
-      }
-      &.loading {
-        background-color: var(--button-primary-active-BackgroundColor);
-
-        span {
-          color: var(--button-primary-loading-LabelColor);
-        }
-      }
-    }
-
-    &.secondary {
-      border-color: var(--button-secondary-BorderColor);
-      background-color: var(--button-secondary-BackgroundColor);
-
-      .icon {
-        color: var(--button-subtle-IconColor);
-      }
-      span {
-        color: var(--button-subtle-LabelColor);
-      }
-      &:hover {
-        background-color: var(--button-secondary-hover-BackgroundColor);
-      }
-      &:active,
-      &.pressed {
-        background-color: var(--button-secondary-active-BackgroundColor);
-      }
-      &.menu:enabled:active,
-      &.pressed {
-        border-color: var(--button-menu-active-BorderColor);
-      }
-      &:disabled:not(.loading) {
-        background-color: var(--button-disabled-BackgroundColor);
-        border-color: transparent;
-        cursor: not-allowed;
-
-        .icon {
-          color: var(--button-disabled-IconColor);
-        }
-        span {
-          color: var(--button-disabled-LabelColor);
-        }
-      }
-      &.loading {
-        background-color: var(--button-secondary-active-BackgroundColor);
-
-        span {
-          color: var(--button-disabled-LabelColor);
-        }
-      }
-    }
-
-    &.tertiary {
-      border-color: transparent;
-      background-color: transparent;
-
-      &:not(.inheritColor) .icon {
-        color: var(--button-subtle-IconColor);
-      }
-      &.inheritColor {
-        color: inherit;
-
-        .icon {
-          color: currentColor;
-        }
-      }
-      span {
-        color: var(--button-subtle-LabelColor);
-      }
-      &:hover:enabled {
-        background-color: var(--button-tertiary-hover-BackgroundColor);
-      }
-      &:active:enabled,
-      &.pressed:enabled {
-        background-color: var(--button-tertiary-active-BackgroundColor);
-      }
-      &.menu:active:enabled,
-      &.pressed:enabled {
-        border-color: var(--button-menu-active-BorderColor);
-      }
-      &:disabled:not(.loading) {
-        border-color: transparent;
-        cursor: not-allowed;
-
-        .icon {
-          color: var(--button-disabled-IconColor);
-        }
-        span {
-          color: var(--button-disabled-LabelColor);
-        }
-      }
-      &.loading {
-        background-color: var(--button-tertiary-active-BackgroundColor);
-
-        span {
-          color: var(--button-disabled-LabelColor);
-        }
-      }
-    }
-
-    &.negative {
-      border-color: var(--button-negative-BorderColor);
-      background-color: var(--button-negative-BackgroundColor);
-
-      .icon {
-        color: var(--button-accent-IconColor);
-      }
-      span {
-        color: var(--button-accent-LabelColor);
-      }
-      &:hover {
-        background-color: var(--button-negative-hover-BackgroundColor);
-      }
-      &:active,
-      &.pressed {
-        background-color: var(--button-negative-active-BackgroundColor);
-      }
-      &.menu:enabled:active,
-      &.pressed {
-        border-color: var(--button-menu-active-BorderColor);
-      }
-      &:disabled:not(.loading) {
-        background-color: var(--button-disabled-BackgroundColor);
-        border-color: transparent;
-        cursor: not-allowed;
-
-        .icon {
-          color: var(--button-disabled-IconColor);
-        }
-        span {
-          color: var(--button-disabled-LabelColor);
-        }
-      }
-      &.loading {
-        background-color: var(--button-negative-active-BackgroundColor);
-
-        span {
-          color: var(--button-negative-loading-LabelColor);
-        }
-      }
-    }
-
-    & > * {
-      pointer-events: none;
-    }
-  }
-
-  @keyframes rotate {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(359deg);
-    }
-  }
-</style>

packages/ui/src/components/calendar/TimeInputBox.svelte

@@ -153,7 +153,7 @@
       }
     }
   }
-  const focused = (ed: TEdits): void => {
+  export const focused = (ed: TEdits): void => {
     selected = ed
     startTyping = true
   }

plugins/calendar-resources/src/components/DateEditor.svelte

@@ -31,7 +31,7 @@
 
   export let date: number
   export let difference: number = 0
-  export let direction: 'vertical' | 'horizontal' = 'vertical'
+  export let direction: 'vertical' | 'horizontal' | 'auto' = 'vertical'
   export let showDate: boolean = true
   export let withoutTime: boolean
   export let kind: ButtonBaseKind = 'tertiary'
@@ -44,8 +44,9 @@
   const dispatch = createEventDispatcher()
 
   $: currentDate = new Date(date)
+  let tib: TimeInputBox
 
-  function timeClick (e: MouseEvent) {
+  function timeClick (e: MouseEvent & { currentTarget: EventTarget & HTMLElement }) {
     if (!showDate) {
       showPopup(
         DatePopup,
@@ -58,7 +59,7 @@
           }
         }
       )
-    }
+    } else if (!disabled) tib.focused(e.offsetX <= e.currentTarget.clientWidth / 2 ? 'hour' : 'min')
   }
 
   function dateClick (e: MouseEvent) {
@@ -85,13 +86,17 @@
     {#if fixed === undefined}
       <div class="min-w-28">
         <ButtonBase type="type-button" {kind} {size} {disabled} {focusIndex} on:click={dateClick}>
-          <span class="overflow-label"><DateLocalePresenter date={currentDate.getTime()} {timeZone} /></span>
+          <span class="overflow-label tertiary-textColor">
+            <DateLocalePresenter date={currentDate.getTime()} {timeZone} />
+          </span>
         </ButtonBase>
       </div>
     {:else}
       <FixedColumn key={fixed + '-date'} addClass={'min-w-28'}>
         <ButtonBase type="type-button" {kind} {size} {disabled} {focusIndex} on:click={dateClick}>
-          <span class="overflow-label"><DateLocalePresenter date={currentDate.getTime()} {timeZone} /></span>
+          <span class="overflow-label tertiary-textColor">
+            <DateLocalePresenter date={currentDate.getTime()} {timeZone} />
+          </span>
         </ButtonBase>
       </FixedColumn>
     {/if}
@@ -103,15 +108,17 @@
 
   {#if !withoutTime}
     {#if fixed === undefined}
-      <ButtonBase
-        type="type-button"
-        {kind}
-        {size}
-        {disabled}
-        focusIndex={focusIndex !== -1 ? focusIndex + 1 : focusIndex}
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <div
+        class="hulyButton type-button tertiary small rectangle font-medium-14"
+        class:disabled
+        tabindex={focusIndex !== -1 ? focusIndex + 1 : focusIndex}
         on:click={timeClick}
       >
         <TimeInputBox
+          bind:this={tib}
           bind:currentDate
           {timeZone}
           noBorder
@@ -120,18 +127,20 @@
             updateTime(date.detail)
           }}
         />
-      </ButtonBase>
+      </div>
     {:else}
       <FixedColumn key={fixed + '-time'} addClass={'min-w-28'}>
-        <ButtonBase
-          type="type-button"
-          {kind}
-          {size}
-          {disabled}
-          focusIndex={focusIndex !== -1 ? focusIndex + 1 : focusIndex}
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <div
+          class="hulyButton type-button tertiary small rectangle font-medium-14"
+          class:disabled
+          tabindex={focusIndex !== -1 ? focusIndex + 1 : focusIndex}
           on:click={timeClick}
         >
           <TimeInputBox
+            bind:this={tib}
             bind:currentDate
             {timeZone}
             noBorder
@@ -140,7 +149,7 @@
               updateTime(date.detail)
             }}
           />
-        </ButtonBase>
+        </div>
       </FixedColumn>
     {/if}
   {/if}
@@ -162,9 +171,15 @@
 <style lang="scss">
   .dateEditor-container {
     display: flex;
-    flex-wrap: nowrap;
 
-    &.horizontal {
+    &:not(.auto) {
+      flex-wrap: nowrap;
+    }
+    &.auto {
+      flex-wrap: wrap;
+    }
+    &.horizontal,
+    &.auto {
       align-items: center;
     }
     &.vertical {

plugins/time-resources/src/components/Workslots.svelte

@@ -74,16 +74,15 @@
         on:change={(e) => change(e, slot)}
         on:dueChange={(e) => dueChange(e, slot)}
       />
-      <div class="tool flex-no-shrink">
-        <ButtonIcon
-          kind="tertiary"
-          size="small"
-          icon={IconDelete}
-          on:click={() => {
-            dispatch('remove', { _id: slot._id })
-          }}
-        />
-      </div>
+      <ButtonIcon
+        kind="tertiary"
+        size="small"
+        icon={IconDelete}
+        dataId={'btnDelete'}
+        on:click={() => {
+          dispatch('remove', { _id: slot._id })
+        }}
+      />
     </div>
   {/each}
 </Scroller>

tests/sanity/tests/model/planning/planning-page.ts

@@ -59,7 +59,7 @@ export class PlanningPage extends CalendarPage {
   readonly textPanelToDoDescription = (): Locator => this.panel().locator('div.top-content div.tiptap > p')
   readonly textPanelDueDate = (): Locator =>
     this.panel().locator(
-      'div.slots-content div.flex-row-top.justify-between div.flex-row-center button:first-child span'
+      'div.slots-content div.flex-row-top.justify-between div.flex-row-center .hulyButton:first-child span'
     )
 
   readonly textPanelPriority = (): Locator => this.panel().locator('button#priorityButton svg')
@@ -189,7 +189,7 @@ export class PlanningPage extends CalendarPage {
     const row = this.page.locator(p).nth(rowNumber)
 
     // dateStart
-    await row.locator('div.dateEditor-container:first-child > div.min-w-28:first-child button').click()
+    await row.locator('div.dateEditor-container:first-child > div.min-w-28:first-child .hulyButton').click()
     if (slot.dateStart === 'today') {
       await this.buttonCalendarToday().click()
     } else {
@@ -204,21 +204,17 @@ export class PlanningPage extends CalendarPage {
     // timeStart
     const hours = slot.timeStart.substring(0, 2)
     const minutes = slot.timeStart.substring(2, slot.timeStart.length)
+    await row.locator('div.dateEditor-container:nth-child(1) .hulyButton span.digit:first-child').focus()
     await row
-      .locator('div.dateEditor-container:nth-child(1) button:last-child span.digit:first-child')
-      .click({ delay: 200 })
-    await row
-      .locator('div.dateEditor-container:nth-child(1) button:last-child span.digit:first-child')
+      .locator('div.dateEditor-container:nth-child(1) .hulyButton span.digit:first-child')
       .pressSequentially(hours, { delay: 100 })
+    await row.locator('div.dateEditor-container:nth-child(1) .hulyButton span.digit:last-child').focus()
     await row
-      .locator('div.dateEditor-container:nth-child(1) button:last-child span.digit:last-child')
-      .click({ delay: 200 })
-    await row
-      .locator('div.dateEditor-container:nth-child(1) button:last-child span.digit:last-child')
+      .locator('div.dateEditor-container:nth-child(1) .hulyButton span.digit:last-child')
       .pressSequentially(minutes, { delay: 100 })
 
     // dateEnd + timeEnd
-    await row.locator('div.dateEditor-container.difference button').click()
+    await row.locator('div.dateEditor-container.difference .hulyButton').click()
     await this.fillSelectDatePopup(slot.dateEnd.day, slot.dateEnd.month, slot.dateEnd.year, slot.timeEnd)
   }
 
@@ -228,11 +224,13 @@ export class PlanningPage extends CalendarPage {
       : 'div.hulyModal-container div.slots-content div.scroller-container div.box div.flex-between.min-w-full'
     const row = this.page.locator(p).nth(rowNumber)
     // timeStart
-    await expect(row.locator('div.dateEditor-container:nth-child(1) button:last-child div.datetime-input')).toHaveText(
-      slot.timeStart
-    )
+    await expect(
+      row.locator('div.dateEditor-container:nth-child(1) .hulyButton:last-child div.datetime-input')
+    ).toHaveText(slot.timeStart)
     // timeEnd
-    await expect(row.locator('div.dateEditor-container.difference button > div:first-child')).toHaveText(slot.timeEnd)
+    await expect(row.locator('div.dateEditor-container.difference .hulyButton > div:first-child')).toHaveText(
+      slot.timeEnd
+    )
   }
 
   async openToDoByName (toDoName: string): Promise<void> {
@@ -304,11 +302,10 @@ export class PlanningPage extends CalendarPage {
   public async deleteTimeSlot (rowNumber: number): Promise<void> {
     const row = this.page
       .locator(
-        'div.hulyModal-container div.slots-content div.scroller-container div.box div.flex-between.min-w-full div.tool'
+        'div.hulyModal-container div.slots-content div.scroller-container div.box div.flex-between.min-w-full button[data-id="btnDelete"]'
       )
       .nth(rowNumber)
-    await row.locator('xpath=..').hover()
-    await row.locator('button').click()
+    await row.click()
     await this.pressYesDeletePopup(this.page)
   }
 
@@ -317,8 +314,8 @@ export class PlanningPage extends CalendarPage {
       .locator('div.hulyModal-container div.slots-content div.scroller-container div.box div.flex-between.min-w-full')
       .nth(rowNumber)
     // dateEnd
-    await expect(row.locator('div.dateEditor-container:first-child > div.min-w-28:first-child button')).toContainText(
-      dateEnd
-    )
+    await expect(
+      row.locator('div.dateEditor-container:first-child > div.min-w-28:first-child .hulyButton')
+    ).toContainText(dateEnd)
   }
 }