mirror of https://github.com/akveo/blur-admin
Merge branch 'v2' of https://github.com/1itvinka/blur-admin into v2
alex
commit
784a533647
|
|
@ -22,8 +22,9 @@
|
||||||
.state('form-wizard',
|
.state('form-wizard',
|
||||||
{
|
{
|
||||||
url: '/form-wizard',
|
url: '/form-wizard',
|
||||||
templateUrl: 'app/pages/form/wizard/wizard.html',
|
templateUrl: 'app/pages/form/wizard/wizardPage.html',
|
||||||
controller: 'WizardCtrl'
|
controller: 'WizardCtrl',
|
||||||
|
controllerAs: 'vm'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<section ng-show="selected" class="tab" ng-transclude></section>
|
||||||
|
|
@ -1,12 +1,8 @@
|
||||||
<div class="widgets">
|
<div class="wizard">
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12">
|
<div class="wizard-navigation-container">
|
||||||
<blur-panel title="Form Wizard" class-container="with-scroll">
|
<div ng-repeat="t in $baWizardController.tabs" class="wizard-navigation {{$baWizardController.tabNum == $index ? 'active' : ''}}" ng-click="$baWizardController.selectTab($index)">
|
||||||
<div class="row">
|
{{t.title}}
|
||||||
<div class="mail-navigation-container">
|
|
||||||
<div ng-repeat="t in tabs" class="mail-navigation {{tab == $index ? 'active' : ''}}" ng-click="selectTab($index)">
|
|
||||||
{{t.name}}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -14,106 +10,16 @@
|
||||||
|
|
||||||
<div class="progress progress-wizard">
|
<div class="progress progress-wizard">
|
||||||
<div class="progress-bar progress-bar-info active" role="progressbar"
|
<div class="progress-bar progress-bar-info active" role="progressbar"
|
||||||
aria-valuenow="{{progress}}" aria-valuemin="0" aria-valuemax="100" style="{{'width: ' + progress + '%;'}}">
|
aria-valuenow="{{$baWizardController.progress}}" aria-valuemin="0" aria-valuemax="100" style="{{'width: ' + progress + '%;'}}">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form id="wizardForm">
|
<div class="steps" ng-transclude></div>
|
||||||
<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>
|
<nav>
|
||||||
<ul class="pager wizard-pager">
|
<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">←</span> previous</button></li>
|
<li class="previous"><button ng-disabled="$baWizardController.isFirstTab()" ng-click="$baWizardController.previousTab()" type="button" class=" btn btn-primary"><span aria-hidden="true">←</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">→</span></button></li>
|
<li class="next"> <button ng-disabled="$baWizardController.isLastTab()" ng-click="$baWizardController.nextTab()" type="button" class="btn btn-primary">next <span aria-hidden="true">→</span></button></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</blur-panel>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -0,0 +1,112 @@
|
||||||
|
<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 name="vm.personalInfoForm" novalidate>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="exampleInputEmail1">Email address</label>
|
||||||
|
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" required max="5">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="exampleInputPassword1">Password</label>
|
||||||
|
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" required>
|
||||||
|
</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">
|
||||||
|
<form name="productInfoForm" novalidate>
|
||||||
|
<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>
|
||||||
|
</form>
|
||||||
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||||||
|
</ba-wizard-tab>
|
||||||
|
<ba-wizard-tab title="Payment">
|
||||||
|
<form class="row form-inline" name="paymentForm" novalidate>
|
||||||
|
<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" name="finishForm" novalidate>
|
||||||
|
<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>
|
||||||
|
|
@ -2,53 +2,96 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
angular.module('BlurAdmin.pages.form')
|
angular.module('BlurAdmin.pages.form')
|
||||||
.controller('WizardCtrl', WizardCtrl);
|
.controller('WizardCtrl', WizardCtrl)
|
||||||
|
.directive('baWizard', baWizard)
|
||||||
|
.directive('baWizardTab', baWizardTab);
|
||||||
|
|
||||||
/** @ngInject */
|
/** @ngInject */
|
||||||
function WizardCtrl($scope, $location, $sce) {
|
function WizardCtrl($scope, $location, $sce) {
|
||||||
$scope.tabs = [
|
var vm = this;
|
||||||
{
|
setTimeout(function (evt, isValid) {
|
||||||
name: 'Step 1'
|
console.log(vm.personalInfoForm);
|
||||||
},
|
$scope.formValid = isValid;
|
||||||
{
|
}, 1000);
|
||||||
name: 'Step 2'
|
$scope.bla= 'Ctrl'
|
||||||
},
|
}
|
||||||
{
|
|
||||||
name: 'Step 3'
|
|
||||||
}];
|
|
||||||
|
|
||||||
$scope.$watch('tab', countProgress);
|
function baWizard() {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
transclude: true,
|
||||||
|
templateUrl: 'app/pages/form/wizard/wizard.html',
|
||||||
|
controllerAs: '$baWizardController',
|
||||||
|
controller: ['$scope', function ($scope) {
|
||||||
|
var vm = this;
|
||||||
|
vm.tabs = [];
|
||||||
|
|
||||||
$scope.selectTab = function (tab) {
|
vm.tabNum = 0;
|
||||||
$scope.tab = tab;
|
vm.progress = 0;
|
||||||
|
|
||||||
|
vm.addTab = function(tab) {
|
||||||
|
vm.tabs.push(tab);
|
||||||
|
vm.selectTab(0);
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.isSelectedTab = function (tab) {
|
$scope.$watch(angular.bind(vm, function () {return vm.tabNum;}), countProgress);
|
||||||
return $scope.tab === tab;
|
|
||||||
|
vm.selectTab = function (tabNum) {
|
||||||
|
vm.tabNum = tabNum;
|
||||||
|
vm.tabs.forEach(function (t, tIndex) {
|
||||||
|
tIndex == vm.tabNum ? t.select(true) : t.select(false);
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.isFirstTab = function () {
|
vm.isFirstTab = function () {
|
||||||
return $scope.tab == 0;
|
return vm.tabNum == 0;
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.isLastTab = function () {
|
vm.isLastTab = function () {
|
||||||
return $scope.tab == $scope.tabs.length - 1 ;
|
return vm.tabNum == vm.tabs.length - 1 ;
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.nextTab = function () {
|
vm.nextTab = function () {
|
||||||
$scope.tab++;
|
vm.tabNum++;
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.previousTab = function () {
|
vm.previousTab = function () {
|
||||||
$scope.tab--;
|
vm.tabNum--;
|
||||||
};
|
};
|
||||||
|
|
||||||
function countProgress() {
|
function countProgress() {
|
||||||
$scope.progress = (($scope.tab + 1) / $scope.tabs.length) * 100;
|
vm.progress = ((vm.tabNum + 1) / vm.tabs.length) * 100;
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$scope.tab = 0;
|
function baWizardTab() {
|
||||||
$scope.progress = 0;
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
transclude: true,
|
||||||
|
require: '^baWizard',
|
||||||
|
scope: {
|
||||||
|
availability: '='
|
||||||
|
},
|
||||||
|
templateUrl: 'app/pages/form/wizard/tab.html',
|
||||||
|
link: function($scope, $element, $attrs, wizard) {
|
||||||
|
$scope.selected = true;
|
||||||
|
|
||||||
|
function select(isSelected) {
|
||||||
|
if (isSelected) {
|
||||||
|
$scope.selected = true;
|
||||||
|
} else {
|
||||||
|
$scope.selected = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
wizard.addTab({
|
||||||
|
title: $attrs.title,
|
||||||
|
select: select
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|
|
||||||
|
|
@ -499,3 +499,21 @@ label.custom-input-danger {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wizard-navigation-container {
|
||||||
|
display: table;
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px 0;
|
||||||
|
.wizard-navigation {
|
||||||
|
cursor: pointer;
|
||||||
|
display: table-cell;
|
||||||
|
line-height: 1;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 100;
|
||||||
|
font-size: 18px;
|
||||||
|
&.active {
|
||||||
|
color: $primary-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue