Skip to content

Task/tsp 1271 theme change #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Sep 12, 2025
Merged

Task/tsp 1271 theme change #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c2cfdfa
color correction for plot and plot-container
Sep 8, 2025
4d522db
refreshing in client server
Sep 8, 2025
1b9db13
css variable changes
Sep 11, 2025
9ccbb33
color change from blue to css variable
Sep 11, 2025
a4bef5c
List and timing close button
Sep 11, 2025
6ed11ce
Highlight color change
Sep 11, 2025
a069fcf
Merge branch 'main' into task/TSP-1271-theme-change
esarver Sep 11, 2025
041c057
Merge branch 'main' into task/TSP-1271-theme-change
jharajeev55 Sep 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions kic-script-gen/src/back_end/client_server.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,6 +313,8 @@ pub async fn start(mut script_model: ScriptModel) -> anyhow::Result<()> {
if let Some(session) = session.as_mut() {
session.text(response).await.unwrap();
}
} else if trimmed_line.contains("refresh") {
println!("instrument data requested"); // refreshing by initiating session again does not affect the JSON state
} else if trimmed_line.contains("reset") {
let mut data_model = app_state.data_model.lock().await;
let response = data_model.reset_sweep_config();
Expand Down
4 changes: 2 additions & 2 deletions script-gen-ui/src/app/components/controls/input-toggle/input-toggle.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ td {
}

.toggle-option.selected {
background-color: #007acc;
background-color: var(--vscode-activityBarBadge-background);
color: white;
border-radius: 5px;
}
Expand Down Expand Up @@ -84,4 +84,4 @@ td {
cursor: not-allowed;
background-color: var(--vscode-editorWidget-background, var(--vscode-input-background));
color: var(--vscode-disabledForeground, var(--vscode-input-foreground));
}
}
2 changes: 1 addition & 1 deletion script-gen-ui/src/app/components/main-sweep/list/list.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@

.button {
background-color: transparent;
color: var(--vscode-activityBarBadge-foreground);
color: var(--vscode-editor-foreground);
}

