From 78acec1f8a1a391a5b48bfd3cb5e8559d0364de0 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Thu, 25 Jun 2020 17:59:51 +0530 Subject: [PATCH] Settings UI --- src/app/app-routing.module.ts | 2 + src/app/app.module.ts | 2 + src/app/settings/settings.component.html | 46 ++++++++ src/app/settings/settings.component.scss | 106 ++++++++++++++++++ src/app/settings/settings.component.spec.ts | 25 +++++ src/app/settings/settings.component.ts | 23 ++++ src/app/tabs/more/more.component.html | 2 +- src/assets/custom-icons/008-bell.svg | 63 +++++++++++ src/assets/custom-icons/010-moon.svg | 70 ++++++++++++ src/assets/custom-icons/012-round.svg | 77 +++++++++++++ src/assets/custom-icons/015-login.svg | 89 +++++++++++++++ src/assets/custom-icons/017-share.svg | 49 ++++++++ .../custom-icons/019-favorites-button.svg | 55 +++++++++ src/assets/custom-icons/021-paint-brush.svg | 62 ++++++++++ .../custom-icons/{book (1).svg => book-1.svg} | 0 15 files changed, 670 insertions(+), 1 deletion(-) create mode 100644 src/app/settings/settings.component.html create mode 100644 src/app/settings/settings.component.scss create mode 100644 src/app/settings/settings.component.spec.ts create mode 100644 src/app/settings/settings.component.ts create mode 100644 src/assets/custom-icons/008-bell.svg create mode 100644 src/assets/custom-icons/010-moon.svg create mode 100644 src/assets/custom-icons/012-round.svg create mode 100644 src/assets/custom-icons/015-login.svg create mode 100644 src/assets/custom-icons/017-share.svg create mode 100644 src/assets/custom-icons/019-favorites-button.svg create mode 100644 src/assets/custom-icons/021-paint-brush.svg rename src/assets/custom-icons/{book (1).svg => book-1.svg} (100%) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index b8653a1..1806a97 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -11,6 +11,7 @@ import { ForumPageComponent } from './forum-page/forum-page.component'; import { ChapterNotesComponent } from './tabs/courses/chapter-notes/chapter-notes.component'; import { QuizComponent } from './tabs/courses/quiz/quiz.component'; import { PostDetailsComponent } from './reusable-components/forum/post-details/post-details.component'; +import { SettingsComponent } from './settings/settings.component'; const routes: Routes = [ { path: '', pathMatch: 'full', redirectTo: 'welcome' }, @@ -26,6 +27,7 @@ const routes: Routes = [ { component: AttendanceComponent, path: 'attendance'}, { component: ForumPageComponent, path: 'forum'}, { component: PostDetailsComponent, path: 'forum-post-details'}, + { component: SettingsComponent, path: 'settings'}, ]; @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 0c5c221..11a89d0 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -26,6 +26,7 @@ import { ChapterNotesComponent } from './tabs/courses/chapter-notes/chapter-note import { CourseDetailsComponent } from './tabs/courses/course-details/course-details.component'; import { QuizComponent } from './tabs/courses/quiz/quiz.component'; import { PostDetailsComponent } from './reusable-components/forum/post-details/post-details.component'; +import { SettingsComponent } from './settings/settings.component'; @NgModule({ declarations: [ @@ -47,6 +48,7 @@ import { PostDetailsComponent } from './reusable-components/forum/post-details/p CourseDetailsComponent, QuizComponent, PostDetailsComponent, + SettingsComponent, ], imports: [ BrowserModule, diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html new file mode 100644 index 0000000..659eb37 --- /dev/null +++ b/src/app/settings/settings.component.html @@ -0,0 +1,46 @@ +
+
+ +
+ + Settings +
+
+ + +
diff --git a/src/app/settings/settings.component.scss b/src/app/settings/settings.component.scss new file mode 100644 index 0000000..e915f9b --- /dev/null +++ b/src/app/settings/settings.component.scss @@ -0,0 +1,106 @@ +.page { + background-color: var(--black); + height: 100vh; + overflow: auto; +} + +.nav-header { + background-color: var(--ash-black); + display: flex; + align-items: center; + padding: 0 5%; + height: 60px; + position: sticky; + position: -webkit-sticky; + top: 0; + z-index: 1; + box-shadow: 0px 0px 5px var(--black); + + .close-button { + border: 0px; + background-color: transparent; + .icon { + width: 15px; + height: 15px; + fill: var(--light-grey); + } + } + + h5 { + font-size: 16px; + color: white; + font-weight: 400; + margin-left: 20px; + letter-spacing: 1px; + + .icon { + width: 15px; + height: 15px; + fill: white; + margin-right: 3px; + vertical-align: middle; + position: relative; + top: -1px; + } + } +} + + +ul { + list-style: none; +} + +li { + display: flex; + align-items: center; + border-bottom: 1px solid var(--dark-grey); + height: 70px; + padding: 0 15px; + color: var(--light-grey); + font-size: 14px; + letter-spacing: 1px; + + .icon { + width: 25px; + height: 25px; + fill: white; + margin-right: 15px; + } + + .end-slot { + margin-left: auto; + } + + .toggle { + height: 15px; + background-color: var(--light-grey); + position: relative; + width: 40px; + overflow: visible; + border-radius: 30px; + transition: background-color 0.3s; + + &.active { + background-color: var(--teal-green); + + &::before { + transform: scale(1.5)translateX(100%); + } + } + + &::before { + content: ''; + width: 15px; + height: 15px; + border-radius: 50%; + background-color: white; + display: block; + left: 0px; + top: 0px; + z-index: 1; + box-shadow: 0px 0px 5px var(--black); + transform: scale(1.5); + transition: transform 0.3s; + } + } +} diff --git a/src/app/settings/settings.component.spec.ts b/src/app/settings/settings.component.spec.ts new file mode 100644 index 0000000..91588f3 --- /dev/null +++ b/src/app/settings/settings.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SettingsComponent } from './settings.component'; + +describe('SettingsComponent', () => { + let component: SettingsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SettingsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SettingsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts new file mode 100644 index 0000000..f06b663 --- /dev/null +++ b/src/app/settings/settings.component.ts @@ -0,0 +1,23 @@ +import { Component, OnInit } from '@angular/core'; +import { Location } from '@angular/common'; + +@Component({ + selector: 'app-settings', + templateUrl: './settings.component.html', + styleUrls: ['./settings.component.scss'] +}) +export class SettingsComponent implements OnInit { + isNightModeOn: boolean = true; + + constructor( + private location: Location + ) { } + + ngOnInit(): void { + } + + back() { + this.location.back(); + } + +} diff --git a/src/app/tabs/more/more.component.html b/src/app/tabs/more/more.component.html index 365830f..150cbf6 100644 --- a/src/app/tabs/more/more.component.html +++ b/src/app/tabs/more/more.component.html @@ -1,7 +1,7 @@
-
diff --git a/src/assets/custom-icons/008-bell.svg b/src/assets/custom-icons/008-bell.svg new file mode 100644 index 0000000..7fce410 --- /dev/null +++ b/src/assets/custom-icons/008-bell.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/010-moon.svg b/src/assets/custom-icons/010-moon.svg new file mode 100644 index 0000000..3440783 --- /dev/null +++ b/src/assets/custom-icons/010-moon.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/012-round.svg b/src/assets/custom-icons/012-round.svg new file mode 100644 index 0000000..a3f2f4e --- /dev/null +++ b/src/assets/custom-icons/012-round.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/015-login.svg b/src/assets/custom-icons/015-login.svg new file mode 100644 index 0000000..5ac04c9 --- /dev/null +++ b/src/assets/custom-icons/015-login.svg @@ -0,0 +1,89 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/017-share.svg b/src/assets/custom-icons/017-share.svg new file mode 100644 index 0000000..aa7bd7a --- /dev/null +++ b/src/assets/custom-icons/017-share.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/019-favorites-button.svg b/src/assets/custom-icons/019-favorites-button.svg new file mode 100644 index 0000000..1b15cde --- /dev/null +++ b/src/assets/custom-icons/019-favorites-button.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/021-paint-brush.svg b/src/assets/custom-icons/021-paint-brush.svg new file mode 100644 index 0000000..558676b --- /dev/null +++ b/src/assets/custom-icons/021-paint-brush.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/book (1).svg b/src/assets/custom-icons/book-1.svg similarity index 100% rename from src/assets/custom-icons/book (1).svg rename to src/assets/custom-icons/book-1.svg