diff options
author | Dixsie Wolmers <dixsiew@gmail.com> | 2019-09-11 15:26:38 -0500 |
---|---|---|
committer | Gunnar Mills <gmills@us.ibm.com> | 2019-10-21 18:41:51 +0000 |
commit | c15f66b0d52e855ca0c03e20f875f7c4bd67282f (patch) | |
tree | 327202e6525858a0154d6231d08e7c4a73fc2273 /app/common | |
parent | 2ac4eda38aff10e8647ded62569f102290f3331a (diff) | |
download | phosphor-webui-c15f66b0d52e855ca0c03e20f875f7c4bd67282f.tar.gz phosphor-webui-c15f66b0d52e855ca0c03e20f875f7c4bd67282f.zip |
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
Diffstat (limited to 'app/common')
-rw-r--r-- | app/common/directives/certificate.html | 75 | ||||
-rw-r--r-- | app/common/styles/elements/file-upload.scss | 56 | ||||
-rw-r--r-- | app/common/styles/elements/index.scss | 2 | ||||
-rw-r--r-- | app/common/styles/elements/input-file.scss | 25 | ||||
-rw-r--r-- | app/common/styles/elements/modals.scss | 42 |
5 files changed, 142 insertions, 58 deletions
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 { |