nostr/iris-messenger
1
0
Fork 0
mirror of https://github.com/irislib/iris-messenger.git synced 2024-09-19 09:43:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

make relays indicator optional, off by default

Browse Source
This commit is contained in:
Martti Malmi 2023-04-26 10:11:32 +03:00
parent 86567a8009
commit e77f64dcc5
3 changed files with 59 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/js/components/Header.tsx
View File

@ -48,6 +48,7 @@ export default class Header extends Component {
localState.get('showParticipants').on(this.inject());
localState.get('unseenMsgsTotal').on(this.inject());
localState.get('unseenNotificationCount').on(this.inject());
localState.get('showConnectedRelays').on(this.inject());
localState.get('activeRoute').on(
this.sub((activeRoute) => {
this.setState({
@ -139,7 +140,7 @@ export default class Header extends Component {
href="/settings/network"
class={`connected-peers tooltip mobile-search-hidden ${
this.state.showMobileSearch ? 'hidden-xs' : ''
}`}
} ${this.state.connectedRelays > 0 ? 'connected' : ''}`}
>
<span class="tooltiptext right">{t('connected_relays')}</span>
<small>
@ -284,7 +285,7 @@ export default class Header extends Component {
>
<span class="visible-xs-inline-block">{Icons.backArrow}</span>
</a>
{loggedIn && this.renderConnectedRelays()}
{loggedIn && this.state.showConnectedRelays && this.renderConnectedRelays()}
{this.renderHeaderText()}
{loggedIn && this.renderNotifications()}
{loggedIn && this.renderMyProfile()}

43
src/js/views/settings/Appearance.js
View File

@ -1,43 +0,0 @@
import Component from '../../BaseComponent';
import Session from '../../nostr/Session';
import { translate as t } from '../../translations/Translation';
export default class Appearance extends Component {
state = {
colorScheme: 'dark',
};
render() {
return (
<>
<div class="centered-container">
<h3>{t('appearance')}</h3>
<p>
<label for="colorScheme">{t('color_scheme')}</label>
<select
id="colorScheme"
name="colorScheme"
onChange={(e) => this.onChange(e)}
value={this.state.colorScheme}
>
<option value="default">{t('system_default')}</option>
<option value="light">{t('light')}</option>
<option value="dark">{t('dark')}</option>
</select>
</p>
</div>
</>
);
}
componentDidMount() {
// TODO use Nostr.private
Session.public.get('settings/colorScheme', (entry) => {
this.setState({ colorScheme: entry.value });
});
}
onChange(e) {
Session.public.set('settings/colorScheme', e.target.value);
}
}

56
src/js/views/settings/Appearance.tsx Normal file
View File

@ -0,0 +1,56 @@
import { useEffect, useState } from 'preact/hooks';
import localState from '../../LocalState';
import Session from '../../nostr/Session';
import { translate as t } from '../../translations/Translation';
type ColorScheme = 'default' | 'light' | 'dark';
const Appearance = () => {
const [colorScheme, setColorScheme] = useState<ColorScheme>('dark');
const [showConnectedRelays, setShowConnectedRelays] = useState(false);
useEffect(() => {
// TODO use Nostr.private
Session.public.get('settings/colorScheme', (entry) => {
setColorScheme(entry.value);
});
localState.get('showConnectedRelays').on(setShowConnectedRelays);
}, []);
const onChange = (e: Event) => {
const target = e.target as HTMLSelectElement;
const value = target.value as ColorScheme;
Session.public.set('settings/colorScheme', value);
};
return (
<>
<div class="centered-container">
<h3>{t('appearance')}</h3>
<p>
<label for="colorScheme">{t('color_scheme')}</label>
<select id="colorScheme" name="colorScheme" onChange={onChange} value={colorScheme}>
<option value="default">{t('system_default')}</option>
<option value="light">{t('light')}</option>
<option value="dark">{t('dark')}</option>
</select>
</p>
<p>
<input
type="checkbox"
id="showConnectedRelays"
name="showConnectedRelays"
checked={showConnectedRelays}
onChange={(e) => {
localState.get('showConnectedRelays').put(e.currentTarget.checked);
}}
/>
<label htmlFor="showConnectedRelays">{t('show_connected_relays_in_header')}</label>
</p>
</div>
</>
);
};
export default Appearance;