.button:hover {
Expand Down
15 changes: 8 additions & 7 deletions script-gen-ui/src/app/components/main-sweep/main-sweep.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,8 +251,8 @@
.timing {
border-radius: 13px;
background-color: transparent;
color: var(--vscode-activityBarBadge-foreground);
border-color: var(--vscode-activityBar-activeBorder);
color: var(--vscode-editor-foreground);
border-color: var(--vscode-activityBarBadge-background);
border-style: solid;
border-width: thin;
padding-top: 5px;
Expand Down Expand Up @@ -280,10 +280,11 @@
appearance: none;
padding: 10px;
border-radius: 3px;
border: 1px solid var(--vscode-editorWidget-border);
}

.checkbox input[type="checkbox"]:checked {
border-color: var(--vscode-activityBar-activeBorder);
border-color: var(--vscode-activityBarBadge-background);
}

.checkbox input[type="checkbox"]:checked::after {
Expand All @@ -292,7 +293,7 @@
top: 1px;
width: 5px;
height: 10px;
border: solid var(--vscode-activityBar-activeBorder);
border: solid var(--vscode-activityBarBadge-background);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
display: block;
Expand All @@ -309,7 +310,7 @@
}

input:focus {
border: 2px solid #007bff; /* Highlight border color */
border: 2px solid var(--vscode-activityBarBadge-background); /* Highlight border color */
outline: none; /* Remove default outline */
// background-color: #f0f8ff; /* Optional: Change background color */
}
Expand All @@ -326,8 +327,8 @@ input:focus {
.open-script {
border-radius: 13px;
background-color: transparent;
color: var(--vscode-activityBarBadge-foreground);
border-color: var(--vscode-activityBar-activeBorder);
color: var(--vscode-editor-foreground);
border-color: var(--vscode-activityBarBadge-background);
border-style: solid;
border-width: thin;
padding-top: 5px;
Expand Down
2 changes: 1 addition & 1 deletion ...pt-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
? '1px solid ' + activeStyle.backgroundColor
: '1px solid var(--vscode-editorWidget-border)',
backgroundColor: isActive
? 'black'
? 'var(--vscode-activityErrorBadge-foreground)'
: 'var(--vscode-editor-background)'
}"
>
Expand Down
30 changes: 15 additions & 15 deletions ...pt-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// display: flex;
flex-direction: column;
width: 100%;
height: 100%;
// height: 100%;
// height: 400px;
background-color: var(--vscode-editor-background);
// height: 300px;
Expand All @@ -14,30 +14,30 @@
margin-bottom: 10px;
padding-bottom: 7px;
background-color: var(--vscode-editor-background);
border: 1px solid #F6F07D;
border: 1px solid #f6f07d;
width: 100%;
height: 100%;
// border-right: 1px solid #F6F07D;
// border-bottom: 1px solid #F6F07D;
}

// @media (max-width: 120vh) {
// .plot-item {
// // border-left: 1px solid #F6F07D;
// border-radius: 11px;
// margin-bottom: 10px;
// padding-bottom: 7px;
// background-color: var(--vscode-editor-background);
// border: 1px solid #F6F07D;
// // border-right: 1px solid #F6F07D;
// // border-bottom: 1px solid #F6F07D;
// }
// }
// @media (max-width: 120vh) {
// .plot-item {
// // border-left: 1px solid #F6F07D;
// border-radius: 11px;
// margin-bottom: 10px;
// padding-bottom: 7px;
// background-color: var(--vscode-editor-background);
// border: 1px solid #F6F07D;
// // border-right: 1px solid #F6F07D;
// // border-bottom: 1px solid #F6F07D;
// }
// }

.plot-info {
// margin-bottom: 10px;
font-size: 14px;
color:black;
color: var(--vscode-activityBar-foreground);
display: flex;
background-color: transparent;
// background-color: #F6F07D;
Expand Down
42 changes: 35 additions & 7 deletions script-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export class PlotBiasComponent
private mutationObserver: MutationObserver | undefined;
private originalBackgroundColor = '';
activeBackgroundColor = '';
private tickColor = '';
windowHeight = window.innerHeight;
windowWidth = window.innerWidth;

Expand All @@ -60,7 +61,7 @@ export class PlotBiasComponent
separatethousands: false,
tickfont: {
family: 'Roboto, "Helvetica Neue", sans-serif',
color: 'white',
color: this.tickColor,
size: 9,
},
dtick: 1,
Expand Down Expand Up @@ -104,7 +105,7 @@ export class PlotBiasComponent
range: [0, 2],
tickfont: {
family: 'Roboto, "Helvetica Neue", sans-serif',
color: 'white',
color: this.tickColor,
size: 9,
},
dtick: 0.5,
Expand All @@ -124,7 +125,7 @@ export class PlotBiasComponent
yaxis2: {
tickfont: {
family: 'Roboto, "Helvetica Neue", sans-serif',
color: 'white',
color: this.tickColor,
size: 9,
},
anchor: 'x',
Expand Down Expand Up @@ -324,8 +325,21 @@ export class PlotBiasComponent
? this.rgbToHex(activeBg)
: activeBg;

const tickColorRaw = this.getCssVariableValue(
'--vscode-editor-foreground'
);
this.tickColor = tickColorRaw.startsWith('rgb')
? this.rgbToHex(tickColorRaw)
: tickColorRaw;

// Update tick colors in plot layout
this.plotLayout.xaxis.tickfont.color = this.tickColor;
this.plotLayout.yaxis.tickfont.color = this.tickColor;
this.plotLayout.yaxis2.tickfont.color = this.tickColor;

console.log('Initial background color:', backgroundColorHex);
console.log('Initial active background color:', this.activeBackgroundColor);
console.log('Initial tick color:', this.tickColor);
}

private renderPlot(): void {
Expand Down Expand Up @@ -368,11 +382,25 @@ export class PlotBiasComponent
? this.rgbToHex(activeBg)
: activeBg;

console.log('Theme changed, new background color:', backgroundColorHex);
console.log(
'Theme changed, new active background color:',
this.activeBackgroundColor
// Update tick color on theme change
const tickColorRaw = this.getCssVariableValue(
'--vscode-activityBarBadge-foreground'
);
this.tickColor = tickColorRaw.startsWith('rgb')
? this.rgbToHex(tickColorRaw)
: tickColorRaw;

// Update tick colors in plot layout
this.plotLayout.xaxis.tickfont.color = this.tickColor;
this.plotLayout.yaxis.tickfont.color = this.tickColor;
this.plotLayout.yaxis2.tickfont.color = this.tickColor;

// console.log('Theme changed, new background color:', backgroundColorHex);
// console.log(
// 'Theme changed, new active background color:',
// this.activeBackgroundColor
// );
// console.log('Theme changed, new tick color:', this.tickColor);

this.renderPlot();
});
Expand Down
2 changes: 1 addition & 1 deletion script-gen-ui/src/app/components/main-sweep/plot-container/plot-container.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
.plot-info {
margin-bottom: 10px;
font-size: 14px;
color: var(--vscode-editor-foreground);
color: var(--vscode-activityBar-foreground);
}

.plot-info p {
Expand Down
4 changes: 2 additions & 2 deletions script-gen-ui/src/app/components/main-sweep/plot-container/plot-container.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,13 +215,13 @@ export class PlotContainerComponent implements OnInit, AfterViewInit, OnDestroy
const isActive =
this.activeComponent === componentType && this.activeIndex === index;
const backgroundColor =
this.colorMap.get(uuid) || 'var(--vscode-activityBar-border)';
this.colorMap.get(uuid) || 'var(--vscode-activityBar-foreground)';

return {
backgroundColor: isActive
? backgroundColor
: 'var(--vscode-activityBar-border)',
color: isActive ? 'black' : 'white',
color: isActive ? 'black' : 'var(--vscode-badge-foreground)',
};
}

Expand Down
2 changes: 1 addition & 1 deletion ...pt-gen-ui/src/app/components/main-sweep/plot-container/plot-step/plot-step.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
? '1px solid ' + activeStyle.backgroundColor
: '1px solid var(--vscode-editorWidget-border)',
backgroundColor: isActive
? 'black'
? 'var(--vscode-activityErrorBadge-foreground)'
: 'var(--vscode-editor-background)'
}"
>
Expand Down
23 changes: 15 additions & 8 deletions ...pt-gen-ui/src/app/components/main-sweep/plot-container/plot-step/plot-step.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,29 @@

.plot-item {
// border-left: 1px solid #7FBDC6;
border-radius: 10px;
border-radius: 11px;
margin-bottom: 10px;
padding-bottom: 7px;
background-color: black;
background-color: var(--vscode-editor-background);
// border: 1px solid #F6F07D;
width: 100%;
height: 100%;
// border-right: 1px solid #7FBDC6;
// border-bottom: 1px solid #7FBDC6;
}

.plot-info {
// margin-bottom: 10px;
color: #000;
font-size: 14px;
color: var(--vscode-activityBar-foreground);
display: flex;
background-color: transparent;
// border: 5px #7FBDC6;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 5px 5px 5px 10px;
// background-color: #F6F07D;
// border: 5px #F6F07D;
padding: 5px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
padding-left: 10px;
font-size: smaller;
}

Expand All @@ -39,6 +45,7 @@
margin: 0 10px; /* Adjust spacing as needed */
}

.wait-cursor, .wait-cursor * {
.wait-cursor,
.wait-cursor * {
cursor: wait !important;
}
Loading
Loading