diff options
author | Dixsie Wolmers <dixsie@ibm.com> | 2020-11-11 01:07:56 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-11-13 18:37:57 +0300 |
commit | 30f11f818168c89126777b717ab37829e25e8378 (patch) | |
tree | 2bfea87a7f99cc1143df630fda3c908e8c02b6e7 /src/components/Global/InputPasswordToggle.vue | |
parent | 151dd2491c01e70ed69baf638c22624fae598361 (diff) | |
download | webui-vue-30f11f818168c89126777b717ab37829e25e8378.tar.xz |
Align button icons
- Fixes button icon and text alignment
- App header buttons to be addressed separately
- Button documentation will be addressed in separate commit
- Aligns form input buttons: datepicker, clear search, and password toggle
- Moves title from icon to button for icon only buttons
- Aligns validation icon with form input buttons
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Ie28d7d7dd7303ab6bf1897d1fa569e1580cc2f9d
Diffstat (limited to 'src/components/Global/InputPasswordToggle.vue')
-rw-r--r-- | src/components/Global/InputPasswordToggle.vue | 22 |
1 files changed, 10 insertions, 12 deletions
diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue index bf3e4ca5..2119f8c6 100644 --- a/src/components/Global/InputPasswordToggle.vue +++ b/src/components/Global/InputPasswordToggle.vue @@ -2,22 +2,15 @@ <div class="input-password-toggle-container"> <slot></slot> <b-button - :aria-label="$t('global.ariaLabel.showPassword')" + :aria-label="togglePasswordLabel" + :title="togglePasswordLabel" variant="link" - class="input-action-btn" + class="input-action-btn btn-icon-only" :class="{ isVisible: isVisible }" @click="toggleVisibility" > - <icon-view-off - v-if="isVisible" - aria-hidden="true" - :title="$t('global.ariaLabel.hidePassword')" - /> - <icon-view - v-else - aria-hidden="true" - :title="$t('global.ariaLabel.showPassword')" - /> + <icon-view-off v-if="isVisible" /> + <icon-view v-else /> </b-button> </div> </template> @@ -32,6 +25,7 @@ export default { data() { return { isVisible: false, + togglePasswordLabel: this.$t('global.ariaLabel.showPassword'), }; }, methods: { @@ -44,6 +38,10 @@ export default { if (inputEl.nodeName === 'INPUT') { inputEl.type = this.isVisible ? 'text' : 'password'; } + + this.isVisible + ? (this.togglePasswordLabel = this.$t('global.ariaLabel.hidePassword')) + : (this.togglePasswordLabel = this.$t('global.ariaLabel.showPassword')); }, }, }; |