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;
}
.badge.bg-enabled {
background-color: green;
color: white;
}
.badge.bg-disabled {
background-color: #999;
color: white;
}
.null-label {
background-color: #EEE;
border-radius: 5px;
@ -162,7 +173,7 @@ td.table-checkbox, th.table-checkbox {
.noselect {
cursor: pointer; -webkit-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
@ -215,6 +226,10 @@ ul.categorical-select button {
width: 50%;
}
.operations-badges {
font-size: 1.2rem;
}
/**
* Images

View File

@ -33,16 +33,32 @@
</div>
<div class="box with-navigation">
<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="Database table name" class="ms-3 label label-primary label-gray font-monospace">
[[ ${schema.getTableName()} ]]
</span>
</span>
</h3>
<h3><a title="Create new item"
th:href="|/${baseUrl}/model/${schema.getClassName()}/create|"><i class="bi bi-plus-square"></i></a></h3>
</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">
<tr class="table-data-row">
<th style="width: 32px"></th>
@ -67,7 +83,7 @@
<td th:text="${field.isNullable()}"></td>
</tr>
</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()}"
class="fw-bold mt-3 mb-3"><i class="bi bi-exclamation-triangle"></i> Errors</h3>
<ul class="mapping-errors">