Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Make LocationPicker appearance cleaner #7516

Merged
merged 2 commits into from
Jan 12, 2022
Merged

Make LocationPicker appearance cleaner #7516

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0ef927e
Avoid all maplibregl classes in mx_Dialog buttons code
andybalaam Jan 11, 2022
42d2fdf
Make LocationPicker appearance cleaner
andybalaam Jan 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions res/css/_common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"] {
Expand All @@ -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 {
Expand Down
67 changes: 56 additions & 11 deletions res/css/views/location/_LocationPicker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
}
}

Expand Down
8 changes: 6 additions & 2 deletions src/components/views/location/LocationPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down