From 40e2c59b1e03c148edea2995076722b52fbb423a Mon Sep 17 00:00:00 2001 From: William Aguera Date: Fri, 22 Mar 2019 15:17:50 -0300 Subject: [PATCH 001/109] refact(calendar): add radius on selected cells. --- .../truly-ui/src/components/calendar/calendar-theme.scss | 7 +++++-- projects/truly-ui/src/components/calendar/calendar.scss | 1 + 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/projects/truly-ui/src/components/calendar/calendar-theme.scss b/projects/truly-ui/src/components/calendar/calendar-theme.scss index 76d881112..c6cf3b9a4 100644 --- a/projects/truly-ui/src/components/calendar/calendar-theme.scss +++ b/projects/truly-ui/src/components/calendar/calendar-theme.scss @@ -50,7 +50,8 @@ color: map-deep-get($danger, "default", "background"); } &:hover:not(.ui-table-cell-empty) { - outline: 1px solid map-deep-get($basic, "default", "border"); + border: 1px solid map-deep-get($basic, "default", "border") !important; + border-radius: 20%; } } } @@ -59,12 +60,14 @@ } & .navigator { - outline: 2px solid map-deep-get($basic, "default", "border"); + border: 1px solid map-deep-get($basic, "default", "border") !important; + border-radius: 20%; } & .selected { background-color: map-deep-get($primary, "default", "background"); color: map-deep-get($primary, "default", "foreground") !important; + border-radius: 20%; } } } diff --git a/projects/truly-ui/src/components/calendar/calendar.scss b/projects/truly-ui/src/components/calendar/calendar.scss index 6387d11df..c83d5e034 100644 --- a/projects/truly-ui/src/components/calendar/calendar.scss +++ b/projects/truly-ui/src/components/calendar/calendar.scss @@ -79,6 +79,7 @@ user-select: none; animation-name: creating; animation-duration: 200ms; + border: 1px solid transparent; &:hover { cursor: pointer; } From 546a6d468b5cc99c40a0ca3c11232cd56b5b9834 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Mon, 25 Mar 2019 10:35:02 -0300 Subject: [PATCH 002/109] refact(time-available-picker): add maxHeight property and refact design. --- .../time-available-picker-theme.scss | 3 ++ .../time-available-picker.html | 8 ++--- .../time-available-picker.scss | 35 +++++++++++++++---- .../time-available-picker.ts | 20 ++++++----- 4 files changed, 46 insertions(+), 20 deletions(-) diff --git a/projects/truly-ui/src/components/time-available-picker/time-available-picker-theme.scss b/projects/truly-ui/src/components/time-available-picker/time-available-picker-theme.scss index 581e977ae..4e8d21b8b 100644 --- a/projects/truly-ui/src/components/time-available-picker/time-available-picker-theme.scss +++ b/projects/truly-ui/src/components/time-available-picker/time-available-picker-theme.scss @@ -34,6 +34,9 @@ color: white; } } + &::-webkit-scrollbar-thumb { + background: map-deep-get($primary, "default", "background"); + } } > .ui-time-footer { border-top: 1px solid map-deep-get($theme, $action, "default", "border"); diff --git a/projects/truly-ui/src/components/time-available-picker/time-available-picker.html b/projects/truly-ui/src/components/time-available-picker/time-available-picker.html index 3e0bcdb8e..ae895a888 100644 --- a/projects/truly-ui/src/components/time-available-picker/time-available-picker.html +++ b/projects/truly-ui/src/components/time-available-picker/time-available-picker.html @@ -1,4 +1,4 @@ -
+
{{ dateValue | date:'dd' }} @@ -13,16 +13,14 @@ sad Nothing Found !
-
+
- {{ item.range.start | date: 'HH:mm' }} - - {{ item.range.end | date: 'HH:mm' }} + {{ item.range.start | date: 'HH:mm' }}
diff --git a/projects/truly-ui/src/components/time-available-picker/time-available-picker.scss b/projects/truly-ui/src/components/time-available-picker/time-available-picker.scss index 8eef44f3c..84f684bfa 100644 --- a/projects/truly-ui/src/components/time-available-picker/time-available-picker.scss +++ b/projects/truly-ui/src/components/time-available-picker/time-available-picker.scss @@ -29,7 +29,9 @@ font-weight: bold; } > .ui-day-week { - font-size: 0.8em; + font-size: 0.9em; + font-variant: all-petite-caps; + font-weight: bold; } } > .ui-time-selected { @@ -44,28 +46,49 @@ } } > .ui-time-content { - min-height: 180px; display: grid; - grid-template-rows: repeat(auto-fill, 50px); + grid-template-rows: repeat(auto-fill, 30px); + grid-template-columns: auto auto auto auto; grid-auto-flow: row; grid-gap: 4px; position: relative; - place-content: center; + padding: 4px; + overflow-y: auto; + overflow-x: hidden; + &::-webkit-scrollbar { + border-radius: 5px; + width: 5px; + } + &::-webkit-scrollbar-corner { + background: #fff + } + + &::-webkit-scrollbar-track { + background: #fff + } + > .ui-time-item { display: flex; align-items: center; justify-content: center; font-size: 1em; font-family: "Segoe UI", Lato, 'sans-serif', "Arial"; - height: 50px; + height: 100%; + box-sizing: border-box; .ui-range-wrapper { display: flex; - padding: 5px 10px; + 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; } } } diff --git a/projects/truly-ui/src/components/time-available-picker/time-available-picker.ts b/projects/truly-ui/src/components/time-available-picker/time-available-picker.ts index 1a47b1576..97bb84f2a 100644 --- a/projects/truly-ui/src/components/time-available-picker/time-available-picker.ts +++ b/projects/truly-ui/src/components/time-available-picker/time-available-picker.ts @@ -45,7 +45,9 @@ export class TlTimeAvailablePicker implements AfterViewInit, OnChanges { @Input() color = 'basic'; - @Input() width = 300; + @Input() maxHeight = '180px'; + + @Input() width = '260px'; @Input() dateValue: Date = new Date(); @@ -83,8 +85,8 @@ export class TlTimeAvailablePicker implements AfterViewInit, OnChanges { private getDateOnFilter( date: DateRange ) { return this.filterTimes.findIndex( ( item: FilterTime ) => - (item.range.start.getTime() === date.start.getTime()) && - (item.range.end.getTime() === date.end.getTime()) + (new Date(item.range.start).getTime() === new Date(date.start).getTime()) && + (new Date(item.range.end).getTime() === new Date(date.end).getTime()) ); } @@ -117,8 +119,12 @@ export class TlTimeAvailablePicker implements AfterViewInit, OnChanges { this.handleDeselect( time ); return; } + if ( readySelected < 0 ) { + time.selected = !time.selected; + return; + } time.selected = !time.selected; - this.selectMany( time, readySelected, index ); + this.selectMany( readySelected, index ); } @@ -130,12 +136,8 @@ export class TlTimeAvailablePicker implements AfterViewInit, OnChanges { return index === this.filterTimes.length - 1 ? index : index + 1; } - private selectMany( time: FilterTime, readySelected: number, index: number ) { + private selectMany( readySelected: number, index: number ) { this.filterTimes.forEach( ( value, index2, array ) => { - if ( readySelected < 0 ) { - time.selected = !time.selected; - return; - } if ( index2 > readySelected && index2 <= index ) { value.selected = true; } From 2256c0634e1ff0d42159c71ded932dd0663faf42 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Mon, 25 Mar 2019 10:36:14 -0300 Subject: [PATCH 003/109] docs(time-available-picker): update docs. --- .../time-available-pickerdemo.component.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/app/components/time-available-picker/time-available-pickerdemo.component.ts b/src/app/components/time-available-picker/time-available-pickerdemo.component.ts index 6bc77794f..c210d2234 100644 --- a/src/app/components/time-available-picker/time-available-pickerdemo.component.ts +++ b/src/app/components/time-available-picker/time-available-pickerdemo.component.ts @@ -68,8 +68,12 @@ export class TimeAvailablePickerDemoComponent { public value = [ { - start: new Date( 1999, 1, 1, 11, 0 ), - end: new Date( 1999, 1, 1, 11, 30 ), + 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 ), }, ]; From 26895403572da1d9df4fbe0921429ec4b569ab79 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Mon, 25 Mar 2019 14:02:05 -0300 Subject: [PATCH 004/109] feat(i18n): add support to time available picker. --- .../src/components/i18n/i18n.interface.ts | 2 ++ .../src/components/i18n/languages/en_US.ts | 4 ++- .../src/components/i18n/languages/pt_BR.ts | 4 ++- .../languages/time-available-picker/en_US.ts | 25 +++++++++++++++++++ .../languages/time-available-picker/index.ts | 25 +++++++++++++++++++ .../languages/time-available-picker/pt_BR.ts | 25 +++++++++++++++++++ 6 files changed, 83 insertions(+), 2 deletions(-) create mode 100644 projects/truly-ui/src/components/i18n/languages/time-available-picker/en_US.ts create mode 100644 projects/truly-ui/src/components/i18n/languages/time-available-picker/index.ts create mode 100644 projects/truly-ui/src/components/i18n/languages/time-available-picker/pt_BR.ts diff --git a/projects/truly-ui/src/components/i18n/i18n.interface.ts b/projects/truly-ui/src/components/i18n/i18n.interface.ts index 4cf09016b..b67fafe8a 100644 --- a/projects/truly-ui/src/components/i18n/i18n.interface.ts +++ b/projects/truly-ui/src/components/i18n/i18n.interface.ts @@ -11,6 +11,7 @@ import { EditorI18nInterface } from './languages/editor/index'; import { PermissionsI18nInterface } from './languages/permissions/index'; import { TimePickerI18nInterface } from './languages/timepicker/index'; import { AutoCompleteI18nInterface } from './languages/autocomplete/index'; +import { TimeAvailablePickerI18nInterface } from './languages/time-available-picker/index'; export interface I18nInterface { locale: string; @@ -26,5 +27,6 @@ export interface I18nInterface { Validators: ValidatorsI18nInterface; Permissions: PermissionsI18nInterface; TimePicker: TimePickerI18nInterface; + TimeAvailablePicker: TimeAvailablePickerI18nInterface; AutoComplete: AutoCompleteI18nInterface; } diff --git a/projects/truly-ui/src/components/i18n/languages/en_US.ts b/projects/truly-ui/src/components/i18n/languages/en_US.ts index 73a12d2d3..d14216a3c 100644 --- a/projects/truly-ui/src/components/i18n/languages/en_US.ts +++ b/projects/truly-ui/src/components/i18n/languages/en_US.ts @@ -32,6 +32,7 @@ import { Editor } from './editor/en_US'; import { Permissions } from './permissions/en_US'; import { TimePicker } from './timepicker/en_US'; import { AutoComplete } from './autocomplete/en_US'; +import { TimeAvailablePicker } from './time-available-picker/en_US'; export const en_US = { locale: 'en-US', @@ -47,5 +48,6 @@ export const en_US = { Validators, OverlayList, Permissions, - TimePicker + TimePicker, + TimeAvailablePicker }; diff --git a/projects/truly-ui/src/components/i18n/languages/pt_BR.ts b/projects/truly-ui/src/components/i18n/languages/pt_BR.ts index c9afd73ac..0258342f5 100644 --- a/projects/truly-ui/src/components/i18n/languages/pt_BR.ts +++ b/projects/truly-ui/src/components/i18n/languages/pt_BR.ts @@ -32,6 +32,7 @@ import { Editor } from './editor/pt_BR'; import { Permissions } from './permissions/pt_BR'; import { TimePicker } from './timepicker/pt_BR'; import { AutoComplete } from './autocomplete/pt_BR'; +import { TimeAvailablePicker } from './time-available-picker/pt_BR'; export const pt_BR = { locale: 'pt-BR', @@ -47,5 +48,6 @@ export const pt_BR = { Validators, OverlayList, Permissions, - TimePicker + TimePicker, + TimeAvailablePicker }; diff --git a/projects/truly-ui/src/components/i18n/languages/time-available-picker/en_US.ts b/projects/truly-ui/src/components/i18n/languages/time-available-picker/en_US.ts new file mode 100644 index 000000000..be2e91b06 --- /dev/null +++ b/projects/truly-ui/src/components/i18n/languages/time-available-picker/en_US.ts @@ -0,0 +1,25 @@ +/* + MIT License + + Copyright (c) 2019 Temainfo Sistemas + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. +*/ + +export const TimeAvailablePicker = { + notFound: 'Nothing to show' +}; diff --git a/projects/truly-ui/src/components/i18n/languages/time-available-picker/index.ts b/projects/truly-ui/src/components/i18n/languages/time-available-picker/index.ts new file mode 100644 index 000000000..710c4c86b --- /dev/null +++ b/projects/truly-ui/src/components/i18n/languages/time-available-picker/index.ts @@ -0,0 +1,25 @@ +/* + MIT License + + Copyright (c) 2019 Temainfo Sistemas + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. +*/ + +export interface TimeAvailablePickerI18nInterface { + notFound: string; +} diff --git a/projects/truly-ui/src/components/i18n/languages/time-available-picker/pt_BR.ts b/projects/truly-ui/src/components/i18n/languages/time-available-picker/pt_BR.ts new file mode 100644 index 000000000..a42541303 --- /dev/null +++ b/projects/truly-ui/src/components/i18n/languages/time-available-picker/pt_BR.ts @@ -0,0 +1,25 @@ +/* + MIT License + + Copyright (c) 2019 Temainfo Sistemas + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. +*/ + +export const TimeAvailablePicker = { + notFound: 'Nada Encontrado' +}; From 0ad4955d00501387f6a5456c0039eb6ec59867ce Mon Sep 17 00:00:00 2001 From: William Aguera Date: Mon, 25 Mar 2019 14:06:29 -0300 Subject: [PATCH 005/109] feat(time-available-picker): add loading when component it's waiting for the data. --- .../components/time-available-picker/index.ts | 4 ++- .../time-available-picker-theme.scss | 27 +++++++++++++------ .../time-available-picker.html | 7 ++++- .../time-available-picker.scss | 22 +++++++++------ .../time-available-picker.ts | 8 +++++- 5 files changed, 49 insertions(+), 19 deletions(-) diff --git a/projects/truly-ui/src/components/time-available-picker/index.ts b/projects/truly-ui/src/components/time-available-picker/index.ts index a99eb2439..4a6d9c199 100644 --- a/projects/truly-ui/src/components/time-available-picker/index.ts +++ b/projects/truly-ui/src/components/time-available-picker/index.ts @@ -6,6 +6,7 @@ import { TlTimeAvailablePicker } from './time-available-picker'; import { ButtonModule } from '../button/index'; import { MiscModule } from '../misc/index'; import { IconsModule } from '../icons/index'; +import { LoaderModule } from '../loader/index'; @NgModule({ imports: [ @@ -13,7 +14,8 @@ import { IconsModule } from '../icons/index'; FormsModule, ButtonModule, MiscModule, - IconsModule + IconsModule, + LoaderModule ], declarations: [ TlTimeAvailablePicker diff --git a/projects/truly-ui/src/components/time-available-picker/time-available-picker-theme.scss b/projects/truly-ui/src/components/time-available-picker/time-available-picker-theme.scss index 4e8d21b8b..b8dd13990 100644 --- a/projects/truly-ui/src/components/time-available-picker/time-available-picker-theme.scss +++ b/projects/truly-ui/src/components/time-available-picker/time-available-picker-theme.scss @@ -1,6 +1,6 @@ @import "../core/styles/theming/theming"; -@mixin _tl-time-available-picker-theme-schema( $theme, $action ){ +@mixin _tl-time-available-picker-theme-schema( $theme, $action ) { $primary: map-deep-get($theme, 'primary'); @@ -14,13 +14,13 @@ } > .ui-time-selected { span { - background: linear-gradient(45deg, map-deep-get($primary, "lighter", "background") - 0%, map-deep-get($primary, "darker", "background") 100%); - color: white; + background: linear-gradient(45deg, map-deep-get($primary, "lighter", "background") 0%, map-deep-get($primary, "darker", "background") 100%); + color: map-deep-get($theme, $action, "lighter", "background"); } } } > .ui-time-content { + background: linear-gradient(45deg, map-deep-get($theme, $action, "lighter", "background")); > .ui-time-item { color: map-deep-get($theme, $action, "default", "foreground"); .ui-range-wrapper { @@ -29,14 +29,25 @@ } } > .ui-selected { - background: linear-gradient(45deg, map-deep-get($primary, "lighter", "background") - 0%, map-deep-get($primary, "darker", "background") 100%); - color: white; + background: linear-gradient(45deg, map-deep-get($primary, "lighter", "background") 0%, map-deep-get($primary, "darker", "background") 100%); + color: map-deep-get($theme, $action, "lighter", "background") } } &::-webkit-scrollbar-thumb { background: map-deep-get($primary, "default", "background"); } + &::-webkit-scrollbar-corner { + background: map-deep-get($theme, $action, "lighter", "background"); + } + + &::-webkit-scrollbar-track { + background: map-deep-get($theme, $action, "lighter", "background"); + } + + > .ui-loader-wrapper { + background: map-deep-get($theme, $action, "lighter", "background"); + } + } > .ui-time-footer { border-top: 1px solid map-deep-get($theme, $action, "default", "border"); @@ -47,7 +58,7 @@ @mixin tl-time-available-picker-theme( $theme ) { - .ui-time-available-picker { + .ui-time-available-picker { &.basic { @include _tl-time-available-picker-theme-schema($theme, 'basic') } diff --git a/projects/truly-ui/src/components/time-available-picker/time-available-picker.html b/projects/truly-ui/src/components/time-available-picker/time-available-picker.html index ae895a888..8ec57aa47 100644 --- a/projects/truly-ui/src/components/time-available-picker/time-available-picker.html +++ b/projects/truly-ui/src/components/time-available-picker/time-available-picker.html @@ -11,9 +11,14 @@
sad - Nothing Found ! + {{ notFoundMessage }}
+
+
+ +
+
.ui-time-item { display: flex; align-items: center; @@ -91,6 +83,20 @@ box-sizing: border-box; } } + + > .ui-loader-wrapper { + width: 100%; + height: 100%; + position: absolute; + display: flex; + align-items: center; + place-content: center; + > .ui-loader { + width: 50px; + height: 50px; + } + } + } > .ui-time-footer { height: 50px; diff --git a/projects/truly-ui/src/components/time-available-picker/time-available-picker.ts b/projects/truly-ui/src/components/time-available-picker/time-available-picker.ts index 97bb84f2a..d4239e5e9 100644 --- a/projects/truly-ui/src/components/time-available-picker/time-available-picker.ts +++ b/projects/truly-ui/src/components/time-available-picker/time-available-picker.ts @@ -23,6 +23,7 @@ import { Input, Component, Output, AfterViewInit, EventEmitter, ChangeDetectorRef, SimpleChanges, OnChanges } from '@angular/core'; +import { I18nService } from '../i18n/i18n.service'; export interface FilterTime { range: DateRange; @@ -45,6 +46,8 @@ export class TlTimeAvailablePicker implements AfterViewInit, OnChanges { @Input() color = 'basic'; + @Input() loading = true; + @Input() maxHeight = '180px'; @Input() width = '260px'; @@ -59,7 +62,9 @@ export class TlTimeAvailablePicker implements AfterViewInit, OnChanges { public selectedTime: Array = []; - constructor( private change: ChangeDetectorRef ) {} + public notFoundMessage = this.i18nService.getLocale().TimeAvailablePicker.notFound; + + constructor( private change: ChangeDetectorRef, private i18nService: I18nService ) {} ngAfterViewInit() { this.handleValueChange(); @@ -69,6 +74,7 @@ export class TlTimeAvailablePicker implements AfterViewInit, OnChanges { this.availableTimes.forEach( ( value ) => { this.filterTimes.push( { range: value, selected: false } ); } ); + this.loading = false; } private handleValueChange() { From 72be87518526c134270f8a531628532295bffb82 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Mon, 25 Mar 2019 14:23:52 -0300 Subject: [PATCH 006/109] fix(input): fix input not propagating on blur. --- projects/truly-ui/src/components/input/input.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/truly-ui/src/components/input/input.ts b/projects/truly-ui/src/components/input/input.ts index bde398f1a..a363f2341 100644 --- a/projects/truly-ui/src/components/input/input.ts +++ b/projects/truly-ui/src/components/input/input.ts @@ -232,6 +232,7 @@ export class TlInput extends ValueAccessorBase implements OnInit, AfterV onInputBlur( $event ) { this.isShowingMessages = false; this.blur.emit( $event ); + this.propagateTouched(); } clearInput( $event? ) { From 4d24515de4ad7380dcf2b0ae8515fa4a99ea2759 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Mon, 25 Mar 2019 14:31:40 -0300 Subject: [PATCH 007/109] fix(date): fix input date not propagating on blur. --- projects/truly-ui/src/components/date/date.html | 5 +++-- projects/truly-ui/src/components/date/date.ts | 7 +++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/projects/truly-ui/src/components/date/date.html b/projects/truly-ui/src/components/date/date.html index f2efca913..49b0d3590 100644 --- a/projects/truly-ui/src/components/date/date.html +++ b/projects/truly-ui/src/components/date/date.html @@ -16,8 +16,9 @@ }" [attr.disabled]="disabled ? true : null" [attr.readonly]="readonly ? true : null" - (focusout)="focusOut()" + (blur)="focusOut()" [attr.value]="mockValue"> - +
diff --git a/projects/truly-ui/src/components/date/date.ts b/projects/truly-ui/src/components/date/date.ts index 7bc78ce2e..1c3eb86c4 100644 --- a/projects/truly-ui/src/components/date/date.ts +++ b/projects/truly-ui/src/components/date/date.ts @@ -150,6 +150,7 @@ export class TlDate extends ValueAccessorBase implements OnInit, AfterVi const date = ReverseFormatDate( this.value, this.formatDate ); this.value = new Date( date.year, date.month - 1, date.day ).toISOString(); } + this.propagateTouched(); }, 100 ); } @@ -178,4 +179,10 @@ export class TlDate extends ValueAccessorBase implements OnInit, AfterVi this.change.detectChanges(); } + onBlur() { + setTimeout(() => { + this.propagateTouched(); + }, 100); + } + } From 0f95afbbf0137188b6bb28d709941cc064144851 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Mon, 25 Mar 2019 15:27:44 -0300 Subject: [PATCH 008/109] fix(time-available-picker): fix time available picker pushing content after first change. --- .../components/time-available-picker/time-available-picker.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/truly-ui/src/components/time-available-picker/time-available-picker.ts b/projects/truly-ui/src/components/time-available-picker/time-available-picker.ts index d4239e5e9..746f3b2b4 100644 --- a/projects/truly-ui/src/components/time-available-picker/time-available-picker.ts +++ b/projects/truly-ui/src/components/time-available-picker/time-available-picker.ts @@ -71,6 +71,7 @@ export class TlTimeAvailablePicker implements AfterViewInit, OnChanges { } private setUpData() { + this.filterTimes = []; this.availableTimes.forEach( ( value ) => { this.filterTimes.push( { range: value, selected: false } ); } ); From 55902031b4aebbc5373e2be0b9807f0c1a35c83e Mon Sep 17 00:00:00 2001 From: William Aguera Date: Mon, 25 Mar 2019 17:22:32 -0300 Subject: [PATCH 009/109] refact(menu): add listen change of routes to toggle router link active class. --- projects/truly-ui/src/components/menu/menu.ts | 34 ++++++++++++++----- 1 file changed, 26 insertions(+), 8 deletions(-) diff --git a/projects/truly-ui/src/components/menu/menu.ts b/projects/truly-ui/src/components/menu/menu.ts index db301f586..150c19c85 100644 --- a/projects/truly-ui/src/components/menu/menu.ts +++ b/projects/truly-ui/src/components/menu/menu.ts @@ -25,6 +25,7 @@ import { } from '@angular/core'; import { Router } from '@angular/router'; import { SubMenuService } from './services/submenu.service'; +import { Subscription } from 'rxjs'; @Component( { selector: 'tl-menu', @@ -84,10 +85,14 @@ export class TlMenu implements AfterContentInit, OnChanges, OnDestroy { private iconSubElement; + private elements = []; + private indexSubMenu = 0; private callBack = Function(); + private subscription = new Subscription(); + constructor( private renderer: Renderer2, private router: Router, private subMenuService: SubMenuService, @@ -98,6 +103,17 @@ export class TlMenu implements AfterContentInit, OnChanges, OnDestroy { this.initializeMenu(); this.listenWindowResize(); this.listenDocumentClick(); + this.listenRouteChange(); + } + + + listenRouteChange() { + this.subscription.add(this.router.events.subscribe(() => { + this.elements.forEach((value, index, array) => { + this.isRouterActive(value.item) ? this.renderer.addClass( value.element, 'router-active') : + this.renderer.removeClass(value.element, 'router-active'); + }); + })); } createList() { @@ -172,12 +188,13 @@ export class TlMenu implements AfterContentInit, OnChanges, OnDestroy { } this.listenClickElementList( item ); this.setStyleListElement(); + this.elements.push({ item: item, element: this.listElement.nativeElement }); } listenDocumentClick() { - this.renderer.listen( document, 'click', ( $event ) => { + this.subscription.add(this.renderer.listen( document, 'click', ( $event ) => { this.subMenuService.closeMenu(); - } ); + } )); } isRouterActive(item) { @@ -185,7 +202,7 @@ export class TlMenu implements AfterContentInit, OnChanges, OnDestroy { } listenClickElementList( item ) { - this.renderer.listen( this.listElement.nativeElement, 'click', ( MouseEvent ) => { + this.subscription.add(this.renderer.listen( this.listElement.nativeElement, 'click', ( MouseEvent ) => { if ( item[ this.link ] ) { this.router.navigate( [ item[ this.link ] ] ); this.subMenuService.closeMenu(); @@ -196,7 +213,7 @@ export class TlMenu implements AfterContentInit, OnChanges, OnDestroy { this.callBack( MouseEvent ); this.subMenuService.closeMenu(); } - } ); + } )); } setStyleListElement() { @@ -228,19 +245,19 @@ export class TlMenu implements AfterContentInit, OnChanges, OnDestroy { } listenWindowResize() { - this.renderer.listen( window, 'resize', () => { + this.subscription.add(this.renderer.listen( window, 'resize', () => { this.subMenuService.setRootHeightChange( this.maxHeight ); - } ); + } )); } listenClickListElement() { if ( this.mode === 'advanced' ) { - this.renderer.listen( this.listElement.nativeElement, 'click', ( $event ) => { + this.subscription.add(this.renderer.listen( this.listElement.nativeElement, 'click', ( $event ) => { if ( this.isTargetOnListElement( $event ) ) { this.subMenuService.getListComponents()[ 0 ].instance.toggleVisibility(); this.handleVisibilitySubMenu(); } - } ); + } )); } } @@ -327,6 +344,7 @@ export class TlMenu implements AfterContentInit, OnChanges, OnDestroy { } ngOnDestroy() { + this.subscription.unsubscribe(); } } From 566e316588d1ee25ce58d1aa0f1079e0965ae299 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Mon, 25 Mar 2019 17:41:41 -0300 Subject: [PATCH 010/109] fix(dropdownlist): fix dropdown not selecting item when component construct with value. --- .../src/components/dropdownlist/dropdownlist.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/projects/truly-ui/src/components/dropdownlist/dropdownlist.ts b/projects/truly-ui/src/components/dropdownlist/dropdownlist.ts index 1c785e699..dfa329944 100644 --- a/projects/truly-ui/src/components/dropdownlist/dropdownlist.ts +++ b/projects/truly-ui/src/components/dropdownlist/dropdownlist.ts @@ -28,14 +28,12 @@ import { Optional, ContentChild, ViewChild, - ElementRef, OnChanges, EventEmitter + ElementRef, OnChanges, EventEmitter, AfterContentInit } from '@angular/core'; import * as objectPath from 'object-path'; -import { debounceTime } from 'rxjs/internal/operators'; import { MakeProvider } from '../core/base/value-accessor-provider'; -import { Subject } from 'rxjs'; import { ElementBase } from '../input/core/element-base'; import { FormControlName, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgModel, } from '@angular/forms'; import { OverlayAnimation } from '../core/directives/overlay-animation'; @@ -53,7 +51,7 @@ import { TlListItem } from '../overlaylist/list-item/list-item'; [ MakeProvider( TlDropDownList ) ] ] } ) -export class TlDropDownList extends ElementBase implements OnChanges, AfterViewInit { +export class TlDropDownList extends ElementBase implements OnChanges, AfterContentInit, AfterViewInit { @Input( 'data' ) data: any[] = []; @@ -120,6 +118,10 @@ export class TlDropDownList extends ElementBase implements OnChanges, Af this.setOptions( dropdownConfig ); } + ngAfterContentInit() { + this.getModelValue(); + } + ngAfterViewInit() { this.listenModelChange(); } From b42376fc4ee609af4207f379b4b661026ddd4236 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Mon, 25 Mar 2019 17:58:01 -0300 Subject: [PATCH 011/109] fix(time-available-picker): fix selection with one time not emitting the values. --- .../components/time-available-picker/time-available-picker.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/truly-ui/src/components/time-available-picker/time-available-picker.ts b/projects/truly-ui/src/components/time-available-picker/time-available-picker.ts index 746f3b2b4..1b0237786 100644 --- a/projects/truly-ui/src/components/time-available-picker/time-available-picker.ts +++ b/projects/truly-ui/src/components/time-available-picker/time-available-picker.ts @@ -128,6 +128,7 @@ export class TlTimeAvailablePicker implements AfterViewInit, OnChanges { } if ( readySelected < 0 ) { time.selected = !time.selected; + this.updateTime(); return; } time.selected = !time.selected; From 6ac3e686335653294669a2b7c4bd221bfb68aa35 Mon Sep 17 00:00:00 2001 From: Maicon Wagner Date: Tue, 26 Mar 2019 10:13:08 -0300 Subject: [PATCH 012/109] fix(schedule): fix first element not show when day view --- .../schedule/services/generate-events.service.ts | 2 +- .../overview/scheduledemo-overview.component.ts | 10 ++++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/projects/truly-ui/src/components/schedule/services/generate-events.service.ts b/projects/truly-ui/src/components/schedule/services/generate-events.service.ts index c7123b887..6197aa364 100644 --- a/projects/truly-ui/src/components/schedule/services/generate-events.service.ts +++ b/projects/truly-ui/src/components/schedule/services/generate-events.service.ts @@ -67,7 +67,7 @@ export class GenerateEventsService { let offsetHeight = 0; this.workScaleInMileseconds.forEach(( item, index, array) => { - if ( date > this.workScaleInMileseconds[index].start ) { + if ( date >= this.workScaleInMileseconds[index].start ) { position++; const slotObject = this.scheduleSlats.find( (slot, idx) => idx === ( index - 1)); offsetHeight = offsetHeight + elvis(slotObject, 'nativeElement.offsetHeight') || 0; diff --git a/src/app/components/schedule/overview/scheduledemo-overview.component.ts b/src/app/components/schedule/overview/scheduledemo-overview.component.ts index 576b9ee98..c71efd0ec 100644 --- a/src/app/components/schedule/overview/scheduledemo-overview.component.ts +++ b/src/app/components/schedule/overview/scheduledemo-overview.component.ts @@ -35,7 +35,10 @@ export class ScheduleDemoOverviewComponent { public slotSettings: SlotSettingsType = new SlotSettingsType( 2, 40); - public workScale: WorkScaleType | WorkScaleType[] = new WorkScaleType( '08:00', '18:00', 30 ); + public workScale: WorkScaleType | WorkScaleType[] = [ + new WorkScaleType( '08:00', '12:00', 30 ), + new WorkScaleType( '13:00', '18:00', 30 ) + ]; public dataTableProperties; @@ -260,7 +263,10 @@ export class ScheduleDemoOverviewComponent { getWorkScale() { return new Promise((resolve) => { - resolve( new WorkScaleType( '08:00', '18:00', 30 ) ); + resolve( [ + new WorkScaleType( '08:00', '12:00', 30 ), + new WorkScaleType( '13:00', '18:00', 30 ) + ] ); }); } From bfeda969fe2dcbdbf21d7102d2cffb8a3bbd162d Mon Sep 17 00:00:00 2001 From: Maicon Wagner Date: Tue, 26 Mar 2019 16:27:48 -0300 Subject: [PATCH 013/109] feature(calendar, navigator): add hour and minutes on events change date ou day --- projects/truly-ui/src/components/calendar/calendar.ts | 2 +- .../components/navigator/services/navigator-manager.service.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/truly-ui/src/components/calendar/calendar.ts b/projects/truly-ui/src/components/calendar/calendar.ts index e3cf41cd8..fe4c95eb0 100644 --- a/projects/truly-ui/src/components/calendar/calendar.ts +++ b/projects/truly-ui/src/components/calendar/calendar.ts @@ -190,7 +190,7 @@ export class TlCalendar extends ComponentDefaultBase implements AfterViewInit, O 'year': this.year, 'month': this.month + 1, 'day': this.day, - 'fullDate': new Date( this.year, this.month, this.day ), + 'fullDate': new Date( this.year, this.month, this.day, new Date().getHours(), new Date().getMinutes() ), }, ); } diff --git a/projects/truly-ui/src/components/navigator/services/navigator-manager.service.ts b/projects/truly-ui/src/components/navigator/services/navigator-manager.service.ts index f17d72d4b..4aa438070 100644 --- a/projects/truly-ui/src/components/navigator/services/navigator-manager.service.ts +++ b/projects/truly-ui/src/components/navigator/services/navigator-manager.service.ts @@ -83,7 +83,7 @@ export class NavigatorManagerService { day: this.currentDay, month: this.currentMonth, year: this.currentYear, - fullDate: new Date( this.currentYear, this.currentMonth, this.currentDay ), + fullDate: new Date( this.currentYear, this.currentMonth, this.currentDay, new Date().getHours(), new Date().getMinutes() ), rangeYear: {start: this.startYear, end: this.endYear} }; } From a0ba6bf285f3c7c253ba77fc3182b87abf05f622 Mon Sep 17 00:00:00 2001 From: Maicon Wagner Date: Tue, 26 Mar 2019 16:29:15 -0300 Subject: [PATCH 014/109] doc(schedule): add console log of event change date --- .../schedule/overview/scheduledemo-overview.component.html | 1 + .../schedule/overview/scheduledemo-overview.component.ts | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/src/app/components/schedule/overview/scheduledemo-overview.component.html b/src/app/components/schedule/overview/scheduledemo-overview.component.html index 5afa2b399..86ae61077 100644 --- a/src/app/components/schedule/overview/scheduledemo-overview.component.html +++ b/src/app/components/schedule/overview/scheduledemo-overview.component.html @@ -20,6 +20,7 @@
Basic
[showNowIndicator]="false" [statusConfig]="statusConfig" (rowDbClick)="onRowClick($event)" + (changeDate)="onChangeDate( $event )" (newEventClick)="onNewEventClick( $event )" (eventDbClick)="onEventDbClick($event)" > diff --git a/src/app/components/schedule/overview/scheduledemo-overview.component.ts b/src/app/components/schedule/overview/scheduledemo-overview.component.ts index c71efd0ec..4ae5898c6 100644 --- a/src/app/components/schedule/overview/scheduledemo-overview.component.ts +++ b/src/app/components/schedule/overview/scheduledemo-overview.component.ts @@ -293,6 +293,10 @@ export class ScheduleDemoOverviewComponent { console.log( 'NEW DATA: ', this.dataSource); } + onChangeDate( event ) { + console.log('EVENT CHANGE DATE: ', event); + } + onEventDbClick( event ) { console.log('EVENT CLICK: ', event); } From 417981e77f1e6aa8c064382cebbfd0efb1d6c3e0 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Wed, 27 Mar 2019 09:55:21 -0300 Subject: [PATCH 015/109] feat(input-mask): create event 'complete' when mask is completed. --- projects/truly-ui/src/components/input/core/input-mask.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/projects/truly-ui/src/components/input/core/input-mask.ts b/projects/truly-ui/src/components/input/core/input-mask.ts index 2c2fa9690..f3cf83433 100644 --- a/projects/truly-ui/src/components/input/core/input-mask.ts +++ b/projects/truly-ui/src/components/input/core/input-mask.ts @@ -1,5 +1,6 @@ import { Renderer2 } from '@angular/core'; import { KeyEvent } from '../../core/enums/key-events'; +import { Subject } from 'rxjs'; export class InputMask { @@ -27,6 +28,8 @@ export class InputMask { private maskSpecialCharacters: string[] = [ '/', '(', ')', '.', ':', '-', ' ', '+' ]; + public complete: Subject; + private maskAwaliablePatterns: { [key: string]: RegExp } = { '0': /\d/, '9': /\d/, @@ -42,6 +45,7 @@ export class InputMask { this.input = element.input; this.setMaskExpression( maskValue ); this.initializeMask(); + this.complete = new Subject(); } setMaskExpression( value ) { @@ -424,6 +428,7 @@ export class InputMask { private onComplete() { if ( this.isTextLengthMatchWithExpressionLength() ) { this.tlInput.value = this.value; + this.complete.next(true); } } From 7379429f266129885f79a260f0ef317c6d556b51 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Wed, 27 Mar 2019 09:57:57 -0300 Subject: [PATCH 016/109] fix(date): fix validation of control when using reactive forms. --- projects/truly-ui/src/components/date/date.ts | 30 ++++++++++++------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/projects/truly-ui/src/components/date/date.ts b/projects/truly-ui/src/components/date/date.ts index 1c3eb86c4..ca9fea5aa 100644 --- a/projects/truly-ui/src/components/date/date.ts +++ b/projects/truly-ui/src/components/date/date.ts @@ -22,13 +22,14 @@ import { Component, OnInit, forwardRef, Input, Renderer2, ElementRef, ViewChild, - ChangeDetectorRef, AfterViewInit, OnChanges, ContentChild + ChangeDetectorRef, AfterViewInit, OnChanges, ContentChild, OnDestroy } from '@angular/core'; import { FormControlName, NG_VALUE_ACCESSOR, NgModel } from '@angular/forms'; import { ValueAccessorBase } from '../input/core/value-accessor'; import { InputMask } from '../input/core/input-mask'; import { ReverseFormatDate } from '../core/helper/reverseformatdate'; import { TlLeftPadPipe } from '../internals/pipes/leftpad.pipe'; +import { Subscription } from 'rxjs'; @Component( { selector: 'tl-date', @@ -40,7 +41,7 @@ import { TlLeftPadPipe } from '../internals/pipes/leftpad.pipe'; multi: true, } ], } ) -export class TlDate extends ValueAccessorBase implements OnInit, AfterViewInit { +export class TlDate extends ValueAccessorBase implements OnInit, OnDestroy, AfterViewInit { @Input() formatDate = 'dd/mm/yyyy'; @@ -64,19 +65,23 @@ export class TlDate extends ValueAccessorBase implements OnInit, AfterVi @ContentChild( NgModel ) model: NgModel; + @ViewChild( NgModel ) hiddenModel: NgModel; + @ContentChild( FormControlName ) controlName: NgModel; @ViewChild( 'input' ) input: ElementRef; - public mockValue; + public mockValue: string; public touched = false; - public fieldMask: InputMask; + private fieldMask: InputMask; + + public placeholder: string; - public placeholder; + private mask: string; - public mask; + private subscription = new Subscription(); constructor( private renderer: Renderer2, private change: ChangeDetectorRef ) { @@ -91,9 +96,16 @@ export class TlDate extends ValueAccessorBase implements OnInit, AfterVi this.fieldMask = new InputMask( this, this.renderer, this.mask ); this.getMockValue( this.value ); this.handleModelChangeInit(); + this.listenMaskComplete(); this.change.detectChanges(); } + listenMaskComplete() { + this.subscription.add(this.fieldMask.complete.subscribe(() => { + this.getModel().control.setErrors(this.hiddenModel.errors); + })); + } + handleModelChangeInit() { const model = this.getModel(); if ( model ) { @@ -179,10 +191,8 @@ export class TlDate extends ValueAccessorBase implements OnInit, AfterVi this.change.detectChanges(); } - onBlur() { - setTimeout(() => { - this.propagateTouched(); - }, 100); + ngOnDestroy() { + this.subscription.unsubscribe(); } } From 83f328b9f4c37313d8f830cb7a448fbbcc6fa956 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Wed, 27 Mar 2019 10:00:01 -0300 Subject: [PATCH 017/109] docs(time-available-picker): update docs. --- .../time-available-pickerdemo.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/time-available-picker/time-available-pickerdemo.component.html b/src/app/components/time-available-picker/time-available-pickerdemo.component.html index 3b7cb6834..7b5d737f5 100644 --- a/src/app/components/time-available-picker/time-available-pickerdemo.component.html +++ b/src/app/components/time-available-picker/time-available-pickerdemo.component.html @@ -10,7 +10,7 @@
Basic
- +
diff --git a/src/app/components/button/buttondemo.component.ts b/src/app/components/button/buttondemo.component.ts index 6655e8b3a..b377d06f1 100644 --- a/src/app/components/button/buttondemo.component.ts +++ b/src/app/components/button/buttondemo.component.ts @@ -36,11 +36,15 @@ export class ButtonDemoComponent { public dataEvents; - public isLoading = false; + public isLoading = true; constructor() { this.dataTableProperties = json.dataProperties; this.dataEvents = jsonEvts.dataEvents; + + setTimeout(() => { + this.isLoading = false; + }, 3000); } onClickButtonLoading() { From d10509e358fe730be7bdfe9c1b99de97fee6f1d0 Mon Sep 17 00:00:00 2001 From: Genesson Date: Wed, 3 Apr 2019 14:34:38 -0300 Subject: [PATCH 047/109] feat(timepicker): refator code of timepicker --- .../src/components/timepicker/timepicker.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/projects/truly-ui/src/components/timepicker/timepicker.ts b/projects/truly-ui/src/components/timepicker/timepicker.ts index 92f6b9ca0..2fb0f53a9 100644 --- a/projects/truly-ui/src/components/timepicker/timepicker.ts +++ b/projects/truly-ui/src/components/timepicker/timepicker.ts @@ -21,8 +21,19 @@ */ import { - Input, AfterContentInit, Component, forwardRef, ElementRef, ContentChild, OnInit, ViewChild, - Renderer2, OnDestroy, Output, EventEmitter, AfterViewInit, SimpleChanges, ChangeDetectorRef, OnChanges, + Input, + AfterContentInit, + Component, + forwardRef, + ElementRef, + ContentChild, + ViewChild, + OnDestroy, + Output, + EventEmitter, + AfterViewInit, + SimpleChanges, + OnChanges, } from '@angular/core'; import { TlLeftPadPipe } from '../internals/pipes/leftpad.pipe'; import { OverlayAnimation } from '../core/directives/overlay-animation'; From 53e5f731a20107a7186596a1eda6d2478eb42aaa Mon Sep 17 00:00:00 2001 From: William Aguera Date: Wed, 3 Apr 2019 16:18:05 -0300 Subject: [PATCH 048/109] refact(splitbutton): refact splitbutton to use tl-button component. --- .../splitbutton/splitbutton-theme.scss | 2 +- .../components/splitbutton/splitbutton.html | 66 +++++++++---------- .../components/splitbutton/splitbutton.scss | 57 +++++++++------- .../src/components/splitbutton/splitbutton.ts | 2 +- 4 files changed, 66 insertions(+), 61 deletions(-) diff --git a/projects/truly-ui/src/components/splitbutton/splitbutton-theme.scss b/projects/truly-ui/src/components/splitbutton/splitbutton-theme.scss index 46a9afbd4..078a5dd26 100644 --- a/projects/truly-ui/src/components/splitbutton/splitbutton-theme.scss +++ b/projects/truly-ui/src/components/splitbutton/splitbutton-theme.scss @@ -42,7 +42,7 @@ border: 1px solid map-deep-get($theme, 'basic', "default", "border"); } - .tl-split-button-box { + .split-wrapper { &.basic { @include _tl-splitbutton-theme-schema($theme, 'basic') diff --git a/projects/truly-ui/src/components/splitbutton/splitbutton.html b/projects/truly-ui/src/components/splitbutton/splitbutton.html index adad97fa1..9a894dd3b 100644 --- a/projects/truly-ui/src/components/splitbutton/splitbutton.html +++ b/projects/truly-ui/src/components/splitbutton/splitbutton.html @@ -1,40 +1,34 @@ -
- +
-
-
- chevron-down +
+ + +
+
+ chevron-down +
+ +
    + +
+
- -
    - -
-
+
diff --git a/projects/truly-ui/src/components/splitbutton/splitbutton.scss b/projects/truly-ui/src/components/splitbutton/splitbutton.scss index 16fe3343b..d7beece51 100644 --- a/projects/truly-ui/src/components/splitbutton/splitbutton.scss +++ b/projects/truly-ui/src/components/splitbutton/splitbutton.scss @@ -1,4 +1,3 @@ - //Default $button-height: 37px; $button-font-family: "Segoe UI", Lato, 'sans-serif', "Arial"; @@ -8,30 +7,41 @@ $button-font-size: 1em; border-radius: 3px 0 0 3px; } -.tl-split-button-box { +.split-wrapper { font-family: $button-font-family; font-size: $button-font-size; display: inline-block; position: relative; - > .split-button-actions { - margin: 0; - padding: 0; - line-height: $button-height; - cursor: pointer; - float: right; - user-select: none; - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - > .split-button-actions tl-icon { - padding: 0 15px; - } - > .ui-button { - &:hover { + > .split-content { + display: flex; + > ::ng-deep tl-button { + button { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + } + } + > .split-button-actions { + margin: 0; + padding: 0; + line-height: $button-height; cursor: pointer; + float: right; + user-select: none; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + > .split-button-actions tl-icon { + padding: 0 15px; + } + + > .ui-button { + &:hover { + cursor: pointer; + } } } + } .icon-arrow { @@ -39,19 +49,20 @@ $button-font-size: 1em; } .actions-menu { - left:0; + position: absolute; + left: 0; margin: 0; padding: 0; - border-top: 0; - height:auto; - display:inline; + height: auto; + display: inline; overflow: hidden; list-style: none; - min-width: 125px; + box-shadow: 0px 0px 3px #c1c1c16e; z-index: 1; cursor: auto; - border-radius: 0 0 3px 3px; + border-radius: 3px; box-sizing: border-box; + top: 2px; } .border-top { diff --git a/projects/truly-ui/src/components/splitbutton/splitbutton.ts b/projects/truly-ui/src/components/splitbutton/splitbutton.ts index 41a39df31..e5dbfb592 100644 --- a/projects/truly-ui/src/components/splitbutton/splitbutton.ts +++ b/projects/truly-ui/src/components/splitbutton/splitbutton.ts @@ -43,7 +43,7 @@ export class TlSplitButton implements AfterContentInit { @Input() text = ''; - @Input() width = '125px'; + @Input() width = '100%'; @Input() height = '30px'; From d148d29b5aabcc2a82c70a7483642ff076cbf0e6 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Thu, 4 Apr 2019 09:37:54 -0300 Subject: [PATCH 049/109] fix(splitbutton): fix spitbutton not displaying the text --- projects/truly-ui/src/components/splitbutton/splitbutton.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/truly-ui/src/components/splitbutton/splitbutton.html b/projects/truly-ui/src/components/splitbutton/splitbutton.html index 9a894dd3b..530f4150b 100644 --- a/projects/truly-ui/src/components/splitbutton/splitbutton.html +++ b/projects/truly-ui/src/components/splitbutton/splitbutton.html @@ -2,7 +2,7 @@
From 87c9bf5a7e277ed8aa5eb6a62b8830a33f8071e0 Mon Sep 17 00:00:00 2001 From: Maicon Wagner Date: Thu, 4 Apr 2019 09:50:31 -0300 Subject: [PATCH 050/109] fix(heading): fix width button new event --- .../components/schedule/parts/heading/heading.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/truly-ui/src/components/schedule/parts/heading/heading.component.html b/projects/truly-ui/src/components/schedule/parts/heading/heading.component.html index 0ed341d07..c0efe9ff8 100644 --- a/projects/truly-ui/src/components/schedule/parts/heading/heading.component.html +++ b/projects/truly-ui/src/components/schedule/parts/heading/heading.component.html @@ -22,6 +22,6 @@
- +
From 32681cad0ee5b36313daa753396afb3df54974c6 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Thu, 4 Apr 2019 13:58:17 -0300 Subject: [PATCH 051/109] docs(home): update docs. --- src/app/home/home.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 4bfb2875c..258f52fcf 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -12,7 +12,7 @@
- GET STARTED +

{{lastRelease?.name}} / @@ -31,7 +31,7 @@

GET STARTED + [width]="'180px'" [text]="'GET STARTED'" [color]="'primary'">
From b229ad7b7394e24981aaa7747fb3eb8afa850301 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Thu, 4 Apr 2019 13:59:27 -0300 Subject: [PATCH 052/109] refact(form): set fixed width to form buttons. --- projects/truly-ui/src/components/form/form.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/projects/truly-ui/src/components/form/form.html b/projects/truly-ui/src/components/form/form.html index a21b54f2e..91fb5f64b 100644 --- a/projects/truly-ui/src/components/form/form.html +++ b/projects/truly-ui/src/components/form/form.html @@ -14,6 +14,7 @@
Date: Thu, 4 Apr 2019 16:56:40 -0300 Subject: [PATCH 053/109] refact(splitbutton): add buttonClick event to tl-button --- projects/truly-ui/src/components/splitbutton/splitbutton.html | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/truly-ui/src/components/splitbutton/splitbutton.html b/projects/truly-ui/src/components/splitbutton/splitbutton.html index 530f4150b..c929c4e37 100644 --- a/projects/truly-ui/src/components/splitbutton/splitbutton.html +++ b/projects/truly-ui/src/components/splitbutton/splitbutton.html @@ -4,6 +4,7 @@ From 4263489a9abc2535f713c3c1c385b5c8c6951065 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Mon, 8 Apr 2019 14:51:51 -0300 Subject: [PATCH 054/109] feat(chatlist): create the chat content with all handles of messages. --- .../components/chatlist/chatlist-status.ts | 6 - .../components/chatlist/chatlist-theme.scss | 60 ----- .../src/components/chatlist/chatlist.html | 117 +++++----- .../src/components/chatlist/chatlist.scss | 215 ++++++++++++++---- .../components/chatlist/chatlist.service.ts | 82 ------- .../src/components/chatlist/chatlist.ts | 182 +++++++-------- .../components/chatlist/enums/status.enum.ts | 28 +++ .../truly-ui/src/components/chatlist/index.ts | 40 ++-- .../interfaces/chat-contact.interface.ts | 31 +++ .../interfaces/chat-message.interface.ts | 32 +++ .../interfaces/chat-status.interface.ts | 28 +++ .../chatlist/parts/chat-content.html | 45 ++++ .../chatlist/parts/chat-content.scss | 162 +++++++++++++ .../components/chatlist/parts/chat-content.ts | 110 +++++++++ .../chatlist/pipes/status-filter.pipe.ts | 35 +++ .../chatlist/services/chat.service.ts | 45 ++++ projects/truly-ui/src/public_api.ts | 7 + 17 files changed, 859 insertions(+), 366 deletions(-) delete mode 100644 projects/truly-ui/src/components/chatlist/chatlist-status.ts delete mode 100644 projects/truly-ui/src/components/chatlist/chatlist.service.ts create mode 100644 projects/truly-ui/src/components/chatlist/enums/status.enum.ts create mode 100644 projects/truly-ui/src/components/chatlist/interfaces/chat-contact.interface.ts create mode 100644 projects/truly-ui/src/components/chatlist/interfaces/chat-message.interface.ts create mode 100644 projects/truly-ui/src/components/chatlist/interfaces/chat-status.interface.ts create mode 100644 projects/truly-ui/src/components/chatlist/parts/chat-content.html create mode 100644 projects/truly-ui/src/components/chatlist/parts/chat-content.scss create mode 100644 projects/truly-ui/src/components/chatlist/parts/chat-content.ts create mode 100644 projects/truly-ui/src/components/chatlist/pipes/status-filter.pipe.ts create mode 100644 projects/truly-ui/src/components/chatlist/services/chat.service.ts diff --git a/projects/truly-ui/src/components/chatlist/chatlist-status.ts b/projects/truly-ui/src/components/chatlist/chatlist-status.ts deleted file mode 100644 index a71b7bb43..000000000 --- a/projects/truly-ui/src/components/chatlist/chatlist-status.ts +++ /dev/null @@ -1,6 +0,0 @@ -export class ChatListStatus { - public online: string; - public offline: string; - public busy: string; - public away: string; -} diff --git a/projects/truly-ui/src/components/chatlist/chatlist-theme.scss b/projects/truly-ui/src/components/chatlist/chatlist-theme.scss index f55d16e22..0ee0d76cd 100644 --- a/projects/truly-ui/src/components/chatlist/chatlist-theme.scss +++ b/projects/truly-ui/src/components/chatlist/chatlist-theme.scss @@ -6,64 +6,4 @@ $success: map-deep-get($theme, 'success'); $warning: map-deep-get($theme, 'warning'); - .ui-chat-overflow { - border-top: 1px solid map-deep-get($basic, "default", "border"); - } - - .ui-status { - background: map-deep-get($basic, "default", "background"); - color: map-deep-get($basic, "default", "foreground"); - border-left: 1px solid map-deep-get($basic, "default", "border"); - border-right: 1px solid map-deep-get($basic, "default", "border"); - } - - .ui-chat-template{ - border-bottom: 1px solid rgba(map-deep-get($basic, "default", "border"),0.3); - .ui-chat-name{ - color: map-deep-get($basic, "default", "foreground"); - } - .ui-chat-sector { - color: rgba(map-deep-get($basic, "default", "foreground"),0.6); - - } - .ui-status-online { - background: map-deep-get($success, "default", "background"); - } - .ui-status-offline { - background: map-deep-get($basic, "darker", "background"); - } - .ui-status-busy { - background: map-deep-get($danger, "default", "background"); - } - .ui-status-away { - background: map-deep-get($warning, "default", "background"); - } - } - - .item-selected-listbox { - & .ui-chat-name{ - color: map-deep-get($primary, "default", "foreground"); - } - - & .ui-chat-sector { - color: rgba(map-deep-get($primary, "default", "foreground"), 0.7); - } - } - - .ui-chat-overflow::-webkit-scrollbar { - background: map-deep-get($primary, "default", "foreground"); - } - - .ui-chat-overflow::-webkit-scrollbar-corner { - background: map-deep-get($primary, "default", "foreground"); - } - - .ui-chat-overflow::-webkit-scrollbar-track { - background: map-deep-get($basic, "default", "background"); - border-right: 1px solid map-deep-get($basic, "default", "border"); - } - - .ui-chat-overflow::-webkit-scrollbar-thumb { - background: map-deep-get($primary, "default", "background"); - } } diff --git a/projects/truly-ui/src/components/chatlist/chatlist.html b/projects/truly-ui/src/components/chatlist/chatlist.html index dcdb277ad..09beeed11 100644 --- a/projects/truly-ui/src/components/chatlist/chatlist.html +++ b/projects/truly-ui/src/components/chatlist/chatlist.html @@ -1,64 +1,59 @@ - + + +
+ +
+ {{ item.name }} + {{ item.description }} +
+
Me
+
{{ getUnreadMessages(item.id)?.length }}
+
+ + + +
+
arrow-back
+
+ {{ partner?.name }} +
+
+ + + + + diff --git a/projects/truly-ui/src/components/chatlist/chatlist.scss b/projects/truly-ui/src/components/chatlist/chatlist.scss index 1d3b75322..42a16f531 100644 --- a/projects/truly-ui/src/components/chatlist/chatlist.scss +++ b/projects/truly-ui/src/components/chatlist/chatlist.scss @@ -1,60 +1,193 @@ -.ui-chat-wrapper { - position: relative; - user-select: none; - > .ui-chat-overflow { +.chat-wrapper { + border-radius: 5px; + overflow: hidden; + border: 1px solid #eae7e7ee; + min-width: 300px !important; + .chat-header { + display: flex; position: relative; - overflow: hidden; - > .ui-chat-lists { + align-items: center; + place-content: space-evenly; + height: 40px; + flex-wrap: wrap; + background: rgb(102,204,153); + background: linear-gradient(90deg, rgba(102,204,153,1) 0%, rgba(116,222,130,1) 100%); + section { + width: 100%; + text-align: center; + } + + .chat-wrapper-status { + display: grid; position: relative; + grid-template-columns: min(100px) min(100px) min(100px); + grid-auto-flow: column; + } + .chat-status-selection { + position: absolute; + width: 100px; + background: white; + padding: 0 15px; + border-radius: 10px; + height: 100%; + transition: transform 300ms ease-in-out; + .chat-arrow { + border: solid 10px transparent; + margin: 15px 0 0 22px; + border-right-color: #F0F0F0; + position: absolute; + transform: rotateZ(90deg); + } + } + + .chat-status { width: 100%; - > .ui-chat-content { - > .ui-status { - height: 25px; - padding-left: 10px; - font-size: 0.8em; - color: #aaaaaa; - font-family: "Segoe UI", Lato, 'sans-serif', "Arial"; - line-height: 25px; - } - > .ui-status:first-child { - border-top: 0; + height: 100%; + text-align: center; + display: flex; + place-content: center; + align-items: center; + z-index: 0; + cursor: pointer; + color: #fff; + font-size: 1.1em; + font-variant: all-petite-caps; + &.selected { + transition: all 250ms ease-in-out; + span { + color: #66cc99; } } } } - > .ui-chat-overflow::-webkit-scrollbar { - width: 13px; + + .chat-content { + padding: 10px; + background: #f1f1f1; + overflow-y: auto; + overflow-x: hidden; + >.chat-item { + display: flex; + align-items: center; + padding: 10px; + box-sizing: border-box; + background: white; + margin: 5px 0; + border-radius: 5px; + box-shadow: 0 0px 4px 1px #e8e8e8; + animation: showInChatItem 250ms ease-in forwards; + transition: background, border 300ms linear; + cursor: pointer; + border: 1px solid transparent; + + .chat-img { + width: 45px; + height: 45px; + border-radius: 50%; + padding: 2px; + border-style: solid; + border-width: 2px; + } + + .chat-item-detail { + font-family: "Segoe UI", serif; + display: flex; + flex-flow: column; + flex: 1; + padding-left: 10px; + span { + &:last-child { + font-size: 0.9em; + color: #5f5f5f; + } + } + } + + .chat-unread-messages { + background: #FF6666; + color: white; + width: 25px; + height: 25px; + border-radius: 50%; + display: flex; + place-content: center; + align-items: center; + animation: shadow-pulse 1s infinite; + } + + &:hover { + border: 1px solid #dedede; + background: #f5fff4; + } + } + &::-webkit-scrollbar { + border-radius: 5px; + width: 5px; + } + &::-webkit-scrollbar-track { + background: #cccccc; + } + &::-webkit-scrollbar-thumb { + background: #8dab9c; + } } } -.ui-chat-template { - cursor: pointer; - >.ui-chat-infowrapper { - display: inline-grid; - position: absolute; - top: 20%; - >.ui-chat-name { - font-family: "Segoe UI", Lato, 'sans-serif', "Arial"; - font-size: 13px; - } - >.ui-chat-sector { - font-family: "Segoe UI", Lato, 'sans-serif', "Arial"; - font-size: 10px; + +.chat-partner-wrapper { + display: flex; + align-items: center; + place-content: flex-start; + width: 100%; + padding: 0 10px; + color: white; + > .arrow { + width: 30px; + box-sizing: border-box; + text-align: center; + transition: background 300ms ease-in-out; + border-radius: 5px; + cursor: pointer; + &:hover { + background: #fff; + color: #66cc99; + padding: 0 8px; } } + .chat-partner { + padding: 0 10px; + } } -.ui-chat-template img { - margin: 10px + +@keyframes showInChatItem { + from { + opacity: 0; + } + to { + opacity: 1; + } } -.ui-chat-bagde { - float: right; - width: 8px; - height: 8px; - border-radius: 8px; - margin: 12px; - transition: linear background-color 0.1s; +@keyframes showOffContent { + from { + transform: translateX(0); + opacity: 1; + } + to { + transform: translateX(-400px); + opacity: 0; + } } +@keyframes shadow-pulse +{ + 0% { + box-shadow: 0 0 0 0px rgb(243, 103, 103); + } + 100% { + box-shadow: 0 0 0 8px rgba(0, 0, 0, 0); + } +} + diff --git a/projects/truly-ui/src/components/chatlist/chatlist.service.ts b/projects/truly-ui/src/components/chatlist/chatlist.service.ts deleted file mode 100644 index 8c49fab97..000000000 --- a/projects/truly-ui/src/components/chatlist/chatlist.service.ts +++ /dev/null @@ -1,82 +0,0 @@ -/* - MIT License - - Copyright (c) 2019 Temainfo Software - - Permission is hereby granted, free of charge, to any person obtaining a copy - of this software and associated documentation files (the "Software"), to deal - in the Software without restriction, including without limitation the rights - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - copies of the Software, and to permit persons to whom the Software is - furnished to do so, subject to the following conditions: - The above copyright notice and this permission notice shall be included in all - copies or substantial portions of the Software. - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - SOFTWARE. - */ - -import { Injectable } from '@angular/core'; -import { Subject } from 'rxjs'; - -@Injectable() -export class ChatListService { - - public data = []; - - public online = []; - - public offline = []; - - public searchQuery = ''; - - public subjectStatus = new Subject(); - - constructor() {} - - changeStatus( item, newstatus ) { - item.row.status = newstatus; - this.handleChangeOffline( item, newstatus ); - this.subjectStatus.next({'online': this.online, 'offline': this.offline}); - } - - private handleChangeOffline( item, newstatus ) { - if ( newstatus === 'Offline' ) { - if ( this.offline.indexOf( item.row ) > 0 ) { - return; - } - this.online.splice( this.online.indexOf( item.row ), 1 ); - this.offline.push( item.row ); - this.sortArraysStatus(); - return; - } - this.handleNotOffline( item ); - } - - private handleNotOffline( item ) { - if ( item.status !== 'Offline' ) { - if ( this.online.indexOf( item.row ) < 0 ) { - this.offline.splice( this.offline.indexOf( item.row ), 1 ); - this.online.push( item.row ); - } - } - } - - sortArraysStatus() { - this.sortArray( this.online ); - this.sortArray( this.offline ); - } - - sortArray( array: any[] ) { - array.sort( ( a, b ) => { - const x = a[ this.searchQuery ].toLowerCase(); - const y = b[ this.searchQuery ].toLowerCase(); - return x < y ? -1 : x > y ? 1 : 0; - } ); - } - -} diff --git a/projects/truly-ui/src/components/chatlist/chatlist.ts b/projects/truly-ui/src/components/chatlist/chatlist.ts index 06a4a09b3..d1e88a92c 100644 --- a/projects/truly-ui/src/components/chatlist/chatlist.ts +++ b/projects/truly-ui/src/components/chatlist/chatlist.ts @@ -20,158 +20,140 @@ SOFTWARE. */ import { - Component, AfterViewInit, Input, OnInit, QueryList, - ViewChildren, Output, EventEmitter, forwardRef, - Renderer2, ChangeDetectorRef, ChangeDetectionStrategy, + Component, ElementRef, EventEmitter, Input, OnChanges, Renderer2, SimpleChanges, ViewChild, Output, AfterViewInit, + OnDestroy } from '@angular/core'; -import { TlListBox } from '../listbox/listbox'; - -import { ChatListStatus } from './chatlist-status'; -import { ChatListService } from './chatlist.service'; -import { Subject } from 'rxjs'; +import { ChatStatus } from './interfaces/chat-status.interface'; +import { ChatContact } from './interfaces/chat-contact.interface'; +import { ChatMessage } from './interfaces/chat-message.interface'; +import { Status } from './enums/status.enum'; +import { Subscription } from 'rxjs'; @Component( { selector: 'tl-chatlist', templateUrl: './chatlist.html', styleUrls: [ './chatlist.scss' ], - changeDetection: ChangeDetectionStrategy.OnPush } ) -export class TlChatList implements AfterViewInit, OnInit { +export class TlChatList implements AfterViewInit, OnDestroy { - @Input() data = []; + @Input() maxHeight = '450px'; - @Input() searchInput; + @Input() width = '400px'; - @Input() searchQuery; + @Input() chatStatus: ChatStatus = { + busy: '#ffc019', + online: '#66cc99', + offline: '#ff3100' + }; - @Input() height = 300 / 2 + 'px'; + @Input() partner: ChatContact; - @Input() label = 'firstName'; + @Input() user: ChatContact; - @Input() labelDetail = 'lastName'; + @Input('contacts') + set contacts( data: ChatContact[] ) { + this._dataSource = data.filter((item) => item.id !== this.user.id); + } - @Input() avatar = ''; + get contacts(): ChatContact[] { + return this._dataSource; + } - @Input() itemsToShow = 5; + @Output() sendMessage: EventEmitter = new EventEmitter(); - @Input() statusConfig: ChatListStatus; + @Output() changeStatus: EventEmitter = new EventEmitter(); - @Output() clickItem: EventEmitter = new EventEmitter(); + @ViewChild('content') content: ElementRef; - // @ViewChildren( forwardRef( () => TlListBox ) ) listBoxes: QueryList; + public transform = '100px'; - public filtering = false; + public selected = 'online'; - public filteredOnline = []; + public insideChat = false; - public filteredOffline = []; + public messages: ChatMessage[] = []; - private subject = new Subject(); + private _dataSource; - private selected = ''; + private subscription = new Subscription(); - constructor( public renderer: Renderer2, private change: ChangeDetectorRef, - public chatListService: ChatListService ) { - } + constructor(private renderer: Renderer2) {} - ngOnInit() { -/* this.chatListService.data = this.data; - this.filterDataStatus( this.chatListService.data ); - this.handleStatusConfig(); - this.handleSearchInput(); - this.listenInput();*/ + get online() { + return Status.ONLINE; } - ngAfterViewInit() { -/* this.subscribeStatusChange(); - this.detectChangesOfLists();*/ - } - -/* private subscribeStatusChange() { - this.chatListService.subjectStatus.subscribe( ( value ) => { - this.change.detectChanges(); - this.renderListBoxes(); - } ); + get offline() { + return Status.OFFLINE; } - private listenInput() { - this.renderer.listen( this.searchInput.input.nativeElement, 'input', ( $event ) => { - this.subject.next( $event.target.value ); - } ); + get busy() { + return Status.BUSY; } - private detectChangesOfLists() { - this.change.markForCheck(); - this.listBoxes.forEach( ( item, index, array ) => { - item.change.markForCheck(); - } ); - } - - private filterDataStatus( array ) { - this.resetServiceLists(); - array.forEach( ( value ) => { - this.isNotOffline( value ) ? - this.chatListService.online.push( value ) : this.chatListService.offline.push( value ); - } ); - this.filteredOffline = this.chatListService.offline; - this.filteredOnline = this.chatListService.online; - this.chatListService.searchQuery = this.searchQuery; - this.sortLists(); + ngAfterViewInit() { } - private sortLists() { - this.chatListService.sortArray( this.chatListService.online ); - this.chatListService.sortArray( this.chatListService.offline ); + animationContentDone(event: AnimationEvent) { + if (event.animationName === 'showOffContent') { + this.insideChat = true; + } } - private resetServiceLists() { - this.chatListService.online = []; - this.chatListService.offline = []; + getUnreadMessages(id: string) { + return this.messages.filter((item: ChatMessage) => + (!item.viewed && item.from.id === id) && (item.to.id === this.user.id) ); } - private handleSearchInput() { - if ( !this.searchInput ) { - throw new Error( '[searchInput] property is required' ); - } + selectPartner(item: ChatContact) { + this.updatePartner(item); + this.renderer.setStyle(this.content.nativeElement, 'animation', 'showOffContent 0.2s forwards'); } - private handleStatusConfig() { - if ( !this.statusConfig ) { - throw new Error( '[statusConfig] property is required' ); - } + updatePartner(item: ChatContact) { + this.partner = item; } - private renderListBoxes() { - this.listBoxes.forEach( ( item ) => { - item.renderPageData(); - } ); + loadMessages(messages: ChatMessage[]) { + this.messages = messages; } - getStatus( item ) { - return Object.keys( this.statusConfig ).find( (key => this.statusConfig[ key ] === item) ); + appendMessage(message: ChatMessage) { + this.messages = [ ...this.messages, message ]; } - onFilterData(data, list) { - list === 'list1' ? this.filteredOnline = data : this.filteredOffline = data; - this.change.detectChanges(); + setStatus(status: Status) { + this.changeStatus.emit({ user: this.user, status: status }); } - onClickItemChat( $event, string ) { - this.clickItem.emit( $event ); - this.selected = $event; - this.resetSelected( string ); + onMessage(message: { value: string, time: Date }) { + const msm = { + to: this.partner, + from: this.user, + message: message.value, + time: message.time, + viewed: false + }; + this.sendMessage.emit(msm); + this.appendMessage(msm); } - private resetSelected( string ) { - if ( string === 'list1' ) { - return this.listBoxes.toArray()[ 1 ].removeSelected(); + selectStatus(status) { + if (status === 'online') { + this.transform = '100px'; + this.selected = 'online'; + } else if (status === 'offline') { + this.transform = '200px'; + this.selected = 'offline'; + } else { + this.transform = '0'; + this.selected = 'chat'; } - this.listBoxes.toArray()[ 0 ].removeSelected(); } - private isNotOffline( value ) { - return value.status.toLowerCase() !== this.statusConfig[ 'offline' ].toLowerCase(); - }*/ + ngOnDestroy() { + this.subscription.unsubscribe(); + } } diff --git a/projects/truly-ui/src/components/chatlist/enums/status.enum.ts b/projects/truly-ui/src/components/chatlist/enums/status.enum.ts new file mode 100644 index 000000000..d28c8dd9e --- /dev/null +++ b/projects/truly-ui/src/components/chatlist/enums/status.enum.ts @@ -0,0 +1,28 @@ + + + /* + MIT License + + Copyright (c) 2017 Temainfo Sistemas + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + */ + export enum Status { + ONLINE = 'online', + OFFLINE = 'offline', + BUSY = 'busy' + } diff --git a/projects/truly-ui/src/components/chatlist/index.ts b/projects/truly-ui/src/components/chatlist/index.ts index 5bde81e92..544232b36 100644 --- a/projects/truly-ui/src/components/chatlist/index.ts +++ b/projects/truly-ui/src/components/chatlist/index.ts @@ -1,34 +1,42 @@ -import { NgModule } from '@angular/core'; +import { ModuleWithProviders, NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; - -import { TlChatList } from './chatlist'; -import { TabIndexService } from '../form/tabIndex.service'; -import { IdGeneratorService } from '../core/helper/idgenerator.service'; -import { NameGeneratorService } from '../core/helper/namegenerator.service'; -import { ChatListService } from './chatlist.service'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ListBoxModule } from '../listbox/index'; import { MiscModule } from '../misc/index'; +import { TlChatList } from './chatlist'; +import { TlChatContent } from './parts/chat-content'; +import { IconsModule } from '../icons/index'; +import { TlStatusFilterPipe } from './pipes/status-filter.pipe'; +import { ChatService } from './services/chat.service'; @NgModule({ imports: [ CommonModule, FormsModule, + ReactiveFormsModule, MiscModule, - ListBoxModule + ListBoxModule, + IconsModule ], declarations: [ TlChatList, + TlChatContent, + TlStatusFilterPipe ], exports: [ TlChatList, - ], - providers: [ - TabIndexService, - IdGeneratorService, - NameGeneratorService, - ChatListService + TlChatContent, + TlStatusFilterPipe ] }) -export class ChatListModule {} +export class ChatListModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: ChatListModule, + providers: [ + ChatService + ], + }; + } +} diff --git a/projects/truly-ui/src/components/chatlist/interfaces/chat-contact.interface.ts b/projects/truly-ui/src/components/chatlist/interfaces/chat-contact.interface.ts new file mode 100644 index 000000000..4125ef873 --- /dev/null +++ b/projects/truly-ui/src/components/chatlist/interfaces/chat-contact.interface.ts @@ -0,0 +1,31 @@ + + + /* + MIT License + + Copyright (c) 2017 Temainfo Sistemas + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + */ + import { Status } from '../enums/status.enum'; + + export interface ChatContact { + id: string | number; + name: string; + description: string; + status: Status; + } diff --git a/projects/truly-ui/src/components/chatlist/interfaces/chat-message.interface.ts b/projects/truly-ui/src/components/chatlist/interfaces/chat-message.interface.ts new file mode 100644 index 000000000..9f48ee047 --- /dev/null +++ b/projects/truly-ui/src/components/chatlist/interfaces/chat-message.interface.ts @@ -0,0 +1,32 @@ + + + /* + MIT License + + Copyright (c) 2017 Temainfo Sistemas + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + */ + import { ChatContact } from './chat-contact.interface'; + + export interface ChatMessage { + to: ChatContact; + from: ChatContact; + message: string; + time: Date; + viewed: boolean; + } diff --git a/projects/truly-ui/src/components/chatlist/interfaces/chat-status.interface.ts b/projects/truly-ui/src/components/chatlist/interfaces/chat-status.interface.ts new file mode 100644 index 000000000..836720b40 --- /dev/null +++ b/projects/truly-ui/src/components/chatlist/interfaces/chat-status.interface.ts @@ -0,0 +1,28 @@ + + + /* + MIT License + + Copyright (c) 2017 Temainfo Sistemas + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + */ + export interface ChatStatus { + busy: string; + online: string; + offline: string; + } diff --git a/projects/truly-ui/src/components/chatlist/parts/chat-content.html b/projects/truly-ui/src/components/chatlist/parts/chat-content.html new file mode 100644 index 000000000..b937cc5fd --- /dev/null +++ b/projects/truly-ui/src/components/chatlist/parts/chat-content.html @@ -0,0 +1,45 @@ +
+ +
+ + + + + + + + + + + + +
+ +
+ +
+ send +
+
+
+ + +
+
+

{{ message?.message }}

+ {{ message.time | date:'HH:mm' }} +
+
+ + + +
+ +
+
+

{{ message?.message }}

+ {{ message.time | date:'HH:mm' }} +
+
+ diff --git a/projects/truly-ui/src/components/chatlist/parts/chat-content.scss b/projects/truly-ui/src/components/chatlist/parts/chat-content.scss new file mode 100644 index 000000000..2b448bcbc --- /dev/null +++ b/projects/truly-ui/src/components/chatlist/parts/chat-content.scss @@ -0,0 +1,162 @@ +.chat-content-wrapper { + background: #f1f1f1; + position: relative; + + .cha-messages-content { + overflow-y: auto; + height: 410px; + &::-webkit-scrollbar { + background: white; + width: 5px; + } + + &::-webkit-scrollbar-corner { + background: white; + } + + &::-webkit-scrollbar-track { + background: #fafafa; + } + + &::-webkit-scrollbar-thumb { + background: #e4e4e4; + border-radius: 5px; + } + } +} + +.chat-partner { + display: flex; + align-items: flex-start; + animation: showIn 100ms ease-in forwards; + + + > .chat-text-content { + display: flex; + align-items: flex-end; + flex-flow: column; + background: white; + color: #464646; + position: relative; + top: 5px; + border-radius: 5px; + border-top-left-radius: 2px; + padding: 10px; + margin: 10px; + box-shadow: 1px 1px 2px 0px #d0d0d0; + > p { + margin: 0; + } + > span { + font-size: 0.8em; + float: right; + color: #adadad; + position: relative; + bottom: 0; + right: 0; + } + .chat-arrow { + border: solid 10px transparent; + margin: -10px 0 0 -28px; + border-right-color: #ffffff; + position: absolute; + top: 10px; + left: 10px; + -webkit-transform: rotateZ(90deg); + transform: rotateZ(0); + } + + } + img { + width: 40px; + border-radius: 50%; + border: 3px solid #fff; + box-sizing: border-box; + margin: 10px 0 10px 10px; + } +} + + +.chat-user { + display: flex; + place-content: flex-end; + animation: showIn 200ms ease-in forwards; + > .chat-text-content { + display: flex; + align-items: flex-end; + flex-flow: column; + background: #e3fdf4; + color: #464646; + position: relative; + top: 0px; + border-radius: 5px; + padding: 10px; + margin: 10px; + box-shadow: 1px 1px 2px 0px #d0d0d0; + > p { + margin: 0; + } + > span { + font-size: 0.8em; + float: right; + color: #adadad; + position: relative; + bottom: 0; + right: 0; + } + } +} + +.chat-type { + bottom: 0; + position: absolute; + width: 100%; + height: 40px; + .chat-input { + width: calc(100% - 40px); + border: 0; + height: 40px; + box-sizing: border-box; + padding: 10px; + font-family: Segoe UI, serif; + box-shadow: 1px 1px 5px 1px #dedede; + overflow: hidden; + outline: none; + resize: none; + color: #848484; + &::placeholder { + color: #d1d1d1; + } + } + .icon-send { + position: absolute; + width: 40px; + height: 40px; + right: 0; + top: 0; + color: #66cc99; + display: flex; + align-items: center; + place-content: center; + font-size: 1.5em; + background: white; + transition: background, color 400ms ease-in-out; + &:hover { + color: white; + cursor: pointer; + background: rgb(102,204,153); + background: linear-gradient(90deg, rgba(102,204,153,1) 0%, rgba(116,222,130,1) 100%); + } + } +} + +@keyframes showIn { + from { + transform: translateY(20px); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +} diff --git a/projects/truly-ui/src/components/chatlist/parts/chat-content.ts b/projects/truly-ui/src/components/chatlist/parts/chat-content.ts new file mode 100644 index 000000000..ead85130c --- /dev/null +++ b/projects/truly-ui/src/components/chatlist/parts/chat-content.ts @@ -0,0 +1,110 @@ +/* + MIT License + + Copyright (c) 2019 Temainfo Software + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + */ +import { + Component, AfterViewInit, Output, Input, EventEmitter, ViewChild, ElementRef, OnDestroy, SimpleChanges, OnChanges +} from '@angular/core'; +import { FormControl, Validators } from '@angular/forms'; +import { ChatContact } from '../interfaces/chat-contact.interface'; +import { ChatMessage } from '../interfaces/chat-message.interface'; +import { Subscription } from 'rxjs'; + +@Component( { + selector: 'tl-chat-content', + templateUrl: './chat-content.html', + styleUrls: [ './chat-content.scss' ], +} ) +export class TlChatContent implements AfterViewInit, OnDestroy, OnChanges { + + @Input() maxHeight = '450px'; + + @Input() partner: ChatContact; + + @Input() user: ChatContact; + + @Input() messages: ChatMessage[] = []; + + @Output() message: EventEmitter<{ value: string, time: Date }> = new EventEmitter(); + + @ViewChild('input') input: ElementRef; + + @ViewChild('messageContent') messageContent: ElementRef; + + private opened = false; + + public control = new FormControl(null, Validators.required); + + private subscription = new Subscription(); + + constructor() { + this.opened = true; + } + + ngAfterViewInit() { + setTimeout(() => { + this.setViewedMessages(); + this.filterMessages(); + this.setInputFocus(); + }); + } + + setViewedMessages() { + this.messages.forEach((item: ChatMessage, index, array) => item.viewed = true ); + } + + filterMessages() { + this.messages.filter((item: ChatMessage, index, array) => + (item.from.id === this.user.id) && (item.to.id === this.partner.id) || + (item.from.id === this.partner.id) && (item.to.id === this.user.id) + ); + this.setScrollBottom(); + } + + setScrollBottom() { + setTimeout(() => { + this.messageContent.nativeElement.scrollTop = + (this.messageContent.nativeElement.scrollHeight - this.messageContent.nativeElement.clientHeight); + }); + } + + setInputFocus() { + this.input.nativeElement.focus(); + } + + sendMessage() { + if (this.control.value) { + this.message.emit({ value: this.control.value, time: new Date() }); + this.control.setValue(null); + } + } + + ngOnChanges( { messages }: SimpleChanges ) { + if (messages && messages['currentValue'].length > 0) { + this.filterMessages(); + } + } + + ngOnDestroy() { + this.subscription.unsubscribe(); + } + +} + diff --git a/projects/truly-ui/src/components/chatlist/pipes/status-filter.pipe.ts b/projects/truly-ui/src/components/chatlist/pipes/status-filter.pipe.ts new file mode 100644 index 000000000..518621757 --- /dev/null +++ b/projects/truly-ui/src/components/chatlist/pipes/status-filter.pipe.ts @@ -0,0 +1,35 @@ +/* + MIT License + + Copyright (c) 2017 Temainfo Sistemas + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + */ +import { PipeTransform, Pipe } from '@angular/core'; +import { ChatContact } from '../interfaces/chat-contact.interface'; +import { Status } from '../enums/status.enum'; + +@Pipe( { + name: 'status' +} ) +export class TlStatusFilterPipe implements PipeTransform { + + transform( value: ChatContact[], status: Status[]): any { + return value.filter((item: ChatContact) => status.indexOf(item.status) >= 0 ); + } + +} diff --git a/projects/truly-ui/src/components/chatlist/services/chat.service.ts b/projects/truly-ui/src/components/chatlist/services/chat.service.ts new file mode 100644 index 000000000..af09e674d --- /dev/null +++ b/projects/truly-ui/src/components/chatlist/services/chat.service.ts @@ -0,0 +1,45 @@ +/* + MIT License + + Copyright (c) 2017 Temainfo Sistemas + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + */ +import { EventEmitter, Injectable, Inject, forwardRef } from '@angular/core'; +import { ChatMessage } from '../interfaces/chat-message.interface'; +import { TlChatList } from '../chatlist'; +import { Status } from '../enums/status.enum'; + +@Injectable() +export class ChatService { + + constructor( @Inject( forwardRef( () => TlChatList ) ) public chat: TlChatList, ) { + } + + loadMessages( messages: ChatMessage[] ) { + this.chat.loadMessages( messages ); + } + + appendMessage( message: ChatMessage ) { + this.chat.appendMessage( message ); + } + + setStatus(status: Status) { + this.chat.setStatus(status); + } + +} diff --git a/projects/truly-ui/src/public_api.ts b/projects/truly-ui/src/public_api.ts index 9be4a4651..0d689fc43 100644 --- a/projects/truly-ui/src/public_api.ts +++ b/projects/truly-ui/src/public_api.ts @@ -70,10 +70,16 @@ export { CalendarStatus } from './components/calendar/calendar'; export { IncrementalSteps } from './components/timepicker/timepicker'; export { PermissionDataConfig } from './components/permissions/parts/interfaces/permission-dataconfig.interface'; +// Chat Interfaces +export { ChatContact } from './components/chatlist/interfaces/chat-contact.interface'; +export { ChatMessage } from './components/chatlist/interfaces/chat-message.interface'; +export { ChatStatus } from './components/chatlist/interfaces/chat-status.interface'; + // Enumerators export { ActionsModal } from './components/core/enums/actions-modal'; export { KeyEvent } from './components/core/enums/key-events'; export { ModalResult } from './components/core/enums/modal-result'; +export { Status } from './components/chatlist/enums/status.enum'; // Services export { DialogService } from './components/dialog/dialog.service'; @@ -81,6 +87,7 @@ export { ModalService } from './components/modal/services/modal.service'; export { NavigatorService } from './components/navigator/services/navigator.service'; export { StopwatchService } from './components/stopwatch/services/stopwatch-service'; export { ToasterService } from './components/toaster/services/toaster.service'; +export { ChatService } from './components/chatlist/services/chat.service'; // Classes export { Permission } from './components/permissions/parts/models/permission.model'; From 118809d1b56565d5c55322428cfaea949b4b0d3b Mon Sep 17 00:00:00 2001 From: Genesson Date: Tue, 9 Apr 2019 09:50:50 -0300 Subject: [PATCH 055/109] feat(avatar): create propertie char of avatar --- .../src/components/avatar/avatar.html | 9 +++++++++ .../truly-ui/src/components/avatar/avatar.ts | 20 +++++++++++++++++-- 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/projects/truly-ui/src/components/avatar/avatar.html b/projects/truly-ui/src/components/avatar/avatar.html index 8ab04825c..1f0910c7d 100644 --- a/projects/truly-ui/src/components/avatar/avatar.html +++ b/projects/truly-ui/src/components/avatar/avatar.html @@ -29,6 +29,15 @@ {{ text }}
+
+
+ {{ char }} +
+
diff --git a/projects/truly-ui/src/components/avatar/avatar.ts b/projects/truly-ui/src/components/avatar/avatar.ts index 579d96b7c..4e60aaf29 100644 --- a/projects/truly-ui/src/components/avatar/avatar.ts +++ b/projects/truly-ui/src/components/avatar/avatar.ts @@ -49,6 +49,8 @@ export class TlAvatar implements OnInit, OnChanges { @Input() text: string; + @Input() char: string; + @Input() fontColor: string; @Input() bgColor: string; @@ -69,8 +71,7 @@ export class TlAvatar implements OnInit, OnChanges { public gravatarImg; - constructor() { - } + constructor() { } ngOnInit() { this.defineType(); @@ -93,6 +94,10 @@ export class TlAvatar implements OnInit, OnChanges { this.setText(); return; } + if ( this.isChar() ) { + this.setChar(); + return; + } } private isSrc() { @@ -111,6 +116,10 @@ export class TlAvatar implements OnInit, OnChanges { return this.text && this.text !== ''; } + private isChar() { + return this.char && this.char !== ''; + } + private setSrc() { this.type = 'src'; } @@ -132,6 +141,13 @@ export class TlAvatar implements OnInit, OnChanges { this.type = 'text'; } + private setChar() { + this.multiplierText = ( this.isPercentage() ) ? 8 : 0.2; + this.fontSize = '2em'; + this.type = 'char'; + this.char = this.char.substr(0, 1).toUpperCase(); + } + public isPercentage() { return this.size.substr(this.size.length - 1) === '%'; } From a29186667fb8c5b51c261f2a62339e69015f2835 Mon Sep 17 00:00:00 2001 From: Genesson Date: Tue, 9 Apr 2019 09:52:41 -0300 Subject: [PATCH 056/109] doc(avatar): add char property to avatar --- src/app/components/avatar/avatardemo.component.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/components/avatar/avatardemo.component.html b/src/app/components/avatar/avatardemo.component.html index 173987db3..cf44689f3 100644 --- a/src/app/components/avatar/avatardemo.component.html +++ b/src/app/components/avatar/avatardemo.component.html @@ -27,14 +27,14 @@
Basic
-
Text
+
Text/Char
- +
From 86a03e217d0a1052f4d36d5bd6399151c999cf9f Mon Sep 17 00:00:00 2001 From: William Aguera Date: Tue, 9 Apr 2019 17:58:14 -0300 Subject: [PATCH 057/109] feat(chatlist): create property avatar to use a source image or gravatar email. --- .../src/components/chatlist/chatlist.html | 26 +++++++++++++++---- .../src/components/chatlist/chatlist.scss | 23 +++++++++------- .../src/components/chatlist/chatlist.ts | 4 ++- .../truly-ui/src/components/chatlist/index.ts | 2 ++ .../interfaces/chat-contact.interface.ts | 1 + .../chatlist/parts/chat-content.html | 9 ++----- .../chatlist/parts/chat-content.scss | 1 - .../components/chatlist/parts/chat-content.ts | 7 +++++ .../chatlist/pipes/status-filter.pipe.ts | 4 ++- 9 files changed, 53 insertions(+), 24 deletions(-) diff --git a/projects/truly-ui/src/components/chatlist/chatlist.html b/projects/truly-ui/src/components/chatlist/chatlist.html index 09beeed11..7e198eca5 100644 --- a/projects/truly-ui/src/components/chatlist/chatlist.html +++ b/projects/truly-ui/src/components/chatlist/chatlist.html @@ -1,4 +1,4 @@ -
+
@@ -17,7 +17,7 @@
-
+
@@ -34,12 +34,16 @@
- + +
{{ item.name }} {{ item.description }}
-
Me
{{ getUnreadMessages(item.id)?.length }}
@@ -51,9 +55,21 @@
{{ partner?.name }}
+ +
- + + diff --git a/projects/truly-ui/src/components/chatlist/chatlist.scss b/projects/truly-ui/src/components/chatlist/chatlist.scss index 42a16f531..af0722189 100644 --- a/projects/truly-ui/src/components/chatlist/chatlist.scss +++ b/projects/truly-ui/src/components/chatlist/chatlist.scss @@ -1,14 +1,13 @@ .chat-wrapper { - border-radius: 5px; overflow: hidden; - border: 1px solid #eae7e7ee; min-width: 300px !important; + background: #f1f1f1; .chat-header { display: flex; position: relative; align-items: center; place-content: space-evenly; - height: 40px; + height: 35px; flex-wrap: wrap; background: rgb(102,204,153); background: linear-gradient(90deg, rgba(102,204,153,1) 0%, rgba(116,222,130,1) 100%); @@ -31,9 +30,10 @@ border-radius: 10px; height: 100%; transition: transform 300ms ease-in-out; + box-sizing: border-box; .chat-arrow { border: solid 10px transparent; - margin: 15px 0 0 22px; + margin: 12px 0 0 22px; border-right-color: #F0F0F0; position: absolute; transform: rotateZ(90deg); @@ -63,13 +63,13 @@ .chat-content { padding: 10px; - background: #f1f1f1; overflow-y: auto; overflow-x: hidden; >.chat-item { display: flex; align-items: center; padding: 10px; + height: 65px; box-sizing: border-box; background: white; margin: 5px 0; @@ -81,12 +81,12 @@ border: 1px solid transparent; .chat-img { - width: 45px; - height: 45px; - border-radius: 50%; padding: 2px; + border-radius: 50%; border-style: solid; border-width: 2px; + place-content: center; + display: flex; } .chat-item-detail { @@ -154,7 +154,12 @@ padding: 0 8px; } } - .chat-partner { + > .chat-img { + position: absolute; + right: 10px; + border-radius: 50%; + } + > .chat-partner { padding: 0 10px; } } diff --git a/projects/truly-ui/src/components/chatlist/chatlist.ts b/projects/truly-ui/src/components/chatlist/chatlist.ts index d1e88a92c..eadbc3680 100644 --- a/projects/truly-ui/src/components/chatlist/chatlist.ts +++ b/projects/truly-ui/src/components/chatlist/chatlist.ts @@ -52,7 +52,9 @@ export class TlChatList implements AfterViewInit, OnDestroy { @Input('contacts') set contacts( data: ChatContact[] ) { - this._dataSource = data.filter((item) => item.id !== this.user.id); + if (data && data.length > 0) { + this._dataSource = data.filter((item) => item.id !== this.user.id); + } } get contacts(): ChatContact[] { diff --git a/projects/truly-ui/src/components/chatlist/index.ts b/projects/truly-ui/src/components/chatlist/index.ts index 544232b36..29230fa62 100644 --- a/projects/truly-ui/src/components/chatlist/index.ts +++ b/projects/truly-ui/src/components/chatlist/index.ts @@ -9,11 +9,13 @@ import { TlChatContent } from './parts/chat-content'; import { IconsModule } from '../icons/index'; import { TlStatusFilterPipe } from './pipes/status-filter.pipe'; import { ChatService } from './services/chat.service'; +import { AvatarModule } from '../avatar/index'; @NgModule({ imports: [ CommonModule, FormsModule, + AvatarModule, ReactiveFormsModule, MiscModule, ListBoxModule, diff --git a/projects/truly-ui/src/components/chatlist/interfaces/chat-contact.interface.ts b/projects/truly-ui/src/components/chatlist/interfaces/chat-contact.interface.ts index 4125ef873..bc9f61411 100644 --- a/projects/truly-ui/src/components/chatlist/interfaces/chat-contact.interface.ts +++ b/projects/truly-ui/src/components/chatlist/interfaces/chat-contact.interface.ts @@ -28,4 +28,5 @@ name: string; description: string; status: Status; + avatar?: string; } diff --git a/projects/truly-ui/src/components/chatlist/parts/chat-content.html b/projects/truly-ui/src/components/chatlist/parts/chat-content.html index b937cc5fd..163b8ceef 100644 --- a/projects/truly-ui/src/components/chatlist/parts/chat-content.html +++ b/projects/truly-ui/src/components/chatlist/parts/chat-content.html @@ -1,17 +1,13 @@ -
- -
+
+
- - -
@@ -35,7 +31,6 @@
-

{{ message?.message }}

diff --git a/projects/truly-ui/src/components/chatlist/parts/chat-content.scss b/projects/truly-ui/src/components/chatlist/parts/chat-content.scss index 2b448bcbc..e11141628 100644 --- a/projects/truly-ui/src/components/chatlist/parts/chat-content.scss +++ b/projects/truly-ui/src/components/chatlist/parts/chat-content.scss @@ -30,7 +30,6 @@ align-items: flex-start; animation: showIn 100ms ease-in forwards; - > .chat-text-content { display: flex; align-items: flex-end; diff --git a/projects/truly-ui/src/components/chatlist/parts/chat-content.ts b/projects/truly-ui/src/components/chatlist/parts/chat-content.ts index ead85130c..15057024d 100644 --- a/projects/truly-ui/src/components/chatlist/parts/chat-content.ts +++ b/projects/truly-ui/src/components/chatlist/parts/chat-content.ts @@ -26,6 +26,7 @@ import { FormControl, Validators } from '@angular/forms'; import { ChatContact } from '../interfaces/chat-contact.interface'; import { ChatMessage } from '../interfaces/chat-message.interface'; import { Subscription } from 'rxjs'; +import { ChatStatus } from '../interfaces/chat-status.interface'; @Component( { selector: 'tl-chat-content', @@ -42,6 +43,12 @@ export class TlChatContent implements AfterViewInit, OnDestroy, OnChanges { @Input() messages: ChatMessage[] = []; + @Input() chatStatus: ChatStatus = { + busy: '#ffc019', + online: '#66cc99', + offline: '#ff3100' + }; + @Output() message: EventEmitter<{ value: string, time: Date }> = new EventEmitter(); @ViewChild('input') input: ElementRef; diff --git a/projects/truly-ui/src/components/chatlist/pipes/status-filter.pipe.ts b/projects/truly-ui/src/components/chatlist/pipes/status-filter.pipe.ts index 518621757..6b83f4ad8 100644 --- a/projects/truly-ui/src/components/chatlist/pipes/status-filter.pipe.ts +++ b/projects/truly-ui/src/components/chatlist/pipes/status-filter.pipe.ts @@ -29,7 +29,9 @@ import { Status } from '../enums/status.enum'; export class TlStatusFilterPipe implements PipeTransform { transform( value: ChatContact[], status: Status[]): any { - return value.filter((item: ChatContact) => status.indexOf(item.status) >= 0 ); + if (value && value.length > 0) { + return value.filter((item: ChatContact) => status.indexOf(item.status) >= 0 ); + } } } From 0672707108d3da657cea2ffed9dacdaf3dceed39 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Wed, 10 Apr 2019 16:10:51 -0300 Subject: [PATCH 058/109] refact(overlay-panel): remove property color and add an event to dispatch when overlay hides. --- .../overlaypanel/overlay-panel-theme.scss | 28 ------------------- .../overlaypanel/overlay-panel.html | 4 +-- .../overlaypanel/overlay-panel.scss | 1 - .../components/overlaypanel/overlay-panel.ts | 13 +++++++-- 4 files changed, 12 insertions(+), 34 deletions(-) diff --git a/projects/truly-ui/src/components/overlaypanel/overlay-panel-theme.scss b/projects/truly-ui/src/components/overlaypanel/overlay-panel-theme.scss index bce2848c1..3e0ad9520 100644 --- a/projects/truly-ui/src/components/overlaypanel/overlay-panel-theme.scss +++ b/projects/truly-ui/src/components/overlaypanel/overlay-panel-theme.scss @@ -2,39 +2,11 @@ @mixin _tl-overlay-panel-theme-schema( $theme, $action ){ - background-color: map-deep-get($theme, $action, "default", "background"); - border: 1px solid map-deep-get($theme, $action, "default", "border"); - color: map-deep-get($theme, $action, "default", "foreground"); - transition: background ease-in-out 100ms; - } @mixin tl-overlay-panel-theme( $theme ) { .ui-wrapper-overlay-panel { - &.basic { - @include _tl-overlay-panel-theme-schema($theme, 'basic') - } - - &.primary { - @include _tl-overlay-panel-theme-schema($theme, 'primary') - } - - &.success { - @include _tl-overlay-panel-theme-schema($theme, 'success') - } - - &.danger { - @include _tl-overlay-panel-theme-schema($theme, 'danger') - } - - &.warning { - @include _tl-overlay-panel-theme-schema($theme, 'warning') - } - - &.information { - @include _tl-overlay-panel-theme-schema($theme, 'information') - } } } diff --git a/projects/truly-ui/src/components/overlaypanel/overlay-panel.html b/projects/truly-ui/src/components/overlaypanel/overlay-panel.html index 6205ae4ab..6c83a3448 100644 --- a/projects/truly-ui/src/components/overlaypanel/overlay-panel.html +++ b/projects/truly-ui/src/components/overlaypanel/overlay-panel.html @@ -1,11 +1,11 @@ -
+
diff --git a/projects/truly-ui/src/components/overlaypanel/overlay-panel.scss b/projects/truly-ui/src/components/overlaypanel/overlay-panel.scss index 5c1a2fe57..8b4620f75 100644 --- a/projects/truly-ui/src/components/overlaypanel/overlay-panel.scss +++ b/projects/truly-ui/src/components/overlaypanel/overlay-panel.scss @@ -6,5 +6,4 @@ position: relative; width: 100%; height: 100%; - padding: 10px; } diff --git a/projects/truly-ui/src/components/overlaypanel/overlay-panel.ts b/projects/truly-ui/src/components/overlaypanel/overlay-panel.ts index 692f15c31..3fc3b5761 100644 --- a/projects/truly-ui/src/components/overlaypanel/overlay-panel.ts +++ b/projects/truly-ui/src/components/overlaypanel/overlay-panel.ts @@ -36,12 +36,12 @@ export class TlOverlayPanel implements OnInit, AfterContentInit { @Input() elementOrigin; - @Input() color = 'basic'; - @Input() width = '100%'; @Output() show: EventEmitter = new EventEmitter(); + @Output() hide: EventEmitter = new EventEmitter(); + @ViewChild( CdkConnectedOverlay ) cdkOverlay: CdkConnectedOverlay; public isOpen = false; @@ -60,7 +60,7 @@ export class TlOverlayPanel implements OnInit, AfterContentInit { private listenElementOrigin() { if ( this.elementOrigin ) { this.renderer.listen( this.getTargetElement(), 'click', () => { - this.isOpen = !this.isOpen; + this.toggle(); } ); } } @@ -79,16 +79,23 @@ export class TlOverlayPanel implements OnInit, AfterContentInit { return this.elementOrigin instanceof TlButton; } + onBackdropClick() { + this.close(); + } + open() { this.isOpen = true; + this.show.emit(); } close() { this.isOpen = false; + this.hide.emit(); } toggle() { this.isOpen = !this.isOpen; + this.isOpen ? this.show.emit() : this.hide.emit(); } From 4aac4c1c423401c82e21cb3a41943f4a7d23537a Mon Sep 17 00:00:00 2001 From: William Aguera Date: Wed, 10 Apr 2019 16:36:05 -0300 Subject: [PATCH 059/109] docs(overlay-panel): update docs --- .../overlay-paneldemo-events.json.ts | 4 + .../overlay-paneldemo.component.html | 82 +++++++++++-------- .../overlay-paneldemo.component.scss | 20 +++++ 3 files changed, 70 insertions(+), 36 deletions(-) diff --git a/src/app/components/overlaypanel/overlay-paneldemo-events.json.ts b/src/app/components/overlaypanel/overlay-paneldemo-events.json.ts index d0a3546a3..cee402b63 100644 --- a/src/app/components/overlaypanel/overlay-paneldemo-events.json.ts +++ b/src/app/components/overlaypanel/overlay-paneldemo-events.json.ts @@ -3,4 +3,8 @@ export const dataEvents = [ name: 'show', description: 'Dispatched when the overlay panel show up', }, + { + name: 'hide', + description: 'Dispatched when the overlay panel hides', + }, ]; diff --git a/src/app/components/overlaypanel/overlay-paneldemo.component.html b/src/app/components/overlaypanel/overlay-paneldemo.component.html index 3c5f1805d..7fadb748d 100644 --- a/src/app/components/overlaypanel/overlay-paneldemo.component.html +++ b/src/app/components/overlaypanel/overlay-paneldemo.component.html @@ -9,12 +9,14 @@
-

- The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
- Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their - exact original form, - accompanied by English versions from the 1914 translation by H. Rackham. -

+
+

+ The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
+ Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their + exact original form, + accompanied by English versions from the 1914 translation by H. Rackham. +

+
@@ -28,18 +30,20 @@
- -

- The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
- Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their - exact original form, - accompanied by English versions from the 1914 translation by H. Rackham. -

+ +
+

+ The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
+ Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their + exact original form, + accompanied by English versions from the 1914 translation by H. Rackham. +

+
- + usuario > GENESSON para
@@ -64,12 +26,12 @@
- + - +
diff --git a/src/app/components/chatlist/chatlistdemo.component.ts b/src/app/components/chatlist/chatlistdemo.component.ts index 92cb59e96..9a8d193ef 100644 --- a/src/app/components/chatlist/chatlistdemo.component.ts +++ b/src/app/components/chatlist/chatlistdemo.component.ts @@ -19,63 +19,56 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -import { Component } from '@angular/core'; +import { AfterViewInit, Component, ViewChild } from '@angular/core'; import * as json from './chatlistdemo-dataproperties.json'; import * as jsonMethods from './chatlistdemo-methods.json'; - - import { DumpDataService } from '../../shared/services/dumpdata'; -import { ChatListService } from '../../../../projects/truly-ui/src/components/chatlist/chatlist.service'; +import { Status } from '../../../../projects/truly-ui/src/components/chatlist/enums/status.enum'; +import { ChatContact } from '../../../../projects/truly-ui/src/components/chatlist/interfaces/chat-contact.interface'; +import { Chat2Component } from './chat2/chat2.component'; +import { Chat3Component } from './chat3/chat3.component'; +import { ChatService } from '../../../../projects/truly-ui/src/components/chatlist/services/chat.service'; @Component( { selector : 'app-chat', templateUrl : './chatlistdemo.component.html', styleUrls : [ './chatlistdemo.component.scss' ], - providers: [ChatListService] } ) -export class ChatListDemoComponent { +export class ChatListDemoComponent implements AfterViewInit { public dataTableProperties; - public dataSource = []; + public contacts: ChatContact[] = [ + { id: '1', name: 'William Aguera', description: 'Médico Ortopedista', status: Status.ONLINE, avatar: 'williamaguera.m@hotmail.com' }, + { id: '200', name: 'Genesson', description: 'Médico Geriatra', status: Status.ONLINE, avatar: 'genesson_sauer@hotmail.com' }, + { id: '300', name: 'Adilson', description: 'Médico Otorrino', status: Status.BUSY, avatar: 'adilson@temainfo.com.br' } + ]; - public dataMethods = []; + public user2 = { id: '1', name: 'William Aguera', description: 'Médico Ortopedista', status: Status.ONLINE }; - public selected; + public user3 = { id: '200', name: 'Genesson', description: 'Médico Geriatra', status: Status.ONLINE }; - constructor( public dataDumpService: DumpDataService, public chatListService: ChatListService ) { - this.dataTableProperties = json.dataProperties; - this.dataMethods = jsonMethods.dataMethods; - this.dataSource = this.dataDumpService.createRandomData( 100 ); - } + public appendChat2; - clickChat( $event ) { - this.selected = $event; - } + public appendChat3; - changeBusy() { - if ( this.selected ) { - this.chatListService.changeStatus( this.selected, 'Busy' ); - } + constructor(private chatService: ChatService) { + this.dataTableProperties = json.dataProperties; } - changeOnline() { - if ( this.selected ) { - this.chatListService.changeStatus( this.selected, 'Online' ); - } + ngAfterViewInit() { } - changeOffline() { - if ( this.selected ) { - this.chatListService.changeStatus( this.selected, 'Offline' ); + onSendMessage($event) { + console.log('evt to', $event); + switch ($event.to.id) { + case this.user3.id: this.chatService.appendMessage($event); + break; + case this.user2.id: this.chatService.appendMessage($event); + break; } } - changeAway() { - if ( this.selected ) { - this.chatListService.changeStatus( this.selected, 'Away' ); - } - } } diff --git a/src/app/components/chatlist/chatlistdemo.module.ts b/src/app/components/chatlist/chatlistdemo.module.ts index ef1b4c8c3..3f2a729be 100644 --- a/src/app/components/chatlist/chatlistdemo.module.ts +++ b/src/app/components/chatlist/chatlistdemo.module.ts @@ -16,14 +16,17 @@ import { ShowcaseCardModule } from '../../shared/components/showcase-card/showca import { ShowcaseTablePropertiesModule } from '../../shared/components/showcase-table-properties/showcase-table-properties.module'; import { ShowcaseTableEventsModule } from '../../shared/components/showcase-table-events/showcase-table-events.module'; import { ShowcaseHeaderModule } from '../../shared/components/showcase-header/showcase-header.module'; +import { Chat2Module } from './chat2/chat2.module'; +import { Chat3Module } from './chat3/chat3.module'; @NgModule( { declarations: [ - ChatListDemoComponent + ChatListDemoComponent, ], imports: [ ChatListDemoRoutingModule, - ChatListModule, + Chat2Module, + Chat3Module, InputModule, CommonModule, ButtonModule, From d355d8f5ef3e379c46ca0488c7e922ad6fcf541a Mon Sep 17 00:00:00 2001 From: William Aguera Date: Thu, 25 Apr 2019 10:50:33 -0300 Subject: [PATCH 094/109] docs(sidebar): update documentation --- src/app/components/sidebar/sidebardemo.component.html | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/app/components/sidebar/sidebardemo.component.html b/src/app/components/sidebar/sidebardemo.component.html index 2f0dc4014..09b58047c 100644 --- a/src/app/components/sidebar/sidebardemo.component.html +++ b/src/app/components/sidebar/sidebardemo.component.html @@ -180,14 +180,7 @@
Dock Usage

- - + Content Chat From ccf633cfa8502eff7107a4a845e73992fafb69db Mon Sep 17 00:00:00 2001 From: William Aguera Date: Thu, 25 Apr 2019 11:05:11 -0300 Subject: [PATCH 095/109] docs(sidebar): remove chatlist of sidebar temporality --- .../sidebar/sidebardemo.component.html | 27 +++---------------- 1 file changed, 3 insertions(+), 24 deletions(-) diff --git a/src/app/components/sidebar/sidebardemo.component.html b/src/app/components/sidebar/sidebardemo.component.html index 09b58047c..ca96882b9 100644 --- a/src/app/components/sidebar/sidebardemo.component.html +++ b/src/app/components/sidebar/sidebardemo.component.html @@ -38,14 +38,7 @@
Push Usage

- - + Chat Content @@ -102,14 +95,7 @@
Slide Usage

- - + Chat Content @@ -242,14 +228,7 @@
Over Usage

- - + Chat Content From c4aa7deafa8a0e32589c89092c6f68635142dc3b Mon Sep 17 00:00:00 2001 From: Genesson Date: Thu, 25 Apr 2019 16:20:49 -0300 Subject: [PATCH 096/109] feat(overlaypanel): create propertie isOpen --- projects/truly-ui/src/components/overlaypanel/overlay-panel.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/truly-ui/src/components/overlaypanel/overlay-panel.ts b/projects/truly-ui/src/components/overlaypanel/overlay-panel.ts index 3fc3b5761..3bce51acc 100644 --- a/projects/truly-ui/src/components/overlaypanel/overlay-panel.ts +++ b/projects/truly-ui/src/components/overlaypanel/overlay-panel.ts @@ -44,7 +44,7 @@ export class TlOverlayPanel implements OnInit, AfterContentInit { @ViewChild( CdkConnectedOverlay ) cdkOverlay: CdkConnectedOverlay; - public isOpen = false; + @Input() isOpen = false; constructor( private renderer: Renderer2 ) {} From 665e351eac6c67f3507ba50a311ab68ac835061e Mon Sep 17 00:00:00 2001 From: Genesson Date: Thu, 25 Apr 2019 16:34:22 -0300 Subject: [PATCH 097/109] fix(overlaypnel): remover input --- projects/truly-ui/src/components/overlaypanel/overlay-panel.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/truly-ui/src/components/overlaypanel/overlay-panel.ts b/projects/truly-ui/src/components/overlaypanel/overlay-panel.ts index 3bce51acc..3fc3b5761 100644 --- a/projects/truly-ui/src/components/overlaypanel/overlay-panel.ts +++ b/projects/truly-ui/src/components/overlaypanel/overlay-panel.ts @@ -44,7 +44,7 @@ export class TlOverlayPanel implements OnInit, AfterContentInit { @ViewChild( CdkConnectedOverlay ) cdkOverlay: CdkConnectedOverlay; - @Input() isOpen = false; + public isOpen = false; constructor( private renderer: Renderer2 ) {} From 0116218abe158391cf4089fd55d712329c634b4f Mon Sep 17 00:00:00 2001 From: William Aguera Date: Fri, 26 Apr 2019 10:28:26 -0300 Subject: [PATCH 098/109] fix(switch): fix switch indicator not moving in straight line. (#290) --- projects/truly-ui/src/components/switch/switch.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/projects/truly-ui/src/components/switch/switch.scss b/projects/truly-ui/src/components/switch/switch.scss index aa37c4a25..13ed4ff17 100644 --- a/projects/truly-ui/src/components/switch/switch.scss +++ b/projects/truly-ui/src/components/switch/switch.scss @@ -33,6 +33,7 @@ bottom: 0; -webkit-transition: .2s; transition: .2s; + border: 1px solid transparent; } .label { @@ -50,19 +51,17 @@ content: ""; height: 14px; width: 14px; - left: 4px; - bottom: 2px; + left: 3px; transition: .2s; + top: 1px; } input:checked + .slider:before { -webkit-transform: translateX(13px); -ms-transform: translateX(13px); transform: translateX(13px); - bottom: 1px; } - /* Rounded sliders */ .slider.round { border-radius: 34px; } From 3eb2a8adefeb814356ab34164a7077415b4b8ea3 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Fri, 26 Apr 2019 10:56:38 -0300 Subject: [PATCH 099/109] refact(chatlist): refact chat content of chatlist component. --- .../chatlist/parts/chat-content.scss | 23 +++++++++++++++---- .../components/chatlist/parts/chat-content.ts | 10 +++----- 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/projects/truly-ui/src/components/chatlist/parts/chat-content.scss b/projects/truly-ui/src/components/chatlist/parts/chat-content.scss index f49ed997f..8a6497bc5 100644 --- a/projects/truly-ui/src/components/chatlist/parts/chat-content.scss +++ b/projects/truly-ui/src/components/chatlist/parts/chat-content.scss @@ -5,6 +5,18 @@ .chat-messages-content { overflow-y: auto; height: 410px; + background: rgb(229, 221, 213); + &:before { + content: ''; + // background: url("assets/images/bgchat.png") repeat repeat; + width: 100%; + height: 100%; + top: 0; + left: 0; + position: absolute; + opacity: 0.06; + z-index: 0; + } &::-webkit-scrollbar { background: white; width: 5px; @@ -26,14 +38,16 @@ } .chat-time { - padding: 2px 0; - background: #e6e6e6; + background-color: rgba(225, 245, 254, 0.92); + border-radius: 7.5px; + box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13); + padding: 5px 12px 6px 12px; + text-align: center; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); border: 1px solid #dedede; - border-radius: 5px; width: 100px; position: relative; left: calc(50% - 50px); - text-align: center; font-family: Segoe UI,serif; font-size: .9em; color: #868686; @@ -42,6 +56,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; + white-space: nowrap; } .chat-partner { diff --git a/projects/truly-ui/src/components/chatlist/parts/chat-content.ts b/projects/truly-ui/src/components/chatlist/parts/chat-content.ts index ad8a4d4a4..d8bf36259 100644 --- a/projects/truly-ui/src/components/chatlist/parts/chat-content.ts +++ b/projects/truly-ui/src/components/chatlist/parts/chat-content.ts @@ -21,16 +21,12 @@ */ import { Component, AfterViewInit, Output, Input, EventEmitter, ViewChild, ElementRef, OnDestroy, SimpleChanges, OnChanges, - LOCALE_ID } from '@angular/core'; import { FormControl, Validators } from '@angular/forms'; import { ChatContact } from '../interfaces/chat-contact.interface'; import { ChatMessage } from '../interfaces/chat-message.interface'; import { Subscription } from 'rxjs'; import { ChatStatus } from '../interfaces/chat-status.interface'; -import { ChatService } from '../services/chat.service'; -import { message } from '../../input/core/validate'; -import { ReverseFormatDate } from '../../core/helper/reverseformatdate'; import { DatePipe } from '@angular/common'; @Component( { @@ -51,9 +47,9 @@ export class TlChatContent implements AfterViewInit, OnDestroy, OnChanges { @Input() messages: ChatMessage[] = []; @Input() chatStatus: ChatStatus = { - busy: '#ffc019', - online: '#66cc99', - offline: '#ff3100' + BUSY: '#ffc019', + ONLINE: '#66cc99', + OFFLINE: '#ff3100' }; @Output() message: EventEmitter<{ value: string, time: Date }> = new EventEmitter(); From 1974d1c7e12db1ca08cf175980bab005fd459cc0 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Fri, 26 Apr 2019 11:00:58 -0300 Subject: [PATCH 100/109] refact(chatlist): change case to uppercase of chat status types. --- .../src/components/chatlist/chatlist.html | 6 +++--- .../src/components/chatlist/chatlist.scss | 2 +- .../src/components/chatlist/chatlist.ts | 20 +++++++++---------- .../components/chatlist/enums/status.enum.ts | 6 +++--- .../interfaces/chat-contact.interface.ts | 2 +- .../interfaces/chat-status.interface.ts | 6 +++--- .../chatlist/pipes/status-filter.pipe.ts | 2 +- 7 files changed, 22 insertions(+), 22 deletions(-) diff --git a/projects/truly-ui/src/components/chatlist/chatlist.html b/projects/truly-ui/src/components/chatlist/chatlist.html index ab5146935..e08242626 100644 --- a/projects/truly-ui/src/components/chatlist/chatlist.html +++ b/projects/truly-ui/src/components/chatlist/chatlist.html @@ -3,12 +3,12 @@
-
+
Chats
-
+
Online
-
+
Offline
diff --git a/projects/truly-ui/src/components/chatlist/chatlist.scss b/projects/truly-ui/src/components/chatlist/chatlist.scss index ca7c10e3d..bb205d7ca 100644 --- a/projects/truly-ui/src/components/chatlist/chatlist.scss +++ b/projects/truly-ui/src/components/chatlist/chatlist.scss @@ -57,7 +57,7 @@ padding: 10px; height: 65px; box-sizing: border-box; - margin: 5px 0; + margin-bottom: 10px; border-radius: 5px; animation: showInChatItem 250ms ease-in forwards; transition: background, border 300ms linear; diff --git a/projects/truly-ui/src/components/chatlist/chatlist.ts b/projects/truly-ui/src/components/chatlist/chatlist.ts index e705207fd..f33c37e59 100644 --- a/projects/truly-ui/src/components/chatlist/chatlist.ts +++ b/projects/truly-ui/src/components/chatlist/chatlist.ts @@ -20,7 +20,7 @@ SOFTWARE. */ import { - Component, ElementRef, EventEmitter, Input, OnChanges, Renderer2, SimpleChanges, ViewChild, Output, AfterViewInit, + Component, ElementRef, EventEmitter, Input, Renderer2, ViewChild, Output, AfterViewInit, OnDestroy } from '@angular/core'; import { ChatStatus } from './interfaces/chat-status.interface'; @@ -46,9 +46,9 @@ export class TlChatList implements AfterViewInit, OnDestroy { @Input() loadingMessages = false; @Input() chatStatus: ChatStatus = { - busy: '#ffc019', - online: '#66cc99', - offline: '#ff3100' + BUSY: '#ffc019', + ONLINE: '#66cc99', + OFFLINE: '#ff3100' }; @Input() partner: ChatContact; @@ -78,7 +78,7 @@ export class TlChatList implements AfterViewInit, OnDestroy { public transform = '100px'; - public selected = 'online'; + public selected = 'ONLINE'; public insideChat = false; @@ -177,15 +177,15 @@ export class TlChatList implements AfterViewInit, OnDestroy { } selectStatus(status) { - if (status === 'online') { + if (status === 'ONLINE') { this.transform = '100px'; - this.selected = 'online'; - } else if (status === 'offline') { + this.selected = 'ONLINE'; + } else if (status === 'OFFLINE') { this.transform = '200px'; - this.selected = 'offline'; + this.selected = 'OFFLINE'; } else { this.transform = '0'; - this.selected = 'chat'; + this.selected = 'CHAT'; } } diff --git a/projects/truly-ui/src/components/chatlist/enums/status.enum.ts b/projects/truly-ui/src/components/chatlist/enums/status.enum.ts index d28c8dd9e..66386ddb4 100644 --- a/projects/truly-ui/src/components/chatlist/enums/status.enum.ts +++ b/projects/truly-ui/src/components/chatlist/enums/status.enum.ts @@ -22,7 +22,7 @@ SOFTWARE. */ export enum Status { - ONLINE = 'online', - OFFLINE = 'offline', - BUSY = 'busy' + ONLINE = 'ONLINE', + OFFLINE = 'OFFLINE', + BUSY = 'BUSY' } diff --git a/projects/truly-ui/src/components/chatlist/interfaces/chat-contact.interface.ts b/projects/truly-ui/src/components/chatlist/interfaces/chat-contact.interface.ts index bc9f61411..b9b61fd8c 100644 --- a/projects/truly-ui/src/components/chatlist/interfaces/chat-contact.interface.ts +++ b/projects/truly-ui/src/components/chatlist/interfaces/chat-contact.interface.ts @@ -27,6 +27,6 @@ id: string | number; name: string; description: string; - status: Status; + status: Status | string; avatar?: string; } diff --git a/projects/truly-ui/src/components/chatlist/interfaces/chat-status.interface.ts b/projects/truly-ui/src/components/chatlist/interfaces/chat-status.interface.ts index 836720b40..9081041dd 100644 --- a/projects/truly-ui/src/components/chatlist/interfaces/chat-status.interface.ts +++ b/projects/truly-ui/src/components/chatlist/interfaces/chat-status.interface.ts @@ -22,7 +22,7 @@ SOFTWARE. */ export interface ChatStatus { - busy: string; - online: string; - offline: string; + BUSY: string; + ONLINE: string; + OFFLINE: string; } diff --git a/projects/truly-ui/src/components/chatlist/pipes/status-filter.pipe.ts b/projects/truly-ui/src/components/chatlist/pipes/status-filter.pipe.ts index 6b83f4ad8..322abe099 100644 --- a/projects/truly-ui/src/components/chatlist/pipes/status-filter.pipe.ts +++ b/projects/truly-ui/src/components/chatlist/pipes/status-filter.pipe.ts @@ -28,7 +28,7 @@ import { Status } from '../enums/status.enum'; } ) export class TlStatusFilterPipe implements PipeTransform { - transform( value: ChatContact[], status: Status[]): any { + transform( value: ChatContact[], status: any): any { if (value && value.length > 0) { return value.filter((item: ChatContact) => status.indexOf(item.status) >= 0 ); } From c1a809986bfef5f0000eba52e0a9873a406684d4 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Fri, 26 Apr 2019 11:06:35 -0300 Subject: [PATCH 101/109] refact(message-filter): remove not used imports. --- .../src/components/chatlist/pipes/message-filter.pipe.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/projects/truly-ui/src/components/chatlist/pipes/message-filter.pipe.ts b/projects/truly-ui/src/components/chatlist/pipes/message-filter.pipe.ts index 254b5be73..1f9157b75 100644 --- a/projects/truly-ui/src/components/chatlist/pipes/message-filter.pipe.ts +++ b/projects/truly-ui/src/components/chatlist/pipes/message-filter.pipe.ts @@ -20,8 +20,6 @@ SOFTWARE. */ import { PipeTransform, Pipe } from '@angular/core'; -import { ChatContact } from '../interfaces/chat-contact.interface'; -import { Status } from '../enums/status.enum'; import { ChatMessage } from '../interfaces/chat-message.interface'; @Pipe( { From f032ea88b663934bb86c299d2f2b82f908c353fc Mon Sep 17 00:00:00 2001 From: William Aguera Date: Fri, 26 Apr 2019 16:46:37 -0300 Subject: [PATCH 102/109] refact(textarea): remove message validation component of textarea. --- .../messagevalidation.component.html | 5 -- .../messagevalidation.component.scss | 46 ----------------- .../messagevalidation.component.ts | 51 ------------------- .../truly-ui/src/components/textarea/index.ts | 3 -- 4 files changed, 105 deletions(-) delete mode 100644 projects/truly-ui/src/components/textarea/components/messagevalidation/messagevalidation.component.html delete mode 100644 projects/truly-ui/src/components/textarea/components/messagevalidation/messagevalidation.component.scss delete mode 100644 projects/truly-ui/src/components/textarea/components/messagevalidation/messagevalidation.component.ts diff --git a/projects/truly-ui/src/components/textarea/components/messagevalidation/messagevalidation.component.html b/projects/truly-ui/src/components/textarea/components/messagevalidation/messagevalidation.component.html deleted file mode 100644 index bc0de6067..000000000 --- a/projects/truly-ui/src/components/textarea/components/messagevalidation/messagevalidation.component.html +++ /dev/null @@ -1,5 +0,0 @@ -
-
    -
  • {{item}}
    • -
-
diff --git a/projects/truly-ui/src/components/textarea/components/messagevalidation/messagevalidation.component.scss b/projects/truly-ui/src/components/textarea/components/messagevalidation/messagevalidation.component.scss deleted file mode 100644 index 60439d5f0..000000000 --- a/projects/truly-ui/src/components/textarea/components/messagevalidation/messagevalidation.component.scss +++ /dev/null @@ -1,46 +0,0 @@ -.ui-wrapper-messages { - background: rgba(#F77171, 0.9); - border-left: 1px solid #F77171; - border-right: 1px solid #F77171; - animation-name: creating; - animation-duration: 200ms; - z-index: 1000; - > ul { - padding: 0; - list-style-type: none; - margin: 0; - } - > ul li { - color: #fff; - padding: 5px 10px; - font-family: "Segoe UI", Lato, 'sans-serif', "Arial"; - font-size: 14px; - } - > ul li i { - font-size: 14px; - padding-right: 5px; - } -} - -@keyframes creating { - 0% { - opacity: 0; - transform: translateY(0); - } - 25% { - opacity: 0.25; - transform: translateY(0.25); - } - 50% { - opacity: 0.5; - transform: translateY(0.5); - } - 75% { - opacity: 0.75; - transform: translateY(0.75); - } - 100% { - opacity: 1; - transform: translateY(1); - } -} diff --git a/projects/truly-ui/src/components/textarea/components/messagevalidation/messagevalidation.component.ts b/projects/truly-ui/src/components/textarea/components/messagevalidation/messagevalidation.component.ts deleted file mode 100644 index 41ebd520b..000000000 --- a/projects/truly-ui/src/components/textarea/components/messagevalidation/messagevalidation.component.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { Component, ElementRef, Input, OnChanges } from '@angular/core'; -import { I18nService } from '../../../i18n/i18n.service'; -import * as stringFormat from 'string-format'; -const format = stringFormat; - -@Component({ - selector: 'tl-messagevalidation', - templateUrl: './messagevalidation.component.html', - styleUrls: ['./messagevalidation.component.scss'], -}) -export class TlMessageValidationComponent implements OnChanges { - - @Input() errors = []; - - @Input() width = ''; - - public messages = []; - - constructor( public element: ElementRef, private i18n: I18nService ) { } - - setMessages() { - this.messages = []; - if (this.errors) { - Object.keys(this.errors).forEach(( key ) => { - if (key === 'required') { - this.messages.push(this.i18n.getLocale().Validators.fieldRequired); - return; - } - if (key === 'minlength') { - const requiredLength = this.errors['minlength']['requiredLength']; - this.messages.push(format(this.i18n.getLocale().Validators.invalidMinLength, requiredLength)); - return; - } - if (key === 'email') { - this.messages.push(format(this.i18n.getLocale().Validators.invalidEmail)); - return; - } - if (key === 'pattern') { - this.messages.push(this.i18n.getLocale().Validators.patternNotMatch); - return; - } - this.messages.push(this.errors[key]); - }); - } - } - - ngOnChanges() { - this.setMessages(); - } - -} diff --git a/projects/truly-ui/src/components/textarea/index.ts b/projects/truly-ui/src/components/textarea/index.ts index f5ba02a60..7dd6f2087 100644 --- a/projects/truly-ui/src/components/textarea/index.ts +++ b/projects/truly-ui/src/components/textarea/index.ts @@ -7,7 +7,6 @@ import { TlTextarea } from './textarea'; import { InternalsModule } from '../internals/index'; import { IconsModule } from '../icons/index'; import { ValidatorsModule } from '../validators/index'; -import { TlMessageValidationComponent } from './components/messagevalidation/messagevalidation.component'; @NgModule({ imports: [ @@ -20,11 +19,9 @@ import { TlMessageValidationComponent } from './components/messagevalidation/mes ], declarations: [ TlTextarea, - TlMessageValidationComponent ], exports: [ TlTextarea, - TlMessageValidationComponent ] }) export class TextareaModule {} From 941c559171b45c6c4dd35c7ee6e027fd5ae311ce Mon Sep 17 00:00:00 2001 From: William Aguera Date: Fri, 26 Apr 2019 16:47:53 -0300 Subject: [PATCH 103/109] refact(input): remove showValidations property of input. --- projects/truly-ui/src/components/input/input.html | 11 ----------- projects/truly-ui/src/components/input/input.ts | 3 --- 2 files changed, 14 deletions(-) diff --git a/projects/truly-ui/src/components/input/input.html b/projects/truly-ui/src/components/input/input.html index ba5c19f4b..0e817e48d 100644 --- a/projects/truly-ui/src/components/input/input.html +++ b/projects/truly-ui/src/components/input/input.html @@ -66,14 +66,3 @@ {{textAfter}}
- - - - - diff --git a/projects/truly-ui/src/components/input/input.ts b/projects/truly-ui/src/components/input/input.ts index b2807d87d..3913fe3be 100644 --- a/projects/truly-ui/src/components/input/input.ts +++ b/projects/truly-ui/src/components/input/input.ts @@ -131,9 +131,6 @@ export class TlInput extends ValueAccessorBase implements OnInit, OnDest return this._control; } - - @Input() showValidations = false; - @Input() withBorder = true; @Input() flatBorder = false; From f71cb783d59a4c665b706fe17e3812fd792089da Mon Sep 17 00:00:00 2001 From: William Aguera Date: Fri, 26 Apr 2019 16:51:32 -0300 Subject: [PATCH 104/109] refact(textarea): remove showValidations property of textarea. --- .../truly-ui/src/components/textarea/textarea.html | 10 ---------- projects/truly-ui/src/components/textarea/textarea.ts | 2 -- 2 files changed, 12 deletions(-) diff --git a/projects/truly-ui/src/components/textarea/textarea.html b/projects/truly-ui/src/components/textarea/textarea.html index 043850b51..6c2d33b0b 100644 --- a/projects/truly-ui/src/components/textarea/textarea.html +++ b/projects/truly-ui/src/components/textarea/textarea.html @@ -9,7 +9,6 @@