vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge pull request #253 from coreos-inc/uiimp

Browse source 
Small set of UI improvements
This commit is contained in:
Jimmy Zelinskie 2015-07-21 16:52:41 -07:00
commit 7311f2e600
4 changed files with 96 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
static/css/directives/ui/strength-indicator.css
View file

@ -1,42 +1,71 @@
.strength-indicator {
display: inline-block;
}
.strength-indicator .indicator-sliver { .strength-indicator .indicator-sliver {
margin: 1px; display: inline-block;
width: 14px; margin: 0px;
height: 3px; margin-right: 2px;
width: 4px;
border: 1px solid #D5D5D5; border: 1px solid #D5D5D5;
transition: 0.5s ease; transition: 0.5s ease;
} }
.strength-indicator .strength-indicator-element.good .indicator-sliver { .strength-indicator .strength-indicator-element .indicator-sliver:nth-child(1) {
background: green; height: 10px;
border: 1px solid green;
} }
.strength-indicator .strength-indicator-element .indicator-sliver:nth-child(2) {
height: 14px;
}
.strength-indicator .strength-indicator-element .indicator-sliver:nth-child(3) {
height: 18px;
}
.strength-indicator .strength-indicator-element .indicator-sliver:nth-child(4) {
height: 22px;
}
/** Good */
.strength-indicator .strength-indicator-element.good .indicator-sliver {
background: #83D29C;
border-color: #83D29C;
}
/** Fair */
.strength-indicator .strength-indicator-element.fair .indicator-sliver { .strength-indicator .strength-indicator-element.fair .indicator-sliver {
background: orange; background: #E4C212;
border: 1px solid orange; border-color: #E4C212;
} }
.strength-indicator .strength-indicator-element.fair .indicator-sliver:last-child { .strength-indicator .strength-indicator-element.fair .indicator-sliver:last-child {
border: 1px solid #D5D5D5;
background: transparent; background: transparent;
border-color: #D5D5D5;
} }
/** Bairly */
.strength-indicator .strength-indicator-element.barely .indicator-sliver { .strength-indicator .strength-indicator-element.barely .indicator-sliver {
background: rgb(255, 61, 0); background: rgb(255, 155, 0);
border: 1px solid rgb(255, 61, 0); border-color: rgb(255, 155, 0);
} }
.strength-indicator .strength-indicator-element.barely .indicator-sliver:last-child { .strength-indicator .strength-indicator-element.barely .indicator-sliver:last-child {
border: 1px solid #D5D5D5;
background: transparent; background: transparent;
border-color: #D5D5D5;
} }
.strength-indicator .strength-indicator-element.barely .indicator-sliver:nth-child(3) { .strength-indicator .strength-indicator-element.barely .indicator-sliver:nth-child(3) {
border: 1px solid #D5D5D5;
background: transparent; background: transparent;
border-color: #D5D5D5;
} }
/** Poor */
.strength-indicator .strength-indicator-element.poor .indicator-sliver:first-child { .strength-indicator .strength-indicator-element.poor .indicator-sliver:first-child {
border: 1px solid red;
background: red; background: red;
border-color: red;
} }

2
static/directives/repo-list-grid.html
View file

@ -51,7 +51,7 @@
</div> </div>
<div ng-if="!starred && repositoriesResource.value.length == 0"> <div ng-if="!starred && repositoriesResource.value.length == 0">
<div class="empty-primary-msg">This namespace doesn't have any viewable repositories.</div> <div class="empty-primary-msg">This namespace doesn't have any viewable repositories.</div>
<div class="empty-secondary-msg">Either no repositories exist yet or you may not have permission to view any. If you have permission, try <a href="/new">creating a new repository</a>.</div> <div class="empty-secondary-msg">Either no repositories exist yet or you may not have permission to view any. If you have permission, try <a href="/new?namespace={{ namespace.name }}">creating a new repository</a>.</div>
</div> </div>
</div> </div>

97
static/directives/repo-list-table.html
View file

