chore: move session radio group to styled components

also clean up unused css
and move some elements from OverlayClosedGroup to styled components
pull/2410/head
Audric Ackermann 3 years ago
parent f415ef36dd
commit 970e719229

@ -115,23 +115,6 @@ a {
} }
} }
.new-group-update {
.summary {
margin: 10px;
}
.members .contact {
box-shadow: none;
border-bottom: 1px solid #eee;
.last-message,
.last-timestamp {
display: none;
}
}
}
$unread-badge-size: 21px;
.banner { .banner {
z-index: 100; z-index: 100;

@ -52,21 +52,6 @@
.avatar-center-inner { .avatar-center-inner {
display: flex; display: flex;
} }
.upload-btn-background {
background-color: #ffffff70;
align-self: center;
margin-inline-start: -24px;
margin-top: 40px;
z-index: 1;
border-radius: 8px;
}
}
.expired {
.gutter {
height: calc(100% - 48px);
}
} }
.scrollable { .scrollable {
@ -183,55 +168,6 @@ input.search {
} }
} }
.last-timestamp {
font-size: smaller;
float: right;
margin: 0 10px;
color: $grey;
}
.new-contact {
display: none;
cursor: pointer;
opacity: 0.7;
.contact-details .number {
display: block;
font-style: italic;
padding-inline-end: 8px;
}
&.valid {
opacity: 1;
}
}
.index {
.gutter .new-group-update-form {
display: none;
padding: 0.5em;
}
.last-message {
margin: 6px 0 0;
font-size: $font-size-small;
}
.gutter .timestamp {
position: absolute;
top: 14px;
right: 12px;
color: $grey;
}
}
.conversations .unread .contact-details {
.name,
.last-message,
.last-timestamp {
font-weight: bold;
}
}
.hint { .hint {
margin: 10px; margin: 10px;
padding: 1em; padding: 1em;

@ -146,38 +146,6 @@
} }
} }
.nickname-dialog {
.message {
font-style: italic;
color: $grey;
font-size: 12px;
margin-bottom: 16px;
}
}
.seed-dialog {
.title {
font-weight: bold;
}
.fields {
margin-top: 20px;
}
.seed {
padding: 20px 0;
font-style: oblique;
}
.qr-image {
transition: $session-transition-duration;
opacity: 10%;
&:hover {
opacity: 100%;
}
}
}
.loki-dialog { .loki-dialog {
& ~ .index.inbox { & ~ .index.inbox {
// filter: blur(2px); // FIXME enable back once modals are moved to react // filter: blur(2px); // FIXME enable back once modals are moved to react
@ -192,12 +160,6 @@
} }
} }
.nickname-dialog {
.message {
color: $color-light-35;
}
}
.edit-profile-dialog { .edit-profile-dialog {
.session-modal__header__title { .session-modal__header__title {
font-size: $session-font-lg; font-size: $session-font-lg;

@ -136,7 +136,7 @@
} }
.module-message__generic-attachment__file-size { .module-message__generic-attachment__file-size {
font-size: 11px; font-size: var(--font-size-xs);
line-height: 16px; line-height: 16px;
letter-spacing: 0.3px; letter-spacing: 0.3px;
margin-top: 3px; margin-top: 3px;
@ -233,7 +233,7 @@
.module-message__author { .module-message__author {
margin-top: $session-margin-sm; margin-top: $session-margin-sm;
margin-bottom: $session-margin-xs; margin-bottom: $session-margin-xs;
font-size: 13px; font-size: var(--font-size-sm);
font-weight: 300; font-weight: 300;
line-height: 18px; line-height: 18px;
overflow-x: hidden; overflow-x: hidden;
@ -655,7 +655,7 @@
top: -6px; top: -6px;
font-weight: 300; font-weight: 300;
font-size: 11px; font-size: var(--font-size-xs);
letter-spacing: 0.25px; letter-spacing: 0.25px;
height: 16px; height: 16px;
@ -717,7 +717,7 @@
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
font-size: 13px; font-size: var(--font-size-sm);
line-height: 18px; line-height: 18px;
color: $color-gray-25; color: $color-gray-25;
@ -1252,7 +1252,7 @@
.module-staged-link-preview__location { .module-staged-link-preview__location {
margin-top: 4px; margin-top: 4px;
color: $color-gray-60; color: $color-gray-60;
font-size: 11px; font-size: var(--font-size-xs);
height: 16px; height: 16px;
letter-spacing: 0.25px; letter-spacing: 0.25px;
text-transform: uppercase; text-transform: uppercase;

@ -104,7 +104,7 @@
} }
.module-quote__primary__author { .module-quote__primary__author {
font-size: 13px; font-size: var(--font-size-sm);
line-height: 18px; line-height: 18px;
font-weight: 300; font-weight: 300;
color: $color-gray-90; color: $color-gray-90;
@ -138,7 +138,7 @@
.module-quote__primary__type-label { .module-quote__primary__type-label {
font-style: italic; font-style: italic;
color: $color-gray-90; color: $color-gray-90;
font-size: 13px; font-size: var(--font-size-sm);
line-height: 18px; line-height: 18px;
} }
@ -273,7 +273,7 @@
&-warning__text { &-warning__text {
margin-inline-start: 6px; margin-inline-start: 6px;
color: $color-gray-90; color: $color-gray-90;
font-size: 13px; font-size: var(--font-size-sm);
line-height: 18px; line-height: 18px;
} }
} }

@ -280,8 +280,7 @@ textarea {
font-size: $session-font-md; font-size: $session-font-md;
&-text { &-text {
@include session-color-subtle(var(--color-text)); color: var(--color-text-subtle);
font-weight: 400; font-weight: 400;
font-size: $session-font-sm; font-size: $session-font-sm;
line-height: $session-font-sm; line-height: $session-font-sm;
@ -883,14 +882,9 @@ label {
font-size: $session-font-sm; font-size: $session-font-sm;
font-weight: 100; font-weight: 100;
max-width: 700px; max-width: 700px;
@include session-color-subtle(var(--color-text)); color: var(--color-text-subtle);
} }
&__content {
label {
@include session-color-subtle(var(--color-text));
}
}
&__selection { &__selection {
.session-toggle { .session-toggle {
transition: $session-transition-duration; transition: $session-transition-duration;
@ -978,60 +972,10 @@ label {
border-radius: 3px; border-radius: 3px;
} }
.seed-dialog {
&__description {
max-width: $session-modal-size-lg;
}
}
.messages li { .messages li {
transition: $session-transition-duration !important; transition: $session-transition-duration !important;
} }
.session-radio-group fieldset {
border: none;
margin-inline-start: $session-margin-sm;
margin-top: $session-margin-sm;
}
.session-radio-group fieldset {
input[type='radio'] {
opacity: 0;
position: absolute;
cursor: pointer;
}
label {
margin-inline-end: 1em;
cursor: pointer;
}
label:before {
content: '';
display: inline-block;
width: 0.5em;
height: 0.5em;
margin-inline-end: 0.8em;
border-radius: 100%;
vertical-align: 0px;
border: 2px solid rgba($session-color-white, 0.6);
padding: 0.2em;
background: none;
border-color: var(--color-accent);
background-clip: content-box;
transition: $session-transition-duration;
}
input:hover + label:before {
background: var(--color-accent);
}
input:checked + label:before {
background: var(--color-accent);
}
}
.session-id-editable { .session-id-editable {
padding: $session-margin-lg; padding: $session-margin-lg;
@ -1132,17 +1076,6 @@ input {
} }
} }
.session-nickname-wrapper {
position: absolute;
height: 100%;
width: 100%;
display: flex;
.session-modal {
margin: auto auto;
}
}
.messages-container { .messages-container {
.session-icon-button { .session-icon-button {
display: flex; display: flex;
@ -1168,27 +1101,11 @@ input {
} }
.group-member-list { .group-member-list {
&__container {
padding: 2px 0px;
width: 100%;
max-height: 400px;
overflow-y: auto;
border: var(--border-session);
}
&__selection { &__selection {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
&__no-contacts {
font-family: $session-font-mono;
background: var(--color-cell-background);
text-align: center;
padding: 20px;
}
} }
.create-group-name-input { .create-group-name-input {

@ -124,10 +124,6 @@ $session-font-h4: 16px;
display: inline-block; display: inline-block;
} }
@mixin session-color-subtle($color) {
color: subtle($color);
}
@mixin pulse-color($color, $duration, $repetition) { @mixin pulse-color($color, $duration, $repetition) {
animation: pulseColor $duration $repetition; animation: pulseColor $duration $repetition;

@ -1,18 +1,12 @@
$session-compose-margin: 20px; $session-compose-margin: 20px;
.gutter {
width: 380px !important;
transition: none;
background: var(--color-cell-background);
}
.module-conversation { .module-conversation {
// default conversation list item text color // default conversation list item text color
&__user__profile { &__user__profile {
&-number, &-number,
&-name { &-name {
font-weight: bold; font-weight: bold;
font-size: 15px; font-size: var(--font-size-md);
color: var(--color-text-subtle); color: var(--color-text-subtle);
} }
@ -305,7 +299,7 @@ $session-compose-margin: 20px;
display: flex; display: flex;
.session-button { .session-button {
font-size: 11px; font-size: var(--font-size-xs);
padding: 6px; padding: 6px;
height: auto; height: auto;
margin: 0px; margin: 0px;

@ -152,8 +152,8 @@
&-terms-conditions-agreement { &-terms-conditions-agreement {
padding-top: $session-margin-md; padding-top: $session-margin-md;
@include session-color-subtle(var(--color-text));
color: var(--color-text-subtle);
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
@ -161,12 +161,12 @@
white-space: nowrap; white-space: nowrap;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
@include session-color-subtle(var(--color-text));
color: var(--color-text-subtle);
transition: $session-transition-duration; transition: $session-transition-duration;
&:visited &:link { &:visited &:link {
@include session-color-subtle(var(--color-text)); color: var(--color-text-subtle);
} }
&:hover { &:hover {
@ -178,8 +178,8 @@
session-description-long { session-description-long {
padding-top: 0; padding-top: 0;
padding-bottom: 20px; padding-bottom: 20px;
@include session-color-subtle(var(--color-text));
color: var(--color-text-subtle);
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
@ -206,8 +206,7 @@
border: none; border: none;
background: transparent; background: transparent;
color: var(--color-text); color: var(--color-text);
font-size: var(--font-size-md);
font-size: 15px;
line-height: 18px; line-height: 18px;
text-align: center; text-align: center;
overflow-wrap: break-word; overflow-wrap: break-word;
@ -223,7 +222,7 @@
[contenteditable='true']:empty::before { [contenteditable='true']:empty::before {
content: attr(placeholder); content: attr(placeholder);
@include session-color-subtle(var(--color-text));
font-size: 13px; color: var(--color-text-subtle);
font-size: var(--font-size-sm);
} }

@ -72,16 +72,6 @@
} }
} }
.last-timestamp {
color: $grey;
}
.index {
.gutter .timestamp {
color: $grey;
}
}
.hint { .hint {
color: white; color: white;
border: 2px dashed white; border: 2px dashed white;

@ -29,6 +29,7 @@ import { ExpirationTimerOptions } from '../util/expiringMessages';
// moment does not support es-419 correctly (and cause white screen on app start) // moment does not support es-419 correctly (and cause white screen on app start)
import moment from 'moment'; import moment from 'moment';
import styled from 'styled-components';
// Default to the locale from env. It will be overriden if moment // Default to the locale from env. It will be overriden 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.
@ -43,6 +44,12 @@ type State = {
isInitialLoadComplete: boolean; isInitialLoadComplete: boolean;
}; };
const StyledGutter = styled.div`
width: 380px !important;
transition: none;
background: var(--color-cell-background);
`;
export class SessionInboxView extends React.Component<any, State> { export class SessionInboxView extends React.Component<any, State> {
private store: any; private store: any;
@ -69,10 +76,7 @@ export class SessionInboxView extends React.Component<any, State> {
<div className="inbox index"> <div className="inbox index">
<Provider store={this.store}> <Provider store={this.store}>
<PersistGate loading={null} persistor={persistor}> <PersistGate loading={null} persistor={persistor}>
<div className="gutter"> <StyledGutter>{this.renderLeftPane()}</StyledGutter>
<div className="network-status-container" />
{this.renderLeftPane()}
</div>
<SessionMainPanel /> <SessionMainPanel />
</PersistGate> </PersistGate>
</Provider> </Provider>

@ -1,17 +1,55 @@
import React from 'react'; import React from 'react';
import styled, { CSSProperties } from 'styled-components';
import { Flex } from '../basic/Flex'; import { Flex } from '../basic/Flex';
// tslint:disable: react-unused-props-and-state // tslint:disable: react-unused-props-and-state
interface Props { type Props = {
label: string; label: string;
value: string; value: string;
active: boolean; active: boolean;
group?: string; inputName?: string;
onClick: (value: string) => any; onClick: (value: string) => void;
} };
const StyledInput = styled.input`
opacity: 0;
position: absolute;
cursor: pointer;
width: calc(var(--filled-size) + var(--outline-offset));
height: calc(var(--filled-size) + var(--outline-offset));
:checked + label:before,
:hover + label:before {
background: var(--color-accent);
}
`;
const StyledLabel = styled.label`
cursor: pointer;
:before {
content: '';
display: inline-block;
width: var(--filled-size);
height: var(--filled-size);
margin-inline-end: var(--margin-end);
border-radius: 100%;
transition: var(--default-duration);
padding: 7px;
outline-offset: var(--outline-offset);
outline: var(--color-text) solid 1px;
border: none;
margin-top: 5px;
:hover {
background: var(--color-accent);
}
}
`;
export const SessionRadio = (props: Props) => { export const SessionRadio = (props: Props) => {
const { label, group, value, active, onClick } = props; const { label, inputName, value, active, onClick } = props;
function clickHandler(e: any) { function clickHandler(e: any) {
e.stopPropagation(); e.stopPropagation();
@ -19,18 +57,49 @@ export const SessionRadio = (props: Props) => {
} }
return ( return (
<Flex> <Flex
<input container={true}
padding="0 0 5px"
style={
{
'--filled-size': '15px',
'--margin-end': '1rem',
'--outline-offset': '3px',
} as CSSProperties
}
>
<StyledInput
type="radio" type="radio"
name={group || ''} name={inputName || ''}
value={value} value={value}
aria-checked={active} aria-checked={active}
checked={active} checked={active}
onChange={clickHandler} onChange={clickHandler}
/> />
<label role="button" onClick={clickHandler}> <StyledLabel role="button" onClick={clickHandler}>
{label} {label}
</label> </StyledLabel>
</Flex> </Flex>
); );
}; };
export const SessionRadioInput = (
props: Pick<Props, 'active' | 'inputName' | 'onClick' | 'value'>
) => {
const { active, onClick, inputName, value } = props;
function clickHandler(e: any) {
e.stopPropagation();
onClick(value);
}
return (
<StyledInput
type="radio"
name={inputName || ''}
value={value}
aria-checked={active}
checked={active}
onChange={clickHandler}
/>
);
};

@ -1,4 +1,5 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { SessionRadio } from './SessionRadio'; import { SessionRadio } from './SessionRadio';
@ -10,6 +11,12 @@ interface Props {
onClick: (selectedValue: string) => any; onClick: (selectedValue: string) => any;
} }
const StyledFieldSet = styled.fieldset`
border: none;
margin-inline-start: var(--margins-sm);
margin-top: var(--margins-sm);
`;
export const SessionRadioGroup = (props: Props) => { export const SessionRadioGroup = (props: Props) => {
const [activeItem, setActiveItem] = useState(''); const [activeItem, setActiveItem] = useState('');
const { items, group, initialItem } = props; const { items, group, initialItem } = props;
@ -19,26 +26,24 @@ export const SessionRadioGroup = (props: Props) => {
}, []); }, []);
return ( return (
<div className="session-radio-group"> <StyledFieldSet id={group}>
<fieldset id={group}> {items.map(item => {
{items.map(item => { const itemIsActive = item.value === activeItem;
const itemIsActive = item.value === activeItem;
return ( return (
<SessionRadio <SessionRadio
key={item.value} key={item.value}
label={item.label} label={item.label}
active={itemIsActive} active={itemIsActive}
value={item.value} value={item.value}
group={group} inputName={group}
onClick={(value: string) => { onClick={(value: string) => {
setActiveItem(value); setActiveItem(value);
props.onClick(value); props.onClick(value);
}} }}
/> />
); );
})} })}
</fieldset> </StyledFieldSet>
</div>
); );
}; };

@ -17,7 +17,7 @@ const ExpireTimerCount = styled.div<{
color: string; color: string;
}>` }>`
margin-inline-start: 6px; margin-inline-start: 6px;
font-size: 11px; font-size: var(--font-size-xs);
line-height: 16px; line-height: 16px;
letter-spacing: 0.3px; letter-spacing: 0.3px;
text-transform: uppercase; text-transform: uppercase;
@ -27,7 +27,7 @@ const ExpireTimerCount = styled.div<{
const ExpireTimerBucket = styled.div` const ExpireTimerBucket = styled.div`
margin-inline-start: 6px; margin-inline-start: 6px;
font-size: 11px; font-size: var(--font-size-xs);
line-height: 16px; line-height: 16px;
letter-spacing: 0.3px; letter-spacing: 0.3px;
text-transform: uppercase; text-transform: uppercase;

@ -24,7 +24,7 @@ const LastSeenBar = styled.div`
const LastSeenText = styled.div` const LastSeenText = styled.div`
margin-top: 3px; margin-top: 3px;
font-size: 11px; font-size: var(--font-size-xs);
line-height: 26px; line-height: 26px;
letter-spacing: 0.3px; letter-spacing: 0.3px;
text-transform: uppercase; text-transform: uppercase;

@ -14,7 +14,7 @@ type Props = {
const UPDATE_FREQUENCY = 60 * 1000; const UPDATE_FREQUENCY = 60 * 1000;
const TimestampContainerNotListItem = styled.div` const TimestampContainerNotListItem = styled.div`
font-size: 11px; font-size: var(--font-size-xs);
line-height: 16px; line-height: 16px;
letter-spacing: 0.3px; letter-spacing: 0.3px;
text-transform: uppercase; text-transform: uppercase;

@ -29,7 +29,7 @@ const StyledMessageRequestBanner = styled.div`
const StyledMessageRequestBannerHeader = styled.span` const StyledMessageRequestBannerHeader = styled.span`
font-weight: bold; font-weight: bold;
font-size: 15px; font-size: var(--font-size-md);
color: var(--color-text-subtle); color: var(--color-text-subtle);
padding-left: var(--margins-xs); padding-left: var(--margins-xs);
margin-inline-start: 12px; margin-inline-start: 12px;

@ -96,7 +96,7 @@ const MentionAtSymbol = styled.span`
margin-inline-start: 5px; margin-inline-start: 5px;
font-weight: 300; font-weight: 300;
font-size: 11px; font-size: var(--font-size-xs);
letter-spacing: 0.25px; letter-spacing: 0.25px;
height: 16px; height: 16px;

@ -14,6 +14,7 @@ import { getPrivateContactsPubkeys } from '../../../state/selectors/conversation
import { SpacerLG } from '../../basic/Text'; import { SpacerLG } from '../../basic/Text';
import { MainViewController } from '../../MainViewController'; import { MainViewController } from '../../MainViewController';
import useKey from 'react-use/lib/useKey'; import useKey from 'react-use/lib/useKey';
import styled from 'styled-components';
export const OverlayClosedGroup = () => { export const OverlayClosedGroup = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -85,9 +86,11 @@ export const OverlayClosedGroup = () => {
<SessionSpinner loading={loading} /> <SessionSpinner loading={loading} />
<SpacerLG /> <SpacerLG />
<div className="group-member-list__container"> <StyledGroupMemberListContainer>
{noContactsForClosedGroup ? ( {noContactsForClosedGroup ? (
<div className="group-member-list__no-contacts">{window.i18n('noContactsForGroup')}</div> <StyledMemberListNoContacts>
{window.i18n('noContactsForGroup')}
</StyledMemberListNoContacts>
) : ( ) : (
<div className="group-member-list__selection"> <div className="group-member-list__selection">
{privateContactsPubkeys.map((memberPubkey: string) => ( {privateContactsPubkeys.map((memberPubkey: string) => (
@ -105,7 +108,7 @@ export const OverlayClosedGroup = () => {
))} ))}
</div> </div>
)} )}
</div> </StyledGroupMemberListContainer>
<SpacerLG /> <SpacerLG />
@ -120,3 +123,18 @@ export const OverlayClosedGroup = () => {
</div> </div>
); );
}; };
const StyledMemberListNoContacts = styled.div`
font-family: var(--font-font-mono);
background: var(--color-cell-background);
text-align: center;
padding: 20px;
`;
const StyledGroupMemberListContainer = styled.div`
padding: 2px 0px;
width: 100%;
max-height: 400px;
overflow-y: auto;
border: var(--border-session);
`;

@ -99,7 +99,7 @@ const StyledContactSection = styled.div`
display: flex; display: flex;
.session-button { .session-button {
font-size: 11px; font-size: var(--font-size-xs);
padding: 6px; padding: 6px;
height: auto; height: auto;
margin: 0px; margin: 0px;

@ -141,7 +141,7 @@ const ResultBody = styled.div`
margin-top: 1px; margin-top: 1px;
flex-shrink: 1; flex-shrink: 1;
font-size: 13px; font-size: var(--font-size-sm);
color: var(--color-text-subtle); color: var(--color-text-subtle);
@ -157,7 +157,7 @@ const StyledTimestampContaimer = styled.div`
flex-shrink: 0; flex-shrink: 0;
margin-inline-start: 6px; margin-inline-start: 6px;
font-size: 11px; font-size: var(--font-size-xs);
line-height: 16px; line-height: 16px;
letter-spacing: 0.3px; letter-spacing: 0.3px;

@ -20,7 +20,7 @@ const StyledSeparatorSection = styled.div`
color: var(--color-text); color: var(--color-text);
font-size: 13px; font-size: var(--font-size-sm);
font-weight: 400; font-weight: 400;
letter-spacing: 0; letter-spacing: 0;
`; `;

@ -804,6 +804,7 @@ async function sendOnionRequestHandlingSnodeEject({
decodingSymmetricKey = result.decodingSymmetricKey; decodingSymmetricKey = result.decodingSymmetricKey;
} catch (e) { } catch (e) {
window?.log?.warn('sendOnionRequestNoRetries error message: ', e.message); window?.log?.warn('sendOnionRequestNoRetries error message: ', e.message);
// const isTimeout = (e.message && isString(e.message) && (e.message as string).toLowerCase().includes('network timeout at'))
if (e.code === 'ENETUNREACH' || e.message === 'ENETUNREACH' || throwErrors) { if (e.code === 'ENETUNREACH' || e.message === 'ENETUNREACH' || throwErrors) {
throw e; throw e;
} }

Loading…
Cancel
Save