More changes to the new design

Moving modal templates into separate files
Now using angularui to handle bootstrap modals

static/css/flat-ui.css

@@ -1175,7 +1175,7 @@ label {
 fieldset[disabled] .form-control {
   background-color: #f4f6f6;
   border-color: #d5dbdb;
-  color: #d5dbdb;
+  color: #555555;
   cursor: default;
   opacity: 0.7;
   filter: alpha(opacity=70);

static/css/main.css

@@ -8,7 +8,8 @@
       padding-bottom:0px;
   }
   #navbar-dropdown {
-    margin-top:8px;
+    margin-top:6px;
+    margin-right:15px;
   }
   .sans {
       font-family:'Open Sans', sans-serif !important;

static/js/app/controllers.js

@@ -1,4 +1,4 @@
-app.controller('CampaignCtrl', function($scope, CampaignService, GroupService, TemplateService, ngTableParams, $http) {
+app.controller('CampaignCtrl', function($scope, $modal, CampaignService, GroupService, TemplateService, ngTableParams, $http) {
     $scope.flashes = []
     $scope.mainTableParams = new ngTableParams({
         page: 1, // show first page
@@ -25,12 +25,12 @@ app.controller('CampaignCtrl', function($scope, CampaignService, GroupService, T
         $scope.templates = templates;
     })
 
-    $scope.addGroup = function() {
+    $scope.addGroup = function(group) {
-        if ($scope.group.name != "") {
+        if (group.name != "") {
             $scope.campaign.groups.push({
-                name: $scope.group.name
+                name: group.name
             });
-            $scope.group.name = ""
+            group.name = ""
             $scope.editGroupTableParams.reload()
         }
     };
@@ -45,6 +45,21 @@ app.controller('CampaignCtrl', function($scope, CampaignService, GroupService, T
             name: '',
             groups: []
         };
+        $scope.editCampaign($scope.campaign)
+    };
+
+    $scope.editCampaign = function(campaign){
+        var modalInstance = $modal.open({
+            templateUrl: '/js/app/partials/modals/campaignModal.html',
+            controller: CampaignModalCtrl,
+            scope: $scope
+        });
+
+        modalInstance.result.then(function(selectedItem) {
+            $scope.selected = selectedItem;
+        }, function() {
+            console.log('closed')
+        });
     };
 
     $scope.editGroupTableParams = new ngTableParams({
@@ -64,9 +79,6 @@ app.controller('CampaignCtrl', function($scope, CampaignService, GroupService, T
     $scope.saveCampaign = function(campaign) {
         $scope.flashes = []
         $scope.validated = true
-        /*if (campaign.template.name == "") {
-            $scope.errorFlash("Must specify a template")
-        }*/
         var newCampaign = new CampaignService(campaign);
         newCampaign.$save({}, function() {
             $scope.successFlash("Campaign added successfully")
@@ -99,6 +111,8 @@ app.controller('CampaignCtrl', function($scope, CampaignService, GroupService, T
     }
 });
 
+var CampaignModalCtrl = function($scope, $modalInstance){};
+
 app.controller('CampaignResultsCtrl', function($scope, CampaignService, GroupService, ngTableParams, $http, $window) {
     id = $window.location.hash.split( '/' )[2];
     $scope.flashes = []
@@ -212,7 +226,7 @@ app.controller('GroupCtrl', function($scope, GroupService, ngTableParams) {
     }
 })
 
-app.controller('TemplateCtrl', function($scope, TemplateService, ngTableParams) {
+app.controller('TemplateCtrl', function($scope, $modal, TemplateService, ngTableParams) {
     $scope.mainTableParams = new ngTableParams({
         page: 1, // show first page
         count: 10, // count per page
@@ -243,6 +257,17 @@ app.controller('TemplateCtrl', function($scope, TemplateService, ngTableParams)
             $scope.newTemplate = false;
             $scope.template = template;
         }
+        var modalInstance = $modal.open({
+            templateUrl: '/js/app/partials/modals/templateModal.html',
+            controller: TemplateModalCtrl,
+            scope: $scope
+        });
+
+        modalInstance.result.then(function(selectedItem) {
+            $scope.selected = selectedItem;
+        }, function() {
+            console.log('closed')
+        });
     };
 
     $scope.saveTemplate = function(template) {
@@ -273,8 +298,20 @@ app.controller('TemplateCtrl', function($scope, TemplateService, ngTableParams)
     }
 })
 
+var TemplateModalCtrl = function($scope, $modalInstance){};
+
 app.controller('SettingsCtrl', function($scope, $http) {
+    $scope.flashes = [];
     $scope.user = user;
+    $scope.errorFlash = function(message) {
+        $scope.flashes = [];
+        $scope.flashes.push({"type" : "danger", "message" : message, "icon" : "fa-exclamation-circle"})
+    }
+
+    $scope.successFlash = function(message) {
+        $scope.flashes = [];
+        $scope.flashes.push({"type" : "success", "message" : message, "icon" : "fa-check-circle"})
+    }
     $scope.form_data = {
         csrf_token : csrf_token
     }
@@ -290,11 +327,4 @@ app.controller('SettingsCtrl', function($scope, $http) {
             $scope.successFlash("API Key Successfully Reset")
         })
     }
-    $scope.errorFlash = function(message) {
-        $scope.flashes.push({"type" : "danger", "message" : message, "icon" : "fa-exclamation-circle"})
-    }
-
-    $scope.successFlash = function(message) {
-        $scope.flashes.push({"type" : "success", "message" : message, "icon" : "fa-check-circle"})
-    }
 })

static/js/app/partials/campaigns.html

@@ -26,7 +26,7 @@
         </div>
     </div>
     <div class="row">
-        <button type="button" class="btn btn-primary" ng-click="newCampaign()" data-toggle="modal" data-target="#newCampaignModal"><i class="fa fa-plus"></i> New Campaign</button>
+        <button type="button" class="btn btn-primary" ng-click="newCampaign()"><i class="fa fa-plus"></i> New Campaign</button>
     </div>
     &nbsp;
     <div class="row">
@@ -56,55 +56,4 @@
             </tbody>
         </table>
     </div>
-    <!-- New Campaign Modal -->
-    <div class="modal" id="newCampaignModal" role="dialog" aria-labelledby="campaignModalLabel" aria-hidden="true">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                    <h4 class="modal-title" id="campaignModalLabel">New Campaign</h4>
-                </div>
-                <div class="modal-body">
-                    <div class="form-group">
-                        <label for="name">Name:</label>
-                        <input type="text" class="form-control" ng-model="campaign.name" id="name" placeholder="Campaign name" autofocus>
-                        <br />
-                        <label class="control-label" for="template">Template:</label>
-                        <input type="text" class="form-control" placeholder="Template Name" id="template" typeahead="template.name for template in templates | filter:{name:$viewValue}" typeahead-editable="false" ng-model="template.name" />
-                        <br />
-                        <label class="control-label" for="from">From:</label>
-                        <input type="text" class="form-control" placeholder="First Last <test@example.com>" id="form">
-                        <br />
-                        <label class="control-label" for="smtp_server">SMTP Server:</label>
-                        <input type="text" class="form-control" placeholder="host:port" id="smtp_server">
-                        <br />
-                        <label class="control-label" for="users">Groups:</label>
-                        <form ng:submit="addGroup()">
-                            <div class="input-group">
-                                <input type="text" class="form-control" placeholder="Group Name" id="users" typeahead="group.name for group in groups | filter:{name:$viewValue}" typeahead-editable="false" ng-model="group.name" />
-                                <span class="input-group-btn">
-                                    <button class="btn btn-primary"><i class="fa fa-plus"></i> Add</button>
-                                </span>
-                            </div>
-                        </form>
-                        <br />
-                        <table ng-table="editGroupTableParams" class="table table-hover table-striped table-condensed">
-                            <tbody>
-                                <tr ng-repeat="group in $data" class="editable-row">
-                                    <td>{{group.name}}
-                                        <span ng-click="removeGroup(group)" class="remove-row"><i class="fa fa-trash-o"></i>
-                                        </span>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                    <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="saveCampaign(campaign)" type="submit">Launch Campaign</button>
-                </div>
-            </div>
-        </div>
-    </div>
 </div>

static/js/app/partials/modals/campaignModal.html

@@ -0,0 +1,48 @@
+<!-- New Campaign Modal -->
+<div class="modal-header">
+    <button type="button" class="close" ng-click="cancel()">&times;</button>
+    <h4 class="modal-title" id="campaignModalLabel">New Campaign</h4>
+</div>
+<div class="modal-body">
+    <div class="form-group">
+        <label for="name">Name:</label>
+        <input type="text" class="form-control" ng-model="campaign.name" id="name" placeholder="Campaign name" autofocus>
+        <br />
+        <label class="control-label" for="template">Template:</label>
+        <input type="text" class="form-control" placeholder="Template Name" id="template" typeahead="template.name for template in templates | filter:{name:$viewValue}" typeahead-editable="false" ng-model="template.name" />
+        <br />
+        <label class="control-label" for="from">From:</label>
+        <input type="text" class="form-control" placeholder="First Last <test@example.com>" id="form">
+        <br />
+        <label class="control-label" for="smtp_server">SMTP Server:</label>
+        <input type="text" class="form-control" placeholder="host:port" id="smtp_server">
+        <br />
+        <label class="control-label" for="users">Groups:</label>
+        <form ng-submit="addGroup(group)">
+            <div class="input-group">
+                <input type="text" class="form-control" placeholder="Group Name" id="users" typeahead="group.name for group in groups | filter:{name:$viewValue}" typeahead-editable="false" ng-model="group.name" />
+                <span class="input-group-btn">
+                    <button class="btn btn-primary"><i class="fa fa-plus"></i> Add</button>
+                </span>
+            </div>
+        </form>
+        <br />
+        <table ng-table="editGroupTableParams" class="table table-hover table-striped table-condensed">
+            <tbody>
+                <tr ng-repeat="group in $data" class="editable-row">
+                    <td>{{group.name}}
+                        <span ng-click="removeGroup(group)" class="remove-row"><i class="fa fa-trash-o"></i>
+                        </span>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button>
+    <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="saveCampaign(campaign)" type="submit">Launch Campaign</button>
+</div>
+</div>
+</div>
+</div>

static/js/app/partials/modals/templateModal.html

@@ -0,0 +1,39 @@
+<!-- New Template Modal -->
+<div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <h4 class="modal-title" ng-hide="newTemplate" id="groupModalLabel">Edit Template: {{template.name}}</h4>
+    <h4 class="modal-title" ng-show="newTemplate" id="groupModalLabel">New Template</h4>
+</div>
+<div class="modal-body">
+    <label class="control-label" for="name">Name:</label>
+    <div class="form-group">
+        <input type="text" class="form-control" ng-model="template.name" placeholder="Template name" id="name" autofocus/>
+    </div>
+    <fieldset disabled>
+        <div class="form-group">
+            <button class="btn btn-danger btn-disabled"><i class="fa fa-envelope"></i> Import Email (Coming Soon!)</button>
+        </div>
+    </fieldset>
+    <!-- Nav tabs -->
+    <tabset>
+        <tab heading="Text">
+            <textarea rows="10" class="form-control" ng-model="template.text" placeholder="Plaintext"></textarea>
+        </tab>
+        <tab heading="HTML">
+            <textarea rows="10" class="form-control" ng-model="template.html" placeholder="HTML"></textarea>
+        </tab>
+        <tab heading="Preview">
+            <textarea rows="10" class="form-control" ng-model="template.html" contenteditable></textarea>
+        </tab>
+    </tabset>
+
+    <fieldset disabled>
+        <div class="form-group" style="margin-top:15px">
+            <button class="btn btn-danger btn-disabled"><i class="fa fa-plus"></i> Add Files (Coming Soon!)</button>
+        </div>
+    </fieldset>
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+    <button type="button" class="btn btn-primary" ng-click="saveTemplate(template)" data-dismiss="modal">Save Template</button>
+</div>

static/js/app/partials/templates.html

@@ -21,7 +21,7 @@
         Templates
     </h1>
     <div class="row">
-        <button type="button" class="btn btn-primary" ng-click="editTemplate('new')" data-toggle="modal" data-target="#newTemplateModal"><i class="fa fa-plus"></i> New Template</button>
+        <button type="button" class="btn btn-primary" ng-click="editTemplate('new')"><i class="fa fa-plus"></i> New Template</button>
     </div>
     &nbsp;
     <div class="row">
@@ -49,55 +49,3 @@
         </table>
     </div>
 </div>
-<!-- New Template Modal -->
-<div class="modal" id="newTemplateModal" role="dialog" aria-labelledby="templateModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-lg">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                <h4 class="modal-title" ng-hide="newTemplate" id="groupModalLabel">Edit Template: {{template.name}}</h4>
-                <h4 class="modal-title" ng-show="newTemplate" id="groupModalLabel">New Template</h4>
-            </div>
-            <div class="modal-body">
-                <label class="control-label" for="name">Name:</label>
-                <div class="form-group">
-                    <input type="text" class="form-control" ng-model="template.name" placeholder="Template name" id="name" autofocus/>
-                </div>
-                <fieldset disabled>
-                    <div class="form-group">
-                        <button class="btn btn-danger btn-disabled"><i class="fa fa-envelope"></i> Import Email (Coming Soon!)</button>
-                    </div>
-                </fieldset>
-                <!-- Nav tabs -->
-                <ul class="nav nav-tabs">
-                    <li class="active"><a href="#template_text" data-toggle="tab">Text</a>
-                    </li>
-                    <li><a href="#template_html" data-toggle="tab">HTML</a>
-                    </li>
-                    <li><a href="#template_preview" data-toggle="tab">Preview</a>
-                    </li>
-                </ul>
-
-                <!-- Tab panes -->
-                <div class="tab-content">
-                    <div class="tab-pane active" id="template_text">
-                        <textarea rows="10" class="form-control" ng-model="template.text" placeholder="Plaintext"></textarea>
-                    </div>
-                    <div class="tab-pane" id="template_html">
-                        <textarea rows="10" class="form-control" ng-model="template.html" placeholder="HTML"></textarea>
-                    </div>
-                    <div class="tab-pane" id="template_preview" ng-model="template.html" contenteditable></div>
-                </div>
-                <fieldset disabled>
-                    <div class="form-group" style="margin-top:15px">
-                        <button class="btn btn-danger btn-disabled"><i class="fa fa-plus"></i> Add Files (Coming Soon!)</button>
-                    </div>
-                </fieldset>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-primary" ng-click="saveTemplate(template)" data-dismiss="modal">Save Template</button>
-            </div>
-        </div>
-    </div>
-</div>