Refactored and cleaned up Modal and friends
This commit is contained in:
Alvaro
GitHub
parent
f64426fbe0
commit
00a720faa9
31 changed files with 853 additions and 787 deletions
|
|
@ -1,12 +1,6 @@
|
|||
// Copyright 2022 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
div.AddUserToAnotherGroupModal__body {
|
||||
padding-left: 0;
|
||||
padding-bottom: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.AddUserToAnotherGroupModal {
|
||||
&__main-body {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -9,8 +9,7 @@
|
|||
|
||||
user-select: none;
|
||||
|
||||
// We use this selector for specificity.
|
||||
&.module-Modal {
|
||||
&__width-container {
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@
|
|||
.BadgeSustainerInstructionsDialog {
|
||||
user-select: none;
|
||||
|
||||
// We use this selector for specificity.
|
||||
&.module-Modal {
|
||||
&__width-container {
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,27 +2,23 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.module-CallingSelectPresentingSourcesModal {
|
||||
// specificity
|
||||
&.module-Modal {
|
||||
&__width-container {
|
||||
max-width: 665px;
|
||||
position: relative;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
&__button-footer {
|
||||
// there's no module-class-name on the footer,
|
||||
// so we have to reference it using the generic selector
|
||||
.module-Modal__button-footer {
|
||||
background-color: $color-gray-95;
|
||||
bottom: 0;
|
||||
margin-left: -16px;
|
||||
margin-top: 0;
|
||||
padding: 16px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__sources {
|
||||
margin-bottom: 20px;
|
||||
margin-left: -6px;
|
||||
margin-right: -6px;
|
||||
margin-bottom: 34px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -38,9 +34,6 @@
|
|||
|
||||
border-radius: 4px;
|
||||
border: 1px solid $color-gray-60;
|
||||
margin-bottom: 14px;
|
||||
margin-left: 6px;
|
||||
margin-right: 6px;
|
||||
overflow: hidden;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -71,8 +71,4 @@
|
|||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
&__modal__body {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&__name {
|
||||
@include font-title-2;
|
||||
|
|
@ -143,8 +144,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-Modal.ContactModal__modal .ContactModal__modal__body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
.module-Modal {
|
||||
@include popper-shadow();
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
// We need this to be a number not divisible by 5 so that if we have sticky
|
||||
// buttons the bottom doesn't bleed through by 1px.
|
||||
max-height: 89vh;
|
||||
|
|
@ -23,9 +24,7 @@
|
|||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1em;
|
||||
padding: 16px 16px 0 16px;
|
||||
position: sticky;
|
||||
padding: 16px 16px 1em 16px;
|
||||
|
||||
&--with-back-button .module-Modal__title {
|
||||
text-align: center;
|
||||
|
|
@ -132,16 +131,20 @@
|
|||
@include scrollbar;
|
||||
@include font-body-1;
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
overflow-y: overlay;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
&--padded {
|
||||
.module-Modal__body {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&--has-header {
|
||||
.module-Modal__body {
|
||||
padding-top: 0;
|
||||
border-top: 1px solid transparent;
|
||||
// If there's a header, just the body scrolls
|
||||
overflow-y: overlay;
|
||||
overflow-x: auto;
|
||||
|
||||
&--scrolled {
|
||||
@include light-theme {
|
||||
|
|
@ -155,65 +158,22 @@
|
|||
}
|
||||
}
|
||||
|
||||
&--no-header {
|
||||
// If there's no header, the whole thing scrolls
|
||||
overflow-y: overlay;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
&__button-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8px;
|
||||
align-items: center;
|
||||
padding: 1em 16px 16px 16px;
|
||||
gap: 8px;
|
||||
|
||||
.module-Button {
|
||||
margin-left: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
&--one-button-per-line {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.module-Modal--sticky-buttons & {
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 16px 0;
|
||||
position: sticky;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
z-index: $z-index-above-popup;
|
||||
|
||||
@include light-theme() {
|
||||
background: $color-white;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
background: $color-gray-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--sticky-buttons {
|
||||
.module-Modal__body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
position: relative;
|
||||
|
||||
.module-Modal__body--overflow {
|
||||
.module-Modal__button-footer {
|
||||
@include light-theme {
|
||||
border-top: 1px solid $color-gray-05;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
border-top: 1px solid $color-gray-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Overrides for a modal with important message
|
||||
|
|
@ -251,6 +211,7 @@
|
|||
margin-top: 27px;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
padding: 0 12px 4px 12px;
|
||||
|
||||
.module-Button {
|
||||
flex-grow: 1;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,27 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.SendStoryModal {
|
||||
&__body {
|
||||
// force
|
||||
.module-Modal & {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// don't re-layout buttons on wrap,
|
||||
// since we have things beyond same-sized-rectangles in the footer
|
||||
.module-Modal__button-footer {
|
||||
&--one-button-per-line {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__item--contact-or-conversation {
|
||||
height: 52px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
&__top-bar {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
|
@ -85,7 +106,6 @@
|
|||
justify-content: space-between;
|
||||
margin: 8px 0;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__info {
|
||||
|
|
@ -164,8 +184,9 @@
|
|||
&__selected-lists {
|
||||
@include font-body-2;
|
||||
color: $color-gray-15;
|
||||
max-width: 280px;
|
||||
padding-right: 16px;
|
||||
user-select: none;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__ok {
|
||||
|
|
@ -212,11 +233,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-Modal--sticky-buttons .SendStoryModal__button-footer {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 0;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,13 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.StoriesSettingsModal {
|
||||
&__modal__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__conversation-list {
|
||||
.module-conversation-list,
|
||||
.module-conversation-list__item--contact-or-conversation {
|
||||
.module-conversation-list {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
|
@ -194,20 +198,6 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__search {
|
||||
&__container {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__tags {
|
||||
margin: 0 -4px;
|
||||
|
||||
// Override .module-ContactPills
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__name-story-avatar-container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue