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

Improve calendar

Browse Source
This commit is contained in:
Peter Maquiran
2021-02-10 14:06:38 +01:00
parent c29b6ac688
commit fafe5afd95
9 changed files with 60 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
capacitor.config.json
+1
View File
@@ -3,6 +3,7 @@
"appName": "gabinete-digital",
"webDir": "www",
"npmClient": "npm",
"linuxAndroidStudioPath": "/snap/android-studio/current/android-studio/bin/studio.sh",
"cordova": {
"preferences": {
"ScrollEnabled": "false",
src/app/pages/agenda/agenda.page.html
+11 -7
View File
@@ -8,7 +8,7 @@
<div>
<!-- Calendar is here -->
<div [ngSwitch]="segment">
<div *ngSwitchCase="'Combinada'">
<div class="calendar-container" *ngSwitchCase="'Combinada'" [style.height]="calendarHeight">
<ion-row class="ion-justify-content-between calendar-tool-tip">
<ion-row class="ion-align-items-center">
@@ -85,7 +85,7 @@
</div>
</ng-template>
</div>
<div *ngSwitchCase="'Pessoal'">
<div class="calendar-container" *ngSwitchCase="'Pessoal'">
<ion-row>
<!-- Move back one screen of the slides -->
<ion-col size="2">
@@ -151,7 +151,7 @@
</ng-template>
</div>
<div *ngSwitchCase="'Oficial'">
<div class="calendar-container" *ngSwitchCase="'Oficial'">
<ion-row>
<!-- Move back one screen of the slides -->
<ion-col size="2">
@@ -218,13 +218,17 @@
</div>
</div>
<div class="calendar-border">
</div>
<!-- Calendar currente date -->
<ion-row class="ion-justify-content-between ion-align-items-center currente-date-timelien">
<ion-row class="timeline-header ion-justify-content-between ion-align-items-center currente-date-timelien">
<ion-row class="timeline-date align-center">
<!-- <ion-icon *ngIf="showCalendar" (click)="showCalendar=false" class="collaps" src="assets/images/icons-add-new-event.svg" >1</ion-icon>
<ion-icon *ngIf="!showCalendar" (click)="showCalendar=true" class="collaps" src="assets/images/icons-add-new-event.svg" >2</ion-icon> -->
<ion-icon *ngIf="showCalendar" (click)="calendarHeight='75px';showCalendar=false" class="collaps" src="assets/images/icons-collaps-up.svg" ></ion-icon>
<ion-icon *ngIf="!showCalendar" (click)="calendarHeight='347px';showCalendar=true" class="collaps" src="assets/images/icons-collaps-down.svg" ></ion-icon>
<span *ngIf="timelineIsCurrentDate()">Hoje, &nbsp;</span> {{ timelineDate }}
</ion-row>
<ion-row class="filter ion-align-items-center">
src/app/pages/agenda/agenda.page.scss
+20 -1
View File
@@ -417,7 +417,7 @@ td.monthview-primary-with-event {
font-weight: bold;
}
.collaps{
font-size: 28px;
font-size: 26px;
padding-right: 8px;
}
.filter{
@@ -462,3 +462,22 @@ td.monthview-primary-with-event {
.showcalendar{
display: none;
}
.timeline-header{
z-index: 1000000;
position: absolute;
width: 100%;
background-color: white;
}
.timeline-container{
margin-top: 67px;
}
.calendar-border{
background: #ebebeb;
margin: 13px 20px;
height: 2px;
}
src/app/pages/agenda/agenda.page.ts
+2
View File
@@ -53,6 +53,7 @@ export class AgendaPage implements OnInit {
// calendar
showCalendar: boolean;
calendarHeight: string;
// timeline
monthList = [
@@ -122,6 +123,7 @@ export class AgendaPage implements OnInit {
private alertCrontroller: AlertService
) {
this.calendarHeight = "347px";
this.showCalendar = true;
this.timelineDate = momentG(new Date(),'dd MMMM yyyy');
src/assets/images/collaps.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="448" height="448" viewBox="0 0 448 448" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.686 395.314L104 296L71.078 264.971C55.958 249.851 66.666 224 88.048 224H200.048C213.303 224 224 234.745 224 248V360C224 381.382 198.197 392.09 183.078 376.971L152 344L52.686 443.314C46.438 449.562 36.307 449.562 30.059 443.314L4.686 417.941C-1.562 411.693 -1.562 401.562 4.686 395.314ZM443.314 52.686L344 152L376.922 183.029C392.042 198.149 381.334 224 359.952 224H247.952C234.697 224 224 213.255 224 200V88C224 66.618 249.803 55.91 264.922 71.029L296 104L395.314 4.686C401.562 -1.562 411.693 -1.562 417.941 4.686L443.314 30.059C449.562 36.307 449.562 46.438 443.314 52.686Z" fill="#42B9FE"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 712 B

src/assets/images/icons-collaps-down.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="498" height="498" viewBox="0 0 498 498" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M496.998 248.106C497.492 385.105 386.893 496.504 249.894 496.998C112.895 497.492 1.49549 386.893 1.00156 249.894C0.507631 112.895 111.107 1.49552 248.106 1.00159C385.105 0.507661 496.504 111.107 496.998 248.106ZM266.41 362.838L401.421 226.85C410.787 217.416 410.732 202.217 401.299 192.951L384.238 176.012C374.804 166.646 359.604 166.701 350.338 176.134L249.105 278.1L147.139 176.867C137.705 167.501 122.505 167.556 113.239 176.989L96.3008 194.05C86.9348 203.484 86.9896 218.684 96.4231 227.95L232.411 362.961C241.845 372.327 257.044 372.272 266.41 362.838Z" fill="#42B9FE"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 692 B

src/assets/images/icons-collaps-up.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="496" height="496" viewBox="0 0 496 496" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 248C0 111 111 0 248 0C385 0 496 111 496 248C496 385 385 496 248 496C111 496 0 385 0 248ZM231 134.1L95.5 269.6C86.1 279 86.1 294.2 95.5 303.5L112.5 320.5C121.9 329.9 137.1 329.9 146.4 320.5L248 218.9L349.6 320.5C359 329.9 374.2 329.9 383.5 320.5L400.5 303.5C409.9 294.1 409.9 278.9 400.5 269.6L265 134.1C255.6 124.7 240.4 124.7 231 134.1Z" fill="#42B9FE"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 475 B

src/assets/images/icons-collaps.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="607" height="602" viewBox="0 0 607 602" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M347.302 228.595L570.803 6.09745L578.313 1.61434L585.813 1.63122L589.311 2.6391L603.28 16.1706L605.273 19.1751L605.768 21.6762L605.751 29.1762L605.248 30.675L604.243 32.6728L377.233 259.163L377.733 259.164L460.733 259.35L466.228 261.363L468.726 262.368L471.22 264.874L473.216 266.879L474.71 269.382L475.703 272.384L475.667 288.384L475.162 290.883L474.157 292.881L473.654 294.38L472.149 296.376L471.147 297.374L470.145 298.372L469.644 298.871L468.641 299.868L467.639 300.866L464.637 301.859L321.637 301.538L318.138 301.03L316.141 300.025L314.643 299.022L312.645 298.017L311.149 296.514L309.652 295.011L308.155 293.507L306.661 291.004L305.665 289.002L305.17 287L304.677 283.849L304.996 142L306.004 138.502L307.008 137.004L309.012 135.009L310.014 134.011L312.017 133.015L313.519 132.019L315.021 131.022L317.023 130.027L336.022 130.569L337.021 131.072L339.019 132.076L340.516 133.08L342.014 134.083L343.012 135.085L344.01 136.087L344.507 137.089L345.005 138.09L345.503 139.091L346.498 141.093L346.992 144.094L347.302 228.595Z" fill="#42B9FE" stroke="#42B9FE"/>
<path d="M259 373.363L36 596.362L28.5 600.862H21L17.5 599.862L3.5 586.362L1.5 583.362L1 580.862V573.362L1.5 571.862L2.5 569.862L229 342.862H228.5H145.5L140 340.862L137.5 339.862L135 337.362L133 335.362L131.5 332.862L130.5 329.862V313.862L131 311.362L132 309.362L132.5 307.862L134 305.862L135 304.862L136 303.862L136.5 303.362L137.5 302.362L138.5 301.362L141.5 300.362H284.5L288 300.862L290 301.862L291.5 302.862L293.5 303.862L295 305.362L296.5 306.862L298 308.362L299.5 310.862L300.5 312.862L301 314.862L301.5 318.013V459.863L300.5 463.363L299.5 464.863L297.5 466.863L296.5 467.863L294.5 468.863L293 469.863L291.5 470.863L289.5 471.863L270.5 471.363L269.5 470.863L267.5 469.863L266 468.863L264.5 467.863L263.5 466.863L262.5 465.863L262 464.863L261.5 463.863L261 462.863L260 460.863L259.5 457.863L259 373.363Z" fill="#42B9FE" stroke="#42B9FE"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

src/global.scss
+12
View File
@@ -258,3 +258,15 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
display: block;
height: 60px !important;
} */
.calendar-container{
height: 333px;
z-index: 10;
transition: 0.5s;
overflow-y: hidden;
.monthview-container{
overflow-y: hidden;
height: unset !important;
}
}