Skip to content

Commit

Permalink
extract widget directive, login page uii
Browse files Browse the repository at this point in the history
  • Loading branch information
@okendoken
okendoken committed Mar 31, 2015
1 parent decf641 commit 91800c6
Show file tree
Hide file tree
Showing 16 changed files with 186 additions and 165 deletions.
17 changes: 17 additions & 0 deletions src/app/modules/common/widget/widget.js
View file
@@ -0,0 +1,17 @@
(function() {
'use strict';

angular.module('app.common')
.directive('widget', widget);

function widget() {
function link(scope, $element) {
$element.addClass('widget');
}
return {
link: link,
restrict: 'EA'
};
}

})();
100 changes: 49 additions & 51 deletions src/app/modules/dashboard/dash_users/dash_users.html
View file
@@ -1,51 +1,49 @@
<div class="widget">
<div class="pull-right mt-n-xs"><input class="form-control input-sm" type="search" placeholder="Search..."/></div>
<h5 class="widget-title">
<i class="glyphicon glyphicon-user mr-xs"></i>
Users
</h5>
<table class="table mb-0">
<thead>
<tr>
<th>ID</th>
<th>Username</th>
<th>Email</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alice</td>
<td>
alice@email.com
</td>
<td><span class="label label-success">active</span></td>
</tr>
<tr>
<td>2</td>
<td>Bob</td>
<td>
bob@email.com
</td>
<td><span class="label label-warning text-gray-dark">delayed</span></td>
</tr>
<tr>
<td>3</td>
<td>Duck</td>
<td >
duck@email.com
</td>
<td><span class="label label-success">active</span></td>
</tr>
<tr>
<td>4</td>
<td>Shepherd</td>
<td>
shepherd@email.com
</td>
<td><span class="label bg-gray-light">removed</span></td>
</tr>
</tbody>
</table>
</div>
<div class="pull-right mt-n-xs"><input class="form-control input-sm" type="search" placeholder="Search..."/></div>
<h5 class="widget-title">
<i class="glyphicon glyphicon-user mr-xs"></i>
Users
</h5>
<table class="table mb-0">
<thead>
<tr>
<th>ID</th>
<th>Username</th>
<th>Email</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alice</td>
<td>
alice@email.com
</td>
<td><span class="label label-success">active</span></td>
</tr>
<tr>
<td>2</td>
<td>Bob</td>
<td>
bob@email.com
</td>
<td><span class="label label-warning text-gray-dark">delayed</span></td>
</tr>
<tr>
<td>3</td>
<td>Duck</td>
<td >
duck@email.com
</td>
<td><span class="label label-success">active</span></td>
</tr>
<tr>
<td>4</td>
<td>Shepherd</td>
<td>
shepherd@email.com
</td>
<td><span class="label bg-gray-light">removed</span></td>
</tr>
</tbody>
</table>
28 changes: 24 additions & 4 deletions src/app/modules/dashboard/dashboard.html
View file
Expand Up @@ -33,15 +33,35 @@
</div>

