From b78ea6273eadfa9ea862952fdd4ed32b72a9191e Mon Sep 17 00:00:00 2001
From: MarguoNana <n.marguerite@live.fr>
Date: Fri, 29 Nov 2019 20:19:49 +0100
Subject: [PATCH] changer la langue entre fr et en quand on clique sur l'icone
 de traduction

---
 src/app/app.component.html           | 16 +++++----
 src/assets/i18n/en.json              |  1 +
 src/assets/i18n/fr.json              |  3 +-
 src/assets/scss/default.scss         | 17 +++++++++
 src/assets/scss/molecules/_logo.scss | 52 ++++++++++++++++++++++++++++
 src/assets/scss/variables.scss       |  2 ++
 6 files changed, 84 insertions(+), 7 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 7e33e182..0b7d065c 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -4,14 +4,18 @@
             <span class="logo_first">Frama</span>
             <span class="logo_second">date</span>
         </h1>
-
+        <div class="legend">proposé par <span class="legend_first">Frama</span><span class="legend_second">soft</span></div>
     </a>
     <div id="translate_example">
-        <img src="assets/img/icone-langue.svg" alt="location icon">
-        <img src="assets/img/icone-menu.svg" alt="menu icon">
-        <div class="lang-choices">
-            <button class="btn btn-info" (click)="switchLanguage('en')">en</button>
-            <button class="btn btn-info" (click)="switchLanguage('fr')">fr</button>
+        <div class="wrapper">
+            <img src="assets/img/icone-langue.svg" alt="location icon" class="lang_icon">
+            <img src="assets/img/icone-menu.svg" alt="menu icon" class="menu_icon">
+            <select name="language" class="Language-" (change)="switchLanguage($event.target.value)">
+                <option value="d" default class="select_language">{{"Language" | translate}}</option>
+                <option value="en" >English</option>
+                <option value="fr" >Français</option>
+            </select>
+            <span class="menu_label">Menu</span>
         </div>
         <h1 i18n>{{"Title"|translate}}</h1>
         <div>
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 11f74685..87e7dac9 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -1,4 +1,5 @@
 {
+    "Language": "Language",
     "Title": "Translation example",
     "Intro": "Hello I am {{name}}, I am {{age}} years old.",
     "home": {
diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json
index bc0d6e64..d978c3df 100644
--- a/src/assets/i18n/fr.json
+++ b/src/assets/i18n/fr.json
@@ -1,5 +1,6 @@
 {
-    "Title": "Example de traduction",
+    "Language": "Langue",
+    "Title": "Exemple de traduction",
     "Intro": "Bonjour je m'appelle {{name}}, j'ai {{age}} ans.",
     "home": {
         "title": "le titre de la home"
diff --git a/src/assets/scss/default.scss b/src/assets/scss/default.scss
index 1d7174de..2410541b 100644
--- a/src/assets/scss/default.scss
+++ b/src/assets/scss/default.scss
@@ -9,3 +9,20 @@ html {
 .text-right {
   text-align: right;
 }
+
+.Language- {
+  padding-right: 2em;
+  font-family: SourceSansPro;
+  font-size: 11px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  color: var(--black);
+  border: none;
+}
+
+.select_language {
+  display: none;
+}
\ No newline at end of file
diff --git a/src/assets/scss/molecules/_logo.scss b/src/assets/scss/molecules/_logo.scss
index 0ea0cae3..06466ec7 100644
--- a/src/assets/scss/molecules/_logo.scss
+++ b/src/assets/scss/molecules/_logo.scss
@@ -10,3 +10,55 @@
 .logo_second {
   color: $logo_color_2;
 }
+.wrapper {
+  display: grid;
+  margin-left: auto;
+  margin-right: auto;
+  width: 80px;
+  margin-top: 1rem;
+}
+
+.lang_icon {
+  grid-column: 1;
+  grid-row: 1;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.menu_icon {
+  grid-column: 2;
+  grid-row: 1;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.lang_label {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+.menu_label {
+  grid-column: 2;
+  grid-row: 2;
+  font-family: SourceSansPro;
+  font-size: 11px;
+  padding-top: 10px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.legend_first {
+  color: $legend_color;
+  padding-right: 0rem;
+  padding-left: 0rem;
+}
+
+.legend_second {
+ color: $legend_color_2;
+ padding-right: 0rem;
+ padding-left: 0rem;
+}
+
+.legend {
+  font-size: 10px;
+}
diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss
index 8bdaa5c3..8f8f8e87 100644
--- a/src/assets/scss/variables.scss
+++ b/src/assets/scss/variables.scss
@@ -20,6 +20,8 @@ $secondary_color: $lavender-pink;
 $font_color: $black;
 $logo_color: $dark-lavender;
 $logo_color_2: $camo;
+$legend_color: $dark-lavender;
+$legend_color_2: $dusty-orange;
 $choice_select_border_color: $cool-grey;
 $hover-color:$warm-grey;
 $clicked-color:$wisteria;