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

🎨 better disposal for theme selector

Browse Source
archived-develop
Baptiste Lemoine 3 years ago
parent 2d757c6726
commit 312b2d8599
10 changed files with 134 additions and 120 deletions
Show Stats Download Patch File Download Diff File

110
src/app/app.component.html
Unescape View File

@ -2,61 +2,73 @@
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 >
<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 >
<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 >
</header >
<framadate-theme-selector ></framadate-theme-selector >
<main >
<router-outlet ></router-outlet >
</main >
<framadate-debugger ></framadate-debugger >

10
src/app/app.component.scss
Unescape View File

@ -1,13 +1,7 @@
@charset "UTF-8";
header {
h1,
a {
&::before,
&::after {
display: none;
}
}
.big-header {
padding: 0.5rem;
}
i {

2
src/app/config/PollConfig.ts
Unescape View File

@ -31,7 +31,7 @@ export class PollConfig {
// front end choices
themeChoices: string[] = ['light-watermelon', 'dark-crystal', 'hot-covid'];
themeSelected: number = 0;
themeClass: string = 'light-watermelon';
themeClass: string = 'theme-light-watermelon';
title: string = 'titre';
description: string = 'ma description';
myName: string = 'mon pseudo';

8
src/app/ui/theme-selector/theme-selector.component.html
Unescape View File

@ -1,22 +1,22 @@
<div class='theme-selector' >
<h1 >Thème ( {{config.themeClass}})</h1 >
<h1 class='title' >Thème</h1 >
<span
class='choice btn'
[ngClass]="{ 'btn-primary' : config.themeClass ==='light-watermelon' }"
[ngClass]="{ 'btn--primary' : config.themeClass ==='theme-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' }"
[ngClass]="{ 'btn--primary' : config.themeClass ==='theme-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' }"
[ngClass]="{ 'btn--primary' : config.themeClass ==='theme-hot-covid' }"
(click)="selectTheme('hot-covid')" >

4
src/app/ui/theme-selector/theme-selector.component.scss
Unescape View File

@ -0,0 +1,4 @@
:host {
text-align: center;
padding: 0.5em;
}

3
src/assets/scss/themes/_all.scss
Unescape View File

@ -0,0 +1,3 @@
@import "light";
@import "dark";
@import "red";

44
src/assets/scss/themes/_dark.scss
Unescape View File

@ -0,0 +1,44 @@
#big_container {
&.theme-dark-crystal {
background: #222;
color: #ddd;
main {
background: #444;
}
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;
}
}
}

57
src/assets/scss/themes/_light.scss
Unescape View File

@ -3,61 +3,4 @@
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;
}
}
}

14
src/assets/scss/themes/_red.scss
Unescape View File

@ -0,0 +1,14 @@
#big_container {
&.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;
}
}
}

2
src/styles.scss
Unescape View File

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

Write Preview
Loading…
Cancel
Save