<div class="row">
<div class="col-md-6" ng-include="'app/modules/dashboard/dash_users/dash_users.html'"></div>
<div class="col-md-6">
<widget ng-include="'app/modules/dashboard/dash_users/dash_users.html'">
</widget>
</div>
<div class="col-md-6">
<alert data-ng-repeat="alert in alerts" data-type="{{alert.type}} alert-sm" data-close="closeAlert($index)">
<div data-ng-bind-html="alert.msg"></div>
</alert>
</div>
</div>
<div class="row">
<div class="col-md-6" recently-published posts="posts"></div>
<div class="col-md-6">
<widget>
<small class="pull-right"><a class="td-underline text-muted" href="#"><span class="text-muted">Options</span></a></small>
<h5 class="widget-title">
Recently <span class="fw-semi-bold">Published</span>
<span class="badge bg-success">17</span>
</h5>
<p class="text-muted mt-n-sm small">posts, that have been created recently</p>
<table class="table table-no-border table-sm mb-0">
<tr ng-repeat="post in postsRecently">
<td>{{post.date | date:' MMM dd, hh:mm'}}</td>
<td>
<a ui-sref="app.editPost({id: post.id})">{{post.title}}</a>
</td>
</tr>
</table>
</widget>
</div>
<div class="col-md-6">
<div class="list-group no-border">
<a href="#" class="list-group-item"><i class="glyphicon glyphicon-phone mr-xs opacity-70"></i> Incoming calls <span class="badge bg-danger">3</span></a>
Expand All @@ -54,7 +74,7 @@
</div>
<div class="row">
<div class="col-md-6">
<section class="widget">
<widget>
<h5 class="widget-title"><i class="glyphicon glyphicon-cog mr-xs"></i> Custom <span class="fw-semi-bold">Loader</span></h5>
<div class="widget-body" style="min-height: 157px">
<div class="loader">
Expand All @@ -63,6 +83,6 @@ <h5 class="widget-title"><i class="glyphicon glyphicon-cog mr-xs"></i> Custom <s
</span>
</div>
</div>
</section>
</widget>
</div>
</div>
1 change: 1 addition & 0 deletions src/app/modules/dashboard/dashboard.js
View file
Expand Up @@ -9,6 +9,7 @@
$scope.posts = posts;
$scope.postsLastMonth = postsUtils.postsDuringInterval(posts, 30);
$scope.lastEditedPost = postsUtils.lastEdited(posts);
$scope.postsRecently = postsUtils.recent(posts, 5);
$scope.alerts = [
{ type: 'warning', msg: $sce.trustAsHtml('<span class="fw-semi-bold">Warning:</span> Best check yo self, you\'re not looking too good.') },
{ type: 'success', msg: $sce.trustAsHtml('<span class="fw-semi-bold">Success:</span> You successfully read this important alert message.') },
Expand Down
16 changes: 0 additions & 16 deletions src/app/modules/dashboard/recently_published/recently_published.html
View file

This file was deleted.

26 changes: 0 additions & 26 deletions src/app/modules/dashboard/recently_published/recently_published.js
View file

This file was deleted.

4 changes: 2 additions & 2 deletions src/app/modules/post/edit/edit.html
View file
Expand Up @@ -4,7 +4,7 @@
</ol>
<div class="row">
<div class="col-md-8">
<div class="widget">
<widget>
<h4 class="mt-0">{{vm.post.id ? 'Edit post' : 'Create new'}} post</h4>
<form novalidate role="form" name="postForm" class="form-horizontal mt" ng-submit="postForm.$valid && (vm.post.id ? vm.update() : vm.save())" >
<div class="form-group">
Expand Down Expand Up @@ -47,6 +47,6 @@ <h4 class="mt-0">{{vm.post.id ? 'Edit post' : 'Create new'}} post</h4>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</widget>
</div>
</div>
4 changes: 2 additions & 2 deletions src/app/modules/post/list/posts.html
View file
Expand Up @@ -4,7 +4,7 @@
</ol>
<div class="row">
<div class="col-md-12">
<div class="widget posts-list">
<widget>
<header>
<button type="button" class="btn btn-sm btn-gray mt-n-xs pull-right" ui-sref="app.editPost({id: null})">Create new post</button>
<h4 class="widget-title">Posts</h4>
Expand All @@ -27,6 +27,6 @@ <h4 class="widget-title">Posts</h4>
</tr>
</tbody>
</table>
</div>
</widget>
</div>
</div>
4 changes: 0 additions & 4 deletions src/app/modules/post/posts.html
View file

This file was deleted.

117 changes: 64 additions & 53 deletions src/app/modules/profile/auth/login.html
View file
@@ -1,55 +1,66 @@
<div class="container">
<main id="content" class="widget-login-container" role="main">
<div class="row">
<div class="col-lg-4 col-sm-6 col-xs-10 col-lg-offset-4 col-sm-offset-3 col-xs-offset-1">
<section class="widget widget-login">
<header>
<h3>Dashboard login</h3>
</header>
<div class="widget-body">
<form role="form" novalidate name="loginForm" class="login-form mt-lg" ng-submit="loginForm.$valid && vm.login()">
<div class="alert alert-danger" role="alert" ng-show="vm.responseErrorMsg">
{{vm.responseErrorMsg}}
</div>
<div class="form-group">
<input type="text" class="form-control" required ng-minlength=3 ng-maxlength=20
ng-model="vm.user.username" name="username" placeholder="Username">
<div ng-show="loginForm.username.$invalid && (loginForm.username.$dirty || loginForm.$submitted)">
<small class="error" ng-show="loginForm.username.$error.required">
Username is required.
</small>
<small class="error" ng-show="loginForm.username.$error.minlength">
Username is required to be at least 3 characters
</small>
<small class="error" ng-show="loginForm.username.$error.maxlength">
Username cannot be longer than 20 characters
</small>
</div>
</div>
<div class="form-group">
<input class="form-control" required ng-minlength=3 ng-maxlength=20
ng-model="vm.user.password" name="password" type="password" placeholder="Password" >
<div ng-show="loginForm.password.$invalid && (loginForm.password.$dirty || loginForm.$submitted)">
<small class="error" ng-show="loginForm.password.$error.required">
Password is required.
</small>
<small class="error" ng-show="loginForm.password.$error.minlength">
Password is required to be at least 3 characters
</small>
<small class="error" ng-show="loginForm.password.$error.maxlength">
Password cannot be longer than 20 characters
</small>
</div>
</div>
<div class="clearfix">
<div class="btn-toolbar pull-right">
<button type="submit" class="btn btn-danger btn-sm">Login</button>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
</main>
<main id="content" class="widget-login-container" role="main">
<div class="row">
<div class="col-lg-4 col-sm-6 col-xs-10 col-lg-offset-4 col-sm-offset-3 col-xs-offset-1">
<h5 class="text-center text-muted">ngDashboard <sup class="fw-semi-bold text-warning">beta</sup></h5>
<widget class="widget-login">
<header>
<h3 class="mt-0">Login to your Web App</h3>
</header>
<div class="widget-body">
<p class="fs-mini text-muted">
User your username and password to sign in <br/>
Don't have an account? Sign up now!
</p>
<form role="form" novalidate name="loginForm" class="login-form mt-lg" ng-submit="loginForm.$valid && vm.login()">
<div class="alert alert-danger" role="alert" ng-show="vm.responseErrorMsg">
{{vm.responseErrorMsg}}
</div>
<div class="form-group">
<input type="text" class="form-control" required ng-minlength=3 ng-maxlength=20
ng-model="vm.user.username" name="username" placeholder="Username">
<div ng-show="loginForm.username.$invalid && (loginForm.username.$dirty || loginForm.$submitted)">
<small class="error" ng-show="loginForm.username.$error.required">
Username is required.
</small>
<small class="error" ng-show="loginForm.username.$error.minlength">
Username is required to be at least 3 characters
</small>
<small class="error" ng-show="loginForm.username.$error.maxlength">
Username cannot be longer than 20 characters
</small>
</div>
</div>
<div class="form-group">
<input class="form-control" required ng-minlength=3 ng-maxlength=20
ng-model="vm.user.password" name="password" type="password" placeholder="Password" >
<div ng-show="loginForm.password.$invalid && (loginForm.password.$dirty || loginForm.$submitted)">
<small class="error" ng-show="loginForm.password.$error.required">
Password is required.
</small>
<small class="error" ng-show="loginForm.password.$error.minlength">
Password is required to be at least 3 characters
</small>
<small class="error" ng-show="loginForm.password.$error.maxlength">
Password cannot be longer than 20 characters
</small>
</div>
</div>
<div class="clearfix">
<div class="btn-toolbar pull-right">
<button type="reset" class="btn btn-default btn-sm">Create an account</button>
<button type="submit" class="btn btn-sidebar btn-sm">Login</button>
</div>
<a class="mt-sm pull-right fs-mini" href="#">Trouble with account?</a>
</div>

</form>
</div>
</widget>
</div>
</div>
</main>
<footer class="page-footer">
2015 &copy; Flatlogic. Angular Dashboard Seed Project
</footer>
</div>

0 comments on commit 91800c6

Please sign in to comment.