mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Alternative inbox visuals

Browse source
This commit is contained in:
Fedor Indutny 2024-07-03 14:15:54 -07:00 • committed by GitHub
parent f6650c0b91
commit b6ce2f957d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
21 changed files with 97 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
images/logo-parts/base.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M64 12a52 52 0 0 0-44 79.67L15 113l21.33-5A52 52 0 1 0 64 12Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 144 B

1
images/logo-parts/p1.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M20.39 117.11 8 120l2.89-12.39-5.84-1.37-2.89 12.39a6 6 0 0 0 7.21 7.21L21.75 123Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 165 B

1
images/logo-parts/p10.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M118.8 30.92 113.66 34a57.84 57.84 0 0 1 6.65 16.06l5.82-1.44a63.76 63.76 0 0 0-7.33-17.7z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 173 B

1
images/logo-parts/p11.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M122 64a57.9 57.9 0 0 1-.65 8.69l5.93.9a64.23 64.23 0 0 0 0-19.18l-5.93.9A57.9 57.9 0 0 1 122 64Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 180 B

1
images/logo-parts/p12.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m126.13 79.36-5.82-1.44A57.84 57.84 0 0 1 113.66 94l5.14 3.1a63.76 63.76 0 0 0 7.33-17.74z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 173 B

1
images/logo-parts/p13.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M110.69 98.41a58.21 58.21 0 0 1-12.29 12.28l3.56 4.83A64.1 64.1 0 0 0 115.52 102Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 164 B

1
images/logo-parts/p14.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M97.08 118.8 94 113.66a57.84 57.84 0 0 1-16.06 6.65l1.44 5.82a63.76 63.76 0 0 0 17.7-7.33z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 173 B

1
images/logo-parts/p15.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M72.69 121.36a58.41 58.41 0 0 1-17.38 0l-.9 5.93a64.23 64.23 0 0 0 19.18 0z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 158 B

1
images/logo-parts/p16.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m34.3 113.89-8.59 2 1.36 5.84 6.32-1.47a63.52 63.52 0 0 0 15.21 5.9l1.44-5.82a57.75 57.75 0 0 1-15.7-6.49z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 189 B

1
images/logo-parts/p2.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m6.3 100.89 5.84 1.36 2-8.59a57.75 57.75 0 0 1-6.45-15.74l-5.82 1.44a63.52 63.52 0 0 0 5.9 15.21z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 180 B

1
images/logo-parts/p3.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M6 64a57.9 57.9 0 0 1 .65-8.69l-5.93-.9a64.23 64.23 0 0 0 0 19.18l5.93-.9A57.9 57.9 0 0 1 6 64Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 178 B

1
images/logo-parts/p4.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M9.2 30.92a63.76 63.76 0 0 0-7.33 17.72l5.82 1.44A57.84 57.84 0 0 1 14.34 34Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 160 B

1
images/logo-parts/p5.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M17.31 29.6A58.21 58.21 0 0 1 29.6 17.31L26 12.48A64.1 64.1 0 0 0 12.48 26Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 158 B

1
images/logo-parts/p6.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m48.64 1.87 1.44 5.82A57.84 57.84 0 0 0 34 14.34L30.92 9.2a63.76 63.76 0 0 1 17.72-7.33Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 171 B

1
images/logo-parts/p7.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M55.31 6.65a58.41 58.41 0 0 1 17.38 0l.9-5.93a64.23 64.23 0 0 0-19.18 0z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 155 B

1
images/logo-parts/p8.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="m79.36 1.87-1.44 5.82A57.84 57.84 0 0 1 94 14.34l3.1-5.14a63.76 63.76 0 0 0-17.74-7.33Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 170 B

1
images/logo-parts/p9.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M98.4 17.31a58.21 58.21 0 0 1 12.29 12.29l4.83-3.6A64.1 64.1 0 0 0 102 12.48Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 160 B

42
stylesheets/components/Inbox.scss
View file

