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

split many components, presentation with left nav

This commit is contained in:
tykayn 2020-04-11 16:06:56 +02:00
parent 60c184c60b
commit 9bdd4e0084
17 changed files with 237 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,80 +1,47 @@
<div
id='big_container'
class={{this.config.themeClass}} >
class={{this.config.themeClass}}
>
<header class='big-header'>
<div class='container'>
<div class='columns' >
<div class='column' >
<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 class='columns'>
<div class='column'>
<framadate-master-head></framadate-master-head>
</div >
<div class='column' >
<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 >
<div class='column' >
<framadate-theme-selector ></framadate-theme-selector >
</div >
</div >
</div>
<div class='column'>
<framadate-language></framadate-language>
</div>
</div>
</div>
</header>
</header >
<main>
<div class="container">
<main >
<div class="columns">
<div class="column is-one-quarter">
<framadate-theme-selector></framadate-theme-selector>
<router-outlet ></router-outlet >
</main >
<framadate-debugger ></framadate-debugger >
<framadate-navigation
*ngIf="menuVisible"
[step]="step" ></framadate-navigation >
<p-toast position="top-right" ></p-toast >
<framadate-navigation
*ngIf="config.menuVisible"
[step]="step"
></framadate-navigation>
<framadate-debugger
</div >
*ngIf="isDevelopmentEnv"
></framadate-debugger>
<p-toast position="top-right"></p-toast>
</div>
<div class="column">
<router-outlet></router-outlet>
</div>
</div>
</div>
</main>
</div>

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

@ -1,9 +1,10 @@
import {Component, Inject} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
import {NavigationStart, Router} from '@angular/router';
import {DOCUMENT} from "@angular/common";
import {filter} from "rxjs/operators";
import {ConfigService} from "./services/config.service";
import {DOCUMENT} from '@angular/common';
import {filter} from 'rxjs/operators';
import {ConfigService} from './services/config.service';
import {environment} from '../environments/environment';
@Component({
selector: 'app-root',
@ -11,25 +12,17 @@ import {ConfigService} from "./services/config.service";
styleUrls: ['./app.component.scss']
})
export class AppComponent {
currentLang = 'fr';
langsAvailable = ['fr', 'en'];
title = 'framadate';
//translation demo:
minutes = 12;
user = {
name: 'Arthur',
age: 42
};
menuVisible: boolean = true;
step: string;
isDevelopmentEnv=false;
constructor(private translate: TranslateService,
public config: ConfigService,
@Inject(DOCUMENT) private document,
private route: Router) {
this.translate.setDefaultLang(this.currentLang);
this.detectCurrentTabOnRouteChange();
this.isDevelopmentEnv = !environment.production
}
detectCurrentTabOnRouteChange() {
@ -46,31 +39,6 @@ export class AppComponent {
}
switchLanguage(language: string) {
this.translate.use(language);
this.currentLang = language;
}
/**
* set the next lang or loop to the first
* this is to manage future languages available
*/
changeLanguage() {
let langs = this.langsAvailable;
let indexofCurrent = langs.indexOf(this.currentLang);
if (indexofCurrent > -1) {
let newIndex = indexofCurrent + 1;
if (newIndex > (langs.length - 1)) {
newIndex = 0;
}
this.currentLang = this.langsAvailable[newIndex];
}
this.translate.use(this.currentLang);
}
toggleMenu() {
this.menuVisible = !this.menuVisible;
}
scrollGoToTop() {
this.document.documentElement.scrollTop = 0;

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

@ -39,25 +39,27 @@ import {PollGraphicComponent} from './poll-graphic/poll-graphic.component';
import {AdminComponent} from './pages/admin/admin.component';
import {SelectorComponent} from './ui/selector/selector.component';
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {ConfigService} from "./services/config.service";
import {PollService} from "./services/poll.service";
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ConfigService} from './services/config.service';
import {PollService} from './services/poll.service';
import {ToastModule} from 'primeng/toast';
import {ConfirmationService, MessageModule, MessageService} from "primeng";
import {ConfirmationService, MessageModule, MessageService} from 'primeng';
import {PollDisplayComponent} from './pages/poll-display/poll-display.component';
import {VotingComponent} from './pages/voting/voting.component';
import {VotingCommentComponent} from './pages/voting/voting-comment/voting-comment.component';
import {ResettableInputDirective} from './ui/directives/resettable-input.directive';
import {ClipboardModule} from "ngx-clipboard";
import {ClipboardModule} from 'ngx-clipboard';
import {ErasableInputComponent} from './ui/erasable-input/erasable-input.component';
import {ConfirmDialogModule} from 'primeng/confirmdialog';
import {DialogModule} from 'primeng/dialog';
import {DateValueAccessorModule} from "./custom-lib/date-value-accessor";
import {DateValueAccessorModule} from './custom-lib/date-value-accessor';
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';
import { MasterHeadComponent } from './ui/navigation/master-head/master-head.component';
import { LanguageComponent } from './ui/selector/language/language.component';
export class MyMissingTranslationHandler implements MissingTranslationHandler {
handle(params: MissingTranslationHandlerParams) {
@ -105,6 +107,8 @@ export function HttpLoaderFactory(http: HttpClient) {
ChoicesListComponent,
VotingNavigationComponent,
ThemeSelectorComponent,
MasterHeadComponent,
LanguageComponent,
],
imports: [

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

@ -23,6 +23,9 @@ const baseConfigValues = {
* configuration of the poll, add new fields at will
*/
export class PollConfig {
menuVisible = true;
expiracyDateDefaultInDays = 60;
deletionDateAfterLastModification = 180;
step: number = 0; // step in the progress of creating a poll

2
src/app/debugger/debugger.component.html
View File

@ -1,7 +1,7 @@
<div class="well debug" >
<strong >
<h2 i18n >
infos de debug
infos de debug - environement de Dev
</h2 >
<span class="demo" >
{{"config.demo"|translate}}

6
src/app/pages/dates/dates.component.html
View File

@ -1,6 +1,6 @@
<div i18n >
{{"dates.title"|translate}}
</div >
<h1 class="title is-1" >
<i class="fa fa-calendar"></i> {{"dates.title"|translate}}
</h1 >
<div >
<label for="multi_hours" >

2
src/app/pages/dates/dates.component.ts
View File

@ -12,7 +12,7 @@ import {DateUtilities} from "../../config/DateUtilities";
styleUrls: ['./dates.component.scss']
})
export class DatesComponent extends BaseComponent implements OnInit {
showDateInterval: boolean = true;
showDateInterval: boolean = false;
startDateInterval: any;
intervalDays: any;
intervalDaysDefault: number = 7;

15
src/app/ui/navigation/master-head/master-head.component.html Normal file
View File

@ -0,0 +1,15 @@
<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>

0
src/app/ui/navigation/master-head/master-head.component.scss Normal file
View File

25
src/app/ui/navigation/master-head/master-head.component.spec.ts Normal file
View File

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

15
src/app/ui/navigation/master-head/master-head.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'framadate-master-head',
templateUrl: './master-head.component.html',
styleUrls: ['./master-head.component.scss']
})
export class MasterHeadComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

2
src/app/ui/navigation/navigation.component.ts
View File

@ -11,7 +11,7 @@ import {ConfigService} from '../../services/config.service';
})
export class NavigationComponent extends BaseComponent implements OnInit {
@Input() public step: string = 'home';
@Input() public step = 'home';
constructor(public config: ConfigService,
public route: Router) {

34
src/app/ui/selector/language/language.component.html Normal file
View File

@ -0,0 +1,34 @@
<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>

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

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

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

62
src/app/ui/selector/language/language.component.ts Normal file
View File

@ -0,0 +1,62 @@
import {Component, Inject, OnInit} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
import {ConfigService} from '../../../services/config.service';
import {DOCUMENT} from '@angular/common';
import {Router} from '@angular/router';
@Component({
selector: 'framadate-language',
templateUrl: './language.component.html',
styleUrls: ['./language.component.scss']
})
export class LanguageComponent implements OnInit {
currentLang = 'fr';
langsAvailable = ['fr', 'en'];
title = 'framadate';
// translation demo:
minutes = 12;
user = {
name: 'Arthur',
age: 42
};
constructor(private translate: TranslateService,
public config: ConfigService,
@Inject(DOCUMENT) private document,
private route: Router) {
this.translate.setDefaultLang(this.currentLang);
}
ngOnInit(): void {
}
switchLanguage(language: string) {
this.translate.use(language);
this.currentLang = language;
}
/**
* set the next lang or loop to the first
* this is to manage future languages available
*/
changeLanguage() {
const langs = this.langsAvailable;
const indexofCurrent = langs.indexOf(this.currentLang);
if (indexofCurrent > -1) {
let newIndex = indexofCurrent + 1;
if (newIndex > (langs.length - 1)) {
newIndex = 0;
}
this.currentLang = this.langsAvailable[newIndex];
}
this.translate.use(this.currentLang);
}
toggleMenu() {
this.config.menuVisible = !this.config.menuVisible;
}
}

1
src/assets/scss/atoms/_main.scss
View File

@ -4,7 +4,6 @@ main {
display: block;
width: 100%;
//max-width: 320px; // to look like the styleguide, to remove when we will have full width views
max-width: 800px;
margin: 0 auto;
padding: 0 2rem;
}