Skip to content

Commit

Permalink
Created the item-panel directive and updated the post and user states…
Browse files Browse the repository at this point in the history
… to make use of them
  • Loading branch information
MKHenson committed Jun 14, 2016
1 parent 8f68922 commit bf77afa
Show file tree
Hide file tree
Showing 16 changed files with 315 additions and 206 deletions.
1 change: 1 addition & 0 deletions admin/lib/application.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ module clientAdmin
.directive('approveButton', ApproveButton.factory())
.directive('removeButton', RemoveButton.factory())
.directive('toggleButton', ToggleButton.factory())
.directive('itemPanel', ItemPanel.factory())
.directive('searchBar', SearchBar.factory())
.config(Config)
.run(["$rootScope", "$location", "$state", "Authenticator", function ($rootScope, $location, $state: ng.ui.IStateService, auth: Authenticator)
Expand Down
21 changes: 21 additions & 0 deletions admin/lib/css/animations.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
.animated-panel {
overflow:hidden;
}
.animated-panel.ng-hide {
max-height: 0;
}
.animated-panel.ng-hide-add.ng-hide-add-active,
.animated-panel.ng-hide-remove.ng-hide-remove-active {
-webkit-transition: all linear 0.25s;
transition: all linear 0.25s;
}

.animated-panel-small {
max-height: 100px;
}
.animated-panel-med {
max-height: 400px;
}
.animated-panel-large {
max-height: 800px;
}
17 changes: 17 additions & 0 deletions admin/lib/directives/item-panel/item-panel.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<div class="item-panel">

<div class="item-panel-delete animated-panel animated-panel-small" ng-show="confirmDelete">
<div>Are you sure you want to delete this item? </div>
<remove-button ng-click="onDelete(model)" no-icon="true" text="'Yes'"></remove-button>
<remove-button ng-click="confirmDelete=false" no-icon="true" text="'No'"></remove-button>
</div>

<div class="arrow animate-fast" ng-click="more = (more === undefined ? true : !more )" ng-class="{ active : more }"></div>
<div class="cross" ng-if="onDelete" ng-style="{ visibility : ($parent.confirmDelete ? 'hidden' : '' ) }" ng-click="$parent.confirmDelete = true"></div>
<div class="item-panel-preview" ng-transclude="preview"></div>


<div class="item-panel-content animated-panel animated-panel-large" ng-show="more" ng-transclude="content"></div>


</div>
35 changes: 35 additions & 0 deletions admin/lib/directives/item-panel/item-panel.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
module clientAdmin
{
/**
* Small directive that represents an div item that has a preview, content and delete section.
* Ideal for database entries displayed in a list.
*/
export class ItemPanel implements ng.IDirective
{
restrict = 'E';
transclude = {
'preview': 'panelPreview',
'content': 'panelContent'
};
templateUrl = 'directives/item-panel/item-panel.html';
scope = {
onDelete: '=?',
model: '=?',
confirmDelete : '=?'
}

link( scope )
{
scope.confirmDelete = scope.confirmDelete || false;
}

/**
* Creates an intance of the pager directive
*/
static factory(): ng.IDirectiveFactory
{
var directive = () => new ItemPanel();
return directive;
}
}
}
40 changes: 40 additions & 0 deletions admin/lib/directives/item-panel/style.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@


.item-panel {
margin: 10px;
padding: 5px;
background:$primary-background;

.nav-button a {
margin: 0 8px 0 0;
font-size: 20px;
}

.item-panel-delete {
background: #FFDCDC;
padding: 10px;
margin:0 0 20px 0;

.button {
margin:10px 10px 0 0;
}
}

.cross {
float:right;
margin: 4px 8px;
cursor:pointer;

-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);

&:hover{
&:before, &:after{
background: red;
}
}
}

}

2 changes: 1 addition & 1 deletion admin/lib/states/media/dash-media.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ <h2 ng-if="!mediaController.editFileMode">{{mediaController.selectedEntity.name}
</div>
</div>
<div class="left panel-view" ng-class="{ expanded : mediaController.editMode && mediaController.selectedFolder }">
<div class="user-confirmation animated-panel animate-show" ng-show="mediaController.confirmDelete">
<div class="user-confirmation animated-panel" ng-show="mediaController.confirmDelete">
<div>Are you sure you want to delete these {{mediaController.selectedFolder ? "file": "folder" }}s</div>
<remove-button ng-click="mediaController.removeEntities()" text="'Yes'" no-icon="true" ></remove-button>
<remove-button ng-click="mediaController.confirmDelete=false" text="'No'" no-icon="true" ></remove-button>
Expand Down
220 changes: 106 additions & 114 deletions admin/lib/states/posts/dash-posts.html

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions admin/lib/states/posts/posts-ctrl.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,8 @@
this.showMediaBrowser = false;
this.targetImgReciever = "";



this.http = http;
this.loading = false;
this.error = false;
Expand Down Expand Up @@ -89,6 +91,8 @@

// Fetches the categories
this.categories = categories;

scope.removePost = this.removePost.bind(this);
}

/**
Expand Down
6 changes: 6 additions & 0 deletions admin/lib/states/posts/style.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
.new-post-form {

overflow: auto;
background: $primary-background;
margin: 10px;
padding: 10px;

.content-view-detail .label{
width: auto;
float:none;
Expand Down
8 changes: 4 additions & 4 deletions admin/lib/states/register/register.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
<form name="registerForm" ng-submit="registerForm.$valid && controller.register()" novalidate>
<div>
<label>Username <br><input type="text" name="registerUsername" ng-model="controller.registerToken.username" ng-minlength="3" required /></label>
<div class="error animate-show" ng-show="registerForm.registerUsername.$error.required && (registerForm.$submitted || registerForm.registerUsername.$touched)">Please enter a valid username</div>
<div class="error" ng-show="registerForm.registerUsername.$error.required && (registerForm.$submitted || registerForm.registerUsername.$touched)">Please enter a valid username</div>
</div>
<div>
<label>Password <br><input type="password" name="registerPassword" ng-model="controller.registerToken.password" ng-minlength="3" required /></label>
<div class="error animate-show" ng-show="registerForm.registerPassword.$error.required && (registerForm.$submitted || registerForm.registerPassword.$touched)">Please enter a valid password</div>
<div class="error" ng-show="registerForm.registerPassword.$error.required && (registerForm.$submitted || registerForm.registerPassword.$touched)">Please enter a valid password</div>
</div>
<div>
<label>Email<br><input type="email" name="registerEmail" ng-model="controller.registerToken.email" required /></label>
<div class="error animate-show" ng-show="registerForm.registerEmail.$error.required && (registerForm.$submitted || registerForm.registerEmail.$touched)">Please enter an email</div>
<div class="error animate-show" ng-show="registerForm.registerEmail.$error.email && (registerForm.$submitted || registerForm.registerEmail.$touched)">Please enter a valid email</div>
<div class="error" ng-show="registerForm.registerEmail.$error.required && (registerForm.$submitted || registerForm.registerEmail.$touched)">Please enter an email</div>
<div class="error" ng-show="registerForm.registerEmail.$error.email && (registerForm.$submitted || registerForm.registerEmail.$touched)">Please enter a valid email</div>
</div>

<div id="google-captcha"></div>
Expand Down
83 changes: 39 additions & 44 deletions admin/lib/states/users/dash-users.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,47 +15,47 @@

<div class="content-view">
<div class="content-view-item new-user-form" ng-show="controller.showUserForm">
<div class="content-view-details animate-show">
<form name="newUserForm" ng-submit="newUserForm.$valid && controller.createNewUser()" novalidate>
<div class="content-view-detail">
<div class="label">Username:</div>
<input type="text" name="nUsername" ng-model="controller.newUser.username" ng-minlength="3" required />
<div class="error animate-show" ng-show="newUserForm.nUsername.$error.required && (newUserForm.$submitted || newUserForm.nUsername.$touched)">Please enter a valid username</div>
<div class="fix"></div>
</div>
<div class="content-view-detail">
<div class="label">Email:</div>
<input type="email" name="nEmail" ng-model="controller.newUser.email" required />
<div class="error animate-show" ng-show="newUserForm.nEmail.$error.required && (newUserForm.$submitted || newUserForm.nEmail.$touched)">Please enter an email</div>
<div class="error animate-show" ng-show="newUserForm.nEmail.$error.email && (newUserForm.$submitted || newUserForm.nEmail.$touched)">Please enter a valid email</div>
<div class="fix"></div>
</div>
<div class="content-view-detail">
<div class="label">Password: </div>
<input type="password" name="nPassword" ng-model="controller.newUser.password" ng-minlength="3" required />
<div class="error animate-show" ng-show="newUserForm.nPassword.$error.required && (newUserForm.$submitted || newUserForm.nPassword.$touched)">Please enter a valid password</div>
<div class="fix"></div>
</div>
<div class="content-view-detail">
<div class="label">User Type: </div>
<div class="dropdown">
<select name="nType" ng-model="controller.newUser.type" required>
<option value="2">Admin</option>
<option value="3">Regular User</option>
</select>
</div>
<div class="fix"></div>
<form name="newUserForm" ng-submit="newUserForm.$valid && controller.createNewUser()" novalidate>
<div class="content-view-detail">
<div class="label">Username:</div>
<input type="text" name="nUsername" ng-model="controller.newUser.username" ng-minlength="3" required />
<div class="error" ng-show="newUserForm.nUsername.$error.required && (newUserForm.$submitted || newUserForm.nUsername.$touched)">Please enter a valid username</div>
<div class="fix"></div>
</div>
<div class="content-view-detail">
<div class="label">Email:</div>
<input type="email" name="nEmail" ng-model="controller.newUser.email" required />
<div class="error" ng-show="newUserForm.nEmail.$error.required && (newUserForm.$submitted || newUserForm.nEmail.$touched)">Please enter an email</div>
<div class="error" ng-show="newUserForm.nEmail.$error.email && (newUserForm.$submitted || newUserForm.nEmail.$touched)">Please enter a valid email</div>
<div class="fix"></div>
</div>
<div class="content-view-detail">
<div class="label">Password: </div>
<input type="password" name="nPassword" ng-model="controller.newUser.password" ng-minlength="3" required />
<div class="error" ng-show="newUserForm.nPassword.$error.required && (newUserForm.$submitted || newUserForm.nPassword.$touched)">Please enter a valid password</div>
<div class="fix"></div>
</div>
<div class="content-view-detail">
<div class="label">User Type: </div>
<div class="dropdown">
<select name="nType" ng-model="controller.newUser.type" required>
<option value="2">Admin</option>
<option value="3">Regular User</option>
</select>
</div>
</form>
</div>
<div class="fix"></div>
</div>
</form>
</div>

<div class="content-view-item-list" ng-show="!controller.showUserForm">
<div pager interface="controller.pager" limit="10">
<div class="content-view-item" ng-repeat="user in controller.users">
<div class="arrow animate-fast" ng-click="user.more = (user.more === undefined ? true : !user.more )" ng-class="{ active : user.more }"></div>
<div class="view-item-label">{{user.username}}</div>
<div class="content-view-details animated-panel animate-show" ng-show="user.more">

<item-panel ng-repeat="user in controller.users" model="user" on-delete="removeUser">
<panel-preview>
<div class="view-item-label">{{user.username}}</div>
</panel-preview>
<panel-content>
<div class="content-view-detail">
<div class="label">ID: </div>
<div class="textbox">{{user._id}}</div>
Expand Down Expand Up @@ -93,16 +93,11 @@
</div>
<div class="content-view-detail">
<div class="buttons">
<div class="nav-button red-highlight" ng-click="user.confirmDelete=true"><a href="">Remove User</a></div>
<div class="nav-button red-highlight" ng-hide="$parent.confirmDelete" ng-click="$parent.confirmDelete=true"><a href="">Remove User</a></div>
</div>
</div>
</div>
<div class="user-confirmation animated-panel animate-show" ng-show="user.confirmDelete">
<div> you sure you want to delete this user? </div>
<remove-button ng-click="controller.removeUser(user)" no-icon="true" text="'Yes'"></remove-button>
<remove-button ng-click="user.confirmDelete=false" no-icon="true" text="'No'"></remove-button>
</div>
</div>
</panel-content>
</item-panel>
</div>
</div>
</div>
10 changes: 4 additions & 6 deletions admin/lib/states/users/style.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
.user-confirmation {
max-height: 100px;
background: #FFDCDC;
.new-user-form {
overflow: auto;
background: $primary-background;
margin: 10px;
padding: 10px;
}
.user-confirmation div {
margin:0 0 10px 0;
}
2 changes: 2 additions & 0 deletions admin/lib/states/users/users-ctrl.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@
this.errorMsg = "";
this.searchTerm = "";
this.pager = this.createPagerRemote();

scope.removeUser = this.removeUser.bind(this);
}

/**
Expand Down
Loading

0 comments on commit bf77afa

Please sign in to comment.