From 96a60cf0ced0d5b7985e0f39174668512d9b2b63 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Mon, 9 Dec 2019 12:35:21 +0530 Subject: [PATCH] Desktop UI Complete --- package-lock.json | 8 + package.json | 1 + src/app/app.module.ts | 8 +- .../custom-selector.component.scss | 6 + src/app/schedules/schedules.component.html | 71 ++++++- src/app/schedules/schedules.component.scss | 193 +++++++++++++++++- src/app/schedules/schedules.component.ts | 18 ++ .../widgets-holder.component.ts | 2 +- 8 files changed, 290 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index 37cbd1b..1ba21da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7935,6 +7935,14 @@ "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==", "dev": true }, + "ngx-drag-to-select": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/ngx-drag-to-select/-/ngx-drag-to-select-3.1.1.tgz", + "integrity": "sha512-QKkIEVbAxSswLZZrnoebB3iyhN2uY8eihxDtOIakDd/m5SnH/P0d36imXeaM7ZnaTc04XJIaptz4JkumMCBu2g==", + "requires": { + "tslib": "^1.9.0" + } + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", diff --git a/package.json b/package.json index 6147f0e..afbecbc 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@angular/router": "~8.2.9", "ionicons": "^4.6.3", "moment": "^2.24.0", + "ngx-drag-to-select": "^3.1.1", "rxjs": "~6.4.0", "tslib": "^1.10.0", "zone.js": "~0.9.1" diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3c4d451..7d4b597 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,5 +1,6 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; // Importing Routes import { AppRoutingModule } from './app-routing.module'; @@ -16,6 +17,9 @@ import { CustomSelectorComponent } from './custom-selector/custom-selector.compo import { FaqComponent } from './faq/faq.component'; import { SupportComponent } from './support/support.component'; +// Plugin / Other packages +import { DragToSelectModule } from 'ngx-drag-to-select'; + @NgModule({ declarations: [ AppComponent, @@ -31,7 +35,9 @@ import { SupportComponent } from './support/support.component'; ], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + FormsModule, + DragToSelectModule.forRoot() ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/custom-selector/custom-selector.component.scss b/src/app/custom-selector/custom-selector.component.scss index 0839a23..10f0d1d 100644 --- a/src/app/custom-selector/custom-selector.component.scss +++ b/src/app/custom-selector/custom-selector.component.scss @@ -1,4 +1,6 @@ .selector { + position: relative; + .container { display: flex; width: 100%; @@ -7,6 +9,7 @@ color: var(--brand-blue); align-items: center; justify-content: space-between; + position: relative; .selected-value { font-weight: 500; @@ -43,6 +46,9 @@ border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; overflow: hidden; + position: absolute; + left: 10%; + top: 100%; } li { diff --git a/src/app/schedules/schedules.component.html b/src/app/schedules/schedules.component.html index d3a7845..0d7be50 100644 --- a/src/app/schedules/schedules.component.html +++ b/src/app/schedules/schedules.component.html @@ -13,13 +13,28 @@ Sunday Monday Tuesday Wednesday Thursday Friday Saturday -
- {{ preceedingDay }} - {{ selectedMonthDay }} + + + + {{ preceedingDay }} - {{ succeedingDay }} -
+ + {{ selectedMonthDay }} + + + {{ succeedingDay }} + + + +

+ Note: Hold CTRL and click on dates for multisection +

+ +
@@ -37,7 +52,7 @@
{{ preceedingDay }} - + {{ selectedMonthDay }} @@ -101,7 +116,49 @@

Oct 29 2019

-
+ + +
+
+ +
    +
  • + + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+ + : + + +
