From 7248772ef8a746e0f04ea2253c673f93fec88792 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Tue, 23 Jun 2020 13:23:26 +0530 Subject: [PATCH] Download animation for topic + Softcoded chapters --- src/app/app-routing.module.ts | 2 +- .../confirmation-popup.component.html | 4 +- .../confirmation-popup.component.ts | 4 +- .../chapter-notes.component.html | 4 +- .../course-details.component.html | 136 ++++-------------- .../course-details.component.scss | 48 +++++++ .../course-details.component.ts | 70 ++++++++- src/assets/custom-icons/download.svg | 2 +- 8 files changed, 154 insertions(+), 116 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 325e51a..346da1e 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -21,7 +21,7 @@ const routes: Routes = [ { component: ChapterNotesComponent, path: 'chapter-notes/:heading' }, { component: VideoChapterComponent, path: 'video-chapter/:heading' }, { component: VideoNotesComponent, path: 'video-notes/:heading' }, - { component: QuizComponent, path: 'quiz' }, + { component: QuizComponent, path: 'quiz/:heading' }, { component: CalendarComponent, path: 'calendar' }, { component: AttendanceComponent, path: 'attendance'}, { component: ForumPageComponent, path: 'forum'}, diff --git a/src/app/reusable-components/confirmation-popup/confirmation-popup.component.html b/src/app/reusable-components/confirmation-popup/confirmation-popup.component.html index c93c478..0db8886 100644 --- a/src/app/reusable-components/confirmation-popup/confirmation-popup.component.html +++ b/src/app/reusable-components/confirmation-popup/confirmation-popup.component.html @@ -10,7 +10,7 @@ Note: You can always download it back if you would like to.

- - + +
diff --git a/src/app/reusable-components/confirmation-popup/confirmation-popup.component.ts b/src/app/reusable-components/confirmation-popup/confirmation-popup.component.ts index d549763..65133ae 100644 --- a/src/app/reusable-components/confirmation-popup/confirmation-popup.component.ts +++ b/src/app/reusable-components/confirmation-popup/confirmation-popup.component.ts @@ -13,8 +13,8 @@ export class ConfirmationPopupComponent implements OnInit { ngOnInit(): void { } - closePopup() { - this.popupTerminator.emit(true); + closePopup(param: string) { + this.popupTerminator.emit(param); } } diff --git a/src/app/tabs/courses/chapter-notes/chapter-notes.component.html b/src/app/tabs/courses/chapter-notes/chapter-notes.component.html index 82ffa9f..3362f09 100644 --- a/src/app/tabs/courses/chapter-notes/chapter-notes.component.html +++ b/src/app/tabs/courses/chapter-notes/chapter-notes.component.html @@ -4,7 +4,7 @@
- + {{ heading }}
@@ -24,7 +24,7 @@
- +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolore doloremque necessitatibus ut quae ipsum, voluptas fuga perferendis incidunt labore voluptatibus iusto ullam ab repudiandae commodi alias excepturi nulla! Vero? Lorem ipsum dolor sit amet, Lorem ipsum consectetur adipisicing elit. Saepe et cupiditate at nam earum mollitia commodi cum quidem dolore aliquid nostrum architecto voluptatem eius recusandae, enim explicabo deserunt expedita similique. diff --git a/src/app/tabs/courses/course-details/course-details.component.html b/src/app/tabs/courses/course-details/course-details.component.html index 6d07015..a5d7f8b 100644 --- a/src/app/tabs/courses/course-details/course-details.component.html +++ b/src/app/tabs/courses/course-details/course-details.component.html @@ -15,7 +15,7 @@

+ [ngClass]="{'active': selectedSegment === 'home' }"> Chapters + -
  • -
    - -
    - -

    5 Topics

    -
    - -
    -
      -
    • - -
      -

      - Video: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum. -

      - -
      -
      • - -
    • - -
      -

      - Notes: Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum. -

      - -
      -
      • - -
    • - -
      -

      - Video: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum. -

      - -
      -
      • - -
    • - -
      -

      - Notes: Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum. -

      - -
      -
      • -
    -
    • -
  • -
    +
  • +
    - -

    5 Topics

    + +

    {{ chapter.topics.length }} Topics

      -
    • +
    • -

      - Video: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum. +

      + + Video: + + + Notes: + + + Notes: + + {{ topic.heading }} - {{ topic.description }}

      - -
      -
      • - -
    • - -
      -

      - Notes: Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum. -

      - -
      -
      • - -
    • - -
      -

      - Video: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum. -

      - -
      -
      • - -
    • - -
      -

      - Notes: Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum. -

      -
      • @@ -156,7 +82,7 @@
      - +
    diff --git a/src/app/tabs/courses/course-details/course-details.component.scss b/src/app/tabs/courses/course-details/course-details.component.scss index 905a471..cc0d8f4 100644 --- a/src/app/tabs/courses/course-details/course-details.component.scss +++ b/src/app/tabs/courses/course-details/course-details.component.scss @@ -267,6 +267,7 @@ align-self: flex-start; position: relative; z-index: 2; + overflow: visible; &.checkmark { align-self: center; @@ -274,9 +275,56 @@ border-radius: 50%; } + &.delete { + fill: var(--danger-dark); + } + &.download { fill: var(--teal-green); } + + &.downloading { + fill: var(--teal-green); + overflow: visible; + + #download-arrow { + animation: verticalMovement 1s infinite; + fill: var(--light-grey); + } + } + } + + .progress-button { + transform: scale(0.6)translateX(17px); + } + + #progress { + stroke: var(--green); + animation: fill 2s forwards; + } + + @keyframes fill { + 0% { + stroke-dashoffset: calc(116.8 * (1 - 0.2)); + } + 50% { + stroke-dashoffset: calc(116.8 * (1 - 0.5)); + } + 100% { + stroke-dashoffset: calc(116.8 * (1 - 0.999999)); + } + } +} + +@keyframes verticalMovement { + 0% { + transform: translateY(0px); + } + 50% { + transform: translateY(20px); + } + 0% { + transform: translateY(0px); } } diff --git a/src/app/tabs/courses/course-details/course-details.component.ts b/src/app/tabs/courses/course-details/course-details.component.ts index bd2d39e..d9e6dbd 100644 --- a/src/app/tabs/courses/course-details/course-details.component.ts +++ b/src/app/tabs/courses/course-details/course-details.component.ts @@ -12,9 +12,60 @@ export class CourseDetailsComponent implements OnInit { selectedSegment: string = 'home'; heading: string; routeSubscription: Subscription; - selectedChapter: number = 1; + selectedChapter: number = 0; showDeletePopup: boolean = false; isSubSegment: boolean = true; + selectedTopic: number; + + chapterList = [{ + heading: 'Chapter 1', + isCompleted: false, + topics: [{ + heading: 'Living Things', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + mediaState: 'downloaded', + isCompleted: true, + type: 'video', + url: '/video-chapter', + param: 'Living Things' + }, { + heading: 'Living Things-1', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + mediaState: 'none', + isCompleted: true, + type: 'notes', + url: '/chapter-notes', + param: 'Living Things-1' + }, { + heading: 'Living Things-2', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + mediaState: 'none', + isCompleted: false, + type: 'quiz', + url: '/quiz', + param: 'Living Things-2' + }] + }, { + heading: 'Chapter 2', + isCompleted: true, + topics: [{ + heading: 'Earth', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + mediaState: 'none', + isCompleted: true, + type: 'video', + url: '/video-chapter', + param: 'Earth' + }, { + heading: 'Earth-2', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + mediaState: 'none', + isCompleted: true, + type: 'quiz', + url: '/quiz-chapter', + param: 'Earth-2' + }] + }]; constructor( private route: ActivatedRoute, @@ -35,10 +86,23 @@ export class CourseDetailsComponent implements OnInit { this.location.back(); } - getPopupDecision(e : boolean) { - if (e) { + getPopupDeleteDecision(e : string) { + if (e === 'false') { + this.showDeletePopup = false; + } + + if (e === 'true') { + this.chapterList[this.selectedChapter].topics[this.selectedTopic].mediaState = 'none'; this.showDeletePopup = false; } } + downloadMedia() { + this.chapterList[this.selectedChapter].topics[this.selectedTopic].mediaState = 'downloading'; + + setTimeout(() => { + this.chapterList[this.selectedChapter].topics[this.selectedTopic].mediaState = 'downloaded'; + }, 1500); + } + } diff --git a/src/assets/custom-icons/download.svg b/src/assets/custom-icons/download.svg index 1f1d9e2..1dc6c69 100644 --- a/src/assets/custom-icons/download.svg +++ b/src/assets/custom-icons/download.svg @@ -9,7 +9,7 @@ c0-11,9-19.9,20-19.9c11,0,20,8.9,20,19.9v7.1c1-0.1,1.7-0.1,2.4-0.1c5.3,0,10.5,2.1,14.2,5.799c3.8,3.801,6,8.801,6,14.101 c0,1.101-0.101,2.101-0.3,3.101c5.6-0.9,17.399-5.101,17.399-23.301c0-9.7-6-18.2-14.399-21.7c-0.2-24.3-20-43.9-44.301-43.9 c-16.6,0-31,9.1-38.6,22.6c-16.3,2.8-28.6,17.7-27.7,35C0.846,76.519,11.246,88.418,24.846,92.219z"/> -