From 9440d873a9d966d9a0e887e1e89276321ee022dc Mon Sep 17 00:00:00 2001 From: smartapant Date: Thu, 24 Dec 2015 19:20:58 +0300 Subject: [PATCH 1/3] Tabs directives begin. --- src/app/pages/form/wizard/step.html | 0 src/app/pages/form/wizard/wizard.html | 4 +- src/app/pages/form/wizard/wizard2.html | 25 +++++++++++++ src/app/pages/form/wizard/wizrdCtrl.js | 52 ++++++++++++++++++++++++++ src/sass/app/_form.scss | 22 +++++++++++ 5 files changed, 101 insertions(+), 2 deletions(-) create mode 100644 src/app/pages/form/wizard/step.html create mode 100644 src/app/pages/form/wizard/wizard2.html diff --git a/src/app/pages/form/wizard/step.html b/src/app/pages/form/wizard/step.html new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/form/wizard/wizard.html b/src/app/pages/form/wizard/wizard.html index fe59d96..96f8bdc 100644 --- a/src/app/pages/form/wizard/wizard.html +++ b/src/app/pages/form/wizard/wizard.html @@ -4,8 +4,8 @@
-
-
+
+
{{t.name}}
diff --git a/src/app/pages/form/wizard/wizard2.html b/src/app/pages/form/wizard/wizard2.html new file mode 100644 index 0000000..c9a44dd --- /dev/null +++ b/src/app/pages/form/wizard/wizard2.html @@ -0,0 +1,25 @@ +
+
+
+
+ {{t.name}} +
+
+
+ + +
+
+
+
+ +
+ + +
diff --git a/src/app/pages/form/wizard/wizrdCtrl.js b/src/app/pages/form/wizard/wizrdCtrl.js index c7ccb4c..64e618c 100644 --- a/src/app/pages/form/wizard/wizrdCtrl.js +++ b/src/app/pages/form/wizard/wizrdCtrl.js @@ -51,5 +51,57 @@ $scope.progress = 0; } + function baWizard() { + return { + restrict: 'E', + transclude: true, + scope: {}, + templateUrl: 'app/pages/form/wizard/wizard2.html', + controller: ['$scope', function ($scope) { + var vm = this; + + $scope.tabs = []; + + $scope.tab = 0; + $scope.progress = 0; + + $scope.$watch('tab', countProgress); + + $scope.selectTab = function (tab) { + $scope.tab = tab; + }; + + $scope.isSelectedTab = function (tab) { + return $scope.tab === tab; + }; + + $scope.isFirstTab = function () { + return $scope.tab == 0; + }; + + $scope.isLastTab = function () { + return $scope.tab == $scope.tabs.length - 1 ; + }; + + $scope.nextTab = function () { + $scope.tab++; + }; + + vm.addTab = function(tab) { + + }; + + $scope.previousTab = function () { + $scope.tab--; + }; + + function countProgress() { + $scope.progress = (($scope.tab + 1) / $scope.tabs.length) * 100; + } + + }] + } + } + })(); diff --git a/src/sass/app/_form.scss b/src/sass/app/_form.scss index ccd89f2..aacc147 100644 --- a/src/sass/app/_form.scss +++ b/src/sass/app/_form.scss @@ -498,4 +498,26 @@ label.custom-input-danger { .next { 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: $dribble-color; + } + transition: transform .5s ease; + &:hover{ + transform: skew(-10deg); + } + } } \ No newline at end of file From 1d42fc99e1f9988bb385fc9d3b9c4959d3cc4232 Mon Sep 17 00:00:00 2001 From: Vladimir Lugovsky Date: Thu, 24 Dec 2015 21:12:53 +0300 Subject: [PATCH 2/3] feat(blurPanel): refactor panels --- src/app/pages/form/form.module.js | 2 +- src/app/pages/form/wizard/step.html | 0 src/app/pages/form/wizard/tab.html | 1 + src/app/pages/form/wizard/wizard.html | 132 ++++------------------ src/app/pages/form/wizard/wizard2.html | 25 ---- src/app/pages/form/wizard/wizardPage.html | 110 ++++++++++++++++++ src/app/pages/form/wizard/wizrdCtrl.js | 63 +++++++---- src/sass/app/_form.scss | 6 +- 8 files changed, 175 insertions(+), 164 deletions(-) delete mode 100644 src/app/pages/form/wizard/step.html create mode 100644 src/app/pages/form/wizard/tab.html delete mode 100644 src/app/pages/form/wizard/wizard2.html create mode 100644 src/app/pages/form/wizard/wizardPage.html diff --git a/src/app/pages/form/form.module.js b/src/app/pages/form/form.module.js index f9d6cc1..8f3fca8 100644 --- a/src/app/pages/form/form.module.js +++ b/src/app/pages/form/form.module.js @@ -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' }) } diff --git a/src/app/pages/form/wizard/step.html b/src/app/pages/form/wizard/step.html deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/pages/form/wizard/tab.html b/src/app/pages/form/wizard/tab.html new file mode 100644 index 0000000..f1b36ce --- /dev/null +++ b/src/app/pages/form/wizard/tab.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/src/app/pages/form/wizard/wizard.html b/src/app/pages/form/wizard/wizard.html index 96f8bdc..5489266 100644 --- a/src/app/pages/form/wizard/wizard.html +++ b/src/app/pages/form/wizard/wizard.html @@ -1,119 +1,25 @@ -
- +
-
- -
-
-
- {{t.name}} -
-
-
- - -
-
-
-
- -
-
-
-
-
- - -
-
-
-
- - -
-
-
-
-
-
- - -
-
-
-
- - -
-
-
- -
- -
-
- - -
-
- - -
-
- -
- -
- -
-
- - -
-
- - -
-
- - -
-
- - - A block of help text that breaks onto a new line and may extend beyond one line. -
-
- - -
- -
- - -
+
+
+ {{t.title}} +
+
+
-
- -
-
- -
-
- - - +
+
-
\ No newline at end of file +
+ + +
diff --git a/src/app/pages/form/wizard/wizard2.html b/src/app/pages/form/wizard/wizard2.html deleted file mode 100644 index c9a44dd..0000000 --- a/src/app/pages/form/wizard/wizard2.html +++ /dev/null @@ -1,25 +0,0 @@ -
-
-
-
- {{t.name}} -
-
-
- - -
-
-
-
- -
- - -
diff --git a/src/app/pages/form/wizard/wizardPage.html b/src/app/pages/form/wizard/wizardPage.html new file mode 100644 index 0000000..dc29e04 --- /dev/null +++ b/src/app/pages/form/wizard/wizardPage.html @@ -0,0 +1,110 @@ +
+ +
+
+ + + +
+
+ + +
+
+ + +
+
+ +
+ +
+ + +
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+ + + +
+
+ +
+
+ +
+
+ +
+ +
+ + +
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+ + + +
+
+ +
\ No newline at end of file diff --git a/src/app/pages/form/wizard/wizrdCtrl.js b/src/app/pages/form/wizard/wizrdCtrl.js index 64e618c..c3cbfc1 100644 --- a/src/app/pages/form/wizard/wizrdCtrl.js +++ b/src/app/pages/form/wizard/wizrdCtrl.js @@ -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); + } + }; + } + })(); diff --git a/src/sass/app/_form.scss b/src/sass/app/_form.scss index aacc147..4fd4562 100644 --- a/src/sass/app/_form.scss +++ b/src/sass/app/_form.scss @@ -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; } } } \ No newline at end of file From dee9e105b6abf46180a42f348392f1178c58d696 Mon Sep 17 00:00:00 2001 From: smartapant Date: Wed, 30 Dec 2015 19:27:39 +0300 Subject: [PATCH 3/3] Wizard to controllerAs --- src/app/pages/form/form.module.js | 3 +- src/app/pages/form/wizard/wizard.html | 8 +- src/app/pages/form/wizard/wizardPage.html | 56 ++++++----- src/app/pages/form/wizard/wizrdCtrl.js | 116 ++++++++-------------- 4 files changed, 77 insertions(+), 106 deletions(-) diff --git a/src/app/pages/form/form.module.js b/src/app/pages/form/form.module.js index 8f3fca8..fa16785 100644 --- a/src/app/pages/form/form.module.js +++ b/src/app/pages/form/form.module.js @@ -23,7 +23,8 @@ { url: '/form-wizard', templateUrl: 'app/pages/form/wizard/wizardPage.html', - controller: 'WizardCtrl' + controller: 'WizardCtrl', + controllerAs: 'vm' }) } diff --git a/src/app/pages/form/wizard/wizard.html b/src/app/pages/form/wizard/wizard.html index 5489266..4d260e0 100644 --- a/src/app/pages/form/wizard/wizard.html +++ b/src/app/pages/form/wizard/wizard.html @@ -1,7 +1,7 @@
-
+
{{t.title}}
@@ -10,7 +10,7 @@
+ aria-valuenow="{{$baWizardController.progress}}" aria-valuemin="0" aria-valuemax="100" style="{{'width: ' + progress + '%;'}}">
@@ -18,8 +18,8 @@
diff --git a/src/app/pages/form/wizard/wizardPage.html b/src/app/pages/form/wizard/wizardPage.html index dc29e04..4811404 100644 --- a/src/app/pages/form/wizard/wizardPage.html +++ b/src/app/pages/form/wizard/wizardPage.html @@ -5,14 +5,14 @@ -
+
- +
- +