continued styling

This commit is contained in:
Brad Rydzewski 2015-07-29 19:51:55 -07:00
parent f1a9058191
commit 647831bc85
10 changed files with 183 additions and 67 deletions

View file

@ -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;
});
}
}
/**

View file

@ -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(login) {
$scope.add = function(event, 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;
});
}

View file

@ -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}}">

View file

@ -1,7 +1,6 @@
<main>
<article>
<section>
<h2>Settings</h2>
<section style="margin-top:20px;">
<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>

View file

@ -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>

View file

@ -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">

View file

@ -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
* to display these icons or not
*/
.alert-create-not-found i.material-icons {
display:none;
@-webkit-keyframes delayed-rotate {
0% {
-webkit-transform: rotate(0deg);
}
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;
}

View file

@ -1,9 +1,12 @@
.blankslate {
padding: 40px 20px;
background-color: #eff1f5;
color: #303030;
background-color: #59abe3;
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;
}

View file

@ -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);

View file

@ -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;