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

fixing search bar in channel and card list

Browse Source
This commit is contained in:
Roland Osborne 2022-08-14 22:19:23 -07:00
parent 5fe01cada4
commit e6de43a977
4 changed files with 112 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,38 +10,38 @@ export function Cards({ close }) {
return (
<CardsWrapper>
<div class="view">
<div class="search">
{ !state.sorted && (
<div class="unsorted" onClick={() => actions.setSort(true)}>
<SortAscendingOutlined />
</div>
)}
{ state.sorted && (
<div class="sorted" onClick={() => actions.setSort(false)}>
<SortAscendingOutlined />
</div>
)}
<div class="filter">
<Input bordered={false} allowClear={true} placeholder="Contacts" prefix={<SearchOutlined />}
size="large" spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
<div class="search">
{ !state.sorted && (
<div class="unsorted" onClick={() => actions.setSort(true)}>
<SortAscendingOutlined />
</div>
{ state.display === 'small' && (
<div class="inline">
<div class="add">
<UserOutlined />
<div class="label">New</div>
</div>
</div>
)}
{ state.display !== 'small' && (
<div class="inline">
<div class="dismiss" onClick={close} >
<RightOutlined />
</div>
</div>
)}
)}
{ state.sorted && (
<div class="sorted" onClick={() => actions.setSort(false)}>
<SortAscendingOutlined />
</div>
)}
<div class="filter">
<Input bordered={false} allowClear={true} placeholder="Contacts" prefix={<SearchOutlined />}
size="large" spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
</div>
{ state.display === 'small' && (
<div class="inline">
<div class="add">
<UserOutlined />
<div class="label">New</div>
</div>
</div>
)}
{ state.display !== 'small' && (
<div class="inline">
<div class="dismiss" onClick={close} >
<RightOutlined />
</div>
</div>
)}
</div>
<div class="view">
<List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.cards} gutter="0"
renderItem={item => (
<CardItem item={item} />

92
net/web/src/session/cards/Cards.styled.js
View File

@ -12,55 +12,55 @@ export const CardsWrapper = styled.div`
min-height: 0;
overflow: scroll;
flex-grow: 1;
.search {
padding: 16px;
border-bottom: 1px solid ${Colors.divider};
}
.search {
padding: 12px;
border-bottom: 1px solid ${Colors.divider};
display: flex;
flex-direction: row;
.sorted {
color: ${Colors.enabled};
font-size: 18px;
padding-right: 8px;
display: flex;
align-items: center;
cursor: pointer;
}
.unsorted {
color: ${Colors.disabled};
font-size: 18px;
padding-right: 8px;
display: flex;
align-items: center;
cursor: pointer;
}
.filter {
border: 1px solid ${Colors.divider};
background-color: ${Colors.white};
border-radius: 8px;
flex-grow: 1;
}
.inline {
padding-left: 8px;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
flex-direction: row;
align-items: center;
justify-content: center;
}
.sorted {
color: ${Colors.enabled};
font-size: 18px;
padding-right: 8px;
display: flex;
align-items: center;
cursor: pointer;
}
.unsorted {
color: ${Colors.disabled};
font-size: 18px;
padding-right: 8px;
display: flex;
align-items: center;
cursor: pointer;
}
.filter {
border: 1px solid ${Colors.divider};
background-color: ${Colors.white};
border-radius: 8px;
flex-grow: 1;
}
.inline {
padding-left: 8px;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
flex-direction: row;
align-items: center;
justify-content: center;
}
.dismiss {
font-size: 18px;
color: ${Colors.text};
cursor: pointer;
}
.dismiss {
font-size: 18px;
color: ${Colors.text};
cursor: pointer;
}
}

28
net/web/src/session/channels/Channels.jsx
View File

@ -10,21 +10,21 @@ export function Channels() {
return (
<ChannelsWrapper>
<div class="view">
<div class="search">
<div class="filter">
<Input bordered={false} allowClear={true} placeholder="Channels" prefix={<SearchOutlined />}
size="large" spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
</div>
{ state.display === 'small' && (
<div class="inline">
<div class="add">
<CommentOutlined />
<div class="label">New</div>
</div>
</div>
)}
<div class="search">
<div class="filter">
<Input bordered={false} allowClear={true} placeholder="Channels" prefix={<SearchOutlined />}
size="large" spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
</div>
{ state.display === 'small' && (
<div class="inline">
<div class="add">
<CommentOutlined />
<div class="label">New</div>
</div>
</div>
)}
</div>
<div class="view">
<List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.channels} gutter="0"
renderItem={item => (
<ChannelItem item={item} />

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

@ -12,30 +12,30 @@ export const ChannelsWrapper = styled.div`
min-height: 0;
overflow: scroll;
flex-grow: 1;
.search {
padding: 16px;
border-bottom: 1px solid ${Colors.divider};
}
.search {
padding: 12px;
border-bottom: 1px solid ${Colors.divider};
display: flex;
flex-direction: row;
.filter {
border: 1px solid ${Colors.divider};
background-color: ${Colors.white};
border-radius: 8px;
flex-grow: 1;
}
.inline {
padding-left: 8px;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
flex-direction: row;
.filter {
border: 1px solid ${Colors.divider};
background-color: ${Colors.white};
border-radius: 8px;
flex-grow: 1;
}
.inline {
padding-left: 8px;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
flex-direction: row;
align-items: center;
justify-content: center;
}
align-items: center;
justify-content: center;
}
}