From dec8c2285643b83b7c5495390da4e094a5c7c252 Mon Sep 17 00:00:00 2001 From: Peter Maquiran Date: Thu, 21 Jan 2021 15:45:58 +0100 Subject: [PATCH 1/8] Improve calendar --- src/app/pages/agenda/agenda.page.scss | 10 ++++++--- src/assets/icons-calendar-arrow-down.svg | 11 ++++++++++ src/assets/icons-calendar-arrow-left.svg | 11 ++++++++++ src/assets/icons-calendar-arrow-right.svg | 11 ++++++++++ src/global.scss | 25 +++++++++++++++++++++++ 5 files changed, 65 insertions(+), 3 deletions(-) create mode 100755 src/assets/icons-calendar-arrow-down.svg create mode 100755 src/assets/icons-calendar-arrow-left.svg create mode 100755 src/assets/icons-calendar-arrow-right.svg diff --git a/src/app/pages/agenda/agenda.page.scss b/src/app/pages/agenda/agenda.page.scss index 5d120cae6..3219fd374 100644 --- a/src/app/pages/agenda/agenda.page.scss +++ b/src/app/pages/agenda/agenda.page.scss @@ -32,12 +32,16 @@ } .with-event { - background-color: #ccc; - border-radius: 15px; + background-color: #fff; + border-radius: 21px; + border-left: 3px solid #ffb703; + border-bottom: none; + border-right: 3px solid #f05d5e; + color: black; + width: 35px; } - /* TOGGLE button */ .switch { position: relative; diff --git a/src/assets/icons-calendar-arrow-down.svg b/src/assets/icons-calendar-arrow-down.svg new file mode 100755 index 000000000..c3db65ea6 --- /dev/null +++ b/src/assets/icons-calendar-arrow-down.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons-calendar-arrow-left.svg b/src/assets/icons-calendar-arrow-left.svg new file mode 100755 index 000000000..2c258f00b --- /dev/null +++ b/src/assets/icons-calendar-arrow-left.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons-calendar-arrow-right.svg b/src/assets/icons-calendar-arrow-right.svg new file mode 100755 index 000000000..0f196ec63 --- /dev/null +++ b/src/assets/icons-calendar-arrow-right.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/global.scss b/src/global.scss index d854de84a..f9585dfa4 100644 --- a/src/global.scss +++ b/src/global.scss @@ -24,3 +24,28 @@ @import "~@ionic/angular/css/text-alignment.css"; @import "~@ionic/angular/css/text-transformation.css"; @import "~@ionic/angular/css/flex-utils.css"; + + +td.monthview-current{ + color: white; + /* border-radius: 89px; */ + background: white !important; + justify-content: center; + align-items: center; + /* display: flex; */ + height: 100%; + div { + border-radius: 28px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + padding-left: 9px; + color: white; + background: #42b9fe; + } +} + +.monthview-selected { + +} \ No newline at end of file From f3ab85222346b8467b2fb89b5dbce54f26434a45 Mon Sep 17 00:00:00 2001 From: Peter Maquiran Date: Fri, 22 Jan 2021 16:00:37 +0100 Subject: [PATCH 2/8] Add icons --- package-lock.json | 93 ++++- package.json | 5 +- src/app/app.module.ts | 14 + src/app/pages/agenda/agenda.module.ts | 1 - src/app/pages/agenda/agenda.page.html | 355 ++++++++++-------- src/app/pages/agenda/agenda.page.scss | 8 +- src/app/pages/agenda/agenda.page.ts | 28 +- .../icons-calendar-arrow-down.svg | 0 .../icons-calendar-arrow-left.svg | 0 .../icons-calendar-arrow-right.svg | 0 src/global.scss | 15 +- 11 files changed, 344 insertions(+), 175 deletions(-) rename src/assets/{ => images}/icons-calendar-arrow-down.svg (100%) rename src/assets/{ => images}/icons-calendar-arrow-left.svg (100%) rename src/assets/{ => images}/icons-calendar-arrow-right.svg (100%) diff --git a/package-lock.json b/package-lock.json index 79e26565e..7c40c06d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -413,6 +413,21 @@ } } }, + "@angular/animations": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-11.1.0.tgz", + "integrity": "sha512-VgpknW33WJiqnNtQwNVWrpiSxkgoChIZLpYLlijSTvFwZOHiraFKApohaW8X61mwL0HuK1RB7Z36B+Q11cw3aw==", + "requires": { + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz", + "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==" + } + } + }, "@angular/cli": { "version": "9.1.12", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.12.tgz", @@ -2905,6 +2920,11 @@ "tslib": "^1.9.0" } }, + "@mattlewis92/dom-autoscroller": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/@mattlewis92/dom-autoscroller/-/dom-autoscroller-2.4.2.tgz", + "integrity": "sha512-YbrUWREPGEjE/FU6foXcAT1YbVwqD/jkYnY1dFb0o4AxtP3s4xKBthlELjndZih8uwsDWgQZx1eNskRNe2BgZQ==" + }, "@netflix/nerror": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@netflix/nerror/-/nerror-1.1.3.tgz", @@ -2922,6 +2942,21 @@ } } }, + "@ng-bootstrap/ng-bootstrap": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-9.0.1.tgz", + "integrity": "sha512-dJFoK2mRsj/zL87PNv9frBD+72MkrMeFshXE26FKPf8P8JNFoL6zrcNLxlBouQ1rWBItH50BmlEqQOwyXazF7w==", + "requires": { + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz", + "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==" + } + } + }, "@ngtools/webpack": { "version": "9.1.12", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-9.1.12.tgz", @@ -2985,6 +3020,11 @@ } } }, + "@scarf/scarf": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@scarf/scarf/-/scarf-1.1.0.tgz", + "integrity": "sha512-b2iE8kjjzzUo2WZ0xuE2N77kfnTds7ClrDxcz3Atz7h2XrNVoAPUoT75i7CY0st5x++70V91Y+c6RpBX9MX7Jg==" + }, "@schematics/angular": { "version": "9.1.12", "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-9.1.12.tgz", @@ -3433,6 +3473,43 @@ "semver": "^5.4.1" } }, + "angular-calendar": { + "version": "0.28.22", + "resolved": "https://registry.npmjs.org/angular-calendar/-/angular-calendar-0.28.22.tgz", + "integrity": "sha512-jcLszdvSI6+iSYEIqyQjPK5kgGAXaMoGKKGyDpmjy0nRIdaBGMzoveKr/OyiSx1B1oyxRVjj4Ig60n1/BzXmpw==", + "requires": { + "@scarf/scarf": "^1.1.0", + "angular-draggable-droppable": "^4.5.5", + "angular-resizable-element": "^3.3.3", + "calendar-utils": "^0.8.3", + "positioning": "^2.0.1", + "tslib": "^1.14.1" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } + }, + "angular-draggable-droppable": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/angular-draggable-droppable/-/angular-draggable-droppable-4.6.0.tgz", + "integrity": "sha512-+8JhTDMKkc/NuFFqb8/H/QHpB+v4Z7YNrgvEbV+PQxXry19rkr89ofZgjNIXhZexTvJNb03BYlSQoknzXE9b3g==", + "requires": { + "@mattlewis92/dom-autoscroller": "^2.4.2", + "tslib": "^1.9.0" + } + }, + "angular-resizable-element": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-3.3.4.tgz", + "integrity": "sha512-jA3j8qcWXKR+rdXxerAjpKhUsoUlEBQP3CmutHcHRAKTkQjZTd1LcZOZOnfIdOToyXsIKXYscbHpbPoCeew2Yw==", + "requires": { + "tslib": "^1.9.0" + } + }, "angular-swipe": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/angular-swipe/-/angular-swipe-0.4.0.tgz", @@ -4351,6 +4428,11 @@ "unset-value": "^1.0.0" } }, + "calendar-utils": { + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/calendar-utils/-/calendar-utils-0.8.4.tgz", + "integrity": "sha512-0btakIxxHrCMX/7L6jayixKG9OnGIbqAh5oHe0Me2LYAS7zdEUoRxndyN4N04yVyZURgx1iNXj4l5m51/sDShg==" + }, "caller-callsite": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz", @@ -5899,9 +5981,9 @@ } }, "date-fns": { - "version": "2.15.0", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.15.0.tgz", - "integrity": "sha512-ZCPzAMJZn3rNUvvQIMlXhDr4A+Ar07eLeGsGREoWU19a3Pqf5oYa+ccd+B3F6XVtQY6HANMFdOQ8A+ipFnvJdQ==" + "version": "2.16.1", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz", + "integrity": "sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==" }, "date-format": { "version": "3.0.0", @@ -11090,6 +11172,11 @@ } } }, + "positioning": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/positioning/-/positioning-2.0.1.tgz", + "integrity": "sha512-DsAgM42kV/ObuwlRpAzDTjH9E8fGKkMDJHWFX+kfNXSxh7UCCQxEmdjv/Ws5Ft1XDnt3JT8fIDYeKNSE2TbttA==" + }, "posix-character-classes": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", diff --git a/package.json b/package.json index bc51da979..758c6a5d2 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ }, "private": true, "dependencies": { + "@angular/animations": "^11.1.0", "@angular/common": "~9.1.6", "@angular/core": "~9.1.6", "@angular/forms": "~9.1.6", @@ -38,6 +39,8 @@ "@ionic/pwa-elements": "^3.0.1", "@ionic/storage": "^2.3.1", "@logisticinfotech/ionic4-datepicker": "^1.4.4", + "@ng-bootstrap/ng-bootstrap": "^9.0.1", + "angular-calendar": "^0.28.22", "angular-tag-cloud-module": "^5.2.2", "cordova-ios": "6.1.0", "cordova-plugin-camera": "^5.0.1", @@ -45,7 +48,7 @@ "cordova-plugin-filepath": "^1.5.8", "cordova-res": "^0.15.1", "cordova-sqlite-storage": "^5.1.0", - "date-fns": "^2.15.0", + "date-fns": "^2.16.1", "ionic-selectable": "^4.5.0", "ionic2-alpha-scroll": "^2.0.1", "ionic2-calendar": "^0.6.6", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index bc8c8e056..ae36ea933 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -19,11 +19,25 @@ import { FilePath } from '@ionic-native/file-path/ngx'; import { Camera } from '@ionic-native/camera/ngx'; import { IonicStorageModule } from '@ionic/storage'; import { PipesModule } from './pipes/pipes.module'; +// + +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { CalendarModule, DateAdapter } from 'angular-calendar'; +import { adapterFactory } from 'angular-calendar/date-adapters/date-fns'; + + @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [BrowserModule, + CommonModule, + FormsModule, + CalendarModule.forRoot({ + provide: DateAdapter, + useFactory: adapterFactory, + }), IonicModule.forRoot(), IonicStorageModule.forRoot(), AppRoutingModule, diff --git a/src/app/pages/agenda/agenda.module.ts b/src/app/pages/agenda/agenda.module.ts index 34b6cecdb..9f6143688 100644 --- a/src/app/pages/agenda/agenda.module.ts +++ b/src/app/pages/agenda/agenda.module.ts @@ -16,7 +16,6 @@ import { registerLocaleData } from '@angular/common'; import localeDe from '@angular/common/locales/pt'; import { CalendarComponent } from 'src/app/components/calendar/calendar.component'; registerLocaleData(localeDe); - @NgModule({ imports: [ CommonModule, diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html index 39b78f4a1..c87f390be 100644 --- a/src/app/pages/agenda/agenda.page.html +++ b/src/app/pages/agenda/agenda.page.html @@ -46,173 +46,198 @@ - + - + - - - - - -
-
- - - - - - - - - -

{{ viewTitle }}

- - - - - - - - - - - - + + + + + +
+
+ + + + + + + + + +

{{ viewTitle }}

+ + + + + + + + + + + + - - -
- {{view.dates[row*7+col].label}} -
- -
+ + +
+ {{view.dates[row*7+col].label}} +
+
- -
-
- - - - - - - - - -

{{ viewTitle }}

- - - - - - - - - - - - - - - - -
- {{view.dates[row*7+col].label}} -
- -
-
- - -
-
- - - - - - - - - -

{{ viewTitle }}

- - - - - - - - - - - - - - - -
- {{view.dates[row*7+col].label}} -
- -
-
- - -
- - - - - +
+
- \ No newline at end of file +
+ + + + + + + + + +

{{ viewTitle }}

+ + + + + + + + + + + + + + + + +
+ {{view.dates[row*7+col].label}} +
+ +
+
+ + +
+
+ + + + + + + + + +

{{ viewTitle }}

+ + + + + + + + + + + + + + + +
+ {{view.dates[row*7+col].label}} +
+ +
+
+ + +
+ + + + + +
+ + + + +
+ + + + + + +
+ + \ No newline at end of file diff --git a/src/app/pages/agenda/agenda.page.scss b/src/app/pages/agenda/agenda.page.scss index 3219fd374..ec326b397 100644 --- a/src/app/pages/agenda/agenda.page.scss +++ b/src/app/pages/agenda/agenda.page.scss @@ -15,7 +15,10 @@ .monthview-primary-with-event { background-color: white !important; } - + + .monthview-current{ + background-color: red; + } .monthview-selected { background-color: lightskyblue !important; } @@ -264,3 +267,6 @@ label{ color: #000 !important; } +.segment { + +} \ No newline at end of file diff --git a/src/app/pages/agenda/agenda.page.ts b/src/app/pages/agenda/agenda.page.ts index 8da456b1e..0f084f985 100644 --- a/src/app/pages/agenda/agenda.page.ts +++ b/src/app/pages/agenda/agenda.page.ts @@ -8,6 +8,9 @@ import { Event } from '../../models/event.model'; import { Router, NavigationEnd } from '@angular/router'; import { AlertService } from 'src/app/services/alert.service'; +import { CalendarEvent, CalendarView } from 'angular-calendar'; +import { setHours, setMinutes } from 'date-fns'; + @Component({ selector: 'app-agenda', templateUrl: './agenda.page.html', @@ -15,6 +18,29 @@ import { AlertService } from 'src/app/services/alert.service'; }) export class AgendaPage implements OnInit { + view: CalendarView = CalendarView.Day; + + viewDate: Date = new Date(); + + events: CalendarEvent[] = [ + { + title: 'No event end date', + start: setHours(setMinutes(new Date(), 0), 3), + color: { + primary: 'red', + secondary: 'rellow' + }, + }, + { + title: 'No event end date', + start: setHours(setMinutes(new Date(), 0), 5), + color: { + primary: 'red', + secondary: 'rellow' + }, + }, + ]; + /* List of events of our calendar */ eventSource = []; /* The title of the calendar */ @@ -213,7 +239,7 @@ export class AgendaPage implements OnInit { } else{ this.eventService.getAllPrEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(response => { - this.eventsListPessoal = response.filter(data => data.CalendarName == "Pessoal");; + this.eventsListPessoal = response.filter(data => data.CalendarName == "Pessoal"); this.eventsListPessoal.forEach(element => { this.eventSource.push({ title: element.Subject, diff --git a/src/assets/icons-calendar-arrow-down.svg b/src/assets/images/icons-calendar-arrow-down.svg similarity index 100% rename from src/assets/icons-calendar-arrow-down.svg rename to src/assets/images/icons-calendar-arrow-down.svg diff --git a/src/assets/icons-calendar-arrow-left.svg b/src/assets/images/icons-calendar-arrow-left.svg similarity index 100% rename from src/assets/icons-calendar-arrow-left.svg rename to src/assets/images/icons-calendar-arrow-left.svg diff --git a/src/assets/icons-calendar-arrow-right.svg b/src/assets/images/icons-calendar-arrow-right.svg similarity index 100% rename from src/assets/icons-calendar-arrow-right.svg rename to src/assets/images/icons-calendar-arrow-right.svg diff --git a/src/global.scss b/src/global.scss index f9585dfa4..81eb55ff2 100644 --- a/src/global.scss +++ b/src/global.scss @@ -29,7 +29,7 @@ td.monthview-current{ color: white; /* border-radius: 89px; */ - background: white !important; + background: red !important; justify-content: center; align-items: center; /* display: flex; */ @@ -46,6 +46,15 @@ td.monthview-current{ } } -.monthview-selected { +.monthview-secondary-with-event, .monthview-secondary-with-event[_ngcontent-dwf-c153] { + background-color: white !important; +} -} \ No newline at end of file +td.monthview-selected { + background-color: #42b9fe30 !important; + color: black !important; +} + + +/* angular-cli file: src/styles.css */ +@import "../node_modules/angular-calendar/css/angular-calendar.css"; \ No newline at end of file From 2637e0607e4160d00ee64321f6ca5913fb1b3fef Mon Sep 17 00:00:00 2001 From: Peter Maquiran Date: Mon, 25 Jan 2021 16:18:36 +0100 Subject: [PATCH 3/8] Add calendar timeline --- package-lock.json | 33 +++++++++++ package.json | 1 + src/app/app.module.ts | 6 +- src/app/pages/agenda/agenda.module.ts | 8 +++ src/app/pages/agenda/agenda.page.html | 69 +++++++++++----------- src/app/pages/agenda/agenda.page.scss | 15 ++++- src/app/pages/agenda/agenda.page.ts | 83 +++++++++++++++++++++++---- src/global.scss | 18 +++++- 8 files changed, 182 insertions(+), 51 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7c40c06d2..495f8dded 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3081,6 +3081,11 @@ "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==", "dev": true }, + "@types/date-fns": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/@types/date-fns/-/date-fns-0.0.2.tgz", + "integrity": "sha1-px0uCyq1e7jegchD5ez24WF3m4w=" + }, "@types/glob": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz", @@ -3531,6 +3536,34 @@ } } }, + "angular2-calendar": { + "version": "0.3.7", + "resolved": "https://registry.npmjs.org/angular2-calendar/-/angular2-calendar-0.3.7.tgz", + "integrity": "sha1-1hrZoQWNbjdrpOWs5C3QDaoNVb4=", + "requires": { + "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.0", + "@types/date-fns": "0.0.2", + "calendar-utils": "0.0.35", + "date-fns": "^1.3.0" + }, + "dependencies": { + "@ng-bootstrap/ng-bootstrap": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-1.1.2.tgz", + "integrity": "sha512-lPB4WdFk3s4k1OMKiZsmbxSE3r8qBFapov0HudEVi8HYkm6LBxZmWqy9I6KAC9NnhVUVIYnCixvRSNwOQvIwwA==" + }, + "calendar-utils": { + "version": "0.0.35", + "resolved": "https://registry.npmjs.org/calendar-utils/-/calendar-utils-0.0.35.tgz", + "integrity": "sha1-BqlQdhAFRFyH8YpotAMhZIkcV5s=" + }, + "date-fns": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz", + "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==" + } + } + }, "ansi": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/ansi/-/ansi-0.3.1.tgz", diff --git a/package.json b/package.json index 758c6a5d2..2b8238732 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "@ng-bootstrap/ng-bootstrap": "^9.0.1", "angular-calendar": "^0.28.22", "angular-tag-cloud-module": "^5.2.2", + "angular2-calendar": "^0.3.7", "cordova-ios": "6.1.0", "cordova-plugin-camera": "^5.0.1", "cordova-plugin-file": "^6.0.2", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ae36ea933..9539c19ee 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -23,9 +23,11 @@ import { PipesModule } from './pipes/pipes.module'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; + + import { CalendarModule, DateAdapter } from 'angular-calendar'; import { adapterFactory } from 'angular-calendar/date-adapters/date-fns'; - +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ @@ -36,7 +38,7 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns'; FormsModule, CalendarModule.forRoot({ provide: DateAdapter, - useFactory: adapterFactory, + useFactory: adapterFactory }), IonicModule.forRoot(), IonicStorageModule.forRoot(), diff --git a/src/app/pages/agenda/agenda.module.ts b/src/app/pages/agenda/agenda.module.ts index 9f6143688..b41125d93 100644 --- a/src/app/pages/agenda/agenda.module.ts +++ b/src/app/pages/agenda/agenda.module.ts @@ -16,12 +16,20 @@ import { registerLocaleData } from '@angular/common'; import localeDe from '@angular/common/locales/pt'; import { CalendarComponent } from 'src/app/components/calendar/calendar.component'; registerLocaleData(localeDe); + + +import { CalendarModule, DateAdapter } from 'angular-calendar'; +import { adapterFactory } from 'angular-calendar/date-adapters/date-fns'; @NgModule({ imports: [ CommonModule, FormsModule, IonicModule, /* ComponentsModule, */ + CalendarModule.forRoot({ + provide: DateAdapter, + useFactory: adapterFactory + }), AgendaPageRoutingModule, NgCalendarModule, CalModalPageModule, diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html index c87f390be..8f3442467 100644 --- a/src/app/pages/agenda/agenda.page.html +++ b/src/app/pages/agenda/agenda.page.html @@ -17,20 +17,7 @@
- - -
-
- - - -
-
- - Agenda - - - +
@@ -209,6 +196,7 @@
+ @@ -216,28 +204,35 @@
- - - -
- - - - - - +
+ + + +
+ + + + + + +
+ \ No newline at end of file diff --git a/src/app/pages/agenda/agenda.page.scss b/src/app/pages/agenda/agenda.page.scss index ec326b397..159ed83ad 100644 --- a/src/app/pages/agenda/agenda.page.scss +++ b/src/app/pages/agenda/agenda.page.scss @@ -41,6 +41,7 @@ border-bottom: none; border-right: 3px solid #f05d5e; color: black; + margin: 0px auto; width: 35px; } @@ -269,4 +270,16 @@ label{ .segment { -} \ No newline at end of file +} + + +/* Timeline */ + +.cal-hour-segment { + border-bottom: none !important; +} + +.cal-current-time-marker { + background-color: #42b9fe !important; +} + diff --git a/src/app/pages/agenda/agenda.page.ts b/src/app/pages/agenda/agenda.page.ts index 0f084f985..fe143dd21 100644 --- a/src/app/pages/agenda/agenda.page.ts +++ b/src/app/pages/agenda/agenda.page.ts @@ -8,38 +8,69 @@ import { Event } from '../../models/event.model'; import { Router, NavigationEnd } from '@angular/router'; import { AlertService } from 'src/app/services/alert.service'; -import { CalendarEvent, CalendarView } from 'angular-calendar'; +// showTimeline import { setHours, setMinutes } from 'date-fns'; +import { + CalendarDateFormatter, + CalendarEvent, + CalendarView, + DAYS_OF_WEEK, +} from 'angular-calendar'; +import { CustomDateFormatter } from './custom-date-formatter.provider'; +import { async } from '@angular/core/testing'; @Component({ selector: 'app-agenda', templateUrl: './agenda.page.html', styleUrls: ['./agenda.page.scss'], + providers: [ + { + provide: CalendarDateFormatter, + useClass: CustomDateFormatter, + }, + ], }) export class AgendaPage implements OnInit { + title = 'my-dream-app'; + view: CalendarView = CalendarView.Day; viewDate: Date = new Date(); + weekStartsOn: number = DAYS_OF_WEEK.MONDAY; + + weekendDays: number[] = [DAYS_OF_WEEK.FRIDAY, DAYS_OF_WEEK.SATURDAY]; + + CalendarView = CalendarView; + + setView(view: CalendarView) { + this.view = view; + } + + showTimeline: boolean= false; + + events: CalendarEvent[] = [ - { - title: 'No event end date', +/* { + title: '123', start: setHours(setMinutes(new Date(), 0), 3), color: { primary: 'red', - secondary: 'rellow' + secondary: 'yellow' }, }, { - title: 'No event end date', + title: '123123', start: setHours(setMinutes(new Date(), 0), 5), color: { primary: 'red', - secondary: 'rellow' + secondary: 'yellow' }, - }, + }, */ ]; + + /* List of events of our calendar */ eventSource = []; @@ -84,7 +115,14 @@ export class AgendaPage implements OnInit { private eventService: EventsService, private router: Router, private alertCrontroller: AlertService - ) {} + ) { + setTimeout(()=>{ + // console.log(JSON.stringify(this.events)); + // console.log(this.events); + },5000) + + // console.log(setHours(setMinutes(new Date(), 0), 12)) + } ngOnInit() { this.profile = "mdgpr"; @@ -165,6 +203,7 @@ export class AgendaPage implements OnInit { allDay: false, event: postEvent }); + this.myCal.update(); this.myCal.loadEvents(); this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate); @@ -172,7 +211,8 @@ export class AgendaPage implements OnInit { }); } - async loadRangeEvents(startTime: Date, endTime: Date){ + loadRangeEvents(startTime: Date, endTime: Date){ + this.showLoader = true; switch (this.segment) { @@ -180,10 +220,12 @@ export class AgendaPage implements OnInit { //Inicializa o array eventSource this.eventSource=[]; if(this.profile == "mdgpr"){ - this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe( + this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe( response => { this.eventsList = response; + // loop this.eventsList.forEach(element => { + this.eventSource.push({ title: element.Subject, startTime: new Date(element.StartDate), @@ -191,11 +233,31 @@ export class AgendaPage implements OnInit { allDay: false, event: element }); + + let hours = formatDate(new Date(element.EndDate), 'HH', 'pt'); + + this.events.push({ + title: element.Subject, + start: setHours(setMinutes(new Date(element.EndDate), 0), parseInt(hours)), + color: { + primary: 'red', + secondary: 'yellow' + }, + }); + }); + this.myCal.update(); this.myCal.loadEvents(); + this.showLoader = false; + this.showTimeline = true; + }); + + + + } else{ this.eventService.getAllPrEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe( @@ -293,6 +355,7 @@ export class AgendaPage implements OnInit { }); } break; + } } diff --git a/src/global.scss b/src/global.scss index 81eb55ff2..a17797ad4 100644 --- a/src/global.scss +++ b/src/global.scss @@ -29,7 +29,7 @@ td.monthview-current{ color: white; /* border-radius: 89px; */ - background: red !important; + background: lightskyblue !important; justify-content: center; align-items: center; /* display: flex; */ @@ -56,5 +56,21 @@ td.monthview-selected { } +/* Timeline */ + +.cal-hour-segment { + border-bottom: none !important; + } + + .cal-current-time-marker { + background-color: #42b9fe !important; + } +.timeline .cal-event, .cal-event{ + background-color: white !important; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07) !important; + border: solid 1px #e9e9e9 !important; + border-left: 5px solid #ffb703 !important; +} + /* angular-cli file: src/styles.css */ @import "../node_modules/angular-calendar/css/angular-calendar.css"; \ No newline at end of file From 76a12f7b8f5d755137958ca8348a14348f30db63 Mon Sep 17 00:00:00 2001 From: Peter Maquiran Date: Mon, 25 Jan 2021 16:19:50 +0100 Subject: [PATCH 4/8] Add calendar timeline --- .../agenda/custom-date-formatter.provider.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 src/app/pages/agenda/custom-date-formatter.provider.ts diff --git a/src/app/pages/agenda/custom-date-formatter.provider.ts b/src/app/pages/agenda/custom-date-formatter.provider.ts new file mode 100644 index 000000000..03c5eda79 --- /dev/null +++ b/src/app/pages/agenda/custom-date-formatter.provider.ts @@ -0,0 +1,16 @@ +import { CalendarDateFormatter, DateFormatterParams } from 'angular-calendar'; +import { formatDate } from '@angular/common'; +import { Injectable } from '@angular/core'; + +@Injectable() +export class CustomDateFormatter extends CalendarDateFormatter { + // you can override any of the methods defined in the parent class + + public dayViewHour({ date, locale }: DateFormatterParams): string { + return formatDate(date, 'HH:mm', locale); + } + + public weekViewHour({ date, locale }: DateFormatterParams): string { + return this.dayViewHour({ date, locale }); + } +} From f92173f8f29c8adaa0a4aea2b0931ac06daaba60 Mon Sep 17 00:00:00 2001 From: Peter Maquiran Date: Tue, 26 Jan 2021 10:53:12 +0100 Subject: [PATCH 5/8] Improve calendar --- src/app/pages/agenda/agenda.page.scss | 1 - src/app/pages/agenda/agenda.page.ts | 32 ++++++++--- .../agenda/custom-date-formatter.provider.ts | 2 +- src/global.scss | 55 ++++++++++++++++++- 4 files changed, 80 insertions(+), 10 deletions(-) diff --git a/src/app/pages/agenda/agenda.page.scss b/src/app/pages/agenda/agenda.page.scss index 159ed83ad..764a0148d 100644 --- a/src/app/pages/agenda/agenda.page.scss +++ b/src/app/pages/agenda/agenda.page.scss @@ -272,7 +272,6 @@ label{ } - /* Timeline */ .cal-hour-segment { diff --git a/src/app/pages/agenda/agenda.page.ts b/src/app/pages/agenda/agenda.page.ts index fe143dd21..b17122912 100644 --- a/src/app/pages/agenda/agenda.page.ts +++ b/src/app/pages/agenda/agenda.page.ts @@ -17,7 +17,6 @@ import { DAYS_OF_WEEK, } from 'angular-calendar'; import { CustomDateFormatter } from './custom-date-formatter.provider'; -import { async } from '@angular/core/testing'; @Component({ selector: 'app-agenda', @@ -210,15 +209,32 @@ export class AgendaPage implements OnInit { } }); } + + timeLineTemplate(startTime: string, eventlocation: string, eventDiscription: any, calendarName: string): string{ + return ` +
+
+ ${startTime}${eventlocation} +
+
+ ${eventDiscription.Text} +
+
+ `; + } loadRangeEvents(startTime: Date, endTime: Date){ - + this.showTimeline = false; this.showLoader = true; + switch (this.segment) { case "Combinada": //Inicializa o array eventSource this.eventSource=[]; + this.events=[]; + + if(this.profile == "mdgpr"){ this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe( response => { @@ -234,14 +250,16 @@ export class AgendaPage implements OnInit { event: element }); - let hours = formatDate(new Date(element.EndDate), 'HH', 'pt'); + const startHours = formatDate(new Date(element.StartDate), 'HH:mm', 'pt'); + const EndHours = formatDate(new Date(element.EndDate), 'HH:mm', 'pt'); this.events.push({ - title: element.Subject, - start: setHours(setMinutes(new Date(element.EndDate), 0), parseInt(hours)), + title: this.timeLineTemplate(startHours, element.Location, element.Body, element.CalendarName), + start: setHours(setMinutes(new Date(element.StartDate), 0), parseInt(startHours)), + end: setHours(setMinutes(new Date(element.EndDate), 0), parseInt(EndHours)), color: { - primary: 'red', - secondary: 'yellow' + primary: 'white', + secondary: 'white' }, }); diff --git a/src/app/pages/agenda/custom-date-formatter.provider.ts b/src/app/pages/agenda/custom-date-formatter.provider.ts index 03c5eda79..8ef589c0b 100644 --- a/src/app/pages/agenda/custom-date-formatter.provider.ts +++ b/src/app/pages/agenda/custom-date-formatter.provider.ts @@ -7,7 +7,7 @@ export class CustomDateFormatter extends CalendarDateFormatter { // you can override any of the methods defined in the parent class public dayViewHour({ date, locale }: DateFormatterParams): string { - return formatDate(date, 'HH:mm', locale); + return formatDate(date, 'HH', locale); } public weekViewHour({ date, locale }: DateFormatterParams): string { diff --git a/src/global.scss b/src/global.scss index a17797ad4..75fd88175 100644 --- a/src/global.scss +++ b/src/global.scss @@ -26,6 +26,9 @@ @import "~@ionic/angular/css/flex-utils.css"; + + +// calendar td.monthview-current{ color: white; /* border-radius: 89px; */ @@ -69,8 +72,58 @@ td.monthview-selected { background-color: white !important; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07) !important; border: solid 1px #e9e9e9 !important; - border-left: 5px solid #ffb703 !important; + padding: 0px !important; } +.cal-current-time-marker { + width: 100% !important; + margin-left: 0px !important; +} + +.cal-current-time-marker::before{ + width: 10px; + height: 10px; + background-color: #42b9fe !important; + content: "."; + color: transparent; + left: 55px; + position: absolute; + border-radius: 91px; + top: -2.5px; + +} + +.cal-time{ + font-family: Roboto; + font-size: 13px; + color: #797979; +} + +.timeline-box{ + color: black; + .timeline-start-time, .timeline-location{ + font-family: Roboto; + font-size: 13px; + margin-right: 10px; + } + .timeline-event-discription{ + font-family: Roboto; + font-size: 15px; + font-weight: bold; + } +} + + +.timeline-box-Pessoal{ + border-left: 5px solid #ffb703 !important; + height: 100%; +} +.timeline-box-Oficial{ + border-left: 5px solid #f05d5e !important; + height: 100%; +} + + +.timeline-box-{} /* angular-cli file: src/styles.css */ @import "../node_modules/angular-calendar/css/angular-calendar.css"; \ No newline at end of file From 3f89799031d1389940574160e3a7a2ea0147a388 Mon Sep 17 00:00:00 2001 From: Peter Maquiran Date: Wed, 27 Jan 2021 13:57:55 +0100 Subject: [PATCH 6/8] Add calendar timeline --- src/app/home/home.page.html | 4 + src/app/pages/agenda/agenda.page.html | 364 +++++++++---------- src/app/pages/agenda/agenda.page.scss | 32 ++ src/app/pages/agenda/agenda.page.ts | 37 +- src/app/pages/search/search.page.html | 9 +- src/app/pages/search/search.page.ts | 24 +- src/assets/images/icons-arrow-arrow-down.svg | 11 + src/global.scss | 31 +- 8 files changed, 298 insertions(+), 214 deletions(-) create mode 100755 src/assets/images/icons-arrow-arrow-down.svg diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html index c227681f4..22c7f37b6 100644 --- a/src/app/home/home.page.html +++ b/src/app/home/home.page.html @@ -28,6 +28,10 @@ Chat + + + Pesquisa + diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html index 8f3442467..3f38f1a9e 100644 --- a/src/app/pages/agenda/agenda.page.html +++ b/src/app/pages/agenda/agenda.page.html @@ -16,223 +16,211 @@
+ - + + +
+
+ + + + + + + + +

{{ viewTitle }}

+ + + + + + + + + + + + + + + + + + +
+ {{view.dates[row*7+col].label}} +
+ +
+
+ +
+
+ + + + + + + + + +

{{ viewTitle }}

+ + + + + + + + + + + + + + + + +
+ {{view.dates[row*7+col].label}} +
+ +
+
+ + +
+
+ + + + + + + + + +

{{ viewTitle }}

+ + + + + + + + + + + + + + + +
+ {{view.dates[row*7+col].label}} +
+ +
+
+ + +
+
- - + -
-
- - - - - - - - - -

{{ viewTitle }}

- - - - - - - - - - - - - - -
- {{view.dates[row*7+col].label}} -
- -
-
- -
-
- - - - - - - - - -

{{ viewTitle }}

- - - - - - - - - - - - - + - - -
- {{view.dates[row*7+col].label}} -
- -
-
- - -
-
- - - - - - - - - -

{{ viewTitle }}

- - - - - - - - - - - - - - - -
- {{view.dates[row*7+col].label}} -
- -
-
- - -
- - - - - - -
+ + + Hoje, {{ timelineDate }} + + +
Tudos
+ + + +
+ [dayStartHour]="0" + [dayEndHour]="23">
- - - -
- + \ No newline at end of file diff --git a/src/app/pages/agenda/agenda.page.scss b/src/app/pages/agenda/agenda.page.scss index 764a0148d..219d769a1 100644 --- a/src/app/pages/agenda/agenda.page.scss +++ b/src/app/pages/agenda/agenda.page.scss @@ -282,3 +282,35 @@ label{ background-color: #42b9fe !important; } +.calendar-tool-tip{ + ion-icon{ + font-size: 35px; + } + .arrow-down{ + font-size: 28px; + } +} + + + +.currente-date-timelien{ + padding: 10px 20px; + .timeline-date{ + font-size: 15px; + font-weight: bold; + } + .filter{ + font-size: 15px; + font-weight: normal; + ion-icon{ + font-size: 35px; + color: #0d89d1; + } + .filter-name{ + font-family: Roboto; + font-size: 15px; + margin-left: 10px; + + } + } +} \ No newline at end of file diff --git a/src/app/pages/agenda/agenda.page.ts b/src/app/pages/agenda/agenda.page.ts index b17122912..794293bcb 100644 --- a/src/app/pages/agenda/agenda.page.ts +++ b/src/app/pages/agenda/agenda.page.ts @@ -30,8 +30,6 @@ import { CustomDateFormatter } from './custom-date-formatter.provider'; ], }) export class AgendaPage implements OnInit { - - title = 'my-dream-app'; view: CalendarView = CalendarView.Day; @@ -43,6 +41,8 @@ export class AgendaPage implements OnInit { CalendarView = CalendarView; + timelineDate: string; + setView(view: CalendarView) { this.view = view; } @@ -115,6 +115,9 @@ export class AgendaPage implements OnInit { private router: Router, private alertCrontroller: AlertService ) { + + this.timelineDate = formatDate(new Date,'dd MMMM yyyy', 'pt'); + setTimeout(()=>{ // console.log(JSON.stringify(this.events)); // console.log(this.events); @@ -156,13 +159,26 @@ export class AgendaPage implements OnInit { onViewTitleChanged(title){ this.viewTitle = title; } + + // Show information of the event for timeline + eventClicked({ event }: { event: CalendarEvent }): void { + console.log('Event clicked', event); + this.eventSelectedDate = event.start; + this.router.navigate(["/home/agenda", event.id, 'agenda']); + } + //Show information of the event async onEventSelected(ev: { event: Event}){ this.router.navigate(["/home/agenda", ev.event.EventId, 'agenda']); } + onCurrentChanged = (ev: Date) => { - this.eventSelectedDate = ev; + // timeline change date + this.timelineDate = formatDate(ev,'dd MMMM yyyy', 'pt'); + this.viewDate = new Date(formatDate(ev,'yyyy-MM-dd', 'pt')); + // calendar change date + this.eventSelectedDate = ev; }; /* onTimeSelected = (ev: { selectedTime: Date, events: any[] }) => { @@ -173,6 +189,7 @@ export class AgendaPage implements OnInit { onRangeChanged (ev: { startTime: Date, endTime: Date }) { this.rangeStartDate = ev.startTime; this.rangeEndDate = ev.endTime; + console.log('!!!') this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate); }; @@ -224,6 +241,9 @@ export class AgendaPage implements OnInit { } loadRangeEvents(startTime: Date, endTime: Date){ + + console.log('Update date'); + this.showTimeline = false; this.showLoader = true; @@ -236,7 +256,7 @@ export class AgendaPage implements OnInit { if(this.profile == "mdgpr"){ - this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe( + this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd', 'pt'), formatDate(endTime, 'yyyy-MM-dd', 'pt')).subscribe( response => { this.eventsList = response; // loop @@ -250,8 +270,8 @@ export class AgendaPage implements OnInit { event: element }); - const startHours = formatDate(new Date(element.StartDate), 'HH:mm', 'pt'); - const EndHours = formatDate(new Date(element.EndDate), 'HH:mm', 'pt'); + const startHours = formatDate(new Date(element.StartDate), 'HH', 'pt'); + const EndHours = formatDate(new Date(element.EndDate), 'HH', 'pt'); this.events.push({ title: this.timeLineTemplate(startHours, element.Location, element.Body, element.CalendarName), @@ -261,6 +281,7 @@ export class AgendaPage implements OnInit { primary: 'white', secondary: 'white' }, + id: element.EventId }); }); @@ -377,6 +398,10 @@ export class AgendaPage implements OnInit { } } + actions(){ + + } + doRefresh(ev: any){ this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate); setTimeout(() => { diff --git a/src/app/pages/search/search.page.html b/src/app/pages/search/search.page.html index 037bd502d..187ceb77f 100644 --- a/src/app/pages/search/search.page.html +++ b/src/app/pages/search/search.page.html @@ -94,7 +94,14 @@

Palavras mais pesquisadas

- +
+ + +
diff --git a/src/app/pages/search/search.page.ts b/src/app/pages/search/search.page.ts index ba7165846..f9ada6f67 100644 --- a/src/app/pages/search/search.page.ts +++ b/src/app/pages/search/search.page.ts @@ -33,20 +33,18 @@ export class SearchPage implements OnInit { showDocuments = false; showAdvanceSearch = false; - options: CloudOptions = { - // if width is between 0 and 1 it will be set to the width of the upper element multiplied by the value - width: 1000, - // if height is between 0 and 1 it will be set to the height of the upper element multiplied by the value - height: 400, - overflow: false, - }; - - data: CloudData[] = [ - {text: 'Weight-8-link-color', weight: 8, link: 'https://google.com', color: '#ffaaee'}, - {text: 'Weight-10-link', weight: 10, link: 'https://google.com', tooltip: 'display a tooltip'}, - // ... - ]; + height: number = 411; + width: number = 411; + data: CloudData[] = [ + {text: 'Docents', weight: 0.1, color: '#ffaaee'}, + {text: '1232', weight: 0.2, tooltip: 'display a tooltip'}, + {text: 'Dcuments', weight: 0.1, color: '#ffaaee'}, + {text: 'Cat', weight: 0.3, color: '#ffaaee'}, + {text: 'Dogs', weight: 0.1, tooltip: 'display a tooltip'}, + {text: 'cars', weight: 0.2, color: '#ffaaee'}, + ]; + // See http://idangero.us/swiper/api/ for valid options. slideOpts = { slidesPerView: 3, diff --git a/src/assets/images/icons-arrow-arrow-down.svg b/src/assets/images/icons-arrow-arrow-down.svg new file mode 100755 index 000000000..c3db65ea6 --- /dev/null +++ b/src/assets/images/icons-arrow-arrow-down.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/global.scss b/src/global.scss index 75fd88175..94c1bdbbf 100644 --- a/src/global.scss +++ b/src/global.scss @@ -45,7 +45,6 @@ td.monthview-current{ text-align: center; padding-left: 9px; color: white; - background: #42b9fe; } } @@ -69,9 +68,6 @@ td.monthview-selected { background-color: #42b9fe !important; } .timeline .cal-event, .cal-event{ - background-color: white !important; - box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07) !important; - border: solid 1px #e9e9e9 !important; padding: 0px !important; } @@ -89,7 +85,7 @@ td.monthview-selected { left: 55px; position: absolute; border-radius: 91px; - top: -2.5px; + top: -3.5px; } @@ -100,6 +96,10 @@ td.monthview-selected { } .timeline-box{ + padding: 3px; + background-color: white !important; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07) !important; + border: solid 1px #e9e9e9 !important; color: black; .timeline-start-time, .timeline-location{ font-family: Roboto; @@ -123,7 +123,26 @@ td.monthview-selected { height: 100%; } +.table-bordered, .table-bordered{ + border: none !important; + td, th { + border: none !important; + } +} +.cal-tooltip, .cal-tooltip-top{ + display: none; +} + +// ionic calendar2 +.event-detail-container{ + display: none; +} + +.cal-week-view { + border-top: none !important; +} .timeline-box-{} /* angular-cli file: src/styles.css */ -@import "../node_modules/angular-calendar/css/angular-calendar.css"; \ No newline at end of file +@import "../node_modules/angular-calendar/css/angular-calendar.css"; + From f7f13a98c13cdffed5a482e51b7bd6882a9a0a5b Mon Sep 17 00:00:00 2001 From: Peter Maquiran Date: Wed, 27 Jan 2021 14:05:37 +0100 Subject: [PATCH 7/8] Change text color --- src/app/pages/agenda/agenda.page.html | 2 +- src/app/pages/agenda/agenda.page.scss | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html index 3f38f1a9e..25cfac92f 100644 --- a/src/app/pages/agenda/agenda.page.html +++ b/src/app/pages/agenda/agenda.page.html @@ -197,7 +197,7 @@ Hoje, {{ timelineDate }} -
Tudos
+
Todos
 diff --git a/src/app/pages/agenda/agenda.page.scss b/src/app/pages/agenda/agenda.page.scss index 219d769a1..83f539198 100644 --- a/src/app/pages/agenda/agenda.page.scss +++ b/src/app/pages/agenda/agenda.page.scss @@ -302,6 +302,9 @@ label{ .filter{ font-size: 15px; font-weight: normal; + .filter-name{ + color: #0d89d1; + } ion-icon{ font-size: 35px; color: #0d89d1; From 4b8f31d04accf0b0fdd6044f95c30624e768aa04 Mon Sep 17 00:00:00 2001 From: Peter Maquiran Date: Thu, 28 Jan 2021 10:02:27 +0100 Subject: [PATCH 8/8] Add agile methodology --- src/style/main.scss | 159 ++++++++++++++++++++++++++++++++++++++++++++ src/style/readme.md | 137 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 296 insertions(+) create mode 100644 src/style/main.scss create mode 100644 src/style/readme.md diff --git a/src/style/main.scss b/src/style/main.scss new file mode 100644 index 000000000..b10b6ba43 --- /dev/null +++ b/src/style/main.scss @@ -0,0 +1,159 @@ +.v-application .overflow-auto { + overflow: auto !important; +} +.overflow-hidden { + overflow: hidden !important; +} +.overflow-visible { + overflow: visible !important; +} +.overflow-x-auto { + overflow-x: auto !important; +} +.overflow-x-hidden { + overflow-x: hidden !important; +} +.overflow-y-auto { + overflow-y: auto !important; +} +.overflow-y-hidden { + overflow-y: hidden !important; +} +.d-none { + display: none !important; +} +.d-inline { + display: inline !important; +} +.d-inline-block { + display: inline-block !important; +} +.d-block { + display: block !important; +} +.d-table { + display: table !important; +} +.d-table-row { + display: table-row !important; +} +.d-table-cell { + display: table-cell !important; +} +.d-flex { + display: flex !important; +} +.d-inline-flex { + display: inline-flex !important; +} +.float-none { + float: none !important; +} +.float-left { + float: left !important; +} +.float-right { + float: right !important; +} +.flex-fill { + flex: 1 1 auto !important; +} +.flex-row { + flex-direction: row !important; +} +.flex-column { + flex-direction: column !important; +} +.flex-row-reverse { + flex-direction: row-reverse !important; +} +.flex-column-reverse { + flex-direction: column-reverse !important; +} +.flex-grow-0 { + flex-grow: 0 !important; +} +.flex-grow-1 { + flex-grow: 1 !important; +} +.flex-shrink-0 { + flex-shrink: 0 !important; +} +.flex-shrink-1 { + flex-shrink: 1 !important; +} +.flex-wrap { + flex-wrap: wrap !important; +} +.flex-nowrap { + flex-wrap: nowrap !important; +} +.flex-wrap-reverse { + flex-wrap: wrap-reverse !important; +} +.justify-start { + justify-content: flex-start !important; +} +.justify-end { + justify-content: flex-end !important; +} +.justify-center { + justify-content: center !important; +} +.justify-space-between { + justify-content: space-between !important; +} +.justify-space-around { + justify-content: space-around !important; +} +.align-start { + align-items: flex-start !important; +} +.align-end { + align-items: flex-end !important; +} +.align-center { + align-items: center !important; +} +.align-baseline { + align-items: baseline !important; +} +.align-stretch { + align-items: stretch !important; +} +.align-content-start { + align-content: flex-start !important; +} +.align-content-end { + align-content: flex-end !important; +} +.align-content-center { + align-content: center !important; +} +.align-content-space-between { + align-content: space-between !important; +} +.align-content-space-around { + align-content: space-around !important; +} +.align-content-stretch { + align-content: stretch !important; +} +.align-self-auto { + align-self: auto !important; +} +.align-self-start { + align-self: flex-start !important; +} +.align-self-end { + align-self: flex-end !important; +} +.align-self-center { + align-self: center !important; +} +.align-self-baseline { + align-self: baseline !important; +} +.align-self-stretch { + align-self: stretch !important; +} \ No newline at end of file diff --git a/src/style/readme.md b/src/style/readme.md new file mode 100644 index 000000000..eae46b5fc --- /dev/null +++ b/src/style/readme.md @@ -0,0 +1,137 @@ +# System design + +

First solve the problem then write the code

+ +
+ +## Table of content +
+

    +
  • Diplay
    • +
  • Flex
    • + +
  • Float
    • + +
    + + +
    +
    +
    + + +## Diplay +
    +
    + +
    +

    Specify the elements display property. These classes can be applied using the following format d-{display}. +

    +
    +
    +
      +
    • d-inline-flex - sets the element display property to inline-flex
      • +
    • d-flex - sets the element display property to flex
      • +
    • d-inline-block - sets the element display property to inline-block
      • +
    • d-block - sets the element display property to block
      • +
    • d-inline - sets the element display property to inline
      • +
    • d-none - sets the element display property to none
      • +
    +
    +
    + + +
    +
    +
    + +## Flex +
    +

    Control the layout of flex containers with alignment, justification and more with responsive flexbox utilities.

    + +

    You can also customize flex utilities to apply based upon various breakpoints.

    + + +
    +
    + +### Enabling flexbox +
      +
    • .d-flex
      • +
    • .d-inline-flex
      • +
    + + +
    +
    + +### Flex direction +
    +
      +
    • .flex-row
      • +
    • .flex-row-reverse
      • +
    • .flex-column
      • +
    • .flex-column-reverse
      • +
    + +
    +
    + +### Flex-justify +
    + +
    • .justify-start
    • .justify-end
    • .justify-center
    • .justify-space-between
    • .justify-space-around
    + + +
    +
    + +### Flex align +
    +
    • .align-start
    • .align-end
    • .align-center
    • .align-baseline
    • .align-stretch
    + + +
    +
    + +### Flex align self +
    + +
    • .align-start
    • .align-end
    • .align-center
    • .align-baseline
    • .align-stretch
    + +
    +
    + +### Flex wrap +
    +
      +
    • .flex-nowrap
    • .flex-wrap
    • .flex-wrap-reverse
      • +
    + +
    +
    +
    + +## Float +
    +

    Float utility classes.

    + +

    You can also customize flex utilities to apply based upon

    + +
    +
    + +### Float direction +
    +
      +
    • .float-left
    • .float-right
      • +
    \ No newline at end of file