135 lines
3.9 KiB
HTML
135 lines
3.9 KiB
HTML
<div class="t3-page-ce-preview">
|
|
<div class="t3-page-ce-header">
|
|
<strong>🎯 Usecase Show Plugin</strong>
|
|
<f:if condition="{layout}">
|
|
<span class="badge badge-info">Layout: {layout}</span>
|
|
</f:if>
|
|
</div>
|
|
|
|
<div class="t3-page-ce-body">
|
|
<f:if condition="{usecase}">
|
|
<f:then>
|
|
<!-- Show selected usecase data -->
|
|
<div class="preview-content">
|
|
<div class="preview-item">
|
|
<strong>Selected Usecase:</strong>
|
|
<div class="preview-usecase">
|
|
<h4>{usecase.title}</h4>
|
|
<f:if condition="{usecase.subtitle}">
|
|
<p class="text-muted"><em>{usecase.subtitle}</em></p>
|
|
</f:if>
|
|
<f:if condition="{usecase.description}">
|
|
<p class="preview-description">
|
|
<f:format.crop maxCharacters="150">{usecase.description}</f:format.crop>
|
|
</p>
|
|
</f:if>
|
|
<small class="text-muted">UID: {usecase.uid}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</f:then>
|
|
<f:else>
|
|
<!-- No usecase selected -->
|
|
<div class="preview-warning">
|
|
<span class="text-warning">⚠️ No usecase selected</span>
|
|
<p class="text-muted">Please configure the plugin to select a usecase.</p>
|
|
</div>
|
|
</f:else>
|
|
</f:if>
|
|
|
|
<!-- Show plugin settings -->
|
|
<f:if condition="{flexFormData.settings}">
|
|
<div class="preview-settings">
|
|
<details>
|
|
<summary><strong>Plugin Settings</strong></summary>
|
|
<table class="table table-sm">
|
|
<f:for each="{flexFormData.settings}" as="value" key="key">
|
|
<f:if condition="{value}">
|
|
<tr>
|
|
<td><strong>{key}</strong></td>
|
|
<td>{value}</td>
|
|
</tr>
|
|
</f:if>
|
|
</f:for>
|
|
</table>
|
|
</details>
|
|
</div>
|
|
</f:if>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.t3-page-ce-preview {
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
margin: 5px 0;
|
|
background: #f9f9f9;
|
|
}
|
|
|
|
.t3-page-ce-header {
|
|
margin-bottom: 10px;
|
|
padding-bottom: 5px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 2px 6px;
|
|
font-size: 10px;
|
|
background: #007cba;
|
|
color: white;
|
|
border-radius: 3px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.preview-usecase {
|
|
background: white;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
border-left: 4px solid #007cba;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.preview-usecase h4 {
|
|
margin: 0 0 5px 0;
|
|
color: #333;
|
|
}
|
|
|
|
.preview-description {
|
|
color: #666;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.preview-warning {
|
|
background: #fff3cd;
|
|
border: 1px solid #ffeaa7;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
color: #856404;
|
|
}
|
|
|
|
.text-muted {
|
|
color: #6c757d;
|
|
}
|
|
|
|
.text-warning {
|
|
color: #856404;
|
|
}
|
|
|
|
.preview-settings {
|
|
margin-top: 10px;
|
|
padding-top: 10px;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
.preview-settings table {
|
|
width: 100%;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.preview-settings td {
|
|
padding: 2px 5px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
</style> |