aligning virutal list

This commit is contained in:
Roland Osborne 2022-08-23 15:13:34 -07:00
parent 0032e03897
commit 53de020d74
8 changed files with 90 additions and 80 deletions

View File

@ -4,8 +4,9 @@ import { CarouselWrapper } from './Carousel.styled';
import { RightOutlined, LeftOutlined, CloseOutlined, PictureOutlined, FireOutlined } from '@ant-design/icons'; import { RightOutlined, LeftOutlined, CloseOutlined, PictureOutlined, FireOutlined } from '@ant-design/icons';
import ReactResizeDetector from 'react-resize-detector'; import ReactResizeDetector from 'react-resize-detector';
export function Carousel({ ready, error, items, itemRenderer, itemRemove }) { export function Carousel({ pad, ready, error, items, itemRenderer, itemRemove }) {
const [slots, setSlots] = useState([]); const [slots, setSlots] = useState([]);
const [padClass, setPadClass] = useState('');
const [carouselRef, setCarouselRef] = useState(false); const [carouselRef, setCarouselRef] = useState(false);
const [itemIndex, setItemIndex] = useState(0); const [itemIndex, setItemIndex] = useState(0);
const [scrollLeft, setScrollLeft] = useState('hidden'); const [scrollLeft, setScrollLeft] = useState('hidden');
@ -133,11 +134,11 @@ export function Carousel({ ready, error, items, itemRenderer, itemRemove }) {
</div> </div>
)} )}
{ ready && !error && ( { ready && !error && (
<div class="carousel" ref={onRefSet}> <div class="carousel" style={{ paddingLeft: pad + 32 }} ref={onRefSet}>
{slots} {slots}
</div> </div>
)} )}
<div class="left-arrow" onClick={onRight}><LeftOutlined style={{ visibility: scrollRight }} /></div> <div class="left-arrow" onClick={onRight} style={{ marginLeft: pad, visibility: scrollRight }}><LeftOutlined /></div>
<div class="right-arrow" onClick={onLeft} style={{ visibility: scrollLeft }}><RightOutlined /></div> <div class="right-arrow" onClick={onLeft} style={{ visibility: scrollLeft }}><RightOutlined /></div>
</CarouselWrapper> </CarouselWrapper>
); );

View File

