From b9d6c8f8bb6478bfa9c98bac78213cfda05bbb23 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Tue, 13 Mar 2018 10:50:03 +0100
Subject: [PATCH] Show all apps inactive and blurred in the background of the
 appstore login form

---
 webadmin/src/theme.scss          |  20 ++++--
 webadmin/src/views/appstore.html | 110 +++++++++++++++----------------
 2 files changed, 71 insertions(+), 59 deletions(-)

diff --git a/webadmin/src/theme.scss b/webadmin/src/theme.scss
index 3def38540..5dcbd6a4b 100644
--- a/webadmin/src/theme.scss
+++ b/webadmin/src/theme.scss
@@ -144,13 +144,22 @@ html, body {
     box-shadow:         0px 2px 5px rgba(0, 0, 0, 0.1);
 }
 
-.highlight {
+.blurred {
+    filter: blur(2px);
 }
 
-.highlight:hover {
-    background-color: rgba(0, 0, 0, 0.1) !important;
+.passive {
+    pointer-events: none;
+    user-select: none;
 }
 
+.highlight {
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.1) !important;
+    }
+}
+
+
 .content {
     width: 100%;
     max-width: 720px;
@@ -337,7 +346,10 @@ multiselect {
 // ----------------------------
 
 .appstore-login {
-    margin-top: 50px !important;
+    position: fixed;
+    margin: 50px auto !important;
+    left: 0;
+    right: 0;
 
     h1 {
         font-size: 32px;
diff --git a/webadmin/src/views/appstore.html b/webadmin/src/views/appstore.html
index ac6416a6b..4970cef50 100644
--- a/webadmin/src/views/appstore.html
+++ b/webadmin/src/views/appstore.html
@@ -185,6 +185,61 @@
     <h1><i class="fa fa-circle-o-notch fa-spin"></i></h1>
 </div>
 
+<div ng-show="ready" class="ng-cloak" id="appstoreGrid" ng-class="{ 'blurred': !validAppstoreAccount, 'passive': !validAppstoreAccount }">
+    <div class="col-md-2">
+        <br/>
+        <div>
+            <form ng-submit="search()">
+                <div class="input-group">
+                    <input type="text" id="appstoreSearch" class="form-control" style="height: 40px" placeholder="Search" ng-model="searchString" ng-change="search()" autofocus>
+                </div>
+            </form>
+        </div>
+        <br/>
+        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === '' }" category="">All</a>
+        <br/>
+        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'analytics' }" category="analytics"><i class="fa fa-bar-chart"></i> Analytics</a>
+        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'blog' }" category="blog"><i class="fa fa-font"></i> Blog</a>
+        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'chat' }" category="chat"><i class="fa fa-comments-o"></i> Chat</a>
+        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'git' }" category="git"><i class="fa fa-code-fork"></i> Code Hosting</a>
+        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'email' }" category="email"><i class="fa fa-envelope-o"></i> Email</a>
+        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'sync' }" category="sync"><i class="fa fa-refresh"></i> File Sync</a>
+        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'finance' }" category="finance"><i class="fa fa-dollar"></i> Finance</a>
+        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'forum' }" category="forum"><i class="fa fa-users"></i> Forum</a>
+        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'gallery' }" category="gallery"><i class="fa fa-picture-o"></i> Gallery</a>
+        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'notes' }" category="notes"><i class="fa fa-sticky-note-o"></i> Notes</a>
+        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'project' }" category="project"><i class="fa fa-line-chart"></i> Project Management</a>
+        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'vpn' }" category="vpn"><i class="fa fa-user-secret"></i> VPN</a>
+        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'hosting' }" category="hosting"><i class="fa fa-bars"></i> Web Hosting</a>
+        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'wiki' }" category="wiki"><i class="fa fa-wikipedia-w"></i> Wiki</a>
+        <br/>
+        <br/>
+        <a href="https://forum.cloudron.io/category/5/app-requests" target="_blank">Missing an app? Let us know.</a>
+    </div>
+    <div class="col-md-10" ng-show="apps.length">
+        <div class="row-no-margin">
+            <div class="col-sm-1 appstore-item" ng-repeat="app in apps | orderBy:'installCount':true">
+                <div class="appstore-item-content highlight" ng-click="gotoApp(app)" ng-class="{ 'appstore-item-content-testing': (app.publishState === 'testing' || app.publishState === 'pending_approval') }">
+                    <span class="badge badge-danger appstore-item-badge-testing" ng-show="app.publishState === 'testing'">Testing</span>
+                    <span class="badge badge-warning appstore-item-badge-testing" ng-show="app.publishState === 'pending_approval'">Pending Approval</span>
+                    <div class="appstore-item-content-icon col-same-height">
+                        <img ng-src="{{app.iconUrl}}" onerror="this.onerror=null;this.src='img/appicon_fallback.png'" class="app-icon"/>
+                    </div>
+                    <div class="appstore-item-content-description col-same-height">
+                        <h4 class="appstore-item-content-title">{{ app.manifest.title }}</h4>
+                        <div class="appstore-item-content-tagline text-muted">{{ app.manifest.tagline }}</div>
+                        <!-- <div class="appstore-item-rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star-o"></i></div> -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-10 animateMeOpacity loading-banner" ng-show="!apps.length">
+        <h3 class="text-muted">No apps found.</h3>
+        <a href="https://forum.cloudron.io/category/5/app-requests" target="_blank"><h3>Request an app or vote for one in our forum.</h3></a>
+    </div>
+</div>
+
 <!-- appstore login -->
 <div ng-show="ready && !validAppstoreAccount" class="container card card-small appstore-login ng-cloak">
     <div class="col-md-12 text-center">
