continued styling

cmd/drone-server/static/scripts/controllers/repos.js

@@ -4,9 +4,13 @@
    * ReposCtrl responsible for rendering the user's
    * repository home screen.
    */
-  function ReposCtrl($scope, $stateParams, repos, users) {
+  function ReposCtrl($scope, $location, $stateParams, repos, users) {
+    $scope.loading = true;
+    $scope.waiting = false;
+
     // Gets the currently authenticated user
     users.getCached().then(function (payload) {
+      $scope.loading = false;
       $scope.user = payload.data;
     });
 
@@ -17,6 +21,24 @@
     }).catch(function (err) {
       $scope.error = err;
     });
+
+    // Adds a repository
+    $scope.add = function (event, fullName) {
+      $scope.error = undefined;
+      if (event.which && event.which !== 13) {
+        return;
+      }
+      $scope.waiting = true;
+
+      repos.post(fullName).then(function (payload) {
+        $location.path('/' + fullName);
+        $scope.waiting = false;
+      }).catch(function (err) {
+        $scope.error = err;
+        $scope.waiting = false;
+        $scope.search_text = undefined;
+      });
+    }
   }
 
   /**

cmd/drone-server/static/scripts/controllers/users.js

@@ -42,20 +42,35 @@
 	 * This part of the site is for administrators only.
 	 */
 	function UsersCtrl($scope, users) {
+	    $scope.loading = true;
+	    $scope.waiting = false;
+
 		// Gets the currently authenticated user
 		users.getCached().then(function(payload){
 			$scope.user = payload.data;
 		});
 
+		// Gets the list of all system users
 		users.list().then(function(payload){
+	    	$scope.loading = true;
 			$scope.users = payload.data;
 		});
 
-		$scope.login="";
+		$scope.add = function(event, login) {
-		$scope.add = function(login) {
+			$scope.error = undefined;
+			if (event.which && event.which !== 13) {
+				return;
+			}
+			$scope.waiting = true;
+
 			users.post(login).then(function(payload){
 				$scope.users.push(payload.data);
-				$scope.login="";
+				$scope.search_text=undefined;
+				$scope.waiting = false;
+			}).catch(function (err) {
+				$scope.error = err;
+				$scope.waiting = false;
+				$scope.search_text = undefined;
 			});
 		}
 

cmd/drone-server/static/scripts/views/builds/index/content.html

@@ -16,6 +16,16 @@
       </menu> 
     </section>
 
+    <div class="blankslate" ng-show="!builds.length && !loading && !error">
+      <i class="material-icons">settings_ethernet</i>
+      <span>Push code to execute your first build.<br/>Be sure to configure you build using the <em>.drone.yml</em> file.</span>
+    </div>
+
+    <div class="alert alert-error" ng-show="!!error">
+      <i class="material-icons">error_outline</i>
+      <span>There was an error fetching the build history.</span>
+    </div>
+
     <div>
       <div class="list">
         <a ng-repeat="build in builds | orderBy:'-number'" ng-href="/{{ repo.full_name }}/{{ build.number}}">

cmd/drone-server/static/scripts/views/repos/edit.html

@@ -1,7 +1,6 @@
 <main>
 <article>
-  <section>
+  <section  style="margin-top:20px;">
-    <h2>Settings</h2>
 
     <div class="row">
       <div>Post Commit Hooks</div>
@@ -18,6 +17,42 @@
         <label for="pull_requests" class="switch"></label>
       </div>
     </div>
+    <div class="row" ng-if="user.admin">
+      <div>Trusted Code</div>
+      <div>
+        <input id="trusted" type="checkbox" hidden="hidden" ng-model="repo.trusted" ng-change="save(repo)"/>
+        <label for="trusted" class="switch"></label>
+      </div>
+    </div>
+    <div class="row" ng-if="user.admin">
+      <div>Timeout in minutes</div>
+      <div>
+        <input type="range" ng-model="repo.timeout" min="0" max="900" ng-blur="save(repo)"/>
+        <span class="slider-label">{{ repo.timeout }} minutes</span>
+      </div>
+    </div>
+    <div class="row">
+      <div>Badge</div>
+      <div>
+        <pre class="snippet">[![Build Status]({{ window.location.origin }}/api/badges/{{ repo.full_name }}/status.svg)]({{ window.location.origin }}/{{ repo.full_name }})</pre>
+      </div>
+    </div>
+    <div class="row">
+      <div>CCMenu</div>
+      <div>
+        <pre class="snippet">{{ window.location.origin }}/api/badges/{{ repo.full_name }}/cc.xml</pre>
+      </div>
+    </div>
+    <div class="row">
+      <div>Public Key</div>
+      <div>
+        <pre class="snippet">{{ repo.keypair.public }}</pre>
+      </div>
+    </div>
+  </section>
+
+  <p style="margin-top:50px;margin-bottom:10px;line-height:20px;color:#666;"><b style="font-weight:bold;">NOTE:</b> The below sections should re-architected and are therefore not styled. The delete page should be combined with this current page. Secret variables should be stored in the .drone.yml instead of the user interface</p>
+  <section>
     <a class="row" ng-href="{{ repo.full_name }}/edit/env">
       <div>Private Variables</div>
       <div>
@@ -30,48 +65,5 @@
     </a>
   </section>
 
-  <section ng-if="user.admin">
-    <h2>Admin settings</h2>
-
-    <div class="row">
-      <div>Trusted (Evelvate Privilege)</div>
-      <div>
-        <input id="trusted" type="checkbox" hidden="hidden" ng-model="repo.trusted" ng-change="save(repo)"/>
-        <label for="trusted" class="switch"></label>
-      </div>
-    </div>
-    <div class="row">
-      <div>Timeout in minutes</div>
-      <div>
-        <input type="range" ng-model="repo.timeout" min="0" max="900" ng-blur="save(repo)"/>
-        <span class="slider-label">{{ repo.timeout }} minutes</span>
-      </div>
-    </div>
-  </section>
-
-  <section>
-    <h2>Badges</h2>
-
-    <div class="row">
-      <div>Markdown</div>
-      <div>
-        <pre class="snippet">[![Build Status]({{ window.location.origin }}/api/badges/{{ repo.full_name }}/status.svg)]({{ window.location.origin }}/{{ repo.full_name }})</pre>
-      </div>
-    </div>
-    <div class="row">
-      <div>CCMenu</div>
-      <div>
-        <pre class="snippet">{{ window.location.origin }}/api/badges/{{ repo.full_name }}/cc.xml</pre>
-      </div>
-    </div>
-  </section>
-
-  <section>
-    <h2>Public Key</h2>
-
-    <div>
-      <pre class="snippet snippet-padding">{{ repo.keypair.public }}</pre>
-    </div>
-  </section>
 </article>
 </main>

cmd/drone-server/static/scripts/views/repos/index/content.html

@@ -2,13 +2,31 @@
   <article>
 
     <section class="search">
-      <input type="search" spellcheck="false" placeholder="Create or find a repository" ng-model="login" />
+      <input type="search" spellcheck="false" placeholder="Create or find a repository (e.g. octocat/Hello-World)" ng-model="search_text" ng-keypress="add($event, search_text)"/>
     </section>
 
-    <ul class="list cozy">
+    <div class="blankslate" ng-show="!repos.length && !loading && !search_text && !error">
+      <i class="material-icons">control_point_duplicate</i>
+      <span>Get started by adding your repository.<br/>Just type the repository name in the text box above.</span>
+    </div>
+
+    <div class="alert alert-create-not-found" ng-show="!!search_text">
+      <i class="material-icons" ng-show="!waiting">control_point_duplicate</i>
+      <i class="material-icons waiting" ng-show="waiting">refresh</i>
+      <span ng-show="!waiting">Press &lt;enter&gt; to add <em>{{search_text}}</em></span>
+      <span ng-show="waiting">Configuring repository <em>{{search_text}}</em></span>
+    </div>
+
+    <div class="alert alert-error" ng-show="!!error">
+      <i class="material-icons">error_outline</i>
+      <span>There was an error adding your repository.<br/>Please ensure the
+      repository exists and you have admin privileges.</span>
+    </div>
+
+    <ul class="list cozy" ng-show="!waiting && !error">
       <a class="row row-repo" ng-repeat="repo in repos" ng-href="/{{ repo.full_name }}">
         <div class="column-avatar">
-          <img ng-src="{{ repo.gravatar_id | gravatar }}" />
+          <img ng-src="https://avatars1.githubusercontent.com/u/2181346" />
         </div>
         <div class="column-fill">
           <h2>{{ repo.name }}</h2>

cmd/drone-server/static/scripts/views/users/content.html

@@ -2,9 +2,20 @@
   <article>
 
     <section class="search">
-      <input type="search" spellcheck="false" placeholder="Create or find a user" ng-model="login" />
+      <input type="search" spellcheck="false" placeholder="Create or find a user" ng-model="search_text" ng-keypress="add($event, search_text)" />
     </section>
 
+    <div class="blankslate" ng-show="users.length === 1 && !search_text && !waiting">
+      <i class="material-icons">control_point_duplicate</i>
+      <span>Get started by adding a user.<br/>Just type the user login (ie octocat) in the text box above.</span>
+    </div>
+
+    <div class="alert alert-create-not-found" ng-show="!!search_text">
+      <i class="material-icons" ng-show="!waiting">control_point_duplicate</i>
+      <i class="material-icons waiting" ng-show="!!waiting">sync</i>
+      <span>Press &lt;enter&gt; to add <em>{{search_text}}</em></span>
+    </div>
+
     <ul class="list cozy">
       <li class="row row-user" ng-repeat="user in users">
         <div class="column-avatar">

cmd/drone-server/static/styles/alert.css

@@ -22,14 +22,15 @@
 .alert-error {
     background: #bf616a;
     color: #fff;
+    line-height:24px;
 }
 .alert-create-not-found {
     color: rgba(255,255,255,0.95);
-    background:#ebcb8b;
+    background:#59abe3;
+    background: #8fa1b3;
     outline:none;
     border:none;
     width:100%;
-    cursor: pointer;
     font-family: Roboto;
 }
 .alert-error em,
@@ -40,9 +41,43 @@
     margin-left:10px;
 }
 
-/* I'm not sure at the moment if we want
+@-webkit-keyframes delayed-rotate {
- * to display these icons or not
+    0% {
- */
+    -webkit-transform: rotate(0deg);
-.alert-create-not-found i.material-icons {
+    }
-    display:none;
+    100% { 
+    -webkit-transform: rotate(360deg);
+    }
+}
+@-moz-keyframes delayed-rotate {
+    0% {
+    -moz-transform: rotate(0deg);
+    }
+    100% { 
+    -moz-transform: rotate(360deg);
+    }
+}
+@keyframes delayed-rotate {
+    0% {
+    transform: rotate(0deg);
+    }
+    100% { 
+    transform: rotate(360deg);
+    }
+}
+.waiting {
+    -webkit-animation-name:             delayed-rotate; 
+    -webkit-animation-duration:         1s; 
+    -webkit-animation-iteration-count:  infinite;
+    -webkit-animation-timing-function:  ease-in-out;
+
+    -moz-animation-name:             delayed-rotate; 
+    -moz-animation-duration:         1s; 
+    -moz-animation-iteration-count:  infinite;
+    -moz-animation-timing-function:  ease-in-out;
+
+    animation-name:             delayed-rotate; 
+    animation-duration:         1s; 
+    animation-iteration-count:  infinite;
+    animation-timing-function:  ease-in-out;
 }

