martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 20:49:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

preparing add topic buttons

Browse Source
This commit is contained in:
Roland Osborne 2022-08-22 15:15:27 -07:00
parent cdaf4e03d1
commit d21bbaf349
2 changed files with 54 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,21 +1,53 @@
import { AddTopicWrapper } from './AddTopic.styled'; import { AddTopicWrapper } from './AddTopic.styled';
import { useAddTopic } from './useAddTopic.hook'; import { useAddTopic } from './useAddTopic.hook';
import { Input } 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 { FontColorsOutlined, FontSizeOutlined, PaperClipOutlined, SendOutlined } from '@ant-design/icons';
import { SketchPicker } from "react-color";
export function AddTopic() { export function AddTopic() {
const [hint, setHint] = useState("send"); const { state, actions } = useAddTopic();
const msg = useRef();
const msg = useRef();
const keyDown = (e) => { const keyDown = (e) => {
if (e.key === 'Enter' && !e.shiftKey) { if (e.key === 'Enter' && !e.shiftKey) {
msg.current.blur(); msg.current.blur();
console.log("SEND");
} }
} }
const picker = (
<Menu style={{ backgroundColor: 'unset', boxShadow: 'unset' }}>
<SketchPicker disableAlpha={true}
color={state.textColor}
onChange={(color) => {
actions.setTextColor(color.hex);
}} />
</Menu>
);
const sizer = (
<Menu>
<Menu.Item key={8}><div onClick={() => actions.setTextSize(8)}>Small</div></Menu.Item>
<Menu.Item key={14}><div onClick={() => actions.setTextSize(14)}>Medium</div></Menu.Item>
<Menu.Item key={20}><div onClick={() => actions.setTextSize(20)}>Large</div></Menu.Item>
</Menu>
);
const attacher = (
<Menu>
<Menu.Item key="0">
<div>Add Image</div>
</Menu.Item>
<Menu.Item key="1">
<div>Add Video</div>
</Menu.Item>
<Menu.Item key="2">
<div>Add Audio</div>
</Menu.Item>
</Menu>
);
return ( return (
<AddTopicWrapper> <AddTopicWrapper>
<div class="carousel"></div> <div class="carousel"></div>
@ -24,9 +56,21 @@ export function AddTopic() {
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"><PaperClipOutlined /></div> <div class="button space">
<div class="button space"><FontSizeOutlined /></div> <Dropdown overlay={attacher} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="topLeft">
<div class="button space"><FontColorsOutlined /></div> <PaperClipOutlined />
</Dropdown>
</div>
<div class="button space">
<Dropdown overlay={sizer} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="topLeft">
<FontSizeOutlined />
</Dropdown>
</div>
<div class="button space">
<Dropdown overlay={picker} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="topLeft">
<FontColorsOutlined />
</Dropdown>
</div>
<div class="end"> <div class="end">
<div class="button"><SendOutlined /></div> <div class="button"><SendOutlined /></div>
</div> </div>

3
net/web/src/session/conversation/addTopic/useAddTopic.hook.js
View File

@ -9,6 +9,9 @@ export function useAddTopic() {
}; };
const actions = { const actions = {
setTextColor: (textColor) => {
updateState({ textColor });
},
}; };
return { state, actions }; return { state, actions };