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

updating channel component

Browse Source
This commit is contained in:
Roland Osborne 2024-02-15 23:40:23 -08:00
parent a6970986d1
commit 19f01c57c5
8 changed files with 89 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,7 +41,9 @@ export const LightTheme = {
headerArea: '#f2f2f2',
footerArea: '#f2f2f2',
itemArea: '#f8f8f8',
inputArea: '#ffffff',
hoverArea: '#efefef',
noticeArea: '#8fbea7',
selectedArea: '#e8e8e8',
enabledArea: '#448866',
disabledArea: '#cccccc',
@ -53,16 +55,19 @@ export const LightTheme = {
linkText: '#448866',
labelText: '#888888',
alertText: '#ff8888',
itemLine: '#eeeeee',
sectionLine: '#dddddd',
headerLine: '#aaaaaa',
itemBorder: '#eeeeee',
inputBorder: '#888888',
sectionBorder: '#dddddd',
headerBorder: '#aaaaaa',
};
export const DarkTheme = {
headerArea: '#111111',
footerArea: '#111111',
itemArea: '#222222',
inputArea: '#000000',
hoverArea: '#2f2f2f',
noticeArea: '#8fbea7',
selectedArea: '#333333',
enabledArea: '#448866',
disabledArea: '#888888',
@ -74,8 +79,9 @@ export const DarkTheme = {
linkText: '#448866',
labelText: '#dddddd',
alertText: '#ff8888',
itemLine: '#555555',
sectionLine: '#777777',
headerLine: '#aaaaaa',
itemBorder: '#555555',
inputBorder: '#aaaaaa',
sectionBorder: '#777777',
headerBorder: '#aaaaaa',
};

10
net/web/src/constants/Strings.js
View File

@ -9,6 +9,11 @@ export const en = {
allDevices: 'Logout of all devices',
ok: 'OK',
cancel: 'Cancel',
newMessage: 'New Message',
topics: 'Topics',
unsetSealing: 'Unset Sealing Key',
newTopic: 'New Topic',
};
export const fr = {
@ -22,5 +27,10 @@ export const fr = {
allDevices: 'Déconnexion de tous les appareils',
ok: 'OK',
cancel: 'Annuler',
newMessage: 'Nouveau Message',
topics: 'Sujets',
unsetSealing: 'Clé de sécurité non définie',
newTopic: 'Nouveau Sujet',
};

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

@ -16,38 +16,38 @@ export function Channels({ open, active }) {
return (
<ChannelsWrapper>
<div class="search">
<div class="filter">
<Input bordered={false} allowClear={true} placeholder="Topics" prefix={<SearchOutlined />}
<div className="search">
<div className="filter">
<Input className="filterControl" bordered={false} allowClear={true} placeholder={state.strings.topics} prefix={<SearchOutlined />}
spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
</div>
{ state.display === 'small' && (
<div class="inline">
<div className="inline">
<Button type="primary" disabled={!state.allowAdd} icon={<CommentOutlined />} onClick={actions.setShowAdd}>New</Button>
</div>
)}
</div>
<div class="view">
<div className="view">
{ state.channels.length > 0 && (
<List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.channels} gutter="0"
renderItem={item => (
<ChannelItem item={item} openChannel={open}
<ChannelItem item={item} openChannel={open} tip={state.strings.newMessage}
active={active.card === item.cardId && active.channel === item.channelId} />
)}
/>
)}
{ state.channels.length === 0 && (
<div class="empty">No Topics</div>
<div className="empty">No Topics</div>
)}
</div>
{ state.display !== 'small' && (
<div class="bar">
<Tooltip placement="right" title={ state.allowAdd ? '' : 'Account Sealing Key Required' }>
<Button type="primary" disabled={!state.allowAdd} icon={<CommentOutlined />} onClick={actions.setShowAdd}>New Topic</Button>
<div className="bar">
<Tooltip placement="right" title={ state.allowAdd ? '' : state.strings.unsetSealing }>
<Button className={state.allowAdd ? 'addEnabled' : 'addDisabled'} type="primary" disabled={!state.allowAdd} icon={<CommentOutlined />} onClick={actions.setShowAdd}>{state.strings.newTopic}</Button>
</Tooltip>
</div>
)}
<Modal bodyStyle={{ padding: 16 }} title="New Topic" centered visible={state.showAdd && state.allowAdd} footer={null} destroyOnClose={true}
<Modal bodyStyle={{ padding: 16 }} title={state.strings.newTopic} centered visible={state.showAdd && state.allowAdd} footer={null} destroyOnClose={true}
onCancel={actions.clearShowAdd}>
<AddChannel added={added} cancelled={actions.clearShowAdd} />
</Modal>

52
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.formFocus};
background-color: ${props => props.theme.itemArea};
.view {
min-height: 0;
@ -18,7 +18,7 @@ export const ChannelsWrapper = styled.div`
align-items: center;
justify-content: center;
font-style: italic;
color: ${Colors.grey};
color: ${props => props.theme.hintText};
height: 100%;
}
}
@ -28,16 +28,30 @@ export const ChannelsWrapper = styled.div`
padding-bottom: 8px;
padding-left: 16px;
padding-right: 16px;
border-bottom: 1px solid ${Colors.divider};
border-bottom: 1px solid ${props => props.theme.sectionBorder};
display: flex;
flex-direction: row;
height: 48px;
.filter {
border: 1px solid ${Colors.divider};
background-color: ${Colors.white};
.filter {
border: 1px solid ${props => props.theme.sectionBorder};
background-color: ${props => props.theme.inputArea};
border-radius: 8px;
flex-grow: 1;
.filterControl {
color: ${props => props.theme.mainText};
input {
padding-left: 4px;
color: ${props => props.theme.mainText};
}
input::placeholder {
color: ${props => props.theme.placeholderText};
}
}
}
.inline {
@ -60,18 +74,34 @@ export const ChannelsWrapper = styled.div`
flex-direction: row;
align-items: center;
justify-content: center;
background-color: ${Colors.formBackground};
border-top: 1px solid ${Colors.divider};
background-color: ${props => props.theme.headerArea};
border-top: 1px solid ${props => props.theme.sectionBorder};
padding-bottom: 10px;
padding-top: 10px;
position: relative;
}
.add {
.addDisabled {
background-color: ${props => props.theme.disabledArea};
button {
color: ${props => props.theme.idleText};
}
}
.addEnabled {
background-color: ${props => props.theme.enabledArea};
button {
color: ${props => props.theme.activeText};
}
}
.adding {
display: flex;
flex-direction: row;
background-color: ${Colors.primary};
color: ${Colors.white};
background-color: ${props => props.theme.enabledArea};
color: ${props => props.theme.activeText};
align-items: center;
justify-content: center;
padding-left: 16px;

4
net/web/src/session/channels/channelItem/ChannelItem.jsx
View File

@ -3,7 +3,7 @@ import { ChannelItemWrapper, Markup } from './ChannelItem.styled';
import { Logo } from 'logo/Logo';
import { UnlockOutlined, LockFilled } from '@ant-design/icons';
export function ChannelItem({ item, openChannel, active }) {
export function ChannelItem({ item, openChannel, active, tip }) {
return (
<ChannelItemWrapper onClick={() => openChannel(item.channelId, item.cardId)}>
@ -25,7 +25,7 @@ export function ChannelItem({ item, openChannel, active }) {
<div class="message">{ item.message }</div>
</div>
{ item.updatedFlag && (
<Tooltip placement="topRight" title="New Message">
<Tooltip placement="topRight" title={tip}>
<Markup />
</Tooltip>
)}

13
net/web/src/session/channels/channelItem/ChannelItem.styled.js
View File

@ -6,17 +6,18 @@ export const ChannelItemWrapper = styled.div`
width: 100%;
display: flex;
align-items: center;
border-bottom: 1px solid ${Colors.itemDivider};
border-bottom: 1px solid ${props => props.theme.itemBorder};
color: ${props => props.theme.mainText};
line-height: 16px;
cursor: pointer;
overflow: hidden;
&:hover {
background-color: ${Colors.formHover};
background-color: ${props => props.theme.hoverArea};
}
.active {
background-color: ${Colors.profileForm};
background-color: ${props => props.theme.selectedArea};
width: 100%;
height: 100%;
display: flex;
@ -48,7 +49,7 @@ export const ChannelItemWrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
border: 1px solid ${Colors.grey};
border: 1px solid ${props => props.theme.itemBorder};
width: 32px;
height: 32px;
border-radius: 4px;
@ -74,7 +75,7 @@ export const ChannelItemWrapper = styled.div`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: ${Colors.disabled};
color: ${props => props.theme.hintText};
}
}
}
@ -84,7 +85,7 @@ export const Markup = styled.div`
position: absolute;
right: 0;
border-radius: 8px;
background-color: ${Colors.background};
background-color: ${props => props.theme.noticeArea};
width: 8px;
height: 8px;
margin-right: 8px;

6
net/web/src/session/channels/useChannels.hook.js
View File

@ -17,6 +17,7 @@ export function useChannels() {
channels: [],
showAdd: false,
allowAdd: false,
strings: {},
});
const profile = useContext(ProfileContext);
@ -264,8 +265,9 @@ export function useChannels() {
}, [account.state, store.state, card.state, channel.state, filter]);
useEffect(() => {
updateState({ display: settings.state.display });
}, [settings]);
const { display, strings } = settings.state;
updateState({ display, strings });
}, [settings.state]);
const actions = {
onFilter: (value) => {

4
net/web/src/session/identity/Identity.styled.js
View File

@ -9,7 +9,7 @@ export const IdentityWrapper = styled.div`
padding-left: 16px;
padding-right: 16px;
background-color: ${props => props.theme.headerArea};
border-bottom: 1px solid ${props => props.theme.sectionLine};
border-bottom: 1px solid ${props => props.theme.sectionBorder};
color: ${props => props.theme.mainText};
flex-shrink: 0;
@ -26,7 +26,7 @@ export const IdentityWrapper = styled.div`
padding-left: 4px;
padding-right: 4px;
border-radius: 8px;
border: 1px solid ${props => props.theme.sectionLine};
border: 2px solid ${props => props.theme.sectionBorder};
color: ${props => props.theme.mainText};
}