From 6fc39c4521e1718beb3d658139f0000ba1735ad4 Mon Sep 17 00:00:00 2001
From: "francois.grand" <francois.grand@irstea.fr>
Date: Thu, 30 Nov 2017 15:44:46 +0100
Subject: [PATCH] =?UTF-8?q?adaptation=20du=20composant=20SelectFieldLineCo?=
 =?UTF-8?q?mponent=20=C3=A0=20MDBootstrap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../select-field-line.component.ts            | 16 ++++++++---
 .../select-field-line/select-field-line.html  | 28 +++++++++++++------
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/app/components/select-field-line/select-field-line.component.ts b/src/app/components/select-field-line/select-field-line.component.ts
index 4a2a11f4a..29074ded3 100644
--- a/src/app/components/select-field-line/select-field-line.component.ts
+++ b/src/app/components/select-field-line/select-field-line.component.ts
@@ -6,12 +6,16 @@ import { FormulaireService } from '../../services/formulaire/formulaire.service'
 @Component({
     selector: 'select-field-line',
     templateUrl: "./select-field-line.html",
+    styles: [
+        // Titre de la ligne
+        `.select_title {
+            text-align: right;
+        }`
+    ]
 })
 export class SelectFieldLineComponent {
     private _select: SelectField;
 
-    private currentValue: string;
-
     constructor(private formulaireService: FormulaireService) {
     }
 
@@ -19,6 +23,12 @@ export class SelectFieldLineComponent {
         return this._select.entries;
     }
 
+    private get currentLabel(): string {
+        if (this._select.selectedEntry != undefined)
+            return this._select.selectedEntry.label;
+        return "<no selection>";
+    }
+
     /**
     * id input attribute
     */
@@ -38,8 +48,6 @@ export class SelectFieldLineComponent {
 
     private updateSelect() {
         this._select = this.formulaireService.getSelectField(this._id);
-        if (this._select.selectedEntry != undefined)
-            this.currentValue = this._select.selectedEntry.value;
     }
 
     private onSelect(event: any) {
diff --git a/src/app/components/select-field-line/select-field-line.html b/src/app/components/select-field-line/select-field-line.html
index 9041cd726..faad38143 100644
--- a/src/app/components/select-field-line/select-field-line.html
+++ b/src/app/components/select-field-line/select-field-line.html
@@ -1,8 +1,20 @@
-<tr>
-    <td align="right">{{_select.label}}</td>
-    <td colspan="3">
-        <select [(ngModel)]=currentValue (change)=onSelect($event)>
-    <option *ngFor="let e of entries" [value]=e.value>{{e.label}}</option>
-</select>
-    </td>
-</tr>
\ No newline at end of file
+<div class="container-fluid">
+    <div class="row">
+        <!-- titre -->
+        <div class="col-3 select_title">
+            {{_select.label}}
+        </div>
+
+        <!-- liste déroulante -->
+        <div class="col-4 col-sm-3">
+            <div class="btn-group" dropdown (click)="onSelect($event)">
+                <button dropdownToggle class="btn grey darken-3 dropdown-toggle waves-light" type="button" mdbRippleRadius>
+                    {{currentLabel}}
+                </button>
+                <div class="dropdown-menu">
+                    <a class="dropdown-item" *ngFor="let e of entries" [value]=e.value>{{e.label}}</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
-- 
GitLab