martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +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 (
<CarouselWrapper>
<div class="carousel">
{error && (
<div class="status">
<FireOutlined style={{ fontSize: 32, color: '#ff8888' }} />
</div>
)}
{!ready && !error && (
<div class="status">
<PictureOutlined style={{ fontSize: 32 }} />
</div>
)}
return (
<CarouselWrapper>
{ error && (
<div class="status">
<FireOutlined style={{ fontSize: 32, color: '#ff8888' }} />
</div>
<div class="arrows">
<div class="arrow" onClick={onRight}><LeftOutlined style={{ visibility: 'hidden' }} /></div>
<div class="arrow" onClick={onLeft}><RightOutlined style={{ visibility: 'hidden' }} /></div>
)}
{ !ready && !error && (
<div class="status">
<PictureOutlined style={{ fontSize: 32 }} />
</div>
</CarouselWrapper>
)
}
if (slots.length != 0) {
return (
<CarouselWrapper>
)}
{ ready && !error && (
<div class="carousel" ref={onRefSet}>
{slots}
</div>
<div class="arrows">
<div class="arrow" onClick={onRight}><LeftOutlined style={{ visibility: scrollRight }} /></div>
<div class="arrow" onClick={onLeft}><RightOutlined style={{ visibility: scrollLeft }} /></div>
</div>
</CarouselWrapper>
);
}
return <></>
)}
<div class="left-arrow" onClick={onRight}><LeftOutlined style={{ visibility: scrollRight }} /></div>
<div class="right-arrow" onClick={onLeft} style={{ visibility: scrollLeft }}><RightOutlined /></div>
</CarouselWrapper>
);
}

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

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

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

@ -11,11 +11,13 @@ export function CardSelect({ filter, unknown, select, selected, markup }) {
return (
<CardSelectWrapper>
<List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.cards} gutter="0"
renderItem={item => (
<SelectItem item={item} select={select} selected={selected} markup={markup} />
)}
/>
{ state.cards?.length > 0 && (
<List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.cards} gutter="0"
renderItem={item => (
<SelectItem item={item} select={select} selected={selected} markup={markup} />
)}
/>
)}
{ unknown > 0 && (
<div class="unknown">
<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 { Input, Menu, Dropdown } from 'antd';
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 { AudioFile } from './audioFile/AudioFile';
import { VideoFile } from './videoFile/VideoFile';
@ -72,38 +72,31 @@ export function AddTopic({ cardId, channelId }) {
</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 (
<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">
<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 class="message">
<Input.TextArea ref={msg} placeholder="New Message" spellCheck="true" autoSize={{ minRows: 2, maxRows: 6 }}
autocapitalize="none" enterkeyhint="send" onKeyDown={(e) => keyDown(e)} />
</div>
<div class="buttons">
<div class="button space">
<Dropdown overlay={attacher} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="topLeft">
<PaperClipOutlined />
</Dropdown>
<div class="button space" onClick={() => attachImage.current.click()}>
<PictureOutlined />
</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">
<Dropdown overlay={sizer} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="topLeft">
<FontSizeOutlined />

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

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