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

feat: added heading component

Browse Source 
improved join community suggested rooms stylings
pull/3083/head
William Grant 10 months ago
parent 692f1f51d0
commit 69f4fd2892
5 changed files with 130 additions and 56 deletions
Show Stats Download Patch File Download Diff File

55
ts/components/basic/Heading.tsx
Unescape Escape View File

@ -0,0 +1,55 @@
import { ReactNode } from 'react';
import styled, { CSSProperties } from 'styled-components';
export type HeadingProps = {
children: string | ReactNode;
color?: string;
style?: CSSProperties;
/** center | start (left) | end (right) */
alignText?: 'center' | 'start' | 'end';
fontWeight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
padding?: string;
margin?: string;
};
type StyledHeadingProps = HeadingProps & {
// TODO add h5 to h9 once we update the typography from the design system
size: 'h1' | 'h2' | 'h3' | 'h4';
};
const headingStyles = (props: StyledHeadingProps) => `
margin: ${props.margin ? props.margin : '0'};
padding: ${props.padding ? props.padding : '0'};
font-weight: ${props.fontWeight ? props.fontWeight : '700'};
${props.size ? `font-size: var(--font-size-${props.size});` : ''}
${props.color ? `color: ${props.color};` : ''}
${props.alignText ? `text-align: ${props.alignText};` : ''}
`;
const Heading = (headerProps: StyledHeadingProps) => {
const StyledHeading = styled(headerProps.size)<StyledHeadingProps>`
${props => headingStyles(props)}
`;
return <StyledHeading {...headerProps}>{headerProps.children}</StyledHeading>;
};
/** --font-size-h1 30px */
export const H1 = (props: HeadingProps) => {
return <Heading {...props} size="h1" />;
};
/** --font-size-h2 24px */
export const H2 = (props: HeadingProps) => {
return <Heading {...props} size="h2" />;
};
/** --font-size-h3 20px */
export const H3 = (props: HeadingProps) => {
return <Heading {...props} size="h3" />;
};
/** --font-size-h4 16px */
export const H4 = (props: HeadingProps) => {
return <Heading {...props} size="h4" />;
};

13
ts/components/basic/PillContainer.tsx
Unescape Escape View File

