imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

New UX for Share dialog (#28598)

Browse source 
* New UX for `ShareDialog`

* Use new named import

* Rewrite tests

* Add e2e tests

* Use `box-sizing` for social buttons

* Update e2e tests
This commit is contained in:
Florian Duros 2024-12-02 19:10:17 +01:00 • committed by GitHub
parent 06fa3481df
commit 0429809c00
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 1244 additions and 282 deletions
Download patch file Download diff file Expand all files Collapse all files

105
res/css/views/dialogs/_ShareDialog.pcss
View file

@ -5,50 +5,73 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_ShareDialog hr {
margin-top: 25px;
margin-bottom: 25px;
border-color: $light-fg-color;
}
.mx_ShareDialog {
/* Value from figma design */
width: 416px;
.mx_ShareDialog .mx_ShareDialog_content {
margin: 10px 0;
.mx_Dialog_header {
text-align: center;
margin-bottom: var(--cpd-space-6x);
/* Override dialog header padding to able to center it */
padding-inline-end: 0;
}
.mx_CopyableText {
width: unset; /* full width */
.mx_ShareDialog_content {
display: flex;
flex-direction: column;
gap: var(--cpd-space-6x);
align-items: center;
> a {
text-decoration: none;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.mx_ShareDialog_top {
display: flex;
flex-direction: column;
gap: var(--cpd-space-4x);
align-items: center;
width: 100%;
span {
text-align: center;
font: var(--cpd-font-body-sm-semibold);
color: var(--cpd-color-text-secondary);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 100%;
}
}
label {
display: inline-flex;
gap: var(--cpd-space-3x);
justify-content: center;
align-items: center;
font: var(--cpd-font-body-md-medium);
}
button {
width: 100%;
}
.mx_ShareDialog_social {
display: flex;
gap: var(--cpd-space-3x);
justify-content: center;
a {
width: 48px;
height: 48px;
border-radius: 99px;
box-sizing: border-box;
border: 1px solid var(--cpd-color-border-interactive-secondary);
display: flex;
justify-content: center;
align-items: center;
img {
width: 24px;
height: 24px;
}
}
}
}
}
.mx_ShareDialog_split {
display: flex;
flex-wrap: wrap;
}
.mx_ShareDialog_qrcode_container {
float: left;
height: 256px;
width: 256px;
margin-right: 64px;
}
.mx_ShareDialog_qrcode_container + .mx_ShareDialog_social_container {
width: 299px;
}
.mx_ShareDialog_social_container {
display: inline-block;
}
.mx_ShareDialog_social_icon {
display: inline-grid;
margin-right: 10px;
margin-bottom: 10px;
}