Merge pull request #3330 from matrix-org/travis/settings-fix
Touch up settings: alignment, spacing, error states
This commit is contained in:
commit
9332308a51
8 changed files with 24 additions and 18 deletions
|
@ -561,5 +561,10 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
}
|
||||
|
||||
@define-mixin mx_Settings_fullWidthField {
|
||||
margin-right: 200px;
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
@define-mixin mx_Settings_tooltip {
|
||||
// So it fits in the space provided by the page
|
||||
max-width: 120px;
|
||||
}
|
||||
|
|
|
@ -26,10 +26,6 @@ limitations under the License.
|
|||
height: 4em;
|
||||
}
|
||||
|
||||
.mx_ProfileSettings_controls .mx_Field {
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
.mx_ProfileSettings_controls .mx_Field:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
|
@ -17,3 +17,7 @@ limitations under the License.
|
|||
.mx_SetIdServer .mx_Field_input {
|
||||
@mixin mx_Settings_fullWidthField;
|
||||
}
|
||||
|
||||
.mx_SetIdServer_tooltip {
|
||||
@mixin mx_Settings_tooltip;
|
||||
}
|
||||
|
|
|
@ -31,3 +31,7 @@ limitations under the License.
|
|||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.mx_SetIntegrationManager_tooltip {
|
||||
@mixin mx_Settings_tooltip;
|
||||
}
|
||||
|
|
|
@ -70,17 +70,6 @@ limitations under the License.
|
|||
word-break: break-all;
|
||||
}
|
||||
|
||||
.mx_SettingsTab .mx_SettingsTab_subheading:nth-child(n + 2) {
|
||||
// TODO: This `nth-child(n + 2)` isn't working very well since many sections
|
||||
// add intermediate elements (mostly because our version of React requires
|
||||
// them) which throws off the numbering and results in many subheading
|
||||
// missing margins.
|
||||
// See also https://github.com/vector-im/riot-web/issues/10554
|
||||
// These views have a lot of the same repetitive information on it, so
|
||||
// give them more visual distinction between the sections.
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.mx_SettingsTab a {
|
||||
color: $accent-color-alt;
|
||||
}
|
||||
|
|
|
@ -51,6 +51,9 @@ export default class Field extends React.PureComponent {
|
|||
// If specified, contents will appear as a tooltip on the element and
|
||||
// validation feedback tooltips will be suppressed.
|
||||
tooltipContent: PropTypes.node,
|
||||
// If specified alongside tooltipContent, the class name to apply to the
|
||||
// tooltip itself.
|
||||
tooltipClassName: PropTypes.string,
|
||||
// All other props pass through to the <input>.
|
||||
};
|
||||
|
||||
|
@ -177,8 +180,9 @@ export default class Field extends React.PureComponent {
|
|||
const Tooltip = sdk.getComponent("elements.Tooltip");
|
||||
let fieldTooltip;
|
||||
if (tooltipContent || this.state.feedback) {
|
||||
const addlClassName = this.props.tooltipClassName ? this.props.tooltipClassName : '';
|
||||
fieldTooltip = <Tooltip
|
||||
tooltipClassName="mx_Field_tooltip"
|
||||
tooltipClassName={`mx_Field_tooltip ${addlClassName}`}
|
||||
visible={this.state.feedbackVisible}
|
||||
label={tooltipContent || this.state.feedback}
|
||||
/>;
|
||||
|
|
|
@ -319,7 +319,7 @@ export default class SetIdServer extends React.Component {
|
|||
"won't be discoverable by other users and you won't be " +
|
||||
"able to invite others by email or phone.",
|
||||
)}</span>
|
||||
<AccessibleButton onClick={this._onDisconnectClicked} kind="danger">
|
||||
<AccessibleButton onClick={this._onDisconnectClicked} kind="danger_sm">
|
||||
{discoButtonContent}
|
||||
</AccessibleButton>
|
||||
</div>;
|
||||
|
@ -341,6 +341,9 @@ export default class SetIdServer extends React.Component {
|
|||
value={this.state.idServer}
|
||||
onChange={this._onIdentityServerChanged}
|
||||
tooltipContent={this._getTooltip()}
|
||||
tooltipClassName="mx_SetIdServer_tooltip"
|
||||
disabled={this.state.busy}
|
||||
flagInvalid={!!this.state.error}
|
||||
/>
|
||||
<AccessibleButton type="submit" kind="primary_sm"
|
||||
onClick={this._checkIdServer}
|
||||
|
|
|
@ -196,6 +196,7 @@ export default class SetIntegrationManager extends React.Component {
|
|||
autoComplete="off"
|
||||
onChange={this._onUrlChanged}
|
||||
tooltipContent={this._getTooltip()}
|
||||
tooltipClassName="mx_SetIntegrationManager_tooltip"
|
||||
disabled={this.state.busy}
|
||||
flagInvalid={!!this.state.error}
|
||||
/>
|
||||
|
|
Loading…
Reference in a new issue