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

[Feature] End User Vault Refresh (#2545)

Browse Source 
* Initial org filter work

* update jslib

* Move filter to below cipher length check

* don't show vault filter in personal or org folder

* Use family icon for families org

* jslib and auth guard updates

* lint fixes

* rename GroupingsComponent to VaultFilterComponent

* fix no folder showing all items

* Add checks for PersonalOwnership policy

* update css class names

* lint fixes

* cleanup

* Some final cleanup

* import order lint fix

* remove unused import

* Use smaller icon for chevron

* Update src/popup/vault/organization-filter.component.ts

Co-authored-by: Addison Beck <addisonbeck1@gmail.com>

* Update src/popup/vault/organization-filter.component.ts

Co-authored-by: Addison Beck <addisonbeck1@gmail.com>

* fix lint error

* remove extra localizations

* rename orgFilter -> vaultSelect

* Rename orgFilterService to VaultSelectService

* lint fixes

* combine vault select service with vault filter service

* Use base vault filter service methods

* Use VaultFilter model and other small fixes

* lint fixes

* Final restructuring pass

* Update jslib and remove extra function

* Remove extra imports

* remove space

* Remove vaultFilterService from background services

* Update jslib to latest on feature branch

* merge fix

* update jslib

* [feat] Implement EUVR for desktop

Should contain only https://github.com/bitwarden/desktop/pull/1487, with merge resolutions and style fixes

* [fix] Delete unused GroupingsComponentTemplate

* [dep] Update jslib

Co-authored-by: Addison Beck <addisonbeck1@gmail.com>
This commit is contained in:
Robyn MacCallum
2022-05-09 08:19:18 -04:00
committed by GitHub
parent fd434dfed8
commit 8c12ba20cb
51 changed files with 1654 additions and 910 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/desktop/src/scss/buttons.scss
View File

@@ -168,3 +168,12 @@
}
}
}
button.no-btn {
@extend a;
background: transparent;
border: none;
@include themify($themes) {
color: themed("textColor");
}
}

196
apps/desktop/src/scss/left-nav.scss Normal file
View File

@@ -0,0 +1,196 @@
.left-nav {
order: 1;
display: flex;
flex-direction: column;
width: 22%;
min-width: 175px;
max-width: 250px;
border-right: 1px solid #000000;
flex-grow: 1;
justify-content: space-between;
@include themify($themes) {
background-color: themed("backgroundColorAlt");
border-right-color: themed("borderColor");
}
}
.vault-filters {
user-select: none;
scrollbar-gutter: stable;
padding: 10px 15px;
overflow-x: hidden;
overflow-y: auto;
height: 100%;
.filter {
hr {
margin: 1em 0 1em 0;
@include themify($themes) {
border-color: themed("hrColor");
}
}
}
}
.filter-heading {
display: flex;
text-transform: uppercase;
font-weight: normal;
margin-bottom: 5px;
align-items: center;
padding-top: 5px;
padding-bottom: 5px;
h2 {
@include themify($themes) {
color: themed("headingColor");
}
font-size: $font-size-base;
}
button {
@extend .no-btn;
text-transform: uppercase;
@include themify($themes) {
color: themed("headingButtonColor");
}
&:hover,
&:focus {
@include themify($themes) {
color: themed("headingButtonHoverColor");
}
}
}
button.add-button {
margin-left: auto;
margin-right: 5px;
}
&.active {
.filter-button {
h2 {
@include themify($themes) {
color: themed("primaryColor");
}
}
}
}
.filter-button {
&:hover {
h2 {
@include themify($themes) {
color: themed("primaryColor");
}
}
}
}
}
.filter-options {
word-break: break-all;
padding: 0;
list-style: none;
width: 100%;
margin: 0 0 15px 0;
.nested-filter-options {
list-style: none;
margin-bottom: 0px;
padding-left: 0.85em;
}
}
.filter-option {
top: 8px;
width: 100%;
@include themify($themes) {
color: themed("textColor");
}
&.active {
> .filter-buttons {
.filter-button {
@include themify($themes) {
color: themed("primaryColor");
font-weight: bold;
}
}
.edit-button {
visibility: visible;
}
}
}
}
.filter-buttons {
padding: 5px 0;
display: flex;
align-items: center;
width: 100%;
&:hover,
&:focus {
.filter-button {
@include themify($themes) {
color: themed("primaryColor");
}
}
}
button {
@extend .no-btn;
}
.edit-button,
.toggle-button {
@include themify($themes) {
color: themed("headingButtonColor");
}
&:hover,
&:focus {
@include themify($themes) {
color: themed("headingButtonHoverColor");
}
}
}
.edit-button {
visibility: hidden;
margin-left: auto;
margin-right: 5px;
}
}
.nav {
height: 55px;
width: 100%;
display: flex;
.btn {
width: 100%;
font-size: $font-size-base * 0.8;
flex: 1;
border: 0;
border-radius: 0;
padding-bottom: 4px;
&:not(.active) {
@include themify($themes) {
background-color: themed("backgroundColorAlt");
}
}
i {
font-size: $font-size-base * 1.5;
display: block;
margin-bottom: 2px;
text-align: center;
}
}
}

10
apps/desktop/src/scss/loading.scss Normal file
View File

