Skip to content

Commit 934f150

Browse files
RajeshwriKRajeshwari Kiwadesarverjharajeev55
authored
Task/tsp 1271 theme change (#10)
Changes related to theme change and receiving "refresh" signal on server end Making components compatible with theme changes using variables --------- Co-authored-by: Rajeshwari Kiwad <[email protected]> Co-authored-by: esarver <[email protected]> Co-authored-by: jharajeev55 <[email protected]>
1 parent eab3a4c commit 934f150

17 files changed

+194
-89
lines changed

‎kic-script-gen/src/back_end/client_server.rs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -313,6 +313,8 @@ pub async fn start(mut script_model: ScriptModel) -> anyhow::Result<()> {
313313
if let Some(session) = session.as_mut() {
314314
session.text(response).await.unwrap();
315315
}
316+
} else if trimmed_line.contains("refresh") {
317+
println!("instrument data requested"); // refreshing by initiating session again does not affect the JSON state
316318
} else if trimmed_line.contains("reset") {
317319
let mut data_model = app_state.data_model.lock().await;
318320
let response = data_model.reset_sweep_config();

‎script-gen-ui/src/app/components/controls/input-toggle/input-toggle.component.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ td {
4343
}
4444

4545
.toggle-option.selected {
46-
background-color: #007acc;
46+
background-color: var(--vscode-activityBarBadge-background);
4747
color: white;
4848
border-radius: 5px;
4949
}
@@ -84,4 +84,4 @@ td {
8484
cursor: not-allowed;
8585
background-color: var(--vscode-editorWidget-background, var(--vscode-input-background));
8686
color: var(--vscode-disabledForeground, var(--vscode-input-foreground));
87-
}
87+
}

‎script-gen-ui/src/app/components/main-sweep/list/list.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@
9494

9595
.button {
9696
background-color: transparent;
97-
color: var(--vscode-activityBarBadge-foreground);
97+
color: var(--vscode-editor-foreground);
9898
}
9999

100100
.button:hover {

‎script-gen-ui/src/app/components/main-sweep/main-sweep.component.scss‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -251,8 +251,8 @@
251251
.timing {
252252
border-radius: 13px;
253253
background-color: transparent;
254-
color: var(--vscode-activityBarBadge-foreground);
255-
border-color: var(--vscode-activityBar-activeBorder);
254+
color: var(--vscode-editor-foreground);
255+
border-color: var(--vscode-activityBarBadge-background);
256256
border-style: solid;
257257
border-width: thin;
258258
padding-top: 5px;
@@ -280,10 +280,11 @@
280280
appearance: none;
281281
padding: 10px;
282282
border-radius: 3px;
283+
border: 1px solid var(--vscode-editorWidget-border);
283284
}
284285

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

289290
.checkbox input[type="checkbox"]:checked::after {
@@ -292,7 +293,7 @@
292293
top: 1px;
293294
width: 5px;
294295
height: 10px;
295-
border: solid var(--vscode-activityBar-activeBorder);
296+
border: solid var(--vscode-activityBarBadge-background);
296297
border-width: 0 2px 2px 0;
297298
transform: rotate(45deg);
298299
display: block;
@@ -309,7 +310,7 @@
309310
}
310311

311312
input:focus {
312-
border: 2px solid #007bff; /* Highlight border color */
313+
border: 2px solid var(--vscode-activityBarBadge-background); /* Highlight border color */
313314
outline: none; /* Remove default outline */
314315
// background-color: #f0f8ff; /* Optional: Change background color */
315316
}
@@ -326,8 +327,8 @@ input:focus {
326327
.open-script {
327328
border-radius: 13px;
328329
background-color: transparent;
329-
color: var(--vscode-activityBarBadge-foreground);
330-
border-color: var(--vscode-activityBar-activeBorder);
330+
color: var(--vscode-editor-foreground);
331+
border-color: var(--vscode-activityBarBadge-background);
331332
border-style: solid;
332333
border-width: thin;
333334
padding-top: 5px;

‎script-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
? '1px solid ' + activeStyle.backgroundColor
77
: '1px solid var(--vscode-editorWidget-border)',
88
backgroundColor: isActive
9-
? 'black'
9+
? 'var(--vscode-activityErrorBadge-foreground)'
1010
: 'var(--vscode-editor-background)'
1111
}"
1212
>

‎script-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.scss‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// display: flex;
33
flex-direction: column;
44
width: 100%;
5-
height: 100%;
5+
// height: 100%;
66
// height: 400px;
77
background-color: var(--vscode-editor-background);
88
// height: 300px;
@@ -14,30 +14,30 @@
1414
margin-bottom: 10px;
1515
padding-bottom: 7px;
1616
background-color: var(--vscode-editor-background);
17-
border: 1px solid #F6F07D;
17+
border: 1px solid #f6f07d;
1818
width: 100%;
1919
height: 100%;
2020
// border-right: 1px solid #F6F07D;
2121
// border-bottom: 1px solid #F6F07D;
2222
}
2323

24-
// @media (max-width: 120vh) {
25-
// .plot-item {
26-
// // border-left: 1px solid #F6F07D;
27-
// border-radius: 11px;
28-
// margin-bottom: 10px;
29-
// padding-bottom: 7px;
30-
// background-color: var(--vscode-editor-background);
31-
// border: 1px solid #F6F07D;
32-
// // border-right: 1px solid #F6F07D;
33-
// // border-bottom: 1px solid #F6F07D;
34-
// }
35-
// }
24+
// @media (max-width: 120vh) {
25+
// .plot-item {
26+
// // border-left: 1px solid #F6F07D;
27+
// border-radius: 11px;
28+
// margin-bottom: 10px;
29+
// padding-bottom: 7px;
30+
// background-color: var(--vscode-editor-background);
31+
// border: 1px solid #F6F07D;
32+
// // border-right: 1px solid #F6F07D;
33+
// // border-bottom: 1px solid #F6F07D;
34+
// }
35+
// }
3636

3737
.plot-info {
3838
// margin-bottom: 10px;
3939
font-size: 14px;
40-
color:black;
40+
color: var(--vscode-activityBar-foreground);
4141
display: flex;
4242
background-color: transparent;
4343
// background-color: #F6F07D;

‎script-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.ts‎

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ export class PlotBiasComponent
4949
private mutationObserver: MutationObserver | undefined;
5050
private originalBackgroundColor = '';
5151
activeBackgroundColor = '';
52+
private tickColor = '';
5253
windowHeight = window.innerHeight;
5354
windowWidth = window.innerWidth;
5455

@@ -60,7 +61,7 @@ export class PlotBiasComponent
6061
separatethousands: false,
6162
tickfont: {
6263
family: 'Roboto, "Helvetica Neue", sans-serif',
63-
color: 'white',
64+
color: this.tickColor,
6465
size: 9,
6566
},
6667
dtick: 1,
@@ -104,7 +105,7 @@ export class PlotBiasComponent
104105
range: [0, 2],
105106
tickfont: {
106107
family: 'Roboto, "Helvetica Neue", sans-serif',
107-
color: 'white',
108+
color: this.tickColor,
108109
size: 9,
109110
},
110111
dtick: 0.5,
@@ -124,7 +125,7 @@ export class PlotBiasComponent
124125
yaxis2: {
125126
tickfont: {
126127
family: 'Roboto, "Helvetica Neue", sans-serif',
127-
color: 'white',
128+
color: this.tickColor,
128129
size: 9,
129130
},
130131
anchor: 'x',
@@ -324,8 +325,21 @@ export class PlotBiasComponent
324325
? this.rgbToHex(activeBg)
325326
: activeBg;
326327

328+
const tickColorRaw = this.getCssVariableValue(
329+
'--vscode-editor-foreground'
330+
);
331+
this.tickColor = tickColorRaw.startsWith('rgb')
332+
? this.rgbToHex(tickColorRaw)
333+
: tickColorRaw;
334+
335+
// Update tick colors in plot layout
336+
this.plotLayout.xaxis.tickfont.color = this.tickColor;
337+
this.plotLayout.yaxis.tickfont.color = this.tickColor;
338+
this.plotLayout.yaxis2.tickfont.color = this.tickColor;
339+
327340
console.log('Initial background color:', backgroundColorHex);
328341
console.log('Initial active background color:', this.activeBackgroundColor);
342+
console.log('Initial tick color:', this.tickColor);
329343
}
330344

331345
private renderPlot(): void {
@@ -368,11 +382,25 @@ export class PlotBiasComponent
368382
? this.rgbToHex(activeBg)
369383
: activeBg;
370384

371-
console.log('Theme changed, new background color:', backgroundColorHex);
372-
console.log(
373-
'Theme changed, new active background color:',
374-
this.activeBackgroundColor
385+
// Update tick color on theme change
386+
const tickColorRaw = this.getCssVariableValue(
387+
'--vscode-activityBarBadge-foreground'
375388
);
389+
this.tickColor = tickColorRaw.startsWith('rgb')
390+
? this.rgbToHex(tickColorRaw)
391+
: tickColorRaw;
392+
393+
// Update tick colors in plot layout
394+
this.plotLayout.xaxis.tickfont.color = this.tickColor;
395+
this.plotLayout.yaxis.tickfont.color = this.tickColor;
396+
this.plotLayout.yaxis2.tickfont.color = this.tickColor;
397+
398+
// console.log('Theme changed, new background color:', backgroundColorHex);
399+
// console.log(
400+
// 'Theme changed, new active background color:',
401+
// this.activeBackgroundColor
402+
// );
403+
// console.log('Theme changed, new tick color:', this.tickColor);
376404

377405
this.renderPlot();
378406
});

‎script-gen-ui/src/app/components/main-sweep/plot-container/plot-container.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
.plot-info {
2020
margin-bottom: 10px;
2121
font-size: 14px;
22-
color: var(--vscode-editor-foreground);
22+
color: var(--vscode-activityBar-foreground);
2323
}
2424

2525
.plot-info p {

‎script-gen-ui/src/app/components/main-sweep/plot-container/plot-container.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -215,13 +215,13 @@ export class PlotContainerComponent implements OnInit, AfterViewInit, OnDestroy
215215
const isActive =
216216
this.activeComponent === componentType && this.activeIndex === index;
217217
const backgroundColor =
218-
this.colorMap.get(uuid) || 'var(--vscode-activityBar-border)';
218+
this.colorMap.get(uuid) || 'var(--vscode-activityBar-foreground)';
219219

220220
return {
221221
backgroundColor: isActive
222222
? backgroundColor
223223
: 'var(--vscode-activityBar-border)',
224-
color: isActive ? 'black' : 'white',
224+
color: isActive ? 'black' : 'var(--vscode-badge-foreground)',
225225
};
226226
}
227227

‎script-gen-ui/src/app/components/main-sweep/plot-container/plot-step/plot-step.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
? '1px solid ' + activeStyle.backgroundColor
77
: '1px solid var(--vscode-editorWidget-border)',
88
backgroundColor: isActive
9-
? 'black'
9+
? 'var(--vscode-activityErrorBadge-foreground)'
1010
: 'var(--vscode-editor-background)'
1111
}"
1212
>

0 commit comments

Comments
 (0)