tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

⚡ component to select theme

This commit is contained in:
Baptiste Lemoine 2020-04-02 16:36:09 +02:00
parent e03359e8db
commit 2d757c6726
14 changed files with 213 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
documentation/interfaces/DateChoice.html
View File

@ -213,7 +213,6 @@ export interface PollAnswer {
const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth();
const currentDay = new Date().getDate();
debugger;
export const basicSlicesOfDay: TimeSlices[] = [
{literal: 'matin'},
@ -299,7 +298,7 @@ export const defaultAnswers: PollAnswer[] = [{
</div>

3
documentation/interfaces/PollAnswer.html
View File

@ -341,7 +341,6 @@ export interface PollAnswer {
const currentYear &#x3D; new Date().getFullYear();
const currentMonth &#x3D; new Date().getMonth();
const currentDay &#x3D; new Date().getDate();
debugger;
export const basicSlicesOfDay: TimeSlices[] &#x3D; [
{literal: &#x27;matin&#x27;},
@ -427,7 +426,7 @@ export const defaultAnswers: PollAnswer[] &#x3D; [{
</div>

3
documentation/interfaces/TimeSlices.html
View File

@ -149,7 +149,6 @@ export interface PollAnswer {
const currentYear &#x3D; new Date().getFullYear();
const currentMonth &#x3D; new Date().getMonth();
const currentDay &#x3D; new Date().getDate();
debugger;
export const basicSlicesOfDay: TimeSlices[] &#x3D; [
{literal: &#x27;matin&#x27;},
@ -235,7 +234,7 @@ export const defaultAnswers: PollAnswer[] &#x3D; [{
</div>

119
src/app/app.component.html
View File

@ -1,61 +1,68 @@
<header style="text-align:center" >
<a
[routerLink]="'home'"
class="home_link"
aria-roledescription="home"
>
<h1 >
<span class="logo_first" >Frama</span >
<span class="logo_second" >date</span > (démo)
</h1 >
<div class="legend" >proposé par
<span class="legend_first" >Frama</span >
<span class="legend_second" >soft</span >
</div >
</a >
<div id="translate_example" >
<div class="wrapper" >
<img
src="assets/img/icone-langue.svg"
alt="location icon"
(click)="changeLanguage()"
class="lang_icon clickable"
>
<img
(click)="toggleMenu()"
alt="menu icon"
class="menu_icon clickable"
src="assets/img/icone-menu.svg"
>
<select
name="language"
class="language-selector"
(change)="switchLanguage(currentLang)"
[(ngModel)]="currentLang"
>
<option
value="d"
default
class="select_language"
>{{"Language" | translate}}</option >
<option value="en" >English</option >
<option value="fr" >Français</option >
</select >
<span
(click)="toggleMenu()"
class="menu_label" >Menu</span >
<div
id='big_container'
class={{this.config.themeClass}} >
<header style="text-align:center" >
<a
[routerLink]="'home'"
class="home_link"
aria-roledescription="home"
>
<h1 >
<span class="logo_first" >Frama</span >
<span class="logo_second" >date</span > (démo)
</h1 >
<div class="legend" >proposé par
<span class="legend_first" >Frama</span >
<span class="legend_second" >soft</span >
</div >
</a >
<div id="translate_example" >
<div class="wrapper" >
<img
src="assets/img/icone-langue.svg"
alt="location icon"
(click)="changeLanguage()"
class="lang_icon clickable"
>
<img
(click)="toggleMenu()"
alt="menu icon"
class="menu_icon clickable"
src="assets/img/icone-menu.svg"
>
<select
name="language"
class="language-selector"
(change)="switchLanguage(currentLang)"
[(ngModel)]="currentLang"
>
<option
value="d"
default
class="select_language"
>{{"Language" | translate}}</option >
<option value="en" >English</option >
<option value="fr" >Français</option >
</select >
<span
(click)="toggleMenu()"
class="menu_label" >Menu</span >
</div >
</div >
</div >
</header >
</header >
<framadate-theme-selector ></framadate-theme-selector >
<main >
<router-outlet ></router-outlet >
</main >
<framadate-debugger ></framadate-debugger >
<framadate-navigation
*ngIf="menuVisible"
[step]="step" ></framadate-navigation >
<p-toast position="top-right" ></p-toast >
<main >
<router-outlet ></router-outlet >
</main >
<framadate-debugger ></framadate-debugger >
<framadate-navigation
*ngIf="menuVisible"
[step]="step" ></framadate-navigation >
<p-toast position="top-right" ></p-toast >
</div >

6
src/app/app.component.ts
View File

@ -24,7 +24,7 @@ export class AppComponent {
step: string;
constructor(private translate: TranslateService,
private config : ConfigService,
public config: ConfigService,
@Inject(DOCUMENT) private document,
private route: Router) {
this.translate.setDefaultLang(this.currentLang);
@ -37,7 +37,7 @@ export class AppComponent {
});
this.route.events.pipe(filter(event => event instanceof NavigationStart)).subscribe((event:NavigationStart) => {
this.route.events.pipe(filter(event => event instanceof NavigationStart)).subscribe((event: NavigationStart) => {
this.scrollGoToTop();
this.updateCurrentTab(event);
// only if there is a poll ID
@ -76,7 +76,7 @@ export class AppComponent {
this.document.documentElement.scrollTop = 0;
}
updateCurrentTab(event){
updateCurrentTab(event) {
if (event.url) {
const tab = event.url.split('/');
if (tab && tab[2]) {

2
src/app/app.module.ts
View File

@ -57,6 +57,7 @@ import {CopyTextComponent} from './ui/copy-text/copy-text.component';
import {CommentsListComponent} from './pages/voting/comments-list/comments-list.component';
import {ChoicesListComponent} from './pages/voting/choices-list/choices-list.component';
import {VotingNavigationComponent} from './pages/voting/voting-navigation/voting-navigation.component';
import { ThemeSelectorComponent } from './ui/theme-selector/theme-selector.component';
export class MyMissingTranslationHandler implements MissingTranslationHandler {
handle(params: MissingTranslationHandlerParams) {
@ -103,6 +104,7 @@ export function HttpLoaderFactory(http: HttpClient) {
CommentsListComponent,
ChoicesListComponent,
VotingNavigationComponent,
ThemeSelectorComponent,
],
imports: [

4
src/app/config/PollConfig.ts
View File

@ -28,6 +28,10 @@ export class PollConfig {
step: number = 0; // step in the progress of creating a poll
stepMax: number = 3; // step max in the progress of creating a poll
pollType: string = 'dates';// classic or dates
// front end choices
themeChoices: string[] = ['light-watermelon', 'dark-crystal', 'hot-covid'];
themeSelected: number = 0;
themeClass: string = 'light-watermelon';
title: string = 'titre';
description: string = 'ma description';
myName: string = 'mon pseudo';

1
src/app/config/defaultConfigs.ts
View File

@ -21,7 +21,6 @@ export interface PollAnswer {
const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth();
const currentDay = new Date().getDate();
debugger;
export const basicSlicesOfDay: TimeSlices[] = [
{literal: 'matin'},

25
src/app/ui/theme-selector/theme-selector.component.html Normal file
View File

@ -0,0 +1,25 @@
<div class='theme-selector' >
<h1 >Thème ( {{config.themeClass}})</h1 >
<span
class='choice btn'
[ngClass]="{ 'btn-primary' : config.themeClass ==='light-watermelon' }"
(click)="selectTheme('light-watermelon')" >
<i class='fa fa-sun-o' ></i > light
</span >
<span
class='choice btn'
[ngClass]="{ 'btn-primary' : config.themeClass ==='dark-crystal' }"
(click)="selectTheme('dark-crystal')" >
<i class='fa fa-moon-o' ></i > dark
</span >
<span
class='choice btn'
[ngClass]="{ 'btn-primary' : config.themeClass ==='hot-covid' }"
(click)="selectTheme('hot-covid')" >
<i class='fa fa-wheelchair' ></i > red
</span >
</div >

0
src/app/ui/theme-selector/theme-selector.component.scss Normal file
View File

25
src/app/ui/theme-selector/theme-selector.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ThemeSelectorComponent } from './theme-selector.component';
describe('ThemeSelectorComponent', () => {
let component: ThemeSelectorComponent;
let fixture: ComponentFixture<ThemeSelectorComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ThemeSelectorComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ThemeSelectorComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

24
src/app/ui/theme-selector/theme-selector.component.ts Normal file
View File

@ -0,0 +1,24 @@
import {Component, OnInit} from '@angular/core';
import {ConfigService} from "../../services/config.service";
@Component({
selector: 'framadate-theme-selector',
templateUrl: './theme-selector.component.html',
styleUrls: ['./theme-selector.component.scss']
})
export class ThemeSelectorComponent implements OnInit {
constructor(public config: ConfigService) {
}
ngOnInit(): void {
}
selectTheme(themeName: string) {
if (this.config.themeChoices.includes(themeName)) {
this.config.themeSelected = this.config.themeChoices.indexOf(themeName);
this.config.themeClass = `theme-${themeName}`;
}
}
}

63
src/assets/scss/themes/_light.scss Normal file
View File

@ -0,0 +1,63 @@
#big_container {
&.theme-light-watermelon {
background: #fff;
}
&.theme-dark-crystal {
background: #222;
color: #ddd;
main {
background: #444;
padding-top: 4em;
padding-bottom: 6em;
}
h1::after {
background-color: #1b6d85;
}
.btn--primary:focus, .btn--primary:hover, .btn--primary:active,
.btn--primary {
background-color: #1b6d85;
}
.btn--warning:focus, .btn--warning:hover, .btn--warning:active,
.btn--warning {
background-color: #554685;
}
select {
background: #1b6d85;
border-color: #1b6d85;
&:hover {
color: #ccc;
}
}
.title {
color: #ccc;
}
.lang_icon, .menu_icon {
fill: #1b6d85 !important;
color: #1b6d85 !important;
}
}
&.theme-hot-covid {
background: #ffbca4;
color: #501016;
h1::after {
background-color: #850003;
}
.btn--primary:focus, .btn--primary:hover, .btn--primary:active, .btn--primary {
background-color: #850003 !important;
}
}
}

1
src/styles.scss
View File

@ -2,6 +2,7 @@
@import "~bulma/bulma";
@import "assets/scss/variables";
@import "assets/scss/default";
@import "assets/scss/themes/light";
@import "assets/scss/useful_classes";
@import "assets/scss/atoms/main";