password generator options toggle

src/app/vault/password-generator.component.html

@@ -17,9 +17,13 @@
                 </div>
                 <div class="box">
                     <div class="box-header">
-                        {{'options' | i18n}}
+                        <button type="button" (click)="toggleOptions()">
+                            <i class="fa fa-plus-square-o" [hidden]="showOptions"></i>
+                            <i class="fa fa-minus-square-o" [hidden]="!showOptions"></i>
+                            {{'options' | i18n}}
+                        </button>
                     </div>
-                    <div class="box-content condensed">
+                    <div class="box-content condensed" *ngIf="showOptions">
                         <div class="box-content-row box-content-row-slider" appBoxRow>
                             <label for="length">{{'length' | i18n}}</label>
                             <span>{{options.length}}</span>
@@ -47,7 +51,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="box">
+                <div class="box" *ngIf="showOptions">
                     <div class="box-content condensed">
                         <div class="box-content-row box-content-row-input" appBoxRow>
                             <label for="min-number">{{'minNumbers' | i18n}}</label>
@@ -68,8 +72,9 @@
                 </div>
             </div>
             <div class="modal-footer">
-                <button type="button" class="primary" appBlurClick *ngIf="showSelect" (click)="select()">
-                    <i class="fa fa-lg fa-check"></i> {{'select' | i18n}}
+                <button type="button" class="primary" appBlurClick *ngIf="showSelect" (click)="select()"
+                        title="{{'select' | i18n}}">
+                    <i class="fa fa-lg fa-fw fa-check"></i>
                 </button>
                 <button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
             </div>

src/app/vault/password-generator.component.ts

@@ -24,6 +24,7 @@ export class PasswordGeneratorComponent implements OnInit {
 
     options: any = {};
     password: string = '-';
+    showOptions = false;
 
     constructor(private passwordGenerationService: PasswordGenerationService, private analytics: Angulartics2,
         private utilsService: UtilsService) { }
@@ -89,4 +90,8 @@ export class PasswordGeneratorComponent implements OnInit {
         this.analytics.eventTrack.next({ action: 'Selected Generated Password' });
         this.onSelected.emit(this.password);
     }
+
+    toggleOptions() {
+        this.showOptions = !this.showOptions;
+    }
 }

src/scss/base.scss

@@ -44,6 +44,7 @@ input, select, textarea, button {
 
 button {
     white-space: nowrap;
+    cursor: pointer;
 }
 
 textarea {

src/scss/box.scss

@@ -7,6 +7,13 @@
         margin: 0 10px 5px 10px;
         color: $gray-light;
         text-transform: uppercase;
+
+        button {
+            background-color: transparent;
+            border: none;
+            color: $gray-light;
+            text-transform: uppercase;
+        }
     }
 
     .box-content {

src/scss/buttons.scss

@@ -9,6 +9,7 @@
     color: $button-color;
     white-space: nowrap;
     text-align: center;
+    cursor: pointer;
 
     &:hover:not([disabled]), &:focus:not([disabled]) {
         cursor: pointer;