Adds message forwarding
This commit is contained in:
parent
cd489a35fd
commit
d203f125c6
42 changed files with 1638 additions and 139 deletions
293
stylesheets/components/ForwardMessageModal.scss
Normal file
293
stylesheets/components/ForwardMessageModal.scss
Normal file
|
@ -0,0 +1,293 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.module-ForwardMessageModal {
|
||||
$padding: 16px;
|
||||
@include popper-shadow();
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
max-height: 90vh;
|
||||
max-width: 360px;
|
||||
width: 95%;
|
||||
|
||||
@include light-theme() {
|
||||
background: $color-white;
|
||||
color: $color-gray-90;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
background: $color-gray-75;
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
&--link-preview {
|
||||
border-bottom: 1px solid $color-gray-15;
|
||||
padding: 12px 16px;
|
||||
|
||||
@include dark-theme() {
|
||||
border-color: $color-gray-60;
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
&__input {
|
||||
background: inherit;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
height: 100%;
|
||||
|
||||
&:focus-within {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border: none;
|
||||
|
||||
&:focus-within {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include keyboard-mode {
|
||||
&:focus-within {
|
||||
border: solid 1px $ultramarine-ui-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__scroller {
|
||||
max-height: 300px;
|
||||
min-height: 300px;
|
||||
padding-right: 36px;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
&--edit {
|
||||
border-bottom: 1px solid $color-gray-15;
|
||||
|
||||
@include dark-theme() {
|
||||
border-color: $color-gray-60;
|
||||
}
|
||||
}
|
||||
|
||||
&--cancel {
|
||||
@include button-reset;
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
color: $ultramarine-ui-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--back {
|
||||
@include button-reset;
|
||||
|
||||
height: 24px;
|
||||
left: 16px;
|
||||
position: absolute;
|
||||
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',
|
||||
$ultramarine-ui-light
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@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',
|
||||
$ultramarine-ui-dark
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include font-body-1-bold;
|
||||
}
|
||||
}
|
||||
|
||||
&__search {
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
margin: 10px 16px;
|
||||
padding: 5px 12px;
|
||||
position: relative;
|
||||
|
||||
@include font-body-2;
|
||||
|
||||
@include light-theme {
|
||||
background-color: $color-gray-02;
|
||||
border: solid 1px $color-gray-02;
|
||||
color: $color-gray-90;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
background: $color-gray-65;
|
||||
border: solid 1px $color-gray-65;
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
&--icon {
|
||||
cursor: text;
|
||||
height: 16px;
|
||||
left: 8px;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
width: 16px;
|
||||
|
||||
@include light-theme {
|
||||
@include color-svg('../images/icons/v2/search-16.svg', $color-gray-45);
|
||||
}
|
||||
}
|
||||
|
||||
@include keyboard-mode {
|
||||
&:focus-within {
|
||||
border: solid 1px $ultramarine-ui-light;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--input {
|
||||
background: inherit;
|
||||
border: none;
|
||||
padding-left: 16px;
|
||||
width: 100%;
|
||||
|
||||
&:placeholder {
|
||||
color: $color-gray-45;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__list-wrapper {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__main-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
&__text-edit-area {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__no-candidate-contacts {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__send-button {
|
||||
align-items: center;
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
height: 32px;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
&--continue {
|
||||
&::after {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/arrow-down-24.svg',
|
||||
$color-white
|
||||
);
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
|
||||
&--forward {
|
||||
&::after {
|
||||
@include color-svg('../images/icons/v2/send-24.svg', $color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__emoji {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
|
||||
button::after {
|
||||
background-color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
@include font-body-2;
|
||||
align-items: center;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 0;
|
||||
padding: $padding;
|
||||
position: relative;
|
||||
|
||||
@include light-theme {
|
||||
background-color: $color-gray-02;
|
||||
color: $color-gray-60;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
background: $color-gray-65;
|
||||
color: $color-gray-25;
|
||||
}
|
||||
}
|
||||
|
||||
// Disable cursor since images are non-clickable
|
||||
.module-image__image {
|
||||
cursor: inherit;
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue