keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

feat: refactored empty message view component

Browse Source 
use styled components
pull/3056/head
William Grant 1 year ago
parent 99a6b103fe
commit 55d062cb02
8 changed files with 70 additions and 66 deletions
Show Stats Download Patch File Download Diff File

2
background.html
Unescape Escape View File

@ -31,7 +31,7 @@
<body id="body"> <body id="body">
<div id="root"> <div id="root">
<div class="app-loading-screen"> <div class="app-loading-screen">
<div class="content session-full-logo"> <div class="session-full-logo">
<img src="images/session/brand.svg" class="session-brand-logo" /> <img src="images/session/brand.svg" class="session-brand-logo" />
<img src="images/session/session-text.svg" class="session-text-logo" /> <img src="images/session/session-text.svg" class="session-text-logo" />
</div> </div>

2
password.html
Unescape Escape View File

@ -29,7 +29,7 @@
<body> <body>
<div id="root"> <div id="root">
<div class="app-loading-screen"> <div class="app-loading-screen">
<div class="content session-full-logo"> <div class="session-full-logo">
<img src="images/session/brand.svg" class="session-brand-logo" /> <img src="images/session/brand.svg" class="session-brand-logo" />
<img src="images/session/session-text.svg" class="session-text-logo" /> <img src="images/session/session-text.svg" class="session-text-logo" />
</div> </div>

21
stylesheets/_global.scss
Unescape Escape View File

@ -122,6 +122,27 @@ a {
animation: loading 1500ms ease infinite 666ms; animation: loading 1500ms ease infinite 666ms;
} }
} }
.session-full-logo {
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
.session-brand-logo {
height: 180px;
filter: brightness(0) saturate(100%) invert(75%) sepia(84%) saturate(3272%) hue-rotate(103deg)
brightness(106%) contrast(103%);
}
.session-text-logo {
margin-top: 10px;
width: 250px;
transition: 0s;
filter: var(--session-logo-text-current-filter);
}
}
.session-text-logo { .session-text-logo {
filter: var(--session-logo-text-current-filter); filter: var(--session-logo-text-current-filter);
} }

30
stylesheets/_session_left_pane.scss
Unescape Escape View File

@ -140,33 +140,3 @@ $session-compose-margin: 20px;
} }
} }
} }
.conversation.placeholder {
margin: auto;
height: 100%;
.container {
display: flex;
height: 100%;
}
}
.session-full-logo {
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
.session-brand-logo {
height: 180px;
filter: brightness(0) saturate(100%) invert(75%) sepia(84%) saturate(3272%) hue-rotate(103deg)
brightness(106%) contrast(103%);
}
.session-text-logo {
margin-top: 10px;
width: 250px;
transition: 0s;
filter: var(--session-logo-text-current-filter);
}
}

42
ts/components/EmptyMessageView.tsx
Unescape Escape View File

@ -0,0 +1,42 @@
import styled from 'styled-components';
import { Flex } from './basic/Flex';
const StyledPlaceholder = styled(Flex)`
margin: auto;
height: 100%;
`;
const StyledSessionFullLogo = styled(Flex)`
img:first-child {
height: 180px;
filter: brightness(0) saturate(100%) invert(75%) sepia(84%) saturate(3272%) hue-rotate(103deg)
brightness(106%) contrast(103%);
-webkit-user-drag: none;
}
img:nth-child(2) {
margin-top: 10px;
width: 250px;
transition: 0s;
filter: var(--session-logo-text-current-filter);
-webkit-user-drag: none;
}
`;
export const EmptyMessageView = () => {
return (
<StyledPlaceholder container={true} alignItems="center">
<StyledSessionFullLogo
container={true}
className="content"
flexDirection="column"
justifyContent="center"
alignItems="center"
margin="auto"
>
<img src="images/session/brand.svg" alt="full-brand-logo" />
<img src="images/session/session-text.svg" alt="full-brand-text" />
</StyledSessionFullLogo>
</StyledPlaceholder>
);
};

27
ts/components/MainViewController.tsx
Unescape Escape View File

@ -1,27 +0,0 @@
import { CSSProperties } from 'styled-components';
export const MessageView = () => {
const noDragStyle = { '-webkit-user-drag': 'none' } as CSSProperties;
return (
<div className="conversation placeholder">
<div className="conversation-header" />
<div className="container">
<div className="content session-full-logo">
<img
src="images/session/brand.svg"
className="session-brand-logo"
alt="full-brand-logo"
style={noDragStyle}
/>
<img
src="images/session/session-text.svg"
className="session-text-logo"
alt="full-brand-logo"
style={noDragStyle}
/>
</div>
</div>
</div>
);
};

5
ts/components/conversation/SessionConversation.tsx
Unescape Escape View File

@ -45,7 +45,7 @@ import {
} from '../../types/attachments/VisualAttachment'; } from '../../types/attachments/VisualAttachment';
import { AttachmentUtil, GoogleChrome, arrayBufferToObjectURL } from '../../util'; import { AttachmentUtil, GoogleChrome, arrayBufferToObjectURL } from '../../util';
import { getCurrentRecoveryPhrase } from '../../util/storage'; import { getCurrentRecoveryPhrase } from '../../util/storage';
import { MessageView } from '../MainViewController'; import { EmptyMessageView } from '../EmptyMessageView';
import { SplitViewContainer } from '../SplitViewContainer'; import { SplitViewContainer } from '../SplitViewContainer';
import { SessionButtonColor } from '../basic/SessionButton'; import { SessionButtonColor } from '../basic/SessionButton';
import { InConversationCallContainer } from '../calling/InConversationCallContainer'; import { InConversationCallContainer } from '../calling/InConversationCallContainer';
@ -246,8 +246,7 @@ export class SessionConversation extends Component<Props, State> {
} = this.props; } = this.props;
if (!selectedConversation || !messagesProps) { if (!selectedConversation || !messagesProps) {
// return an empty message view return <EmptyMessageView />;
return <MessageView />;
} }
// TODOLATER break selectionMode into it's own container component so we can use hooks to fetch relevant state from the store // TODOLATER break selectionMode into it's own container component so we can use hooks to fetch relevant state from the store
const selectionMode = selectedMessages.length > 0; const selectionMode = selectedMessages.length > 0;

7
ts/mains/main_renderer.tsx
Unescape Escape View File

@ -284,11 +284,9 @@ async function start() {
window.log.info('Cleanup: complete'); window.log.info('Cleanup: complete');
window.log.info('listening for registration events'); window.log.info('listening for registration events');
// eslint-disable-next-line @typescript-eslint/no-misused-promises WhisperEvents.on('registration_done', () => {
WhisperEvents.on('registration_done', async () => {
window.log.info('handling registration event'); window.log.info('handling registration event');
void connect();
await connect();
}); });
function switchBodyToRtlIfNeeded() { function switchBodyToRtlIfNeeded() {
@ -321,6 +319,7 @@ async function start() {
root.render(<SessionRegistrationView />); root.render(<SessionRegistrationView />);
switchBodyToRtlIfNeeded(); switchBodyToRtlIfNeeded();
} }
DisappearingMessages.initExpiringMessageListener(); DisappearingMessages.initExpiringMessageListener();
if (Registration.isDone() && !isSignInByLinking()) { if (Registration.isDone() && !isSignInByLinking()) {

Write Preview
Loading…
Cancel
Save