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
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 {