fix: add NoticeBanner showing when legacy config message received
This commit is contained in:
parent
cbffc29950
commit
0080254286
|
@ -490,6 +490,7 @@
|
||||||
"noMessagesInNoteToSelf": "You have no messages in <b>$name$</b>.",
|
"noMessagesInNoteToSelf": "You have no messages in <b>$name$</b>.",
|
||||||
"noMessagesInEverythingElse": "You have no messages from <b>$name$</b>. Send a message to start the conversation!",
|
"noMessagesInEverythingElse": "You have no messages from <b>$name$</b>. Send a message to start the conversation!",
|
||||||
"hideBanner": "Hide",
|
"hideBanner": "Hide",
|
||||||
|
"someOfYourDeviceUseOutdatedVersion": "Some of your devices are using outdated versions. Syncing may be unreliable until they are updated.",
|
||||||
"openMessageRequestInboxDescription": "View your Message Request inbox",
|
"openMessageRequestInboxDescription": "View your Message Request inbox",
|
||||||
"clearAllReactions": "Are you sure you want to clear all $emoji$ ?",
|
"clearAllReactions": "Are you sure you want to clear all $emoji$ ?",
|
||||||
"expandedReactionsText": "Show Less",
|
"expandedReactionsText": "Show Less",
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
|
|
||||||
.inbox.index {
|
.inbox.index {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
background-color: var(--background-primary-color);
|
background-color: var(--background-primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -64,9 +65,6 @@
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
.conversation.placeholder {
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
.left-pane-wrapper {
|
.left-pane-wrapper {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
|
@ -525,7 +525,7 @@ label {
|
||||||
|
|
||||||
.session-settings {
|
.session-settings {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: var(--background-secondary-color);
|
background-color: var(--background-secondary-color);
|
||||||
|
|
|
@ -82,6 +82,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
max-width: calc(100vw - 380px);
|
max-width: calc(100vw - 380px);
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
.selection-mode {
|
.selection-mode {
|
||||||
.messages-container > *:not(.message-selected) {
|
.messages-container > *:not(.message-selected) {
|
||||||
|
|
|
@ -70,14 +70,14 @@ $session-compose-margin: 20px;
|
||||||
|
|
||||||
.module-left-pane {
|
.module-left-pane {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100vh;
|
height: 100%;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
border-left: 1px solid var(--border-color);
|
border-left: 1px solid var(--border-color);
|
||||||
border-right: 1px solid var(--border-color);
|
border-right: 1px solid var(--border-color);
|
||||||
|
|
||||||
&-session {
|
&-session {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100vh;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__header {
|
&__header {
|
||||||
|
@ -143,6 +143,8 @@ $session-compose-margin: 20px;
|
||||||
|
|
||||||
.conversation.placeholder {
|
.conversation.placeholder {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
|
@ -0,0 +1,51 @@
|
||||||
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { Flex } from './basic/Flex';
|
||||||
|
import { SessionIconButton } from './icon';
|
||||||
|
|
||||||
|
const StyledNoticeBanner = styled(Flex)`
|
||||||
|
position: relative;
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: var(--background-primary-color);
|
||||||
|
font-size: var(--font-size-lg);
|
||||||
|
padding: var(--margins-xs) var(--margins-sm);
|
||||||
|
text-align: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
.session-icon-button {
|
||||||
|
position: absolute;
|
||||||
|
right: var(--margins-sm);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StyledText = styled.span`
|
||||||
|
margin-right: var(--margins-lg);
|
||||||
|
`;
|
||||||
|
|
||||||
|
type NoticeBannerProps = {
|
||||||
|
text: string;
|
||||||
|
dismissCallback: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const NoticeBanner = (props: NoticeBannerProps) => {
|
||||||
|
const { text, dismissCallback } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StyledNoticeBanner
|
||||||
|
container={true}
|
||||||
|
flexDirection={'row'}
|
||||||
|
justifyContent={'center'}
|
||||||
|
alignItems={'center'}
|
||||||
|
>
|
||||||
|
<StyledText>{text}</StyledText>
|
||||||
|
<SessionIconButton
|
||||||
|
iconType="exit"
|
||||||
|
iconColor="inherit"
|
||||||
|
iconSize="small"
|
||||||
|
onClick={event => {
|
||||||
|
event?.preventDefault();
|
||||||
|
dismissCallback();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</StyledNoticeBanner>
|
||||||
|
);
|
||||||
|
};
|
|
@ -32,6 +32,7 @@ import { SessionMainPanel } from './SessionMainPanel';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { initialSogsRoomInfoState } from '../state/ducks/sogsRoomInfo';
|
import { initialSogsRoomInfoState } from '../state/ducks/sogsRoomInfo';
|
||||||
|
import { Storage } from '../util/storage';
|
||||||
|
|
||||||
// Default to the locale from env. It will be overridden if moment
|
// Default to the locale from env. It will be overridden if moment
|
||||||
// does not recognize it with what moment knows which is the closest.
|
// does not recognize it with what moment knows which is the closest.
|
||||||
|
@ -42,6 +43,10 @@ moment.locale((window.i18n as any).getLocale());
|
||||||
// Workaround: A react component's required properties are filtering up through connect()
|
// Workaround: A react component's required properties are filtering up through connect()
|
||||||
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363
|
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363
|
||||||
import useUpdate from 'react-use/lib/useUpdate';
|
import useUpdate from 'react-use/lib/useUpdate';
|
||||||
|
import useInterval from 'react-use/lib/useInterval';
|
||||||
|
import { SettingsKey } from '../data/settings-key';
|
||||||
|
import { NoticeBanner } from './NoticeBanner';
|
||||||
|
import { Flex } from './basic/Flex';
|
||||||
|
|
||||||
const StyledGutter = styled.div`
|
const StyledGutter = styled.div`
|
||||||
width: 380px !important;
|
width: 380px !important;
|
||||||
|
@ -89,6 +94,36 @@ function setupLeftPane(forceUpdateInboxComponent: () => void) {
|
||||||
forceUpdateInboxComponent();
|
forceUpdateInboxComponent();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const SomeDeviceOutdatedSyncingNotice = () => {
|
||||||
|
const forceUpdate = useUpdate();
|
||||||
|
const isShown = Boolean(window.getSettingValue(SettingsKey.someDeviceOutdatedSyncing));
|
||||||
|
|
||||||
|
// it would be nice to get the settings into a redux slice in addition to their Storage location and keep them in sync.
|
||||||
|
// So we could just use a selector here.
|
||||||
|
useInterval(() => {
|
||||||
|
const shouldBeShown = Storage.get(SettingsKey.someDeviceOutdatedSyncing);
|
||||||
|
|
||||||
|
if (!isShown && shouldBeShown) {
|
||||||
|
forceUpdate();
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
const dismiss = async () => {
|
||||||
|
await window.setSettingValue(SettingsKey.someDeviceOutdatedSyncing, false);
|
||||||
|
forceUpdate();
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!isShown) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<NoticeBanner
|
||||||
|
text={window.i18n('someOfYourDeviceUseOutdatedVersion')}
|
||||||
|
dismissCallback={dismiss}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export const SessionInboxView = () => {
|
export const SessionInboxView = () => {
|
||||||
const update = useUpdate();
|
const update = useUpdate();
|
||||||
// run only on mount
|
// run only on mount
|
||||||
|
@ -105,10 +140,13 @@ export const SessionInboxView = () => {
|
||||||
<div className="inbox index">
|
<div className="inbox index">
|
||||||
<Provider store={window.inboxStore}>
|
<Provider store={window.inboxStore}>
|
||||||
<PersistGate loading={null} persistor={persistor}>
|
<PersistGate loading={null} persistor={persistor}>
|
||||||
|
<SomeDeviceOutdatedSyncingNotice />
|
||||||
|
<Flex container={true} height="0" flexShrink={100} flexGrow={1}>
|
||||||
<StyledGutter>
|
<StyledGutter>
|
||||||
<LeftPane />
|
<LeftPane />
|
||||||
</StyledGutter>
|
</StyledGutter>
|
||||||
<SessionMainPanel />
|
<SessionMainPanel />
|
||||||
|
</Flex>
|
||||||
</PersistGate>
|
</PersistGate>
|
||||||
</Provider>
|
</Provider>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -16,8 +16,8 @@ import useTimeoutFn from 'react-use/lib/useTimeoutFn';
|
||||||
import { clearSearch } from '../../state/ducks/search';
|
import { clearSearch } from '../../state/ducks/search';
|
||||||
import { resetOverlayMode, SectionType, showLeftPaneSection } from '../../state/ducks/section';
|
import { resetOverlayMode, SectionType, showLeftPaneSection } from '../../state/ducks/section';
|
||||||
import {
|
import {
|
||||||
getOurPrimaryConversation,
|
|
||||||
getGlobalUnreadMessageCount,
|
getGlobalUnreadMessageCount,
|
||||||
|
getOurPrimaryConversation,
|
||||||
} from '../../state/selectors/conversations';
|
} from '../../state/selectors/conversations';
|
||||||
import { getFocusedSection } from '../../state/selectors/section';
|
import { getFocusedSection } from '../../state/selectors/section';
|
||||||
import { getOurNumber } from '../../state/selectors/user';
|
import { getOurNumber } from '../../state/selectors/user';
|
||||||
|
|
|
@ -9,6 +9,7 @@ const settingsStartInTray = 'start-in-tray-setting';
|
||||||
const settingsOpengroupPruning = 'prune-setting';
|
const settingsOpengroupPruning = 'prune-setting';
|
||||||
const settingsNotification = 'notification-setting';
|
const settingsNotification = 'notification-setting';
|
||||||
const settingsAudioNotification = 'audio-notification-setting';
|
const settingsAudioNotification = 'audio-notification-setting';
|
||||||
|
const someDeviceOutdatedSyncing = 'some-device-outdated-syncing';
|
||||||
|
|
||||||
export const SettingsKey = {
|
export const SettingsKey = {
|
||||||
settingsReadReceipt,
|
settingsReadReceipt,
|
||||||
|
@ -21,6 +22,7 @@ export const SettingsKey = {
|
||||||
settingsOpengroupPruning,
|
settingsOpengroupPruning,
|
||||||
settingsNotification,
|
settingsNotification,
|
||||||
settingsAudioNotification,
|
settingsAudioNotification,
|
||||||
|
someDeviceOutdatedSyncing,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const KNOWN_BLINDED_KEYS_ITEM = 'KNOWN_BLINDED_KEYS_ITEM';
|
export const KNOWN_BLINDED_KEYS_ITEM = 'KNOWN_BLINDED_KEYS_ITEM';
|
||||||
|
|
|
@ -41,6 +41,7 @@ import { addKeyPairToCacheAndDBIfNeeded, handleNewClosedGroup } from './closedGr
|
||||||
import { HexKeyPair } from './keypairs';
|
import { HexKeyPair } from './keypairs';
|
||||||
import { queueAllCachedFromSource } from './receiver';
|
import { queueAllCachedFromSource } from './receiver';
|
||||||
import { EnvelopePlus } from './types';
|
import { EnvelopePlus } from './types';
|
||||||
|
import { SettingsKey } from '../data/settings-key';
|
||||||
|
|
||||||
function groupByVariant(
|
function groupByVariant(
|
||||||
incomingConfigs: Array<IncomingMessage<SignalService.ISharedConfigMessage>>
|
incomingConfigs: Array<IncomingMessage<SignalService.ISharedConfigMessage>>
|
||||||
|
@ -873,6 +874,7 @@ async function handleConfigurationMessageLegacy(
|
||||||
window?.log?.info(
|
window?.log?.info(
|
||||||
'useSharedUtilForUserConfig is set, not handling config messages with "handleConfigurationMessageLegacy()"'
|
'useSharedUtilForUserConfig is set, not handling config messages with "handleConfigurationMessageLegacy()"'
|
||||||
);
|
);
|
||||||
|
window.setSettingValue(SettingsKey.someDeviceOutdatedSyncing, true);
|
||||||
await removeFromCache(envelope);
|
await removeFromCache(envelope);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
|
@ -489,6 +489,7 @@ export type LocalizerKeys =
|
||||||
| 'noMessagesInNoteToSelf'
|
| 'noMessagesInNoteToSelf'
|
||||||
| 'noMessagesInEverythingElse'
|
| 'noMessagesInEverythingElse'
|
||||||
| 'hideBanner'
|
| 'hideBanner'
|
||||||
|
| 'someOfYourDeviceUseOutdatedVersion'
|
||||||
| 'openMessageRequestInboxDescription'
|
| 'openMessageRequestInboxDescription'
|
||||||
| 'clearAllReactions'
|
| 'clearAllReactions'
|
||||||
| 'expandedReactionsText'
|
| 'expandedReactionsText'
|
||||||
|
|
Loading…
Reference in New Issue