+ +
+ + : + + +
+
+
+ + +
+
diff --git a/src/app/schedules/schedules.component.scss b/src/app/schedules/schedules.component.scss index 8ff7315..7f1541a 100644 --- a/src/app/schedules/schedules.component.scss +++ b/src/app/schedules/schedules.component.scss @@ -8,12 +8,51 @@ .calendar-holder { width: 65%; margin-right: auto; + position: relative; + height: calc(100vh - 70px); + overflow: auto; .widget-heading-holder { width: 100%; } } +.add-schedule-button { + position: absolute; + right: 30px; + bottom: 50px; + width: 50px; + height: 50px; + border-radius: 50%; + background-color: var(--brand-blue); + color: white; + border: 0px; + font-size: 20px; + transform: scale(0); + transition: transform 0.3s; + + &.active { + transform: scale(1); + animation: ripple-effect 1s linear; + animation-iteration-count: 3; + } +} + +@keyframes ripple-effect { + 0% { + box-shadow: 0 0 0 10px rgba(black, 0.3); + } + 30% { + box-shadow: 0 0 0 20px rgba(black, 0.2); + } + 60% { + box-shadow: 0 0 0 30px rgba(black, 0.1); + } + 100% { + box-shadow: 0 0 0 50px rgba(black, 0); + } +} + .schedule-list-holder { width: 30%; background-color: white; @@ -52,6 +91,14 @@ border-radius: 10px; margin-top: 30px; + .note { + font-size: 14px; + color: var(--grey); + font-style: italic; + margin-top: 10px; + letter-spacing: 1px; + } + .month { text-align: center; padding: 5px 0 20px; @@ -90,6 +137,12 @@ width: 100%; flex-wrap: wrap; + .dts-select-item.selected { + background-color: var(--brand-blue); + color: white; + } + + span { display: block; cursor: pointer; @@ -109,9 +162,6 @@ border-right: 0; } - &:hover { - background-color: #efefef; - } &.current-date { color: var(--brand-blue); @@ -128,11 +178,6 @@ } } - &.active { - background-color: var(--brand-blue); - color: white; - } - &.non-current-date { color: #cecece; } @@ -371,3 +416,135 @@ padding-left: 20px; } } + +.overlay { + background-color: rgba(black, 0.2); + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + transition: opacity 0.3s; + opacity: 0; + transform: scale(0); + + &.active { + transform: scale(1); + opacity: 1; + } +} + +.scheduling-popup { + background-color: white; + box-shadow: 0px 0px 5px #cecece; + border-radius: 10px; + padding: 15px; + width: 300px; + + input[type="text"] { + border: 0px; + border-bottom: 1px solid #efefef; + font-size: 14px; + letter-spacing: 1px; + padding: 5px; + font-weight: 500; + color: var(--grey); + width: 100%; + + &::placeholder { + opacity: 0.5; + } + } + + ul { + list-style: none; + margin: 10px 0; + } + + .radio { + width: 15px; + height: 15px; + border-radius: 50%; + background-color: white; + margin-right: 10px; + border: 1px solid var(--grey); + position: relative; + + &.active { + &::before { + content: ""; + position: absolute; + display: block; + width: 70%; + height: 70%; + left: 15%; + top: 15%; + border-radius: 50%; + background-color: var(--brand-blue); + } + } + } + + li { + padding: 5px 0; + display: flex; + width: 100%; + align-items: center; + + label { + font-size: 15px; + color: var(--grey); + font-weight: 500; + letter-spacing: 1px; + } + } + + .time-selector { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + margin-bottom: 15px; + + .input-holder { + display: flex; + width: 45%; + border: 1px solid #efefef; + align-items: center; + color: var(--grey); + + input { + width: calc((100% - 40px) / 2); + height: 30px; + font-size: 12px; + border: 0px; + text-align: center; + color: var(--dark-grey); + } + + button { + width: 40px; + align-self: stretch; + border: 0px; + background-color: var(#efefef); + color: var(--dark-grey); + } + } + } + + .action-buttons { + display: flex; + width: 100%; + justify-content: space-between; + + button:last-child { + background-color: white; + color: var(--brand-blue); + border: 1px solid var(--brand-blue); + } + } +} diff --git a/src/app/schedules/schedules.component.ts b/src/app/schedules/schedules.component.ts index a3ab95c..d59acc7 100644 --- a/src/app/schedules/schedules.component.ts +++ b/src/app/schedules/schedules.component.ts @@ -17,6 +17,20 @@ export class SchedulesComponent implements OnInit { succeedingDays: Array = []; selectedMonthDays: Array = []; selectedTab: string = 'holiday'; + selectedDatePosition: any; + selectedDatesForSchedule: Array = []; + showSchedulePopup: boolean = false; + scheduleType: string = 'change time'; + scheduleFromTime = { + hour: '09', + min: '30', + isBeforeMidday: true + }; + scheduleToTime = { + hour: '09', + min: '00', + isBeforeMidday: false + }; constructor() { } @@ -28,6 +42,10 @@ export class SchedulesComponent implements OnInit { this.renderCalendar(); } + selectDates(dates: Array) { + this.selectedDatesForSchedule = dates; + } + selectDay(selectedMonthDay: number) { this.selectedDate = selectedMonthDay; } diff --git a/src/app/widgets-holder/widgets-holder.component.ts b/src/app/widgets-holder/widgets-holder.component.ts index 8779e87..e1cb159 100644 --- a/src/app/widgets-holder/widgets-holder.component.ts +++ b/src/app/widgets-holder/widgets-holder.component.ts @@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./widgets-holder.component.scss'] }) export class WidgetsHolderComponent implements OnInit { - selected_nav: string = 'schedule'; + selected_nav: string = 'dashboard'; constructor() { }