diff --git a/src/popup/app.module.ts b/src/popup/app.module.ts index 4837f151f3..884ddcd88b 100644 --- a/src/popup/app.module.ts +++ b/src/popup/app.module.ts @@ -1,4 +1,5 @@ import { DragDropModule } from '@angular/cdk/drag-drop'; +import { ScrollingModule } from '@angular/cdk/scrolling'; import { ToasterModule } from 'angular2-toaster'; import { InfiniteScrollModule } from 'ngx-infinite-scroll'; @@ -172,6 +173,7 @@ registerLocaleData(localeZhTw, 'zh-TW'); ToasterModule.forRoot(), InfiniteScrollModule, DragDropModule, + ScrollingModule, ], declarations: [ A11yTitleDirective, diff --git a/src/popup/components/ciphers-list.component.html b/src/popup/components/ciphers-list.component.html index 6c8c4a407b..2d3e8d8641 100644 --- a/src/popup/components/ciphers-list.component.html +++ b/src/popup/components/ciphers-list.component.html @@ -1,23 +1,25 @@ - -
- -
- - {{c.name}} - - - {{'shared' | i18n}} - - - - {{'attachments' | i18n}} - - - {{c.subTitle}} + + +
+ +
+ + {{c.name}} + + + {{'shared' | i18n}} + + + + {{'attachments' | i18n}} + + + {{c.subTitle}} +
-
- - - + + + + diff --git a/src/popup/components/ciphers-list.component.ts b/src/popup/components/ciphers-list.component.ts index 4c1101826c..3696bfc056 100644 --- a/src/popup/components/ciphers-list.component.ts +++ b/src/popup/components/ciphers-list.component.ts @@ -34,4 +34,6 @@ export class CiphersListComponent { viewCipher(c: CipherView) { this.onView.emit(c); } + + async resetPaging() { } } diff --git a/src/popup/scss/misc.scss b/src/popup/scss/misc.scss index 1d12bba3c7..ae02ec6eab 100644 --- a/src/popup/scss/misc.scss +++ b/src/popup/scss/misc.scss @@ -356,3 +356,54 @@ select option { background-color: darken(themed('inputBackgroundColor'), +1); } } + +// TODO: this but better +cdk-virtual-scroll-viewport { + height: 500px; + width: 375px; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + overflow-y: auto !important; + overflow-x: hidden !important; + + &.flex { + display: flex; + flex-flow: column; + + &.tab-page { + height: calc(100% - 99px); + } + } +} + +// cribbed directly from base.scss +cdk-virtual-scroll-viewport::-webkit-scrollbar, cdk-virtual-scroll-viewport::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +cdk-virtual-scroll-viewport::-webkit-scrollbar-track, cdk-virtual-scroll-viewport::-webkit-scrollbar { + background-color: transparent; +} + +cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb, cdk-virtual-scroll-viewport::-webkit-scrollbar { + border-radius: 10px; + margin-right: 1px; + + @include themify($themes) { + background-color: themed('scrollbarColor'); + } + + &:hover { + @include themify($themes) { + background-color: themed('scrollbarHoverColor'); + } + } +} + +.cdk-virtual-scroll-content-wrapper { + width: 100%; +} diff --git a/src/popup/vault/ciphers.component.html b/src/popup/vault/ciphers.component.html index 3581afa21d..b61aef58e9 100644 --- a/src/popup/vault/ciphers.component.html +++ b/src/popup/vault/ciphers.component.html @@ -53,8 +53,8 @@
- -
+ +

{{'noItemsInList' | i18n}}

@@ -63,15 +63,13 @@
-
+
{{groupingTitle}} - {{isSearching() ? filteredCiphers.length : ciphers.length}} + {{isSearching() ? ciphers.length : ciphers.length}}
-