peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-18 20:47:54 +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": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-5.3.1.tgz",
@@ -3081,6 +3089,11 @@
"integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
"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": {
"version": "0.0.2",
"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/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic-native/wheel-selector": "^5.31.1",
"@ionic/angular": "^5.0.0",
"@ionic/pwa-elements": "^3.0.1",
"@ionic/storage": "^2.3.1",
src/app/pages/agenda/agenda.page.html
+23 -14
View File
@@ -14,11 +14,10 @@
</ion-toolbar>
</ion-header>
<ion-header>
<ion-toolbar class="bg-blue">
<div class="bg-blue">
<div class="main-content">
<!-- Toolbar -->
<ion-toolbar>
<div>
<!-- Calendar is here -->
<div [ngSwitch]="segment">
<div *ngSwitchCase="'Combinada'">
@@ -26,21 +25,31 @@
<ion-row class="ion-justify-content-between calendar-tool-tip">
<ion-row class="ion-align-items-center">
<!-- Move back one screen of the slides -->
<ion-button fill="clear" (click)="back()">
<div (click)="back()" class="arrow">
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
</ion-button>
</div>
<!-- Move forward one screen of the slides -->
<h2 class="capitaliseText">{{ viewTitle }}</h2>
<ion-icon class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
<div class="drop-down">
<ion-icon slot="icon-only" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
<div class="drop-down-container">
<ul>
<li *ngFor="let month of monthList" (click)="dropDownChangeDate(month.id)" >{{ month.name }}</li>
</ul>
</div>
</div>
<!-- Move forward one screen of the slides -->
<ion-button fill="clear" (click)="next()">
<div (click)="next()" class="arrow">
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
</ion-button>
</div>
</ion-row>
<ion-row class="ion-align-items-center">
<ion-icon name="add-circle-outline"></ion-icon>
<ion-icon name="add-circle-outline"></ion-icon>
<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>
@@ -177,9 +186,9 @@
</div>
</div>
</ion-toolbar>
</div>
</ion-toolbar>
</div>
</div>
</ion-header>
<ion-content>
@@ -202,7 +211,7 @@
</ion-row>
</ion-row>
<!-- Timelien -->
<!-- Timeline -->
<div *ngIf="showTimeline">
<mwl-demo-utils-calendar-header class="timeline"
[(view)]="view"
src/app/pages/agenda/agenda.page.scss
+48
View File
@@ -289,6 +289,7 @@ label{
.arrow-down{
font-size: 28px;
}
}
@@ -317,3 +318,50 @@ 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,8 +47,22 @@ export class AgendaPage implements OnInit {
this.view = view;
}
showTimeline: boolean= false;
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;
events: CalendarEvent[] = [
/* {
@@ -69,8 +83,6 @@ export class AgendaPage implements OnInit {
}, */
];
/* List of events of our calendar */
eventSource = [];
/* The title of the calendar */
@@ -178,9 +190,18 @@ export class AgendaPage implements OnInit {
this.timelineDate = formatDate(ev,'dd MMMM yyyy', 'pt');
this.viewDate = new Date(formatDate(ev,'yyyy-MM-dd', 'pt'));
// 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[] }) => {
console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' + (ev.events !== undefined && ev.events.length !== 0));
this.eventSelectedDate2 = ev.selectedTime;
@@ -243,6 +264,7 @@ export class AgendaPage implements OnInit {
loadRangeEvents(startTime: Date, endTime: Date){
console.log('Update date');
console.log('start ',startTime,' end', endTime)
this.showTimeline = false;
this.showLoader = true;
@@ -294,9 +316,6 @@ 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(
@@ -423,6 +442,4 @@ export class AgendaPage implements OnInit {
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
// ionic calendar2
td.monthview-current{
color: white;
/* border-radius: 89px; */
@@ -57,6 +59,14 @@ td.monthview-selected {
color: black !important;
}
.event-detail-container{
display: none;
}
.cal-week-view {
border-top: none !important;
}
/* Timeline */
@@ -133,16 +143,7 @@ td.monthview-selected {
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";
@import "./style/main.scss";