Repo-view page with header, sidebar and body

package.json

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

static/css/directives/components/pages/_mixins.scss

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

static/css/directives/components/pages/repo-page/repo-page.scss

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

static/js/directives/components/pages/repo-page/body.tsx

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

static/js/directives/components/pages/repo-page/header.tsx

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

static/js/directives/components/pages/repo-page/sidebar.tsx

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

static/js/pages/repo-view.js

@@ -61,10 +61,13 @@
         $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;
-
+        
         // Load the remainder of the data async, so we don't block the initial view from
         // showing.
         $timeout(function() {

static/partials/repo-view.html

@@ -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>
+      <div class="rp-main col-md-8">
-      <rp-sidebar></rp-sidebar>
+        <!-- Header -->
-      <rp-body></rp-body>
+        <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">