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

Stories improvements

Browse source
This commit is contained in:
Josh Perez 2022-07-21 21:38:27 -04:00 committed by GitHub
parent 5dfe30d235
commit badf9d7dda
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 44 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
images/icons/v2/signal-connections.svg Normal file
View file

@ -0,0 +1 @@
<svg fill="none" height="88" viewBox="0 0 88 88" width="88" xmlns="http://www.w3.org/2000/svg"><path d="m30.6876 32.2705c6.3397 0 11.6353-5.2955 11.6353-11.6352 0-6.3771-5.2956-11.6353-11.6353-11.6353-6.377 0-11.6725 5.2582-11.6725 11.6353 0 6.3397 5.2955 11.6352 11.6725 11.6352zm26.0302 0c6.3397 0 11.6352-5.2955 11.6352-11.6352 0-6.3771-5.2955-11.6353-11.6352-11.6353s-11.6353 5.2582-11.6353 11.6353c0 6.3397 5.2956 11.6352 11.6353 11.6352zm-26.0302-2.7596c-4.848 0-8.8756-4.0649-8.8756-8.8756 0-4.8481 4.0276-8.8757 8.8756-8.8757 4.8108 0 8.8383 4.0276 8.8383 8.8757 0 4.8107-4.0275 8.8756-8.8383 8.8756zm26.0302 0c-4.848 0-8.8756-4.0649-8.8756-8.8756 0-4.8481 4.0276-8.8757 8.8756-8.8757s8.8756 4.0276 8.8756 8.8757c0 4.8107-4.0276 8.8756-8.8756 8.8756zm-39.0825 26.1047c6.377 0 11.6352-5.2955 11.6352-11.6353 0-6.377-5.2582-11.6352-11.6352-11.6352-6.3398 0-11.6353 5.2582-11.6353 11.6352 0 6.3398 5.2955 11.6353 11.6353 11.6353zm52.0975 0c6.3771 0 11.6726-5.2955 11.6726-11.6353 0-6.377-5.2955-11.6352-11.6726-11.6352-6.3397 0-11.6352 5.2582-11.6352 11.6352 0 6.3398 5.2955 11.6353 11.6352 11.6353zm-52.0975-2.7596c-4.8108 0-8.87566-4.0649-8.87566-8.8757 0-4.848 4.06486-8.8756 8.87566-8.8756 4.848 0 8.8756 4.0276 8.8756 8.8756 0 4.8108-4.0276 8.8757-8.8756 8.8757zm52.0975 0c-4.8107 0-8.8756-4.0649-8.8756-8.8757 0-4.848 4.0649-8.8756 8.8756-8.8756 4.8481 0 8.8757 4.0276 8.8757 8.8756 0 4.8108-4.0276 8.8757-8.8757 8.8757zm-39.0452 26.1047c6.3397 0 11.6353-5.2955 11.6353-11.6353 0-6.377-5.2956-11.6352-11.6353-11.6352-6.377 0-11.6725 5.2582-11.6725 11.6352 0 6.3398 5.2955 11.6353 11.6725 11.6353zm26.0302 0c6.3397 0 11.6352-5.2955 11.6352-11.6353 0-6.377-5.2955-11.6352-11.6352-11.6352s-11.6353 5.2582-11.6353 11.6352c0 6.3398 5.2956 11.6353 11.6353 11.6353zm-26.0302-2.7597c-4.848 0-8.8756-4.0648-8.8756-8.8756 0-4.848 4.0276-8.8756 8.8756-8.8756 4.8108 0 8.8383 4.0276 8.8383 8.8756 0 4.8108-4.0275 8.8756-8.8383 8.8756zm26.0302 0c-4.848 0-8.8756-4.0648-8.8756-8.8756 0-4.848 4.0276-8.8756 8.8756-8.8756s8.8756 4.0276 8.8756 8.8756c0 4.8108-4.0276 8.8756-8.8756 8.8756z" fill="#000"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

3
stylesheets/_modules.scss
View file

