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

chore: move session radio group to styled components

Browse Source 
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
23 changed files with 163 additions and 289 deletions
Show Stats Download Patch File Download Diff File

17
stylesheets/_global.scss
Unescape Escape View File

@ -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 {
z-index: 100;

64
stylesheets/_index.scss
Unescape Escape View File

@ -52,21 +52,6 @@
.avatar-center-inner {
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 {
@ -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 {
margin: 10px;
padding: 1em;

38
stylesheets/_modal.scss
Unescape Escape View File

@ -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 {
& ~ .index.inbox {
// 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 {
.session-modal__header__title {
font-size: $session-font-lg;

10
stylesheets/_modules.scss
Unescape Escape View File

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

6
stylesheets/_quote.scss
Unescape Escape View File

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

87
stylesheets/_session.scss
Unescape Escape View File

@ -280,8 +280,7 @@ textarea {
font-size: $session-font-md;
&-text {
@include session-color-subtle(var(--color-text));
color: var(--color-text-subtle);
font-weight: 400;
font-size: $session-font-sm;
line-height: $session-font-sm;
@ -883,14 +882,9 @@ label {
font-size: $session-font-sm;
font-weight: 100;
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 {
.session-toggle {
transition: $session-transition-duration;
@ -978,60 +972,10 @@ label {
border-radius: 3px;
}
.seed-dialog {
&__description {
max-width: $session-modal-size-lg;
}
}
.messages li {
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 {
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 {
.session-icon-button {
display: flex;
@ -1168,27 +1101,11 @@ input {
}
.group-member-list {
&__container {
padding: 2px 0px;
width: 100%;
max-height: 400px;
overflow-y: auto;
border: var(--border-session);
}
&__selection {
height: 100%;
display: flex;
flex-direction: column;
}
&__no-contacts {
font-family: $session-font-mono;
background: var(--color-cell-background);
text-align: center;
padding: 20px;
}
}
.create-group-name-input {

4
stylesheets/_session_constants.scss
Unescape Escape View File

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

10
stylesheets/_session_left_pane.scss
Unescape Escape View File

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

15
stylesheets/_session_signin.scss
Unescape Escape View File

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

10
stylesheets/_theme_dark.scss
Unescape Escape View File

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

12
ts/components/SessionInboxView.tsx
Unescape Escape View File

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

89
ts/components/basic/SessionRadio.tsx
Unescape Escape View File

@ -1,17 +1,55 @@
import React from 'react';
import styled, { CSSProperties } from 'styled-components';
import { Flex } from '../basic/Flex';
// tslint:disable: react-unused-props-and-state
interface Props {
type Props = {
label: string;
value: string;
active: boolean;
group?: string;
onClick: (value: string) => any;
}
inputName?: string;
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) => {
const { label, group, value, active, onClick } = props;
const { label, inputName, value, active, onClick } = props;
function clickHandler(e: any) {
e.stopPropagation();
@ -19,18 +57,49 @@ export const SessionRadio = (props: Props) => {
}
return (
<Flex>
<input
<Flex
container={true}
padding="0 0 5px"
style={
{
'--filled-size': '15px',
'--margin-end': '1rem',
'--outline-offset': '3px',
} as CSSProperties
}
>
<StyledInput
type="radio"
name={group || ''}
name={inputName || ''}
value={value}
aria-checked={active}
checked={active}
onChange={clickHandler}
/>
<label role="button" onClick={clickHandler}>
<StyledLabel role="button" onClick={clickHandler}>
{label}
</label>
</StyledLabel>
</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}
/>
);
};

45
ts/components/basic/SessionRadioGroup.tsx
Unescape Escape View File

@ -1,4 +1,5 @@
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { SessionRadio } from './SessionRadio';
@ -10,6 +11,12 @@ interface Props {
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) => {
const [activeItem, setActiveItem] = useState('');
const { items, group, initialItem } = props;
@ -19,26 +26,24 @@ export const SessionRadioGroup = (props: Props) => {
}, []);
return (
<div className="session-radio-group">
<fieldset id={group}>
{items.map(item => {
const itemIsActive = item.value === activeItem;
<StyledFieldSet id={group}>
{items.map(item => {
const itemIsActive = item.value === activeItem;
return (
<SessionRadio
key={item.value}
label={item.label}
active={itemIsActive}
value={item.value}
group={group}
onClick={(value: string) => {
setActiveItem(value);
props.onClick(value);
}}
/>
);
})}
</fieldset>
</div>
return (
<SessionRadio
key={item.value}
label={item.label}
active={itemIsActive}
value={item.value}
inputName={group}
onClick={(value: string) => {
setActiveItem(value);
props.onClick(value);
}}
/>
);
})}
</StyledFieldSet>
);
};

4
ts/components/conversation/ExpireTimer.tsx
Unescape Escape View File

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

2
ts/components/conversation/SessionLastSeenIndicator.tsx
Unescape Escape View File

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

2
ts/components/conversation/Timestamp.tsx
Unescape Escape View File

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

2
ts/components/leftpane/MessageRequestsBanner.tsx
Unescape Escape View File

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

2
ts/components/leftpane/conversation-list-item/HeaderItem.tsx
Unescape Escape View File

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

24
ts/components/leftpane/overlay/OverlayClosedGroup.tsx
Unescape Escape View File

@ -14,6 +14,7 @@ import { getPrivateContactsPubkeys } from '../../../state/selectors/conversation
import { SpacerLG } from '../../basic/Text';
import { MainViewController } from '../../MainViewController';
import useKey from 'react-use/lib/useKey';
import styled from 'styled-components';
export const OverlayClosedGroup = () => {
const dispatch = useDispatch();
@ -85,9 +86,11 @@ export const OverlayClosedGroup = () => {
<SessionSpinner loading={loading} />
<SpacerLG />
<div className="group-member-list__container">
<StyledGroupMemberListContainer>
{noContactsForClosedGroup ? (
<div className="group-member-list__no-contacts">{window.i18n('noContactsForGroup')}</div>
<StyledMemberListNoContacts>
{window.i18n('noContactsForGroup')}
</StyledMemberListNoContacts>
) : (
<div className="group-member-list__selection">
{privateContactsPubkeys.map((memberPubkey: string) => (
@ -105,7 +108,7 @@ export const OverlayClosedGroup = () => {
))}
</div>
)}
</div>
</StyledGroupMemberListContainer>
<SpacerLG />
@ -120,3 +123,18 @@ export const OverlayClosedGroup = () => {
</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);
`;

2
ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
Unescape Escape View File

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

4
ts/components/search/MessageSearchResults.tsx
Unescape Escape View File

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

2
ts/components/search/SearchResults.tsx
Unescape Escape View File

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

1
ts/session/apis/snode_api/onions.ts
Unescape Escape View File

@ -804,6 +804,7 @@ async function sendOnionRequestHandlingSnodeEject({
decodingSymmetricKey = result.decodingSymmetricKey;
} catch (e) {
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) {
throw e;
}

Write Preview
Loading…
Cancel
Save