UI test/review

This commit is contained in:
Bernd Bestel
2020-11-08 19:51:56 +01:00
parent 3e3321bf11
commit ea5b3dcd51
6 changed files with 85 additions and 56 deletions

View File

@@ -239,6 +239,10 @@ input::-webkit-inner-spin-button {
width: 96vw; /* Set width of popup menu to screen size */
}
a:not([href]) {
color: inherit;
text-decoration: none;
}
/* Set width of popup menu to fixed value on larger devices */
@media (min-width: 400px) {

View File

@@ -1,6 +1,14 @@
var equipmentTable = $('#equipment-table').DataTable({
'order': [[0, 'asc']],
'select': 'single',
'columnDefs': [
{ 'orderable': false, 'targets': 0 },
{ 'searchable': false, "targets": 0 },
{ 'orderData': 2, 'targets': 1 }
],
select: {
style: 'single',
selector: 'tr td:not(:first-child)'
},
'initComplete': function()
{
this.api().row({ order: 'current' }, 0).select();
@@ -29,8 +37,6 @@ function DisplayEquipment(id)
$(".selected-equipment-name").text(equipmentItem.name);
$("#description-tab-content").html(equipmentItem.description);
$(".equipment-edit-button").attr("href", U("/equipment/" + equipmentItem.id.toString()));
$(".equipment-delete-button").attr("data-equipment-id", equipmentItem.id);
$(".equipment-delete-button").attr("data-equipment-name", equipmentItem.name);
if (equipmentItem.instruction_manual_file_name !== null && !equipmentItem.instruction_manual_file_name.isEmpty())
{

View File

@@ -137,3 +137,12 @@ ResizeResponsiveEmbeds();
Grocy.Components.UserfieldsForm.Load();
$('#name').focus();
Grocy.FrontendHelpers.ValidateForm('equipment-form');
$("#instruction-manual").on("change", function(e)
{
$("#instruction-manual-label").removeClass("d-none");
$("#instruction-manual-label-none").addClass("d-none");
$("#delete-current-instruction-manual-on-save-hint").addClass("d-none");
$("#current-instruction-manuale").addClass("d-none");
Grocy.DeleteProductPictureOnSave = false;
});

View File

@@ -58,9 +58,10 @@
</div>
<table id="equipment-table"
class="table table-striped nowrap w-100">
class="table table-sm table-striped nowrap w-100">
<thead>
<tr>
<th class="border-right"></th>
<th>{{ $__t('Name') }}</th>
@include('components.userfields_thead', array(
@@ -72,6 +73,18 @@
<tbody class="d-none">
@foreach($equipment as $equipmentItem)
<tr data-equipment-id="{{ $equipmentItem->id }}">
<td class="fit-content border-right">
<a class="btn btn-info btn-sm hide-when-embedded hide-on-fullscreen-card"
href="{{ $U('/equipment/') }}{{ $equipmentItem->id }}">
<i class="fas fa-edit"></i>
</a>
<a class="btn btn-sm btn-danger hide-when-embedded hide-on-fullscreen-card equipment-delete-button"
href="#"
data-equipment-id="{{ $equipmentItem->id }}"
data-equipment-name="{{ $equipmentItem->name }}">
<i class="fas fa-trash"></i>
</a>
</td>
<td>
{{ $equipmentItem->name }}
</td>
@@ -88,7 +101,7 @@
</div>
<div class="col-xs-12 col-md-8">
<ul class="nav nav-tabs">
<ul class="nav nav-tabs grocy-tabs">
<li class="nav-item">
<a class="nav-link active"
data-toggle="tab"
@@ -100,23 +113,13 @@
href="#description-tab">{{ $__t('Notes') }}</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-content grocy-tabs">
<div class="tab-pane fade show active"
id="instruction-manual-tab">
<div id="selectedEquipmentInstructionManualCard"
class="card">
<div class="card-header card-header-fullscreen">
<i class="fas fa-toolbox"></i> <span class="selected-equipment-name"></span>&nbsp;&nbsp;
<a class="btn btn-sm btn-outline-info py-0 equipment-edit-button hide-on-fullscreen-card"
href="#">
<i class="fas fa-edit"></i>
</a>
<a class="btn btn-sm btn-outline-danger py-0 equipment-delete-button hide-on-fullscreen-card"
href="#"
data-equipment-id="{{ $equipmentItem->id }}"
data-equipment-name="{{ $equipmentItem->name }}">
<i class="fas fa-trash"></i>
</a>
<span class="selected-equipment-name"></span>
<a id="selectedEquipmentInstructionManualToggleFullscreenButton"
class="btn btn-sm btn-outline-secondary py-0 float-right"
href="#"
@@ -140,17 +143,7 @@
<div id="selectedEquipmentDescriptionCard"
class="card">
<div class="card-header card-header-fullscreen">
<i class="fas fa-toolbox"></i> <span class="selected-equipment-name"></span>&nbsp;&nbsp;
<a class="btn btn-sm btn-outline-info py-0 equipment-edit-button hide-on-fullscreen-card"
href="#">
<i class="fas fa-edit"></i>
</a>
<a class="btn btn-sm btn-outline-danger py-0 equipment-delete-button hide-on-fullscreen-card"
href="#"
data-equipment-id="{{ $equipmentItem->id }}"
data-equipment-name="{{ $equipmentItem->name }}">
<i class="fas fa-trash"></i>
</a>
<span class="selected-equipment-name"></span>
<a id="selectedEquipmentDescriptionToggleFullscreenButton"
class="btn btn-sm btn-outline-secondary py-0 float-right"
href="#"

View File

@@ -49,20 +49,6 @@
<div class="invalid-feedback">{{ $__t('A name is required') }}</div>
</div>
<div class="form-group">
<label for="instruction-manual">{{ $__t('Instruction manual') }} (PDF)
<span class="text-muted small">{{ $__t('If you don\'t select a file, the current instruction manual will not be altered') }}</span>
</label>
<div class="custom-file">
<input type="file"
class="custom-file-input"
id="instruction-manual"
accept="application/pdf">
<label class="custom-file-label"
for="instruction-manual">{{ $__t('No file selected') }}</label>
</div>
</div>
<div class="form-group">
<label for="description">{{ $__t('Notes') }}</label>
<textarea class="form-control wysiwyg-editor"
@@ -82,20 +68,50 @@
</div>
<div class="col-lg-6 col-xs-12">
<label class="mt-2">{{ $__t('Instruction manual') }}</label>
<button id="delete-current-instruction-manual-button"
class="btn btn-sm btn-danger mb-1 @if(empty($equipment->instruction_manual_file_name)) disabled @endif"><i class="fas fa-trash"></i> {{ $__t('Delete') }}</button>
@if(!empty($equipment->instruction_manual_file_name))
<embed id="current-equipment-instruction-manual"
class="embed-responsive embed-responsive-4by3"
src="{{ $U('/api/files/equipmentmanuals/' . base64_encode($equipment->instruction_manual_file_name)) }}"
type="application/pdf">
<p id="delete-current-instruction-manual-on-save-hint"
class="form-text text-muted font-italic d-none">{{ $__t('The current instruction manual will be deleted when you save the equipment') }}</p>
@else
<p id="no-current-instruction-manual-hint"
class="form-text text-muted font-italic">{{ $__t('No instruction manual available') }}</p>
@endif
<div class="row">
<div class="col">
<div class="title-related-links mb-3">
<h4>
{{ $__t('Instruction manual') }}
</h4>
<div class="form-group w-75 m-0">
<div class="input-group">
<div class="custom-file">
<input type="file"
class="custom-file-input"
id="instruction-manual"
accept="application/pdf">
<label id="instruction-manual-label"
class="custom-file-label @if(empty($equipment->instruction_manual_file_name)) d-none @endif"
for="instruction-manual">
{{ $equipment->instruction_manual_file_name }}
</label>
<label id="instruction-manual-label-none"
class="custom-file-label @if(!empty($equipment->instruction_manual_file_name)) d-none @endif"
for="instruction-manual">
{{ $__t('No file selected') }}
</label>
</div>
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-trash"
id="delete-current-instruction-manual-button"></i></span>
</div>
</div>
</div>
</div>
@if(!empty($equipment->instruction_manual_file_name))
<embed id="current-equipment-instruction-manual"
class="embed-responsive embed-responsive-4by3"
src="{{ $U('/api/files/equipmentmanuals/' . base64_encode($equipment->instruction_manual_file_name)) }}"
type="application/pdf">
<p id="delete-current-instruction-manual-on-save-hint"
class="form-text text-muted font-italic d-none">{{ $__t('The current instruction manual will be deleted when you save the equipment') }}</p>
@else
<p id="no-current-instruction-manual-hint"
class="form-text text-muted font-italic">{{ $__t('No instruction manual available') }}</p>
@endif
</div>
</div>
</div>
</div>
@stop

View File

@@ -243,6 +243,7 @@
<i class="fas fa-cart-plus"></i>
</a>
<a class="recipe-fullscreen hide-when-embedded"
id="selectedRecipeToggleFullscreenButton"
href="#"
data-toggle="tooltip"
title="{{ $__t('Expand to fullscreen') }}">