Process incoming story messages
This commit is contained in:
Josh Perez
GitHub
parent
df7cdfacc7
commit
eb91eb6fec
84 changed files with 4382 additions and 652 deletions
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// Copyright 2021-2022 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.module-Avatar {
|
||||
|
|
@ -138,4 +138,14 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--with-story {
|
||||
border-radius: 100%;
|
||||
border: 2px solid $color-white-alpha-40;
|
||||
padding: 3px;
|
||||
|
||||
&--unread {
|
||||
border-color: $color-ultramarine-dawn;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
111
stylesheets/components/MyStories.scss
Normal file
111
stylesheets/components/MyStories.scss
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
// Copyright 2022 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.MyStories {
|
||||
&__distribution {
|
||||
padding: 0 14px;
|
||||
|
||||
&__title {
|
||||
@include font-body-1-bold;
|
||||
margin: 24px 0 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__story {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 96px;
|
||||
|
||||
&__details {
|
||||
@include font-body-1-bold;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
@include button-reset;
|
||||
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
background-size: cover;
|
||||
border-radius: 8px;
|
||||
height: 72px;
|
||||
margin-right: 12px;
|
||||
overflow: hidden;
|
||||
width: 46px;
|
||||
}
|
||||
|
||||
&__timestamp {
|
||||
color: $color-gray-25;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&__download {
|
||||
@include button-reset;
|
||||
align-items: center;
|
||||
background: $color-gray-65;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
height: 28px;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
|
||||
&::after {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/save-outline-24.svg',
|
||||
$color-gray-25
|
||||
);
|
||||
content: '';
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&__more {
|
||||
align-items: center;
|
||||
background: $color-gray-65;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
height: 28px;
|
||||
justify-content: center;
|
||||
margin-left: 16px;
|
||||
opacity: 1;
|
||||
width: 28px;
|
||||
|
||||
&::after {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/more-horiz-24.svg',
|
||||
$color-gray-25
|
||||
);
|
||||
content: '';
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
&--save {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/save-outline-24.svg',
|
||||
$color-white
|
||||
);
|
||||
}
|
||||
|
||||
&--forward {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/reply-outline-24.svg',
|
||||
$color-white
|
||||
);
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
&--delete {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/trash-outline-24.svg',
|
||||
$color-white
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
134
stylesheets/components/Stories.scss
Normal file
134
stylesheets/components/Stories.scss
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
// Copyright 2022 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.Stories {
|
||||
background: $color-gray-95;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
z-index: $z-index-popup-overlay;
|
||||
|
||||
&__pane {
|
||||
background: $color-gray-80;
|
||||
border-right: 1px solid $color-gray-65;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 380px;
|
||||
padding-top: 42px;
|
||||
|
||||
&__header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
|
||||
&--centered {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&--title {
|
||||
@include font-body-1-bold;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&--centered .Stories__pane__header--title {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&--camera {
|
||||
@include button-reset;
|
||||
@include color-svg(
|
||||
'../images/icons/v2/camera-outline-24.svg',
|
||||
$color-white
|
||||
);
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
&--back {
|
||||
@include button-reset;
|
||||
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
|
||||
@include light-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/chevron-left-24.svg',
|
||||
$color-gray-60
|
||||
);
|
||||
}
|
||||
|
||||
@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',
|
||||
$color-ultramarine-light
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
@include scrollbar;
|
||||
flex: 1;
|
||||
overflow-y: overlay;
|
||||
|
||||
&--empty {
|
||||
@include font-body-1;
|
||||
align-items: center;
|
||||
color: $color-gray-45;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__search__container {
|
||||
margin: 14px 16px 8px 16px;
|
||||
}
|
||||
|
||||
&__placeholder {
|
||||
align-items: center;
|
||||
color: $color-gray-05;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
|
||||
&__stories {
|
||||
height: 56px;
|
||||
margin-bottom: 22px;
|
||||
width: 56px;
|
||||
|
||||
@include color-svg(
|
||||
'../images/icons/v2/stories-outline-56.svg',
|
||||
$color-gray-05
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
106
stylesheets/components/StoryListItem.scss
Normal file
106
stylesheets/components/StoryListItem.scss
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
// Copyright 2022 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.StoryListItem {
|
||||
@include button-reset;
|
||||
align-items: center;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
padding: 0 20px;
|
||||
height: 96px;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background: $color-gray-65;
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
margin-left: 12px;
|
||||
|
||||
&--title {
|
||||
@include font-body-1-bold;
|
||||
}
|
||||
|
||||
&--timestamp {
|
||||
@include font-body-2;
|
||||
color: $color-gray-25;
|
||||
}
|
||||
|
||||
&--replies {
|
||||
&--others {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/messages-solid-20.svg',
|
||||
$color-gray-25
|
||||
);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&--self {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/reply-solid-24.svg',
|
||||
$color-gray-25
|
||||
);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__previews {
|
||||
height: 72px;
|
||||
position: relative;
|
||||
width: 46px;
|
||||
|
||||
&--add {
|
||||
&::after {
|
||||
content: '';
|
||||
@include color-svg('../images/icons/v2/plus-20.svg', $color-gray-15);
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&--image {
|
||||
@include button-reset;
|
||||
|
||||
align-items: center;
|
||||
background-size: cover;
|
||||
background-color: $color-gray-60;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
height: 72px;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 46px;
|
||||
z-index: $z-index-base;
|
||||
}
|
||||
|
||||
&--multiple &--image {
|
||||
border: 1px solid $color-gray-80;
|
||||
}
|
||||
|
||||
&--more {
|
||||
background: #99a8a0;
|
||||
border-radius: 6px;
|
||||
height: 62px;
|
||||
position: absolute;
|
||||
transform: rotate(-12deg);
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
&--chat {
|
||||
@include color-svg('../images/icons/v2/open-24.svg', $color-white);
|
||||
}
|
||||
|
||||
&--hide {
|
||||
@include color-svg('../images/icons/v2/x-24.svg', $color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
113
stylesheets/components/StoryViewer.scss
Normal file
113
stylesheets/components/StoryViewer.scss
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
// Copyright 2022 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.StoryViewer {
|
||||
&__overlay {
|
||||
background: $color-gray-95;
|
||||
filter: blur(160px);
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: $z-index-popup-overlay;
|
||||
}
|
||||
|
||||
&__content {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: $z-index-popup-overlay;
|
||||
}
|
||||
|
||||
&__close-button {
|
||||
@include button-reset;
|
||||
@include modal-close-button;
|
||||
}
|
||||
|
||||
&__more {
|
||||
@include button-reset;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
right: 48px;
|
||||
top: 12px;
|
||||
width: 24px;
|
||||
|
||||
@include color-svg('../images/icons/v2/more-horiz-24.svg', $color-white);
|
||||
}
|
||||
|
||||
&__container {
|
||||
flex-grow: 1;
|
||||
margin-top: 36px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: $z-index-base;
|
||||
}
|
||||
|
||||
&__story {
|
||||
border-radius: 12px;
|
||||
max-height: 100%;
|
||||
outline: none;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
padding: 16px;
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
width: 284px;
|
||||
|
||||
&--group-avatar {
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
&--title {
|
||||
@include font-body-1-bold;
|
||||
color: $color-white;
|
||||
display: inline;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
&--timestamp {
|
||||
@include font-body-2;
|
||||
color: $color-white-alpha-60;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
margin: 16px 0 32px 0;
|
||||
}
|
||||
|
||||
&__reply {
|
||||
@include button-reset;
|
||||
}
|
||||
|
||||
&__progress {
|
||||
display: flex;
|
||||
|
||||
&--container {
|
||||
background: $color-white-alpha-40;
|
||||
border-radius: 2px;
|
||||
height: 2px;
|
||||
margin: 12px 1px 0 1px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&--bar {
|
||||
background: $color-white;
|
||||
background-size: 200% 100%;
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
152
stylesheets/components/StoryViewsNRepliesModal.scss
Normal file
152
stylesheets/components/StoryViewsNRepliesModal.scss
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
// Copyright 2022 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.StoryViewsNRepliesModal {
|
||||
min-width: 320px;
|
||||
|
||||
&--group {
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
&__overlay-container {
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.module-quote-container {
|
||||
margin: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&__compose-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__composer {
|
||||
flex: 1;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
&__emoji-button {
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
width: 24px;
|
||||
|
||||
&::after {
|
||||
@include dark-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/emoji-smiley-outline-24.svg',
|
||||
$color-white
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
&__input {
|
||||
// For specificity because StoryViewsNRepliesModal is always in dark-theme
|
||||
@include dark-theme {
|
||||
background: $color-gray-75;
|
||||
border: 1px solid $color-gray-75;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.ql-editor.ql-blank::before {
|
||||
color: $color-gray-25;
|
||||
}
|
||||
|
||||
&--with-children {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.quill {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__react {
|
||||
@include button-reset;
|
||||
@include color-svg(
|
||||
'../images/icons/v2/add-reaction-outline-24.svg',
|
||||
$color-white
|
||||
);
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
&__view {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 8px 0;
|
||||
|
||||
&--name {
|
||||
@include font-body-2;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
&--timestamp {
|
||||
@include font-body-2;
|
||||
color: $color-gray-45;
|
||||
}
|
||||
}
|
||||
|
||||
&__reply {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
padding-bottom: 12px;
|
||||
|
||||
&--title {
|
||||
@include font-body-2;
|
||||
}
|
||||
|
||||
&--timestamp {
|
||||
@include font-subtitle;
|
||||
color: $color-gray-25;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&__reaction {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
|
||||
&--container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&--body {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&__message-bubble {
|
||||
background: $color-gray-75;
|
||||
border-radius: 18px;
|
||||
margin-left: 8px;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.Tabs.StoryViewsNRepliesModal__tabs {
|
||||
border-bottom: none;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.Tabs__tab.StoryViewsNRepliesModal__tabs__tab {
|
||||
@include font-body-1-bold;
|
||||
padding: 4px 12px;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.Tabs__tab--selected.StoryViewsNRepliesModal__tabs__tab--selected {
|
||||
background: $color-gray-65;
|
||||
border-radius: 24px;
|
||||
border-bottom: none;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue