From 97f7d7ef1712978698035a68633c1c7d17f79935 Mon Sep 17 00:00:00 2001 From: Mathew Henson Date: Fri, 17 Jun 2016 00:09:18 +0100 Subject: [PATCH] Added tick-box directive, gave each state a container div with its respective class name, and updated some of the existing tickboxes to the new directive --- admin/lib/application.ts | 1 + admin/lib/directives/search-bar/search-bar.ts | 6 +- .../directives/state-header/state-header.ts | 9 +- admin/lib/directives/tick-box/style.scss | 20 + admin/lib/directives/tick-box/tick-box.ts | 44 ++ admin/lib/states/media/dash-media.html | 122 ++--- admin/lib/states/posts/dash-posts.html | 420 +++++++++--------- admin/lib/states/posts/style.scss | 206 ++++----- admin/lib/states/users/dash-users.html | 188 ++++---- admin/lib/style.scss | 27 +- admin/tsconfig.json | 1 + server/dist/definitions/definitions.d.ts | 20 + 12 files changed, 568 insertions(+), 496 deletions(-) create mode 100644 admin/lib/directives/tick-box/style.scss create mode 100644 admin/lib/directives/tick-box/tick-box.ts diff --git a/admin/lib/application.ts b/admin/lib/application.ts index 544973b5..555b56ef 100644 --- a/admin/lib/application.ts +++ b/admin/lib/application.ts @@ -49,6 +49,7 @@ module clientAdmin .directive('itemPanel', ItemPanel.factory()) .directive('searchBar', SearchBar.factory()) .directive('stateHeader', StateHeader.factory()) + .directive('tickBox', TickBox.factory()) .config(Config) .run(["$rootScope", "$location", "$state", "Authenticator", function ($rootScope, $location, $state: ng.ui.IStateService, auth: Authenticator) { diff --git a/admin/lib/directives/search-bar/search-bar.ts b/admin/lib/directives/search-bar/search-bar.ts index b6255186..d2d8905c 100644 --- a/admin/lib/directives/search-bar/search-bar.ts +++ b/admin/lib/directives/search-bar/search-bar.ts @@ -6,7 +6,11 @@ module clientAdmin export class SearchBar implements ng.IDirective { restrict = 'E'; - template = '
'; + template = ` +
+ +
+
`; scope = { onClick: '=', value: '=' diff --git a/admin/lib/directives/state-header/state-header.ts b/admin/lib/directives/state-header/state-header.ts index d39609b5..f6014d1e 100644 --- a/admin/lib/directives/state-header/state-header.ts +++ b/admin/lib/directives/state-header/state-header.ts @@ -7,7 +7,14 @@ module clientAdmin { transclude = true; restrict = 'E'; - template = '
{{text}}
'; + template = ` +
+ {{text}} + +
+ +
+
`; scope = { text: '=', loading: '=' diff --git a/admin/lib/directives/tick-box/style.scss b/admin/lib/directives/tick-box/style.scss new file mode 100644 index 00000000..2e60b075 --- /dev/null +++ b/admin/lib/directives/tick-box/style.scss @@ -0,0 +1,20 @@ +.tick-box { + width:20px; + height:20px; + cursor:pointer; + display:inline-block; + background: #F0F0F0; + + &:hover { + background: #dbdbdb; + } + &:active { + background: #ccc; + } + + .tick { + top: -25%; + width:120%; + height:120%; + } +} \ No newline at end of file diff --git a/admin/lib/directives/tick-box/tick-box.ts b/admin/lib/directives/tick-box/tick-box.ts new file mode 100644 index 00000000..bad6cf59 --- /dev/null +++ b/admin/lib/directives/tick-box/tick-box.ts @@ -0,0 +1,44 @@ +module clientAdmin +{ + /** + * Simple directive a checkbox + */ + export class TickBox implements ng.IDirective + { + transclude = true; + restrict = 'E'; + template = ` +
+
+
+
+ {{text}} +
+ ` + scope = { + text: '=', + checked: '=', + onTicked: '&?' + } + + link( scope ) + { + /** + * When we click the tick box, we toggle the checked state + */ + scope.onClick = function() + { + if (scope.onTicked) + scope.onTicked({ticked: scope.checked}); + } + } + + /** + * Creates an intance of the pager directive + */ + static factory(): ng.IDirectiveFactory { + var directive = () => new TickBox(); + return directive; + } + } +} \ No newline at end of file diff --git a/admin/lib/states/media/dash-media.html b/admin/lib/states/media/dash-media.html index 5bb51a9b..59085ba8 100644 --- a/admin/lib/states/media/dash-media.html +++ b/admin/lib/states/media/dash-media.html @@ -1,75 +1,77 @@ - +
+ - -
Close X
-
- - - -
Remove
-
View Details
-
-
- - -
-
-
-
-
-

{{mediaController.selectedEntity.name}}

- - -
{{mediaController.selectedEntity.identifier}}
-
{{mediaController.selectedEntity.created | date:"MM/dd/yyyy 'at' h:mma"}}
-
{{mediaController.selectedEntity.size | bytes}}
-
{{mediaController.selectedEntity.mimeType}}
-
{{mediaController.selectedEntity.numDownloads}}
- -
{{ (!mediaController.editFileMode ? "Edit" : "Cancel") }}
-
-
-
-
-
Are you sure you want to delete these {{mediaController.selectedFolder ? "file": "folder" }}s
- - -
+ +
Close X
+
+ + + +
Remove
+
View Details
+
+
+ -
-
-
Folder Name:
-
- - -
+
+
+
+
+
+

{{mediaController.selectedEntity.name}}

+ + +
{{mediaController.selectedEntity.identifier}}
+
{{mediaController.selectedEntity.created | date:"MM/dd/yyyy 'at' h:mma"}}
+
{{mediaController.selectedEntity.size | bytes}}
+
{{mediaController.selectedEntity.mimeType}}
+
{{mediaController.selectedEntity.numDownloads}}
+ +
{{ (!mediaController.editFileMode ? "Edit" : "Cancel") }}
-
-
-
-
-
{{folder.name}} -
+
+
+
Are you sure you want to delete these {{mediaController.selectedFolder ? "file": "folder" }}s
+ +
-
-
-
.. {{mediaController.selectedFolder.name}} + +
+
+
Folder Name:
+
+ + +
-
+
+
+
+
+
{{folder.name}} +
+
+
+
+
.. {{mediaController.selectedFolder.name}} +
+
+
-
-
-
-
-
+
+
+
+
+
+
+
{{file.name}}
-
{{file.name}}
+
-
diff --git a/admin/lib/states/posts/dash-posts.html b/admin/lib/states/posts/dash-posts.html index f1090887..5e40e411 100644 --- a/admin/lib/states/posts/dash-posts.html +++ b/admin/lib/states/posts/dash-posts.html @@ -1,252 +1,238 @@ - - -
-
- -
-
- - -
- - - -
-
+
+ -
- - -
{{controller.successMessage}}
+
+
+ +
- - -
-
-
-
Sort Order
-
-
-
-
- Newest -
-
-
-
-
- Oldest -
+ + +
+ + + +
-
-
Sort Order
-
-
-
-
- Last Modified +
+ + +
{{controller.successMessage}}
+
+ + +
+
+
+
Sort Order
+ +
-
-
-
-
- Created + +
+
Sort Order
+ +
-
-
-
Category
-
- +
+
Category
+
+ +
+ +
-
-
+
-
+
+
+
Title: The title of this new post
+ +
Please enter a valid title
+
+
+
+
Content: The main content of the post
+
+ +
+
+
+
Slug: The url tag for this post
+ +
Please enter a valid slug
+
+
+
+
Brief: Optional, a small bit of text to describe the post
+ +
+
+
+
+ + Featured Image: The main image for this post +
- -
-
Title: The title of this new post
- -
Please enter a valid title
-
-
-
-
Content: The main content of the post
-
- -
-
-
-
Slug: The url tag for this post
- -
Please enter a valid slug
-
-
-
-
Brief: Optional, a small bit of text to describe the post
- -
-
-
-
- - Featured Image: The main image for this post + +
+ - -
-
- - -
-
-
Categories:
-
-
-
-
+
+ +
Categories:
+
+
+
+
+
+
+ {{category.title}} - {{category.slug}}
-
- {{category.title}} - {{category.slug}}
-
-
-
{{ controller.showCategoryForm ? "- New Category" : "+ New Category" }}
-
-
Title
- - -
Slug
- - -
-
Parent
-
- +
+
{{ controller.showCategoryForm ? "- New Category" : "+ New Category" }}
+
+
Title
+ + +
Slug
+ + +
+
Parent
+
+ +
-
-
- -
-
Add Category +
+ +
+
Add Category +
+
{{ controller.showCategoryDelete ? "- Remove Category" : "+ Remove Category" }}
-
{{ controller.showCategoryDelete ? "- Remove Category" : "+ Remove Category" }}
-
- -
-
- -
-
Tags:
-
-
-
{{tag}} -
+
-
-
- -
- -
-
-
-
Visibility:
-
-
-
-
- Public -
-
-
-
+
+
Tags:
+
+
+
{{tag}} +
+
+
+
+ +
+ +
- Private
-
-
-
+
+
Visibility:
-
-
- - -
Created: {{post.createdOn | date:"MM/dd/yyyy 'at' h:mma"}}
-
Edit
-
{{post.title}} : {{post.slug}}
- - -
-
ID:
-
{{post._id}}
-
-
-
-
Brief:
-
{{post.brief}}
-
-
-
-
Created on:
-
{{post.createdOn | date:"MM/dd/yyyy 'at' h:mma"}}
-
-
-
-
Last Updated:
-
{{post.lastUpdated | date:"MM/dd/yyyy 'at' h:mma"}}
-
-
-
-
Visibility:
-
{{post.public ? "public" : "private"}}
-
-
-
-
Tags:
-
{{post.tags.join(", ")}}
-
-
-
-
Categories:
-
{{post.categories.join(", ")}}
-
-
-
-
Content
-
-
+ + + + +
+ +
+
-
-
-
Remove Post
- +
+
+ + +
Created: {{post.createdOn | date:"MM/dd/yyyy 'at' h:mma"}}
+
Edit
+
{{post.title}} : {{post.slug}}
+ + +
+
ID:
+
{{post._id}}
+
-
- - +
+
Brief:
+
{{post.brief}}
+
+
+
+
Created on:
+
{{post.createdOn | date:"MM/dd/yyyy 'at' h:mma"}}
+
+
+
+
Last Updated:
+
{{post.lastUpdated | date:"MM/dd/yyyy 'at' h:mma"}}
+
+
+
+
Visibility:
+
{{post.public ? "public" : "private"}}
+
+
+
+
Tags:
+
{{post.tags.join(", ")}}
+
+
+
+
Categories:
+
{{post.categories.join(", ")}}
+
+
+
+
Content
+
+
+
+
+
Featured Image
+
+
+
+ +
+
+
Remove Post
+ +
+
+ + +
\ No newline at end of file diff --git a/admin/lib/states/posts/style.scss b/admin/lib/states/posts/style.scss index 6d6e4125..29f9a2d0 100644 --- a/admin/lib/states/posts/style.scss +++ b/admin/lib/states/posts/style.scss @@ -1,121 +1,127 @@ -.big-dialog-box { - position:absolute; - top: 5%; - left: 5%; - width: 90%; - height: 90%; - z-index:2; - background:#DDDDDD; -} +.posts { + .big-dialog-box { + position:absolute; + top: 5%; + left: 5%; + width: 90%; + height: 90%; + z-index:2; + background:#DDDDDD; + } -.new-post-form { + .new-post-form { + + overflow: auto; + background: $primary-background; + margin: 10px; + padding: 10px; + + .content-view-detail .label{ + width: auto; + float:none; + line-height: 36px; + margin:0; + } + + .label { + color: $util-text; + font-weight: bold; + margin: 0 0 10px 0; + } + } - overflow: auto; - background: $primary-background; - margin: 10px; - padding: 10px; + .categories { + padding: 10px; + box-sizing: border-box; + margin: 15px 0; + overflow:hidden; - .content-view-detail .label{ - width: auto; - float:none; - line-height: 36px; - margin:0; + .button { + margin: 20px 0 0 0; + } } - .label { - color: $util-text; - font-weight: bold; - margin: 0 0 10px 0; + .category-buttons { + margin:10px 0 0 0; } -} -.categories { - padding: 10px; - box-sizing: border-box; - margin: 15px 0; - overflow:hidden; + form .category-buttons .nav-button { + margin: 0px 0 5px 10px; + padding-bottom: 0px; + } - .button { - margin: 20px 0 0 0; + .post-categories, .all-categories { + height:100%; + overflow:auto; } -} -.category-buttons { - margin:10px 0 0 0; -} + .post-categories { + padding: 10px; + min-height: 45px; + border-radius: 5px; + margin: 10px 0 20px 0; + } -form .category-buttons .nav-button { - margin: 0px 0 5px 10px; - padding-bottom: 0px; -} + .category-header { + display: inline-block; + color: $util-text; + font-weight: bold; + } + .new-category { + max-height:375px; + margin: 10px 10px; + padding: 20px; + border-radius: 5px; + border: 2px dashed #ccc; + + .label { + margin:0; + } + } -.post-categories, .all-categories { - height:100%; - overflow:auto; -} + .category .cross, .tag .cross, .red .cross { + -ms-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + cursor:pointer; + } -.post-categories { - padding: 10px; - min-height: 45px; - border-radius: 5px; - margin: 10px 0 20px 0; -} + .tags { + padding: 10px; + box-sizing: border-box; + margin: 15px 0; -.category-header { - display: inline-block; - color: $util-text; - font-weight: bold; -} -.new-category { - max-height:375px; - margin: 10px 10px; - padding: 20px; - border-radius: 5px; - border: 2px dashed #ccc; - - .label { - margin:0; + .button { + margin:5px 0 0 0; + } + } + .tag { + float:left; + margin: 0 10px 0 0; + } + .tag-header, .category-header { + margin:0 0 5px 0; } -} - -.category .cross, .tag .cross, .red .cross { - -ms-transform: rotate(45deg); - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - cursor:pointer; -} -.tags { - padding: 10px; - box-sizing: border-box; - margin: 15px 0; + .category .cross:hover:before, .category .cross:hover:after, .tag .cross:hover:before, .tag .cross:hover:after { + background: red; + } - .button { - margin:5px 0 0 0; + .tag-header { + color: $util-text; + font-weight: bold; + } + .tag-content { + padding:10px; + box-sizing:border-box; } -} -.tag { - float:left; - margin: 0 10px 0 0; -} -.tag-header, .category-header { - margin:0 0 5px 0; -} -.category .cross:hover:before, .category .cross:hover:after, .tag .cross:hover:before, .tag .cross:hover:after { - background: red; -} + .filter-options { + padding:20px 20px 10px 20px; + max-height:200px; + } -.tag-header { - color: $util-text; - font-weight: bold; -} -.tag-content { - padding:10px; - box-sizing:border-box; + .success{ + display: inline-block; + } } - -.filter-options { - padding:20px 20px 10px 20px; - max-height:200px; -} \ No newline at end of file diff --git a/admin/lib/states/users/dash-users.html b/admin/lib/states/users/dash-users.html index 3bfe3204..76186d4a 100644 --- a/admin/lib/states/users/dash-users.html +++ b/admin/lib/states/users/dash-users.html @@ -1,104 +1,106 @@ - +
+ - - -
- - -
-
- - -
{{controller.successMessage}}
-
- + + +
+ + +
+
+ + +
{{controller.successMessage}}
+
+ -
-
-
-
-
Username:
- -
Please enter a valid username
-
-
-
-
Email:
- -
Please enter an email
-
Please enter a valid email
-
-
-
-
Password:
- -
Please enter a valid password
-
-
-
-
User Type:
-
- +
+
+ +
+
Username:
+ +
Please enter a valid username
+
-
-
- -
+
+
Email:
+ +
Please enter an email
+
Please enter a valid email
+
+
+
+
Password:
+ +
Please enter a valid password
+
+
+
+
User Type:
+
+ +
+
+
+ +
-
-
+
+
- - -
{{user.username}}
- - -
-
ID:
-
{{user._id}}
-
-
-
-
Email
-
{{user.email}}
-
-
-
-
User Type
-
{{(user.privileges == 1 ? "Super Admin" : ( user.privileges == 2 ? "Admin" : "Regular User") )}}
-
-
-
-
Password:
-
{{user.password}}
-
-
-
-
Password Tag:
-
{{user.passwordTag}}
-
-
-
-
Register Key:
-
{{user.registerKey}}
-
+ + +
{{user.username}}
+ + +
+
ID:
+
{{user._id}}
+
-
-
Last Logged In:
-
{{user.lastLoggedIn | date:"MM/dd/yyyy 'at' h:mma"}}
-
-
-
-
-
Remove User
+
+
Email
+
{{user.email}}
+
-
- - +
+
User Type
+
{{(user.privileges == 1 ? "Super Admin" : ( user.privileges == 2 ? "Admin" : "Regular User") )}}
+
+
+
+
Password:
+
{{user.password}}
+
+
+
+
Password Tag:
+
{{user.passwordTag}}
+
+
+
+
Register Key:
+
{{user.registerKey}}
+
+
+
+
Last Logged In:
+
{{user.lastLoggedIn | date:"MM/dd/yyyy 'at' h:mma"}}
+
+
+
+
+
Remove User
+
+
+ + +
\ No newline at end of file diff --git a/admin/lib/style.scss b/admin/lib/style.scss index a33a6377..d1c8f23c 100644 --- a/admin/lib/style.scss +++ b/admin/lib/style.scss @@ -42,6 +42,7 @@ Overrides for the TinyMCE editor @import 'directives/search-bar/style.scss'; @import 'directives/item-panel/style.scss'; @import 'directives/state-header/style.scss'; +@import 'directives/tick-box/style.scss'; @import 'states/default/style.scss'; @import 'states/login/style.scss'; @import 'states/register/style.scss'; @@ -180,21 +181,7 @@ form .nav-button { cursor:pointer; } -.tick-box { - width:20px; - height:20px; - cursor:pointer; -} -.tick { - width:120%; - height:120%; -} -.tick-box .tick { - top: -25%; -} -.tick-box{ - display:inline-block; -} + .filter-group { float: left; @@ -246,15 +233,7 @@ form input[type="text"].ng-invalid.ng-dirty, form input[type="password"].ng-inva form input[type="text"].ng-valid.ng-dirty, form input[type="password"].ng-valid.ng-dirty, form input[type="email"].ng-valid.ng-dirty { background:#d6ffd6; } -.tick-box { - background: #F0F0F0; -} -.tick-box:hover { - background: #dbdbdb; -} -.tick-box:active { - background: #ccc; -} + diff --git a/admin/tsconfig.json b/admin/tsconfig.json index b981b105..2f0dcf73 100644 --- a/admin/tsconfig.json +++ b/admin/tsconfig.json @@ -28,6 +28,7 @@ "lib/directives/error-modal/error-modal.ts", "lib/directives/item-panel/item-panel.ts", "lib/directives/state-header/state-header.ts", + "lib/directives/tick-box/tick-box.ts", "lib/authenticator.ts", "lib/config.ts", "lib/application.ts" diff --git a/server/dist/definitions/definitions.d.ts b/server/dist/definitions/definitions.d.ts index 7a25ae14..9c00352d 100644 --- a/server/dist/definitions/definitions.d.ts +++ b/server/dist/definitions/definitions.d.ts @@ -472,6 +472,26 @@ declare module clientAdmin { static factory(): ng.IDirectiveFactory; } } +declare module clientAdmin { + /** + * Simple directive a checkbox + */ + class TickBox implements ng.IDirective { + transclude: boolean; + restrict: string; + template: string; + scope: { + text: string; + checked: string; + onTicked: string; + }; + link(scope: any): void; + /** + * Creates an intance of the pager directive + */ + static factory(): ng.IDirectiveFactory; + } +} declare module clientAdmin { /** * An authentication service for checking if the user is logged in