@@ -0,0 +1,10 @@
.container {
&.loading-spinner {
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
}

2
apps/desktop/src/scss/styles.scss
View File

@@ -14,4 +14,6 @@
@import "plugins.scss";
@import "environment.scss";
@import "header.scss";
@import "left-nav.scss";
@import "loading.scss";
@import "../../jslib/angular/src/scss/icons.scss";

3
apps/desktop/src/scss/variables.scss
View File

@@ -93,6 +93,7 @@ $themes: (
accountSwitcherBackgroundColor: $background-color,
accountSwitcherTextColor: #ffffff,
svgSuffix: "-light.svg",
hrColor: #eeeeee,
),
dark: (
textColor: #ffffff,
@@ -146,6 +147,7 @@ $themes: (
accountSwitcherBackgroundColor: #2f2f2f,
accountSwitcherTextColor: #ffffff,
svgSuffix: "-dark.svg",
hrColor: #a3a3a3,
),
nord: (
textColor: $nord5,
@@ -199,6 +201,7 @@ $themes: (
accountSwitcherBackgroundColor: $nord0,
accountSwitcherTextColor: $nord5,
svgSuffix: "-dark.svg",
hrColor: $nord4,
),
);

299
apps/desktop/src/scss/vault.scss
View File

@@ -15,7 +15,6 @@ app-root {
height: 100%;
display: flex;
> .groupings,
> .items,
> .details,
> .logo {
@@ -29,275 +28,6 @@ app-root {
> .items {
order: 2;
}
> .details {
order: 3;
}
> .logo {
order: 4;
}
> .groupings {
order: 1;
width: 22%;
min-width: 175px;
max-width: 600px;
border-right: 1px solid #000000;
@include themify($themes) {
background-color: themed("backgroundColorAlt");
border-right-color: themed("borderColor");
}
.content {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
.footer {
padding: 0;
}
.inner-content {
padding-bottom: 0;
padding-right: 5px;
user-select: none;
> ul,
> div > ul {
margin: 0 0 15px 0;
}
}
}
h2 {
text-transform: uppercase;
font-size: $font-size-base;
font-weight: normal;
margin-bottom: 5px;
@include themify($themes) {
color: themed("headingColor");
}
}
.heading {
display: flex;
button {
margin-left: auto;
background: none;
border: none;
@include themify($themes) {
color: themed("headingButtonColor");
}
&:hover,
&:focus {
cursor: pointer;
@include themify($themes) {
color: themed("headingButtonHoverColor");
}
}
}
}
ul:not(.bwi-ul) {
li {
margin: 0;
padding: 0;
list-style: none;
}
}
ul.bwi-ul {
li {
word-break: break-all;
.bwi-li {
top: 8px;
width: 1.1em;
}
}
}
// Nested indentions
ul.bwi-ul {
// Level 1
li {
> button {
padding-left: 12px;
}
.bwi-li {
left: -4px;
}
&.active > button .bwi-li {
left: 11px;
}
}
// Level 2
ul li {
> button {
padding-left: 23px;
}
.bwi-li {
left: 7px;
}
&.active > button .bwi-li {
left: 22px;
}
}
// Level 3
ul ul li {
> button {
padding-left: 34px;
}
.bwi-li {
left: 18px;
}
&.active > button .bwi-li {
left: 33px;
}
}
// Level 4
ul ul ul li {
> button {
padding-left: 45px;
}
.bwi-li {
left: 29px;
}
&.active > button .bwi-li {
left: 44px;
}
}
// Level 5
ul ul ul ul li {
> button {
padding-left: 56px;
}
.bwi-li {
left: 40px;
}
&.active > button .bwi-li {
left: 55px;
}
}
// Level 6
ul ul ul ul ul li {
> button {
padding-left: 67px;
}
.bwi-li {
left: 51px;
}
&.active > button .bwi-li {
left: 66px;
}
}
// Level 7
ul ul ul ul ul ul li {
> button {
padding-left: 78px;
}
.bwi-li {
left: 62px;
}
&.active > button .bwi-li {
left: 77px;
}
}
}
ul {
padding: 0;
margin: 0;
li {
button {
padding: 5px 0;
display: flex;
align-items: center;
width: 100%;
@include themify($themes) {
color: themed("textColor");
}
span {
visibility: hidden;
margin-left: auto;
@include themify($themes) {
color: themed("headingButtonColor");
}
&:hover,
&:focus {
@include themify($themes) {
color: themed("headingButtonHoverColor");
}
}
}
&:hover,
&:focus {
span {
visibility: visible;
}
}
}
&.active {
margin-left: -15px;
margin-right: -5px;
padding-left: 15px;
padding-right: 5px;
@include themify($themes) {
background-color: themed("groupingsActiveColor");
}
ul {
@include themify($themes) {
background-color: themed("backgroundColorAlt");
}
margin-left: -15px;
margin-right: -5px;
padding-left: 15px;
padding-right: 5px;
}
}
}
}
}
> .items {
width: 28%;
min-width: 200px;
max-width: 350px;
@@ -336,6 +66,7 @@ app-root {
> .details {
flex: 1;
min-width: 0;
order: 3;
@include themify($themes) {
background-color: themed("backgroundColorAlt2");
@@ -378,6 +109,7 @@ app-root {
> .logo {
flex: 1;
min-width: 0;
order: 3;
.content {
overflow-y: hidden;
@@ -429,31 +161,4 @@ app-root {
display: flex;
}
}
.nav {
height: 100%;
width: 100%;
display: flex;
.btn {
width: 100%;
font-size: $font-size-base * 0.8;
flex: 1;
border: 0;
border-radius: 0;
padding-bottom: 4px;
&:not(.active) {
@include themify($themes) {
background-color: themed("backgroundColorAlt");
}
}
i {
font-size: $font-size-base * 1.5;
display: block;
margin-bottom: 2px;
text-align: center;
}
}
}
}