OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Make LocationPicker appearance cleaner (#7516)

pull/21833/head
Andy Balaam 2022-01-12 09:19:26 +00:00 committed by GitHub
parent f5465b37a9
commit 31247a50ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 72 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
res/css/_common.scss
View File

@ -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 {

67
res/css/views/location/_LocationPicker.scss
View File

@ -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_Dropdown_menu {
max-height: 140px;
.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);
}
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');
}
}
}

8
src/components/views/location/LocationPicker.tsx
View File

@ -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>