Signal/Desktop
1
0
Fork 0
mirror of https://github.com/signalapp/Signal-Desktop.git synced 2026-04-17 23:34:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

Moves link previews into the composer

Browse Source
This commit is contained in:
Josh Perez
2023-01-30 15:16:09 -05:00
committed by GitHub
parent 270804d62d
commit de1564fd37
5 changed files with 277 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
stylesheets/components/CompositionInput.scss Normal file
View File

@@ -0,0 +1,242 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.module-composition-input {
&__quill {
height: 100%;
padding-left: 6px;
.ql-editor {
caret-color: transparent;
padding: 0;
text-align: start;
white-space: break-spaces;
line-height: inherit;
&--loaded {
caret-color: auto;
}
&.ql-blank::before {
left: 0;
right: 0;
font-style: normal;
}
.emoji-blot {
width: 20px;
height: 20px;
vertical-align: text-bottom;
}
}
}
&__at-mention {
background-color: $color-gray-20;
border-radius: 4px;
display: inline;
padding-left: 4px;
padding-right: 4px;
height: 22px;
line-height: 22px;
@include dark-theme {
background-color: $color-gray-60;
}
}
&__input {
$border-size: 1px;
border-radius: 18px;
overflow: hidden;
word-break: break-word;
// Override Quill styles
.ql-container {
@include font-body-1;
}
.ql-blank::before {
@include light-theme() {
color: $color-gray-45;
}
@include dark-theme() {
color: $color-gray-25;
}
}
@include light-theme() {
// Same as background color
background-color: $color-gray-05;
color: $color-gray-90;
}
@include dark-theme() {
// Same as background color
background-color: $color-gray-75;
color: $color-gray-05;
}
&__scroller {
$padding-top: 6px;
padding: $padding-top;
min-height: calc(32px - 2 * $border-size);
max-height: calc(72px - 2 * $border-size);
overflow: auto;
&::-webkit-scrollbar-thumb {
@include light-theme {
border: 2px solid $color-gray-05;
}
@include dark-theme {
border: 2px solid $color-gray-75;
}
}
&--large {
max-height: calc(212px - 2 * $border-size);
min-height: calc(212px - 2 * $border-size);
.DraftEditor-root {
height: calc(212px - 2 * $padding-top - 2 * $border-size);
}
}
&--link-preview {
min-height: 110px;
max-height: 200px;
}
}
border: $border-size solid transparent;
&:focus-within {
outline: 0;
@include keyboard-mode {
border: $border-size solid $color-ultramarine;
}
}
}
&__suggestions {
padding: 0;
margin-bottom: 6px;
border-radius: 8px;
z-index: $z-index-above-popup;
overflow: hidden;
&--scroller {
max-height: 300px;
overflow-y: auto;
}
@include popper-shadow();
@include light-theme() {
background: $color-white;
}
@include dark-theme() {
background: $color-gray-75;
}
&__row {
height: 34px;
padding: 0 12px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
background: none;
border: none;
width: 100%;
&--mention {
height: 40px;
}
&:focus {
outline: 0;
}
@include font-body-2;
@include light-theme() {
color: $color-gray-60;
}
@include dark-theme() {
color: $color-gray-25;
}
&__short-name {
margin-left: 4px;
}
&--selected,
&:hover {
@include light-theme() {
background: $color-gray-05;
color: $color-gray-90;
}
@include dark-theme() {
background: $color-gray-60;
color: $color-gray-05;
}
}
}
&__title {
padding-left: 8px;
}
stroke: $color-white;
}
}
div.CompositionInput__link-preview {
background: $color-gray-02;
border-radius: 8px;
flex-direction: row-reverse;
margin-bottom: 4px;
overflow: hidden;
&__icon-container {
align-items: center;
display: flex;
margin-left: 8px;
margin-right: 0;
}
&__content {
margin-right: 0;
padding-bottom: 8px;
padding-left: 12px;
padding-top: 8px;
}
}
button.CompositionInput__link-preview__close-button {
-webkit-mask: none;
@include rounded-corners;
align-items: center;
backdrop-filter: blur(32px);
background: $color-white-alpha-80;
display: flex;
height: 20px;
justify-content: center;
right: 6px;
top: 6px;
width: 20px;
&::before {
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-75);
content: '';
height: 16px;
width: 16px;
}
}