Initial redesigned UI for repo listings w/ stars.

This commit is contained in:
Jimmy Zelinskie 2014-12-11 15:06:30 -05:00
parent 97b605ca8d
commit 5a484cfe11
10 changed files with 308 additions and 103 deletions

View file

@ -1,73 +1,136 @@
<div class="container">
<div class="repo-list" ng-show="!user.anonymous">
<div ng-class="user.organizations.length ? 'section-header' : ''">
<div class="button-bar-right">
<a href="/new/">
<button class="btn btn-success">
<i class="fa fa-upload user-tool" data-title="Create new repository"></i>
Create Repository
</button>
</a>
<a href="/organization/{{ namespace }}" ng-show="namespace != user.username">
<button class="btn btn-default">
<i class="fa fa-group user-tool"></i>
View Organization
</button>
<div class="row">
<div class="col-lg-3 col-lg-push-9 col-md-3 col-md-push-9 col-sm-4 col-sm-push-8 col-xs-12">
<div class="button-bar-right">
<a href="/new/">
<button class="btn btn-success">
<i class="fa fa-upload user-tool" data-title="Create new repository"></i>
Create Repository
</button>
</a>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Users
</div>
<div class="panel-body">
<a href="javascript:void(0)">
<span class="avatar" size="24" hash="user.avatar"></span>
{{ user.username }}
</a>
</div>
<span class="namespace-selector" user="user" namespace="namespace" ng-show="user.organizations"></span>
</div>
<h3 ng-show="namespace == user.username">Your Repositories</h3>
<h3 ng-show="namespace != user.username">Repositories</h3>
<div class="resource-view" resource="user_repositories">
<!-- User/Org has repositories -->
<div ng-show="user_repositories.value.length > 0">
<div class="repo-listing" ng-repeat="repository in user_repositories.value">
<span class="repo-circle no-background" repo="repository"></span>
<a ng-href="/repository/{{repository.namespace}}/{{ repository.name }}"
data-repo="{{repository.namespace}}/{{ repository.name }}">
{{repository.namespace}}/{{repository.name}}
<div class="panel panel-default">
<div class="panel-heading">
Organizations
</div>
<div class="panel-body">
<div ng-repeat="org in user.organizations">
<a href="/organization/{{ org.name }}">
<span class="avatar" size="24" hash="org.avatar"></span>
{{ org.name }}
</a>
<a href="/organization/{{ org.name }}/admin">
<i class="fa fa-gear" style="color:#000"></i>
</a>
<div class="description markdown-view" content="repository.description" first-line-only="true"></div>
</div>
</div>
<!-- User/Org has no repositories -->
<div ng-show="user_repositories.value.length == 0" style="padding:20px;">
<div class="alert alert-info">
<h4 ng-show="namespace == user.username">You don't have any repositories yet!</h4>
<h4 ng-show="namespace != user.username">This organization doesn't have any repositories, or you have not been provided access.</h4>
<a href="http://docs.quay.io/solution/getting-started.html"><b>Click here</b> to learn how to create a repository</a>
</div>
</div>
</div>
</div>
<div class="repo-list">
<h3>Top Public Repositories</h3>
<div class="resource-view" resource="public_repositories">
<div class="repo-listing" ng-repeat="repository in public_repositories.value">
<span class="repo-circle no-background" repo="repository"></span>
<a ng-href="/repository/{{repository.namespace}}/{{ repository.name }}"
data-repo="{{repository.namespace}}/{{ repository.name }}">
{{repository.namespace}}/{{repository.name}}
</a>
<div class="description markdown-view" content="repository.description" first-line-only="true"></div>
<div class="col-lg-9 col-lg-pull-3 col-md-9 col-md-pull-3 col-sm-8 col-sm-pull-4 col-xs-12">
<div class="resource-view" resource="starred_repositories">
<div class="repo-listing">
<div class="repo-list-title">
<i class="fa fa-star"></i>
Starred
</div>
<div>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12" ng-repeat="repository in starred_repositories.value">
<div class="panel panel-default">
<div class="panel-body starred">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<span class="repo-icon repo-circle no-background" repo="repository"></span>
<a ng-href="/repository/{{repository.namespace}}/{{ repository.name }}" class="repo-panel-repo-link"
data-repo="{{repository.namespace}}/{{ repository.name }}">
{{repository.namespace}}/{{repository.name}}
</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<i class="star-icon starred fa fa-star" ng-click="unstarRepo(repository)"></i>
</div>
</div>
<!-- The description automatically gets put in a <p> which adds margin that throws off our .repo-panel padding -->
<div class="description markdown-view" content="repository.description" first-line-only="true"></div>
</div>
</div>
</div>
</div>
<div ng-show="starred_repositories.value.length == 0">
<div class="empty-primary-msg">You haven't starred any repositories yet.</div>
<div class="empty-secondary-msg">Stars allow you to easily access your favorite repositories.</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<hr>
</div>
</div>
</div>
</div>
<div class="page-controls">
<button class="btn btn-default" data-title="Previous Page" bs-tooltip="title" ng-show="page > 1"
ng-click="movePublicPage(-1)">
<i class="fa fa-chevron-left"></i>
</button>
<button class="btn btn-default" data-title="Next Page" bs-tooltip="title" ng-show="page < publicPageCount"
ng-click="movePublicPage(1)">
<i class="fa fa-chevron-right"></i>
</button>
</div>
<!-- Repo listings for User and Orgs -->
<div ng-repeat="namespace in namespaces">
<div class="resource-view" resource="namespace">
<div class="repo-listing">
<div class="repo-list-title" ng-show="user.username == namespace.username">
<i class="fa fa-user"></i>
{{ namespace.username }}
</div>
<div class="repo-list-title" ng-show="user.username != namespace.username">
<i class="fa fa-sitemap"></i>
<a href="/organization/{{ namespace.name }}">{{ namespace.name }}</a>
</div>
<div ng-show="namespace.repositories.value.length > 0">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12" ng-repeat="repository in namespace.repositories.value">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<span class="repo-icon repo-circle no-background" repo="repository"></span>
<a ng-href="/repository/{{repository.namespace}}/{{ repository.name }}" class="repo-panel-repo-link"
data-repo="{{repository.namespace}}/{{ repository.name }}">
{{repository.namespace}}/{{repository.name}}
</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<i class="star-icon fa fa-star-o" ng-click="starRepo(repository)"></i>
</div>
</div>
<!-- The description automatically gets put in a <p> which adds margin that throws off our .repo-panel padding -->
<div class="description markdown-view" content="repository.description" first-line-only="true"></div>
</div>
</div>
</div>
<div ng-show="namespace.value.length == 0">
<div class="empty-primary-msg">There aren't any repositories yet.</div>
<div class="empty-secondary-msg">This origanization does't have any repositories, or you have not been provided access. <a href="/new">Create a new repository</a>
</div>
<!-- User/Org has no repositories -->
<div ng-show="namespace.repositories.value.length == 0" style="padding:20px;">
<div class="alert alert-info">
<h4 ng-show="namespace == user.username">You don't have any repositories yet!</h4>
<h4 ng-show="namespace != user.username">This organization doesn't have any repositories, or you have not been provided access.</h4>
<a href="http://docs.quay.io/solution/getting-started.html"><b>Click here</b> to learn how to create a repository</a>
</div>
</div>
</div>
</div>
</div>
<hr>
</div>
</div>
</div>