MrKBear/living-together
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add command bar tooltips

Browse Source
This commit is contained in:
MrKBear
2022-02-27 21:03:32 +08:00
parent 57b13b551f
commit 7cd501c780
7 changed files with 126 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
source/Component/CommandBar/CommandBar.tsx
+31 -41
View File
@@ -1,5 +1,7 @@
import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
import { IconButton } from "@fluentui/react";
import { DirectionalHint, IconButton } from "@fluentui/react";
import { LocalizationTooltipHost } from "../Localization/LocalizationTooltipHost";
import { AllI18nKeys } from "../Localization/Localization";
import { Component, ReactNode } from "react";
import "./CommandBar.scss";
@@ -16,51 +18,39 @@ class CommandBar extends Component<ICommandBarProps> {
style={{ width: this.props.width }}
>
<div>
<IconButton
style={{ height: this.props.width }}
iconProps={{iconName: "Save"}}
className="command-button"
/>
<IconButton
style={{ height: this.props.width }}
iconProps={{iconName: "HandsFree"}}
className="command-button"
/>
<IconButton
style={{ height: this.props.width }}
iconProps={{iconName: "TouchPointer"}}
className="command-button"
/>
<IconButton
style={{ height: this.props.width }}
iconProps={{iconName: "Camera"}}
className="command-button"
/>
<IconButton
style={{ height: this.props.width }}
iconProps={{iconName: "Play"}}
className="command-button"
/>
<IconButton
style={{ height: this.props.width }}
iconProps={{iconName: "PlayResume"}}
className="command-button"
/>
<IconButton
style={{ height: this.props.width }}
iconProps={{iconName: "PlayReverseResume"}}
className="command-button"
/>
{this.getRenderButton({ iconName: "Save", i18NKey: "Command.Bar.Save.Info" })}
{this.getRenderButton({ iconName: "Play", i18NKey: "Command.Bar.Play.Info" })}
{this.getRenderButton({ iconName: "HandsFree", i18NKey: "Command.Bar.Drag.Info" })}
{this.getRenderButton({ iconName: "TouchPointer", i18NKey: "Command.Bar.Select.Info" })}
{this.getRenderButton({ iconName: "WebAppBuilderFragmentCreate", i18NKey: "Command.Bar.Add.Group.Info" })}
{this.getRenderButton({ iconName: "CubeShape", i18NKey: "Command.Bar.Add.Range.Info" })}
{this.getRenderButton({ iconName: "StepSharedAdd", i18NKey: "Command.Bar.Add.Behavior.Info" })}
{this.getRenderButton({ iconName: "Tag", i18NKey: "Command.Bar.Add.Tag.Info" })}
{this.getRenderButton({ iconName: "Camera", i18NKey: "Command.Bar.Camera.Info" })}
</div>
<div>
<IconButton
style={{ height: this.props.width }}
iconProps={{iconName: "Settings"}}
className="command-button on-end"
/>
{this.getRenderButton({ iconName: "Settings", i18NKey: "Command.Bar.Setting.Info" })}
</div>
</Theme>
}
private getRenderButton(param: {
i18NKey: AllI18nKeys;
iconName?: string;
click?: () => void;
}): ReactNode {
return <LocalizationTooltipHost
i18nKey={param.i18NKey}
directionalHint={DirectionalHint.rightCenter}
>
<IconButton
style={{ height: this.props.width }}
iconProps={{ iconName: param.iconName }}
onClick={ param.click }
className="command-button on-end"
/>
</LocalizationTooltipHost>
}
}
export { CommandBar };