@ -34,3 +34,45 @@
}
}
}
.Inbox__logo {
flex-shrink: 0;
display: block;
width: 150px;
height: 150px;
margin-block: 24px;
position: relative;
.Inbox__logo__part {
width: 100%;
height: 100%;
position: absolute;
}
.Inbox__logo__part--base {
@include color-svg('../images/logo-parts/base.svg', $color-white);
z-index: 1;
}
.Inbox__logo__part--segment {
opacity: 0;
z-index: 2;
}
.Inbox__logo__part--animated {
transition: opacity 250ms, transform 250ms;
}
@for $i from 1 through 16 {
.Inbox__logo__part--segment:nth-child(#{$i + 1}) {
@include color-svg('../images/logo-parts/p#{$i}.svg', $color-white);
transform: rotate(#{(16 - $i) * 22.5}deg);
}
}
.Inbox__logo__part--segment:nth-child(n).Inbox__logo__part--visible {
transform: rotate(0deg);
opacity: 1;
}
}

2
ts/components/Inbox.stories.tsx
View file

@ -19,10 +19,12 @@ export default {
args: {
i18n,
hasInitialLoadCompleted: false,
isAlpha: false,
isCustomizingPreferredReactions: false,
},
argTypes: {
daysAgo: { control: { type: 'number' } },
isAlpha: { control: { type: 'boolean' } },
},
} satisfies Meta<PropsType & { daysAgo?: number }>;

36
ts/components/Inbox.tsx
View file

@ -3,6 +3,7 @@
import type { ReactNode } from 'react';
import React, { useEffect, useState, useMemo } from 'react';
import classNames from 'classnames';
import type { LocalizerType } from '../types/Util';
import * as log from '../logging/log';
import { SECOND, DAY } from '../util/durations';
@ -13,6 +14,7 @@ export type PropsType = {
envelopeTimestamp: number | undefined;
hasInitialLoadCompleted: boolean;
i18n: LocalizerType;
isAlpha: boolean;
isCustomizingPreferredReactions: boolean;
navTabsCollapsed: boolean;
onToggleNavTabsCollapse: (navTabsCollapsed: boolean) => unknown;
@ -23,11 +25,14 @@ export type PropsType = {
renderStoriesTab: () => JSX.Element;
};
const PART_COUNT = 16;
export function Inbox({
firstEnvelopeTimestamp,
envelopeTimestamp,
hasInitialLoadCompleted,
i18n,
isAlpha,
isCustomizingPreferredReactions,
navTabsCollapsed,
onToggleNavTabsCollapse,
@ -89,7 +94,7 @@ export function Inbox({
}, [hasInitialLoadCompleted]);
if (!internalHasInitialLoadCompleted) {
let loadingProgress = 0;
let loadingProgress = 100;
if (
firstEnvelopeTimestamp !== undefined &&
envelopeTimestamp !== undefined
@ -122,11 +127,38 @@ export function Inbox({
}
}
let logo: JSX.Element;
if (isAlpha) {
const parts = new Array<JSX.Element>();
parts.push(
<i key="base" className="Inbox__logo__part Inbox__logo__part--base" />
);
for (let i = 0; i < PART_COUNT; i += 1) {
const isVisible = i <= (loadingProgress * PART_COUNT) / 100;
parts.push(
<i
key={i}
className={classNames({
Inbox__logo__part: true,
'Inbox__logo__part--animated':
firstEnvelopeTimestamp !== undefined && loadingProgress !== 0,
'Inbox__logo__part--segment': true,
'Inbox__logo__part--visible': isVisible,
})}
/>
);
}
logo = <div className="Inbox__logo">{parts}</div>;
} else {
logo = <div className="module-splash-screen__logo module-img--150" />;
}
return (
<div className="app-loading-screen">
<div className="module-title-bar-drag-area" />
<div className="module-splash-screen__logo module-img--150" />
{logo}
{envelopeTimestamp === undefined ? (
<div className="dot-container">
<span className="dot" />

2
ts/state/smart/Inbox.tsx
View file

@ -4,6 +4,7 @@
import React, { memo } from 'react';
import { useSelector } from 'react-redux';
import { Inbox } from '../../components/Inbox';
import { isAlpha } from '../../util/version';
import { getIntl } from '../selectors/user';
import { SmartCustomizingPreferredReactionsModal } from './CustomizingPreferredReactionsModal';
import { getIsCustomizingPreferredReactions } from '../selectors/preferredReactions';
@ -58,6 +59,7 @@ export const SmartInbox = memo(function SmartInbox(): JSX.Element {
firstEnvelopeTimestamp={firstEnvelopeTimestamp}
hasInitialLoadCompleted={hasInitialLoadCompleted}
i18n={i18n}
isAlpha={isAlpha(window.getVersion())}
isCustomizingPreferredReactions={isCustomizingPreferredReactions}
navTabsCollapsed={navTabsCollapsed}
onToggleNavTabsCollapse={toggleNavTabsCollapse}