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

styling add topic modal

Browse Source
This commit is contained in:
Roland Osborne 2024-02-16 16:26:17 -08:00
parent 19f01c57c5
commit 310c6bbb2b
11 changed files with 79 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,9 +38,10 @@ export const Colors = {
};
export const LightTheme = {
headerArea: '#f2f2f2',
footerArea: '#f2f2f2',
itemArea: '#f8f8f8',
headerArea: '#f0f0f0',
footerArea: '#f0f0f0',
modalArea: '#eeeeee',
itemArea: '#f4f4f4',
inputArea: '#ffffff',
hoverArea: '#efefef',
noticeArea: '#8fbea7',
@ -64,6 +65,7 @@ export const LightTheme = {
export const DarkTheme = {
headerArea: '#111111',
footerArea: '#111111',
modalArea: '#444444',
itemArea: '#222222',
inputArea: '#000000',
hoverArea: '#2f2f2f',

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

@ -13,7 +13,13 @@ export const en = {
newMessage: 'New Message',
topics: 'Topics',
unsetSealing: 'Unset Sealing Key',
newTopic: 'New Topic',
newTopic: 'New Topic',
noConnected: 'No Connected Contacts',
subjectOptional: 'Subject (optional)',
members: 'Members',
sealedTopic: 'Sealed Topic',
start: 'Start',
};
export const fr = {
@ -32,5 +38,11 @@ export const fr = {
topics: 'Sujets',
unsetSealing: 'Clé de sécurité non définie',
newTopic: 'Nouveau Sujet',
noConnected: 'Pas de Contacts Connecter',
subjectOptional: 'Sujet (optionnel)',
members: 'Membres',
sealedTopic: 'Sujet Sécurisé',
start: 'Commencer',
};

16
net/web/src/context/useSettingsContext.hook.js
View File

@ -48,17 +48,17 @@ export function useSettingsContext() {
const scheme = localStorage.getItem('color_scheme');
if (scheme === 'dark') {
updateState({ theme: scheme, colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.headerArea, color: DarkTheme.mainText } });
updateState({ theme: scheme, colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.modalArea, color: DarkTheme.mainText } });
}
else if (scheme === 'light') {
updateState({ theme: scheme, colors: LightTheme, menuStyle: { backgroundColor: LightTheme.headerArea, color: LightTheme.mainText } })
updateState({ theme: scheme, colors: LightTheme, menuStyle: { backgroundColor: LightTheme.modalArea, color: LightTheme.mainText } })
}
else {
if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
updateState({ theme: null, colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.headerArea, color: DarkTheme.mainText } });
updateState({ theme: null, colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.modalArea, color: DarkTheme.mainText } });
}
else {
updateState({ theme: null, colors: LightTheme, menuStyle: { backgroundColor: LightTheme.headerArea, color: LightTheme.mainText } });
updateState({ theme: null, colors: LightTheme, menuStyle: { backgroundColor: LightTheme.modalArea, color: LightTheme.mainText } });
}
}
@ -80,19 +80,19 @@ export function useSettingsContext() {
const actions = {
setDarkTheme: () => {
localStorage.setItem('color_scheme', 'dark');
updateState({ theme: 'dark', colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.headerArea, color: DarkTheme.mainText } });
updateState({ theme: 'dark', colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.modalArea, color: DarkTheme.mainText } });
},
setLightTheme : () => {
localStorage.setItem('color_scheme', 'light');
updateState({ theme: 'light', colors: LightTheme, menuStyle: { backgroundColor: LightTheme.headerArea, color: LightTheme.mainText } });
updateState({ theme: 'light', colors: LightTheme, menuStyle: { backgroundColor: LightTheme.modalArea, color: LightTheme.mainText } });
},
setDefaultTheme: () => {
localStorage.clearItem('color_scheme');
if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
updateState({ theme: null, colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.headerArea, color: DarkTheme.mainText } });
updateState({ theme: null, colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.modalArea, color: DarkTheme.mainText } });
}
else {
updateState({ theme: null, colors: LightTheme, menuStyle: { backgroundColor: LightTheme.headerArea, color: LightTheme.mainText } });
updateState({ theme: null, colors: LightTheme, menuStyle: { backgroundColor: LightTheme.modalArea, color: LightTheme.mainText } });
}
},
setLanguage: (code: string) => {

5
net/web/src/session/cardSelect/selectItem/SelectItem.styled.js
View File

@ -2,6 +2,8 @@ import styled from 'styled-components';
import { Colors } from 'constants/Colors';
export const SelectItemWrapper = styled.div`
color: ${props => props.theme.mainText};
.active {
cursor: pointer;
height: 48px;
@ -12,7 +14,7 @@ export const SelectItemWrapper = styled.div`
align-items: center;
&:hover {
background-color: ${Colors.selectHover};
background-color: ${props => props.theme.hoverArea};
}
}
@ -45,6 +47,7 @@ export const SelectItemWrapper = styled.div`
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
color: ${props => props.theme.hintText};
}
}

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

@ -47,8 +47,7 @@ export function Channels({ open, active }) {
</Tooltip>
</div>
)}
<Modal bodyStyle={{ padding: 16 }} title={state.strings.newTopic} centered visible={state.showAdd && state.allowAdd} footer={null} destroyOnClose={true}
onCancel={actions.clearShowAdd}>
<Modal bodyStyle={{ padding: 16, ...state.menuStyle }} closable={false} centered visible={state.showAdd && state.allowAdd} footer={null} destroyOnClose={true} onCancel={actions.clearShowAdd}>
<AddChannel added={added} cancelled={actions.clearShowAdd} />
</Modal>
</ChannelsWrapper>

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

@ -50,7 +50,6 @@ export const ChannelsWrapper = styled.div`
input::placeholder {
color: ${props => props.theme.placeholderText};
}
}
}

