Skip to content

Commit

Permalink
fix(time-avaiable-picker): fix loader in loading propertie
Browse files Browse the repository at this point in the history
  • Loading branch information
@abalad
abalad committed Nov 21, 2019
1 parent ae4a03a commit 91ae33c
Show file tree
Hide file tree
Showing 5 changed files with 201 additions and 94 deletions.
10 changes: 4 additions & 6 deletions projects/truly-ui/src/components/time-available-picker/time-available-picker-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
$primary: map-deep-get($theme, 'primary');

border: 1px solid map-deep-get($theme, $action, "default", "border");

.ui-empty-data {
color: rgba(map-deep-get($theme, $action, "default", "foreground"), 0.5);
}
> .ui-time-header {
border-bottom: 1px solid map-deep-get($theme, $action, "default", "border");
background: map-deep-get($theme, $action, "default", "background");
Expand All @@ -19,11 +21,7 @@
}
}
}
.ui-empty-data {
color: rgba(map-deep-get($theme, $action, "default", "foreground"), 0.5);
}

.ui-time-content {
> .ui-time-content {
background: white;
> .ui-time-item {
color: map-deep-get($theme, $action, "default", "foreground");
Expand Down
44 changes: 19 additions & 25 deletions projects/truly-ui/src/components/time-available-picker/time-available-picker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,35 +9,29 @@
<span *ngIf="selectedTime.length === 1">{{ selectedTime[0]?.range.start | date: 'HH:mm' }} - {{ selectedTime[0]?.range.end | date: 'HH:mm' }}</span>
</div>
</div>
<div class="ui-time-content-wrapper" [style.maxHeight]="maxHeight">
<div *ngIf="!loading; else templateLoading">
<div class="ui-time-content" *ngIf="filterTimes.length > 0; else templateEmpty">
<div class="ui-time-item" *ngFor="let item of filterTimes; let i = index" >
<div (keydown.enter)="setSelectedTime(item, i)"
class="ui-range-wrapper"
(click)="setSelectedTime(item, i)"
[ngClass]="{ 'ui-selected': item.selected }"
tabindex="-1">
<span class="item-range">{{ item.range.start | date: 'HH:mm' }}</span>
</div>
</div>

<div class="ui-container" *ngIf="loading || filterTimes.length === 0" [style.minHeight]="maxHeight">
<div *ngIf="loading && filterTimes.length === 0" class="ui-loader-wrapper">
<div class="ui-loader">
<tl-loader></tl-loader>
</div>
</div>
</div>
</div>


<ng-template #templateLoading>
<div class="ui-loader-wrapper">
<div class="ui-loader">
<tl-loader></tl-loader>
<div *ngIf="!filterTimes || filterTimes.length === 0 && !loading" class="ui-empty-data">
<tl-icon [lib]="'ion'" [style]="'md'">sad</tl-icon>
<span>{{ notFoundMessage }}</span>
</div>
</div>
</ng-template>

<ng-template #templateEmpty>
<div class="ui-empty-data">
<tl-icon [lib]="'ion'" [style]="'md'">sad</tl-icon>
<span>{{ notFoundMessage }}</span>
<div *ngIf="filterTimes.length > 0" class="ui-time-content" [style.maxHeight]="maxHeight">
<div *ngFor="let item of filterTimes; let i = index" class="ui-time-item">
<div (keydown.enter)="setSelectedTime(item, i)"
class="ui-range-wrapper"
(click)="setSelectedTime(item, i)"
[ngClass]="{ 'ui-selected': item.selected }"
tabindex="-1">
<span class="item-range">{{ item.range.start | date: 'HH:mm' }}</span>
</div>
</div>
</div>
</ng-template>
</div>
120 changes: 58 additions & 62 deletions projects/truly-ui/src/components/time-available-picker/time-available-picker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,47 @@
}
}
}