@ -6,7 +6,6 @@ export const CarouselWrapper = styled.div`
display: grid; display: grid;
width: 100%; width: 100%;
height: 128px; height: 128px;
margin-top: 16px;
.carousel { .carousel {
display: flex; display: flex;
@ -46,7 +45,10 @@ export const CarouselWrapper = styled.div`
margin-left: 8px; margin-left: 8px;
margin-right: 8px; margin-right: 8px;
justify-content: center; justify-content: center;
color: ${Colors.grey}; color: ${Colors.text};
background-color: ${Colors.profileForm};
border-radius: 8px;
opacity: 0.7;
} }
.right-arrow { .right-arrow {

View File

@ -91,11 +91,11 @@ export function AddTopic({ cardId, channelId }) {
<input type='file' name="asset" accept="image/*" ref={attachImage} onChange={e => onSelectImage(e)} style={{display: 'none'}}/> <input type='file' name="asset" accept="image/*" ref={attachImage} onChange={e => onSelectImage(e)} style={{display: 'none'}}/>
<input type='file' name="asset" accept="audio/*" ref={attachAudio} onChange={e => onSelectAudio(e)} style={{display: 'none'}}/> <input type='file' name="asset" accept="audio/*" ref={attachAudio} onChange={e => onSelectAudio(e)} style={{display: 'none'}}/>
<input type='file' name="asset" accept="video/*" ref={attachVideo} onChange={e => onSelectVideo(e)} style={{display: 'none'}}/> <input type='file' name="asset" accept="video/*" ref={attachVideo} onChange={e => onSelectVideo(e)} style={{display: 'none'}}/>
<div class="carousel"> { state.assets.length > 0 && (
{ state.assets.length > 0 && ( <div class="assets">
<Carousel ready={true} items={state.assets} itemRenderer={renderItem} itemRemove={removeItem} /> <Carousel pad={0} ready={true} items={state.assets} itemRenderer={renderItem} itemRemove={removeItem} />
)} </div>
</div> )}
<div class="message"> <div class="message">
<Input.TextArea ref={msg} placeholder="New Message" spellCheck="true" autoSize={{ minRows: 2, maxRows: 6 }} <Input.TextArea ref={msg} placeholder="New Message" spellCheck="true" autoSize={{ minRows: 2, maxRows: 6 }}
enterkeyhint="send" onKeyDown={(e) => keyDown(e)} onChange={(e) => actions.setMessageText(e.target.value)} enterkeyhint="send" onKeyDown={(e) => keyDown(e)} onChange={(e) => actions.setMessageText(e.target.value)}

View File

@ -14,6 +14,10 @@ export const AddTopicWrapper = styled.div`
padding-bottom: 8px; padding-bottom: 8px;
} }
.assets {
padding-top: 8px;
}
.buttons { .buttons {
padding-left: 32px; padding-left: 32px;
padding-right: 32px; padding-right: 32px;

View File

@ -100,7 +100,7 @@ export function TopicItem({ host, topic }) {
return ( return (
<TopicItemWrapper> <TopicItemWrapper>
<div class="avatar"> <div class="avatar">
<Logo width={32} height={32} radius={4} imageUrl={state.imageUrl} /> <Logo width={32} height={32} radius={4} url={state.imageUrl} />
</div> </div>
<div class="topic"> <div class="topic">
<div class="info"> <div class="info">
@ -118,23 +118,25 @@ export function TopicItem({ host, topic }) {
return ( return (
<TopicItemWrapper> <TopicItemWrapper>
<div class="avatar"> <div class="topic-header">
<Logo width={32} height={32} radius={4} imageUrl={state.imageUrl} /> <div class="avatar">
</div> <Logo width={32} height={32} radius={4} url={state.imageUrl} />
<div class="topic"> </div>
<div class="info"> <div class="info">
<div class={nameClass}>{ name }</div> <div class={nameClass}>{ name }</div>
<div>{ getTime(offset) }</div> <div>{ getTime(offset) }</div>
</div> </div>
{ state.assets.length > 0 && ( </div>
<Carousel ready={state.ready} error={state.error} items={state.assets} itemRenderer={renderAsset} /> { state.assets.length > 0 && (
)} <div class="topic-assets">
<div class="message"> <Carousel pad={40} ready={state.ready} error={state.error} items={state.assets} itemRenderer={renderAsset} />
<Message />
</div>
<div class="options">
<Options />
</div> </div>
)}
<div class="message">
<Message />
</div>
<div class="options">
<Options />
</div> </div>
</TopicItemWrapper> </TopicItemWrapper>
) )

View File

@ -2,52 +2,28 @@ import styled from 'styled-components';
export const TopicItemWrapper = styled.div` export const TopicItemWrapper = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: column;
width: 100%; width: 100%;
padding-left: 8px;
.avatar {
height: 32px;
width: 32px;
}
.topic { .topic-header {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
padding-left: 8px; margin-left: 16px;
flex-grow: 1; padding-left: 16px;
margin-right: 16px;
padding-top: 8px;
border-top: 1px solid #dddddd;
&:hover .options { .avatar {
visibility: visible; height: 32px;
width: 32px;
} }
.options {
position: absolute;
top: 0;
right: 0;
visibility: hidden;
.buttons {
display: flex;
flex-direction: row;
border-radius: 4px;
background-color: #eeeeee;
border: 1px solid #555555;
margin-top: 2px;
.button {
font-size: 14px;
margin-left: 8px;
margin-right: 8px;
cursor: pointer;
}
}
}
.info { .info {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
line-height: 1; line-height: 1;
padding-left: 8px;
.comments { .comments {
padding-left: 8px; padding-left: 8px;
@ -72,26 +48,54 @@ export const TopicItemWrapper = styled.div`
padding-right: 8px; padding-right: 8px;
} }
} }
}
.message { .options {
padding-top: 6px; position: absolute;
padding-right: 16px; top: 0;
white-space: pre-line; right: 0;
visibility: hidden;
.editing { .buttons {
display: flex;
flex-direction: row;
border-radius: 4px;
background-color: #eeeeee;
border: 1px solid #555555;
margin-top: 2px;
.button {
font-size: 14px;
margin-left: 8px;
margin-right: 8px;
cursor: pointer;
}
}
}
.topic-assets {
padding-top: 4px;
}
.message {
padding-right: 16px;
padding-left: 72px;
white-space: pre-line;
min-height: 4px;
.editing {
display: flex;
flex-direction: column;
border-radius: 4px;
border: 1px solid #aaaaaa;
width: 100%;
.controls {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
border-radius: 4px; justify-content: flex-end;
border: 1px solid #aaaaaa; padding-bottom: 8px;
width: 100%; padding-right: 8px;
.controls {
display: flex;
flex-direction: row;
justify-content: flex-end;
padding-bottom: 8px;
padding-right: 8px;
}
} }
} }
} }

View File

@ -9,7 +9,7 @@ export function VirtualList({ id, items, itemRenderer, onMore }) {
const OVERSCAN = 1024; // add slots in overscan of view const OVERSCAN = 1024; // add slots in overscan of view
const DEFAULT_ITEM_HEIGHT = 256; const DEFAULT_ITEM_HEIGHT = 256;
const DEFAULT_LIST_HEIGHT = 4096; const DEFAULT_LIST_HEIGHT = 4096;
const GUTTER = 6; const GUTTER = 1;
const [ msg, setMsg ] = useState("YO"); const [ msg, setMsg ] = useState("YO");

View File

@ -28,7 +28,4 @@ export const VirtualItem = styled.div`
position: absolute; position: absolute;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
&:hover {
background-color: #f0f5e0;
}
`; `;