Fix field width and add tooltip
This commit is contained in:
parent
aee9cd51a0
commit
02ccdcb802
3 changed files with 11 additions and 5 deletions
res/css/views/settings/tabs/user
src/components/views
|
@ -14,11 +14,14 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_AppearanceUserSettingsTab_fontSlider,
|
||||
.mx_AppearanceUserSettingsTab .mx_Field {
|
||||
.mx_AppearanceUserSettingsTab_fontSlider {
|
||||
@mixin mx_Settings_fullWidthField;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab .mx_Field {
|
||||
width: 256px;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_fontSlider {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
@ -60,6 +60,8 @@ interface IProps extends React.InputHTMLAttributes<HTMLSelectElement | HTMLInput
|
|||
// If specified, contents will appear as a tooltip on the element and
|
||||
// validation feedback tooltips will be suppressed.
|
||||
tooltipContent?: React.ReactNode,
|
||||
// If specified the tooltip will be shown regardless of feedback
|
||||
forceTooltipVisible?: boolean,
|
||||
// If specified alongside tooltipContent, the class name to apply to the
|
||||
// tooltip itself.
|
||||
tooltipClassName?: string,
|
||||
|
@ -226,10 +228,10 @@ export default class Field extends React.PureComponent<IProps, IState> {
|
|||
const Tooltip = sdk.getComponent("elements.Tooltip");
|
||||
let fieldTooltip;
|
||||
if (tooltipContent || this.state.feedback) {
|
||||
const addlClassName = tooltipClassName ? tooltipClassName : '';
|
||||
const addClassName = tooltipClassName ? tooltipClassName : '';
|
||||
fieldTooltip = <Tooltip
|
||||
tooltipClassName={`mx_Field_tooltip ${addlClassName}`}
|
||||
visible={this.state.feedbackVisible}
|
||||
tooltipClassName={`mx_Field_tooltip ${addClassName}`}
|
||||
visible={(this.state.focused && this.props.forceTooltipVisible) || this.state.feedbackVisible}
|
||||
label={tooltipContent || this.state.feedback}
|
||||
/>;
|
||||
}
|
||||
|
|
|
@ -354,6 +354,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
|
|||
SettingsStore.setValue("systemFont", null, SettingLevel.DEVICE, value.target.value);
|
||||
}}
|
||||
tooltipContent="Set the name of a font installed on your system & Riot will attempt to use it."
|
||||
forceTooltipVisible={true}
|
||||
disabled={!this.state.useSystemFont}
|
||||
value={this.state.systemFont}
|
||||
/>
|
||||
|
|
Loading…
Reference in a new issue