Edit distribution lists via story settings menu

This commit is contained in:
Josh Perez 2022-07-20 20:07:09 -04:00 committed by GitHub
parent 9986d10947
commit e321e1fea8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
42 changed files with 2403 additions and 102 deletions

View file

@ -7,6 +7,10 @@
margin: 0;
padding: 6px 0;
width: auto;
&--single-item {
padding: 0;
}
}
&__title {
@ -121,9 +125,15 @@
&--focused,
&:focus,
&:active {
border-radius: 6px;
box-shadow: 0 0 1px 1px $color-ultramarine;
outline: none;
@include keyboard-mode {
border-radius: 6px;
box-shadow: 0 0 1px 1px $color-ultramarine;
outline: none;
}
}
}
&__popper--single-item &__option {
padding: 12px 6px;
}
}

View file

@ -12,7 +12,6 @@
max-height: 89vh;
display: flex;
flex-direction: column;
@include light-theme() {
background: $color-white;
color: $color-gray-90;
@ -24,21 +23,76 @@
}
&__header {
position: sticky;
align-items: center;
display: flex;
justify-content: space-between;
margin-bottom: 1em;
padding: 16px 16px 0 16px;
position: sticky;
&--with-back-button .module-Modal__title {
text-align: center;
}
}
&__title {
@include font-body-1-bold;
margin: 0 0 1em 0;
margin: 0;
padding: 0;
flex: 1;
}
&__back-button {
@include button-reset;
border-radius: 4px;
height: 24px;
width: 24px;
&::before {
content: '';
display: block;
width: 100%;
height: 100%;
@include light-theme {
@include color-svg(
'../images/icons/v2/chevron-left-24.svg',
$color-gray-75
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v2/chevron-left-24.svg',
$color-gray-15
);
}
}
@include light-theme {
&:hover,
&:focus {
background: $color-gray-02;
}
&:active {
background: $color-gray-05;
}
}
@include dark-theme {
&:hover,
&:focus {
background: $color-gray-80;
}
&:active {
background: $color-gray-75;
}
}
}
&__close-button {
@include button-reset;
border-radius: 4px;
float: right;
height: 24px;
width: 24px;

View file

@ -0,0 +1,24 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.SignalConnectionsModal {
color: $color-gray-05;
&__list {
margin: 16px 0;
li {
margin: 8px 0;
}
}
&__button {
display: flex;
justify-content: center;
margin-top: 24px;
button {
min-width: 150px;
}
}
}

View file

@ -21,6 +21,20 @@
width: 380px;
padding-top: calc(14px + var(--title-bar-drag-area-height));
&__settings {
margin-left: 24px;
opacity: 1;
&::after {
@include dark-theme {
@include color-svg(
'../images/icons/v2/more-horiz-24.svg',
$color-white
);
}
}
}
&__header {
align-items: center;
display: flex;

View file

@ -0,0 +1,177 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.StoriesSettingsModal {
&__modal {
.module-conversation-list {
padding: 0;
}
.module-conversation-list__item--contact-or-conversation {
padding: 0;
}
}
&__list {
@include button-reset;
@include font-body-1;
align-items: center;
display: flex;
height: 52px;
justify-content: space-between;
width: 100%;
&--no-pointer {
cursor: inherit;
}
&__viewers {
color: $color-gray-25;
}
&__left {
display: flex;
align-items: center;
}
&__avatar {
@mixin avatar($svg) {
@include rounded-corners;
display: inline-flex;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
background: $color-gray-75;
&::after {
@include color-svg($svg, $color-white);
content: '';
height: 20px;
width: 20px;
}
}
&--new {
@include avatar('../images/icons/v2/plus-20.svg');
}
&--private {
@include avatar('../images/icons/v2/group-solid-24.svg');
&--large {
height: 64px;
width: 64px;
}
}
}
&__title {
margin-left: 12px;
}
&__delete {
@include button-reset;
@include color-svg(
'../images/icons/v2/trash-outline-24.svg',
$color-gray-25
);
height: 20px;
width: 20px;
visibility: hidden;
}
&:hover &__delete {
visibility: visible;
}
}
&__divider {
border-color: $color-gray-65;
border-style: solid;
}
&__title {
@include font-body-1-bold;
margin-top: 24px;
}
&__delete-list {
@include button-reset;
align-items: center;
color: $color-accent-red;
display: flex;
height: 52px;
width: 100%;
&::before {
@include color-svg(
'../images/icons/v2/trash-outline-24.svg',
$color-accent-red
);
content: '';
height: 20px;
margin-right: 20px;
width: 20px;
}
}
&__checkbox {
margin: 18px 0;
}
&__conversation-list {
flex-grow: 1;
min-height: 300px;
overflow: hidden;
}
&__search {
&__container {
margin-left: 0;
margin-right: 0;
}
}
&__tags {
margin: 0 -4px;
}
&__tag {
align-items: center;
background: $color-gray-75;
border-radius: 26px;
color: $color-gray-05;
display: inline-flex;
padding: 4px 0;
margin: 0 4px;
&__name {
margin-left: 4px;
}
&__remove {
@include button-reset;
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-15);
height: 12px;
margin: 0 8px;
width: 12px;
}
}
&__name-story-avatar-container {
align-items: center;
display: flex;
justify-content: center;
}
&__disclaimer {
@include font-subtitle;
color: $color-gray-25;
&__learn-more {
@include button-reset;
color: $color-gray-05;
}
}
}