@ -1,49 +1,54 @@
<div class="repo-list-table-element"> <div class="repo-list-table-element">
<table class="co-table"> <div ng-if="orderedRepositories.length== 0">
<thead> <div class="empty-primary-msg">You do not have any viewable repositories.</div>
<td class="hidden-xs" <div class="empty-secondary-msg">Either no repositories exist yet or you may not have permission to view any. If you have permission, try <a href="/new">creating a new repository</a>.</div>
ng-class="tablePredicateClass('full_name', options.predicate, options.reverse)"> </div>
<a href="javascript:void(0)" ng-click="orderBy('full_name')">Repository Name</a>
</td>
<td class="hidden-xs"
ng-class="tablePredicateClass('last_modified_datetime', options.predicate, options.reverse)"
style="min-width: 120px;">
<a href="javascript:void(0)" ng-click="orderBy('last_modified_datetime')">Last Modified</a>
</td>
<td class="hidden-xs"
ng-class="tablePredicateClass('popularity', options.predicate, options.reverse)"
style="min-width: 20px;">
<a href="javascript:void(0)" ng-click="orderBy('popularity')">Activity</a>
</td>
<td class="hidden-xs"
ng-class="tablePredicateClass('is_starred', options.predicate, options.reverse)"
style="width: 70px">
<a href="javascript:void(0)" ng-click="orderBy('is_starred')">Star</a>
</td>
</thead>
<tbody> <table class="co-table" ng-if="orderedRepositories.length">
<tr ng-repeat="repository in orderedRepositories"> <thead>
<td class="repo-name-icon"> <td class="hidden-xs"
<span class="avatar" size="24" data="getAvatarData(repository.namespace)"></span> ng-class="tablePredicateClass('full_name', options.predicate, options.reverse)">
<a href="/repository/{{ repository.namespace }}/{{ repository.name }}"> <a href="javascript:void(0)" ng-click="orderBy('full_name')">Repository Name</a>
<span class="namespace">{{ repository.namespace }}</span> </td>
<span class="name">{{ repository.name }}</span> <td class="hidden-xs"
</a> ng-class="tablePredicateClass('last_modified_datetime', options.predicate, options.reverse)"
</td> style="min-width: 120px;">
<td class="last-modified"> <a href="javascript:void(0)" ng-click="orderBy('last_modified_datetime')">Last Modified</a>
<span ng-if="repository.last_modified"> </td>
{{ repository.last_modified * 1000 | amCalendar }} <td class="hidden-xs"
</span> ng-class="tablePredicateClass('popularity', options.predicate, options.reverse)"
<span class="empty" ng-if="!repository.last_modified">(Empty Repository)</span> style="min-width: 20px;">
</td> <a href="javascript:void(0)" ng-click="orderBy('popularity')">Activity</a>
<td class="popularity hidden-xs"> </td>
<span class="strength-indicator" value="repository.popularity" maximum="maxPopularity"></span> <td class="hidden-xs"
</td> ng-class="tablePredicateClass('is_starred', options.predicate, options.reverse)"
<td> style="width: 70px">
<span class="repo-star" repository="repository" <a href="javascript:void(0)" ng-click="orderBy('is_starred')">Star</a>
star-toggled="starToggled({'repository': repository})"></span></td> </td>
</tr> </thead>
</tbody>
</table> <tbody>
<tr ng-repeat="repository in orderedRepositories">
<td class="repo-name-icon">
<span class="avatar" size="24" data="getAvatarData(repository.namespace)"></span>
<a href="/repository/{{ repository.namespace }}/{{ repository.name }}">
<span class="namespace">{{ repository.namespace }}</span>
<span class="name">{{ repository.name }}</span>
</a>
</td>
<td class="last-modified">
<span ng-if="repository.last_modified">
{{ repository.last_modified * 1000 | amCalendar }}
</span>
<span class="empty" ng-if="!repository.last_modified">(Empty Repository)</span>
</td>
<td class="popularity hidden-xs">
<span class="strength-indicator" value="repository.popularity" maximum="maxPopularity"></span>
</td>
<td>
<span class="repo-star" repository="repository"
star-toggled="starToggled({'repository': repository})"></span></td>
</tr>
</tbody>
</table>
</div> </div>

5
static/directives/strength-indicator.html
View file

@ -1,6 +1,3 @@
<span class="strength-indicator-element" ng-class="strengthClass"> <span class="strength-indicator-element" ng-class="strengthClass">
<span class="indicator-sliver"></span> <span class="indicator-sliver"></span><span class="indicator-sliver"></span><span class="indicator-sliver"></span><span class="indicator-sliver"></span>
<span class="indicator-sliver"></span>
<span class="indicator-sliver"></span>
<span class="indicator-sliver"></span>
</span> </span>