Group apps by domain

src/theme.scss

@@ -245,6 +245,11 @@ h1, h2, h3 {
 // Apps view
 // ----------------------------
 
+.app-grid {
+    display: flex;
+    flex-wrap: wrap;
+}
+
 .grid-item {
     padding: 10px;
     min-width: 225px;
@@ -260,14 +265,8 @@ h1, h2, h3 {
     }
 }
 
-.grid-item:hover .grid-item-bottom {
-    @media(min-width:768px) {
-        opacity: 1;
-        right: 10px;
-    }
-}
-
 .grid-item-content {
+    position: relative; // required to make action buttons positioned absolute within the element
     background-color: white;
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
     border-radius: 2px;
@@ -284,21 +283,10 @@ h1, h2, h3 {
     font-family: $font-family-heading;
 }
 
-.grid-item-bottom-mobile {
+.grid-item-actions {
-    padding: 10px 15px;
-    border-top: 1px solid #ddd;
-    background-color: white;
-
-    @media(min-width:768px) {
-        display: none;
-    }
-}
-
-.grid-item-bottom {
     display: none;
     position: absolute;
     top: 20px;
-    padding: 10px 15px;
     right: -10px;
     opacity: 0;
     background-color: transparent;
@@ -310,6 +298,13 @@ h1, h2, h3 {
     }
 }
 
+.grid-item:hover .grid-item-actions {
+    @media(min-width:768px) {
+        opacity: 1;
+        right: 10px;
+    }
+}
+
 .app-update-badge {
     position: absolute;
     right: 0;

src/views/apps.html

@@ -520,9 +520,12 @@
     </div>
 
     <div class="animateMeOpacity ng-hide" ng-show="installedApps.length > 0">
-        <div class="col-sm-1 grid-item" ng-repeat="app in installedApps | orderBy:'location'">
+      <div ng-repeat="domain in domains">
-            <div style="background-color: white;" class="highlight grid-item-content" uib-tooltip="{{ app.fqdn }}">
+        <h2 style="padding-left: 15px;">{{ domain.domain }}</h2>
+        <div class="app-grid">
+          <div class="grid-item" ng-repeat="app in installedApps | filter:{domain:domain.domain} | orderBy:'location'">
             <a ng-href="{{ app | applicationLink }}" ng-click="((app | installError) === true && showError(app)) || ((app | appIsInstalledAndHealthy) && app.pendingPostInstallConfirmation && appPostInstallConfirm.show(app))" target="_blank" ng-class="{ 'hand': (app | appIsInstalledAndHealthy) }">
+              <div style="background-color: white;" class="highlight grid-item-content" uib-tooltip="{{ app.fqdn }}">
                 <div class="grid-item-top">
                   <div class="row">
                     <div class="col-xs-12 text-center" style="padding-left: 5px; padding-right: 5px;">
@@ -545,27 +548,7 @@
                     </div>
                   </div>
                 </div>
-                    <div class="grid-item-bottom-mobile" ng-show="user.admin || (config.features.spaces && app.ownerId === user.id)">
+                <div class="grid-item-actions" ng-show="user.admin || (config.features.spaces && app.ownerId === user.id)">
-                        <div class="row">
-                            <div class="col-xs-4 text-left">
-                                <a href="" ng-click="appRestore.show(app)" ng-show="backupConfig.provider !== 'noop'">
-                                    <i class="fa fa-undo scale"></i>
-                                </a>
-
-                                <a href="" ng-click="appConfigure.show(app)" ng-show="app.installationState === 'installed' || app.installationState === 'pending_configure' || (app | installError)">
-                                    <i ng-hide="(app | installError)" class="fa fa-pencil-alt scale"></i>
-                                    <i ng-show="(app | installError)" class="fa fa-wrench scale"></i>
-                                </a>
-                            </div>
-                            <div class="col-xs-4 text-center"></div>
-                            <div class="col-xs-4 text-right">
-                                <a href="" ng-click="showUninstall(app)">
-                                    <i class="fa fa-times scale"></i>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="grid-item-bottom" ng-show="user.admin || (config.features.spaces && app.ownerId === user.id)">
                   <div style="text-align: center;">
                     <a href="" ng-click="showUninstall(app)" uib-tooltip="Uninstall" tooltip-placement="right" tooltip-class="app-tooltip"><i class="fa fa-times scale"></i></a>
                   </div>
@@ -604,8 +587,10 @@
                     </span>
                   </a>
                 </div>
+              </div>
             </a>
           </div>
         </div>
       </div>
+    </div>
 </div>

src/views/apps.js

@@ -10,6 +10,7 @@ angular.module('Application').controller('AppsController', ['$scope', '$location
     $scope.config = Client.getConfig();
     $scope.user = Client.getUserInfo();
     $scope.domains = [];
+    $scope.usedDomains = [];
     $scope.groups = [];
     $scope.users = [];
     $scope.backupConfig = {};
@@ -657,8 +658,20 @@ angular.module('Application').controller('AppsController', ['$scope', '$location
         });
     }
 
+    function refreshInstalledApps() {
+        Client.refreshInstalledApps();
+
+        var tmp = [];
+        $scope.installedApps.forEach(function (app) {
+            if (!tmp.find(function (d) { return d.domain === app.domain; })) tmp.push({ domain: app.domain, apps: [] });
+            tmp.find(function (d) { return d.domain === app.domain; }).apps.push(app);
+        });
+
+        $scope.usedDomains = tmp;
+    }
+
     Client.onReady(function () {
-        Client.refreshInstalledApps(); // refresh the new list immediately when switching from another view (appstore)
+        refreshInstalledApps(); // refresh the new list immediately when switching from another view (appstore)
 
         $scope.spacesSuffix = $scope.user.username.replace(/\./g, '-');
 
@@ -669,7 +682,7 @@ angular.module('Application').controller('AppsController', ['$scope', '$location
             if ($scope.user.admin && !$scope.config.managed) getBackupConfig(); // FIXME: detect disabled backups some other way
         }
 
-        var refreshAppsTimer = $interval(Client.refreshInstalledApps.bind(Client), 5000);
+        var refreshAppsTimer = $interval(refreshInstalledApps, 5000);
 
         $scope.$on('$destroy', function () {
             $interval.cancel(refreshAppsTimer);