- Add a repo-circle directive and change all repo icons uses to it

- Have the repo-circle directive show the padlock in all places
- Mention SSL on the landing page and the pricing page

endpoints/api.py

@@ -202,10 +202,13 @@ def match_repos_api():
 @app.route('/api/repository/', methods=['GET'])
 def list_repos_api():
   def repo_view(repo_obj):
+    is_public = model.repository_is_public(repo_obj.namespace, repo_obj.name)
+
     return {
       'namespace': repo_obj.namespace,
       'name': repo_obj.name,
       'description': repo_obj.description,
+      'is_public': is_public
     }
 
   limit = request.args.get('limit', None)

static/css/quay.css

@@ -2,6 +2,45 @@
   font-family: 'Droid Sans', sans-serif;
 }
 
+.repo-circle {
+  position: relative;
+  background: #eee;
+  padding: 4px;
+  border-radius: 50%;
+  display: inline-block;
+  width: 46px;
+  height: 46px;
+  text-align: center;
+}
+
+.repo-circle.no-background {
+  background: transparent;
+  height: 40px;
+  width: 40px;
+}
+
+.repo-circle .icon-lock {
+  font-size: 50%;
+  position: absolute;
+  bottom: -6px;
+  right: 0px;
+  background: rgb(253, 191, 191);
+  width: 20px;
+  display: inline-block;
+  border-radius: 50%;
+  text-align: center;
+  height: 20px;
+  line-height: 21px;
+  font-size: 12px;
+}
+
+.repo-circle.no-background .icon-lock {
+  bottom: -4px;
+  right: -6px;
+  color: #444;
+}
+
+
 .description-overview {
   padding: 4px;
   font-size: 16px;
@@ -120,6 +159,11 @@
 .plans-list .plan .description {
   font-size: 1em;
   font-size: 16px;
+  margin-bottom: 10px;
+}
+
+.plans-list .plan .smaller {
+  font-size: 12px;
   margin-bottom: 30px;
 }
 
@@ -440,33 +484,11 @@ p.editable:hover i {
   margin-right: 6px;
 }
 
-.repo .header .icon-container {
-  position: relative;
-  background: #eee;
-  padding: 4px;
-  border-radius: 50%;
-  display: inline-block;
-  width: 46px;
-  height: 46px;
-  text-align: center;
+.repo .header .repo-circle {
   line-height: 38px;
   margin-right: 10px;
 }
 
-.repo .header .icon-container .icon-lock {
-  font-size: 50%;
-  position: absolute;
-  bottom: -6px;
-  right: 0px;
-  background: rgb(253, 191, 191);
-  width: 20px;
-  display: inline-block;
-  border-radius: 50%;
-  text-align: center;
-  height: 20px;
-  line-height: 21px;
-}
-
 .repo .description {
   margin-bottom: 40px;
 }
@@ -645,8 +667,7 @@ p.editable:hover i {
 }
 
 .repo-listing .description {
-  margin-top: 6px;
-  padding-left: 36px;
+  padding-left: 44px;
 }
 
 .repo-admin .token-dialog-body .well {

static/directives/repo-circle.html

@@ -0,0 +1,2 @@
+<i class="icon-lock icon-large" style="{{ repo.is_public ? 'visibility: hidden' : 'visibility: visible' }}" title="Private Repository"></i>
+<i class="icon-hdd icon-large"></i>

static/js/app.js

@@ -165,6 +165,23 @@ quayApp = angular.module('quay', ['restangular', 'angularMoment', 'angulartics',
     RestangularProvider.setBaseUrl('/api/');
   });
 
+quayApp.directive('repoCircle', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/repo-circle.html',
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {
+      'repo': '=repo'
+    },
+    controller: function($scope, $element) {
+        window.console.log($scope);
+    }
+  };
+  return directiveDefinitionObject;
+});
+
 quayApp.run(['$location', '$rootScope', function($location, $rootScope) {
   $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
     if (current.$$route.title) {

static/partials/landing.html

@@ -15,7 +15,7 @@
           <div ng-show="!loadingmyrepos && myrepos.length > 0">
             <h2>Your Top Repositories</h2>      
             <div class="repo-listing" ng-repeat="repository in myrepos">
-              <i class="icon-hdd icon-large"></i>
+              <span class="repo-circle no-background" repo="repository"></span>
               <a ng-href="/repository/{{ repository.namespace }}/{{ repository.name }}">{{repository.namespace}}/{{repository.name}}</a>
               <div class="description" ng-bind-html-unsafe="getCommentFirstLine(repository.description)"></div>
             </div>
@@ -71,8 +71,8 @@
         <i class="icon-lock"></i>
         <b>Secure</b>
         <span class="shoutout-expand">
-	  Store your private docker containers securely where only you and your team
-          can access it
+	  Store your private docker containers where only you and your team
+          can access it, with communication secured by <strong>SSL at all times</strong>
 	</span>
       </div>
 

static/partials/plans.html

@@ -13,6 +13,7 @@
       <div class="plan-price">${{ plan.price/100 }}</div>
       <div class="count"><b>{{ plan.privateRepos }}</b> private repositories</div>
       <div class="description">{{ plan.audience }}</div>
+      <div class="smaller">SSL secured connections</div>
 
       <button class="btn btn-primary btn-block" ng-click="buyNow(plan.stripeId)">Sign Up Now</button>
     </div>
@@ -23,6 +24,10 @@
       <dl>
         <dt>Can I use Quay for free?</dt>
         <dd>Yes! We offer unlimited storage and serving of public repositories. We strongly believe in the open source community and will do what we can to help!</dd>
+
+        <dt>Does my plan have secure communication?</dt>
+        <dd>Yes! All plans provide <b>secure</b> communication to and from Quay via <b>SSL</b>.</dd>
+
         <dt>What types of payment do you accept?</dt>
         <dd>Quay uses Stripe as our payment processor, so we can accept any of the payment options they offer, which are currently: Visa, MasterCard, American Express, JCB, Discover and Diners Club.</dd>
       </dl>

static/partials/repo-admin.html

@@ -10,7 +10,7 @@
   <div class="header">
     <a href="{{ '/repository/' + repo.namespace + '/' + repo.name }}" class="back"><i class="icon-chevron-left"></i></a>
     <h3>
-      <i class="icon-hdd icon-large"></i> <span style="color: #aaa;"> {{repo.namespace}}</span> <span style="color: #ccc">/</span> {{repo.name}}
+      <span class="repo-circle no-background" repo="repo"></span> <span style="color: #aaa;"> {{repo.namespace}}</span> <span style="color: #ccc">/</span> {{repo.name}}
     </h3>
    </div>
   

static/partials/repo-list.html

@@ -7,7 +7,7 @@
     <h3>Your Repositories</h3>
     <div ng-show="private_repositories.length > 0">
       <div class="repo-listing" ng-repeat="repository in private_repositories">
-        <i class="icon-hdd icon-large"></i>
+        <span class="repo-circle no-background" repo="repository"></span>
         <a ng-href="/repository/{{repository.namespace}}/{{ repository.name }}">{{repository.namespace}}/{{repository.name}}</a>
         <div class="description" ng-bind-html-unsafe="getCommentFirstLine(repository.description)"></div>
       </div>
@@ -25,7 +25,7 @@
   <div class="repo-list">
     <h3>Top Public Repositories</h3>
     <div class="repo-listing" ng-repeat="repository in public_repositories">
-      <i class="icon-hdd icon-large"></i>
+      <span class="repo-circle no-background" repo="repository"></span>
       <a ng-href="/repository/{{repository.namespace}}/{{ repository.name }}">{{repository.namespace}}/{{repository.name}}</a>
       <div class="description" ng-bind-html-unsafe="getCommentFirstLine(repository.description)"></div>
     </div>

static/partials/view-repo.html

@@ -10,10 +10,7 @@
   <!-- Repo Header -->
   <div class="header">
     <h3>
-      <span class="icon-container">
-        <i class="icon-lock icon-large" ng-show="!repo.is_public" title="Private Repository"></i>
-        <i class="icon-hdd icon-large"></i>
-      </span>
+      <span class="repo-circle" repo="repo"></span>
 
       <span style="color: #aaa;"> {{repo.namespace}}</span> <span style="color: #ccc">/</span> {{repo.name}}