@ -1,5 +1,6 @@
import { ReactNode } from 'react';
import styled from 'styled-components';
import { Flex } from './Flex';
type PillContainerProps = {
children: ReactNode;
@ -9,25 +10,22 @@ type PillContainerProps = {
disableHover?: boolean;
};
export const StyledPillContainerHoverable = styled.div<PillContainerProps>`
export const StyledPillContainerHoverable = styled(Flex)<PillContainerProps>`
background: none;
position: relative;
flex-direction: 'row';
flex-shrink: 0;
min-width: 50%;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
align-items: center;
padding: ${props => props.padding || ''};
margin: ${props => props.margin || ''};
`;
const StyledPillInner = styled.div<PillContainerProps>`
background: none;
width: 100%;
display: flex;
flex-direction: 'row';
justify-content: flex-start;
align-items: center;
flex-grow: 1;
flex-shrink: 0;
@ -35,7 +33,6 @@ const StyledPillInner = styled.div<PillContainerProps>`
white-space: nowrap;
text-overflow: ellipsis;
align-items: center;
padding: ${props => props.padding || ''};
margin: ${props => props.margin || ''};
border-radius: 300px;

13
ts/components/basic/Text.tsx
Unescape Escape View File

@ -78,16 +78,3 @@ export const Spacer2XL = (props: { style?: CSSProperties }) => {
export const Spacer3XL = (props: { style?: CSSProperties }) => {
return <Spacer size="3xl" style={props.style} />;
};
type H3Props = {
text: string;
};
const StyledH3 = styled.div<H3Props>`
transition: var(--default-duration);
font-family: var(--font-default);
font-size: var(--font-size-md);
font-weight: 700;
`;
export const H3 = (props: H3Props) => <StyledH3 {...props}>{props.text}</StyledH3>;

55
ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx
Unescape Escape View File

@ -4,12 +4,14 @@ import { useDispatch, useSelector } from 'react-redux';
import styled from 'styled-components';
import { parseOpenGroupV2 } from '../../../session/apis/open_group_api/opengroupV2/JoinOpenGroupV2';
import { sogsV3FetchPreviewBase64 } from '../../../session/apis/open_group_api/sogsv3/sogsV3FetchFile';
import { updateDefaultBase64RoomData } from '../../../state/ducks/defaultRooms';
import { DefaultRoomsState, updateDefaultBase64RoomData } from '../../../state/ducks/defaultRooms';
import { StateType } from '../../../state/reducer';
import { useHTMLDirection } from '../../../util/i18n';
import { Avatar, AvatarSize } from '../../avatar/Avatar';
import { Flex } from '../../basic/Flex';
import { H4 } from '../../basic/Heading';
import { PillContainerHoverable, StyledPillContainerHoverable } from '../../basic/PillContainer';
import { H3, SpacerSM } from '../../basic/Text';
import { SpacerXS } from '../../basic/Text';
import { SessionSpinner } from '../../loading';
export type JoinableRoomProps = {
@ -23,6 +25,7 @@ export type JoinableRoomProps = {
const SessionJoinableRoomAvatar = (props: JoinableRoomProps) => {
const dispatch = useDispatch();
useEffect(() => {
let isCancelled = false;
@ -81,10 +84,11 @@ const SessionJoinableRoomAvatar = (props: JoinableRoomProps) => {
};
const StyledRoomName = styled(Flex)`
font-size: var(--font-size-md);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0 10px;
margin: 0 var(--margins-sm);
`;
const SessionJoinableRoomName = (props: JoinableRoomProps) => {
@ -100,8 +104,12 @@ const SessionJoinableRoomRow = (props: JoinableRoomProps) => {
: undefined;
return (
<StyledPillContainerHoverable>
<PillContainerHoverable onClick={onClickWithUrl} margin="5px" padding="5px">
<StyledPillContainerHoverable container={true} alignItems="center" flexShrink={0} width={'70%'}>
<PillContainerHoverable
onClick={onClickWithUrl}
margin={'var(--margins-sm)'}
padding="var(--margins-xs) var(--margins-sm)"
>
<SessionJoinableRoomAvatar {...props} />
<SessionJoinableRoomName {...props} />
</PillContainerHoverable>
@ -110,14 +118,13 @@ const SessionJoinableRoomRow = (props: JoinableRoomProps) => {
};
const JoinableRooms = (props: {
joinableRooms: DefaultRoomsState;
alreadyJoining: boolean;
onJoinClick?: (completeUrl: string) => void;
}) => {
const joinableRooms = useSelector((state: StateType) => state.defaultRooms);
return (
<>
{joinableRooms.rooms.map(r => {
{props.joinableRooms.rooms.map(r => {
return (
<SessionJoinableRoomRow
key={r.id}
@ -138,6 +145,7 @@ export const SessionJoinableRooms = (props: {
onJoinClick?: (completeUrl: string) => void;
alreadyJoining: boolean;
}) => {
const htmlDirection = useHTMLDirection();
const joinableRooms = useSelector((state: StateType) => state.defaultRooms);
if (!joinableRooms.inProgress && !joinableRooms.rooms?.length) {
@ -146,14 +154,35 @@ export const SessionJoinableRooms = (props: {
}
return (
<Flex container={true} flexGrow={1} flexDirection="column" width="93%">
<H3 text={window.i18n('orJoinOneOfThese')} />
<SpacerSM />
<Flex container={true} flexGrow={0} flexWrap="wrap" justifyContent="center">
<Flex
container={true}
flexGrow={1}
flexDirection="column"
alignItems="center"
dir={htmlDirection}
width="100%"
>
<H4>{window.i18n('orJoinOneOfThese')}</H4>
<SpacerXS />
<Flex
container={true}
flexDirection="column"
justifyContent="center"
alignItems="center"
flexGrow={0}
flexWrap="wrap"
dir={htmlDirection}
width={'100%'}
margin={'0 0 0 calc(var(--margins-md) * -1)'}
>
{joinableRooms.inProgress ? (
<SessionSpinner loading={true} />
) : (
<JoinableRooms {...props} />
<JoinableRooms
joinableRooms={joinableRooms}
alreadyJoining={props.alreadyJoining}
onJoinClick={props.onJoinClick}
/>
)}
</Flex>
</Flex>

50
ts/themes/globals.tsx
Unescape Escape View File

@ -13,25 +13,28 @@ export type ThemeGlobals = {
'--font-default': string;
'--font-accent': string;
'--font-mono': string;
'--font-size-xs': string;
'--font-size-sm': string;
'--font-size-md': string;
'--font-size-lg': string;
'--font-debug': string;
'--font-size-xl': string;
'--font-size-lg': string;
'--font-size-md': string;
'--font-size-sm': string;
'--font-size-xs': string;
'--font-size-h1': string;
'--font-size-h2': string;
'--font-size-h3': string;
'--font-size-h4': string;
/* Margins */
'--margins-xxs': string;
'--margins-xs': string;
'--margins-sm': string;
'--margins-md': string;
'--margins-lg': string;
'--margins-xl': string;
'--margins-2xl': string;
'--margins-3xl': string;
'--margins-2xl': string;
'--margins-xl': string;
'--margins-lg': string;
'--margins-md': string;
'--margins-sm': string;
'--margins-xs': string;
'--margins-xxs': string;
/* Padding */
'--padding-message-content': string;
@ -121,24 +124,27 @@ export const THEME_GLOBALS: ThemeGlobals = {
'--font-default': 'Roboto',
'--font-accent': 'Loor',
'--font-mono': 'SpaceMono',
'--font-size-xs': '11px',
'--font-size-sm': '13px',
'--font-size-md': '15px',
'--font-size-lg': '17px',
'--font-debug': "Monaco, Consolas, 'Courier New', Courier, monospace",
'--font-size-xl': '19px',
'--font-size-lg': '17px',
'--font-size-md': '15px',
'--font-size-sm': '13px',
'--font-size-xs': '11px',
'--font-size-h1': '30px',
'--font-size-h2': '24px',
'--font-size-h3': '20px',
'--font-size-h4': '16px',
'--margins-xxs': '2.5px',
'--margins-xs': '5px',
'--margins-sm': '10px',
'--margins-md': '15px',
'--margins-lg': '20px',
'--margins-xl': '25px',
'--margins-2xl': '30px',
'--margins-3xl': '35px',
'--margins-2xl': '30px',
'--margins-xl': '25px',
'--margins-lg': '20px',
'--margins-md': '15px',
'--margins-sm': '10px',
'--margins-xs': '5px',
'--margins-xxs': '2.5px',
'--padding-message-content': '7px 13px',
'--padding-link-preview': '-7px -13px 7px -13px', // bottom has positive value because a link preview has always a body below

Write Preview
Loading…
Cancel
Save