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.newProjectPanelShown = false;
+
+    $scope.createProject = function() {
+      $scope.newProjectPanelShown = true;
+    };
+
+    $scope.closeNewProjectPanel = function() {
+      $scope.newProjectPanelShown = false;
+    };
+
+    $scope.onNewProject = function() {
+      $scope.newProjectPanelShown = false;
+    };
+
+    $scope.editProjectPanelShown = false;
+
+    $scope.editProject = function(project) {
+      $scope.editingProject = project;
+      $scope.editProjectPanelShown = true;
+    };
+
+    $scope.closeEditProjectPanel = function() {
+      $scope.editProjectPanelShown = false;
+    };
+
+    $scope.onEditProject = function() {
+      $scope.editProjectPanelShown = false;
+    };
+
     $scope.$watch('search.text', _.debounce(function(searchText) {
       $scope.keywords = filterKeywords = KeywordService.generateKeywords(searchText);
       $scope.$apply(filterProjects);

app/styles/_buttons.less

@@ -41,3 +41,7 @@
     text-decoration: none;
   }
 }
+
+.icon-button-text {
+  padding-left: 4px;
+}

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,34 @@
   .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;
+      }
+    }
+  }
+
+  .with-description {
+    .origin-modal-popup {
+      @media (min-width: @screen-sm-min) {
+        margin-top: -45px;
+      }
+      @media (min-width: @screen-md-min) {
+        margin-top: -25px;
+      }
+      &.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">
-                              Create Project
-                            </a>
+                            <button ng-click="createProject()" class="btn btn-md btn-primary">
+                              <span class="fa fa-plus" aria-hidden="true"></span>
+                              <span class="icon-button-text">Create Project</span>
+                            </button>
+                            <origin-modal-popup shown="newProjectPanelShown" 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 href="" ng-click="editProject(project)">
                                   Edit Project
                                 </a>
                               </li>
@@ -120,6 +124,11 @@ <h2 class="h1">
                             </ul>
                           </div>
                         </div>
+                        <origin-modal-popup shown="editProjectPanelShown && editingProject === project"
+                                            ng-class="{'with-description': (project | description | size)}"
+                                            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>

dist/scripts/scripts.js

@@ -4232,6 +4232,18 @@ sortType: "alpha"
 } ],
 isAscending: !0,
 onSortChange: b
+}, e.newProjectPanelShown = !1, e.createProject = function() {
+e.newProjectPanelShown = !0;
+}, e.closeNewProjectPanel = function() {
+e.newProjectPanelShown = !1;
+}, e.onNewProject = function() {
+e.newProjectPanelShown = !1;
+}, e.editProjectPanelShown = !1, e.editProject = function(t) {
+e.editingProject = t, e.editProjectPanelShown = !0;
+}, e.closeEditProjectPanel = function() {
+e.editProjectPanelShown = !1;
+}, e.onEditProject = function() {
+e.editProjectPanelShown = !1;
 }, e.$watch("search.text", _.debounce(function(t) {
 e.keywords = p = s.generateKeywords(t), e.$apply(h);
 }, 50, {

dist/scripts/templates.js

@@ -12675,9 +12675,13 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<h1>My Projects</h1>\n" +
     "<div class=\"projects-options\">\n" +
     "<div class=\"projects-add\" ng-if=\"canCreate\">\n" +
-    "<a href=\"create-project\" class=\"btn btn-md btn-primary\">\n" +
-    "Create Project\n" +
-    "</a>\n" +
+    "<button ng-click=\"createProject()\" class=\"btn btn-md btn-primary\">\n" +
+    "<span class=\"fa fa-plus\" aria-hidden=\"true\"></span>\n" +
+    "<span class=\"icon-button-text\">Create Project</span>\n" +
+    "</button>\n" +
+    "<origin-modal-popup shown=\"newProjectPanelShown\" modal-title=\"Create Project\" on-close=\"closeNewProjectPanel\">\n" +
+    "<create-project is-dialog=\"true\" redirect-action=\"onNewProject\" on-cancel=\"closeNewProjectPanel\"></create-project>\n" +
+    "</origin-modal-popup>\n" +
     "</div>\n" +
     "<div class=\"projects-search\">\n" +
     "<form role=\"form\" class=\"search-pf has-button\">\n" +
@@ -12738,7 +12742,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</a>\n" +
     "</li>\n" +
     "<li role=\"menuitem\">\n" +
-    "<a ng-href=\"project/{{project.metadata.name}}/edit?then=./\">\n" +
+    "<a href=\"\" ng-click=\"editProject(project)\">\n" +
     "Edit Project\n" +
     "</a>\n" +
     "</li>\n" +
@@ -12749,6 +12753,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</ul>\n" +
     "</div>\n" +
     "</div>\n" +
+    "<origin-modal-popup shown=\"editProjectPanelShown && editingProject === project\" ng-class=\"{'with-description': (project | description | size)}\" modal-title=\"Edit Project\" on-close=\"closeEditProjectPanel\">\n" +
+    "<edit-project project=\"project\" is-dialog=\"true\" redirect-action=\"onEditProject\" on-cancel=\"closeEditProjectPanel\"></edit-project>\n" +
+    "</origin-modal-popup>\n" +
     "</div>\n" +
     "</div>\n" +
     "<p class=\"projects-instructions\" ng-if=\"canCreate === false\" ng-include=\"'views/_cannot-create-project.html'\"></p>\n" +