From f55a40001c453e2f27565923f0d2e3b724f85ed0 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 20 Aug 2019 13:20:07 -0600 Subject: [PATCH] Touch up settings: alignment, spacing, error states Fixes https://github.com/vector-im/riot-web/issues/10554 Issues fixed: * Fields were not ~30px from the avatar (too much right margin) * Tooltips overflowed the dialog on some resolutions * SetIdServer didn't have an error state for making the field red * Spacing between sections in Discovery was wrong (fixed by just removing the problematic n+2 selector - it didn't help anything) --- res/css/_common.scss | 7 ++++++- res/css/views/settings/_ProfileSettings.scss | 4 ---- res/css/views/settings/_SetIdServer.scss | 4 ++++ res/css/views/settings/_SetIntegrationManager.scss | 4 ++++ res/css/views/settings/tabs/_SettingsTab.scss | 11 ----------- src/components/views/elements/Field.js | 6 +++++- src/components/views/settings/SetIdServer.js | 5 ++++- .../views/settings/SetIntegrationManager.js | 1 + 8 files changed, 24 insertions(+), 18 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 1b7c8ec938..70ff68e2eb 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -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; +} \ No newline at end of file diff --git a/res/css/views/settings/_ProfileSettings.scss b/res/css/views/settings/_ProfileSettings.scss index afac75986f..3e97a0ff6d 100644 --- a/res/css/views/settings/_ProfileSettings.scss +++ b/res/css/views/settings/_ProfileSettings.scss @@ -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; } diff --git a/res/css/views/settings/_SetIdServer.scss b/res/css/views/settings/_SetIdServer.scss index 55ad6eef02..98c64b7218 100644 --- a/res/css/views/settings/_SetIdServer.scss +++ b/res/css/views/settings/_SetIdServer.scss @@ -17,3 +17,7 @@ limitations under the License. .mx_SetIdServer .mx_Field_input { @mixin mx_Settings_fullWidthField; } + +.mx_SetIdServer_tooltip { + @mixin mx_Settings_tooltip; +} diff --git a/res/css/views/settings/_SetIntegrationManager.scss b/res/css/views/settings/_SetIntegrationManager.scss index d532492ea8..99537f9eb4 100644 --- a/res/css/views/settings/_SetIntegrationManager.scss +++ b/res/css/views/settings/_SetIntegrationManager.scss @@ -31,3 +31,7 @@ limitations under the License. display: inline-block; padding-left: 5px; } + +.mx_SetIntegrationManager_tooltip { + @mixin mx_Settings_tooltip; +} diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss index 84ff91d341..794c8106be 100644 --- a/res/css/views/settings/tabs/_SettingsTab.scss +++ b/res/css/views/settings/tabs/_SettingsTab.scss @@ -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; } diff --git a/src/components/views/elements/Field.js b/src/components/views/elements/Field.js index 2d9ef27edd..d79b230569 100644 --- a/src/components/views/elements/Field.js +++ b/src/components/views/elements/Field.js @@ -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 . }; @@ -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 = ; diff --git a/src/components/views/settings/SetIdServer.js b/src/components/views/settings/SetIdServer.js index f149ca33cc..67387a7c8e 100644 --- a/src/components/views/settings/SetIdServer.js +++ b/src/components/views/settings/SetIdServer.js @@ -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.", )} - + {discoButtonContent} ; @@ -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} />