bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-20 10:13:31 +00:00
Code Issues Releases Wiki Activity

[EC-474] Add hidden char count toggle to web and desktop (#3262)

Browse Source 
* feat-web: add hidden char count toggle

* Added toggle char count for desktop

* Use Tailwind and Component Library, add i18n

* Hide char count when password is hidden

* Initial proposal

* Update colors per design spec for all clients

Also make variable names consistent across clients

* Remove unused scss

* Add styling

* Set fixed with for password count elements

* Add separate wrapped stories

* Fix alignment of first char when wrapped

* Minor refactors

* Make naming consistent

* Add Figma url

* add barrel files

* Use CL component

* Fix template

* Remove duplicate style

* Use ColorPasswordComponent in web, remove old pipe

Also remove styling and move pipe out of jslib-module given that
it's no longer shared by all Angular clients

* Run prettier

* Remove unused scss vars

* Undo unnecessary changes

* Remove unnecessary changes

* Fix styling

* Fix selector

* Collect show password event

* Fix incorrect background in dark mode

* Fix linting

* Use color password for password history

* Add char count to hidden custom fields in desktop

* Fix char count background in web: take 2

* Update service name

* Add missing label toggleCharacterCount for desktop

Co-authored-by: Daniel James Smith <djsmith@web.de>
Co-authored-by: Thomas Rittson <trittson@bitwarden.com>
This commit is contained in:
Melanie Kanavakatini
2022-12-20 12:31:18 +00:00
committed by GitHub
parent 87f2908e3e
commit 35b33335fb
23 changed files with 163 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
apps/desktop/src/scss/misc.scss
View File

@@ -215,8 +215,8 @@ p.lead {
}
}
.generated-wrapper {
word-break: break-all;
.password-wrapper {
overflow-wrap: break-word;
white-space: pre-wrap;
min-width: 0;
}
@@ -233,6 +233,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("backgroundColorAlt2");
}
}
}
.password-count {
white-space: nowrap;
font-size: 8px;
@include themify($themes) {
color: themed("passwordCountText") !important;
}
}
#duo-frame {
background: url("../images/loading.svg") 0 0 no-repeat;
height: 330px;