add left border

TNO · Oct 11, 2023 · 3bd5c45 · 3bd5c45
1 parent eb2f197
commit 3bd5c45
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 13 deletions.
diff --git a/media/style.css b/media/style.css
@@ -85,17 +85,16 @@ div.vertical-line {
     align-items: center;
     justify-content: center;
     height: 40px;
-    border-right: 1px;
+    border-right: 1px solid var(--vscode-menu-foreground);
+    z-index: 100;
 }
 
 .box1 {
     display: flex;
-    align-items: center;
-    justify-content: center;
+    /* align-items: center;
+    justify-content: center; */
     height: 28px;
-    border-right: 1px;
-    border-color: black;
+    border-right: 1px solid var(--vscode-menu-foreground);
     background-color: white;
-    position: sticky;
     z-index: 100;
 }
diff --git a/src/viewer/App.tsx b/src/viewer/App.tsx
@@ -112,7 +112,8 @@ export default class App extends React.Component<Props, State> {
 			currentStructureMatchIndex: null,
 			currentStructureMatch: [],
 			lastSelectedRow: undefined,
-			collapsibleRows: {},
+			// collapsibleRows: {},
+			collapsibleRows: { 1: constructNewSegment(1, 10, 0), 2: constructNewSegment(2, 6, 1), 5: constructNewSegment(5, 15, 0), 7: constructNewSegment(7, 10, 1), 0 : constructNewSegment(0, 20, 2)},
 		};
 
 		this.onMessage = this.onMessage.bind(this);

diff --git a/src/viewer/hooks/useStyleManager.ts b/src/viewer/hooks/useStyleManager.ts
@@ -90,8 +90,6 @@ export const getSegmentStyle = (columnWidth: number, height: number): React.CSSP
 		width: columnWidth,
 		position: "sticky",
 		left: 0,
-		borderRight: 1,
-		borderColor: "black"
 	};
 
 	return headerColumnStyle;
@@ -105,7 +103,6 @@ export const getSegmentRowStyle = (segmentWidth: number, top: number): React.CSS
 		width: segmentWidth,
 		left: 0,
 		zIndex: 100,
-		borderRight: 1
 	}
 	return segmentRowStyle;
 }
@@ -119,7 +116,7 @@ export const getHeaderColumnInnerStyle = (
 		alignItems: "center",
 		justifyContent: isHeader ? "center" : "left",
 		paddingLeft: "2px",
-		borderLeft: BORDER,
+		borderRight: BORDER,
 	};
 
 	return headerColumnInnerStyle;

diff --git a/src/viewer/log/LogView.tsx b/src/viewer/log/LogView.tsx
@@ -210,10 +210,13 @@ export default class LogView extends React.Component<Props, State> {
 	renderSegmentForRow(r: number, level: number) {
 		const { collapsibleRows } = this.props;
 		const style: React.CSSProperties = {
+			display: "inline-block",
+			position: "relative",
 			textAlign: "center",
 			alignContent: "center",
 			justifyContent: "center",
 			height: LOG_ROW_HEIGHT,
+			width: 30
 		};
 		let annotation = false;
 		if (collapsibleRows[r] != undefined && collapsibleRows[r].level == level) {
@@ -245,12 +248,12 @@ export default class LogView extends React.Component<Props, State> {
 		}
 		if (annotation) {
 			return (
-				<div style={ style } key={r + "_" + level} className="box1">
+				<div style={ style } key={r + "_" + level}>
 					<div style={{ backgroundColor: this.getRGB(level) }} className="vertical-line"></div>
 				</div>
 			);
 		} else {
-			return <div style={ style } key={r + "_" + level} className="box1"></div>;
+			return <div style={ style } key={r + "_" + level}></div>;
 		}
 	}