Merge pull request #2050 from iminoso/layout

Create all components for new repo page

static/js/app.tsx

@@ -1,9 +1,4 @@
-import * as React from "react";
-import * as angular from "angular";
-
-import repoHeader from "./directives/components/component";
-
-angular.module('quayPages').directive('repoHeader', function(reactDirective) {
-  return reactDirective(repoHeader);
-});
+import {rpDirectives as repoPage} from "./directives/components/pages/repo-page/main";
 
+// Init for each page
+repoPage();

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+class body extends React.Component<{}, {}> {
+  render () {
+    return <div> The component for the main content</div>;
+  }
+}
+
+export default body;
+

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

@@ -2,7 +2,7 @@ import * as React from "react";
 
 class repoHeader extends React.Component<{}, {}> {
   render () {
-    return <p> The component for the header</p>;
+    return <div> The component for the header</div>;
   }
 }
 

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

@@ -0,0 +1,21 @@
+import * as angular from "angular";
+
+import repoHeader from "./header";
+import repoSidebar from "./sidebar";
+import repoBody from "./body";
+
+export function rpDirectives(){
+  angular.module('quayPages').directive('rpHeader', function(reactDirective) {
+    return reactDirective(repoHeader);
+  });
+
+  angular.module('quayPages').directive('rpSidebar', function(reactDirective) {
+    return reactDirective(repoSidebar);
+  });
+
+  angular.module('quayPages').directive('rpBody', function(reactDirective) {
+    return reactDirective(repoBody);
+  });
+}
+
+ 

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+class repoSidebar extends React.Component<{}, {}> {
+  render () {
+    return <div> The component for the sidebar</div>;
+  }
+}
+
+export default repoSidebar;
+

static/js/pages/repo-view.js

@@ -11,11 +11,6 @@
   }]);
 
   function RepoViewCtrl($scope, $routeParams, $location, $timeout, ApiService, UserService, AngularPollChannel, ImageLoaderService, CookieService) {
-    $scope.reactProps = {
-      firstProp: 'Prop 1',
-      secondProp: 'Prop 2'
-    };
-
     $scope.namespace = $routeParams.namespace;
     $scope.name = $routeParams.name;
 

static/partials/repo-view.html

@@ -5,7 +5,9 @@
     <!-- New Public Repo Page experiment -->
     <div ng-if="newRepoExperiment" class="main-panel">
       <!-- React Components -->
-      <repo-header />
+      <rp-header></rp-header>
+      <rp-sidebar></rp-sidebar>
+      <rp-body></rp-body>
     </div>
     <!-- Old Repo Page -->
     <div ng-if="!newRepoExperiment">

tslint.json

@@ -0,0 +1,5 @@
+{
+    "rules": {
+        "no-default-export": true
+  }
+}