Make LocationPicker appearance cleaner (#7516)

matrix-org · Jan 12, 2022 · 31247a5 · 31247a5
1 parent f5465b3
commit 31247a5
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 23 deletions.
diff --git a/res/css/_common.scss b/res/css/_common.scss
@@ -426,7 +426,7 @@ legend {
  * Elements that should not be styled like a dialog button are mentioned in a :not() pseudo-class.
  * For the widest browser support, we use multiple :not pseudo-classes instead of :not(.a, .b).
  */
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not(.maplibregl-ctrl-attrib-button):not(.mx_AccessibleButton),
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton),
 .mx_Dialog input[type="submit"],
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"] {
@@ -443,49 +443,49 @@ legend {
     font-family: inherit;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not(.maplibregl-ctrl-attrib-button):not(.mx_AccessibleButton):last-child {
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):last-child {
     margin-right: 0px;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not(.maplibregl-ctrl-attrib-button):not(.mx_AccessibleButton):hover,
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):hover,
 .mx_Dialog input[type="submit"]:hover,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):hover,
 .mx_Dialog_buttons input[type="submit"]:hover {
     @mixin mx_DialogButton_hover;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not(.maplibregl-ctrl-attrib-button):not(.mx_AccessibleButton):focus,
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):focus,
 .mx_Dialog input[type="submit"]:focus,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
 .mx_Dialog_buttons input[type="submit"]:focus {
     filter: brightness($focus-brightness);
 }
 
-.mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.maplibregl-ctrl-attrib-button),
+.mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]),
 .mx_Dialog input[type="submit"].mx_Dialog_primary,
-.mx_Dialog_buttons button.mx_Dialog_primary,
+.mx_Dialog_buttons button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
     color: $accent-fg-color;
     background-color: $accent;
     min-width: 156px;
 }
 
-.mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton):not(.maplibregl-ctrl-attrib-button),
+.mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]),
 .mx_Dialog input[type="submit"].danger,
-.mx_Dialog_buttons button.danger,
+.mx_Dialog_buttons button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"].danger {
     background-color: $alert;
     border: solid 1px $alert;
     color: $accent-fg-color;
 }
 
-.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not(.maplibregl-ctrl-attrib-button),
+.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]),
 .mx_Dialog input[type="submit"].warning {
     border: solid 1px $alert;
     color: $alert;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not(.maplibregl-ctrl-attrib-button):not(.mx_AccessibleButton):disabled,
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):disabled,
 .mx_Dialog input[type="submit"]:disabled,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
 .mx_Dialog_buttons input[type="submit"]:disabled {

diff --git a/res/css/views/location/_LocationPicker.scss b/res/css/views/location/_LocationPicker.scss
@@ -15,26 +15,71 @@ limitations under the License.
 */
 
 .mx_LocationPicker {
-    // placeholder sizing to be replaced once there's a proper design
-    width: 450px;
-    height: 500px;
+    width: 375px;
+    height: 460px;
 
-    border-radius: 4px;
+    border-radius: 8px;
 
-    display: flex;
-    flex-direction: column;
+    position: relative;
 }
 
 #mx_LocationPicker_map {
-    height: 408px;
-    border-radius: 8px 8px 0px 0px;
+    height: 100%;
+    border-radius: 8px;
+
+    .maplibregl-ctrl.maplibregl-ctrl-group {
+        margin-top: 50px;
+    }
+
+    .maplibregl-ctrl-bottom-right {
+        bottom: 68px;
+    }
 }
 
 .mx_LocationPicker_footer {
-    margin: 24px;
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+
+    .mx_Dialog_buttons {
+        text-align: center;
+
+        /* Note the `button` prefix and `not()` clauses are needed to make
+           these selectors more specific than those in _common.scss. */
+
+        button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton) {
+            margin: 0px 0px 16px 0px;
+            min-width: 328px;
+            min-height: 48px;
+        }
+
+        button.mx_LocationPicker_cancelButton {
+            border: none;
+            border-radius: 12px;
+            position: absolute;
+            top: -360px;
+            right: 5px;
+            background-color: $quinary-content;
+            width: 24px;
+            height: 24px;
+            padding: 0px;
+            color: rgba(0, 0, 0, 0);
+        }
 
-    .mx_Dropdown_menu {
-        max-height: 140px;
+        button.mx_LocationPicker_cancelButton::before {
+            content: '';
+            background-color: $primary-content;
+            min-width: 8px;
+            min-height: 8px;
+            width: 8px;
+            height: 8px;
+            position: absolute;
+            margin: 4px 8px;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            mask-position: center;
+            mask-image: url('$(res)/img/cancel-small.svg');
+        }
     }
 }
 

diff --git a/src/components/views/location/LocationPicker.tsx b/src/components/views/location/LocationPicker.tsx
@@ -124,10 +124,14 @@ class LocationPicker extends React.Component<IProps, IState> {
                 { error }
                 <div className="mx_LocationPicker_footer">
                     <form onSubmit={this.onOk}>
-                        <DialogButtons primaryButton={_t('Share')}
+                        <DialogButtons
+                            primaryButton={_t('Share location')}
+                            cancelButtonClass="mx_LocationPicker_cancelButton"
+                            primaryIsSubmit={true}
                             onPrimaryButtonClick={this.onOk}
                             onCancel={this.props.onFinished}
-                            primaryDisabled={!this.state.position} />
+                            primaryDisabled={!this.state.position}
+                        />
                     </form>
                 </div>
             </div>