@@ -239,58 +294,3 @@
         </form>
     </div>
 </div>
-
-<div ng-show="ready && validAppstoreAccount" class="ng-cloak" id="appstoreGrid">
-    <div class="col-md-2">
-        <br/>
-        <div>
-            <form ng-submit="search()">
-                <div class="input-group">
-                    <input type="text" id="appstoreSearch" class="form-control" style="height: 40px" placeholder="Search" ng-model="searchString" ng-change="search()" autofocus>
-                </div>
-            </form>
-        </div>
-        <br/>
-        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === '' }" category="">All</a>
-        <br/>
-        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'analytics' }" category="analytics"><i class="fa fa-bar-chart"></i> Analytics</a>
-        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'blog' }" category="blog"><i class="fa fa-font"></i> Blog</a>
-        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'chat' }" category="chat"><i class="fa fa-comments-o"></i> Chat</a>
-        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'git' }" category="git"><i class="fa fa-code-fork"></i> Code Hosting</a>
-        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'email' }" category="email"><i class="fa fa-envelope-o"></i> Email</a>
-        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'sync' }" category="sync"><i class="fa fa-refresh"></i> File Sync</a>
-        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'finance' }" category="finance"><i class="fa fa-dollar"></i> Finance</a>
-        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'forum' }" category="forum"><i class="fa fa-users"></i> Forum</a>
-        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'gallery' }" category="gallery"><i class="fa fa-picture-o"></i> Gallery</a>
-        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'notes' }" category="notes"><i class="fa fa-sticky-note-o"></i> Notes</a>
-        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'project' }" category="project"><i class="fa fa-line-chart"></i> Project Management</a>
-        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'vpn' }" category="vpn"><i class="fa fa-user-secret"></i> VPN</a>
-        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'hosting' }" category="hosting"><i class="fa fa-bars"></i> Web Hosting</a>
-        <a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'wiki' }" category="wiki"><i class="fa fa-wikipedia-w"></i> Wiki</a>
-        <br/>
-        <br/>
-        <a href="https://forum.cloudron.io/category/5/app-requests" target="_blank">Missing an app? Let us know.</a>
-    </div>
-    <div class="col-md-10" ng-show="apps.length">
-        <div class="row-no-margin">
-            <div class="col-sm-1 appstore-item" ng-repeat="app in apps | orderBy:'installCount':true">
-                <div class="appstore-item-content highlight" ng-click="gotoApp(app)" ng-class="{ 'appstore-item-content-testing': (app.publishState === 'testing' || app.publishState === 'pending_approval') }">
-                    <span class="badge badge-danger appstore-item-badge-testing" ng-show="app.publishState === 'testing'">Testing</span>
-                    <span class="badge badge-warning appstore-item-badge-testing" ng-show="app.publishState === 'pending_approval'">Pending Approval</span>
-                    <div class="appstore-item-content-icon col-same-height">
-                        <img ng-src="{{app.iconUrl}}" onerror="this.onerror=null;this.src='img/appicon_fallback.png'" class="app-icon"/>
-                    </div>
-                    <div class="appstore-item-content-description col-same-height">
-                        <h4 class="appstore-item-content-title">{{ app.manifest.title }}</h4>
-                        <div class="appstore-item-content-tagline text-muted">{{ app.manifest.tagline }}</div>
-                        <!-- <div class="appstore-item-rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star-o"></i></div> -->
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="col-md-10 animateMeOpacity loading-banner" ng-show="!apps.length">
-        <h3 class="text-muted">No apps found.</h3>
-        <a href="https://forum.cloudron.io/category/5/app-requests" target="_blank"><h3>Request an app or vote for one in our forum.</h3></a>
-    </div>
-</div>