PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix field width and add tooltip

Browse source
This commit is contained in:
Jorik Schellekens 2020-06-15 17:42:30 +01:00
parent aee9cd51a0
commit 02ccdcb802
3 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
View file

@ -14,11 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_AppearanceUserSettingsTab_fontSlider, .mx_AppearanceUserSettingsTab_fontSlider {
.mx_AppearanceUserSettingsTab .mx_Field {
@mixin mx_Settings_fullWidthField; @mixin mx_Settings_fullWidthField;
} }
.mx_AppearanceUserSettingsTab .mx_Field {
width: 256px;
}
.mx_AppearanceUserSettingsTab_fontSlider { .mx_AppearanceUserSettingsTab_fontSlider {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

8
src/components/views/elements/Field.tsx
View file

@ -60,6 +60,8 @@ interface IProps extends React.InputHTMLAttributes<HTMLSelectElement | HTMLInput
// If specified, contents will appear as a tooltip on the element and // If specified, contents will appear as a tooltip on the element and
// validation feedback tooltips will be suppressed. // validation feedback tooltips will be suppressed.
tooltipContent?: React.ReactNode, 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 // If specified alongside tooltipContent, the class name to apply to the
// tooltip itself. // tooltip itself.
tooltipClassName?: string, tooltipClassName?: string,
@ -226,10 +228,10 @@ export default class Field extends React.PureComponent<IProps, IState> {
const Tooltip = sdk.getComponent("elements.Tooltip"); const Tooltip = sdk.getComponent("elements.Tooltip");
let fieldTooltip; let fieldTooltip;
if (tooltipContent || this.state.feedback) { if (tooltipContent || this.state.feedback) {
const addlClassName = tooltipClassName ? tooltipClassName : ''; const addClassName = tooltipClassName ? tooltipClassName : '';
fieldTooltip = <Tooltip fieldTooltip = <Tooltip
tooltipClassName={`mx_Field_tooltip ${addlClassName}`} tooltipClassName={`mx_Field_tooltip ${addClassName}`}
visible={this.state.feedbackVisible} visible={(this.state.focused && this.props.forceTooltipVisible) || this.state.feedbackVisible}
label={tooltipContent || this.state.feedback} label={tooltipContent || this.state.feedback}
/>; />;
} }

1
src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
View file

@ -354,6 +354,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
SettingsStore.setValue("systemFont", null, SettingLevel.DEVICE, value.target.value); 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." tooltipContent="Set the name of a font installed on your system & Riot will attempt to use it."
forceTooltipVisible={true}
disabled={!this.state.useSystemFont} disabled={!this.state.useSystemFont}
value={this.state.systemFont} value={this.state.systemFont}
/> />