Shoutout to QE on non-QE pages

Fixes #361

static/css/directives/ui/plan-manager.css

@@ -0,0 +1,42 @@
+.plan-manager-element .plans-list-table thead td {
+  color: #aaa;
+  font-weight: bold;
+}
+
+.plan-manager-element .plans-list-table td {
+  padding: 10px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+
+.plan-manager-element .plans-list-table td.controls {
+  text-align: right;
+}
+
+.plan-manager-element .plans-list-table .plan-price {
+  font-size: 16px;
+  margin-bottom: 0px;
+}
+
+.plan-manager-element .plans-list-table .deprecated-plan {
+  color: #aaa;
+}
+
+.plan-manager-element .plans-list-table .deprecated-plan-label {
+  font-size: 0.7em;
+}
+
+.plan-manager-element .qe-shoutout {
+  float: right;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  margin-top: 20px;
+  max-width: 500px;
+}
+
+.plan-manager-element .qe-shoutout img {
+  max-width: 100%;
+  max-height: 28px;
+  margin-bottom: 10px;
+}

static/css/pages/repo-list.css

@@ -41,3 +41,26 @@
   margin-right: 10px;
   text-align: center;
 }
+
+.repo-list .qe-shoutout {
+  padding: 10px;
+}
+
+.repo-list .qe-shoutout b {
+  margin-left: 6px;
+}
+
+.repo-list .qe-shoutout div {
+  margin-right: 94px;
+}
+
+.repo-list .qe-shoutout img {
+  max-height: 24px;
+  max-width: 100%;
+}
+
+.repo-list .qe-shoutout span {
+  float: right;
+  line-height: 24px;
+  margin-right: 4px;
+}

static/css/quay.css

@@ -2852,34 +2852,6 @@ p.editable:hover i {
   margin-bottom: 20px;
 }
 
-.plan-manager-element .plans-list-table thead td {
-  color: #aaa;
-  font-weight: bold;
-}
-
-.plan-manager-element .plans-list-table td {
-  padding: 10px;
-  font-size: 16px;
-  vertical-align: middle;
-}
-
-.plan-manager-element .plans-list-table td.controls {
-  text-align: right;
-}
-
-.plan-manager-element .plans-list-table .plan-price {
-  font-size: 16px;
-  margin-bottom: 0px;
-}
-
-.plan-manager-element .plans-list-table .deprecated-plan {
-  color: #aaa;
-}
-
-.plan-manager-element .plans-list-table .deprecated-plan-label {
-  font-size: 0.7em;
-}
-
 .plans-table-element table {
   margin: 20px;
   border: 1px solid #eee;
@@ -2898,7 +2870,6 @@ p.editable:hover i {
   padding: 0px;
 }
 
-
 .plans-table ul li {
   padding: 4px;
   margin: 0px;

static/directives/plan-manager.html

@@ -23,6 +23,23 @@
     Free trial until <strong>{{ parseDate(subscription.trialEnd)  | date }}</strong>
   </div>
 
+  <!-- QE Shoutout -->
+  <div class="qe-shoutout hidden-xs hidden-sm">
+    <table>
+      <tr>
+        <td>
+          <img src="/static/img/QuayEnterprise_horizontal_color.svg">
+          <div class="shoutout-text">
+            Run a private instance of Quay, with the same build features and geo-replication. Fixed price for unlimited users and repositories.
+          </div>
+        </td>
+        <td>
+          <a href="/plans?tab=enterprise" class="btn btn-default">Learn More</a>
+        </td>
+      </tr>
+    </table>
+  </div>
+
   <!-- Chart -->
   <div class="usage-chart" total="subscribedPlan.privateRepos || 0"
        current="subscription.usedPrivateRepos || 0"

static/js/pages/repo-list.js

@@ -11,7 +11,7 @@
   }]);
 
 
-  function RepoListCtrl($scope, $sanitize, $q, Restangular, UserService, ApiService, CookieService) {
+  function RepoListCtrl($scope, $sanitize, $q, Restangular, UserService, ApiService, CookieService, Features) {
     $scope.namespace = null;
     $scope.page = 1;
     $scope.publicPageCount = null;
@@ -19,6 +19,7 @@
     $scope.loading = true;
     $scope.resources = [];
     $scope.showAsList = CookieService.get('quay.repoview') == 'list';
+    $scope.Features = Features;
 
     // When loading the UserService, if the user is logged in, create a list of
     // relevant namespaces and collect the relevant repositories.

static/partials/repo-list.html

@@ -48,6 +48,13 @@
           </li>
         </ul>
       </div>
+
+      <div class="co-main-content-panel qe-shoutout hidden-xs hidden-sm" ng-if="Features.BILLING">
+        <a href="/plans?tab=enterprise">
+          <span>Learn More <b>&gt;</b></span>
+          <div><img src="/static/img/QuayEnterprise_horizontal_color.svg"></div>
+        </a>
+      </div>
     </div>
 
     <div class="col-lg-9 col-lg-pull-3 col-md-9 col-md-pull-3 col-sm-12">