Skip to content

Commit

Permalink
Add directive to make modals more managable.
Browse files Browse the repository at this point in the history
  • Loading branch information
@gmjosack
gmjosack committed Jan 4, 2015
1 parent 2c36459 commit 18dba7c
Show file tree
Hide file tree
Showing 4 changed files with 101 additions and 114 deletions.
12 changes: 12 additions & 0 deletions nsot/static/js/directives.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,4 +70,16 @@
};
});

app.directive("nsotModal", function(){
return {
restrict: "E",
scope: {
"title": "@",
"modalId": "@"
},
transclude: true,
templateUrl: "/static/templates/directives/nsot-modal.html"
};
});

})();
14 changes: 14 additions & 0 deletions nsot/static/templates/directives/nsot-modal.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<div class="modal fade" id="[[modalId]]" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close close-light" data-dismiss="modal">
<span class="fa fa-close"</span>
</button>
<h4 class="modal-title">[[title]]</h4>
</div>
<ng-transclude></ng-transclude>
</div>
</div>
</div>

116 changes: 45 additions & 71 deletions nsot/static/templates/site.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,81 +13,55 @@
>Delete Site</button>
</heading-bar>

<div class="modal fade" id="updateSiteModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close close-light" data-dismiss="modal">
<span class="fa fa-close"</span>
</button>
<h4 class="modal-title">Update Site</h4>
</div>
<div class="modal-body">
<div ng-if="updateError" class="alert alert-danger">
[[updateError.code]] - [[updateError.message]]
</div>
<form novalidate class="nsot-form">
<div class="form-group">
<input type="text"
class="form-control"i
placeholder="Name"
ng-model="site.name"
required
>
</div>
<div class="form-group">
<textarea style="resize: vertical;"
class="form-control"
rows="5"
placeholder="Description"
ng-model="site.description"
>
</textarea>
</div>
</form>
<nsot-modal title="Update Site" modal-id="updateSiteModal">
<div class="modal-body">
<div ng-if="updateError" class="alert alert-danger">
[[updateError.code]] - [[updateError.message]]
</div>
<form novalidate class="nsot-form">
<div class="form-group">
<input type="text"
class="form-control"i
placeholder="Name"
ng-model="site.name"
required
>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-default"
data-dismiss="modal"
>Close</button>
<button type="submit"
ng-click="updateSite(site)"
class="btn btn-primary"
>Update</button>
<div class="form-group">
<textarea style="resize: vertical;"
class="form-control"
rows="5"
placeholder="Description"
ng-model="site.description"
>
</textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="submit" ng-click="updateSite(site)" class="btn btn-primary">
Update
</button>
</div>
</div>
</nsot-modal>

<div class="modal fade" id="deleteSiteModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close close-light" data-dismiss="modal">
<span class="fa fa-close"</span>
</button>
<h4 class="modal-title">Delete Site</h4>
</div>
<div class="modal-body">
<div ng-if="deleteError" class="alert alert-danger">
[[deleteError.code]] - [[deleteError.message]]
</div>
Are you sure you want to delete this site?
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-default"
data-dismiss="modal"
>Close</button>
<button type="submit"
ng-click="deleteSite(site)"
class="btn btn-primary"
>Delete</button>
</div>
<nsot-modal title="Delete Site" modal-id="deleteSiteModal">
<div class="modal-body">
<div ng-if="deleteError" class="alert alert-danger">
[[deleteError.code]] - [[deleteError.message]]
</div>
Are you sure you want to delete this site?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="submit" ng-click="deleteSite(site)" class="btn btn-primary">
Delete
</button>
</div>
</div>
</nsot-modal>
</div>
73 changes: 30 additions & 43 deletions nsot/static/templates/sites.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,51 +8,38 @@
>Create Site</button>
</heading-bar>

<div class="modal fade" id="createSiteModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close close-light" data-dismiss="modal">
<span class="fa fa-close"</span>
</button>
<h4 class="modal-title">Create Site</h4>
</div>
<div class="modal-body">
<div ng-if="error" class="alert alert-danger">
[[error.code]] - [[error.message]]
</div>
<form novalidate class="nsot-form">
<div class="form-group">
<input type="text"
class="form-control"i
placeholder="Name"
ng-model="site.name"
required
>
</div>
<div class="form-group">
<textarea style="resize: vertical;"
class="form-control"
rows="5"
placeholder="Description"
ng-model="site.description"
>
</textarea>
</div>
</form>
<nsot-modal title="Create Site" modal-id="createSiteModal">
<div class="modal-body">
<div ng-if="error" class="alert alert-danger">
[[error.code]] - [[error.message]]
</div>
<form novalidate class="nsot-form">
<div class="form-group">
<input type="text"
class="form-control"i
placeholder="Name"
ng-model="site.name"
required
>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-default"
data-dismiss="modal"
>Close</button>
<button type="submit"
ng-click="createSite(site)"
class="btn btn-primary"
>Create</button>
<div class="form-group">
<textarea style="resize: vertical;"
class="form-control"
rows="5"
placeholder="Description"
ng-model="site.description"
>
</textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="submit" ng-click="createSite(site)" class="btn btn-primary">
Create
</button>
</div>
</div>

Expand Down

0 comments on commit 18dba7c

Please sign in to comment.