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>.",
|
||||
"noMessagesInEverythingElse": "You have no messages from <b>$name$</b>. Send a message to start the conversation!",
|
||||
"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",
|
||||
"clearAllReactions": "Are you sure you want to clear all $emoji$ ?",
|
||||
"expandedReactionsText": "Show Less",
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
.inbox.index {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--background-primary-color);
|
||||
}
|
||||
|
||||
|
@ -64,9 +65,6 @@
|
|||
flex-grow: 1;
|
||||
display: flex;
|
||||
}
|
||||
.conversation.placeholder {
|
||||
height: 100vh;
|
||||
}
|
||||
.left-pane-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
|
@ -525,7 +525,7 @@ label {
|
|||
|
||||
.session-settings {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--background-secondary-color);
|
||||
|
|
|
@ -82,6 +82,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: calc(100vw - 380px);
|
||||
height: 100%;
|
||||
|
||||
.selection-mode {
|
||||
.messages-container > *:not(.message-selected) {
|
||||
|
|
|
@ -70,14 +70,14 @@ $session-compose-margin: 20px;
|
|||
|
||||
.module-left-pane {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
border-left: 1px solid var(--border-color);
|
||||
border-right: 1px solid var(--border-color);
|
||||
|
||||
&-session {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__header {
|
||||
|
@ -143,6 +143,8 @@ $session-compose-margin: 20px;
|
|||
|
||||
.conversation.placeholder {
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
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 styled from 'styled-components';
|
||||
import { initialSogsRoomInfoState } from '../state/ducks/sogsRoomInfo';
|
||||
import { Storage } from '../util/storage';
|
||||
|
||||
// Default to the locale from env. It will be overridden if moment
|
||||
// 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()
|
||||
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363
|
||||
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`
|
||||
width: 380px !important;
|
||||
|
@ -89,6 +94,36 @@ function setupLeftPane(forceUpdateInboxComponent: () => void) {
|
|||
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 = () => {
|
||||
const update = useUpdate();
|
||||
// run only on mount
|
||||
|
@ -105,10 +140,13 @@ export const SessionInboxView = () => {
|
|||
<div className="inbox index">
|
||||
<Provider store={window.inboxStore}>
|
||||
<PersistGate loading={null} persistor={persistor}>
|
||||
<SomeDeviceOutdatedSyncingNotice />
|
||||
<Flex container={true} height="0" flexShrink={100} flexGrow={1}>
|
||||
<StyledGutter>
|
||||
<LeftPane />
|
||||
</StyledGutter>
|
||||
<SessionMainPanel />
|
||||
</Flex>
|
||||
</PersistGate>
|
||||
</Provider>
|
||||
</div>
|
||||
|
|
|
@ -16,8 +16,8 @@ import useTimeoutFn from 'react-use/lib/useTimeoutFn';
|
|||
import { clearSearch } from '../../state/ducks/search';
|
||||
import { resetOverlayMode, SectionType, showLeftPaneSection } from '../../state/ducks/section';
|
||||
import {
|
||||
getOurPrimaryConversation,
|
||||
getGlobalUnreadMessageCount,
|
||||
getOurPrimaryConversation,
|
||||
} from '../../state/selectors/conversations';
|
||||
import { getFocusedSection } from '../../state/selectors/section';
|
||||
import { getOurNumber } from '../../state/selectors/user';
|
||||
|
|
|
@ -9,6 +9,7 @@ const settingsStartInTray = 'start-in-tray-setting';
|
|||
const settingsOpengroupPruning = 'prune-setting';
|
||||
const settingsNotification = 'notification-setting';
|
||||
const settingsAudioNotification = 'audio-notification-setting';
|
||||
const someDeviceOutdatedSyncing = 'some-device-outdated-syncing';
|
||||
|
||||
export const SettingsKey = {
|
||||
settingsReadReceipt,
|
||||
|
@ -21,6 +22,7 @@ export const SettingsKey = {
|
|||
settingsOpengroupPruning,
|
||||
settingsNotification,
|
||||
settingsAudioNotification,
|
||||
someDeviceOutdatedSyncing,
|
||||
};
|
||||
|
||||
export const KNOWN_BLINDED_KEYS_ITEM = 'KNOWN_BLINDED_KEYS_ITEM';
|
||||
|
|
|
@ -41,6 +41,7 @@ import { addKeyPairToCacheAndDBIfNeeded, handleNewClosedGroup } from './closedGr
|
|||
import { HexKeyPair } from './keypairs';
|
||||
import { queueAllCachedFromSource } from './receiver';
|
||||
import { EnvelopePlus } from './types';
|
||||
import { SettingsKey } from '../data/settings-key';
|
||||
|
||||
function groupByVariant(
|
||||
incomingConfigs: Array<IncomingMessage<SignalService.ISharedConfigMessage>>
|
||||
|
@ -873,6 +874,7 @@ async function handleConfigurationMessageLegacy(
|
|||
window?.log?.info(
|
||||
'useSharedUtilForUserConfig is set, not handling config messages with "handleConfigurationMessageLegacy()"'
|
||||
);
|
||||
window.setSettingValue(SettingsKey.someDeviceOutdatedSyncing, true);
|
||||
await removeFromCache(envelope);
|
||||
return;
|
||||
}
|
||||
|
|
|
@ -489,6 +489,7 @@ export type LocalizerKeys =
|
|||
| 'noMessagesInNoteToSelf'
|
||||
| 'noMessagesInEverythingElse'
|
||||
| 'hideBanner'
|
||||
| 'someOfYourDeviceUseOutdatedVersion'
|
||||
| 'openMessageRequestInboxDescription'
|
||||
| 'clearAllReactions'
|
||||
| 'expandedReactionsText'
|
||||
|
|
Loading…
Reference in New Issue