image button + design fix

7 years ago · 02fea78b97
parent b6f692459b
commit 02fea78b97
13 changed files with 239 additions and 24 deletions
--- a/src/app/components/carteParrainage/carte-envoyer/carte-envoyer.component.html
+++ b/src/app/components/carteParrainage/carte-envoyer/carte-envoyer.component.html
@ -36,11 +36,13 @@
        </div>
      </div>
      <div class="card" [hidden]="!hideme[i]" style="width: 101%; height:20rem; overflow-y: auto;">
-        <ul class="list-group">
-          <li class="list-group-item justify-content-between align-items-center" *ngFor="let hst of crt.historique">
-            <p class="font-weight-normal" style="padding-top: 2%">{{hst}}</p>
-          </li>
-        </ul>
+        <div class="card-body">
+          <ul class="list-group">
+            <li class="list-group-item justify-content-between align-items-center" *ngFor="let hst of crt.historique">
+              <p class="font-weight-normal" style="padding-top: 2%">{{hst}}</p>
+            </li>
+          </ul>
+        </div>
      </div>
    </div>
  </div>
--- a/src/app/components/opCommercial/creation-op-com/creation-op-com.component.html
+++ b/src/app/components/opCommercial/creation-op-com/creation-op-com.component.html
@ -1,7 +1,7 @@
 <app-nav-commercant></app-nav-commercant>
 <div class="container" style="padding-top: 10%">
  <div class="card" style="padding: 5%;">
-    <div class="well">
+    <div class="card-block">
      <p class="h5 text-center mb-4">Nouvelle operation commercial</p>
      <div class="md-form">
        <i class="fa fa-address-card prefix grey-text"></i>
--- a/src/app/components/opCommercial/creation-op-com/creation-op-com.component.scss
+++ b/src/app/components/opCommercial/creation-op-com/creation-op-com.component.scss
@ -0,0 +1,3 @@
+.card {
+  padding: 5%;
+}
--- a/src/app/components/opCommercial/debiter-carte/debiter-carte.component.html
+++ b/src/app/components/opCommercial/debiter-carte/debiter-carte.component.html
@ -10,7 +10,7 @@

 <div class="container" style="padding-top:10%">
  <div class="card">
-    <div class="well">
+    <div class="card-block">
      <p class="h5 text-center mb-4">Débiter Carte</p>
      <!-- Si cest un filleul existant -->
      <div class="md-form">
--- a/src/app/components/opCommercial/debiter-carte/debiter-carte.component.scss
+++ b/src/app/components/opCommercial/debiter-carte/debiter-carte.component.scss
@ -0,0 +1,3 @@
+.card {
+  padding: 5%;
+}
--- a/src/app/components/opCommercial/op-commercial/op-commercial.component.html
+++ b/src/app/components/opCommercial/op-commercial/op-commercial.component.html
@ -11,8 +11,8 @@
 <button (click)="goToProfil()">Back</button>
 -->
  <app-nav-commercant></app-nav-commercant>
-  <h4 class="h5 text-center mb-4" style="padding-top: 5%;">Liste de vos operations commercials</h4>
-  <div class="btn-block flex-center align-middle" style="padding-top: 5%;">
+  <h4 class="h5 text-center mb-4" style="padding-top: 5%;">Liste de vos operations commerciales</h4>
+  <div class="btn-block flex-center align-middle" style="padding-top: 2%;">
    <button class="btn btn-primary btn-rounded waves-light" id="nouvelleOp" (click)="goToCreaOpCom()">Nouvelle opération Commerciale</button>
    <!--<button class="btn btn-primary btn-rounded waves-light" (click)="goToCarteEnvoyer()">Historique carte envoyer</button>-->
    <!--<button class="btn btn-default btn-rounded waves-light" (click)="goToProfil()">Profil</button>-->
--- a/src/app/components/opCommercial/scanner-carte/scanner-carte.component.html
+++ b/src/app/components/opCommercial/scanner-carte/scanner-carte.component.html
@ -9,7 +9,7 @@
 <app-nav-commercant></app-nav-commercant>
 <div class="container" style="padding-top:10%">
 <div class="card">
-  <div class="well">
+  <div class="card-block">
    <p class="h5 text-center mb-4">Scanner Carte</p>
    <!--<p class="text-center mb-4" style="padding-top: 2%;">Choisissez quelle type de fieulle voulez-vous scanner la carte</p>
    <form class="form-inline flex-center">
--- a/src/app/components/profil/edit-profil/edit-profil.component.html
+++ b/src/app/components/profil/edit-profil/edit-profil.component.html
@ -13,13 +13,19 @@
      <!--Avatar-->
      <div class="avatar"><img src="{{imageProfil}}" class="rounded-circle img-responsive">
      </div>
