Approximate the design as proposed

This commit is contained in:
Travis Ralston 2020-11-19 12:06:24 -07:00
parent 21663314ee
commit 0104164d51
4 changed files with 56 additions and 8 deletions

View file

@ -60,6 +60,10 @@ pre, code {
color: $accent-color; color: $accent-color;
} }
.text-muted {
color: $muted-fg-color;
}
b { b {
// On Firefox, the default weight for `<b>` is `bolder` which results in no bold // On Firefox, the default weight for `<b>` is `bolder` which results in no bold
// effect since we only have specific weights of our fonts available. // effect since we only have specific weights of our fonts available.
@ -364,6 +368,11 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
.mx_Dialog_buttons { .mx_Dialog_buttons {
margin-top: 20px; margin-top: 20px;
text-align: right; text-align: right;
.mx_Dialog_buttons_additive {
// The consumer is responsible for positioning their elements.
float: left;
}
} }
/* XXX: Our button style are a mess: buttons that happen to appear in dialogs get special styles applied /* XXX: Our button style are a mess: buttons that happen to appear in dialogs get special styles applied

View file

@ -16,26 +16,55 @@ limitations under the License.
.mx_WidgetCapabilitiesPromptDialog { .mx_WidgetCapabilitiesPromptDialog {
.text-muted {
font-size: $font-12px;
}
.mx_Dialog_content { .mx_Dialog_content {
margin-bottom: 16px; margin-bottom: 16px;
} }
.mx_WidgetCapabilitiesPromptDialog_cap { .mx_WidgetCapabilitiesPromptDialog_cap {
margin-top: 8px; margin-top: 20px;
font-size: $font-15px;
line-height: $font-15px;
.mx_WidgetCapabilitiesPromptDialog_byline { .mx_WidgetCapabilitiesPromptDialog_byline {
color: $muted-fg-color; color: $muted-fg-color;
margin-left: 26px; margin-left: 26px;
font-size: $font-12px;
line-height: $font-12px;
} }
} }
.mx_Dialog_buttons {
margin-top: 40px; // double normal
}
.mx_SettingsFlag { .mx_SettingsFlag {
margin-top: 24px; line-height: calc($font-14px + 7px + 7px); // 7px top & bottom padding
color: $muted-fg-color;
font-size: $font-12px;
.mx_ToggleSwitch { .mx_ToggleSwitch {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: 8px; margin-right: 8px;
// downsize the switch + ball
width: $font-32px;
height: $font-15px;
&.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
left: calc(100% - $font-15px);
}
.mx_ToggleSwitch_ball {
width: $font-15px;
height: $font-15px;
border-radius: $font-15px;
}
} }
.mx_SettingsFlag_label { .mx_SettingsFlag_label {

View file

@ -126,18 +126,19 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
> >
<form onSubmit={this.onSubmit}> <form onSubmit={this.onSubmit}>
<div className="mx_Dialog_content"> <div className="mx_Dialog_content">
{_t("This widget would like to:")} <div className="text-muted">{_t("This widget would like to:")}</div>
{checkboxRows} {checkboxRows}
<LabelledToggleSwitch
value={this.state.rememberSelection}
toggleInFront={true}
onChange={this.onRememberSelectionChange}
label={_t("Remember my selection for this widget")} />
<DialogButtons <DialogButtons
primaryButton={_t("Approve")} primaryButton={_t("Approve")}
cancelButton={_t("Decline All")} cancelButton={_t("Decline All")}
onPrimaryButtonClick={this.onSubmit} onPrimaryButtonClick={this.onSubmit}
onCancel={this.onReject} onCancel={this.onReject}
additive={
<LabelledToggleSwitch
value={this.state.rememberSelection}
toggleInFront={true}
onChange={this.onRememberSelectionChange}
label={_t("Remember my selection for this widget")} />}
/> />
</div> </div>
</form> </form>

View file

@ -54,6 +54,9 @@ export default class DialogButtons extends React.Component {
// disables only the primary button // disables only the primary button
primaryDisabled: PropTypes.bool, primaryDisabled: PropTypes.bool,
// something to stick next to the buttons, optionally
additive: PropTypes.element,
}; };
static defaultProps = { static defaultProps = {
@ -85,8 +88,14 @@ export default class DialogButtons extends React.Component {
</button>; </button>;
} }
let additive = null;
if (this.props.additive) {
additive = <div className="mx_Dialog_buttons_additive">{this.props.additive}</div>;
}
return ( return (
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
{ additive }
{ cancelButton } { cancelButton }
{ this.props.children } { this.props.children }
<button type={this.props.primaryIsSubmit ? 'submit' : 'button'} <button type={this.props.primaryIsSubmit ? 'submit' : 'button'}