feat(central-ui): enlarge script modal; tab the Shared Script form
Script editor modal (TemplateEdit): the tabbed Trigger/Code/Parameters/ Return content is substantial, so the dialog now fills most of the viewport — a .script-editor-modal class (96vw wide, ~full height) replaces modal-xl, paired with modal-dialog-scrollable so the body scrolls. Shared Script create/edit form (SharedScriptForm): Code, Parameters, and Return type move from stacked sections into a tab strip, matching the template script modal. Panels toggle via display:none so the Monaco editor and JSONJoy island stay mounted across tab switches; Code is the default tab. Name stays above the tabs. Markup/CSS only — no logic change. CentralUI suite 316 green; both verified in the browser.
This commit is contained in:
@@ -26,32 +26,59 @@
|
|||||||
{
|
{
|
||||||
<div class="card mb-3">
|
<div class="card mb-3">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="mb-2">
|
<div class="mb-3">
|
||||||
<label class="form-label small">Name</label>
|
<label class="form-label small">Name</label>
|
||||||
<input type="text" class="form-control form-control-sm" @bind="_formName"
|
<input type="text" class="form-control form-control-sm" @bind="_formName"
|
||||||
disabled="@(Id.HasValue)" />
|
disabled="@(Id.HasValue)" />
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
|
||||||
<label class="form-label small">Parameters</label>
|
@* Tabs: Code, Parameters, Return. Panels stay mounted (toggled
|
||||||
<SchemaBuilder Mode="object"
|
via display:none) so the Monaco editor and the JSONJoy React
|
||||||
Value="@_formParameters"
|
island don't tear down on tab switch. *@
|
||||||
ValueChanged="@(v => _formParameters = v)" />
|
<ul class="nav nav-tabs" role="tablist">
|
||||||
</div>
|
<li class="nav-item" role="presentation">
|
||||||
<div class="mb-3">
|
<button type="button"
|
||||||
<label class="form-label small">Return value</label>
|
class="nav-link @(_formTab == "code" ? "active" : "")"
|
||||||
<SchemaBuilder Mode="value"
|
role="tab"
|
||||||
Value="@_formReturn"
|
aria-selected="@(_formTab == "code" ? "true" : "false")"
|
||||||
ValueChanged="@(v => _formReturn = v)" />
|
@onclick='() => _formTab = "code"'>Code</button>
|
||||||
</div>
|
</li>
|
||||||
<div class="mb-2">
|
<li class="nav-item" role="presentation">
|
||||||
<label class="form-label small">Code</label>
|
<button type="button"
|
||||||
<MonacoEditor @ref="_editor" Value="@_formCode" ValueChanged="@(v => _formCode = v)"
|
class="nav-link @(_formTab == "parameters" ? "active" : "")"
|
||||||
Language="csharp" Height="320px"
|
role="tab"
|
||||||
DeclaredParameters="@ScriptParameterNames.Parse(_formParameters)"
|
aria-selected="@(_formTab == "parameters" ? "true" : "false")"
|
||||||
DeclaredParameterShapes="@ScriptParameterNames.ParseShapes(_formParameters)"
|
@onclick='() => _formTab = "parameters"'>Parameters</button>
|
||||||
MarkersChanged="@(m => { _markers = m; StateHasChanged(); })" />
|
</li>
|
||||||
<ProblemsPanel Markers="@_markers" OnNavigate="@(m => _editor?.RevealLineAsync(m.StartLineNumber, m.StartColumn) ?? Task.CompletedTask)" />
|
<li class="nav-item" role="presentation">
|
||||||
|
<button type="button"
|
||||||
|
class="nav-link @(_formTab == "return" ? "active" : "")"
|
||||||
|
role="tab"
|
||||||
|
aria-selected="@(_formTab == "return" ? "true" : "false")"
|
||||||
|
@onclick='() => _formTab = "return"'>Return type</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="border border-top-0 rounded-bottom p-3">
|
||||||
|
<div style="display: @(_formTab == "code" ? "block" : "none")">
|
||||||
|
<MonacoEditor @ref="_editor" Value="@_formCode" ValueChanged="@(v => _formCode = v)"
|
||||||
|
Language="csharp" Height="320px"
|
||||||
|
DeclaredParameters="@ScriptParameterNames.Parse(_formParameters)"
|
||||||
|
DeclaredParameterShapes="@ScriptParameterNames.ParseShapes(_formParameters)"
|
||||||
|
MarkersChanged="@(m => { _markers = m; StateHasChanged(); })" />
|
||||||
|
<ProblemsPanel Markers="@_markers" OnNavigate="@(m => _editor?.RevealLineAsync(m.StartLineNumber, m.StartColumn) ?? Task.CompletedTask)" />
|
||||||
|
</div>
|
||||||
|
<div style="display: @(_formTab == "parameters" ? "block" : "none")">
|
||||||
|
<SchemaBuilder Mode="object"
|
||||||
|
Value="@_formParameters"
|
||||||
|
ValueChanged="@(v => _formParameters = v)" />
|
||||||
|
</div>
|
||||||
|
<div style="display: @(_formTab == "return" ? "block" : "none")">
|
||||||
|
<SchemaBuilder Mode="value"
|
||||||
|
Value="@_formReturn"
|
||||||
|
ValueChanged="@(v => _formReturn = v)" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if (_formError != null)
|
@if (_formError != null)
|
||||||
{
|
{
|
||||||
<div class="text-danger small mt-2">@_formError</div>
|
<div class="text-danger small mt-2">@_formError</div>
|
||||||
@@ -156,6 +183,7 @@
|
|||||||
[Parameter] public int? Id { get; set; }
|
[Parameter] public int? Id { get; set; }
|
||||||
|
|
||||||
private bool _loading;
|
private bool _loading;
|
||||||
|
private string _formTab = "code"; // "code" | "parameters" | "return"
|
||||||
private string _formName = string.Empty;
|
private string _formName = string.Empty;
|
||||||
private string _formCode = string.Empty;
|
private string _formCode = string.Empty;
|
||||||
private string? _formParameters;
|
private string? _formParameters;
|
||||||
|
|||||||
@@ -863,7 +863,7 @@
|
|||||||
{
|
{
|
||||||
var editingScript = _editScriptId.HasValue;
|
var editingScript = _editScriptId.HasValue;
|
||||||
<div class="modal show d-block" tabindex="-1" style="background: rgba(0,0,0,0.4);">
|
<div class="modal show d-block" tabindex="-1" style="background: rgba(0,0,0,0.4);">
|
||||||
<div class="modal-dialog modal-xl modal-dialog-scrollable">
|
<div class="modal-dialog modal-dialog-scrollable script-editor-modal">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h6 class="modal-title">@(editingScript ? "Edit Script" : "Add Script")</h6>
|
<h6 class="modal-title">@(editingScript ? "Edit Script" : "Add Script")</h6>
|
||||||
|
|||||||
@@ -86,3 +86,16 @@
|
|||||||
background: var(--bs-white);
|
background: var(--bs-white);
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Script editor modal — the tabbed Trigger/Code/Parameters/Return content is
|
||||||
|
substantial, so the dialog fills most of the viewport. Pairs with
|
||||||
|
.modal-dialog-scrollable so the body scrolls within the fixed height. */
|
||||||
|
.modal-dialog.script-editor-modal {
|
||||||
|
max-width: 96vw;
|
||||||
|
width: 96vw;
|
||||||
|
height: calc(100vh - 2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-dialog.script-editor-modal .modal-content {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user