Skip to content

Commit becc686

Browse files
sajal-nsajal-n
committed
updated options modal look and feel
1 parent 6bb5f03 commit becc686

File tree

2 files changed

+205
-165
lines changed

2 files changed

+205
-165
lines changed

‎src/options/options.html‎

Lines changed: 63 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -300,12 +300,63 @@ <h3 id="formTitle" style="margin-right:32px;">Add Rule</h3>
300300
</div>
301301
</div>
302302

303-
<!-- Cluster Schema Loader: Separate OpenAPI and CRD sections -->
304-
<div style="margin-top:30px;">
305-
<!-- OpenAPI Schema Section -->
306-
<div id="openAPISection" style="background:#fff;padding:12px;border:1px solid #e6e6e6;border-radius:6px;margin-bottom:12px;">
307-
<h3 style="margin-top:0">🔷 Kubernetes API (OpenAPI)</h3>
308-
<p style="margin:0 0 12px 0;font-size:13px;color:#666;">Load OpenAPI specifications (supports multiple schemas).</p>
303+
<div style="margin-top:30px;display:flex;gap:12px;">
304+
<button id="openAPIImport" title="Import Kubernetes API" aria-label="Import Kubernetes API">🔷 Import Kubernetes API</button>
305+
<button id="crdImport" title="Import CRD" aria-label="Import CRD">🟩 Import CRD</button>
306+
</div>
307+
308+
<!-- OpenAPI Details Display as Table (Main Window) -->
309+
<div id="openAPIDisplay" style="display:none;margin-top:24px;padding:10px;background:#f0f8ff;border-left:3px solid #0ea5e9;border-radius:4px;">
310+
<div style="font-weight:600;margin-bottom:8px;color:#1a1a1a;">✓ OpenAPI Schemas Loaded (<span id="openAPICount">0</span>)</div>
311+
<div id="openAPITableWrapper" style="overflow-x:auto;margin-top:8px;">
312+
<table id="openAPITable" style="width:100%;border-collapse:collapse;font-size:12px;">
313+
<thead>
314+
<tr style="background:#f0f8ff;border-bottom:1px solid #bfdbfe;">
315+
<th style="padding:6px;text-align:left;border-right:1px solid #bfdbfe;">Title</th>
316+
<th style="padding:6px;text-align:left;border-right:1px solid #bfdbfe;">Cluster</th>
317+
<th style="padding:6px;text-align:left;border-right:1px solid #bfdbfe;">Version</th>
318+
<th style="padding:6px;text-align:left;border-right:1px solid #bfdbfe;">API Version</th>
319+
<th style="padding:6px;text-align:left;border-right:1px solid #bfdbfe;">OpenAPI</th>
320+
<th style="padding:6px;text-align:left;border-right:1px solid #bfdbfe;">Paths</th>
321+
<th style="padding:6px;text-align:left;border-right:1px solid #bfdbfe;">Components</th>
322+
<th style="padding:6px;text-align:left;border-right:1px solid #bfdbfe;">Source</th>
323+
<th style="padding:6px;text-align:left;">Loaded At</th>
324+
</tr>
325+
</thead>
326+
<tbody id="openAPITableBody">
327+
<!-- Rows populated by options.js -->
328+
</tbody>
329+
</table>
330+
</div>
331+
</div>
332+
333+
<!-- CRD Details Display as Table (Main Window) -->
334+
<div id="crdDisplay" style="display:none;margin-top:24px;padding:10px;background:#f0fff0;border-left:3px solid #22c55e;border-radius:4px;">
335+
<div style="font-weight:600;margin-bottom:8px;color:#1a1a1a;">✓ CRDs Loaded (<span id="crdCount">0</span>)</div>
336+
<div id="crdTableWrapper" style="overflow-x:auto;margin-top:8px;">
337+
<table id="crdTable" style="width:100%;border-collapse:collapse;font-size:12px;">
338+
<thead>
339+
<tr style="background:#f0fff0;border-bottom:1px solid #dcfce7;">
340+
<th style="padding:6px;text-align:left;border-right:1px solid #dcfce7;">Name</th>
341+
<th style="padding:6px;text-align:left;border-right:1px solid #dcfce7;">Group</th>
342+
<th style="padding:6px;text-align:left;border-right:1px solid #dcfce7;">Scope</th>
343+
<th style="padding:6px;text-align:left;border-right:1px solid #dcfce7;">Plural</th>
344+
<th style="padding:6px;text-align:left;">Singular</th>
345+
</tr>
346+
</thead>
347+
<tbody id="crdTableBody">
348+
<!-- Rows populated by options.js -->
349+
</tbody>
350+
</table>
351+
</div>
352+
</div>
353+
</div>
354+
355+
<!-- OpenAPI Import Panel Modal Popup -->
356+
<div id="openAPIPanelModal" class="modal-overlay">
357+
<div class="delete-modal" style="max-width:600px;text-align:left;max-height:90vh;overflow-y:auto;position:relative;">
358+
<button id="closeOpenAPIModal" title="Close" aria-label="Close" style="position:absolute;top:12px;right:12px;background:none;border:none;font-size:22px;color:#888;cursor:pointer;">&times;</button>
359+
<h3 style="margin-top:0">Import Kubernetes API (OpenAPI)</h3>
309360
<div style="margin-bottom:8px;">
310361
<input id="openAPIFile" type="file" accept="application/json,application/yaml,.json,.yml,.yaml" />
311362
</div>
@@ -323,37 +374,14 @@ <h3 style="margin-top:0">🔷 Kubernetes API (OpenAPI)</h3>
323374
<button id="openAPIClear">Clear</button>
324375
</div>
325376
<div id="openAPIStatus" style="margin-top:10px;color:#444;font-size:13px;"></div>
326-
327-
<!-- OpenAPI Details Display as Table -->
328-
<div id="openAPIDisplay" style="display:none;margin-top:12px;padding:10px;background:#f0f8ff;border-left:3px solid #0ea5e9;border-radius:4px;">
329-
<div style="font-weight:600;margin-bottom:8px;color:#1a1a1a;">✓ OpenAPI Schemas Loaded (<span id="openAPICount">0</span>)</div>
330-
<div id="openAPITableWrapper" style="overflow-x:auto;margin-top:8px;">
331-
<table id="openAPITable" style="width:100%;border-collapse:collapse;font-size:12px;">
332-
<thead>
333-
<tr style="background:#f0f8ff;border-bottom:1px solid #bfdbfe;">
334-
<th style="padding:6px;text-align:left;border-right:1px solid #bfdbfe;">Title</th>
335-
<th style="padding:6px;text-align:left;border-right:1px solid #bfdbfe;">Cluster</th>
336-
<th style="padding:6px;text-align:left;border-right:1px solid #bfdbfe;">Version</th>
337-
<th style="padding:6px;text-align:left;border-right:1px solid #bfdbfe;">API Version</th>
338-
<th style="padding:6px;text-align:left;border-right:1px solid #bfdbfe;">OpenAPI</th>
339-
<th style="padding:6px;text-align:left;border-right:1px solid #bfdbfe;">Paths</th>
340-
<th style="padding:6px;text-align:left;border-right:1px solid #bfdbfe;">Components</th>
341-
<th style="padding:6px;text-align:left;border-right:1px solid #bfdbfe;">Source</th>
342-
<th style="padding:6px;text-align:left;">Loaded At</th>
343-
</tr>
344-
</thead>
345-
<tbody id="openAPITableBody">
346-
<!-- Rows populated by options.js -->
347-
</tbody>
348-
</table>
349-
</div>
350-
</div>
351377
</div>
378+
</div>
352379

