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

Adds message forwarding

Browse source
This commit is contained in:
Josh Perez 2021-04-27 15:35:35 -07:00 • committed by GitHub
parent cd489a35fd
commit d203f125c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
42 changed files with 1638 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

293
stylesheets/components/ForwardMessageModal.scss Normal file
View 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;
}
}