martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 11:39:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

making carousel more mobile friendly

Browse Source
This commit is contained in:
Roland Osborne 2022-08-23 11:14:24 -07:00
parent b5f3ee2710
commit 994102f22d
5 changed files with 87 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
net/web/src/carousel/Carousel.jsx
View File

@ -120,43 +120,26 @@ export function Carousel({ ready, error, items, itemRenderer, itemRemove }) {
} }
} }
if (!ready || error) { return (
return ( <CarouselWrapper>
<CarouselWrapper> { error && (
<div class="carousel"> <div class="status">
{error && ( <FireOutlined style={{ fontSize: 32, color: '#ff8888' }} />
<div class="status">
<FireOutlined style={{ fontSize: 32, color: '#ff8888' }} />
</div>
)}
{!ready && !error && (
<div class="status">
<PictureOutlined style={{ fontSize: 32 }} />
</div>
)}
</div> </div>
<div class="arrows"> )}
<div class="arrow" onClick={onRight}><LeftOutlined style={{ visibility: 'hidden' }} /></div> { !ready && !error && (
<div class="arrow" onClick={onLeft}><RightOutlined style={{ visibility: 'hidden' }} /></div> <div class="status">
<PictureOutlined style={{ fontSize: 32 }} />
</div> </div>
</CarouselWrapper> )}
) { ready && !error && (
}
if (slots.length != 0) {
return (
<CarouselWrapper>
<div class="carousel" ref={onRefSet}> <div class="carousel" ref={onRefSet}>
{slots} {slots}
</div> </div>
<div class="arrows"> )}
<div class="arrow" onClick={onRight}><LeftOutlined style={{ visibility: scrollRight }} /></div> <div class="left-arrow" onClick={onRight}><LeftOutlined style={{ visibility: scrollRight }} /></div>
<div class="arrow" onClick={onLeft}><RightOutlined style={{ visibility: scrollLeft }} /></div> <div class="right-arrow" onClick={onLeft} style={{ visibility: scrollLeft }}><RightOutlined /></div>
</div> </CarouselWrapper>
</CarouselWrapper> );
);
}
return <></>
} }

50
net/web/src/carousel/Carousel.styled.js
View File

@ -1,4 +1,5 @@
import styled from 'styled-components'; import styled from 'styled-components';
import Colors from 'constants/Colors';
export const CarouselWrapper = styled.div` export const CarouselWrapper = styled.div`
position: relative; position: relative;
@ -10,7 +11,7 @@ export const CarouselWrapper = styled.div`
.carousel { .carousel {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding-left: 16px; padding-left: 32px;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
@ -33,22 +34,37 @@ export const CarouselWrapper = styled.div`
display: none; display: none;
} }
.arrows { .left-arrow {
height: 100%; top: calc(50% - 16px);
height: 32px;
display: flex; display: flex;
flex-direction: column; align-items: center;
position: absolute; position: absolute;
left: 0;
font-size: 24px;
width: 24px;
margin-left: 8px;
margin-right: 8px;
justify-content: center;
color: ${Colors.grey};
} }
.arrow { .right-arrow {
height: 50%; top: calc(50% - 16px);
background-color: #888888; height: 32px;
color: white;
font-size: 16px;
cursor: pointer;
display: flex; display: flex;
flex-direction: column; align-items: center;
position: absolute;
right: 0;
font-size: 24px;
width: 24px;
margin-left: 8px;
margin-right: 8px;
justify-content: center; justify-content: center;
color: ${Colors.text};
background-color: ${Colors.profileForm};
border-radius: 8px;
opacity: 0.7;
} }
.arrow:hover { .arrow:hover {
@ -67,13 +83,21 @@ export const CarouselWrapper = styled.div`
background-color: #888888; background-color: #888888;
color: white; color: white;
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
padding-left: 2px;
padding-right: 2px;
cursor: pointer; cursor: pointer;
border-top-right-radius: 8px;
border-bottom-left-radius: 4px;
opacity: 0.7;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
} }
.asset { .asset {
height: 128px; height: 128px;
border-radius: 8px;
overflow: hidden;
} }
.space { .space {

12
net/web/src/session/cardSelect/CardSelect.jsx
View File

@ -11,11 +11,13 @@ export function CardSelect({ filter, unknown, select, selected, markup }) {
return ( return (
<CardSelectWrapper> <CardSelectWrapper>
<List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.cards} gutter="0" { state.cards?.length > 0 && (
renderItem={item => ( <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.cards} gutter="0"
<SelectItem item={item} select={select} selected={selected} markup={markup} /> renderItem={item => (
)} <SelectItem item={item} select={select} selected={selected} markup={markup} />
/> )}
/>
)}
{ unknown > 0 && ( { unknown > 0 && (
<div class="unknown"> <div class="unknown">
<Logo img="avatar" width={32} height={32} radius={8} /> <Logo img="avatar" width={32} height={32} radius={8} />

39
net/web/src/session/conversation/addTopic/AddTopic.jsx
View File

@ -2,7 +2,7 @@ import { AddTopicWrapper } from './AddTopic.styled';
import { useAddTopic } from './useAddTopic.hook'; import { useAddTopic } from './useAddTopic.hook';
import { Input, Menu, Dropdown } from 'antd'; import { Input, Menu, Dropdown } from 'antd';
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import { FontColorsOutlined, FontSizeOutlined, PaperClipOutlined, SendOutlined } from '@ant-design/icons'; import { SoundOutlined, VideoCameraOutlined, PictureOutlined, FontColorsOutlined, FontSizeOutlined, PaperClipOutlined, SendOutlined } from '@ant-design/icons';
import { SketchPicker } from "react-color"; import { SketchPicker } from "react-color";
import { AudioFile } from './audioFile/AudioFile'; import { AudioFile } from './audioFile/AudioFile';
import { VideoFile } from './videoFile/VideoFile'; import { VideoFile } from './videoFile/VideoFile';
@ -72,38 +72,31 @@ export function AddTopic({ cardId, channelId }) {
</Menu> </Menu>
); );
const attacher = (
<Menu>
<Menu.Item key="0">
<input type='file' name="asset" accept="image/*" ref={attachImage} onChange={e => onSelectImage(e)} style={{display: 'none'}}/>
<div onClick={() => attachImage.current.click()}>Attach Image</div>
</Menu.Item>
<Menu.Item key="1">
<input type='file' name="asset" accept="audio/*" ref={attachAudio} onChange={e => onSelectAudio(e)} style={{display: 'none'}}/>
<div onClick={() => attachAudio.current.click()}>Attach Audio</div>
</Menu.Item>
<Menu.Item key="2">
<input type='file' name="asset" accept="video/*" ref={attachVideo} onChange={e => onSelectVideo(e)} style={{display: 'none'}}/>
<div onClick={() => attachVideo.current.click()}>Attach Video</div>
</Menu.Item>
</Menu>
);
return ( return (
<AddTopicWrapper> <AddTopicWrapper>
<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="video/*" ref={attachVideo} onChange={e => onSelectVideo(e)} style={{display: 'none'}}/>
<div class="carousel"> <div class="carousel">
<Carousel ready={true} items={state.assets} itemRenderer={renderItem} itemRemove={removeItem} /> { state.assets.length > 0 && (
<Carousel 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 }}
autocapitalize="none" enterkeyhint="send" onKeyDown={(e) => keyDown(e)} /> autocapitalize="none" enterkeyhint="send" onKeyDown={(e) => keyDown(e)} />
</div> </div>
<div class="buttons"> <div class="buttons">
<div class="button space"> <div class="button space" onClick={() => attachImage.current.click()}>
<Dropdown overlay={attacher} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="topLeft"> <PictureOutlined />
<PaperClipOutlined />
</Dropdown>
</div> </div>
<div class="button space" onClick={() => attachVideo.current.click()}>
<VideoCameraOutlined />
</div>
<div class="button space" onClick={() => attachAudio.current.click()}>
<SoundOutlined />
</div>
<div class="bar space" />
<div class="button space"> <div class="button space">
<Dropdown overlay={sizer} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="topLeft"> <Dropdown overlay={sizer} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="topLeft">
<FontSizeOutlined /> <FontSizeOutlined />

15
net/web/src/session/conversation/addTopic/AddTopic.styled.js
View File

@ -8,21 +8,28 @@ export const AddTopicWrapper = styled.div`
.message { .message {
width: 100%; width: 100%;
padding-left: 16px; padding-left: 32px;
padding-right: 16px; padding-right: 32px;
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
} }
.buttons { .buttons {
padding-left: 16px; padding-left: 32px;
padding-right: 16px; padding-right: 32px;
padding-bottom: 16px; padding-bottom: 16px;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
.bar {
border-left: 1px solid ${Colors.encircle};
height: 36px;
padding-right 8px;
margin-left: 8px;
}
.button { .button {
display: flex; display: flex;
flex-align: center; flex-align: center;