Skip to content

Commit 57c509f

Browse files
authored
feat(angular): paginated list component (#310)
### 🎯 Goal This PR only affects the Angular SDK. As part of reactions-v2 I created two, lightweight (in terms of CSS) components: - Paginated list - User list This PR contains the CSS for those. ### 🛠 Implementation details _Provide a description of the implementation_ ### 🎨 UI Changes _Add relevant screenshots_ Make sure to test with both Angular and React (with both `MessageList` and `VirtualizedMessageList` components) SDKs
1 parent b11d0a4 commit 57c509f

1 file changed

Lines changed: 31 additions & 0 deletions

File tree

src/v2/styles/_base.scss

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,34 @@ stream-icon-placeholder {
2828
justify-content: center;
2929
align-items: center;
3030
}
31+
32+
.stream-chat__paginated-list {
33+
display: flex;
34+
flex-direction: column;
35+
height: 100%;
36+
overflow-x: hidden;
37+
overflow-y: scroll;
38+
max-height: 100%;
39+
min-height: 0;
40+
gap: var(--str-chat__spacing-2);
41+
42+
.str-chat__loading-indicator {
43+
margin: auto;
44+
}
45+
}
46+
47+
stream-paginated-list {
48+
height: 100%;
49+
max-height: 100%;
50+
}
51+
52+
stream-user-list {
53+
height: 100%;
54+
max-height: 100%;
55+
56+
.str-chat__user-list-item {
57+
display: flex;
58+
align-items: center;
59+
gap: var(--str-chat__spacing-2);
60+
}
61+
}

0 commit comments

Comments
 (0)