> .ui-time-content {
display: grid;
grid-template-rows: repeat(auto-fill, 30px);
grid-template-columns: auto auto auto auto;
grid-auto-flow: row;
grid-gap: 4px;
position: relative;
padding: 4px;
overflow-y: auto;
overflow-x: hidden;
&::-webkit-scrollbar {
border-radius: 5px;
width: 5px;
}
> .ui-time-item {
display: flex;
align-items: center;
justify-content: center;
font-size: 1em;
font-family: "Segoe UI", Lato, 'sans-serif', "Arial";
height: 100%;
box-sizing: border-box;
.ui-range-wrapper {
display: flex;
padding: 0 5px;
transition: background 150ms ease-in-out;
border-radius: 3px;
cursor: pointer;
flex-flow: column;
align-items: center;
place-content: center;
width: 100%;
height: 100%;
outline: none;
border: 1px solid transparent;
box-sizing: border-box;
}
}
}

> .ui-time-footer {
height: 50px;
border-bottom-left-radius: 7px;
Expand All @@ -55,62 +96,32 @@
}
}


.ui-time-content-wrapper{
display: grid;
grid-template-rows: repeat(auto-fill, 30px);
grid-gap: 4px;
position: relative;
padding: 4px;
overflow-y: auto;
overflow-x: hidden;
}

