From 3837371268bc771b80aa171fd50c12c4ed71c280 Mon Sep 17 00:00:00 2001 From: Sieciech Date: Tue, 27 Jul 2021 12:51:52 +0200 Subject: [PATCH] demo homepage and ui --- src/frontend/src/app/app-routing.module.ts | 112 ++++- src/frontend/src/app/app.component.html | 68 ++- src/frontend/src/app/app.component.scss | 74 +++- src/frontend/src/app/app.component.ts | 25 +- .../app/modules/admin/admin-routing.module.ts | 20 + .../src/app/modules/admin/admin.module.ts | 16 + .../app/modules/material/material.module.ts | 8 +- .../not-found/not-found.component.html | 3 + .../not-found/not-found.component.scss | 0 .../not-found/not-found.component.ts | 15 + .../shared/services/app/app.service.ts | 3 +- .../shared/services/theme/theme.service.ts | 58 +-- .../src/app/modules/shared/shared.module.ts | 22 +- src/frontend/src/app/styles/_base.scss | 6 + src/frontend/src/app/styles/_template.scss | 398 ++++++++++++++++++ src/frontend/src/app/styles/dark.scss | 18 +- src/frontend/src/app/styles/light.scss | 18 +- src/frontend/src/assets/lang/en.json | 20 +- src/frontend/src/assets/lang/pl.json | 20 +- src/frontend/src/index.html | 2 +- src/frontend/src/styles.scss | 13 + 21 files changed, 824 insertions(+), 95 deletions(-) create mode 100644 src/frontend/src/app/modules/admin/admin-routing.module.ts create mode 100644 src/frontend/src/app/modules/admin/admin.module.ts create mode 100644 src/frontend/src/app/modules/shared/components/not-found/not-found.component.html create mode 100644 src/frontend/src/app/modules/shared/components/not-found/not-found.component.scss create mode 100644 src/frontend/src/app/modules/shared/components/not-found/not-found.component.ts create mode 100644 src/frontend/src/app/styles/_base.scss create mode 100644 src/frontend/src/app/styles/_template.scss diff --git a/src/frontend/src/app/app-routing.module.ts b/src/frontend/src/app/app-routing.module.ts index d425c6f..8458c35 100644 --- a/src/frontend/src/app/app-routing.module.ts +++ b/src/frontend/src/app/app-routing.module.ts @@ -1,10 +1,102 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -const routes: Routes = []; - -@NgModule({ - imports: [RouterModule.forRoot(routes)], - exports: [RouterModule] -}) -export class AppRoutingModule { } +import { NgModule } from '@angular/core'; +import { Route, RouterModule } from '@angular/router'; +import { NotFoundComponent } from './modules/shared/components/not-found/not-found.component'; + +interface AppMenuEntry { + label: string; + icon: string; + path?: string; + matchExact?: boolean; + level?: number; +} + +interface AppRoute extends Route { + menuEntries?: AppMenuEntry[]; +} + +export const appRoutes: AppRoute[] = [ + { + path: '', + component: NotFoundComponent, + menuEntries: [ + { + label: 'MENU.HOME', + icon: 'fa fa-home', + matchExact: true, + }, + ], + }, + { + path: 'profile', + component: NotFoundComponent, + menuEntries: [ + { + label: 'MENU.PROFILE', + icon: 'fa fa-user', + }, + ], + }, + { + path: 'community', + component: NotFoundComponent, + menuEntries: [ + { + label: 'MENU.COMMUNITY', + icon: 'fa fa-users', + }, + ], + }, + { + path: 'messages', + component: NotFoundComponent, + menuEntries: [ + { + label: 'MENU.MESSAGES', + icon: 'fa fa-comments', + }, + ], + }, + { + path: 'tests', + component: NotFoundComponent, + menuEntries: [ + { + label: 'MENU.TESTS', + icon: 'fa fa-heartbeat', + }, + ], + }, + { + path: 'research', + component: NotFoundComponent, + menuEntries: [ + { + label: 'MENU.RESEARCH', + icon: 'fa fa-flask', + }, + ], + }, + { + path: 'admin', + loadChildren: () => import('./modules/admin/admin.module').then(m => m.AdminModule), + menuEntries: [ + { + label: 'MENU.ADMIN', + icon: 'fa fa-id-card', + matchExact: true, + }, + { + path: 'admin/users', + label: 'MENU.USERS', + icon: 'fa fa-users', + level: 1, + } + ], + }, +]; + +@NgModule({ + imports: [RouterModule.forRoot(appRoutes)], + exports: [RouterModule] +}) +export class AppRoutingModule { } diff --git a/src/frontend/src/app/app.component.html b/src/frontend/src/app/app.component.html index d0de35f..175f57e 100644 --- a/src/frontend/src/app/app.component.html +++ b/src/frontend/src/app/app.component.html @@ -4,11 +4,8 @@ - My App + {{ 'APP.NAME' | translate }} - @@ -17,21 +14,51 @@
-
menu
-
- - {{ 'APP.LANGUAGE' | translate }} - - {{ 'LANGUAGE.'+lang.toUpperCase() | translate }} - - +
+ + +
+ + {{ menu.label | translate }} +
+ + + +
+
+
+
+
{{ user.name }} {{ user.surname }}
+
+
+ +
+ + + {{ 'APP.LANGUAGE' | translate }} + + {{ 'LANGUAGE.'+lang.toUpperCase() | translate }} + + + + + {{ 'APP.THEME' | translate }} + + {{ 'THEME.'+theme.toUpperCase() | translate }} + + + +
+
- - {{ 'APP.THEME' | translate }} - - {{ 'THEME.'+theme.toUpperCase() | translate }} - -
@@ -42,6 +69,5 @@
- It's works, you can start coding :) -
- \ No newline at end of file +
+ \ No newline at end of file diff --git a/src/frontend/src/app/app.component.scss b/src/frontend/src/app/app.component.scss index 2b2b8e2..844bf98 100644 --- a/src/frontend/src/app/app.component.scss +++ b/src/frontend/src/app/app.component.scss @@ -1,3 +1,4 @@ +$sidebar-width: 250px; :host{ position: fixed; top: 0px; @@ -8,7 +9,7 @@ flex-direction: column; } .menu{ - width: 250px; + width: $sidebar-width; flex-grow: 1; display: flex; flex-direction: column; @@ -16,4 +17,75 @@ > :first-child{ flex-grow: 1; } + > * { + width: $sidebar-width; + } +} +.avatar{ + width: 48px; + height: 48px; + border-radius: 10px; + background-color: rgba(0,0,0, 0.25); + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} +.menu-item{ + display: flex; + position: relative; + cursor: pointer; + padding: 10px; + transition-duration: 400ms !important; + transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !important; + transition-property: all !important; + &:after{ + display: block; + content: ""; + position: absolute; + top: 50%; + right: 0px; + width: 3px; + height: 0%; + background: var(--primary-color); + transition-duration: 400ms !important; + transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !important; + transition-property: all !important; + } + &.active{ + &:after{ + top: 0%; + height: 100%; + } + } + i { + width: 30px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 10px; + transition: all 0.4s ease; + } + span{ + display: flex; + align-items: center; + flex-grow: 1; + opacity: 0.75; + } +} +.user-box{ + padding: 6px; +} +.user-menu-container{ + width: 46px; + .user-menu{ + position: absolute; + bottom: 6px; + right: 6px; + height: 48px; + width: 46px; + display: flex; + align-items: center; + justify-content: center; + } } \ No newline at end of file diff --git a/src/frontend/src/app/app.component.ts b/src/frontend/src/app/app.component.ts index 2e120bb..446080d 100644 --- a/src/frontend/src/app/app.component.ts +++ b/src/frontend/src/app/app.component.ts @@ -1,7 +1,10 @@ import { Component } from '@angular/core'; import { FormControl } from '@angular/forms'; +import { appRoutes } from './app-routing.module'; import { AppService, WindowSize } from './modules/shared/services/app/app.service'; +import { BrowserStorageService } from './modules/shared/services/browser-storage/browser-storage.service'; import { ThemeService } from './modules/shared/services/theme/theme.service'; +import { DomSanitizer, SafeStyle } from '@angular/platform-browser'; enum SidebarOpenEnum { Default, @@ -26,6 +29,12 @@ export class AppComponent { themeControl = new FormControl(); langControl = new FormControl(); isDark = true; + appRoutes = appRoutes; + user = { + name: 'Name', + surname: 'Surname', + avatar: 'https://www.gravatar.com/avatar/81b206a89f89d5b1123b87606075c6a8?s=514&d=robohash', + }; get isSidebarOpen() { switch (this.sidebarOpen) { @@ -40,9 +49,12 @@ export class AppComponent { break; } } + constructor( appService: AppService, themeService: ThemeService, + private browserStorageService: BrowserStorageService, + private sanitizer: DomSanitizer, ) { this.themes = themeService.getThemes(); this.langs = appService.getLangs(); @@ -51,6 +63,7 @@ export class AppComponent { this.themeControl.valueChanges.subscribe(theme => { themeService.setTheme(theme); }); + appService.changeLang(this.lang); this.langControl.valueChanges.subscribe(lang => { appService.changeLang(lang); }); @@ -66,6 +79,11 @@ export class AppComponent { appService.langChange.subscribe(lang => { this.onLangChanged(lang); }); + + const sidebarUserPrefference = this.browserStorageService.getItem('sidebar.open'); + if (sidebarUserPrefference !== null) { + this.sidebarOpen = sidebarUserPrefference; + } } onThemeChanged(theme: string) { @@ -82,7 +100,7 @@ export class AppComponent { return; } this.isMobile = size.isMobile; - this.defaultSidebarOpen = !this.isMobile; + this.defaultSidebarOpen = !size.isMobile; this.sidebarMode = this.isMobile ? 'over' : 'side'; } @@ -96,9 +114,14 @@ export class AppComponent { toggleSidebar() { this.sidebarOpen = this.isSidebarOpen ? SidebarOpenEnum.Closed : SidebarOpenEnum.Open; + this.browserStorageService.setItem('sidebar.open', this.sidebarOpen); } onSidebarOpenedChange(opened: boolean) { this.sidebarOpen = opened ? SidebarOpenEnum.Open : SidebarOpenEnum.Closed; } + + url(url: string): SafeStyle { + return this.sanitizer.bypassSecurityTrustStyle(`url('${url}')`); + } } \ No newline at end of file diff --git a/src/frontend/src/app/modules/admin/admin-routing.module.ts b/src/frontend/src/app/modules/admin/admin-routing.module.ts new file mode 100644 index 0000000..af0b82e --- /dev/null +++ b/src/frontend/src/app/modules/admin/admin-routing.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Route } from '@angular/router'; +import { NotFoundComponent } from '../shared/components/not-found/not-found.component'; + +const routes: Route[] = [ + { + path: '', + component: NotFoundComponent, + }, + { + path: 'users', + component: NotFoundComponent, + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class AdminRoutingModule { } diff --git a/src/frontend/src/app/modules/admin/admin.module.ts b/src/frontend/src/app/modules/admin/admin.module.ts new file mode 100644 index 0000000..6261d17 --- /dev/null +++ b/src/frontend/src/app/modules/admin/admin.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { AdminRoutingModule } from './admin-routing.module'; +import { SharedModule } from '../shared/shared.module'; + + +@NgModule({ + declarations: [], + imports: [ + CommonModule, + AdminRoutingModule, + SharedModule, + ] +}) +export class AdminModule { } diff --git a/src/frontend/src/app/modules/material/material.module.ts b/src/frontend/src/app/modules/material/material.module.ts index 5e504e5..99357e6 100644 --- a/src/frontend/src/app/modules/material/material.module.ts +++ b/src/frontend/src/app/modules/material/material.module.ts @@ -1,15 +1,17 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import {MatToolbarModule} from '@angular/material/toolbar'; -import {MatButtonModule} from '@angular/material/button'; -import {MatSidenavModule} from '@angular/material/sidenav'; -import {MatSelectModule} from '@angular/material/select'; +import {MatButtonModule} from '@angular/material/button'; +import {MatSidenavModule} from '@angular/material/sidenav'; +import {MatSelectModule} from '@angular/material/select'; +import {MatMenuModule} from '@angular/material/menu'; const itemsToExport = [ MatToolbarModule, MatButtonModule, MatSidenavModule, MatSelectModule, + MatMenuModule, ]; @NgModule({ diff --git a/src/frontend/src/app/modules/shared/components/not-found/not-found.component.html b/src/frontend/src/app/modules/shared/components/not-found/not-found.component.html new file mode 100644 index 0000000..a8a991b --- /dev/null +++ b/src/frontend/src/app/modules/shared/components/not-found/not-found.component.html @@ -0,0 +1,3 @@ +
+ {{ 'ERROR.PAGE_NOT_FOUND' | translate }} +
\ No newline at end of file diff --git a/src/frontend/src/app/modules/shared/components/not-found/not-found.component.scss b/src/frontend/src/app/modules/shared/components/not-found/not-found.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/frontend/src/app/modules/shared/components/not-found/not-found.component.ts b/src/frontend/src/app/modules/shared/components/not-found/not-found.component.ts new file mode 100644 index 0000000..7cb4124 --- /dev/null +++ b/src/frontend/src/app/modules/shared/components/not-found/not-found.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-not-found', + templateUrl: './not-found.component.html', + styleUrls: ['./not-found.component.scss'] +}) +export class NotFoundComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/frontend/src/app/modules/shared/services/app/app.service.ts b/src/frontend/src/app/modules/shared/services/app/app.service.ts index 69d4fff..40ae29e 100644 --- a/src/frontend/src/app/modules/shared/services/app/app.service.ts +++ b/src/frontend/src/app/modules/shared/services/app/app.service.ts @@ -45,9 +45,8 @@ export class AppService { if (!lang) { lang = this.defaultLang; } - this.lang = lang; this.translate.setDefaultLang(this.defaultLang); - this.changeLang(this.lang); + this.changeLang(lang); fromEvent(window, 'resize').subscribe(e => { this.sizeChange.next(WindowSize.generate()); }) diff --git a/src/frontend/src/app/modules/shared/services/theme/theme.service.ts b/src/frontend/src/app/modules/shared/services/theme/theme.service.ts index f9b46e9..080d21c 100644 --- a/src/frontend/src/app/modules/shared/services/theme/theme.service.ts +++ b/src/frontend/src/app/modules/shared/services/theme/theme.service.ts @@ -4,38 +4,38 @@ import { BrowserStorageService } from '../browser-storage/browser-storage.servic @Injectable() export class ThemeService { - private theme: string; - themeChange = new Subject(); + private theme: string; + themeChange = new Subject(); - constructor( - browserStorageService: BrowserStorageService, - ) { - this.themeChange.subscribe(theme => { - this.theme = theme; - browserStorageService.setItem('current-theme', theme); - }); - let userTheme = browserStorageService.getItem('current-theme'); - if (!userTheme) { - userTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + constructor( + browserStorageService: BrowserStorageService + ) { + this.themeChange.subscribe(theme => { + this.theme = theme; + browserStorageService.setItem('current-theme', theme); + }); + let userTheme = browserStorageService.getItem('current-theme'); + if (!userTheme) { + userTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + } + this.setTheme(userTheme); } - this.setTheme(userTheme); - } - getTheme() { - return this.theme; - } - - setTheme(theme: string) { - if (theme !== this.theme) { - this.themeChange.next(theme); - document.getElementById('current-theme').setAttribute('href', `/${theme}.css`); + getTheme() { + return this.theme; } - } - getThemes(): string[] { - return [ - 'light', - 'dark', - ]; - }; + setTheme(theme: string) { + if (theme !== this.theme) { + this.themeChange.next(theme); + document.getElementById('current-theme').setAttribute('href', `/${theme}.css`); + } + } + + getThemes(): string[] { + return [ + 'light', + 'dark', + ]; + }; } diff --git a/src/frontend/src/app/modules/shared/shared.module.ts b/src/frontend/src/app/modules/shared/shared.module.ts index 76cf203..344df7e 100644 --- a/src/frontend/src/app/modules/shared/shared.module.ts +++ b/src/frontend/src/app/modules/shared/shared.module.ts @@ -1,12 +1,24 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; - - +import { NotFoundComponent } from './components/not-found/not-found.component'; +import { TranslateLoader, TranslateModule } from '@ngx-translate/core'; +import { HttpLoaderFactory } from 'src/app/app.module'; +import { HttpClient } from '@angular/common/http'; @NgModule({ - declarations: [], + declarations: [ + NotFoundComponent + ], imports: [ - CommonModule - ] + CommonModule, + TranslateModule.forRoot({ + defaultLanguage: 'en', + loader: { + provide: TranslateLoader, + useFactory: HttpLoaderFactory, + deps: [HttpClient] + } + }), + ], }) export class SharedModule { } diff --git a/src/frontend/src/app/styles/_base.scss b/src/frontend/src/app/styles/_base.scss new file mode 100644 index 0000000..300670b --- /dev/null +++ b/src/frontend/src/app/styles/_base.scss @@ -0,0 +1,6 @@ +@use 'sass:map'; + +$primary-color: map.get($theme, color, primary, 500); +body { + --primary-color: #{$primary-color}; +} \ No newline at end of file diff --git a/src/frontend/src/app/styles/_template.scss b/src/frontend/src/app/styles/_template.scss new file mode 100644 index 0000000..8d184f4 --- /dev/null +++ b/src/frontend/src/app/styles/_template.scss @@ -0,0 +1,398 @@ +$theme: ( + color: ( + primary: ( + 50: #e8eaf6, + 100: #c5cae9, + 200: #9fa8da, + 300: #7986cb, + 400: #5c6bc0, + 500: #3f51b5, + 600: #3949ab, + 700: #303f9f, + 800: #283593, + 900: #1a237e, + A100: #8c9eff, + A200: #536dfe, + A400: #3d5afe, + A700: #304ffe, + contrast: ( + 50: rgba(0, 0, 0, 0.87), + 100: rgba(0, 0, 0, 0.87), + 200: rgba(0, 0, 0, 0.87), + 300: white, + 400: white, + 500: white, + 600: white, + 700: white, + 800: white, + 900: white, + A100: rgba(0, 0, 0, 0.87), + A200: white, + A400: white, + A700: white, + ), + default: #3f51b5, + lighter: #c5cae9, + darker: #303f9f, + text: #3f51b5, + default-contrast: white, + lighter-contrast: rgba(0, 0, 0, 0.87), + darker-contrast: white, + "50-contrast": rgba(0, 0, 0, 0.87), + "100-contrast": rgba(0, 0, 0, 0.87), + "200-contrast": rgba(0, 0, 0, 0.87), + "300-contrast": white, + "400-contrast": white, + "500-contrast": white, + "600-contrast": white, + "700-contrast": white, + "800-contrast": white, + "900-contrast": white, + "A100-contrast": rgba(0, 0, 0, 0.87), + "A200-contrast": white, + "A400-contrast": white, + "A700-contrast": white, + "contrast-contrast": null, + ), + accent: ( + 50: #fce4ec, + 100: #f8bbd0, + 200: #f48fb1, + 300: #f06292, + 400: #ec407a, + 500: #e91e63, + 600: #d81b60, + 700: #c2185b, + 800: #ad1457, + 900: #880e4f, + A100: #ff80ab, + A200: #ff4081, + A400: #f50057, + A700: #c51162, + contrast: ( + 50: rgba(0, 0, 0, 0.87), + 100: rgba(0, 0, 0, 0.87), + 200: rgba(0, 0, 0, 0.87), + 300: rgba(0, 0, 0, 0.87), + 400: rgba(0, 0, 0, 0.87), + 500: white, + 600: white, + 700: white, + 800: white, + 900: white, + A100: rgba(0, 0, 0, 0.87), + A200: white, + A400: white, + A700: white, + ), + default: #ff4081, + lighter: #ff80ab, + darker: #f50057, + text: #ff4081, + default-contrast: white, + lighter-contrast: rgba(0, 0, 0, 0.87), + darker-contrast: white, + "50-contrast": rgba(0, 0, 0, 0.87), + "100-contrast": rgba(0, 0, 0, 0.87), + "200-contrast": rgba(0, 0, 0, 0.87), + "300-contrast": rgba(0, 0, 0, 0.87), + "400-contrast": rgba(0, 0, 0, 0.87), + "500-contrast": white, + "600-contrast": white, + "700-contrast": white, + "800-contrast": white, + "900-contrast": white, + "A100-contrast": rgba(0, 0, 0, 0.87), + "A200-contrast": white, + "A400-contrast": white, + "A700-contrast": white, + "contrast-contrast": null, + ), + warn: ( + 50: #ffebee, + 100: #ffcdd2, + 200: #ef9a9a, + 300: #e57373, + 400: #ef5350, + 500: #f44336, + 600: #e53935, + 700: #d32f2f, + 800: #c62828, + 900: #b71c1c, + A100: #ff8a80, + A200: #ff5252, + A400: #ff1744, + A700: #d50000, + contrast: ( + 50: rgba(0, 0, 0, 0.87), + 100: rgba(0, 0, 0, 0.87), + 200: rgba(0, 0, 0, 0.87), + 300: rgba(0, 0, 0, 0.87), + 400: rgba(0, 0, 0, 0.87), + 500: white, + 600: white, + 700: white, + 800: white, + 900: white, + A100: rgba(0, 0, 0, 0.87), + A200: white, + A400: white, + A700: white, + ), + default: #f44336, + lighter: #ffcdd2, + darker: #d32f2f, + text: #f44336, + default-contrast: white, + lighter-contrast: rgba(0, 0, 0, 0.87), + darker-contrast: white, + "50-contrast": rgba(0, 0, 0, 0.87), + "100-contrast": rgba(0, 0, 0, 0.87), + "200-contrast": rgba(0, 0, 0, 0.87), + "300-contrast": rgba(0, 0, 0, 0.87), + "400-contrast": rgba(0, 0, 0, 0.87), + "500-contrast": white, + "600-contrast": white, + "700-contrast": white, + "800-contrast": white, + "900-contrast": white, + "A100-contrast": rgba(0, 0, 0, 0.87), + "A200-contrast": white, + "A400-contrast": white, + "A700-contrast": white, + "contrast-contrast": null, + ), + is-dark: true, + foreground: ( + base: white, + divider: rgba(255, 255, 255, 0.12), + dividers: rgba(255, 255, 255, 0.12), + disabled: rgba(255, 255, 255, 0.5), + disabled-button: rgba(255, 255, 255, 0.3), + disabled-text: rgba(255, 255, 255, 0.5), + elevation: black, + hint-text: rgba(255, 255, 255, 0.5), + secondary-text: rgba(255, 255, 255, 0.7), + icon: white, + icons: white, + text: white, + slider-min: white, + slider-off: rgba(255, 255, 255, 0.3), + slider-off-active: rgba(255, 255, 255, 0.3), + ), + background: ( + status-bar: black, + app-bar: #212121, + background: #303030, + hover: rgba(255, 255, 255, 0.04), + card: #424242, + dialog: #424242, + disabled-button: rgba(255, 255, 255, 0.12), + raised-button: #424242, + focused-button: rgba(255, 255, 255, 0.12), + selected-button: #212121, + selected-disabled-button: #424242, + disabled-button-toggle: black, + unselected-chip: #616161, + disabled-list-option: black, + tooltip: #616161, + ), + ), + primary: ( + 50: #e8eaf6, + 100: #c5cae9, + 200: #9fa8da, + 300: #7986cb, + 400: #5c6bc0, + 500: #3f51b5, + 600: #3949ab, + 700: #303f9f, + 800: #283593, + 900: #1a237e, + A100: #8c9eff, + A200: #536dfe, + A400: #3d5afe, + A700: #304ffe, + contrast: ( + 50: rgba(0, 0, 0, 0.87), + 100: rgba(0, 0, 0, 0.87), + 200: rgba(0, 0, 0, 0.87), + 300: white, + 400: white, + 500: white, + 600: white, + 700: white, + 800: white, + 900: white, + A100: rgba(0, 0, 0, 0.87), + A200: white, + A400: white, + A700: white, + ), + default: #3f51b5, + lighter: #c5cae9, + darker: #303f9f, + text: #3f51b5, + default-contrast: white, + lighter-contrast: rgba(0, 0, 0, 0.87), + darker-contrast: white, + "50-contrast": rgba(0, 0, 0, 0.87), + "100-contrast": rgba(0, 0, 0, 0.87), + "200-contrast": rgba(0, 0, 0, 0.87), + "300-contrast": white, + "400-contrast": white, + "500-contrast": white, + "600-contrast": white, + "700-contrast": white, + "800-contrast": white, + "900-contrast": white, + "A100-contrast": rgba(0, 0, 0, 0.87), + "A200-contrast": white, + "A400-contrast": white, + "A700-contrast": white, + "contrast-contrast": null, + ), + accent: ( + 50: #fce4ec, + 100: #f8bbd0, + 200: #f48fb1, + 300: #f06292, + 400: #ec407a, + 500: #e91e63, + 600: #d81b60, + 700: #c2185b, + 800: #ad1457, + 900: #880e4f, + A100: #ff80ab, + A200: #ff4081, + A400: #f50057, + A700: #c51162, + contrast: ( + 50: rgba(0, 0, 0, 0.87), + 100: rgba(0, 0, 0, 0.87), + 200: rgba(0, 0, 0, 0.87), + 300: rgba(0, 0, 0, 0.87), + 400: rgba(0, 0, 0, 0.87), + 500: white, + 600: white, + 700: white, + 800: white, + 900: white, + A100: rgba(0, 0, 0, 0.87), + A200: white, + A400: white, + A700: white, + ), + default: #ff4081, + lighter: #ff80ab, + darker: #f50057, + text: #ff4081, + default-contrast: white, + lighter-contrast: rgba(0, 0, 0, 0.87), + darker-contrast: white, + "50-contrast": rgba(0, 0, 0, 0.87), + "100-contrast": rgba(0, 0, 0, 0.87), + "200-contrast": rgba(0, 0, 0, 0.87), + "300-contrast": rgba(0, 0, 0, 0.87), + "400-contrast": rgba(0, 0, 0, 0.87), + "500-contrast": white, + "600-contrast": white, + "700-contrast": white, + "800-contrast": white, + "900-contrast": white, + "A100-contrast": rgba(0, 0, 0, 0.87), + "A200-contrast": white, + "A400-contrast": white, + "A700-contrast": white, + "contrast-contrast": null, + ), + warn: ( + 50: #ffebee, + 100: #ffcdd2, + 200: #ef9a9a, + 300: #e57373, + 400: #ef5350, + 500: #f44336, + 600: #e53935, + 700: #d32f2f, + 800: #c62828, + 900: #b71c1c, + A100: #ff8a80, + A200: #ff5252, + A400: #ff1744, + A700: #d50000, + contrast: ( + 50: rgba(0, 0, 0, 0.87), + 100: rgba(0, 0, 0, 0.87), + 200: rgba(0, 0, 0, 0.87), + 300: rgba(0, 0, 0, 0.87), + 400: rgba(0, 0, 0, 0.87), + 500: white, + 600: white, + 700: white, + 800: white, + 900: white, + A100: rgba(0, 0, 0, 0.87), + A200: white, + A400: white, + A700: white, + ), + default: #f44336, + lighter: #ffcdd2, + darker: #d32f2f, + text: #f44336, + default-contrast: white, + lighter-contrast: rgba(0, 0, 0, 0.87), + darker-contrast: white, + "50-contrast": rgba(0, 0, 0, 0.87), + "100-contrast": rgba(0, 0, 0, 0.87), + "200-contrast": rgba(0, 0, 0, 0.87), + "300-contrast": rgba(0, 0, 0, 0.87), + "400-contrast": rgba(0, 0, 0, 0.87), + "500-contrast": white, + "600-contrast": white, + "700-contrast": white, + "800-contrast": white, + "900-contrast": white, + "A100-contrast": rgba(0, 0, 0, 0.87), + "A200-contrast": white, + "A400-contrast": white, + "A700-contrast": white, + "contrast-contrast": null, + ), + is-dark: true, + foreground: ( + base: white, + divider: rgba(255, 255, 255, 0.12), + dividers: rgba(255, 255, 255, 0.12), + disabled: rgba(255, 255, 255, 0.5), + disabled-button: rgba(255, 255, 255, 0.3), + disabled-text: rgba(255, 255, 255, 0.5), + elevation: black, + hint-text: rgba(255, 255, 255, 0.5), + secondary-text: rgba(255, 255, 255, 0.7), + icon: white, + icons: white, + text: white, + slider-min: white, + slider-off: rgba(255, 255, 255, 0.3), + slider-off-active: rgba(255, 255, 255, 0.3), + ), + background: ( + status-bar: black, + app-bar: #212121, + background: #303030, + hover: rgba(255, 255, 255, 0.04), + card: #424242, + dialog: #424242, + disabled-button: rgba(255, 255, 255, 0.12), + raised-button: #424242, + focused-button: rgba(255, 255, 255, 0.12), + selected-button: #212121, + selected-disabled-button: #424242, + disabled-button-toggle: black, + unselected-chip: #616161, + disabled-list-option: black, + tooltip: #616161, + ), +); diff --git a/src/frontend/src/app/styles/dark.scss b/src/frontend/src/app/styles/dark.scss index 7a5ce35..df3b111 100644 --- a/src/frontend/src/app/styles/dark.scss +++ b/src/frontend/src/app/styles/dark.scss @@ -11,23 +11,25 @@ // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. Available color palettes: https://material.io/design/color/ -$frontend-primary: mat.define-palette(mat.$indigo-palette); -$frontend-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); +$theme-primary: mat.define-palette(mat.$blue-palette); +$theme-accent: mat.define-palette(mat.$green-palette, A200, A100, A400); // The warn palette is optional (defaults to red). -$frontend-warn: mat.define-palette(mat.$red-palette); +$theme-warn: mat.define-palette(mat.$red-palette); // Create the theme object. A theme consists of configurations for individual // theming systems such as "color" or "typography". -$frontend-theme: mat.define-dark-theme(( +$theme: mat.define-dark-theme(( color: ( - primary: $frontend-primary, - accent: $frontend-accent, - warn: $frontend-warn, + primary: $theme-primary, + accent: $theme-accent, + warn: $theme-warn, ) )); // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. -@include mat.all-component-themes($frontend-theme); \ No newline at end of file +@include mat.all-component-themes($theme); + +@import "./base"; diff --git a/src/frontend/src/app/styles/light.scss b/src/frontend/src/app/styles/light.scss index d6c36cc..423617d 100644 --- a/src/frontend/src/app/styles/light.scss +++ b/src/frontend/src/app/styles/light.scss @@ -11,23 +11,25 @@ // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. Available color palettes: https://material.io/design/color/ -$frontend-primary: mat.define-palette(mat.$indigo-palette); -$frontend-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); +$theme-primary: mat.define-palette(mat.$indigo-palette); +$theme-accent: mat.define-palette(mat.$light-blue-palette, A200, A100, A400); // The warn palette is optional (defaults to red). -$frontend-warn: mat.define-palette(mat.$red-palette); +$theme-warn: mat.define-palette(mat.$red-palette); // Create the theme object. A theme consists of configurations for individual // theming systems such as "color" or "typography". -$frontend-theme: mat.define-light-theme(( +$theme: mat.define-light-theme(( color: ( - primary: $frontend-primary, - accent: $frontend-accent, - warn: $frontend-warn, + primary: $theme-primary, + accent: $theme-accent, + warn: $theme-warn, ) )); // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. -@include mat.all-component-themes($frontend-theme); \ No newline at end of file +@include mat.all-component-themes($theme); + +@import "./base"; \ No newline at end of file diff --git a/src/frontend/src/assets/lang/en.json b/src/frontend/src/assets/lang/en.json index b9e76de..58dc61a 100644 --- a/src/frontend/src/assets/lang/en.json +++ b/src/frontend/src/assets/lang/en.json @@ -1,4 +1,12 @@ { + "APP": { + "NAME": "CureNet", + "THEME": "Theme", + "LANGUAGE": "Language" + }, + "ERROR": { + "PAGE_NOT_FOUND": "Page not found or not implemented yet!" + }, "THEME": { "LIGHT": "Light", "DARK": "Dark" @@ -7,8 +15,14 @@ "PL": "Polish", "EN": "English" }, - "APP": { - "THEME": "Theme", - "LANGUAGE": "Language" + "MENU": { + "HOME": "Dashboard", + "PROFILE": "Profile", + "COMMUNITY": "Community", + "MESSAGES": "Messages", + "TESTS": "Laboratory tests", + "RESEARCH": "Research", + "ADMIN": "Admin", + "USERS": "Users" } } \ No newline at end of file diff --git a/src/frontend/src/assets/lang/pl.json b/src/frontend/src/assets/lang/pl.json index 50e7c97..6855253 100644 --- a/src/frontend/src/assets/lang/pl.json +++ b/src/frontend/src/assets/lang/pl.json @@ -1,4 +1,12 @@ { + "APP": { + "NAME": "CureNet", + "THEME": "Motyw", + "LANGUAGE": "Język" + }, + "ERROR": { + "PAGE_NOT_FOUND": "Nie znaleziono strony lub nie została ona jeszcze zaimplementowana!" + }, "THEME": { "LIGHT": "Jasny", "DARK": "Ciemny" @@ -7,8 +15,14 @@ "PL": "Polski", "EN": "Angielski" }, - "APP": { - "THEME": "Motyw", - "LANGUAGE": "Język" + "MENU": { + "HOME": "Kokpit", + "PROFILE": "Profil", + "COMMUNITY": "Społeczność", + "MESSAGES": "Wiadomości", + "TESTS": "Wyniki badań", + "RESEARCH": "Badania naukowe", + "ADMIN": "Panel administratora", + "USERS": "Użytkownicy" } } \ No newline at end of file diff --git a/src/frontend/src/index.html b/src/frontend/src/index.html index 2cb199a..0b791e2 100644 --- a/src/frontend/src/index.html +++ b/src/frontend/src/index.html @@ -2,7 +2,7 @@ - Frontend + CureNet diff --git a/src/frontend/src/styles.scss b/src/frontend/src/styles.scss index 291f5ae..ef52523 100644 --- a/src/frontend/src/styles.scss +++ b/src/frontend/src/styles.scss @@ -22,6 +22,16 @@ body .mat-drawer.mat-drawer-side { } &:not(.mat-drawer-opened) { width: 60px; + .menu-item{ + margin-left: 0px !important; + &:after{ + right: 190px; + } + & > i{ + width: 40px; + font-size: 120%; + } + } .hide-on-side-opened{ display: none; } @@ -29,4 +39,7 @@ body .mat-drawer.mat-drawer-side { margin-left: 60px !important; } } +} +.w-220{ + width: 220px; } \ No newline at end of file