tomasz1986andGitHub
34ef30dd5c
Currently, with a large number of versioned files, there is a delay between the Restore Versions modal showing up on the screen and initialisation of the actual versions tree. This leads to a situation, where the modal is initially empty, which confuses the user, making them think that something is not working correctly. To avoid the above, always show the loading data information. The string is displayed using static HTML first, and then replaced with the exact same content once the tree has been initialised. Both elements use the same style and position, so there is no visual shift between the two. Signed-off-by: Tomasz Wilczyński <twilczynski@naver.com>
60 lines
2.7 KiB
HTML
60 lines
2.7 KiB
HTML
<modal id="restoreVersions" status="default" icon="fas fa-undo" heading="{{'Restore Versions' | translate}} ({{folderLabel(restoreVersions.folder)}})" large="yes" closeable="yes">
|
|
<div class="modal-body">
|
|
<!--
|
|
Inform the user about loading data even before the tree is initialised
|
|
to avoid confusion where nothing is displayed on the screen for a while.
|
|
Ref: https://forum.syncthing.net/t/reversed-date-in-search-filter/21369/3
|
|
-->
|
|
<div ng-if="!restoreVersions.versions" translate>Loading data...</div>
|
|
<div ng-if="restoreVersions.versions && !restoreVersions.errors">
|
|
<div id="restoreTree-container">
|
|
<table id="restoreTree">
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<span ng-if="sizeOf(restoreVersions.versions) > 0" translate>Loading data...</span>
|
|
<span ng-if="sizeOf(restoreVersions.versions) == 0" translate>There are no file versions to restore.</span>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<hr />
|
|
<div class="row form-inline">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="restoreVersionSearch"><span translate>Filter by name</span>: </label>
|
|
<input id="restoreVersionSearch" class="form-control" type="text" ng-model="restoreVersions.filters.text" ng-disabled="sizeOf(restoreVersions.versions) == 0">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="restoreVersionDate"><span translate>Filter by date</span>: </label>
|
|
<input id="restoreVersionDateRange" class="form-control" ng-disabled="sizeOf(restoreVersions.versions) == 0">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div ng-if="restoreVersions.errors">
|
|
<label><span translate>Some items could not be restored:</span></label>
|
|
<table class="table table-condensed table-striped">
|
|
<tbody>
|
|
<tr ng-repeat="(file, error) in restoreVersions.errors">
|
|
<td>{{ file }}</td>
|
|
<td>{{ error }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#restore-versions-confirmation" ng-if="restoreVersions.versions" ng-disabled="restoreVersions.selectionCount() < 1">
|
|
<span class="fas fa-check"></span> <span translate>Restore</span>
|
|
</button>
|
|
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
|
|
<span class="fas fa-times"></span> <span translate>Close</span>
|
|
</button>
|
|
</div>
|
|
</modal>
|