.ui-time-content {
display: grid;
grid-template-rows: repeat(auto-fill, 30px);
grid-template-columns: auto auto auto auto;
grid-auto-flow: row;
grid-gap: 4px;
position: relative;
padding: 4px;
overflow-y: auto;
overflow-x: hidden;
&::-webkit-scrollbar {
border-radius: 5px;
width: 5px;
.ui-empty-data {
display: flex;
justify-content: center;
align-items: center;
height: 180px;
flex-direction: column;
line-height: 30px;
tl-icon {
font-size: 4em;
}
> .ui-time-item {
display: flex;
align-items: center;
justify-content: center;
font-size: 1em;
span {
font-family: "Segoe UI", Lato, 'sans-serif', "Arial";
height: 100%;
box-sizing: border-box;
.ui-range-wrapper {
display: flex;
padding: 0 5px;
transition: background 150ms ease-in-out;
border-radius: 3px;
cursor: pointer;
flex-flow: column;
align-items: center;
place-content: center;
width: 100%;
height: 100%;
outline: none;
border: 1px solid transparent;
box-sizing: border-box;
}
font-weight: 600;
}
}

.ui-container {
position: relative;
width: 100%;
}

.ui-loader-wrapper {
width: 100%;
height: 100%;
position: absolute;
display: flex;
position: absolute;
align-items: center;
place-content: center;
> .ui-loader {
Expand All @@ -119,21 +130,6 @@
}
}

.ui-empty-data {
display: flex;
justify-content: center;
align-items: center;
height: 170px;
flex-direction: column;
line-height: 30px;
tl-icon {
font-size: 4em;
}
span {
font-family: "Segoe UI", Lato, 'sans-serif', "Arial";
font-weight: 600;
}
}

@-webkit-keyframes shadow-drop-bottom {
0% {
Expand Down
3 changes: 2 additions & 1 deletion src/app/components/time-available-picker/time-available-pickerdemo.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ <h6>Basic</h6>
</div>
<div class="col-md-6">
<h6>Pre-Selected Value</h6>
<tl-time-available-picker [value]="value" [availableTimes]="data"></tl-time-available-picker>
<tl-time-available-picker [loading]="loading" [value]="value" [availableTimes]="[]"></tl-time-available-picker>

<br>
<div class="spacer"></div>
<textarea highlight-js [options]="{'tabReplace': ''}" [lang]="'html'">
Expand Down
118 changes: 118 additions & 0 deletions src/app/components/time-available-picker/time-available-pickerdemo.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ export class TimeAvailablePickerDemoComponent {

public dataEvents;

public loading = true;

public data = [
{
start: new Date( 1999, 1, 1, 8, 0 ),
Expand Down Expand Up @@ -64,6 +66,118 @@ export class TimeAvailablePickerDemoComponent {
start: new Date( 1999, 1, 1, 11, 0 ),
end: new Date( 1999, 1, 1, 11, 30 ),
},
{
start: new Date( 1999, 1, 1, 8, 30 ),
end: new Date( 1999, 1, 1, 9, 0 ),
},
{
start: new Date( 1999, 1, 1, 9, 0 ),
end: new Date( 1999, 1, 1, 9, 30 ),
},
{
start: new Date( 1999, 1, 1, 9, 30 ),
end: new Date( 1999, 1, 1, 10, 0 ),
},
{
start: new Date( 1999, 1, 1, 10, 0 ),
end: new Date( 1999, 1, 1, 10, 30 ),
},
{
start: new Date( 1999, 1, 1, 10, 30 ),
end: new Date( 1999, 1, 1, 11, 0 ),
},
{
start: new Date( 1999, 1, 1, 11, 0 ),
end: new Date( 1999, 1, 1, 11, 30 ),
},
{
start: new Date( 1999, 1, 1, 8, 30 ),
end: new Date( 1999, 1, 1, 9, 0 ),
},
{
start: new Date( 1999, 1, 1, 9, 0 ),
end: new Date( 1999, 1, 1, 9, 30 ),
},
{
start: new Date( 1999, 1, 1, 9, 30 ),
end: new Date( 1999, 1, 1, 10, 0 ),
},
{
start: new Date( 1999, 1, 1, 10, 0 ),
end: new Date( 1999, 1, 1, 10, 30 ),
},
{
start: new Date( 1999, 1, 1, 10, 30 ),
end: new Date( 1999, 1, 1, 11, 0 ),
},
{
start: new Date( 1999, 1, 1, 11, 0 ),
end: new Date( 1999, 1, 1, 11, 30 ),
},
{
start: new Date( 1999, 1, 1, 8, 30 ),
end: new Date( 1999, 1, 1, 9, 0 ),
},
{
start: new Date( 1999, 1, 1, 9, 30 ),
end: new Date( 1999, 1, 1, 10, 0 ),
},
{
start: new Date( 1999, 1, 1, 10, 0 ),
end: new Date( 1999, 1, 1, 10, 30 ),
},
{
start: new Date( 1999, 1, 1, 10, 30 ),
end: new Date( 1999, 1, 1, 11, 0 ),
},
{
start: new Date( 1999, 1, 1, 11, 0 ),
end: new Date( 1999, 1, 1, 11, 30 ),
},
{
start: new Date( 1999, 1, 1, 8, 30 ),
end: new Date( 1999, 1, 1, 9, 0 ),
},
{
start: new Date( 1999, 1, 1, 9, 30 ),
end: new Date( 1999, 1, 1, 10, 0 ),
},
{
start: new Date( 1999, 1, 1, 10, 0 ),
end: new Date( 1999, 1, 1, 10, 30 ),
},
{
start: new Date( 1999, 1, 1, 10, 30 ),
end: new Date( 1999, 1, 1, 11, 0 ),
},
{
start: new Date( 1999, 1, 1, 11, 0 ),
end: new Date( 1999, 1, 1, 11, 30 ),
},
{
start: new Date( 1999, 1, 1, 8, 30 ),
end: new Date( 1999, 1, 1, 9, 0 ),
},
{
start: new Date( 1999, 1, 1, 9, 30 ),
end: new Date( 1999, 1, 1, 10, 0 ),
},
{
start: new Date( 1999, 1, 1, 10, 0 ),
end: new Date( 1999, 1, 1, 10, 30 ),
},
{
start: new Date( 1999, 1, 1, 10, 30 ),
end: new Date( 1999, 1, 1, 11, 0 ),
},
{
start: new Date( 1999, 1, 1, 11, 0 ),
end: new Date( 1999, 1, 1, 11, 30 ),
},
{
start: new Date( 1999, 1, 1, 8, 30 ),
end: new Date( 1999, 1, 1, 9, 0 ),
},
];

public value = [
Expand All @@ -80,6 +194,10 @@ export class TimeAvailablePickerDemoComponent {
constructor() {
this.dataTableProperties = json.dataProperties;
this.dataEvents = jsonEvts.dataEvents;

setTimeout(() => {
this.loading = false;
}, 3000);
}

onChangeSelect($event) {
Expand Down

0 comments on commit 91ae33c

Please sign in to comment.