diff --git a/jslib b/jslib index a6092916d8..fdaa4f9fa5 160000 --- a/jslib +++ b/jslib @@ -1 +1 @@ -Subproject commit a6092916d80424b8bf4d34e321a0b58f15c7519d +Subproject commit fdaa4f9fa5c6ff8beefcf4d896a8a7f02dc7e3e9 diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index 4119268808..95211174c0 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -1866,5 +1866,8 @@ }, "leftOrganization": { "message": "You have left the organization." + }, + "toggleCharacterCount": { + "message": "Toggle character count" } } diff --git a/src/popup/app.module.ts b/src/popup/app.module.ts index e148e92ab9..a6ba4be62c 100644 --- a/src/popup/app.module.ts +++ b/src/popup/app.module.ts @@ -69,6 +69,7 @@ import { StopClickDirective } from "jslib-angular/directives/stop-click.directiv import { StopPropDirective } from "jslib-angular/directives/stop-prop.directive"; import { TrueFalseValueDirective } from "jslib-angular/directives/true-false-value.directive"; +import { ColorPasswordCountPipe } from "jslib-angular/pipes/color-password-count.pipe"; import { ColorPasswordPipe } from "jslib-angular/pipes/color-password.pipe"; import { I18nPipe } from "jslib-angular/pipes/i18n.pipe"; import { SearchCiphersPipe } from "jslib-angular/pipes/search-ciphers.pipe"; @@ -207,6 +208,7 @@ registerLocaleData(localeZhTw, "zh-TW"); CipherRowComponent, CiphersComponent, CollectionsComponent, + ColorPasswordCountPipe, ColorPasswordPipe, CurrentTabComponent, EnvironmentComponent, diff --git a/src/popup/scss/box.scss b/src/popup/scss/box.scss index c61167fac6..8fdf812390 100644 --- a/src/popup/scss/box.scss +++ b/src/popup/scss/box.scss @@ -120,6 +120,11 @@ } .action-buttons { + &.count { + align-self: start; + margin-top: 10px; + } + .row-btn { padding-left: 5px; padding-right: 5px; @@ -255,6 +260,7 @@ display: block; width: 100%; margin-bottom: 5px; + min-height: 1em; @include themify($themes) { color: themed("mutedColor"); @@ -305,6 +311,7 @@ .row-main { flex-grow: 1; min-width: 0; + align-self: start; } &.box-content-row-flex, @@ -455,6 +462,7 @@ .action-buttons { display: flex; + align-self: start; margin-left: 5px; .row-btn { diff --git a/src/popup/scss/misc.scss b/src/popup/scss/misc.scss index 88ec27f873..8752ad7088 100644 --- a/src/popup/scss/misc.scss +++ b/src/popup/scss/misc.scss @@ -164,6 +164,30 @@ p.lead { } } +.password-character { + display: inline-flex; + flex-direction: column; + align-items: center; + width: 30px; + height: 36px; + font-weight: 600; + + &:nth-child(odd) { + @include themify($themes) { + background-color: themed("backgroundColor"); + } + } +} + +.password-count { + white-space: nowrap; + font-size: 8px; + + @include themify($themes) { + color: themed("mutedColor") !important; + } +} + #duo-frame { background: url("../images/loading.svg") 0 0 no-repeat; width: 100%; diff --git a/src/popup/vault/view-custom-fields.component.html b/src/popup/vault/view-custom-fields.component.html index 8f61ef9f5e..01164e7d31 100644 --- a/src/popup/vault/view-custom-fields.component.html +++ b/src/popup/vault/view-custom-fields.component.html @@ -10,10 +10,14 @@ {{ field.value || " " }}
- {{ + {{ field.maskedValue }} + {{ field.value }} - {{ field.maskedValue }} +
@@ -33,6 +37,18 @@
+ +