Skip to content

Commit 21d879f

Browse files
jurrajurra
committed
Improve property panel text and styling
- Fix Junction component to show correct Inductance field instead of Critical Current/Capacitance - Update all component titles to use consistent 'Specify label and/or [property]' format - Add equation display for Junction/Inductor: L = (hbar/2e)**2/[Josephson Energy in Joules] - Remove colored accent boxes and use clean text-only styling - Hide empty description/help text sections to avoid blank elements
1 parent 4286630 commit 21d879f

File tree

1 file changed

+52
-47
lines changed

1 file changed

+52
-47
lines changed

‎src/gui/property_panel/PropertyPanel.js‎

Lines changed: 52 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -108,69 +108,75 @@ export class PropertyPanel {
108108
const elementConfigs = {
109109
// Use both constructor names and type property names
110110
Junction: {
111-
title: 'Junction Properties',
112-
description: 'Configure Josephson junction parameters',
113-
helpText: 'Note: Josephson junctions act as nonlinear inductors in superconducting circuits.',
111+
title: 'Specify label and/or Josephson inductance (in units of Henry)',
112+
description: 'Note that L = (hbar/2e)**2/[Josephson Energy in Joules]',
113+
helpText: '',
114114
fields: [
115-
{ key: 'critical_current', label: 'Critical Current', unit: 'A', placeholder: 'Enter critical current' },
116-
{ key: 'capacitance', label: 'Capacitance', unit: 'F', placeholder: 'Enter capacitance' },
115+
{ key: 'inductance', label: 'Inductance', unit: '', placeholder: '' },
116+
{ key: 'label', label: 'Label', unit: '', placeholder: '' }
117117
]
118118
},
119119
junction: { // lowercase version
120-
title: 'Junction Properties',
121-
description: 'Configure Josephson junction parameters',
122-
helpText: 'Note: Josephson junctions act as nonlinear inductors in superconducting circuits.',
120+
title: 'Specify label and/or Josephson inductance (in units of Henry)',
121+
description: 'Note that L = (hbar/2e)**2/[Josephson Energy in Joules]',
122+
helpText: '',
123123
fields: [
124-
{ key: 'critical_current', label: 'Critical Current', unit: 'A', placeholder: 'Enter critical current' },
125-
{ key: 'capacitance', label: 'Capacitance', unit: 'F', placeholder: 'Enter capacitance' },
124+
{ key: 'inductance', label: 'Inductance', unit: '', placeholder: '' },
125+
{ key: 'label', label: 'Label', unit: '', placeholder: '' }
126126
]
127127
},
128128
Resistor: {
129-
title: 'Resistor Properties',
130-
description: 'Configure resistance value',
131-
helpText: 'Specify resistance in Ohms (Ω)',
129+
title: 'Specify label and/or resistance (in units of Ohm)',
130+
description: '',
131+
helpText: '',
132132
fields: [
133-
{ key: 'resistance', label: 'Resistance', unit: 'Ω', placeholder: 'Enter resistance value' }
133+
{ key: 'resistance', label: 'Resistance', unit: '', placeholder: '' },
134+
{ key: 'label', label: 'Label', unit: '', placeholder: '' }
134135
]
135136
},
136137
resistor: { // lowercase version
137-
title: 'Resistor Properties',
138-
description: 'Configure resistance value',
139-
helpText: 'Specify resistance in Ohms (Ω)',
138+
title: 'Specify label and/or resistance (in units of Ohm)',
139+
description: '',
140+
helpText: '',
140141
fields: [
141-
{ key: 'resistance', label: 'Resistance', unit: 'Ω', placeholder: 'Enter resistance value' }
142+
{ key: 'resistance', label: 'Resistance', unit: '', placeholder: '' },
143+
{ key: 'label', label: 'Label', unit: '', placeholder: '' }
142144
]
143145
},
144146
Capacitor: {
145-
title: 'Capacitor Properties',
146-
description: 'Configure capacitance value',
147-
helpText: 'Specify capacitance in Farads (F)',
147+
title: 'Specify label and/or capacitance (in units of Farad)',
148+
description: '',
149+
helpText: '',
148150
fields: [
149-
{ key: 'capacitance', label: 'Capacitance', unit: 'F', placeholder: 'Enter capacitance value' }
151+
{ key: 'capacitance', label: 'Capacitance', unit: '', placeholder: '' },
152+
{ key: 'label', label: 'Label', unit: '', placeholder: '' }
150153
]
151154
},
152155
capacitor: { // lowercase version
153-
title: 'Capacitor Properties',
154-
description: 'Configure capacitance value',
155-
helpText: 'Specify capacitance in Farads (F)',
156+
title: 'Specify label and/or capacitance (in units of Farad)',
157+
description: '',
158+
helpText: '',
156159
fields: [
157-
{ key: 'capacitance', label: 'Capacitance', unit: 'F', placeholder: 'Enter capacitance value' }
160+
{ key: 'capacitance', label: 'Capacitance', unit: '', placeholder: '' },
161+
{ key: 'label', label: 'Label', unit: '', placeholder: '' }
158162
]
159163
},
160164
Inductor: {
161-
title: 'Inductor Properties',
162-
description: 'Configure inductance value',
163-
helpText: 'Specify inductance in Henry (H)',
165+
title: 'Specify label and/or inductance (in units of Henry)',
166+
description: 'Note that L = (hbar/2e)**2/[Josephson Energy in Joules]',
167+
helpText: '',
164168
fields: [
165-
{ key: 'inductance', label: 'Inductance', unit: 'H', placeholder: 'Enter inductance value' }
169+
{ key: 'inductance', label: 'Inductance', unit: '', placeholder: '' },
170+
{ key: 'label', label: 'Label', unit: '', placeholder: '' }
166171
]
167172
},
168173
inductor: { // lowercase version
169-
title: 'Inductor Properties',
170-
description: 'Configure inductance value',
171-
helpText: 'Specify inductance in Henry (H)',
174+
title: 'Specify label and/or inductance (in units of Henry)',
175+
description: 'Note that L = (hbar/2e)**2/[Josephson Energy in Joules]',
176+
helpText: '',
172177
fields: [
173-
{ key: 'inductance', label: 'Inductance', unit: 'H', placeholder: 'Enter inductance value' }
178+
{ key: 'inductance', label: 'Inductance', unit: '', placeholder: '' },
179+
{ key: 'label', label: 'Label', unit: '', placeholder: '' }
174180
]
175181
},
176182
Wire: {
@@ -226,21 +232,15 @@ export class PropertyPanel {
226232

227233
return `
228234
<div class="property-panel-header">
229-
<h3>${elementType.toUpperCase()}</h3>
235+
<h3>Circuit Editor</h3>
230236
</div>
231237
<div class="property-panel-content">
232238
<div class="property-panel-title">
233239
<em>${config.title}</em>
234-
<div class="help-text">${config.helpText}</div>
240+
${config.description && config.description.trim() ? `<div class="property-description">${config.description}</div>` : ''}
241+
${config.helpText && config.helpText.trim() ? `<div class="help-text">${config.helpText}</div>` : ''}
235242
</div>
236243
${propertyFields}
237-
<div class="property-field">
238-
<label for="label">Label</label>
239-
<input type="text" id="label" name="label"
240-
value="${currentLabel}"
241-
placeholder="Enter element label">
242-
<small class="field-help">Optional identifier for this element</small>
243-
</div>
244244
</div>
245245
<div class="property-panel-actions">
246246
<button type="button" class="cancel-btn">Cancel</button>
@@ -567,12 +567,17 @@ export class PropertyPanel {
567567
line-height: 1.4;
568568
}
569569
570+
.property-description {
571+
margin-top: 8px;
572+
margin-bottom: 8px;
573+
font-size: 13px;
574+
color: #333;
575+
font-style: normal;
576+
font-family: 'Courier New', monospace;
577+
}
578+
570579
.help-text {
571580
margin-top: 8px;
572-
padding: 8px 12px;
573-
background: #f8f9fa;
574-
border-left: 3px solid #007bff;
575-
border-radius: 0 4px 4px 0;
576581
font-size: 13px;
577582
color: #6c757d;
578583
font-style: normal;

0 commit comments

Comments
 (0)