mirror of
https://github.com/balzack/databag.git
synced 2025-02-12 03:29:16 +00:00
aligning virutal list
This commit is contained in:
parent
0032e03897
commit
53de020d74
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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 {
|
||||||
|
@ -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)}
|
||||||
|
@ -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;
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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");
|
||||||
|
|
||||||
|
@ -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;
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
|
Loading…
Reference in New Issue
Block a user