Skip to content

Commit

Permalink
Example app stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@arnautov-anton
arnautov-anton committed May 15, 2024
1 parent e0e38d1 commit 80b61ef
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 103 deletions.
6 changes: 6 additions & 0 deletions examples/vite/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import React from 'react';
import { ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
import {
Channel,
Expand All @@ -9,6 +10,8 @@ import {
Thread,
Window,
useCreateChatClient,
Threads,
ThreadList,
} from 'stream-chat-react';
import 'stream-chat-react/css/v2/index.css';

Expand Down Expand Up @@ -65,6 +68,9 @@ const App = () => {
</Window>
<Thread />
</Channel>
<Threads>
<ThreadList />
</Threads>
</Chat>
);
};
Expand Down
226 changes: 132 additions & 94 deletions examples/vite/src/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,124 +12,162 @@ body,
height: 100%;
}

$stream-chat-theme-version: '2';
#root {
display: flex;
height: 100%;

@if $stream-chat-theme-version == '2' {
#root {
display: flex;
.str-chat__thread-list {
width: 50%;
height: 100%;
}

.str-chat-channel-list {
position: fixed;
z-index: 1;
width: 0;
.str-chat__thread-list-item {
all: unset;
box-sizing: border-box;
padding-block: 14px;
padding-inline: 8px;
gap: 6px;
width: 100%;
display: flex;
flex-direction: column;
cursor: pointer;
}

&--open {
width: 100%;
}
.str-chat__thread-list-item__channel {
font-size: 14px;
font-weight: 400;
}

.str-chat__thread-list-item__parent-message {
font-size: 12px;
font-weight: 400;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.str-chat__thread-list-item__latest-reply-container {
display: flex;
align-items: center;
gap: 5px;
}

.str-chat__thread-list-item__latest-reply-details {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: 4px;
width: 0;
}

.str-chat__thread-list-item__latest-reply-created-by {
font-weight: 500;
font-size: 16px;
}

.str-chat__thread-list-item__latest-reply-text {
display: flex;
font-size: 14px;
font-weight: 400;
justify-content: space-between;

& > div:first-child {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.str-chat-channel {
width: 100%;
& > div:last-child {
white-space: nowrap;
}
}

.str-chat__thread {
.str-chat-channel-list {
position: fixed;
z-index: 1;
width: 0;

&--open {
width: 100%;
height: 100%;
position: fixed;
z-index: 1;
}
}

.str-chat__channel-header .str-chat__header-hamburger {
width: 30px;
height: 38px;
padding: var(--xxs-p);
margin-right: var(--xs-m);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
background: transparent;

&:hover {
svg path {
fill: var(--primary-color);
}
}
}
.str-chat-channel {
width: 100%;
}

@media screen and (min-width: 768px) {
//.str-chat-channel-list.thread-open {
// &.menu-open {
// width: 30%;
// height: 100%;
// position: fixed;
// z-index: 1;
// }
//
// &.menu-close {
// width: 0;
// }
//
// & + .channel .menu-button {
// display: block;
// }
//}

.str-chat-channel-list {
width: 30%;
max-width: 420px;
position: initial;
z-index: 0;
}
.str-chat__thread {
width: 100%;
height: 100%;
position: fixed;
z-index: 1;
}

.str-chat__thread {
position: initial;
z-index: 0;
.str-chat__channel-header .str-chat__header-hamburger {
width: 30px;
height: 38px;
padding: var(--xxs-p);
margin-right: var(--xs-m);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
background: transparent;

&:hover {
svg path {
fill: var(--primary-color);
}
}
}

@media screen and (min-width: 1024px) {
//.str-chat-channel-list {
// max-width: 420px;
// position: initial;
// z-index: 0;
//}

.str-chat__thread {
width: 45%;
//position: initial;
//z-index: 0;
}
@media screen and (min-width: 768px) {
//.str-chat-channel-list.thread-open {
// &.menu-open {
// width: 30%;
// height: 100%;
// position: fixed;
// z-index: 1;
// }
//
// &.menu-close {
// width: 0;
// }
//
// & + .channel .menu-button {
// display: block;
// }
//}

.str-chat__channel-header .str-chat__header-hamburger {
display: none;
}
.str-chat-channel-list {
width: 30%;
max-width: 420px;
position: initial;
z-index: 0;
}
}
} @else {
.menu-button {
display: none;
}
.str-chat-channel-list {
max-height: 100vh;
overflow-y: auto;

.str-chat__channel-list-messenger {
flex: 1;
.str-chat__thread {
position: initial;
z-index: 0;
}
}

.str-chat__thread {
min-width: 100%;
max-width: 100%;
}
@media screen and (min-width: 1024px) {
//.str-chat-channel-list {
// max-width: 420px;
// position: initial;
// z-index: 0;
//}

@media only screen and (min-device-width: 768px) {
.str-chat__thread {
min-width: 35%;
max-width: 35%;
width: 45%;
//position: initial;
//z-index: 0;
}

.str-chat__channel-header .str-chat__header-hamburger {
display: none;
}
}
}
14 changes: 5 additions & 9 deletions examples/vite/src/main.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.scss'
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.scss';

ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

0 comments on commit 80b61ef

Please sign in to comment.