Prevent change visibility of a repo in the UI when disallowed by billing plan

Fixes #486

- Extracts out the check plan logic and UI from the new repo page into its own directive (repo-count-checker)
- Adds the new directive to the repo settings panel
- Some additional UI improvements for the repo settings panel

static/directives/repo-view/repo-panel-settings.html

@@ -22,12 +22,10 @@
     <div class="repository-events-table" repository="repository"
          is-enabled="isEnabled"></div>
 
-    <!-- Other settings -->
+    <!-- Visibility settings -->
     <div class="co-panel">
-      <div class="co-panel-heading"><i class="fa fa-gears"></i> Repository Settings</div>
-
+      <div class="co-panel-heading"><i class="fa fa-unlock-alt"></i> Repository Visibility</div>
       <div class="cor-loader" ng-show="!repository"></div>
-
       <div ng-show="repository">
         <!-- Public/Private -->
         <div class="panel-body panel-section lock-section" ng-if="!repository.is_public">
@@ -44,12 +42,23 @@
 
           <div>This repository is currently <b>public</b> and is visible to all users, and may be pulled by all users.</div>
 
-          <button class="btn btn-default" ng-click="askChangeAccess('private')">
+          <button class="btn btn-default" ng-click="askChangeAccess('private')" ng-show="!planRequired">
             <i class="fa fa-lock"></i>Make Private
           </button>
-        </div>
 
-        <!-- Delete Repository -->
+          <!-- Payment -->
+          <div class="repo-count-checker" namespace="repository.namespace" plan-required="planRequired"
+               is-enabled="repository.is_public">
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Delete repository -->
+    <div class="co-panel">
+      <div class="co-panel-heading"><i class="fa fa-trash"></i> Delete Repository</div>
+      <div class="cor-loader" ng-show="!repository"></div>
+      <div ng-show="repository">
         <div class="panel-body panel-section">
           <div class="co-alert co-alert-danger">
             <button class="btn btn-danger delete-btn" ng-click="askDelete()">
@@ -60,10 +69,16 @@
             Deleting a repository <b>cannot be undone</b>. Here be dragons!
           </div>
         </div>
+      </div>
+    </div>
 
-        <!-- Build Status Badge -->
-        <div class="panel-body panel-section hidden-xs">
 
+    <!-- Build Status Badge -->
+    <div class="co-panel hidden-xs">
+      <div class="co-panel-heading"><i class="fa fa-tasks"></i> Build Status Badge</div>
+      <div class="cor-loader" ng-show="!repository"></div>
+      <div ng-show="repository">
+        <div class="panel-body panel-section">
           <!-- Token Info Banner -->
           <div class="co-alert co-alert-info" ng-if="!repository.is_public">
              Note: This badge contains a token so the badge can be seen by external users. The token does not grant any other access and is safe to share!