mirror of
https://github.com/bitwarden/browser
synced 2025-12-22 19:23:52 +00:00
[Feature] End User Vault Refresh (#2545)
* 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
GitHub
196
apps/desktop/src/scss/left-nav.scss
Normal file
196
apps/desktop/src/scss/left-nav.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user