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

Fix separator in Splits component

Browse Source
This commit is contained in:
wooferzfg
2020-02-08 01:30:30 -06:00
parent 37f064945c
commit 63305e2209
2 changed files with 34 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/Splits.scss
+22 -3
View File
@@ -6,6 +6,8 @@ $split-label-height: 22px;
$split-column-padding: 6px;
$split-icon-size: $default-component-height - $split-column-padding;
$split-icon-two-row-size: $two-row-height - $split-column-padding;
$thin-separator-width: 1px;
$thick-separator-width: 2px;
.splits {
width: 100%;
@@ -18,6 +20,8 @@ $split-icon-two-row-size: $two-row-height - $split-column-padding;
width: 100%;
height: $default-component-height;
@include time;
&.two-rows {
height: $two-row-height;
line-height: $two-row-line-height;
@@ -42,8 +46,6 @@ $split-icon-two-row-size: $two-row-height - $split-column-padding;
}
}
@include time;
.split-icon-container {
padding: 2px $split-column-padding;
width: $split-icon-size;
@@ -139,11 +141,28 @@ $split-icon-two-row-size: $two-row-height - $split-column-padding;
height: $split-label-height;
}
.current-split-background {
.current-split-background,
.split-borders {
position: absolute;
width: 100%;
height: 100%;
top: 0;
padding: 0;
box-sizing: border-box;
}
.split-borders {
border-bottom-width: $thin-separator-width;
border-top-width: $thin-separator-width;
border-bottom-style: solid;
border-top-style: solid;
top: -$thick-separator-width / 2;
height: calc(100% + #{$thick-separator-width} / 2);
&.separator-above {
border-top-width: $thick-separator-width;
border-top-style: solid;
}
}
}
}
src/layout/Split.tsx
+12 -11
View File
@@ -29,18 +29,22 @@ export default class Split extends React.Component<Props> {
const outerStyle: any = {};
if (this.props.split.index % 2 === 1) {
innerStyle.borderBottom = this.props.splitsState.show_thin_separators
? `1px solid ${colorToCss(this.props.layoutState.thin_separators_color)}`
: "1px solid transparent";
if (this.props.splitsState.show_thin_separators) {
innerStyle.borderBottomColor = colorToCss(this.props.layoutState.thin_separators_color);
} else {
innerStyle.borderBottomColor = "transparent";
}
outerStyle.backgroundColor = this.props.evenOdd[1];
} else {
innerStyle.borderBottom = "1px solid transparent";
innerStyle.borderBottomColor = "transparent";
outerStyle.backgroundColor = this.props.evenOdd[0];
}
innerStyle.borderTop = innerStyle.borderBottom;
innerStyle.borderTopColor = innerStyle.borderBottomColor;
let separatorAbove = "";
if (this.props.separatorInFrontOfSplit) {
innerStyle.borderTop = `2px solid ${colorToCss(this.props.layoutState.separators_color)}`;
innerStyle.borderTopColor = colorToCss(this.props.layoutState.separators_color);
separatorAbove = "separator-above";
}
const currentSplitBackgroundStyle: any = {};
@@ -64,20 +68,17 @@ export default class Split extends React.Component<Props> {
style={outerStyle}
>
<div className="current-split-background" style={currentSplitBackgroundStyle}></div>
<div className={`split-borders ${separatorAbove}`} style={innerStyle}></div>
<div
key="split-icon"
className={splitsHaveIcons ? "split-icon-container" : "split-icon-container-empty"}
style={innerStyle}
>
{
splitsHaveIcons && hasIcon &&
<img className="split-icon" src={this.props.icon} />
}
</div>
<div
className="split-rows"
style={innerStyle}
>
<div className="split-rows">
<div className="split-row split-first-row">
<div
key="split-name"