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

slide registry from right

Browse Source
This commit is contained in:
Roland Osborne 2024-02-18 20:34:46 -08:00
parent 24d73f7caa
commit 240be0db76
4 changed files with 12 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -210,7 +210,7 @@ export function Session() {
{ state.cards && ( { state.cards && (
<div class="reframe"> <div class="reframe">
<Cards closeCards={closeCards} openContact={actions.openContact} openChannel={openConversation} openListing={actions.openListing} /> <Cards closeCards={closeCards} openContact={actions.openContact} openChannel={openConversation} openListing={actions.openListing} />
<Drawer bodyStyle={{ padding: 0 }} placement="bottom" closable={false} visible={state.listing} <Drawer bodyStyle={{ padding: 0 }} visible={state.listing} closable={false}
onClose={actions.closeListing} getContainer={false} height={'100%'} onClose={actions.closeListing} getContainer={false} height={'100%'}
style={{ position: 'absolute', overflow: 'hidden' }}> style={{ position: 'absolute', overflow: 'hidden' }}>
<Listing closeListing={actions.closeListing} openContact={actions.openContact} /> <Listing closeListing={actions.closeListing} openContact={actions.openContact} />
@ -263,7 +263,7 @@ export function Session() {
{ state.cards && ( { state.cards && (
<Cards closeCards={closeCards} openContact={actions.openContact} openChannel={openConversation} openListing={actions.openListing} /> <Cards closeCards={closeCards} openContact={actions.openContact} openChannel={openConversation} openListing={actions.openListing} />
)} )}
<Drawer bodyStyle={{ padding: 0 }} placement="bottom" closable={false} visible={state.listing} <Drawer bodyStyle={{ padding: 0 }} visible={state.listing} closable={false}
onClose={actions.closeListing} getContainer={false} height={'100%'} onClose={actions.closeListing} getContainer={false} height={'100%'}
style={{ overflow: 'hidden', position: 'absolute' }}> style={{ overflow: 'hidden', position: 'absolute' }}>
<Listing closeListing={actions.closeListing} openContact={actions.openContact} /> <Listing closeListing={actions.closeListing} openContact={actions.openContact} />

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

@ -185,8 +185,8 @@ export const SessionWrapper = styled.div`
} }
.right { .right {
min-width: 256px; min-width: 256px;
max-width: 384px; max-width: 400px;
width: 20%; width: 24%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

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

@ -1,6 +1,6 @@
import { Input, Modal, List, Button } from 'antd'; import { Input, Modal, List, Button } from 'antd';
import { CardsWrapper } from './Cards.styled'; import { CardsWrapper } from './Cards.styled';
import { SortAscendingOutlined, UpOutlined, DoubleRightOutlined, UserOutlined, SearchOutlined } from '@ant-design/icons'; import { SortAscendingOutlined, UpOutlined, RightOutlined, UserOutlined, SearchOutlined } from '@ant-design/icons';
import { useCards } from './useCards.hook'; import { useCards } from './useCards.hook';
import { CardItem } from './cardItem/CardItem'; import { CardItem } from './cardItem/CardItem';
@ -56,15 +56,13 @@ export function Cards({ closeCards, openContact, openChannel, openListing }) {
<Input bordered={false} allowClear={true} placeholder="Contacts" prefix={<SearchOutlined />} <Input bordered={false} allowClear={true} placeholder="Contacts" prefix={<SearchOutlined />}
spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} /> spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
</div> </div>
{ state.display === 'small' && (
<div className="inline"> <div className="inline">
<Button type="primary" icon={<UserOutlined />} onClick={openListing}>Add</Button> <Button type="primary" icon={<UserOutlined />} onClick={openListing}>Add</Button>
</div> </div>
)}
{ state.display !== 'small' && ( { state.display !== 'small' && (
<div className="inline"> <div className="inline">
<div className="dismiss" onClick={closeCards} > <div className="dismiss" onClick={closeCards} >
<DoubleRightOutlined /> <RightOutlined />
</div> </div>
</div> </div>
)} )}
@ -82,14 +80,6 @@ export function Cards({ closeCards, openContact, openChannel, openListing }) {
<div className="empty">No Contacts</div> <div className="empty">No Contacts</div>
)} )}
</div> </div>
{ state.display !== 'small' && (
<div className="bar">
<div className="add" onClick={openListing}>
<UpOutlined />
<div className="label">Find New Contact</div>
</div>
</div>
)}
</CardsWrapper> </CardsWrapper>
); );
} }

4
net/web/src/session/listing/Listing.jsx
View File

@ -1,6 +1,6 @@
import { Modal, Button, Input, List } from 'antd'; import { Modal, Button, Input, List } from 'antd';
import { ListingWrapper } from './Listing.styled'; import { ListingWrapper } from './Listing.styled';
import { UserOutlined, FilterOutlined, DownOutlined, CloseOutlined, DatabaseOutlined, SearchOutlined } from '@ant-design/icons'; import { UserOutlined, FilterOutlined, RightOutlined, CloseOutlined, DatabaseOutlined, SearchOutlined } from '@ant-design/icons';
import { useListing } from './useListing.hook'; import { useListing } from './useListing.hook';
import { ListingItem } from './listingItem/ListingItem'; import { ListingItem } from './listingItem/ListingItem';
@ -56,7 +56,7 @@ export function Listing({ closeListing, openContact }) {
</div> </div>
<div class="inline"> <div class="inline">
{ state.display !== 'small' && ( { state.display !== 'small' && (
<Button type="text" icon={<DownOutlined />} onClick={closeListing}></Button> <Button type="text" icon={<RightOutlined />} onClick={closeListing}></Button>
)} )}
{ state.display === 'small' && ( { state.display === 'small' && (
<Button type="text" icon={<CloseOutlined />} onClick={closeListing}></Button> <Button type="text" icon={<CloseOutlined />} onClick={closeListing}></Button>