jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Use tooltips instead of overlays as hint when app is busy

Browse Source
This commit is contained in:
Girish Ramakrishnan
2020-02-07 10:42:58 -08:00
parent 8600019079
commit 72b9384902
1 changed files with 13 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/app.html
View File

@@ -486,7 +486,6 @@
</div>
<div class="card" ng-show="view === 'location'">
<div class="task-active-overlay" ng-show="app.taskId"></div>
<div class="row">
<div class="col-md-12">
<fieldset>
@@ -574,7 +573,7 @@
</div>
<div class="row">
<div class="col-md-12 text-right">
<button class="btn btn-outline btn-primary pull-right" ng-click="location.submit()" ng-disabled="location.$invalid || location.busy || app.error" tooltip-enable="app.error" uib-tooltip="App is in error state">
<button class="btn btn-outline btn-primary pull-right" ng-click="location.submit()" ng-disabled="location.$invalid || location.busy || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">
<i class="fa fa-circle-notch fa-spin" ng-show="location.busy"></i> Save
</button>
</div>
@@ -654,7 +653,6 @@
</div>
<div class="card" ng-show="view === 'resources'">
<div class="task-active-overlay" ng-show="app.taskId"></div>
<div class="row">
<div class="col-md-12">
<fieldset>
@@ -674,7 +672,7 @@
</div>
<div class="row">
<div class="col-md-12 text-right">
<button class="btn btn-outline btn-primary pull-right" ng-click="resources.submitMemoryLimit()" ng-disabled="resources.memoryLimit === resources.currentMemoryLimit || resourcesForm.$invalid || resources.busy || app.error" tooltip-enable="app.error" uib-tooltip="App is in error state">
<button class="btn btn-outline btn-primary pull-right" ng-click="resources.submitMemoryLimit()" ng-disabled="resources.memoryLimit === resources.currentMemoryLimit || resourcesForm.$invalid || resources.busy || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">
<i class="fa fa-circle-notch fa-spin" ng-show="resources.busy"></i> Resize
</button>
</div>
@@ -699,7 +697,7 @@
</div>
<div class="row">
<div class="col-md-12 text-right">
<button class="btn btn-outline btn-primary pull-right" ng-click="resources.submitCpuShares()" ng-disabled="resources.cpuShares === resources.currentCpuShares || resourcesForm.$invalid || resources.busyCpuShares || app.error" tooltip-enable="app.error" uib-tooltip="App is in error state">
<button class="btn btn-outline btn-primary pull-right" ng-click="resources.submitCpuShares()" ng-disabled="resources.cpuShares === resources.currentCpuShares || resourcesForm.$invalid || resources.busyCpuShares || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">
<i class="fa fa-circle-notch fa-spin" ng-show="resources.busyCpuShares"></i> Set
</button>
</div>
@@ -726,7 +724,7 @@
</div>
<div class="row">
<div class="col-md-12 text-right">
<button class="btn btn-outline btn-primary pull-right" ng-click="resources.submitDataDir()" ng-disabled="!resourcesDataDirForm.$dirty || resourcesDataDirForm.$invalid || resources.busyDataDir || app.error" tooltip-enable="app.error" uib-tooltip="App is in error state">
<button class="btn btn-outline btn-primary pull-right" ng-click="resources.submitDataDir()" ng-disabled="!resourcesDataDirForm.$dirty || resourcesDataDirForm.$invalid || resources.busyDataDir || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">
<i class="fa fa-circle-notch fa-spin" ng-show="resources.busyDataDir"></i> Move Data
</button>
</div>
@@ -734,7 +732,6 @@
</div>
<div class="card" ng-show="view === 'email'">
<div class="task-active-overlay" ng-show="app.taskId"></div>
<div class="row">
<div class="col-md-12">
<label class="control-label" for="emailMailboxNameEnabled">Mail FROM Address</label>
@@ -770,7 +767,7 @@
</div>
<div class="row">
<div class="col-md-12 text-right">
<button class="btn btn-outline btn-primary pull-right" ng-click="email.submit()" ng-disabled="!emailForm.$dirty || email.busy || app.error" tooltip-enable="app.error" uib-tooltip="App is in error state">
<button class="btn btn-outline btn-primary pull-right" ng-click="email.submit()" ng-disabled="!emailForm.$dirty || email.busy || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">
<i class="fa fa-circle-notch fa-spin" ng-show="email.busy"></i> Save
</button>
</div>
@@ -867,7 +864,7 @@
</table>
<br/>
<button type="button" class="btn btn-primary pull-right" ng-click="backups.createBackup()" ng-disabled="app.taskId || backups.busyCreate || app.error" tooltip-enable="app.error" uib-tooltip="App is in error state">
<button type="button" class="btn btn-primary pull-right" ng-click="backups.createBackup()" ng-disabled="app.taskId || backups.busyCreate || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">
<i class="fa fa-circle-notch fa-spin" ng-show="app.installationState === 'pending_backup' || backups.busyCreate"></i> Create Backup
</button>
@@ -880,7 +877,8 @@
<p>Use this to migrate an app from another Cloudron. The other app must have the same package version and access
control stratey as this one.
</p>
<button class="btn btn-primary pull-right" class="btn-primary" ng-click="importBackup.show()" ng-disabled="app.taskId">
<button class="btn btn-primary pull-right" class="btn-primary" ng-click="importBackup.show()" ng-disabled="importBackup.busy || app.taskId" tooltip-enable="app.taskId" uib-tooltip="App is busy">
<i class="fa fa-circle-notch fa-spin" ng-show="backups.busy"></i> Import Backup
</button>
</div>
@@ -911,8 +909,7 @@
<div class="col-md-12">
<label class="control-label">Start / Stop</label>
<p>Apps can be stopped to conserve server resources. They will continue to be backed up but won't be updated.</p>
<button class="btn btn-primary pull-right" ng-class="{ 'btn-danger': !console.startButton }" ng-click="console.toggleRunState()
" ng-disabled="app.taskId || app.error || console.busyRunState">
<button class="btn btn-primary pull-right" ng-class="{ 'btn-danger': !console.startButton }" ng-click="console.toggleRunState()" ng-disabled="app.taskId || app.error || console.busyRunState" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">
<i ng-show="app.installationState === 'pending_start' || app.installationState === 'pending_stop'" class="fa fa-circle-notch fa-spin"></i>
{{ console.startButton ? 'Start App' : 'Stop App' }}
</button>
@@ -921,7 +918,6 @@
</div>
<div class="card" ng-show="view === 'repair'">
<div class="task-active-overlay" ng-show="app.taskId"></div>
<div class="row">
<div class="col-md-12">
<label class="control-label">Crash Recovery</label>
@@ -931,9 +927,9 @@
Use the following <a target="_blank" ng-href="{{ config.webServerOrigin }}/documentation/troubleshooting/#unresponsive-app">instructions</a>
to get the app running again.
</p>
<button class="btn btn-primary pull-right" ng-click="repair.pauseAppBegin()" ng-show="!app.debugMode" ng-disabled="repair.pauseBusy || app.error">Enable Recovery Mode</button>
<button class="btn btn-primary pull-right" ng-click="repair.pauseAppDone()" ng-show="app.debugMode" ng-disabled="repair.pauseBusy || app.error">Disable Recovery Mode</button>
<button class="btn btn-primary pull-right" ng-click="repair.restartApp()" ng-disabled="repair.restartBusy || app.error">
<button class="btn btn-primary pull-right" ng-click="repair.pauseAppBegin()" ng-show="!app.debugMode" ng-disabled="repair.pauseBusy || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">Enable Recovery Mode</button>
<button class="btn btn-primary pull-right" ng-click="repair.pauseAppDone()" ng-show="app.debugMode" ng-disabled="repair.pauseBusy || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">Disable Recovery Mode</button>
<button class="btn btn-primary pull-right" ng-click="repair.restartApp()" ng-disabled="repair.restartBusy || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">
<i ng-show="repair.restartBusy" class="fa fa-circle-notch fa-spin"></i>
Restart App
</button>
@@ -945,7 +941,7 @@
<label class="control-label">Task Error</label>
<p>If a configuration, update, restore or backup action resulted in an error, you can retry the task.</p>
<p ng-show="app.error">An error occurred during the <b>{{ app.error.installationState | taskName }}</b> operation: <span class="text-danger"><b>{{ app.error.reason + ': ' + app.error.message }}</b></span></p>
<button class="btn btn-primary pull-right" ng-click="repair.confirm()" ng-disabled="app.taskId || !app.error">Retry {{ app.error.installationState | taskName }}</button>
<button class="btn btn-primary pull-right" ng-click="repair.confirm()" ng-disabled="app.taskId || !app.error" tooltip-enable="app.taskId" uib-tooltip="App is busy">Retry {{ app.error.installationState | taskName }}</button>
<!-- this is hidden for now, use the CLI instead -->
<button class="btn btn-danger pull-right" ng-click="repair.stopAppTask(app.taskId)" ng-show="false && app.taskId">Cancel Current Task</button>