Visual indicator of enabled/disabled operations in the Schema page

This commit is contained in:
Francesco 2023-10-06 14:31:55 +02:00
parent 99792fa7a8
commit 7b2eb02cd4
2 changed files with 36 additions and 5 deletions

View File

@ -39,6 +39,17 @@ form.delete-form button.disable .bi {
color: #9298A0 !important; color: #9298A0 !important;
} }
.badge.bg-enabled {
background-color: green;
color: white;
}
.badge.bg-disabled {
background-color: #999;
color: white;
}
.null-label { .null-label {
background-color: #EEE; background-color: #EEE;
border-radius: 5px; border-radius: 5px;
@ -162,7 +173,7 @@ td.table-checkbox, th.table-checkbox {
.noselect { .noselect {
cursor: pointer; -webkit-user-select: none; -webkit-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
@ -215,6 +226,10 @@ ul.categorical-select button {
width: 50%; width: 50%;
} }
.operations-badges {
font-size: 1.2rem;
}
/** /**
* Images * Images

View File

@ -33,16 +33,32 @@
</div> </div>
<div class="box with-navigation"> <div class="box with-navigation">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<h3 class="fw-bold mb-4 align-baseline"> <h3 class="fw-bold align-baseline">
<span title="Java class name"> [[ ${schema.getJavaClass().getSimpleName()} ]] </span> <span title="Java class name"> [[ ${schema.getJavaClass().getSimpleName()} ]] </span>
<span title="Database table name" class="ms-3 label label-primary label-gray font-monospace"> <span title="Database table name" class="ms-3 label label-primary label-gray font-monospace">
[[ ${schema.getTableName()} ]] [[ ${schema.getTableName()} ]]
</span> </span>
</h3> </h3>
<h3><a title="Create new item" <h3><a title="Create new item"
th:href="|/${baseUrl}/model/${schema.getClassName()}/create|"><i class="bi bi-plus-square"></i></a></h3> th:href="|/${baseUrl}/model/${schema.getClassName()}/create|"><i class="bi bi-plus-square"></i></a></h3>
</div> </div>
<div class="mb-4 operations-badges">
<span class="align-middle noselect badge"
th:classAppend="|${schema.isCreateEnabled() ? 'bg-enabled' : 'bg-disabled'}|">
<i class="bi"
th:classAppend="|${schema.isCreateEnabled() ? 'bi-check-circle-fill' : 'bi-x-circle-fill'}|"></i> Create
</span>
<span class="align-middle noselect badge"
th:classAppend="|${schema.isEditEnabled() ? 'bg-enabled' : 'bg-disabled'}|">
<i class="bi"
th:classAppend="|${schema.isEditEnabled() ? 'bi-check-circle-fill' : 'bi-x-circle-fill'}|"></i> Edit
</span>
<span class="align-middle noselect badge"
th:classAppend="|${schema.isDeleteEnabled() ? 'bg-enabled' : 'bg-disabled'}|">
<i class="bi"
th:classAppend="|${schema.isDeleteEnabled() ? 'bi-check-circle-fill' : 'bi-x-circle-fill'}|"></i> Delete
</span>
</div>
<table class="table table-striped align-middle"> <table class="table table-striped align-middle">
<tr class="table-data-row"> <tr class="table-data-row">
<th style="width: 32px"></th> <th style="width: 32px"></th>
@ -67,7 +83,7 @@
<td th:text="${field.isNullable()}"></td> <td th:text="${field.isNullable()}"></td>
</tr> </tr>
</table> </table>
<div class="separator mb-2 mt-2"></div> <div th:if="${!schema.getErrors().isEmpty()}" class="separator mb-2 mt-2"></div>
<h3 th:if="${!schema.getErrors().isEmpty()}" <h3 th:if="${!schema.getErrors().isEmpty()}"
class="fw-bold mt-3 mb-3"><i class="bi bi-exclamation-triangle"></i> Errors</h3> class="fw-bold mt-3 mb-3"><i class="bi bi-exclamation-triangle"></i> Errors</h3>
<ul class="mapping-errors"> <ul class="mapping-errors">