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

adding contact menu

Browse Source
This commit is contained in:
Roland Osborne 2022-08-12 11:48:55 -07:00
parent 77156fadda
commit 22f3cc1612
11 changed files with 78 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
net/web/src/constants/Colors.js
View File

@ -1,7 +1,8 @@
const Colors = {
background: '#8fbea7',
primary: '#448866',
formBackground: '#f4f4f4',
formBackground: '#f2f2f2',
formFocus: '#f8f8f8',
formHover: '#e8e8e8',
grey: '#888888',
white: '#ffffff',

10
net/web/src/session/Session.jsx
View File

@ -35,7 +35,7 @@ export function Session() {
{ (viewport.state.display === 'xlarge') && (
<div class="desktop-layout noselect">
<div class="left">
<Identity />
<Identity openCards={actions.openCards} />
<div class="bottom">
<Channels />
</div>
@ -75,7 +75,7 @@ export function Session() {
{ (viewport.state.display === 'large' || viewport.state.display === 'medium') && (
<div class="tablet-layout noselect">
<div class="left">
<Identity />
<Identity openCards={actions.openCards} />
<div class="bottom">
<Channels />
</div>
@ -87,16 +87,16 @@ export function Session() {
<Conversation cardId={state.cardId} conversationId={state.conversationId} />
</div>
)}
<Drawer width={'33%'} closable={false} onClose={actions.closeDetails} visible={state.details} zIndex={10}>
<Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={actions.closeDetails} visible={state.details} zIndex={10}>
{ state.details && (
<Details cardId={state.cardId} conversationId={state.conversationId} />
)}
</Drawer>
<Drawer width={'33%'} closable={false} onClose={actions.closeCards} visible={state.cards} zIndex={20}>
<Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={actions.closeCards} visible={state.cards} zIndex={20}>
{ state.cards && (
<Cards />
)}
<Drawer width={'33%'} closable={false} onClose={actions.closeContact} visible={state.contact} zIndex={30}>
<Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={actions.closeContact} visible={state.contact} zIndex={30}>
{ state.contact && (
<Contact guid={state.contactGuid} />
)}

8
net/web/src/session/Session.styled.js
View File

@ -68,9 +68,13 @@ export const SessionWrapper = styled.div`
height: calc(100% - 64px);
}
}
.center {
.right {
flex-grow: 1;
position: relative;
.drawer {
padding: 0px;
}
}
}
@ -87,7 +91,7 @@ export const SessionWrapper = styled.div`
.bottom {
height: 48px;
position: relative;
box-shadow: 0px -8px 16px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
}
}
`;

4
net/web/src/session/bottomNav/BottomNav.styled.js
View File

@ -8,7 +8,7 @@ export const BottomNavWrapper = styled.div`
flex-direction: row;
align-items: center;
justify-content: center;
background-color: ${Colors.formBackground};
background-color: ${Colors.primary};
.nav-item {
width: 33%;
@ -27,7 +27,7 @@ export const BottomNavWrapper = styled.div`
.nav-active {
width: 100%;
height: 100%;
color: ${Colors.enabled};
color: ${Colors.formFocus};
padding-top: 8px;
padding-bottom: 8px;
font-size: 24px;

26
net/web/src/session/cards/Cards.jsx
View File

@ -1,4 +1,28 @@
import { Input, List } from 'antd';
import { CardsWrapper } from './Cards.styled';
import { SearchOutlined } from '@ant-design/icons';
import { useCards } from './useCards.hook';
import { CardItem } from './cardItem/CardItem';
export function Cards() {
return <div>CARDS</div>
const { state, actions } = useCards();
return (
<CardsWrapper>
<div class="view">
<div class="search">
<div class="filter">
<Input bordered={false} allowClear={true} placeholder="Contacts" prefix={<SearchOutlined />}
size="large" spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
</div>
</div>
<List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.cards} gutter="0"
renderItem={item => (
<CardItem item={item} />
)} />
</div>
</CardsWrapper>
);
}

3
net/web/src/session/cards/cardItem/CardItem.jsx Normal file
View File

@ -0,0 +1,3 @@
export function CardItem() {
return <div>CARD ITEM</div>
}

29
net/web/src/session/cards/useCards.hook.js Normal file
View File

@ -0,0 +1,29 @@
import { useContext, useState, useEffect } from 'react';
import { CardContext } from 'context/CardContext';
export function useCards() {
const [filter, setFilter] = useState(null);
const [state, setState] = useState({
cards: [],
busy: false }
);
const card = useContext(CardContext);
const updateState = (value) => {
setState((s) => ({ ...s, ...value }));
}
const actions = {
onFilter: (value) => {
setFilter(value.toUpperCase());
},
};
useEffect(() => {
}, [card]);
return { state, actions };
}

2
net/web/src/session/channels/Channels.styled.js
View File

@ -6,7 +6,7 @@ export const ChannelsWrapper = styled.div`
width: 100%;
display: flex;
flex-direction: column;
background-color: ${Colors.formBackground};
background-color: ${Colors.formFocus};
.view {
min-height: 0;

4
net/web/src/session/channels/addTopic/AddTopic.jsx
View File

@ -12,12 +12,12 @@ export function AddTopic() {
<div class="bar">
<div class="add">
<CommentOutlined />
<div class="label">New Topic</div>
<div class="label">New Channel</div>
</div>
</div>
)}
{ state.mode === 'button' && (
<div class="button">New Topic</div>
<div class="button">New Channel</div>
)}
</AddTopicWrapper>
);

1
net/web/src/session/channels/addTopic/AddTopic.styled.js
View File

@ -2,6 +2,7 @@ import styled from 'styled-components';
import Colors from 'constants/Colors';
export const AddTopicWrapper = styled.div`
background-color: ${Colors.formBackground};
.button {
position: absolute;

4
net/web/src/session/identity/Identity.jsx
View File

@ -4,7 +4,7 @@ import { IdentityWrapper } from './Identity.styled';
import { useIdentity } from './useIdentity.hook';
import { ExclamationCircleOutlined, DownOutlined } from '@ant-design/icons';
export function Identity() {
export function Identity({ openCards }) {
const { state, actions } = useIdentity();
@ -14,7 +14,7 @@ export function Identity() {
<div>Edit Profile</div>
</Menu.Item>
<Menu.Item key="1">
<div>Change Login</div>
<div onClick={openCards} >Manage Contacts</div>
</Menu.Item>
<Menu.Item key="2">
<div onClick={actions.logout}>Logout</div>