From c15f66b0d52e855ca0c03e20f875f7c4bd67282f Mon Sep 17 00:00:00 2001
From: Dixsie Wolmers <dixsiew@gmail.com>
Date: Wed, 11 Sep 2019 15:26:38 -0500
Subject: Update certificate management page consistency

This change applies global styles to improve
page layout consistency and modal management

- Adds page and section styles
- Removes unused styles
- Creates individual html files for modals
- Updates certificate modals to bootstrap modal
- Updates global styles for input file field in file-upload.scss

TODO:
- Update certificate table with table component in separate commit
- Update CSR modal to use global form-field styles in separate commit

Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: I9b800cb684740da1a9168294433e726efb0f9d0e
---
 app/common/directives/certificate.html      | 75 ++++++++++++++++++-----------
 app/common/styles/elements/file-upload.scss | 56 +++++++++++++++++++++
 app/common/styles/elements/index.scss       |  2 +-
 app/common/styles/elements/input-file.scss  | 25 ----------
 app/common/styles/elements/modals.scss      | 42 ++++++++++++++--
 5 files changed, 142 insertions(+), 58 deletions(-)
 create mode 100644 app/common/styles/elements/file-upload.scss
 delete mode 100644 app/common/styles/elements/input-file.scss

(limited to 'app/common')

diff --git a/app/common/directives/certificate.html b/app/common/directives/certificate.html
index 1a7d091..cf7b46d 100644
--- a/app/common/directives/certificate.html
+++ b/app/common/directives/certificate.html
@@ -1,4 +1,5 @@
-<div class="table__row-value row column">
+<!-- TODO: Replace table with resusable table component -->
+<div class="table__row-value row">
   <div class="certificate__type-cell bold">
     {{getCertificateName(cert.Description)}}
   </div>
@@ -39,35 +40,55 @@
     {{cert.ValidNotAfter | date:medium}}
   </div>
   <div class="certificate__buttons-cell">
-    <button type="button" ng-click="cert.upload = true" aria-label="Replace certificate" class="btn  btn-tertiary certificate__button">
+    <button
+      type="button"
+      ng-click="cert.upload = true"
+      aria-label="Replace certificate"
+      class="btn  btn-tertiary certificate__button">
       <icon file="icon-replace.svg" aria-hidden="true"></icon>
     </button>
   </div>
   <div ng-show="cert.upload === true" class="upload__certificate">
-    <div class="certificate__upload-chooser row">
-      <div class="small-1 column">
-        <button type="button" ng-click="cert.upload=false" aria-label="close replace certificate upload form">
-          <icon file="icon-close.svg" aria-hidden="true"></icon>
-        </button>
-      </div>
-      <div class="small-2 column">
-        <label>
-          <input id="upload_{{cert.Description + cert.Id}}" type="file" file="cert.file" class="input-file" />
-          <span class="btn btn-secondary">Choose file</span>
-        </label>
-      </div>
-      <div class="small-6 column">
-        <span ng-if="!cert.file">No file selected</span>
-        <span>{{cert.file.name}}</span>
-        <button type="reset" ng-if="cert.file.name" ng-click="cert.file = '';" aria-label="remove selected file">
-          <icon file="icon-close.svg" aria-hidden="true"></icon>
-        </button>
-      </div>
-      <div class="small-3 column">
-        <button type="submit" ng-class="{disabled:!cert.file}" class="btn btn-primary" ng-click="replaceCertificate(cert)">
-          Replace
-        </button>
-      </div>
+    <div class="close-btn">
+      <button
+        type="button"
+        ng-click="cert.upload=false"
+        aria-label="close replace certificate upload form">
+        <icon file="icon-close.svg" aria-hidden="true"></icon>
+      </button>
+    </div>
+    <div class="file-upload">
+      <label
+        for="upload_{{ cert.Description + cert.Id }}"
+        class="file-upload-btn btn btn-secondary"
+        tabindex="0">Choose file</label>
+      <input
+        name="upload_{{ cert.Description + cert.Id }}"
+        id="upload_{{ cert.Description + cert.Id }}"
+        type="file"
+        file="cert.file"
+        class="file-upload-input"/>
+    </div>
+    <div class="file-upload-container file-upload-field">
+      <span ng-if="!cert.file">No file selected</span>
+      <span>{{ cert.file.name }}</span>
+      <button
+        type="reset"
+        class="btn file-upload-reset"
+        ng-if="cert.file.name"
+        ng-click="cert.file = '';"
+        aria-label="remove selected file">
+        <icon file="icon-close.svg" aria-hidden="true"></icon>
+      </button>
+    </div>
+    <div class="replace-btn">
+      <button
+        type="submit"
+        ng-disabled="!cert.file"
+        class="btn btn-primary"
+        ng-click="replaceCertificate(cert)">
+        Replace
+      </button>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/common/styles/elements/file-upload.scss b/app/common/styles/elements/file-upload.scss
new file mode 100644
index 0000000..4704d6d
--- /dev/null
+++ b/app/common/styles/elements/file-upload.scss
@@ -0,0 +1,56 @@
+/**
+  * Used for file upload
+  * Markup
+      <div class="file-upload">
+        <label for="upload_cert_new" class="file-upload-btn btn btn-secondary" tabindex="0">Choose file</label>
+        <input
+          name="upload_cert_new"
+          id="upload_cert_new"
+          type="file"
+          file="newCertificate.file"
+          class="file-upload-input"/>
+        <div class="form__field file-upload-container">
+          <span ng-hide="newCertificate.file">No file selected</span>
+          <span>{{ newCertificate.file.name }}</span>
+          <button
+            type="reset"
+            class="btn file-upload-reset"
+            ng-if="newCertificate.file.name"
+            ng-click="newCertificate.file = '';"
+            aria-label="remove selected file">
+            <icon file="icon-close.svg" aria-hidden="true"></icon>
+          </button>
+        </div>
+      </div>
+*/
+
+// Choose/upload button
+.file-upload-input {
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}
+
+.file-upload-input:focus {
+  outline: 0.2rem solid $base-02--04;
+}
+
+// File name of uploaded file field
+.file-upload-container {
+  background: $background-02;
+  padding: 0.5rem;
+  span {
+    padding-left: .5rem;
+  }
+  .file-upload-reset {
+    float: right;
+    margin-top: -.5rem;
+    icon {
+      margin-right: -1.7em;
+      margin-left: -1.5em;
+    }
+  }
+}
diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss
index b1df113..9fee615 100644
--- a/app/common/styles/elements/index.scss
+++ b/app/common/styles/elements/index.scss
@@ -2,7 +2,7 @@
 @import "toggle-filter";
 @import "alerts";
 @import "inline-confirm";