@ -2620,6 +2620,7 @@ button.ConversationDetails__action-button {
background-color: $color-accent-red;
color: $color-white;
display: flex;
font-size: 10px;
height: 16px;
justify-content: center;
min-width: 16px;
@ -2627,7 +2628,7 @@ button.ConversationDetails__action-button {
padding: 0 2px;
position: absolute;
right: -6px;
top: -6px;
top: -4px;
user-select: none;
z-index: $z-index-base;
}

1
stylesheets/_variables.scss
View file

@ -263,6 +263,7 @@ $z-index-window-controls: 10000;
// Component specific
// The scroll down button should be above everything in the timeline but
// popups, tooltips, toasts, and other items should stack above it.
$z-index-story-meta: 3;
$z-index-scroll-down-button: 10;
$z-index-stories: 97;
$z-index-calling: 98;

12
stylesheets/components/SignalConnectionsModal.scss
View file

@ -4,6 +4,18 @@
.SignalConnectionsModal {
color: $color-gray-05;
&__icon {
@include color-svg(
'../images/icons/v2/signal-connections.svg',
$color-ultramarine-light
);
display: block;
height: 69px;
margin: 0 auto;
margin-bottom: 24px;
width: 75px;
}
&__list {
margin: 16px 0;

33
stylesheets/components/Stories.scss
View file

@ -22,8 +22,10 @@
padding-top: calc(14px + var(--title-bar-drag-area-height));
&__settings {
margin-left: 24px;
opacity: 1;
position: absolute;
right: 12px;
top: -6px;
&::after {
@include dark-theme {
@ -40,6 +42,7 @@
display: flex;
justify-content: space-between;
padding: 0 16px;
position: relative;
&--centered {
justify-content: flex-start;
@ -65,6 +68,8 @@
$color-white
);
height: 22px;
position: absolute;
right: 63px;
width: 22px;
}
@ -72,31 +77,15 @@
@include button-reset;
height: 24px;
position: absolute;
width: 24px;
@include light-theme {
@include color-svg(
'../images/icons/v2/chevron-left-24.svg',
$color-gray-60
);
}
@include color-svg(
'../images/icons/v2/chevron-left-24.svg',
$color-white
);
@include keyboard-mode {
&:focus {
@include color-svg(
'../images/icons/v2/chevron-left-24.svg',
$color-ultramarine
);
}
}
@include dark-theme {
@include color-svg(
'../images/icons/v2/chevron-left-24.svg',
$color-gray-25
);
}
@include dark-keyboard-mode {
&:hover {
@include color-svg(
'../images/icons/v2/chevron-left-24.svg',

1
stylesheets/components/StoryListItem.scss
View file

@ -25,6 +25,7 @@
flex: 1;
flex-direction: column;
margin-left: 12px;
margin-right: 12px;
&--title {
@include font-body-1-bold;

2
stylesheets/components/StoryViewer.scss
View file

@ -54,7 +54,7 @@
transform: translateX(-50%);
min-width: 284px;
width: 56.25vh;
z-index: $z-index-above-above-base;
z-index: $z-index-story-meta;
&--group-avatar {
margin-left: -8px;

2
ts/components/StoryViewer.tsx
View file

@ -208,7 +208,7 @@ export const StoryViewer = ({
return () => {
unmountRef.current = true;
};
});
}, []);
const [styles, spring] = useSpring(
() => ({

6
ts/state/ducks/stories.ts
View file

@ -906,6 +906,12 @@ export function reducer(
return {
...state,
isShowingStoriesView: !state.isShowingStoriesView,
selectedStoryData: state.isShowingStoriesView
? undefined
: state.selectedStoryData,
storyViewMode: state.isShowingStoriesView
? undefined
: state.storyViewMode,
};
}

9
ts/state/selectors/stories.ts
View file

@ -342,11 +342,14 @@ export const getStories = createSelector(
}
);
export const getUnreadStoriesCount = createSelector(
export const getUnreadStorySenderCount = createSelector(
getStoriesState,
({ stories }): number => {
return stories.filter(story => story.readStatus === ReadStatus.Unread)
.length;
return new Set(
stories
.filter(story => story.readStatus === ReadStatus.Unread)
.map(story => story.conversationId)
).size;
}
);

4
ts/state/smart/MainHeader.tsx
View file

@ -17,7 +17,7 @@ import {
} from '../selectors/user';
import { getMe } from '../selectors/conversations';
import { getStoriesEnabled } from '../selectors/items';
import { getUnreadStoriesCount } from '../selectors/stories';
import { getUnreadStorySenderCount } from '../selectors/stories';
const mapStateToProps = (state: StateType) => {
const me = getMe(state);
@ -32,7 +32,7 @@ const mapStateToProps = (state: StateType) => {
badge: getPreferredBadgeSelector(state)(me.badges),
theme: getTheme(state),
i18n: getIntl(state),
unreadStoriesCount: getUnreadStoriesCount(state),
unreadStoriesCount: getUnreadStorySenderCount(state),
};
};