Some visual improvements to the list view

This commit is contained in:
Johannes Zellner
2024-04-06 15:47:46 +02:00
parent d6f162a8ca
commit 86edabee4d
2 changed files with 22 additions and 3 deletions

View File

@@ -366,9 +366,25 @@ textarea {
height: 32px;
}
.app-list-app-link-cell {
padding: 0;
}
.app-list-item-fqdn {
visibility: hidden;
color: $text-muted;
margin-left: 20px;
font-size: 12px;
}
&:hover .app-list-item-fqdn {
visibility: visible;
}
.app-list-app-link {
display: block;
color: $text-dark;
padding: 8px;
&:hover {
text-decoration: none;

View File

@@ -214,14 +214,15 @@
</thead>
<tbody>
<tr class="app-list-item" ng-repeat="app in installedApps | selectedGroupAccessFilter:selectedGroup | selectedStateFilter:selectedState | selectedTagFilter:selectedTags | selectedDomainFilter:selectedDomain | appSearchFilter:appSearch | orderBy:labelOrFQDN">
<td class="elide-table-cell" style="text-overflow: ellipsis; white-space: nowrap;">
<a ng-href="{{ app | applicationLink }}" ng-click="onAppClick(app, $event)" target="_blank" style="display: block;">
<td class="elide-table-cell app-list-app-link-cell" style="text-overflow: ellipsis; white-space: nowrap;">
<a ng-href="{{ app | applicationLink }}" ng-click="onAppClick(app, $event)" target="_blank" class="app-list-app-link">
<img ng-src="{{ app.iconUrl || 'img/appicon_fallback.png' }}" fallback-icon="img/appicon_fallback.png" onerror="imageErrorHandler(this)" class="app-list-item-icon"/>
</a>
</td>
<td class="elide-table-cell" style="text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;">
<td class="elide-table-cell app-list-app-link-cell" style="text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;">
<a ng-href="{{ app | applicationLink }}" ng-click="onAppClick(app, $event)" target="_blank" class="app-list-app-link">
{{ app.label || app.subdomain || app.fqdn }}
<span class="app-list-item-fqdn">{{ app.fqdn.indexOf('http') === 0 ? app.fqdn : 'https://'+app.fqdn }}</span>
</a>
</td>
<td class="elide-table-cell" style="text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;">{{ app.manifest.title }}</td>
@@ -235,6 +236,8 @@
</td>
<td style="vertical-align: middle;">{{ app | installationStateLabel }}</td>
<td class="text-right no-wrap" style="vertical-align: middle;">
<a class="btn btn-xs btn-success" style="padding: 1px 7px;" ng-show="config.update[app.id].manifest.version && config.update[app.id].manifest.version !== app.manifest.version && (app | installSuccess) && !(app.error || app.runState === 'stopped')" ng-href="#/app/{{ app.id}}/updates" uib-tooltip="Update Available"><i class="fa fa-arrow-up"></i></a>
<button class="btn btn-xs btn-default" ng-show="app.type === APP_TYPES.LINK && isOperator(app)" ng-click="applinksEdit.show(app)" uib-tooltip="Configure Applink"><i class="fa fa-cog"></i></button>
<button class="btn btn-xs btn-danger" ng-show="app.type === APP_TYPES.LINK && isOperator(app)" ng-click="applinksEdit.show(app)" uib-tooltip="Remove Applink"><i class="far fa-trash-alt"></i></button>