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

Design tweaks to dialogs

Browse source 
Little bit of a mix of things in this one:
 * Support variable-width dialogs. Default is fixed-width as before,
   only UploadConformDialog is variable-width. Controlled by a prop
   to BaseDialog.
 * Fixes to the cancel 'x' - scale the mask image, tweak size & colour
 * Colour & boldness of dialog titles
 * Align the dialog title & cancel 'x'
 * Remove gap between dialog buttons & right hand side of dialog(!)
 * Round corners on dialogs
 * Add grey border on image preview in upload confirm dialog
 * and, squeezing in slightly randomly, finish the partially renamed
   ChatInviteDialog to AddressPickerDialog.
This commit is contained in:
David Baker 2019-04-03 16:27:45 +01:00
parent ed03a92712
commit 7925e7169a
10 changed files with 60 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

33
res/css/_common.scss
View file

@ -118,7 +118,7 @@ textarea {
background-color: transparent;
color: $input-darker-fg-color;
border-radius: 4px;
border: 1px solid #c1c1c1;
border: 1px solid $dialog-close-fg-color;
// these things should probably not be defined
// globally
margin: 9px;
@ -267,14 +267,18 @@ textarea {
font-weight: 300;
font-size: 15px;
position: relative;
padding: 40px 58px 36px 58px;
width: 60%;
padding: 25px 30px 30px 30px;
max-width: 704px;
box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
max-height: 80%;
box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
border-radius: 4px;
overflow-y: auto;
}
.mx_Dialog_fixedWidth {
min-width: 60vw;
}
.mx_Dialog_staticWrapper .mx_Dialog {
z-index: 4010;
}
@ -317,13 +321,13 @@ textarea {
.mx_Dialog_header {
position: relative;
margin-bottom: 20px;
}
.mx_Dialog_title {
font-weight: bold;
font-size: 22px;
line-height: 36px;
color: $primary-fg-color;
color: $dialog-title-fg-color;
}
.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
@ -338,13 +342,14 @@ textarea {
mask: url('$(res)/img/feather-customised/cancel.svg');
mask-repeat: no-repeat;
mask-position: center;
width: 36px;
height: 36px;
background-color: $primary-fg-color;
mask-size: cover;
width: 14px;
height: 14px;
background-color: $dialog-close-fg-color;
cursor: pointer;
position: absolute;
top: 20px;
right: 20px;
top: 4px;
right: 0px;
}
.mx_Dialog_content {
@ -355,6 +360,7 @@ textarea {
}
.mx_Dialog_buttons {
margin-top: 20px;
text-align: right;
}
@ -370,6 +376,10 @@ textarea {
background-color: $button-secondary-bg-color;
}
.mx_Dialog button:last-child {
margin-right: 0px;
}
.mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover {
@mixin mx_DialogButton_hover;
}
@ -381,6 +391,7 @@ textarea {
.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary {
color: $accent-fg-color;
background-color: $accent-color;
min-width: 156px;
}
.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger {

2
res/css/_components.scss
View file

@ -47,11 +47,11 @@
@import "./views/context_menus/_StatusMessageContextMenu.scss";
@import "./views/context_menus/_TagTileContextMenu.scss";
@import "./views/context_menus/_TopLeftMenu.scss";
@import "./views/dialogs/_AddressPickerDialog.scss";
@import "./views/dialogs/_Analytics.scss";
@import "./views/dialogs/_BugReportDialog.scss";
@import "./views/dialogs/_ChangelogDialog.scss";
@import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
@import "./views/dialogs/_ChatInviteDialog.scss";
@import "./views/dialogs/_ConfirmUserActionDialog.scss";
@import "./views/dialogs/_CreateGroupDialog.scss";
@import "./views/dialogs/_CreateRoomDialog.scss";

15
res/css/views/dialogs/_ChatInviteDialog.scss → res/css/views/dialogs/_AddressPickerDialog.scss
View file

@ -1,5 +1,6 @@
/*
Copyright 2016 OpenMarket Ltd
Copyright 2019 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -15,8 +16,8 @@ limitations under the License.
*/
/* Using a textarea for this element, to circumvent autofill */
.mx_ChatInviteDialog_input,
.mx_ChatInviteDialog_input:focus
.mx_AddressPickerDialog_input,
.mx_AddressPickerDialog_input:focus
{
height: 26px;
font-size: 14px;
@ -34,11 +35,11 @@ limitations under the License.
word-wrap: nowrap;
}
.mx_ChatInviteDialog .mx_Dialog_content {
.mx_AddressPickerDialog .mx_Dialog_content {
min-height: 50px
}
.mx_ChatInviteDialog_inputContainer {
.mx_AddressPickerDialog_inputContainer {
border-radius: 3px;
border: solid 1px $input-border-color;
line-height: 36px;
@ -51,19 +52,19 @@ limitations under the License.
overflow-y: auto;
}
.mx_ChatInviteDialog_error {
.mx_AddressPickerDialog_error {
margin-top: 10px;
color: $warning-color;
}
.mx_ChatInviteDialog_cancel {
.mx_AddressPickerDialog_cancel {
position: absolute;
right: 11px;
top: 13px;
cursor: pointer;
}
.mx_ChatInviteDialog_cancel object {
.mx_AddressPickerDialog_cancel object {
pointer-events: none;
}

4
res/css/views/dialogs/_SettingsDialog.scss
View file

@ -21,7 +21,7 @@ limitations under the License.
height: 80%;
border-radius: 4px;
padding-top: 0;
padding-right: 0;
padding-right: 30px;
padding-left: 0;
.mx_TabbedView {
@ -31,7 +31,7 @@ limitations under the License.
.mx_TabbedView .mx_SettingsTab {
box-sizing: border-box;
min-width: 580px;
padding-right: 130px;
padding-right: 100px;
// Put some padding on the bottom to avoid the settings tab from
// colliding harshly with the dialog when scrolled down.

2
res/css/views/dialogs/_UploadConfirmDialog.scss
View file

@ -30,4 +30,6 @@ limitations under the License.
.mx_UploadConfirmDialog_imagePreview {
max-height: 300px;
max-width: 100%;
border-radius: 4px;
border: 1px solid $dialog-close-fg-color;
}

4
res/themes/light/css/_light.scss
View file

@ -106,10 +106,10 @@ $avatar-bg-color: #ffffff;
$h3-color: #3d3b39;
$dialog-title-fg-color: #2e2f32;
$dialog-title-fg-color: #45474a;
$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
$dialog-shadow-color: rgba(0, 0, 0, 0.48);
$dialog-close-fg-color: #9fa9ba;
$dialog-close-fg-color: #c1c1c1;
$dialog-background-bg-color: #e9e9e9;
$lightbox-background-bg-color: #000;