Edit/Create Projects on page in a popup

Author: jeff-phillips-18

app/scripts/controllers/projects.js

@@ -109,6 +109,35 @@ angular.module('openshiftConsole')
       onSortChange: update
     };
 
+    $scope.showNewProjectPanel = false;
+
+    $scope.createProject = function() {
+      $scope.showNewProjectPanel = true;
+    };
+
+    $scope.closeNewProjectPanel = function() {
+      $scope.showNewProjectPanel = false;
+    };
+
+    $scope.onNewProject = function() {
+      $scope.showNewProjectPanel = false;
+    };
+
+    $scope.showEditProjectPanel = false;
+
+    $scope.editProject = function(project) {
+      $scope.editingProject = project;
+      $scope.showEditProjectPanel = true;
+    };
+
+    $scope.closeEditProjectPanel = function() {
+      $scope.showEditProjectPanel = false;
+    };
+
+    $scope.onEditProject = function() {
+      $scope.showEditProjectPanel = false;
+    };
+
     $scope.$watch('search.text', _.debounce(function(searchText) {
       $scope.keywords = filterKeywords = KeywordService.generateKeywords(searchText);
       $scope.$apply(filterProjects);

app/styles/_projects.less

@@ -87,11 +87,18 @@
     justify-content: flex-end;
     margin: -27px 0 0 0;
     @media (min-width: 660px) {
+      display: block;
       margin-bottom: 20px;
       margin-left: 40px;
       margin-top: 0;
       order: 2;
     }
+
+    .origin-modal-popup {
+      @media (min-width: @screen-sm-min) {
+        width: 370px;
+      }
+    }
   }
   .projects-options {
     display: flex;
@@ -157,4 +164,18 @@
   .project-info:hover {
     background-color: @table-bg-hover;
   }
+
+  .origin-modal-popup {
+    @media (min-width: @screen-sm-min) {
+      margin-left: -10px;
+      margin-top: -25px;
+      width: 370px;
+    }
+
+    &.position-above {
+      @media (min-width: @screen-sm-min) {
+        margin-top: 20px;
+      }
+    }
+  }
 }

app/views/projects.html

@@ -25,9 +25,13 @@ <h2 class="text-center">Loading...</h2>
                         <h1>My Projects</h1>
                         <div class="projects-options">
                           <div class="projects-add" ng-if="canCreate">
-                            <a href="create-project" class="btn btn-md btn-primary">
+                            <button ng-click="createProject()" class="btn btn-md btn-primary">
+                              <span class="fa fa-plus"></span>
                               Create Project
-                            </a>
+                            </button>
+                            <origin-modal-popup shown="showNewProjectPanel" modal-title="Create Project" on-close="closeNewProjectPanel()">
+                              <create-project is-dialog="true" redirect-action="onNewProject" on-cancel="closeNewProjectPanel"></create-project>
+                            </origin-modal-popup>
                           </div>
                           <div class="projects-search">
                             <form role="form" class="search-pf has-button">
@@ -101,7 +105,7 @@ <h2 class="h1">
                                 </a>
                               </li>
                               <li role="menuitem">
-                                <a ng-href="project/{{project.metadata.name}}/edit?then=./">
+                                <a ng-href="" ng-click="editProject(project)">
                                   Edit Project
                                 </a>
                               </li>
@@ -120,6 +124,9 @@ <h2 class="h1">
                             </ul>
                           </div>
                         </div>
+                        <origin-modal-popup shown="showEditProjectPanel && editingProject === project" modal-title="Edit Project" on-close="closeEditProjectPanel()">
+                          <edit-project project="project" is-dialog="true" redirect-action="onEditProject" on-cancel="closeEditProjectPanel"></edit-project>
+                        </origin-modal-popup>
                       </div>
                     </div>
                     <p class="projects-instructions" ng-if="canCreate === false" ng-include="'views/_cannot-create-project.html'"></p>