-      <div class="flex-center">
-        <!--<i class="fa fa-file-picture-o prefix grey-text"></i>-->
-        <label for="orangeForm-File">Sélectionner votre nouvelle photo de profil: </label>
-        <input type="file" id="orangeForm-File" name="file" accept=".jpg, .jpeg, .png">
-      </div>
      <div class="card-body" style="padding-left: 20%; padding-right: 20%;">
        <!--Name-->
+        <div class="flex-center">
+          <!--<i class="fa fa-file-picture-o prefix grey-text"></i>-->
+          <!--<input type="file" id="orangeForm-File" name="file" class="inputfile" accept=".jpg, .jpeg, .png">
+          <label for="orangeForm-File">Choose a file</label>-->
+
+        </div>
+
+        <input type="file" name="file-1[]" id="orangeForm-File" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple />
+        <label class="waves-effect" for="orangeForm-File"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Choisir image</span></label>
+
+
        <div *ngIf="(user | async)?.displayName === 'Parrain'" >
          <button class="btn btn-deep-orange" (click)="modifyPasswordSection()">Modifier Email/Mot de passe</button>
          <div class="card" *ngIf="modifiermdp">
--- a/src/app/components/profil/edit-profil/edit-profil.component.scss
+++ b/src/app/components/profil/edit-profil/edit-profil.component.scss
@ -1,3 +1,80 @@
 .container {
  padding-top: 10%;
 }
+
+.inputfile {
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}
+
+.inputfile + label {
+  max-width: 80%;
+  font-size: 1.25rem;
+  /* 20px */
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  display: inline-block;
+  overflow: hidden;
+  padding: 0.625rem 1.25rem;
+  /* 10px 20px */
+}
+
+.inputfile + label * {
+  pointer-events: none;
+}
+
+
+.no-js .inputfile + label {
+  display: none;
+}
+
+.inputfile:focus + label,
+.inputfile.has-focus + label {
+  outline: 1px dotted #000;
+  outline: -webkit-focus-ring-color auto 5px;
+}
+
+.inputfile + label * {
+  /* pointer-events: none; */
+  /* in case of FastClick lib use */
+}
+
+.inputfile + label svg {
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+  fill: currentColor;
+  margin-top: -0.25em;
+  /* 4px */
+  margin-right: 0.25em;
+  /* 4px */
+}
+
+
+/* style 1 */
+
+.inputfile-1 + label {
+  color: #f1e5e6;
+  background-color: #d3394c;
+}
+
+.inputfile-1:focus + label,
+.inputfile-1.has-focus + label,
+.inputfile-1 + label:hover {
+  background-color: #722040;
+}
+
+
+
+
+
+
+
+
+
--- a/src/app/components/profil/edit-profil/edit-profil.component.ts
+++ b/src/app/components/profil/edit-profil/edit-profil.component.ts
@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, EventEmitter } from '@angular/core';

 import { Observable } from 'rxjs/Observable';
 import { Router } from '@angular/router';
@ -11,6 +11,7 @@ import { User } from '../../../../models/User';
 import { Parrain } from '../../../../models/Parrain';
 import { Commercant } from '../../../../models/Commercant';

