Add dialpad to transfer dialog + various dialpad UI improvements (#6363)
Co-authored-by: Germain <germain@souquet.com> Co-authored-by: Andrew Morgan <andrew@amorgan.xyz> Co-authored-by: David Baker <dbkr@users.noreply.github.com>
This commit is contained in:
Andrew Morgan
GitHub
parent
c7c29f2119
commit
f4788a6427
21 changed files with 704 additions and 184 deletions
|
|
@ -120,6 +120,7 @@
|
|||
@import "./views/elements/_AddressTile.scss";
|
||||
@import "./views/elements/_DesktopBuildsNotice.scss";
|
||||
@import "./views/elements/_DesktopCapturerSourcePicker.scss";
|
||||
@import "./views/elements/_DialPadBackspaceButton.scss";
|
||||
@import "./views/elements/_DirectorySearchBox.scss";
|
||||
@import "./views/elements/_Dropdown.scss";
|
||||
@import "./views/elements/_EditableItemList.scss";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/*
|
||||
Copyright 2017 Travis Ralston
|
||||
Copyright 2019 New Vector Ltd
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
|
@ -20,7 +21,6 @@ limitations under the License.
|
|||
padding: 0 0 0 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
|
@ -28,11 +28,93 @@ limitations under the License.
|
|||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabsOnLeft {
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
|
||||
.mx_TabbedView_tabLabels {
|
||||
width: 170px;
|
||||
max-width: 170px;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabPanel {
|
||||
margin-left: 240px; // 170px sidebar + 70px padding
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabLabel_active {
|
||||
background-color: $tab-label-active-bg-color;
|
||||
color: $tab-label-active-fg-color;
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
|
||||
background-color: $tab-label-active-icon-bg-color;
|
||||
}
|
||||
|
||||
.mx_TabbedView_maskedIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 8px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.mx_TabbedView_maskedIcon::before {
|
||||
mask-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabsOnTop {
|
||||
flex-direction: column;
|
||||
|
||||
.mx_TabbedView_tabLabels {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabLabel {
|
||||
padding-left: 0px;
|
||||
padding-right: 52px;
|
||||
|
||||
.mx_TabbedView_tabLabel_text {
|
||||
font-size: 15px;
|
||||
color: $tertiary-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabPanel {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabLabel_active {
|
||||
color: $accent-color;
|
||||
.mx_TabbedView_tabLabel_text {
|
||||
color: $accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
|
||||
background-color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_TabbedView_maskedIcon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-left: 0px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.mx_TabbedView_maskedIcon::before {
|
||||
mask-size: 22px;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabLabels {
|
||||
width: 170px;
|
||||
max-width: 170px;
|
||||
color: $tab-label-fg-color;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabLabel {
|
||||
|
|
@ -46,43 +128,25 @@ limitations under the License.
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabLabel_active {
|
||||
background-color: $tab-label-active-bg-color;
|
||||
color: $tab-label-active-fg-color;
|
||||
}
|
||||
|
||||
.mx_TabbedView_maskedIcon {
|
||||
margin-left: 8px;
|
||||
margin-right: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mx_TabbedView_maskedIcon::before {
|
||||
display: inline-block;
|
||||
background-color: $tab-label-icon-bg-color;
|
||||
background-color: $icon-button-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
mask-position: center;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
|
||||
background-color: $tab-label-active-icon-bg-color;
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabLabel_text {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabPanel {
|
||||
margin-left: 240px; // 170px sidebar + 70px padding
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0; // firefox
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_InviteDialog_transferWrapper .mx_Dialog {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_addressBar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -286,16 +290,41 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_InviteDialog {
|
||||
.mx_InviteDialog_other {
|
||||
// Prevent the dialog from jumping around randomly when elements change.
|
||||
height: 600px;
|
||||
padding-left: 20px; // the design wants some padding on the left
|
||||
display: flex;
|
||||
|
||||
.mx_InviteDialog_userSections {
|
||||
height: calc(100% - 115px); // mx_InviteDialog's height minus some for the upper and lower elements
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InviteDialog_content {
|
||||
height: calc(100% - 36px); // full height minus the size of the header
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_transfer {
|
||||
width: 496px;
|
||||
height: 466px;
|
||||
flex-direction: column;
|
||||
|
||||
.mx_InviteDialog_content {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
.mx_TabbedView {
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_addressBar {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -303,7 +332,6 @@ limitations under the License.
|
|||
margin-top: 4px;
|
||||
overflow-y: auto;
|
||||
padding: 0 45px 4px 0;
|
||||
height: calc(100% - 115px); // mx_InviteDialog's height minus some for the upper and lower elements
|
||||
}
|
||||
|
||||
.mx_InviteDialog_hasFooter .mx_InviteDialog_userSections {
|
||||
|
|
@ -318,6 +346,74 @@ limitations under the License.
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField {
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
margin-top: 0;
|
||||
border-color: $quaternary-fg-color;
|
||||
|
||||
input {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField:focus-within {
|
||||
border-color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_dialPadField .mx_Field_postfix {
|
||||
/* Remove border separator between postfix and field content */
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_dialPad {
|
||||
width: 224px;
|
||||
margin-top: 16px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_dialPad .mx_DialPad {
|
||||
row-gap: 16px;
|
||||
column-gap: 48px;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_transferConsultConnect {
|
||||
padding-top: 16px;
|
||||
/* This wants a drop shadow the full width of the dialog, so relative-position it
|
||||
* and make it wider, then compensate with padding
|
||||
*/
|
||||
position: relative;
|
||||
width: 496px;
|
||||
left: -24px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
border-top: 1px solid $message-body-panel-bg-color;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_transferConsultConnect_pushRight {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_userDirectoryIcon::before {
|
||||
mask-image: url('$(res)/img/voip/tab-userdirectory.svg');
|
||||
}
|
||||
|
||||
.mx_InviteDialog_dialPadIcon::before {
|
||||
mask-image: url('$(res)/img/voip/tab-dialpad.svg');
|
||||
}
|
||||
|
||||
.mx_InviteDialog_multiInviterError {
|
||||
> h4 {
|
||||
font-size: $font-15px;
|
||||
|
|
|
|||
40
res/css/views/elements/_DialPadBackspaceButton.scss
Normal file
40
res/css/views/elements/_DialPadBackspaceButton.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_DialPadBackspaceButton {
|
||||
position: relative;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
|
||||
&::before {
|
||||
/* force this element to appear on the DOM */
|
||||
content: "";
|
||||
|
||||
background-color: #8D97A5;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
mask-image: url('$(res)/img/element-icons/call/delete.svg');
|
||||
mask-position: 8px;
|
||||
mask-size: 20px;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
|
@ -16,11 +16,21 @@ limitations under the License.
|
|||
|
||||
.mx_DialPad {
|
||||
display: grid;
|
||||
row-gap: 16px;
|
||||
column-gap: 0px;
|
||||
margin-top: 24px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
/* squeeze the dial pad buttons together horizontally */
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.mx_DialPad_button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: $dialpad-button-bg-color;
|
||||
|
|
@ -29,10 +39,19 @@ limitations under the License.
|
|||
font-weight: 600;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 40px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mx_DialPad_deleteButton, .mx_DialPad_dialButton {
|
||||
.mx_DialPad_button .mx_DialPad_buttonSubText {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.mx_DialPad_dialButton {
|
||||
/* Always show the dial button in the center grid column */
|
||||
grid-column: 2;
|
||||
background-color: $accent-color;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
|
|
@ -42,21 +61,7 @@ limitations under the License.
|
|||
mask-repeat: no-repeat;
|
||||
mask-size: 20px;
|
||||
mask-position: center;
|
||||
background-color: $primary-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_DialPad_deleteButton {
|
||||
background-color: $notice-primary-color;
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/element-icons/call/delete.svg');
|
||||
mask-position: 9px; // delete icon is right-heavy so have to be slightly to the left to look centered
|
||||
}
|
||||
}
|
||||
|
||||
.mx_DialPad_dialButton {
|
||||
background-color: $accent-color;
|
||||
&::before {
|
||||
background-color: #FFF; // on all themes
|
||||
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,10 +14,40 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_DialPadContextMenu_dialPad .mx_DialPad {
|
||||
row-gap: 16px;
|
||||
column-gap: 32px;
|
||||
}
|
||||
|
||||
.mx_DialPadContextMenuWrapper {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.mx_DialPadContextMenu_header {
|
||||
margin-top: 12px;
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
border: none;
|
||||
margin-top: 32px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
|
||||
/* a separator between the input line and the dial buttons */
|
||||
border-bottom: 1px solid $quaternary-fg-color;
|
||||
transition: border-bottom 0.25s;
|
||||
}
|
||||
|
||||
.mx_DialPadContextMenu_cancel {
|
||||
float: right;
|
||||
mask: url('$(res)/img/feather-customised/cancel.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: cover;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-color: $dialog-close-fg-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_DialPadContextMenu_header:focus-within {
|
||||
border-bottom: 1px solid $accent-color;
|
||||
}
|
||||
|
||||
.mx_DialPadContextMenu_title {
|
||||
|
|
@ -30,7 +60,6 @@ limitations under the License.
|
|||
height: 1.5em;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
max-width: 150px;
|
||||
border: none;
|
||||
margin: 0px;
|
||||
}
|
||||
|
|
@ -38,7 +67,7 @@ limitations under the License.
|
|||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
max-width: 150px;
|
||||
max-width: 185px;
|
||||
text-align: left;
|
||||
direction: rtl;
|
||||
padding: 8px 0px;
|
||||
|
|
@ -48,13 +77,3 @@ limitations under the License.
|
|||
.mx_DialPadContextMenu_dialPad {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.mx_DialPadContextMenu_horizSep {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $input-darker-bg-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,14 +19,23 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_DialPadModal {
|
||||
width: 192px;
|
||||
height: 368px;
|
||||
width: 292px;
|
||||
height: 370px;
|
||||
padding: 16px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.mx_DialPadModal_header {
|
||||
margin-top: 12px;
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
margin-top: 32px;
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
|
||||
/* a separator between the input line and the dial buttons */
|
||||
border-bottom: 1px solid $quaternary-fg-color;
|
||||
transition: border-bottom 0.25s;
|
||||
}
|
||||
|
||||
.mx_DialPadModal_header:focus-within {
|
||||
border-bottom: 1px solid $accent-color;
|
||||
}
|
||||
|
||||
.mx_DialPadModal_title {
|
||||
|
|
@ -45,11 +54,18 @@ limitations under the License.
|
|||
height: 14px;
|
||||
background-color: $dialog-close-fg-color;
|
||||
cursor: pointer;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.mx_DialPadModal_field {
|
||||
border: none;
|
||||
margin: 0px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.mx_DialPadModal_field .mx_Field_postfix {
|
||||
/* Remove border separator between postfix and field content */
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.mx_DialPadModal_field input {
|
||||
|
|
@ -62,13 +78,3 @@ limitations under the License.
|
|||
margin-right: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.mx_DialPadModal_horizSep {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $input-darker-bg-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue