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

Support for creating New Groups

Browse source
This commit is contained in:
Evan Hahn 2021-03-03 14:09:58 -06:00 • committed by Josh Perez
parent 1934120e46
commit 5de4babc0d
56 changed files with 6222 additions and 526 deletions
Download patch file Download diff file Expand all files Collapse all files

39
stylesheets/components/Alert.scss Normal file
View file

@ -0,0 +1,39 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.module-Alert {
@include popper-shadow();
border-radius: 8px;
margin: 0 auto;
max-width: 360px;
padding: 16px;
width: 95%;
@include light-theme() {
background: $color-white;
color: $color-gray-90;
}
@include dark-theme() {
background: $color-gray-95;
color: $color-gray-05;
}
&__title {
@include font-body-1-bold;
margin: 0;
padding: 0;
}
&__body {
@include font-body-1;
margin: 0;
padding: 0;
}
&__button-container {
display: flex;
justify-content: flex-end;
margin-top: 16px;
}
}

77
stylesheets/components/AvatarInput.scss Normal file
View file

@ -0,0 +1,77 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.module-AvatarInput {
@include button-reset;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background: none;
&__avatar {
@include button-reset;
margin-top: 4px;
display: flex;
border-radius: 100%;
height: 80px;
width: 80px;
transition: background-color 100ms ease-out;
&--nothing {
align-items: stretch;
background: $color-white;
&::before {
flex-grow: 1;
content: '';
display: block;
@include color-svg(
'../images/icons/v2/camera-outline-24.svg',
$ultramarine-ui-light,
false
);
-webkit-mask-size: 24px 24px;
}
}
&--loading {
align-items: center;
background: $color-black;
}
&--has-image {
background-size: cover;
background-position: center center;
}
}
&__label {
@include button-reset;
@include font-body-1;
padding-bottom: 4px;
padding-top: 4px;
@include light-theme {
color: $ultramarine-ui-light;
}
@include dark-theme {
color: $ultramarine-ui-dark;
}
}
@include keyboard-mode {
&:focus {
.module-AvatarInput__avatar {
box-shadow: inset 0 0 0 2px $ultramarine-ui-light;
}
.module-AvatarInput__label {
@include font-body-1-bold;
}
}
}
}

72
stylesheets/components/ContactPill.scss Normal file
View file

@ -0,0 +1,72 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.module-ContactPill {
align-items: center;
border-radius: 9999px; // This ensures the borders are completely rounded. (A value like 100% would make it an ellipse.)
display: inline-flex;
user-select: none;
overflow: hidden;
@include light-theme {
color: $color-gray-90;
background: $color-gray-05;
}
@include dark-theme {
color: $color-gray-02;
background: $color-gray-75;
}
&__contact-name {
@include font-body-2;
padding: 0 6px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
&__remove {
$icon: '../images/icons/v2/x-24.svg';
@include button-reset;
height: 100%;
display: flex;
width: 28px;
justify-content: center;
align-items: center;
padding: 0 6px 0 4px;
&::before {
content: '';
width: 12px;
height: 12px;
display: block;
@include light-theme {
@include color-svg($icon, $color-gray-60);
}
@include dark-theme {
@include color-svg($icon, $color-gray-25);
}
}
@include keyboard-mode {
&:focus {
background: $color-gray-15;
&::before {
@include color-svg($icon, $ultramarine-ui-light);
}
}
}
@include dark-keyboard-mode {
&:focus {
background: $color-gray-65;
&::before {
@include color-svg($icon, $ultramarine-ui-dark);
}
}
}
}
}

20
stylesheets/components/ContactPills.scss Normal file
View file

@ -0,0 +1,20 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.module-ContactPills {
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
max-height: 88px;
overflow-x: hidden;
overflow-y: scroll;
padding-left: 12px;
scroll-behavior: smooth;
.module-ContactPill {
margin: 4px 6px;
max-width: calc(
100% - 15px
); // 6px for the right margin and 9px for the scrollbar
}
}

121
stylesheets/components/GroupDialog.scss Normal file
View file

@ -0,0 +1,121 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.module-GroupDialog {
@include popper-shadow();
border-radius: 8px;
margin: 0 auto;
max-height: 100%;
max-width: 360px;
padding: 16px;
position: relative;
width: 95%;
display: flex;
flex-direction: column;
@include light-theme() {
background: $color-white;
color: $color-gray-90;
}
@include dark-theme() {
background: $color-gray-95;
color: $color-gray-05;
}
&__close-button {
@include button-reset;
position: absolute;
right: 12px;
top: 12px;
height: 24px;
width: 24px;
@include light-theme {
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-75);
}
@include dark-theme {
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-15);
}
&:focus {
@include keyboard-mode {
background-color: $ultramarine-ui-light;
}
@include dark-keyboard-mode {
background-color: $ultramarine-ui-dark;
}
}
}
&__title {
@include font-title-2;
text-align: center;
margin-bottom: 20px;
flex-grow: 0;
flex-shrink: 0;
}
&__body {
overflow-x: scroll;
flex-grow: 1;
flex-shrink: 1;
}
&__paragraph,
&__contacts {
margin: 0 0 16px 0;
padding: 0 16px 0 28px;
position: relative;
&::before {
content: '';
display: block;
height: 11px;
left: 4px;
position: absolute;
top: 4px;
width: 4px;
@include light-theme {
background-color: $color-gray-15;
}
@include dark-theme {
background-color: $color-gray-65;
}
}
}
&__contacts {
list-style-type: none;
&__contact {
margin-top: 16px;
}
&__contact__name {
margin-left: 8px;
}
}
&__button-container {
display: flex;
justify-content: center;
margin-top: 16px;
flex-grow: 0;
flex-shrink: 0;
.module-Button {
flex-grow: 1;
max-width: 152px;
&:not(:first-child) {
margin-left: 16px;
}
}
}
}