Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-03-02 03:41:09 +01:00
Code Issues Projects Releases Wiki Activity

browser - modify styling to remove scrolling glitch in virtual list (#4316)

Browse Source
This commit is contained in:
Patrick Demers 2023-01-06 15:11:34 -06:00 committed by GitHub
parent 36c1665ec5
commit 574c18ba3f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 52 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
apps/browser/src/popup/components/cipher-row.component.html
View File

@ -1,49 +1,51 @@
<div <div
role="group" role="group"
appA11yTitle="{{ cipher.name }}" appA11yTitle="{{ cipher.name }}"
class="box-content-row box-content-row-flex virtual-scroll-item" class="virtual-scroll-item"
[ngClass]="{ 'override-last': !last }" [ngClass]="{ 'override-last': !last }"
> >
<button <div class="box-content-row box-content-row-flex">
type="button" <button
(click)="selectCipher(cipher)" type="button"
(dblclick)="launchCipher(cipher)" (click)="selectCipher(cipher)"
appStopClick (dblclick)="launchCipher(cipher)"
title="{{ title }} - {{ cipher.name }}" appStopClick
class="row-main" title="{{ title }} - {{ cipher.name }}"
> class="row-main"
<app-vault-icon [cipher]="cipher"></app-vault-icon> >
<div class="row-main-content"> <app-vault-icon [cipher]="cipher"></app-vault-icon>
<span class="text"> <div class="row-main-content">
<span class="truncate-box"> <span class="text">
<span class="truncate">{{ cipher.name }}</span> <span class="truncate-box">
<ng-container *ngIf="cipher.organizationId"> <span class="truncate">{{ cipher.name }}</span>
<i <ng-container *ngIf="cipher.organizationId">
class="bwi bwi-collection text-muted" <i
title="{{ 'shared' | i18n }}" class="bwi bwi-collection text-muted"
aria-hidden="true" title="{{ 'shared' | i18n }}"
></i> aria-hidden="true"
<span class="sr-only">{{ "shared" | i18n }}</span> ></i>
</ng-container> <span class="sr-only">{{ "shared" | i18n }}</span>
<ng-container *ngIf="cipher.hasAttachments"> </ng-container>
<i <ng-container *ngIf="cipher.hasAttachments">
class="bwi bwi-paperclip text-muted" <i
title="{{ 'attachments' | i18n }}" class="bwi bwi-paperclip text-muted"
aria-hidden="true" title="{{ 'attachments' | i18n }}"
></i> aria-hidden="true"
<span class="sr-only">{{ "attachments" | i18n }}</span> ></i>
</ng-container> <span class="sr-only">{{ "attachments" | i18n }}</span>
</ng-container>
</span>
</span> </span>
</span> <span class="detail">{{ cipher.subTitle }}</span>
<span class="detail">{{ cipher.subTitle }}</span> </div>
</div> </button>
</button> <app-action-buttons
<app-action-buttons [cipher]="cipher"
[cipher]="cipher" [showView]="showView"
[showView]="showView" (onView)="viewCipher(cipher)"
(onView)="viewCipher(cipher)" (launchEvent)="launchCipher(cipher)"
(launchEvent)="launchCipher(cipher)" class="action-buttons"
class="action-buttons" >
> </app-action-buttons>
</app-action-buttons> </div>
</div> </div>

9
apps/browser/src/popup/scss/box.scss
View File

@ -115,11 +115,14 @@
&.list { &.list {
margin: 10px 0 20px 0; margin: 10px 0 20px 0;
.box-content { .box-content {
.virtual-scroll-item {
display: inline-block;
width: 100%;
}
.box-content-row { .box-content-row {
padding: 5px 10px;
text-decoration: none; text-decoration: none;
border-radius: $border-radius; border-radius: $border-radius;
margin: 5px;
// background-color: $background-color; // background-color: $background-color;
@include themify($themes) { @include themify($themes) {
@ -230,7 +233,7 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
border-radius: $border-radius; border-radius: $border-radius;
margin: 8px 5px; margin: 3px 5px;
@include themify($themes) { @include themify($themes) {
background-color: themed("boxBackgroundColor"); background-color: themed("boxBackgroundColor");

2
apps/browser/src/popup/vault/vault-filter.component.html
View File

@ -200,7 +200,7 @@
<p>{{ "noItemsInList" | i18n }}</p> <p>{{ "noItemsInList" | i18n }}</p>
</div> </div>
<cdk-virtual-scroll-viewport <cdk-virtual-scroll-viewport
itemSize="46" itemSize="55"
minBufferPx="400" minBufferPx="400"
maxBufferPx="600" maxBufferPx="600"
*ngIf="ciphers && ciphers.length > 0" *ngIf="ciphers && ciphers.length > 0"

2
apps/browser/src/popup/vault/vault-items.component.html
View File

@ -93,7 +93,7 @@
</div> </div>
</div> </div>
<cdk-virtual-scroll-viewport <cdk-virtual-scroll-viewport
itemSize="46" itemSize="55"
minBufferPx="400" minBufferPx="400"
maxBufferPx="600" maxBufferPx="600"
*ngIf="ciphers.length" *ngIf="ciphers.length"