-@import "input-file";
+@import "file-upload";
 @import "accordion";
 @import "loader";
 @import "content-search";
diff --git a/app/common/styles/elements/input-file.scss b/app/common/styles/elements/input-file.scss
deleted file mode 100644
index 3f32b2b..0000000
--- a/app/common/styles/elements/input-file.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
-  * Used for file upload "choose file" button
-  * Markup (example for certificate upload)
-    <label>
-      <input
-      id="upload_{{cert.Description + cert.Id}}"
-      type="file"
-      file="cert.file"
-      class="input-file" />
-      <span class="btn btn-secondary">Choose file</span>
-    </label>
-*/
-
-.input-file {
-  width: 0.1px;
-  height: 0.1px;
-  opacity: 0;
-  overflow: hidden;
-  position: absolute;
-  z-index: -1;
-}
-
-.input-file:focus + span {
-  outline: 0.2rem solid $box-shadow-color;
-}
\ No newline at end of file
diff --git a/app/common/styles/elements/modals.scss b/app/common/styles/elements/modals.scss
index 263d285..3132934 100644
--- a/app/common/styles/elements/modals.scss
+++ b/app/common/styles/elements/modals.scss
@@ -83,9 +83,45 @@
   }
 }
 
+/**
+  * Markup  for bootstrap modal
+  <div class="uib-modal__content">
+    <div class="modal-header">
+      <h2 class="modal-title" id="modal_label">
+        Title here
+      </h2>
+      <button
+        type="button"
+        class="btn  btn--close"
+        ng-click="$dismiss()"
+        aria-label="close">
+        <icon file="icon-close.svg" aria-hidden="true"></icon>
+      </button>
+    </div>
+    <div class="modal-body">
+      Body content
+    </div>
+    <div class="modal-footer">
+      <button
+        type="button"
+        class="btn btn-secondary"
+        ng-click="$dismiss()">
+        Cancel
+      </button>
+      <button
+        type="submit"
+        class="btn btn-primary"
+        ng-click="function()">
+        Save
+      </button>
+    </div>
+  </div>
+*/
+
 .uib-modal.fade.in {
   opacity: 1;
 }
+
 .uib-modal.in .modal-dialog {
   transform: translate(0, 10vh);
   margin-top: 50px;
@@ -99,14 +135,10 @@
   }
 }
 
-.uib-modal .modal-dialog {
-  // override bootstrap max-width set at 500px
-  max-width: 550px;
-}
-
 .modal-backdrop.in {
   opacity: 0.5;
 }
+
 .uib-modal__content {
   padding: 1em;
   .modal-header {
-- 
cgit v1.2.1