24
net/web/src/session/channels/addChannel/AddChannel.jsx
View File

@ -26,35 +26,37 @@ export function AddChannel({ added, cancelled }) {
return (
<AddChannelWrapper>
{ modalContext }
<Input placeholder="Subject (optional)" spellCheck="false" autocapitalize="word"
value={state.subject} onChange={(e) => actions.setSubject(e.target.value)} />
<div class="members">
<span>Channel Members: </span>
<div className="subject">
<Input placeholder={state.strings.subjectOptional} spellCheck="false" autocapitalize="word"
value={state.subject} onChange={(e) => actions.setSubject(e.target.value)} />
</div>
<div className="members">
<span>{state.strings.members}:</span>
{ state.members.size !== 0 && (
<span>{ state.members.size }</span>
<span className="count">{ state.members.size }</span>
)}
</div>
<div class="list">
<div className="list">
<CardSelect
select={actions.onMember}
selected={state.members}
emptyMessage={'No Connected Contacts'}
emptyMessage={state.strings.noConnected}
filter={actions.cardFilter}
unknown={0}
/>
</div>
<AddFooter>
<div class="seal">
<div className="seal">
{ state.sealable && state.allowUnsealed && (
<>
<Switch checked={state.seal} onChange={actions.setSeal} size="small" />
<span class="sealText">Sealed Channel</span>
<span className="sealText">{ state.strings.sealedTopic }</span>
</>
)}
</div>
<Space>
<Button key="back" onClick={cancelled}>Cancel</Button>
<Button key="save" type="primary" loading={state.busy} onClick={addChannel}>Save</Button>
<Button key="back" onClick={cancelled}>{ state.strings.cancel }</Button>
<Button key="save" type="primary" loading={state.busy} onClick={addChannel}>{ state.strings.start }</Button>
</Space>
</AddFooter>
</AddChannelWrapper>

25
net/web/src/session/channels/addChannel/AddChannel.styled.js
View File

@ -6,12 +6,33 @@ export const AddChannelWrapper = styled.div`
flex-direction: column;
align-items: center;
justify-content: center;
background-color: ${props => props.theme.modalArea};
color: ${props => props.theme.mainText};
.subject {
width: 100%;
input {
padding-left: 8px;
background-color: ${props => props.theme.inputArea};
border: 1px solid ${props => props.theme.sectionBorder};
color: ${props => props.theme.mainText};
}
input::placeholder {
color: ${props => props.theme.placeholderText};
}
}
.members {
margin-top: 16px;
width: 100%;
padding-left: 8px;
color: ${Colors.grey};
color: ${props => props.theme.labelText};
.count {
padding-left: 8px;
}
}
.list {
@ -19,7 +40,7 @@ export const AddChannelWrapper = styled.div`
min-height: 100px;
max-height: 200px;
overflow: auto;
border: 1px solid ${Colors.divider};
border: 1px solid ${props => props.theme.sectionBorder};
}
`;

1
net/web/src/session/channels/addChannel/memberOption/MemberOption.styled.js
View File

@ -5,6 +5,7 @@ export const MemberOptionWrapper = styled.div`
width: 100%;
display: flex;
align-items: center;
color: ${props => props.theme.mainText};
.details {
flex-grow: 1;

8
net/web/src/session/channels/addChannel/useAddChannel.hook.js
View File

@ -1,6 +1,7 @@
import { useContext, useState, useEffect } from 'react';
import { ChannelContext } from 'context/ChannelContext';
import { CardContext } from 'context/CardContext';
import { SettingsContext } from 'context/SettingsContext';
import { AccountContext } from 'context/AccountContext';
import { encryptChannelSubject } from 'context/sealUtil';
@ -14,11 +15,13 @@ export function useAddChannel() {
subject: null,
members: new Set(),
seal: false,
strings: {},
});
const card = useContext(CardContext);
const channel = useContext(ChannelContext);
const account = useContext(AccountContext);
const settings = useContext(SettingsContext);
const updateState = (value) => {
setState((s) => ({ ...s, ...value }));
@ -35,6 +38,11 @@ export function useAddChannel() {
}
}, [account.state]);
useEffect(() => {
const { strings } = settings.state;
updateState({ strings });
}, [settings.state]);
const actions = {
addChannel: async () => {
let conversation;

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

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