Tooltipper: Add "align" prop

HearthSim · Jul 28, 2016 · bcd5ff1 · bcd5ff1
1 parent 55b82c1
commit bcd5ff1
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 17 deletions.
diff --git a/less/scrubber.less b/less/scrubber.less
@@ -118,17 +118,39 @@
 	position: relative;
 
 	> .joust-tooltipper-tooltip {
-		white-space: nowrap;
 		z-index: 1000;
-		font-family: sans-serif;
 		display: block;
-		text-align: center;
 		position: absolute;
 		top: -36px;
-		color: white;
-		background-color: black;
-		padding: 6px 8px;
-		border-radius: 4px;
-		font-size: 1em;
+		width: 0;
+		left: 50%;
+
+		> span {
+			text-align: center;
+			font-size: 1em;
+			display: inline-block;
+			white-space: nowrap;
+			font-family: sans-serif;
+			color: white;
+			background-color: black;
+			padding: 6px 8px;
+			border-radius: 4px;
+			transform: translateX(-50%);
+		}
+
+		&.left {
+			left: 0;
+			> span {
+				transform: none;
+			}
+		}
+
+		&.right {
+			left: auto;
+			right: 0;
+			> span {
+				transform: translateX(-100%);
+			}
+		}
 	}
 }
diff --git a/ts/components/Scrubber.tsx b/ts/components/Scrubber.tsx
@@ -148,19 +148,22 @@ class Scrubber extends React.Component<ScrubberProps, ScrubberState> {
 
 	public render(): JSX.Element {
 		var playpause = this.state.playing ?
-			<Tooltipper title="Pause">
+			<Tooltipper title="Pause" align="left">
 				<button onClick={() => this.pause()} disabled={!this.state.canInteract}><i className="joust-fa joust-fa-pause"></i></button>
 			</Tooltipper> :
-			<Tooltipper title="Play">
+			<Tooltipper title="Play" align="left">
 				<button onClick={() => this.play()} disabled={!this.state.canPlay}><i className="joust-fa joust-fa-play"></i></button>
 			</Tooltipper>;
 
+		var restart = <Tooltipper title="Restart" align="left">
+			<button onClick={() => this.rewind()} disabled={!this.state.canRewind}><i className="joust-fa joust-fa-fast-backward"></i></button>
+		</Tooltipper>;
 
 		var fullscreen = this.props.isFullscreen ?
-			<Tooltipper title="Minimize">
+			<Tooltipper title="Minimize" align="right">
 				<button onClick={this.props.onClickMinimize}><i className="joust-fa joust-fa-compress"></i></button>
 			</Tooltipper> :
-			<Tooltipper	title="Fullscreen">
+			<Tooltipper title="Fullscreen" align="right">
 				<button onClick={this.props.onClickFullscreen} disabled={!this.props.isFullscreenAvailable}><i className="joust-fa joust-fa-expand"></i></button>
 			</Tooltipper>;
 
@@ -172,10 +175,6 @@ class Scrubber extends React.Component<ScrubberProps, ScrubberState> {
 				<button onClick={this.props.onClickRevealCards} disabled={!this.props.canRevealCards}><i className="joust-fa joust-fa-eye"></i></button>
 			</Tooltipper>;
 
-		var restart = <Tooltipper title="Restart">
-			<button onClick={() => this.rewind()} disabled={!this.state.canRewind}><i className="joust-fa joust-fa-fast-backward"></i></button>
-		</Tooltipper>;
-
 		var swap = <Tooltipper title="Swap players">
 			<button onClick={this.props.swapPlayers} disabled={!this.state.canInteract}><i className="joust-fa joust-fa-unsorted"></i></button>
 		</Tooltipper>;

diff --git a/ts/components/Tooltipper.tsx b/ts/components/Tooltipper.tsx
@@ -4,6 +4,7 @@ import MouseEventHandler = __React.MouseEventHandler;
 
 interface TooltipperProps extends React.Props<any> {
 	title?:string;
+	align?:"left" | "center" | "right";
 }
 
 interface TooltipperState {
@@ -27,12 +28,16 @@ export default class Tooltipper extends React.Component<TooltipperProps, Tooltip
 	}
 
 	render():JSX.Element {
+		let classNames = ["joust-tooltipper-tooltip"];
+		if (this.props.align) {
+			classNames.push(this.props.align);
+		}
 		return <div className="joust-tooltipper"
 					onMouseOver={(e) => {this.startHovering(e)}}
 					onTouchStart={(e) => {this.startHovering(e)}}
 					onMouseOut={(e) => {this.stopHovering(e)}}
 					onTouchEnd={(e) => {this.stopHovering(e)}}>
-			{this.state.isHovering ? <div className="joust-tooltipper-tooltip">{this.props.title}</div> : null}
+			{this.state.isHovering ? <div className={classNames.join(" ")}><span>{this.props.title}</span></div> : null}
 			{this.props.children}
 		</div>;
 	}