Introduce css classes for status LEDs

This commit is contained in:
Johannes Zellner
2022-02-16 16:31:22 +01:00
parent 0d6c2dc1cf
commit 42501fa364
4 changed files with 30 additions and 8 deletions

View File

@@ -76,7 +76,7 @@
</thead>
<tbody>
<tr>
<td><i class="fa fa-circle" uib-tooltip="active" style="color: #27CE65"></i></td>
<td><i class="fa fa-circle status-active" uib-tooltip="active"></i></td>
<td class="elide-table-cell">cloudron</td>
<td class="elide-table-cell"></td>
<td class="elide-table-cell text-center"></td>
@@ -88,14 +88,14 @@
<td>
<span ng-switch on="service.status" ng-show="service.status">
<span ng-switch-when="active">
<i class="fa fa-circle" uib-tooltip="active" ng-style="{ color: '#27CE65' }"></i>
<i class="fa fa-circle status-active" uib-tooltip="active"></i>
</span>
<span ng-switch-when="starting">
<i class="fa fa-circle" uib-tooltip="starting" ng-style="{ color: '#f0ad4e' }" ng-show="!service.config.recoveryMode"></i>
<i class="fa fa-circle" uib-tooltip="recovery mode" ng-style="{ color: '#ec534f' }" ng-show="service.config.recoveryMode"></i>
<i class="fa fa-circle status-starting" uib-tooltip="starting" ng-show="!service.config.recoveryMode"></i>
<i class="fa fa-circle status-inactive" uib-tooltip="recovery mode" ng-show="service.config.recoveryMode"></i>
</span>
<span ng-switch-default>
<i class="fa fa-circle" uib-tooltip="{{ service.status }}" ng-style="{ color: '#d9534f' }"></i>
<i class="fa fa-circle status-error" uib-tooltip="{{ service.status }}"></i>
</span>
</span>
<i class="fa fa-circle-notch fa-spin" ng-hide="service.status"></i>
@@ -125,7 +125,7 @@
</tr>
<tr ng-show="redisServicesExpanded" ng-repeat="service in services | filter:{ isRedis: true } | orderBy:'name'">
<td>
<i class="fa fa-circle" uib-tooltip="{{ service.status }}" ng-style="{ color: service.status === 'active' ? '#27CE65' : (service.status === 'starting' ? '#f0ad4e' : '#d9534f') }" ng-show="service.status"></i>
<i class="fa fa-circle" uib-tooltip="{{ service.status }}" ng-class="{ 'status-active': service.status === 'active', 'status-starting': service.status === 'starting', 'status-error': (service.status !== 'starting' && service.status !== 'active') }" ng-show="service.status"></i>
<i class="fa fa-circle-notch fa-spin" ng-hide="service.status"></i>
</td>
<td class="elide-table-cell">