peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-18 12:37:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add calendar icons

Browse Source
This commit is contained in:
Peter Maquiran
2021-01-28 16:18:10 +01:00
parent 4b8f31d04a
commit 72acb8a058
8 changed files with 305 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+13
View File
@@ -2215,6 +2215,14 @@
} }
} }
}, },
"@ionic-native/wheel-selector": {
"version": "5.31.1",
"resolved": "https://registry.npmjs.org/@ionic-native/wheel-selector/-/wheel-selector-5.31.1.tgz",
"integrity": "sha512-pZIicvLZf1zOrJohhsER6zJikf09Qvrmdh9NfB2ilO2GIJv2sw1JfR45E/BviKehs5t5G1pem1fyLtwOyFSi4Q==",
"requires": {
"@types/cordova": "^0.0.34"
}
},
"@ionic/angular": { "@ionic/angular": {
"version": "5.3.1", "version": "5.3.1",
"resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-5.3.1.tgz", "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-5.3.1.tgz",
@@ -3081,6 +3089,11 @@
"integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==", "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
"dev": true "dev": true
}, },
"@types/cordova": {
"version": "0.0.34",
"resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz",
"integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ="
},
"@types/date-fns": { "@types/date-fns": {
"version": "0.0.2", "version": "0.0.2",
"resolved": "https://registry.npmjs.org/@types/date-fns/-/date-fns-0.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/date-fns/-/date-fns-0.0.2.tgz",
package.json
+1
View File
@@ -35,6 +35,7 @@
"@ionic-native/ionic-webview": "^5.30.0", "@ionic-native/ionic-webview": "^5.30.0",
"@ionic-native/splash-screen": "^5.0.0", "@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0", "@ionic-native/status-bar": "^5.0.0",
"@ionic-native/wheel-selector": "^5.31.1",
"@ionic/angular": "^5.0.0", "@ionic/angular": "^5.0.0",
"@ionic/pwa-elements": "^3.0.1", "@ionic/pwa-elements": "^3.0.1",
"@ionic/storage": "^2.3.1", "@ionic/storage": "^2.3.1",
src/app/pages/agenda/agenda.page.html
+165 -156
View File
@@ -14,172 +14,181 @@
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-header> <ion-header>
<ion-toolbar class="bg-blue"> <div class="bg-blue">
<div class="main-content"> <div class="main-content">
<!-- Toolbar --> <!-- Toolbar -->
<ion-toolbar> <div>
<!-- Calendar is here -->
<div [ngSwitch]="segment">
<div *ngSwitchCase="'Combinada'">
<!-- Calendar is here --> <ion-row class="ion-justify-content-between calendar-tool-tip">
<div [ngSwitch]="segment"> <ion-row class="ion-align-items-center">
<div *ngSwitchCase="'Combinada'"> <!-- Move back one screen of the slides -->
<div (click)="back()" class="arrow">
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
</div>
<ion-row class="ion-justify-content-between calendar-tool-tip"> <!-- Move forward one screen of the slides -->
<ion-row class="ion-align-items-center"> <h2 class="capitaliseText">{{ viewTitle }}</h2>
<!-- Move back one screen of the slides --> <div class="drop-down">
<ion-button fill="clear" (click)="back()"> <ion-icon slot="icon-only" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon> <div class="drop-down-container">
</ion-button> <ul>
<!-- Move forward one screen of the slides --> <li *ngFor="let month of monthList" (click)="dropDownChangeDate(month.id)" >{{ month.name }}</li>
<h2 class="capitaliseText">{{ viewTitle }}</h2> </ul>
<ion-icon class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon> </div>
<!-- Move forward one screen of the slides --> </div>
<ion-button fill="clear" (click)="next()"> <!-- Move forward one screen of the slides -->
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon> <div (click)="next()" class="arrow">
</ion-button> <ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
</ion-row> </div>
<ion-row class="ion-align-items-center">
<ion-icon name="add-circle-outline"></ion-icon> </ion-row>
<ion-icon name="add-circle-outline"></ion-icon> <ion-row class="ion-align-items-center">
<ion-icon name="add" (click)="openCalModal()" ></ion-icon> <ion-icon class="right-icons" name="add-circle-outline"></ion-icon>
<ion-icon class="right-icons" src="assets/images/icons-received-event.svg"></ion-icon>
<ion-icon class="right-icons" src="assets/images/icons-add-new-event.svg" (click)="openCalModal()" ></ion-icon>
</ion-row>
</ion-row> </ion-row>
</ion-row>
<calendar
<calendar [eventSource]="eventSource"
[eventSource]="eventSource" [calendarMode]="calendar.mode"
[calendarMode]="calendar.mode" [currentDate]="calendar.currentDate"
[currentDate]="calendar.currentDate" (onEventSelected)="onEventSelected($event)"
(onEventSelected)="onEventSelected($event)" (onTitleChanged)="onViewTitleChanged($event)"
(onTitleChanged)="onViewTitleChanged($event)" (onRangeChanged)="onRangeChanged($event)"
(onRangeChanged)="onRangeChanged($event)" (onCurrentDateChanged)="onCurrentChanged($event)"
(onCurrentDateChanged)="onCurrentChanged($event)" queryMode="remote"
queryMode="remote" startHour="6"
startHour="6" endHour="20"
endHour="20" step="30"
step="30" startingDayMonth="1"
startingDayMonth="1" noEventsLabel="Sem Eventos"
noEventsLabel="Sem Eventos" allDayLabel="Todo o dia"
allDayLabel="Todo o dia" [monthviewDisplayEventTemplate]="template"
[monthviewDisplayEventTemplate]="template" >
> </calendar>
</calendar>
<!-- Adding a customized ng-template -->
<!-- Adding a customized ng-template --> <ng-template #template let-view="view" let-row="row" let-col="col">
<ng-template #template let-view="view" let-row="row" let-col="col"> <div [class.with-event]="view.dates[row*7+col].events.length">
<div [class.with-event]="view.dates[row*7+col].events.length"> {{view.dates[row*7+col].label}}
{{view.dates[row*7+col].label}} <div class="indicator-container">
<div class="indicator-container"> <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
<!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> --> </div>
</div> </div>
</div> </ng-template>
</ng-template> </div>
</div> <div *ngSwitchCase="'Pessoal'">
<div *ngSwitchCase="'Pessoal'"> <ion-row>
<ion-row> <!-- Move back one screen of the slides -->
<!-- Move back one screen of the slides --> <ion-col size="2">
<ion-col size="2"> <ion-button fill="clear" (click)="back()">
<ion-button fill="clear" (click)="back()"> <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
<ion-icon name="arrow-back" slot="icon-only"></ion-icon> </ion-button>
</ion-button> </ion-col>
</ion-col> <!-- The title of the calendar in the middle -->
<!-- The title of the calendar in the middle --> <ion-col size="8" class="ion-text-center">
<ion-col size="8" class="ion-text-center"> <h2 class="capitaliseText">{{ viewTitle }}</h2>
<h2 class="capitaliseText">{{ viewTitle }}</h2> </ion-col>
</ion-col>
<!-- Move forward one screen of the slides -->
<!-- Move forward one screen of the slides --> <ion-col size="2">
<ion-col size="2"> <ion-button fill="clear" (click)="next()">
<ion-button fill="clear" (click)="next()"> <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
<ion-icon name="arrow-forward" slot="icon-only"></ion-icon> </ion-button>
</ion-button> </ion-col>
</ion-col> </ion-row>
</ion-row>
<calendar
<calendar [eventSource]="eventSource"
[eventSource]="eventSource" [calendarMode]="calendar.mode"
[calendarMode]="calendar.mode" [currentDate]="calendar.currentDate"
[currentDate]="calendar.currentDate" (onEventSelected)="onEventSelected($event)"
(onEventSelected)="onEventSelected($event)" (onTitleChanged)="onViewTitleChanged($event)"
(onTitleChanged)="onViewTitleChanged($event)" (onRangeChanged)="onRangeChanged($event)"
(onRangeChanged)="onRangeChanged($event)" (onCurrentDateChanged)="onCurrentChanged($event)"
(onCurrentDateChanged)="onCurrentChanged($event)" queryMode="remote"
queryMode="remote" startHour="6"
startHour="6" endHour="20"
endHour="20" step="30"
step="30" startingDayMonth="1"
startingDayMonth="1" noEventsLabel="Sem Eventos"
noEventsLabel="Sem Eventos" allDayLabel="Todo o dia"
allDayLabel="Todo o dia" [monthviewDisplayEventTemplate]="template"
[monthviewDisplayEventTemplate]="template" >
> </calendar>
</calendar> <!-- (onTimeSelected)="onTimeSelected($event)" -->
<!-- (onTimeSelected)="onTimeSelected($event)" -->
<!-- Adding a customized ng-template -->
<!-- Adding a customized ng-template --> <ng-template #template let-view="view" let-row="row" let-col="col">
<ng-template #template let-view="view" let-row="row" let-col="col"> <div [class.with-event]="view.dates[row*7+col].events.length">
<div [class.with-event]="view.dates[row*7+col].events.length"> {{view.dates[row*7+col].label}}
{{view.dates[row*7+col].label}} <div class="indicator-container">
<div class="indicator-container"> <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
<!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> --> </div>
</div> </div>
</div> </ng-template>
</ng-template>
</div>
</div> <div *ngSwitchCase="'Oficial'">
<div *ngSwitchCase="'Oficial'"> <ion-row>
<ion-row> <!-- Move back one screen of the slides -->
<!-- Move back one screen of the slides --> <ion-col size="2">
<ion-col size="2"> <ion-button fill="clear" (click)="back()">
<ion-button fill="clear" (click)="back()"> <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
<ion-icon name="arrow-back" slot="icon-only"></ion-icon> </ion-button>
</ion-button> </ion-col>
</ion-col> <!-- The title of the calendar in the middle -->
<!-- The title of the calendar in the middle --> <ion-col size="8" class="ion-text-center">
<ion-col size="8" class="ion-text-center"> <h2 class="capitaliseText">{{ viewTitle }}</h2>
<h2 class="capitaliseText">{{ viewTitle }}</h2> </ion-col>
</ion-col>
<!-- Move forward one screen of the slides -->
<!-- Move forward one screen of the slides --> <ion-col size="2">
<ion-col size="2"> <ion-button fill="clear" (click)="next()">
<ion-button fill="clear" (click)="next()"> <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
<ion-icon name="arrow-forward" slot="icon-only"></ion-icon> </ion-button>
</ion-button> </ion-col>
</ion-col> </ion-row>
</ion-row>
<calendar
<calendar [eventSource]="eventSource"
[eventSource]="eventSource" [calendarMode]="calendar.mode"
[calendarMode]="calendar.mode" [currentDate]="calendar.currentDate"
[currentDate]="calendar.currentDate" (onEventSelected)="onEventSelected($event)"
(onEventSelected)="onEventSelected($event)" (onTitleChanged)="onViewTitleChanged($event)"
(onTitleChanged)="onViewTitleChanged($event)" (onRangeChanged)="onRangeChanged($event)"
(onRangeChanged)="onRangeChanged($event)" (onCurrentDateChanged)="onCurrentChanged($event)"
(onCurrentDateChanged)="onCurrentChanged($event)" queryMode="remote"
queryMode="remote" startHour="6"
startHour="6" endHour="20"
endHour="20" step="30"
step="30" startingDayMonth="1"
startingDayMonth="1" noEventsLabel="Sem Eventos"
noEventsLabel="Sem Eventos" allDayLabel="Todo o dia"
allDayLabel="Todo o dia" [monthviewDisplayEventTemplate]="template"
[monthviewDisplayEventTemplate]="template" >
> </calendar>
</calendar>
<!-- Adding a customized ng-template -->
<!-- Adding a customized ng-template --> <ng-template #template let-view="view" let-row="row" let-col="col">
<ng-template #template let-view="view" let-row="row" let-col="col"> <div [class.with-event]="view.dates[row*7+col].events.length">
<div [class.with-event]="view.dates[row*7+col].events.length"> {{view.dates[row*7+col].label}}
{{view.dates[row*7+col].label}} <div class="indicator-container">
<div class="indicator-container"> <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
<!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> --> </div>
</div> </div>
</div> </ng-template>
</ng-template>
</div>
</div> </div>
</div> </div>
</ion-toolbar>
</div> </div>
</ion-toolbar> </div>
</ion-header> </ion-header>
<ion-content> <ion-content>
@@ -202,7 +211,7 @@
</ion-row> </ion-row>
</ion-row> </ion-row>
<!-- Timelien --> <!-- Timeline -->
<div *ngIf="showTimeline"> <div *ngIf="showTimeline">
<mwl-demo-utils-calendar-header class="timeline" <mwl-demo-utils-calendar-header class="timeline"
[(view)]="view" [(view)]="view"
src/app/pages/agenda/agenda.page.scss
+48
View File
@@ -289,6 +289,7 @@ label{
.arrow-down{ .arrow-down{
font-size: 28px; font-size: 28px;
} }
} }
@@ -316,4 +317,51 @@ label{
} }
} }
}
.drop-down{
.drop-down-container{
display: none;
border-top: 2px solid #42b9fe;
position: absolute;
background: white;
z-index: 100000;
box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.3);
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
margin-left: -122px;
padding: 4px 15px;
ul{
margin: 0px;
padding: 0px;
li{
list-style: none;
height: 35px;
display: flex;
align-items: center;
}
}
}
}
.capitaliseText{
min-width: 159px;
text-align: center;
}
.arrow{
padding: 0px 6px;
}
.right-icons{
padding: 0px 4px;
}
.capitaliseText{
font-size: 20px;
} }
src/app/pages/agenda/agenda.page.ts
+26 -9
View File
@@ -47,9 +47,23 @@ export class AgendaPage implements OnInit {
this.view = view; this.view = view;
} }
monthList = [
{ name: 'Janeiro', id: 'Jan' },
{ name: 'Fevereiro', id: 'Feb' },
{ name: 'Março', id: 'Mar' },
{ name: 'Abril', id: 'Apr' },
{ name: 'Maio', id: 'May' },
{ name: 'Junho', id: 'June' },
{ name: 'Julho', id: 'July' },
{ name: 'Agosto', id: 'Aug' },
{ name: 'Setembro', id: 'Sept' },
{ name: 'Outubro', id: 'Oct' },
{ name: 'Novembro', id: 'Nov' },
{ name: 'Dezembro', id: 'Dec' }
]
showTimeline: boolean= false; showTimeline: boolean= false;
events: CalendarEvent[] = [ events: CalendarEvent[] = [
/* { /* {
title: '123', title: '123',
@@ -69,8 +83,6 @@ export class AgendaPage implements OnInit {
}, */ }, */
]; ];
/* List of events of our calendar */ /* List of events of our calendar */
eventSource = []; eventSource = [];
/* The title of the calendar */ /* The title of the calendar */
@@ -178,9 +190,18 @@ export class AgendaPage implements OnInit {
this.timelineDate = formatDate(ev,'dd MMMM yyyy', 'pt'); this.timelineDate = formatDate(ev,'dd MMMM yyyy', 'pt');
this.viewDate = new Date(formatDate(ev,'yyyy-MM-dd', 'pt')); this.viewDate = new Date(formatDate(ev,'yyyy-MM-dd', 'pt'));
// calendar change date // calendar change date
this.eventSelectedDate = ev; console.log('!!this!!')
this.eventSelectedDate = new Date(ev);
}; };
// changedate
dropDownChangeDate(id: string){
const currentCandarDayYear = formatDate(this.eventSelectedDate,'dd -- yyyy', 'pt');
const newDate = new Date(currentCandarDayYear.replace('--',id));
this.onCurrentChanged(newDate);
}
/* onTimeSelected = (ev: { selectedTime: Date, events: any[] }) => { /* onTimeSelected = (ev: { selectedTime: Date, events: any[] }) => {
console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' + (ev.events !== undefined && ev.events.length !== 0)); console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' + (ev.events !== undefined && ev.events.length !== 0));
this.eventSelectedDate2 = ev.selectedTime; this.eventSelectedDate2 = ev.selectedTime;
@@ -243,6 +264,7 @@ export class AgendaPage implements OnInit {
loadRangeEvents(startTime: Date, endTime: Date){ loadRangeEvents(startTime: Date, endTime: Date){
console.log('Update date'); console.log('Update date');
console.log('start ',startTime,' end', endTime)
this.showTimeline = false; this.showTimeline = false;
this.showLoader = true; this.showLoader = true;
@@ -293,9 +315,6 @@ export class AgendaPage implements OnInit {
this.showTimeline = true; this.showTimeline = true;
}); });
} }
else{ else{
@@ -423,6 +442,4 @@ export class AgendaPage implements OnInit {
this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate); this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
} }
} }
} }
src/assets/images/icons-add-new-event.svg
+19
View File
@@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35">
<g fill="none" fill-rule="evenodd">
<g>
<g>
<g transform="translate(-345 -109) translate(0 109) translate(345)">
<g>
<path fill="#FFF" d="M7 7H18V8H7z"/>
<circle cx="10.5" cy="7.5" r="1.5" fill="#FFF"/>
<g fill="#42B9FE">
<circle cx="17.5" cy="17.5" r="17.5"/>
</g>
</g>
<rect width="2" height="15" x="17" y="10" fill="#FFF" rx="1"/>
<rect width="2" height="15" x="17" y="10" fill="#FFF" rx="1" transform="rotate(90 18 17.5)"/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 823 B

src/assets/images/icons-received-event.svg
+22
View File
@@ -0,0 +1,22 @@
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35">
<g fill="none" fill-rule="evenodd">
<g>
<g>
<g>
<g transform="translate(-290 -109) translate(0 109) translate(290)">
<path fill="#FFF" d="M7 7H18V8H7z"/>
<circle cx="10.5" cy="7.5" r="1.5" fill="#FFF"/>
<g fill="#42B9FE">
<circle cx="17.5" cy="17.5" r="17.5"/>
</g>
</g>
<path stroke="#FFF" stroke-linejoin="round" stroke-width="2" d="M8 16L17.5 20 27 16 27 27 8 27z" transform="translate(-290 -109) translate(0 109) translate(290)"/>
<path stroke="#FFF" stroke-linejoin="round" stroke-width="2" d="M10.5 17L10.5 7 24.5 7 24.5 17" transform="translate(-290 -109) translate(0 109) translate(290)"/>
<path stroke="#FFF" stroke-width="2" d="M8 16L10.5 13.5" transform="translate(-290 -109) translate(0 109) translate(290)"/>
<path stroke="#FFF" stroke-width="2" d="M24.5 16L27 13.5" transform="translate(-290 -109) translate(0 109) translate(290) matrix(-1 0 0 1 51.5 0)"/>
<path fill="#FFF" d="M17.5 15.25L15.443 16.332 15.836 14.041 14.171 12.418 16.471 12.084 17.5 10 18.529 12.084 20.829 12.418 19.164 14.041 19.557 16.332z" transform="translate(-290 -109) translate(0 109) translate(290)"/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

src/global.scss
+11 -10
View File
@@ -29,6 +29,8 @@
// calendar // calendar
// ionic calendar2
td.monthview-current{ td.monthview-current{
color: white; color: white;
/* border-radius: 89px; */ /* border-radius: 89px; */
@@ -57,6 +59,14 @@ td.monthview-selected {
color: black !important; color: black !important;
} }
.event-detail-container{
display: none;
}
.cal-week-view {
border-top: none !important;
}
/* Timeline */ /* Timeline */
@@ -133,16 +143,7 @@ td.monthview-selected {
display: none; display: none;
} }
// ionic calendar2
.event-detail-container{
display: none;
}
.cal-week-view {
border-top: none !important;
}
.timeline-box-{} .timeline-box-{}
/* angular-cli file: src/styles.css */ /* angular-cli file: src/styles.css */
@import "../node_modules/angular-calendar/css/angular-calendar.css"; @import "../node_modules/angular-calendar/css/angular-calendar.css";
@import "./style/main.scss";