353-
<!-- CRD Schema Section -->
354-
<div id="crdSection" style="background:#fff;padding:12px;border:1px solid #e6e6e6;border-radius:6px;">
355-
<h3 style="margin-top:0">🟩 Custom Resources (CRDs)</h3>
356-
<p style="margin:0 0 12px 0;font-size:13px;color:#666;">Load Custom Resource Definitions from your cluster.</p>
380+
<!-- CRD Import Panel Modal Popup -->
381+
<div id="crdPanelModal" class="modal-overlay">
382+
<div class="delete-modal" style="max-width:600px;text-align:left;max-height:90vh;overflow-y:auto;position:relative;">
383+
<button id="closeCRDModal" title="Close" aria-label="Close" style="position:absolute;top:12px;right:12px;background:none;border:none;font-size:22px;color:#888;cursor:pointer;">&times;</button>
384+
<h3 style="margin-top:0">Import Custom Resources (CRDs)</h3>
357385
<div style="margin-bottom:8px;">
358386
<input id="crdFile" type="file" accept="application/json,application/yaml,.json,.yml,.yaml" />
359387
</div>
@@ -365,27 +393,6 @@ <h3 style="margin-top:0">🟩 Custom Resources (CRDs)</h3>
365393
<button id="crdClear">Clear</button>
366394
</div>
367395
<div id="crdStatus" style="margin-top:10px;color:#444;font-size:13px;"></div>
368-
369-
<!-- CRD Details Display -->
370-
<div id="crdDisplay" style="display:none;margin-top:12px;padding:10px;background:#f0fff0;border-left:3px solid #22c55e;border-radius:4px;">
371-
<div style="font-weight:600;margin-bottom:8px;color:#1a1a1a;">✓ CRDs Loaded (<span id="crdCount">0</span>)</div>
372-
<div id="crdTableWrapper" style="overflow-x:auto;margin-top:8px;">
373-
<table id="crdTable" style="width:100%;border-collapse:collapse;font-size:12px;">
374-
<thead>
375-
<tr style="background:#f0fff0;border-bottom:1px solid #dcfce7;">
376-
<th style="padding:6px;text-align:left;border-right:1px solid #dcfce7;">Name</th>
377-
<th style="padding:6px;text-align:left;border-right:1px solid #dcfce7;">Group</th>
378-
<th style="padding:6px;text-align:left;border-right:1px solid #dcfce7;">Scope</th>
379-
<th style="padding:6px;text-align:left;border-right:1px solid #dcfce7;">Plural</th>
380-
<th style="padding:6px;text-align:left;">Singular</th>
381-
</tr>
382-
</thead>
383-
<tbody id="crdTableBody">
384-
<!-- Rows populated by options.js -->
385-
</tbody>
386-
</table>
387-
</div>
388-
</div>
389396
</div>
390397
</div>
391398

0 commit comments

Comments
 (0)