continued styling
This commit is contained in:
parent
f1a9058191
commit
647831bc85
10 changed files with 183 additions and 67 deletions
|
@ -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;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -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}}">
|
||||
|
|
|
@ -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>
|
|
@ -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 <enter> 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>
|
||||
|
|
|
@ -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 <enter> 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">
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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);
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue