jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(blurPanel): refactor panels

pull/3/head
Vladimir Lugovsky 2015-12-24 21:12:53 +03:00
parent 9440d873a9
commit 1d42fc99e1
8 changed files with 177 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/pages/form/form.module.js
View File

@ -22,7 +22,7 @@
.state('form-wizard',
{
url: '/form-wizard',
templateUrl: 'app/pages/form/wizard/wizard.html',
templateUrl: 'app/pages/form/wizard/wizardPage.html',
controller: 'WizardCtrl'
})
}

0
src/app/pages/form/wizard/step.html
View File

1
src/app/pages/form/wizard/tab.html Normal file
View File

@ -0,0 +1 @@
<section ng-show="selected" class="tab" ng-transclude></section>

136
src/app/pages/form/wizard/wizard.html
View File

@ -1,119 +1,25 @@
<div class="widgets">
<div class="wizard">
<div class="row">
<div class="col-md-12">
<blur-panel title="Form Wizard" class-container="with-scroll">
<div class="row">
<div class="wizard-navigation-container">
<div ng-repeat="t in tabs" class="wizard-navigation {{tab == $index ? 'active' : ''}}" ng-click="selectTab($index)">
{{t.name}}
</div>
</div>
</div>
<div class="progress progress-wizard">
<div class="progress-bar progress-bar-info active" role="progressbar"
aria-valuenow="{{progress}}" aria-valuemin="0" aria-valuemax="100" style="{{'width: ' + progress + '%;'}}">
</div>
</div>
<form id="wizardForm">
<div ng-show="tab == 0">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="inputFirstName">First Name</label>
<input type="text" class="form-control" id="inputFirstName" placeholder="First Name">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputLastName">Last Name</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Last Name">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="inputFirstName">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputWebsite">Website</label>
<input type="text" class="form-control" id="inputWebsite" placeholder="Website">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<div ng-show="tab == 1">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox">
<span>Check me out</span>
</label>
</div>
<button type="submit" class="btn btn-danger">Submit</button>
</div>
<div ng-show="tab == 2">
<div class="form-group">
<label for="input01">Text</label>
<input type="text" class="form-control" id="input01" placeholder="Text">
</div>
<div class="form-group">
<label for="input02">Password</label>
<input type="password" class="form-control" id="input02" placeholder="Password">
</div>
<div class="form-group">
<label for="input03">Rounded Corners</label>
<input type="text" class="form-control form-control-rounded" id="input03" placeholder="Rounded Corners">
</div>
<div class="form-group">
<label for="input04">With help</label>
<input type="text" class="form-control" id="input04" placeholder="With help">
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group">
<label for="input05">Disabled Input</label>
<input type="text" class="form-control" id="input05" placeholder="Disabled Input" disabled>
</div>
<div class="form-group">
<label for="textarea01">Textarea</label>
<textarea placeholder="Default Input" class="form-control" id="textarea01"></textarea>
</div>
<div class="form-group">
<input type="text" class="form-control input-sm" id="input2" placeholder="Small Input">
</div>
<div class="form-group">
<input type="text" class="form-control input-lg" id="input4" placeholder="Large Input">
</div>
</div>
</form>
<nav>
<ul class="pager wizard-pager">
<li class="previous"><button ng-disabled="isFirstTab()" ng-click="previousTab()" type="button" class=" btn btn-primary"><span aria-hidden="true">&larr;</span> previous</button></li>
<li class="next"> <button ng-disabled="isLastTab()" ng-click="nextTab()" type="button" class="btn btn-primary">next <span aria-hidden="true">&rarr;</span></button></li>
</ul>
</nav>
</blur-panel>
<div class="wizard-navigation-container">
<div ng-repeat="t in tabs" class="wizard-navigation {{tabNum == $index ? 'active' : ''}}" ng-click="selectTab($index)">
{{t.title}}
</div>
</div>
</div>
</div>
<div class="progress progress-wizard">
<div class="progress-bar progress-bar-info active" role="progressbar"
aria-valuenow="{{progress}}" aria-valuemin="0" aria-valuemax="100" style="{{'width: ' + progress + '%;'}}">
</div>
</div>
<div class="steps" ng-transclude></div>
<nav>
<ul class="pager wizard-pager">
<li class="previous"><button ng-disabled="isFirstTab()" ng-click="previousTab()" type="button" class=" btn btn-primary"><span aria-hidden="true">&larr;</span> previous</button></li>
<li class="next"> <button ng-disabled="isLastTab()" ng-click="nextTab()" type="button" class="btn btn-primary">next <span aria-hidden="true">&rarr;</span></button></li>
</ul>
</nav>
</div>

25
src/app/pages/form/wizard/wizard2.html
View File

@ -1,25 +0,0 @@
<div class="wizard">
<div class="row">
<div class="wizard-navigation-container">
<div ng-repeat="t in tabs" class="wizard-navigation {{tab == $index ? 'active' : ''}}" ng-click="selectTab($index)">
{{t.name}}
</div>
</div>
</div>
<div class="progress progress-wizard">
<div class="progress-bar progress-bar-info active" role="progressbar"
aria-valuenow="{{progress}}" aria-valuemin="0" aria-valuemax="100" style="{{'width: ' + progress + '%;'}}">
</div>
</div>
<div class="steps" ng-transclude></div>
<nav>
<ul class="pager wizard-pager">
<li class="previous"><button ng-disabled="isFirstTab()" ng-click="previousTab()" type="button" class=" btn btn-primary"><span aria-hidden="true">&larr;</span> previous</button></li>
<li class="next"> <button ng-disabled="isLastTab()" ng-click="nextTab()" type="button" class="btn btn-primary">next <span aria-hidden="true">&rarr;</span></button></li>
</ul>
</nav>
</div>

110
src/app/pages/form/wizard/wizardPage.html Normal file
View File

@ -0,0 +1,110 @@
<div class="widgets">
<div class="row">
<div class="col-md-12">
<blur-panel title="Form Wizard" class-container="with-scroll">
<ba-wizard>
<ba-wizard-tab title="Personal info">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox">
<span>Check me out</span>
</label>
</div>
<button type="submit" class="btn btn-danger">Submit</button>
</form>
</ba-wizard-tab>
<ba-wizard-tab title="Product Info">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="inputFirstName">First Name</label>
<input type="text" class="form-control" id="inputFirstName" placeholder="First Name">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputLastName">Last Name</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Last Name">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="inputFirstName">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputWebsite">Website</label>
<input type="text" class="form-control" id="inputWebsite" placeholder="Website">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</ba-wizard-tab>
<ba-wizard-tab title="Payment">
<form class="row form-inline">
<div class="form-group col-sm-3 col-xs-6">
<input type="text" class="form-control" id="exampleInputName2" placeholder="Name">
</div>
<div class="form-group col-sm-3 col-xs-6">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email">
</div>
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox">
<span>Remember me</span>
</label>
</div>
<button type="submit" class="btn btn-primary">Send invitation</button>
</form>
</ba-wizard-tab>
<ba-wizard-tab title="Finish">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox">
<span>Remember me</span>
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-warning">Sign in</button>
</div>
</div>
</form>
</ba-wizard-tab>
</ba-wizard>
</blur-panel>
</div>
</div>
</div>

63
src/app/pages/form/wizard/wizrdCtrl.js
View File

@ -2,7 +2,9 @@
'use strict';
angular.module('BlurAdmin.pages.form')
.controller('WizardCtrl', WizardCtrl);
.controller('WizardCtrl', WizardCtrl)
.directive('baWizard', baWizard)
.directive('baWizardTab', baWizardTab);
/** @ngInject */
function WizardCtrl($scope, $location, $sce) {
@ -56,52 +58,73 @@
restrict: 'E',
transclude: true,
scope: {},
templateUrl: 'app/pages/form/wizard/wizard2.html',
templateUrl: 'app/pages/form/wizard/wizard.html',
controller: ['$scope', function ($scope) {
var vm = this;
$scope.tabs = [];
$scope.tab = 0;
$scope.tabNum = 0;
$scope.progress = 0;
$scope.$watch('tab', countProgress);
$scope.selectTab = function (tab) {
$scope.tab = tab;
vm.addTab = function(tab) {
$scope.tabs.push(tab);
$scope.selectTab(0);
};
$scope.isSelectedTab = function (tab) {
return $scope.tab === tab;
$scope.$watch('tabNum', countProgress);
$scope.selectTab = function (tabNum) {
$scope.tabNum = tabNum;
$scope.tabs.forEach(function (t, tIndex) {
tIndex == $scope.tabNum ? t.select(true) : t.select(false);
});
};
$scope.isFirstTab = function () {
return $scope.tab == 0;
return $scope.tabNum == 0;
};
$scope.isLastTab = function () {
return $scope.tab == $scope.tabs.length - 1 ;
return $scope.tabNum == $scope.tabs.length - 1 ;
};
$scope.nextTab = function () {
$scope.tab++;
};
vm.addTab = function(tab) {
$scope.tabNum++;
};
$scope.previousTab = function () {
$scope.tab--;
$scope.tabNum--;
};
function countProgress() {
$scope.progress = (($scope.tab + 1) / $scope.tabs.length) * 100;
$scope.progress = (($scope.tabNum + 1) / $scope.tabs.length) * 100;
}
}]
}
}
function baWizardTab() {
return {
restrict: 'E',
transclude: true,
scope: {
title: '@'
},
require: '^baWizard',
templateUrl: 'app/pages/form/wizard/tab.html',
link: function($scope, $element, $attrs, wizard) {
$scope.selected = false;
$scope.select = function(isSelected) {
if (isSelected) {
$scope.selected = true;
} else {
$scope.selected = false;
}
} ;
wizard.addTab($scope);
}
};
}
})();

6
src/sass/app/_form.scss
View File

@ -513,11 +513,7 @@ label.custom-input-danger {
font-weight: 100;
font-size: 18px;
&.active {
color: $dribble-color;
}
transition: transform .5s ease;
&:hover{
transform: skew(-10deg);
color: $primary-dark;
}
}
}