Transfer by dialpad: Spacing-related fixes (#6301)

This PR builds on top of #6217. It aims to cover: Increasing the size of the dial pad in general. Spacing the number buttons out a bit more from each other. Shrinking the separator bar between the text entry field and number buttons.
matrix-org · Jul 7, 2021 · 19f34c9 · 19f34c9
1 parent f86b4e4
commit 19f34c9
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 48 deletions.
diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss
@@ -360,12 +360,24 @@ limitations under the License.
     }
 }
 
+.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField:focus-within {
+    border-color: #0DBD8B;
+}
+
 .mx_InviteDialog_dialPad {
     width: 224px;
     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

diff --git a/res/css/views/voip/_DialPad.scss b/res/css/views/voip/_DialPad.scss
@@ -16,8 +16,12 @@ limitations under the License.
 
 .mx_DialPad {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
     gap: 16px;
+
+    /* squeeze the dial pad buttons together horizontally */
+    grid-template-columns: 2fr 1fr 2fr;
+    margin-left: 32px;
+    margin-right: 32px;
 }
 
 .mx_DialPad_button {

diff --git a/res/css/views/voip/_DialPadContextMenu.scss b/res/css/views/voip/_DialPadContextMenu.scss
@@ -14,10 +14,28 @@ 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: 30px;
+}
+
 .mx_DialPadContextMenu_header {
-    margin-top: 12px;
-    margin-left: 12px;
-    margin-right: 12px;
+    border: none;
+    margin-top: 16px;
+    margin-left: 44px;
+    margin-right: 44px;
+
+    /* a separator between the input line and the dial buttons */
+    border-bottom: 1px solid $input-darker-bg-color;
+    transition: border-bottom 0.25s;
+}
+
+.mx_DialPadContextMenu_header:focus-within {
+    border-bottom: 1px solid #0DBD8B;
 }
 
 .mx_DialPadContextMenu_title {
@@ -30,7 +48,6 @@ limitations under the License.
     height: 1.5em;
     font-size: 18px;
     font-weight: 600;
-    max-width: 150px;
     border: none;
     margin: 0px;
 }
@@ -48,13 +65,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;
-    }
-}
diff --git a/res/css/views/voip/_DialPadModal.scss b/res/css/views/voip/_DialPadModal.scss
@@ -19,14 +19,23 @@ limitations under the License.
 }
 
 .mx_DialPadModal {
-    width: 192px;
+    width: 336px;
     height: 368px;
+    padding: 16px 16px 0px 16px;
 }
 
 .mx_DialPadModal_header {
-    margin-top: 12px;
-    margin-left: 12px;
-    margin-right: 12px;
+    margin-top: 16px;
+    margin-left: 66px;
+    margin-right: 66px;
+
+    /* a separator between the input line and the dial buttons */
+    border-bottom: 1px solid $input-darker-bg-color;
+    transition: border-bottom 0.25s;
+}
+
+.mx_DialPadModal_header:focus-within {
+    border-bottom: 1px solid #0DBD8B;
 }
 
 .mx_DialPadModal_title {
@@ -62,13 +71,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;
-    }
-}
diff --git a/src/components/views/context_menus/DialpadContextMenu.tsx b/src/components/views/context_menus/DialpadContextMenu.tsx
@@ -15,11 +15,11 @@ limitations under the License.
 */
 
 import React from 'react';
-import { _t } from '../../../languageHandler';
+import AccessibleButton from "../elements/AccessibleButton";
 import { ContextMenu, IProps as IContextMenuProps } from '../../structures/ContextMenu';
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import Field from "../elements/Field";
-import Dialpad from '../voip/DialPad';
+import DialPad from '../voip/DialPad';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps extends IContextMenuProps {
@@ -45,24 +45,29 @@ export default class DialpadContextMenu extends React.Component<IProps, IState>
         this.setState({ value: this.state.value + digit });
     };
 
+    onCancelClick = () => {
+        this.props.onFinished();
+    };
+
     onChange = (ev) => {
         this.setState({ value: ev.target.value });
     };
 
     render() {
         return <ContextMenu {...this.props}>
-            <div className="mx_DialPadContextMenu_header">
+            <div className="mx_DialPadContextMenuWrapper">
                 <div>
-                    <span className="mx_DialPadContextMenu_title">{_t("Dial pad")}</span>
+                    <AccessibleButton className="mx_DialPadModal_cancel" onClick={this.onCancelClick} />
+                </div>
+                <div className="mx_DialPadContextMenu_header">
+                    <Field className="mx_DialPadContextMenu_dialled"
+                        value={this.state.value} autoFocus={true}
+                        onChange={this.onChange}
+                    />
+                </div>
+                <div className="mx_DialPadContextMenu_dialPad">
+                    <DialPad onDigitPress={this.onDigitPress} hasDial={false} hasDelete={false} />
                 </div>
-                <Field className="mx_DialPadContextMenu_dialled"
-                    value={this.state.value} autoFocus={true}
-                    onChange={this.onChange}
-                />
-            </div>
-            <div className="mx_DialPadContextMenu_horizSep" />
-            <div className="mx_DialPadContextMenu_dialPad">
-                <Dialpad onDigitPress={this.onDigitPress} hasDial={false} hasDelete={false} />
             </div>
         </ContextMenu>;
     }

diff --git a/src/components/views/voip/DialPadModal.tsx b/src/components/views/voip/DialPadModal.tsx
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import * as React from "react";
-import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import Field from "../elements/Field";
 import DialPad from './DialPad';
@@ -75,19 +74,17 @@ export default class DialpadModal extends React.PureComponent<IProps, IState> {
 
     render() {
         return <div className="mx_DialPadModal">
+            <div>
+                <AccessibleButton className="mx_DialPadModal_cancel" onClick={this.onCancelClick} />
+            </div>
             <div className="mx_DialPadModal_header">
-                <div>
-                    <span className="mx_DialPadModal_title">{_t("Dial pad")}</span>
-                    <AccessibleButton className="mx_DialPadModal_cancel" onClick={this.onCancelClick} />
-                </div>
                 <form onSubmit={this.onFormSubmit}>
                     <Field className="mx_DialPadModal_field" id="dialpad_number"
                         value={this.state.value} autoFocus={true}
                         onChange={this.onChange}
                     />
                 </form>
             </div>
-            <div className="mx_DialPadModal_horizSep" />
             <div className="mx_DialPadModal_dialPad">
                 <DialPad hasDial={true} hasDelete={true}
                     onDigitPress={this.onDigitPress}

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
@@ -912,7 +912,6 @@
     "Fill Screen": "Fill Screen",
     "Return to call": "Return to call",
     "%(name)s on hold": "%(name)s on hold",
-    "Dial pad": "Dial pad",
     "Unknown caller": "Unknown caller",
     "Incoming voice call": "Incoming voice call",
     "Incoming video call": "Incoming video call",
@@ -2317,6 +2316,7 @@
     "Transfer": "Transfer",
     "Consult first": "Consult first",
     "User Directory": "User Directory",
+    "Dial pad": "Dial pad",
     "a new master key signature": "a new master key signature",
     "a new cross-signing key signature": "a new cross-signing key signature",
     "a device cross-signing signature": "a device cross-signing signature",