mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-22 11:01:54 +03:00
Planner: fixed DateEditor layout (#6696)
This commit is contained in:
Alexander Platov
GitHub
parent
1ddf1fe4b0
commit
3662f1f8ee
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -153,7 +153,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
const focused = (ed: TEdits): void => {
|
||||
export const focused = (ed: TEdits): void => {
|
||||
selected = ed
|
||||
startTyping = true
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -74,17 +74,16 @@
|
||||
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}
|
||||
dataId={'btnDelete'}
|
||||
on:click={() => {
|
||||
dispatch('remove', { _id: slot._id })
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</Scroller>
|
||||
<div class="flex-row-center flex-gap-4">
|
||||
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user