Create UI and demo homepage #19
|
|
@ -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 { }
|
||||
|
|
|
|||
|
|
@ -4,11 +4,8 @@
|
|||
<button mat-icon-button (click)="toggleSidebar()">
|
||||
<i class="fa fa-bars"></i>
|
||||
</button>
|
||||
<span>My App</span>
|
||||
<span>{{ 'APP.NAME' | translate }}</span>
|
||||
<span class="flex-grow-1"></span>
|
||||
<button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
|
||||
<i class="fa fa-user"></i>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
</ng-template>
|
||||
<ng-container *ngIf="!isMobile">
|
||||
|
|
@ -17,21 +14,51 @@
|
|||
<mat-drawer-container class="flex-grow-1">
|
||||
<mat-drawer [mode]="sidebarMode" [opened]="isSidebarOpen" (openedChange)="onSidebarOpenedChange($event)">
|
||||
<div class="menu">
|
||||
<div>menu</div>
|
||||
<div class="hide-on-side-opened">
|
||||
<mat-form-field class="w-100 px-3">
|
||||
<mat-label>{{ 'APP.LANGUAGE' | translate }}</mat-label>
|
||||
<mat-select [formControl]="langControl">
|
||||
<mat-option *ngFor="let lang of langs" [value]="lang">{{ 'LANGUAGE.'+lang.toUpperCase() | translate }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<div>
|
||||
<ng-container *ngFor="let route of appRoutes">
|
||||
<ng-container *ngIf="route.menuEntries">
|
||||
<div
|
||||
*ngFor="let menu of route.menuEntries"
|
||||
class="menu-item"
|
||||
[attr.style]="menu.level ? 'margin-left: '+(menu.level * 20)+'px' : ''"
|
||||
[routerLink]="menu.path ? menu.path : route.path"
|
||||
routerLinkActive="active"
|
||||
[routerLinkActiveOptions]="{exact: menu.matchExact}">
|
||||
<i [class]="menu.icon" [title]="menu.label | translate"></i>
|
||||
<span>{{ menu.label | translate }}</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<div class="d-flex user-box">
|
||||
<div class="avatar" [style.background-image]="url(user.avatar)"></div>
|
||||
<div class="d-flex align-items-center flex-grow-1 p-2">{{ user.name }} {{ user.surname }}</div>
|
||||
<div class="user-menu-container">
|
||||
<div class="user-menu">
|
||||
<button mat-icon-button [matMenuTriggerFor]="usermenu">
|
||||
<i class="fa fa-cog"></i>
|
||||
</button>
|
||||
</div>
|
||||
<mat-menu #usermenu="matMenu" yPosition="above" xPosition="before" class="w-220">
|
||||
<mat-form-field class="w-100 px-3">
|
||||
<mat-label>{{ 'APP.LANGUAGE' | translate }}</mat-label>
|
||||
<mat-select [formControl]="langControl">
|
||||
<mat-option *ngFor="let lang of langs" [value]="lang">{{ 'LANGUAGE.'+lang.toUpperCase() | translate }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="w-100 px-3">
|
||||
<mat-label>{{ 'APP.THEME' | translate }}</mat-label>
|
||||
<mat-select [formControl]="themeControl">
|
||||
<mat-option *ngFor="let theme of themes" [value]="theme">{{ 'THEME.'+theme.toUpperCase() | translate }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-form-field class="w-100 px-3">
|
||||
<mat-label>{{ 'APP.THEME' | translate }}</mat-label>
|
||||
<mat-select [formControl]="themeControl">
|
||||
<mat-option *ngFor="let theme of themes" [value]="theme">{{ 'THEME.'+theme.toUpperCase() | translate }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</mat-drawer>
|
||||
|
|
@ -42,6 +69,5 @@
|
|||
|
||||
<div class="example-sidenav-content">
|
||||
<router-outlet></router-outlet>
|
||||
It's works, you can start coding :)
|
||||
</div>
|
||||
</mat-drawer-container>
|
||||
</div>
|
||||
</mat-drawer-container>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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}')`);
|
||||
}
|
||||
}
|
||||
|
|
@ -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 { }
|
||||
|
|
@ -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 { }
|
||||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<div class="m-3 p-3">
|
||||
{{ 'ERROR.PAGE_NOT_FOUND' | translate }}
|
||||
</div>
|
||||
|
|
@ -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 {
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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());
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,38 +4,38 @@ import { BrowserStorageService } from '../browser-storage/browser-storage.servic
|
|||
|
||||
@Injectable()
|
||||
export class ThemeService {
|
||||
private theme: string;
|
||||
themeChange = new Subject<string>();
|
||||
private theme: string;
|
||||
themeChange = new Subject<string>();
|
||||
|
||||
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',
|
||||
];
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 { }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
@use 'sass:map';
|
||||
|
||||
$primary-color: map.get($theme, color, primary, 500);
|
||||
body {
|
||||
--primary-color: #{$primary-color};
|
||||
}
|
||||
|
|
@ -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,
|
||||
),
|
||||
);
|
||||
|
|
@ -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);
|
||||
@include mat.all-component-themes($theme);
|
||||
|
||||
@import "./base";
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
@include mat.all-component-themes($theme);
|
||||
|
||||
@import "./base";
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Frontend</title>
|
||||
<title>CureNet</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue