martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-11 19:19: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 && (
<div class="reframe">
<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%'}
style={{ position: 'absolute', overflow: 'hidden' }}>
<Listing closeListing={actions.closeListing} openContact={actions.openContact} />
@ -263,7 +263,7 @@ export function Session() {
{ state.cards && (
<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%'}
style={{ overflow: 'hidden', position: 'absolute' }}>
<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 {
min-width: 256px;
max-width: 384px;
width: 20%;
max-width: 400px;
width: 24%;
height: 100%;
display: flex;
flex-direction: column;

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

@ -1,6 +1,6 @@
import { Input, Modal, List, Button } from 'antd';
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 { CardItem } from './cardItem/CardItem';
@ -56,15 +56,13 @@ export function Cards({ closeCards, openContact, openChannel, openListing }) {
<Input bordered={false} allowClear={true} placeholder="Contacts" prefix={<SearchOutlined />}
spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
</div>
{ state.display === 'small' && (
<div className="inline">
<Button type="primary" icon={<UserOutlined />} onClick={openListing}>Add</Button>
</div>
)}
<div className="inline">
<Button type="primary" icon={<UserOutlined />} onClick={openListing}>Add</Button>
</div>
{ state.display !== 'small' && (
<div className="inline">
<div className="dismiss" onClick={closeCards} >
<DoubleRightOutlined />
<RightOutlined />
</div>
</div>
)}
@ -82,15 +80,7 @@ export function Cards({ closeCards, openContact, openChannel, openListing }) {
<div className="empty">No Contacts</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 { 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 { ListingItem } from './listingItem/ListingItem';
@ -56,7 +56,7 @@ export function Listing({ closeListing, openContact }) {
</div>
<div class="inline">
{ state.display !== 'small' && (
<Button type="text" icon={<DownOutlined />} onClick={closeListing}></Button>
<Button type="text" icon={<RightOutlined />} onClick={closeListing}></Button>
)}
{ state.display === 'small' && (
<Button type="text" icon={<CloseOutlined />} onClick={closeListing}></Button>