Replace hover actions in app grid with dropdown

This commit is contained in:
Johannes Zellner
2021-04-06 18:27:59 +02:00
parent aae2a36d1e
commit dbeb523882
2 changed files with 27 additions and 59 deletions

View File

@@ -119,12 +119,24 @@
<div class="animateMeOpacity ng-hide" ng-show="installedApps.length > 0">
<div class="app-grid">
<div class="grid-item" ng-repeat="app in installedApps | selectedGroupAccessFilter:selectedGroup | selectedStateFilter:selectedState | selectedTagFilter:selectedTags | selectedDomainFilter:selectedDomain | appSearchFilter:appSearch | orderBy:'fqdn'" ng-class="{ 'admin-action': app.manifest.configurePath && (app | applicationLink) }">
<a ng-href="{{ app | applicationLink }}" ng-click="user.isAtLeastAdmin && (((app | installError) === true || (app | installationActive) === true) && showAppConfigure(app, 'repair')) || ((app | appIsInstalledAndHealthy) && app.pendingPostInstallConfirmation && appPostInstallConfirm.show(app))" target="_blank" ng-class="{ 'hand': (app | appIsInstalledAndHealthy) || (app | installError) || (app | installationActive)}">
<div class="highlight grid-item-content" uib-tooltip="{{ app.fqdn }}">
<div class="highlight grid-item-content" uib-tooltip="{{ app.fqdn }}">
<div class="dropdown" style="display: inline-block; float: right">
<button class="btn btn-lg btn-default grid-item-dropdown dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fas fa-ellipsis-v"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a ng-href="#/app/{{ app.id}}/display"><i class="fas fa-cogs fa-fw"></i> {{ 'apps.configActionTooltip' | tr }}</a></li>
<li role="separator" class="divider"></li>
<li><a ng-href="{{ '/logs.html?appId=' + app.id }}" target="_blank"><i class="fas fa-align-left fa-fw"></i> {{ 'apps.logsActionTooltip' | tr }}</a></li>
<li><a ng-href="" class="hand" ng-click="appInfo.show(app)"><i class="fas fa-info-circle fa-fw"></i> {{ 'apps.infoActionTooltip' | tr }}</a></li>
<li role="separator" class="divider" ng-show="app.manifest.configurePath && (app | applicationLink)"></li>
<li ng-show="app.manifest.configurePath && (app | applicationLink)"><a ng-href="{{ app | applicationLink }}{{ app.manifest.configurePath }}" target="_blank"><i class="fas fa-external-link-alt fa-fw"></i> {{ 'apps.adminPageActionTooltip' | tr }}</a></li>
</ul>
</div>
<a ng-href="{{ app | applicationLink }}" ng-click="user.isAtLeastAdmin && (((app | installError) === true || (app | installationActive) === true) && showAppConfigure(app, 'repair')) || ((app | appIsInstalledAndHealthy) && app.pendingPostInstallConfirmation && appPostInstallConfirm.show(app))" target="_blank" ng-class="{ 'hand': (app | appIsInstalledAndHealthy) || (app | installError) || (app | installationActive)}">
<div class="grid-item-top">
<div class="row">
<div class="col-xs-12 text-center" style="padding-left: 5px; padding-right: 5px;">
<br/>
<img ng-src="{{ app.iconUrl || 'img/appicon_fallback.png' }}" fallback-icon="img/appicon_fallback.png" onerror="imageErrorHandler(this)" class="app-icon"/>
</div>
</div>
@@ -144,19 +156,12 @@
</div>
</div>
<div class="grid-item-actions" ng-show="user.isAtLeastAdmin">
<a ng-href="#/app/{{ app.id}}/display" uib-tooltip="{{ 'apps.configActionTooltip' | tr }}" tooltip-placement="right" tooltip-class="grid-items-action-tooltip"><i class="fas fa-cogs"></i></a>
<a ng-href="{{ '/logs.html?appId=' + app.id }}" target="_blank" uib-tooltip="{{ 'apps.logsActionTooltip' | tr }}" tooltip-placement="right" tooltip-class="grid-items-action-tooltip"><i class="fas fa-align-left"></i></a>
<a ng-href="" class="hand" ng-click="appInfo.show(app)" uib-tooltip="{{ 'apps.infoActionTooltip' | tr }}" tooltip-placement="right" tooltip-class="grid-items-action-tooltip"><i class="fas fa-info-circle"></i></a>
<a ng-href="{{ app | applicationLink }}{{ app.manifest.configurePath }}" target="_blank" ng-show="app.manifest.configurePath && (app | applicationLink)" uib-tooltip="{{ 'apps.adminPageActionTooltip' | tr }}" tooltip-placement="right" tooltip-class="grid-items-action-tooltip"><i class="fas fa-external-link-alt"></i></a>
</div>
<!-- we check the version here because the box updater does not know when an app gets updated -->
<div class="app-update-badge" ng-click="showAppConfigure(app, 'updates')" ng-show="config.update[app.id].manifest.version && config.update[app.id].manifest.version !== app.manifest.version && (app | installSuccess)">
<i class="fa fa-arrow-up fa-inverse"></i>
</div>
</div>
</a>
</a>
</div>
</div>
</div>
</div>