Repo-view page with header, sidebar and body
This commit is contained in:
Ian Minoso
parent
b4ace1dd29
commit
0d915eccc4
8 changed files with 311 additions and 11 deletions
|
|
@ -17,6 +17,7 @@
|
|||
"@types/react": "0.14.39",
|
||||
"@types/react-dom": "0.14.17",
|
||||
"angular": "1.5.8",
|
||||
"moment": "2.16.0",
|
||||
"ngreact": "0.3.0",
|
||||
"react": "15.3.2",
|
||||
"react-dom": "15.3.2",
|
||||
|
|
|
|||
10
static/css/directives/components/pages/_mixins.scss
Normal file
10
static/css/directives/components/pages/_mixins.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/*
|
||||
A list of useful mixins
|
||||
*/
|
||||
|
||||
@mixin box-shadow($args...) {
|
||||
-webkit-box-shadow: $args;
|
||||
-moz-box-shadow: $args;
|
||||
box-shadow: $args;
|
||||
-o-box-shadow: $args;
|
||||
}
|
||||
|
|
@ -1 +1,148 @@
|
|||
// Repo Page specific styles here
|
||||
@import "../mixins";
|
||||
|
||||
.rp-badge {
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.rp-badge__icon {
|
||||
float: left;
|
||||
height: 25px;
|
||||
font-size: 16px;
|
||||
padding: 0 12px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.rp-badge__icon--private {
|
||||
@extend .rp-badge__icon;
|
||||
background-color: #d64456;
|
||||
}
|
||||
|
||||
.rp-badge__icon--public {
|
||||
@extend .rp-badge__icon;
|
||||
background-color: #2fc98e;
|
||||
}
|
||||
|
||||
.rp-description {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.rp-header {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.rp-header__row {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.rp-imagesHeader {
|
||||
font-size: 18px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.rp-imagesTable {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.rp-imagesTable__headerCell {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
color: #999;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.rp-imagesTable__tagIcon {
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.rp-mainPanel {
|
||||
margin-bottom: 20px;
|
||||
background-color: #fff;
|
||||
@include box-shadow(0px 2px 2px rgba(0, 0, 0, 0.4));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rp-main {
|
||||
padding: 0;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.rp-panelBody {
|
||||
padding: 15px 30px;
|
||||
}
|
||||
|
||||
.rp-sharing {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.rp-sidebar {
|
||||
padding: 30px 30px 0 30px;
|
||||
border-left: 1px solid #DDD;
|
||||
}
|
||||
|
||||
.rp-tabs {
|
||||
border-bottom: 1px solid #DDD;
|
||||
}
|
||||
.rp-tabs > li.active > a,
|
||||
.rp-tabs > li.active > a:focus,
|
||||
.rp-tabs > li.active > a:hover {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.rp-tabs {
|
||||
padding: 0 15px;
|
||||
font-size: 20px;
|
||||
|
||||
li.active a {
|
||||
color: #51a3d9;
|
||||
border: none;
|
||||
border-bottom: 1px solid #51a3d9;
|
||||
|
||||
&:hover {
|
||||
color: #51a3d9;
|
||||
border: none;
|
||||
border-bottom: 1px solid #51a3d9;
|
||||
}
|
||||
}
|
||||
|
||||
li a {
|
||||
color: #333;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rp-title {
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.rp-button {
|
||||
float: right;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.rp-button__dropdown {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25), 0 0 1px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.rp-button__text {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.rp-button__text--bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,32 @@
|
|||
import * as React from "react";
|
||||
|
||||
class body extends React.Component<{}, {}> {
|
||||
interface IMain {
|
||||
description: string
|
||||
}
|
||||
|
||||
class body extends React.Component<IMain, {}> {
|
||||
static propTypes = {
|
||||
description: React.PropTypes.string.isRequired,
|
||||
}
|
||||
render () {
|
||||
return <div> The component for the main content</div>;
|
||||
return(
|
||||
<div>
|
||||
<ul className="nav nav-tabs rp-tabs">
|
||||
<li className="active"><a href="#tab1" data-toggle="tab">Description</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Automated Builds</a></li>
|
||||
</ul>
|
||||
<div className="panel-body rp-panelBody">
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane in active" id="tab1">
|
||||
<div className="rp-description">{this.props.description}</div>
|
||||
</div>
|
||||
<div className="tab-pane" id="tab2">
|
||||
TODO (IAN): Convert the build directives to angular components
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,36 @@
|
|||
import * as React from "react";
|
||||
|
||||
class repoHeader extends React.Component<{}, {}> {
|
||||
interface IHeader {
|
||||
name: string,
|
||||
namespace: string
|
||||
}
|
||||
|
||||
class repoHeader extends React.Component<IHeader, {}> {
|
||||
static propTypes = {
|
||||
name: React.PropTypes.string.isRequired,
|
||||
namespace: React.PropTypes.string.isRequired
|
||||
}
|
||||
render () {
|
||||
return <div> The component for the header</div>;
|
||||
return(
|
||||
<div className="row rp-header__row">
|
||||
<div className="rp-title">{this.props.namespace}/{this.props.name}</div>
|
||||
<div className="rp-button">
|
||||
<div className="dropdown">
|
||||
<button className="btn rp-button__dropdown dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<span className="rp-button__text">
|
||||
Run with <span className="rp-button__text--bold">Docker</span>
|
||||
</span>
|
||||
<span className="caret"></span>
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<li><a href="#">Squashed Docker Image</a></li>
|
||||
<li><a href="#">Rocket Fetch</a></li>
|
||||
<li><a href="#">Basic Docker Pull</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,84 @@
|
|||
import * as React from "react";
|
||||
import * as moment from "moment";
|
||||
|
||||
class repoSidebar extends React.Component<{}, {}> {
|
||||
interface tag {
|
||||
image_id: string;
|
||||
last_modified: string;
|
||||
name: string;
|
||||
size: number;
|
||||
}
|
||||
|
||||
interface ISidebar {
|
||||
isPublic: string,
|
||||
tags: Array<tag>,
|
||||
repository: Object
|
||||
}
|
||||
|
||||
class repoSidebar extends React.Component<ISidebar, {}> {
|
||||
static propTypes = {
|
||||
isPublic: React.PropTypes.string.isRequired,
|
||||
tags: React.PropTypes.array.isRequired,
|
||||
repository: React.PropTypes.object.isRequired
|
||||
}
|
||||
render () {
|
||||
return <div> The component for the sidebar</div>;
|
||||
let isPublic: string = (this.props.isPublic) ? "Public" : "Private";
|
||||
let sortedTags: Array<any> = [];
|
||||
let tagRows: Array<any> = [];
|
||||
let badgeIcon: string = (this.props.isPublic) ? "rp-badge__icon--public" : "rp-badge__icon--private";
|
||||
let repository: any = this.props.repository;
|
||||
let sharing: string = repository.company || repository.namespace;
|
||||
for (let t in this.props.tags){
|
||||
sortedTags.push(
|
||||
{
|
||||
name: this.props.tags[t].name,
|
||||
lastModified: Date.parse(this.props.tags[t].last_modified)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
sortedTags = sortedTags.sort(function(a,b){return a.lastModified - b.lastModified});
|
||||
sortedTags.forEach(function(el, i){
|
||||
tagRows.push(
|
||||
<tr>
|
||||
<td>
|
||||
<i className="fa fa-tag rp-imagesTable__tagIcon" aria-hidden="true"></i>
|
||||
{el.name}
|
||||
</td>
|
||||
<td>
|
||||
{moment(el.lastModified).fromNow()}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
|
||||
return(
|
||||
<div>
|
||||
<div className="rp-badge">
|
||||
<div className={badgeIcon}>
|
||||
{isPublic}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rp-sharing">
|
||||
{sharing} is sharing this container {this.props.isPublic ? "publically" : "privately"}
|
||||
</div>
|
||||
<div className="rp-imagesHeader">
|
||||
Latest Images
|
||||
</div>
|
||||
<div>
|
||||
<table className="co-table co-fixed-table rp-imagesTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="rp-imagesTable__headerCell">NAME</th>
|
||||
<th className="rp-imagesTable__headerCell">LAST MODIFIED</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tagRows}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -61,6 +61,9 @@
|
|||
$scope.repository = repo;
|
||||
$scope.viewScope.repository = repo;
|
||||
$scope.publicRepoExperiment = CookieService.get('quay.public-repo-exp') == 'true';
|
||||
if (!$scope.repository.description){
|
||||
$scope.repository.description = "No Description";
|
||||
}
|
||||
|
||||
// Flag for new repo page experiment
|
||||
$scope.newRepoExperiment = $scope.repository.is_public && $scope.user.username != $scope.repository.namespace && $scope.publicRepoExperiment;
|
||||
|
|
|
|||
|
|
@ -3,11 +3,22 @@
|
|||
error-message="'Repository not found'">
|
||||
<div class="page-content">
|
||||
<!-- New Public Repo Page experiment -->
|
||||
<div ng-if="newRepoExperiment" class="main-panel">
|
||||
<div ng-if="newRepoExperiment" class="rp-mainPanel">
|
||||
<!-- React Components -->
|
||||
<rp-header></rp-header>
|
||||
<rp-sidebar></rp-sidebar>
|
||||
<rp-body></rp-body>
|
||||
<div class="rp-main col-md-8">
|
||||
<!-- Header -->
|
||||
<div class="rp-header">
|
||||
<rp-header name="repository.name" namespace="repository.namespace"></rp-header>
|
||||
</div>
|
||||
<!-- Body -->
|
||||
<div>
|
||||
<rp-body description="repository.description"></rp-body>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sidebar -->
|
||||
<div class="rp-sidebar col-md-4">
|
||||
<rp-sidebar is-public="repository.is_public" tags="repository.tags" repository="repository"></rp-sidebar>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Old Repo Page -->
|
||||
<div ng-if="!newRepoExperiment">
|
||||
|
|
|
|||
Reference in a new issue