+
@Component({
  selector: 'app-edit-profil',
  templateUrl: './edit-profil.component.html',
@ -76,6 +77,8 @@ export class EditProfilComponent implements OnInit {

  }

+
+
  modifyPasswordSection() {
    if (this.modifiermdp === false) {
      this.modifiermdp = true;
@ -111,6 +114,31 @@ export class EditProfilComponent implements OnInit {
  }

  ngOnInit() {
+    var inputs = document.querySelectorAll( '.inputfile' );
+    Array.prototype.forEach.call( inputs, function( input )
+    {
+      var label	 = input.nextElementSibling,
+        labelVal = label.innerHTML;
+
+      input.addEventListener( 'change', function( e )
+      {
+        var fileName = '';
+        if( this.files && this.files.length > 1 ){
+          fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
+        }
+        else {
+          fileName = e.target.value.split( '\\' ).pop();
+        }
+
+        if( fileName ) {
+          label.querySelector( 'span' ).innerHTML = fileName;
+        }
+        else {
+          label.innerHTML = labelVal;
+        }
+      });
+    });
+
    try {
      this.user.subscribe(
        (auth) => {
--- a/src/app/components/register/register.component.html
+++ b/src/app/components/register/register.component.html
@ -5,11 +5,11 @@

    <label>
      <form class="form-inline">
-        <div class="md-form">
+        <div class="md-form" style="padding-left: 2%;">
          <input name="group2" type="radio" class="with-gap" id="parrain"  (click)="ngOnDestroy()" value="Parrain" [(ngModel)]="currentUser.status">
          <label for="parrain">Parrain</label>
        </div>
-        <div class="md-form">
+        <div class="md-form" style="padding-left: 5%;">
          <input name="group2" type="radio" class="with-gap" id="commercant"  (click)="ngOnDestroy()" value="Commercant" [(ngModel)]="currentUser.status">
          <label for="commercant">Commercant</label>
        </div>
@ -26,17 +26,17 @@
        <i class="fa fa-user prefix grey-text"></i>
        <input type="text" id="orangeForm-Firstname" [(ngModel)]="parrain.firstname" placeholder="Firstname">
      </div>
-      <div class="md-form">
+      <!--<div class="md-form">
        <i class="fa fa-file-picture-o prefix grey-text"></i>
        <input type="file" id="orangeForm-File"  name="file" style="padding-top: 1%;">
-      </div>
+      </div>-->
      <form class="form-inline">
-        <div class="md-form">
+        <div class="md-form" style="padding-left: 2%;">
          <i class="fa fa-venus-mars prefix grey-text"></i>
          <input name="group3" type="radio" class="with-gap" id="homme" value="Homme" [(ngModel)]="parrain.sex">
          <label for="homme">Homme</label>
        </div>
-        <div class="md-form">
+        <div class="md-form" style="padding-left: 2%;">
          <input name="group3" type="radio" class="with-gap" id="femme" value="Femme" [(ngModel)]="parrain.sex">
          <label for="femme">Femme</label>
        </div>
@ -75,6 +75,8 @@
          Please write the same of your <strong><i>password</i></strong>.
        </div>
      </div>
+      <input type="file" name="file-1[]" id="orangeForm-File" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple />
+      <label class="waves-effect" for="orangeForm-File"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Choisir image</span></label>
      <label>
        En cliquant sur Créer un compte, vous acceptez nos Conditions
        et indiquez que vous aves lu notre Politique d'utilisation des
@ -98,10 +100,10 @@
        <i class="fa fa-user prefix grey-text"></i>
        <input type="text" id="orangeForm-Firstname" [(ngModel)]="commercant.commercialName" placeholder="Commercial name">
      </div>
-      <div class="md-form">
+      <!--<div class="md-form">
        <i class="fa fa-file-picture-o prefix grey-text"></i>
        <input type="file" id="orangeForm-File"  name="file" style="padding-top: 1%;">
-      </div>
+      </div>-->
      <div class="md-form">
        <i class="fa fa-info prefix grey-text"></i>
        <input type="text" id="orangeForm-Username" [(ngModel)]="commercant.siret" placeholder="Siret" required minlength="14" name="siret" #siret="ngModel">
@ -131,6 +133,8 @@
          Please write the same of your <strong><i>password</i></strong>.
        </div>
      </div>
+      <input type="file" name="file-1[]" id="orangeForm-File" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple />
+      <label class="waves-effect" for="orangeForm-File"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Choisir image</span></label>
      <label>
        En cliquant sur Créer un compte, vous acceptez nos Conditions
        et indiquez que vous aves lu notre Politique d'utilisation des
--- a/src/app/components/register/register.component.scss
+++ b/src/app/components/register/register.component.scss
@ -1,3 +1,71 @@
 .card {
  padding: 5%;
 }
+
+.inputfile {
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}
+
+.inputfile + label {
+  max-width: 50%;
+  font-size: 1rem;
+  /* 20px */
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  display: inline-block;
+  overflow: hidden;
+  padding: 0.625rem 1.25rem;
+  /* 10px 20px */
+}
+
+.inputfile + label * {
+  pointer-events: none;
+}
+
+
+.no-js .inputfile + label {
+  display: none;
+}
+
+.inputfile:focus + label,
+.inputfile.has-focus + label {
+  outline: 1px dotted #000;
+  outline: -webkit-focus-ring-color auto 5px;
+}
+
+.inputfile + label * {
+  /* pointer-events: none; */
+  /* in case of FastClick lib use */
+}
+
+.inputfile + label svg {
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+  fill: currentColor;
+  margin-top: -0.25em;
+  /* 4px */
+  margin-right: 0.25em;
+  /* 4px */
+}
+
+
+/* style 1 */
+
+.inputfile-1 + label {
+  color: #f1e5e6;
+  background-color: #d3394c;
+}
+
+.inputfile-1:focus + label,
+.inputfile-1.has-focus + label,
+.inputfile-1 + label:hover {
+  background-color: #722040;
+}
--- a/src/app/components/register/register.component.ts
+++ b/src/app/components/register/register.component.ts
@ -78,6 +78,30 @@ export class RegisterComponent implements OnInit, OnDestroy {
  }

  ngOnInit() {
+    var inputs = document.querySelectorAll( '.inputfile' );
+    Array.prototype.forEach.call( inputs, function( input )
+    {
+      var label	 = input.nextElementSibling,
+        labelVal = label.innerHTML;
+
+      input.addEventListener( 'change', function( e )
+      {
+        var fileName = '';
+        if( this.files && this.files.length > 1 ){
+          fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
+        }
+        else {
+          fileName = e.target.value.split( '\\' ).pop();
+        }
+
+        if( fileName ) {
+          label.querySelector( 'span' ).innerHTML = fileName;
+        }
+        else {
+          label.innerHTML = labelVal;
+        }
+      });
+    });
  }

  ngOnDestroy() {