ApfelTeeSaft/LiveSplitOne
1
0
Fork 0
mirror of https://github.com/ApfelTeeSaft/LiveSplitOne.git synced 2026-09-03 03:43:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #887 from CryZe/context-menu-tooltip

Browse Source 
Add Tooltips to all Context Menus
This commit is contained in:
Christopher Serr
2024-05-25 18:58:32 +02:00
committed by GitHub
parent 0eba9c241a d82c89654c
commit f8a75b37eb
5 changed files with 170 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/RunEditor.scss
-2
View File
@@ -209,14 +209,12 @@ $small-button-padding: 1px 3px 1px 3px;
cursor: pointer;
div {
width: 100%;
height: $segment-icon-size;
.segment-icon {
width: 100%;
height: 100%;
object-fit: contain;
object-position: 100% 50%;
}
}
}
src/css/Tooltip.scss
+9 -2
View File
@@ -3,7 +3,6 @@
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltip-text {
@@ -22,7 +21,8 @@
margin-left: -150px;
opacity: 0;
transition: opacity 0.25s;
transition-delay: 0.5s;
transition-delay: 0.25s;
text-wrap: initial;
@include mobile {
left: 0;
@@ -30,6 +30,13 @@
}
}
.react-contextmenu-item.tooltip .tooltip-text {
bottom: initial;
left: calc(100% + $ui-margin);
margin-left: 0;
top: 0;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
src/ui/LayoutEditor.tsx
+102 -51
View File
@@ -138,57 +138,110 @@ export class LayoutEditor extends React.Component<Props, State> {
</button>
</ContextMenuTrigger>
<ContextMenu id="add-button-context-menu">
<MenuItem onClick={(_) => this.addComponent(LiveSplit.CurrentComparisonComponent)}>
Current Comparison
</MenuItem>
<MenuItem onClick={(_) => this.addComponent(LiveSplit.CurrentPaceComponent)}>
Current Pace
</MenuItem>
<MenuItem onClick={(_) => this.addComponent(LiveSplit.DeltaComponent)}>
Delta
</MenuItem>
<MenuItem onClick={(_) => this.addComponent(LiveSplit.DetailedTimerComponent)}>
Detailed Timer
</MenuItem>
<MenuItem onClick={(_) => this.addComponent(LiveSplit.GraphComponent)}>
Graph
</MenuItem>
<MenuItem onClick={(_) => this.addComponent(LiveSplit.PbChanceComponent)}>
PB Chance
</MenuItem>
<MenuItem onClick={(_) => this.addComponent(LiveSplit.PossibleTimeSaveComponent)}>
Possible Time Save
</MenuItem>
<MenuItem onClick={(_) => this.addComponent(LiveSplit.PreviousSegmentComponent)}>
Previous Segment
</MenuItem>
<MenuItem onClick={(_) => this.addComponent(LiveSplit.SegmentTimeComponent)}>
Segment Time
</MenuItem>
<MenuItem onClick={(_) => this.addComponent(LiveSplit.SplitsComponent)}>
Splits
</MenuItem>
<MenuItem onClick={(_) => this.addComponent(LiveSplit.SumOfBestComponent)}>
Sum of Best Segments
</MenuItem>
<MenuItem onClick={(_) => this.addComponent(LiveSplit.TextComponent)}>
Text
</MenuItem>
<MenuItem onClick={(_) => this.addComponent(LiveSplit.TimerComponent)}>
Timer
</MenuItem>
<MenuItem onClick={(_) => this.addComponent(LiveSplit.TitleComponent)}>
<MenuItem className="tooltip" onClick={(_) => this.addComponent(LiveSplit.TitleComponent)}>
Title
<span className="tooltip-text">
Shows the name of the game and the category that is being run. Additionally, the game icon, the attempt count, and the total number of successfully finished runs can be shown.
</span>
</MenuItem>
<MenuItem onClick={(_) => this.addComponent(LiveSplit.TotalPlaytimeComponent)}>
Total Playtime
<MenuItem className="tooltip" onClick={(_) => this.addComponent(LiveSplit.GraphComponent)}>
Graph
<span className="tooltip-text">
Visualizes how far the current run has been ahead or behind the chosen comparison throughout the whole run. All the individual deltas are shown as points on the graph.
</span>
</MenuItem>
<MenuItem className="tooltip" onClick={(_) => this.addComponent(LiveSplit.SplitsComponent)}>
Splits
<span className="tooltip-text">
The main component for visualizing all the split times. Each segment is shown in a tabular fashion showing the segment icon, segment name, the delta compared to the chosen comparison, and the split time. The list provides scrolling functionality, so not every segment needs to be shown all the time.
</span>
</MenuItem>
<MenuItem divider />
<MenuItem onClick={(_) => this.addComponent(LiveSplit.BlankSpaceComponent)}>
Blank Space
<MenuItem className="tooltip" onClick={(_) => this.addComponent(LiveSplit.DetailedTimerComponent)}>
Detailed Timer
<span className="tooltip-text">
Shows two timers, one for the total time of the current run and one showing the time of just the current segment. Other information, like segment times of up to two comparisons, the segment icon, and the segment name, can also be shown.
</span>
</MenuItem>
<MenuItem onClick={(_) => this.addComponent(LiveSplit.SeparatorComponent)}>
<MenuItem className="tooltip" onClick={(_) => this.addComponent(LiveSplit.TimerComponent)}>
Timer
<span className="tooltip-text">
Shows the total time of the current run as a digital clock. The color of the time shown is based on a how well the current run is doing compared to the chosen comparison.
</span>
</MenuItem>
<MenuItem divider />
<MenuItem className="tooltip" onClick={(_) => this.addComponent(LiveSplit.CurrentComparisonComponent)}>
Current Comparison
<span className="tooltip-text">
Shows the name of the comparison that the timer is currently comparing against.
</span>
</MenuItem>
<MenuItem className="tooltip" onClick={(_) => this.addComponent(LiveSplit.CurrentPaceComponent)}>
Current Pace
<span className="tooltip-text">
Shows a prediction for the current run's final time. The remainder of the run is predicted based on the chosen comparison for the component. For example, the "Best Segments" comparison can be chosen to show the best possible final time for the current run based on the Sum of Best Segments.
</span>
</MenuItem>
<MenuItem className="tooltip" onClick={(_) => this.addComponent(LiveSplit.DeltaComponent)}>
Delta
<span className="tooltip-text">
Shows how far ahead or behind the current run is compared to the chosen comparison.
</span>
</MenuItem>
<MenuItem className="tooltip" onClick={(_) => this.addComponent(LiveSplit.PbChanceComponent)}>
PB Chance
<span className="tooltip-text">
Shows how likely it is for the active run to beat the personal best. If there is no active run, it shows the general chance of beating the personal best. During a run, it actively changes based on how well the run is going.
</span>
</MenuItem>
<MenuItem className="tooltip" onClick={(_) => this.addComponent(LiveSplit.PossibleTimeSaveComponent)}>
Possible Time Save
<span className="tooltip-text">
Shows how much time you can save on the current segment compared to the chosen comparison, based on the best segment time of the segment. This component also allows showing the "Total Possible Time Save" for the remainder of the current run.
</span>
</MenuItem>
<MenuItem className="tooltip" onClick={(_) => this.addComponent(LiveSplit.PreviousSegmentComponent)}>
Previous Segment
<span className="tooltip-text">
Shows how much time was saved or lost during the previous segment based on the chosen comparison. Additionally, the potential time save for the previous segment can be displayed. This component switches to a "Live Segment" view that shows the active time loss whenever you are losing time on the current segment.
</span>
</MenuItem>
<MenuItem className="tooltip" onClick={(_) => this.addComponent(LiveSplit.SegmentTimeComponent)}>
Segment Time
<span className="tooltip-text">
Shows the time for the current segment for the chosen comparison. If no comparison is specified it uses the timer's current comparison.
</span>
</MenuItem>
<MenuItem className="tooltip" onClick={(_) => this.addComponent(LiveSplit.SumOfBestComponent)}>
Sum of Best Segments
<span className="tooltip-text">
Shows the fastest possible time to complete a run of the current category, based on information collected from all the previous runs. This often matches up with the sum of the best segment times of all the segments, but that may not always be the case, as skipped segments may introduce combined segments that may be faster than the actual sum of their best segment times. The name is therefore a bit misleading, but sticks around for historical reasons.
</span>
</MenuItem>
<MenuItem className="tooltip" onClick={(_) => this.addComponent(LiveSplit.TextComponent)}>
Text
<span className="tooltip-text">
Shows the text that you specify. This can either be a single centered text, or split up into a left and right text, which is suitable for a situation where you have a label and a value. There is also the option of showing a custom variable that you specify in the splits editor.
</span>
</MenuItem>
<MenuItem className="tooltip" onClick={(_) => this.addComponent(LiveSplit.TotalPlaytimeComponent)}>
Total Playtime
<span className="tooltip-text">
Shows the total amount of time that the current category has been played for.
</span>
</MenuItem>
<MenuItem divider />
<MenuItem className="tooltip" onClick={(_) => this.addComponent(LiveSplit.BlankSpaceComponent)}>
Blank Space
<span className="tooltip-text">
An empty component that doesn't show anything other than a background. It mostly serves as padding between other components.
</span>
</MenuItem>
<MenuItem className="tooltip" onClick={(_) => this.addComponent(LiveSplit.SeparatorComponent)}>
Separator
<span className="tooltip-text">
A simple component that just renders a separator between components.
</span>
</MenuItem>
</ContextMenu>
<button
@@ -234,7 +287,6 @@ export class LayoutEditor extends React.Component<Props, State> {
)}
onClick={(_) => {
this.setState({
...this.state,
showComponentSettings: false,
});
}}
@@ -249,7 +301,6 @@ export class LayoutEditor extends React.Component<Props, State> {
)}
onClick={(_) => {
this.setState({
...this.state,
showComponentSettings: true,
});
}}
@@ -306,22 +357,22 @@ export class LayoutEditor extends React.Component<Props, State> {
);
}
private update() {
private update(showComponentSettings?: boolean) {
this.setState({
...this.state,
editor: this.props.editor.stateAsJson(this.props.layoutEditorUrlCache.imageCache),
showComponentSettings: showComponentSettings ?? this.state.showComponentSettings,
});
this.props.layoutEditorUrlCache.collect();
}
private selectComponent(i: number) {
this.props.editor.select(i);
this.update();
this.update(true);
}
private addComponent(componentClass: any) {
this.props.editor.addComponent(componentClass.new().intoGeneric());
this.update();
this.update(true);
}
private removeComponent() {
src/ui/RunEditor.tsx
+51 -15
View File
@@ -153,23 +153,35 @@ export class RunEditor extends React.Component<Props, State> {
</ContextMenuTrigger>
</div>
<ContextMenu id="game-icon-context-menu">
<MenuItem onClick={(_) => this.changeGameIcon()}>
<MenuItem className="tooltip" onClick={(_) => this.changeGameIcon()}>
Set Icon
<span className="tooltip-text">
Allows you to choose an image file to set as the game's icon. Certain file formats may not work everywhere.
</span>
</MenuItem>
{
this.props.generalSettings.speedrunComIntegration && <>
<MenuItem onClick={(_) => this.downloadBoxArt()}>
<MenuItem className="tooltip" onClick={(_) => this.downloadBoxArt()}>
Download Box Art
<span className="tooltip-text">
Attempts to download the box art of the game from speedrun.com, to set as the game's icon.
</span>
</MenuItem>
<MenuItem onClick={(_) => this.downloadIcon()}>
<MenuItem className="tooltip" onClick={(_) => this.downloadIcon()}>
Download Icon
<span className="tooltip-text">
Attempts to download the icon of the game from speedrun.com.
</span>
</MenuItem>
</>
}
{
gameIcon !== undefined &&
<MenuItem onClick={(_) => this.removeGameIcon()}>
<MenuItem className="tooltip" onClick={(_) => this.removeGameIcon()}>
Remove Icon
<span className="tooltip-text">
Removes the icon of the game.
</span>
</MenuItem>
}
</ContextMenu>
@@ -209,7 +221,7 @@ export class RunEditor extends React.Component<Props, State> {
onBlur={(_) => this.handleOffsetBlur()}
small
invalid={!this.state.offsetIsValid}
label="Offset"
label="Start Timer At"
/>
</div>
<div className="info-table-cell">
@@ -342,17 +354,29 @@ export class RunEditor extends React.Component<Props, State> {
</ContextMenuTrigger>
</button>
<ContextMenu id="other-button-context-menu">
<MenuItem onClick={(_) => this.clearHistory()}>
Clear History
<MenuItem className="tooltip" onClick={(_) => this.clearHistory()}>
Clear Only History
<span className="tooltip-text">
Splits store the entire history of all runs, including every segment time. This information is used by various components. You can clear the history with this. The personal best, the best segment times, and the comparisons will not be affected.
</span>
</MenuItem>
<MenuItem onClick={(_) => this.clearTimes()}>
Clear Times
<MenuItem className="tooltip" onClick={(_) => this.clearTimes()}>
Clear All Times
<span className="tooltip-text">
This removes all the times from the splits, including all the history, such that the splits are completely empty, as if they were just created.
</span>
</MenuItem>
<MenuItem onClick={(_) => this.cleanSumOfBest()}>
<MenuItem className="tooltip" onClick={(_) => this.cleanSumOfBest()}>
Clean Sum of Best
<span className="tooltip-text">
Allows you to interactively remove potential issues in the segment history that lead to an inaccurate Sum of Best. If you skip a split, whenever you will do the next split, the combined segment time might be faster than the sum of the individual best segments. This will point out all such occurrences and allow you to delete them individually if any of them seem wrong.
</span>
</MenuItem>
<MenuItem onClick={(_) => this.generateGoalComparison()}>
<MenuItem className="tooltip" onClick={(_) => this.generateGoalComparison()}>
Generate Goal Comparison
<span className="tooltip-text">
Generates a custom goal comparison based on a goal time that you can specify. The comparison's times are automatically balanced based on the segment history such that it roughly represents what the split times for the goal time would look like. Since it is populated by the segment history, the goal times are capped to a range between the sum of the best segments and the sum of the worst segments. The comparison is only populated for the selected timing method. The other timing method's comparison times are not modified by this, so you can generate it again with the other timing method to generate the comparison times for both timing methods.
</span>
</MenuItem>
</ContextMenu>
</div>
@@ -1193,15 +1217,21 @@ export class RunEditor extends React.Component<Props, State> {
{comparison}
</ContextMenuTrigger>
<ContextMenu id={id}>
<MenuItem onClick={(_) =>
<MenuItem className="tooltip" onClick={(_) =>
this.renameComparison(comparison)
}>
Rename
<span className="tooltip-text">
Choose a new name for the custom comparison. There are reserved names that can't be used. You also can't have duplicate names.
</span>
</MenuItem>
<MenuItem onClick={(_) =>
<MenuItem className="tooltip" onClick={(_) =>
this.removeComparison(comparison)
}>
Remove
<span className="tooltip-text">
Removes the custom comparison.
</span>
</MenuItem>
</ContextMenu>
</th>
@@ -1256,11 +1286,17 @@ export class RunEditor extends React.Component<Props, State> {
}
</ContextMenuTrigger>
<ContextMenu id={segmentIconContextMenuId}>
<MenuItem onClick={(_) => this.changeSegmentIcon(segmentIndex)}>
<MenuItem className="tooltip" onClick={(_) => this.changeSegmentIcon(segmentIndex)}>
Set Icon
<span className="tooltip-text">
Allows you to choose an image file to set as the segment's icon. Certain file formats may not work everywhere.
</span>
</MenuItem>
<MenuItem onClick={(_) => this.removeSegmentIcon(segmentIndex)}>
<MenuItem className="tooltip" onClick={(_) => this.removeSegmentIcon(segmentIndex)}>
Remove Icon
<span className="tooltip-text">
Removes the segment's icon.
</span>
</MenuItem>
</ContextMenu>
</td>
src/ui/SplitsSelection.tsx
+8 -2
View File
@@ -140,12 +140,18 @@ export class SplitsSelection extends React.Component<Props, State> {
</ContextMenuTrigger>
</button>
<ContextMenu id={segmentIconContextMenuId}>
<MenuItem onClick={(_) => this.exportSplits(key, info)}>
<MenuItem className="tooltip" onClick={(_) => this.exportSplits(key, info)}>
Export to File
<span className="tooltip-text">
Export the splits to a file on your computer.
</span>
</MenuItem>
{
this.props.generalSettings.splitsIoIntegration && <MenuItem onClick={(_) => this.uploadSplitsToSplitsIO(key)}>
this.props.generalSettings.splitsIoIntegration && <MenuItem className="tooltip" onClick={(_) => this.uploadSplitsToSplitsIO(key)}>
Upload to Splits.io
<span className="tooltip-text">
Upload the splits to splits.io.
</span>
</MenuItem>
}
</ContextMenu>