cmd/drone-server/static/styles/blankslate.css

@@ -1,9 +1,12 @@
 .blankslate {
     padding: 40px 20px;
-    background-color: #eff1f5;
+    background-color: #59abe3;
-    color: #303030;
+    background-color: #8fa1b3;
+    color: #fff;
     text-align: center;
-    font-size: 16px;
+    font-size: 18px;
+    line-height:28px;
+    margin-bottom:30px;
 }
 .blankslate.clean-background {
 
@@ -11,3 +14,10 @@
 .blankslate.spacious {
 
 }
+.blankslate i.material-icons {
+    font-size: 42px;
+    display: block;
+    text-align: center;
+    width: 100%;
+    margin-bottom: 20px;
+}

cmd/drone-server/static/styles/fonts.css

@@ -1,3 +1,3 @@
 @import url(//fonts.googleapis.com/css?family=Roboto:400,300,500,700);
-@import url(//fonts.googleapis.com/css?family=Roboto+Mono:400,300,500);
+@import url(//fonts.googleapis.com/css?family=Roboto+Mono:300,400,500);
 @import url(//fonts.googleapis.com/icon?family=Material+Icons);

cmd/drone-server/static/styles/main.css

@@ -164,7 +164,7 @@ main aside > div {
     box-sizing: border-box;
     padding:35px 40px;
     line-height:18px;
-    font-family: "RobotoMono";
+    font-family: "RobotoMono", Roboto+Mono, Roboto;
     font-size:12px;
     font-weight:300;
 }
@@ -506,8 +506,11 @@ input[type="search"] {
 section .row {
     display: flex;
     position: relative;
+    text-decoration: none;
+}
+section .row a {
+    text-decoration: none;
 }
-
 section .row > div:first-child {
     padding: 30px 0px;
     border-bottom: 1px solid #f0f4f7;
@@ -537,7 +540,7 @@ pre.snippet {
     word-wrap: break-word;
     font-size: 13px;
     line-height: 18px;
-    font-family: "RobotoMono";
+    font-family: "Roboto Mono";
 }
 .slider-label {
     display: inline-block;