Added animations
diff --git a/views/ngXosLib/gulp/ngXosHelpers.js b/views/ngXosLib/gulp/ngXosHelpers.js
index 157ab67..f50ba90 100644
--- a/views/ngXosLib/gulp/ngXosHelpers.js
+++ b/views/ngXosLib/gulp/ngXosHelpers.js
@@ -67,14 +67,15 @@
gulp.task('makeDocs', ['cleanDocs'], function(){
var ngOptions = {
scripts: [
- 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js',
- 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.js',
+ 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js',
+ 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-cookies.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-resource.js',
'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.2/lodash.js',
- `./${options.ngXosVendor}ngXosHelpers.js`
+ `./${options.ngXosVendor}ngXosHelpers.js`,
],
styles: [
+ `./${options.ngXosStyles}xosNgLib.css`,
'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css',
],
html5Mode: false,
@@ -106,7 +107,8 @@
server: {
baseDir: './docs',
routes: {
- '/xos/core/xoslib/static/js/vendor': options.ngXosVendor
+ '/xos/core/xoslib/static/js/vendor': options.ngXosVendor,
+ '/xos/core/static': options.ngXosStyles
}
}
});
diff --git a/views/ngXosLib/xosHelpers/src/styles/animations.scss b/views/ngXosLib/xosHelpers/src/styles/animations.scss
index 803d150..f565ff7 100644
--- a/views/ngXosLib/xosHelpers/src/styles/animations.scss
+++ b/views/ngXosLib/xosHelpers/src/styles/animations.scss
@@ -18,4 +18,27 @@
visibility: hidden;
transform: translate3d(100%, 0, 0);
}
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translate3d(0, 100%, 0);
+ }
+
+ to {
+ opacity: 1;
+ transform: none;
+ }
+}
+
+@keyframes fadeOutDown {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ transform: translate3d(0, 100%, 0);
+ }
}
\ No newline at end of file
diff --git a/views/ngXosLib/xosHelpers/src/styles/main.scss b/views/ngXosLib/xosHelpers/src/styles/main.scss
index eb51d7a..0780d49 100644
--- a/views/ngXosLib/xosHelpers/src/styles/main.scss
+++ b/views/ngXosLib/xosHelpers/src/styles/main.scss
@@ -1,3 +1,9 @@
@import './animations.scss';
-@import '../ui_components/dumbComponents/table/table.scss';
\ No newline at end of file
+@import '../ui_components/dumbComponents/table/table.scss';
+@import '../ui_components/dumbComponents/alert/alert.scss';
+@import '../ui_components/dumbComponents/validation/validation.scss';
+
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+ display: none !important;
+}
\ No newline at end of file
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/alert/alert.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/alert/alert.component.js
index 7d7a026..9b60def 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/alert/alert.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/alert/alert.component.js
@@ -75,7 +75,7 @@
</file>
</example>
- <example module="sampleAlert2">
+ <example module="sampleAlert2" animations="true">
<file name="index.html">
<div ng-controller="SampleCtrl as vm" class="row">
<div class="col-sm-4">
@@ -90,7 +90,7 @@
</div>
</file>
<file name="script.js">
- angular.module('sampleAlert2', ['xos.uiComponents'])
+ angular.module('sampleAlert2', ['xos.uiComponents', 'ngAnimate'])
.controller('SampleCtrl', function(){
this.config1 = {
type: 'success'
@@ -110,7 +110,7 @@
show: '=?'
},
template: `
- <div class="alert alert-{{vm.config.type}}" ng-show="vm.show">
+ <div ng-cloak class="alert alert-{{vm.config.type}}" ng-hide="!vm.show">
<button type="button" class="close" ng-if="vm.config.closeBtn" ng-click="vm.dismiss()">
<span aria-hidden="true">×</span>
</button>
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/alert/alert.scss b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/alert/alert.scss
new file mode 100644
index 0000000..f1330fe
--- /dev/null
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/alert/alert.scss
@@ -0,0 +1,10 @@
+@import '../../../styles/animations.scss';
+
+xos-alert {
+
+ /* when hiding */
+ .ng-hide-add { animation:0.5s fadeOutDown ease-in-out; }
+
+ /* when showing */
+ .ng-hide-remove { animation:0.5s fadeInUp ease-in-out; }
+}
\ No newline at end of file
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
index 539b1ee..7eb837e 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
@@ -81,14 +81,14 @@
</file>
</example>
- <example module="sampleTable2">
+ <example module="sampleTable2" animations="true">
<file name="index.html">
<div ng-controller="SampleCtrl2 as vm">
<xos-table data="vm.data" config="vm.config"></xos-table>
</div>
</file>
<file name="script.js">
- angular.module('sampleTable2', ['xos.uiComponents'])
+ angular.module('sampleTable2', ['xos.uiComponents', 'ngAnimate'])
.controller('SampleCtrl2', function(){
this.config = {
columns: [
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.scss b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.scss
index ee27104..cf1a30d 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.scss
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.scss
@@ -1,6 +1,10 @@
@import '../../../styles/animations.scss';
xos-table {
+
+ tr {
+ font-weight: bold;
+ }
tr.ng-move,
tr.ng-enter,
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation/validation.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation/validation.component.js
index 5cb7d08..84eb91a 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation/validation.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation/validation.component.js
@@ -28,10 +28,33 @@
<label>Set an error type:</label>
</div>
<div class="col-xs-2">
- <a class="btn" ng-click="vm.errors.email = true" ng-class="{'btn-default': !vm.errors.email, 'btn-success': vm.errors.email}">
+ <a class="btn"
+ ng-click="vm.errors.required = !vm.errors.required"
+ ng-class="{'btn-default': !vm.errors.required, 'btn-success': vm.errors.required}">
+ Required
+ </a>
+ </div>
+ <div class="col-xs-2">
+ <a class="btn"
+ ng-click="vm.errors.email = !vm.errors.email"
+ ng-class="{'btn-default': !vm.errors.email, 'btn-success': vm.errors.email}">
Email
</a>
</div>
+ <div class="col-xs-2">
+ <a class="btn"
+ ng-click="vm.errors.minlength = !vm.errors.minlength"
+ ng-class="{'btn-default': !vm.errors.minlength, 'btn-success': vm.errors.minlength}">
+ Min Length
+ </a>
+ </div>
+ <div class="col-xs-2">
+ <a class="btn"
+ ng-click="vm.errors.maxlength = !vm.errors.maxlength"
+ ng-class="{'btn-default': !vm.errors.maxlength, 'btn-success': vm.errors.maxlength}">
+ Max Length
+ </a>
+ </div>
</div>
<xos-validation errors="vm.errors"></xos-validation>
</div>
@@ -54,7 +77,7 @@
errors: '='
},
template: `
- <div>
+ <div ng-cloak>
<!-- <pre>{{vm.errors.email | json}}</pre> -->
<xos-alert config="vm.config" show="vm.errors.required !== undefined && vm.errors.required !== false">
Field required
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation/validation.scss b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation/validation.scss
new file mode 100644
index 0000000..aaf6e2f
--- /dev/null
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation/validation.scss
@@ -0,0 +1,7 @@
+@import '../../../styles/animations.scss';
+@import '../../../../../../style/sass/bootstrap/bootstrap/_variables.scss';
+
+input + xos-validation {
+ margin-top: $form-group-margin-bottom;
+ display: block;
+}
\ No newline at end of file
diff --git a/views/ngXosViews/sampleView/src/index.html b/views/ngXosViews/sampleView/src/index.html
index c6c90d9..2693838 100644
--- a/views/ngXosViews/sampleView/src/index.html
+++ b/views/ngXosViews/sampleView/src/index.html
@@ -3,11 +3,11 @@
<link rel="stylesheet" href="vendor/bootstrap-css/css/bootstrap.min.css" />
<!-- endbower --><!-- endcss -->
<!-- inject:css -->
-<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/../../../xos/core/static/xosNgLib.css">
+<link rel="stylesheet" href="/css/main.css">
<!-- endinject -->
-<div ng-app="xos.sampleView" id="xosSampleView" class="container-fluid">
+<div ng-cloak ng-app="xos.sampleView" id="xosSampleView" class="container-fluid">
<div ui-view></div>
</div>
diff --git a/views/ngXosViews/sampleView/src/js/main.js b/views/ngXosViews/sampleView/src/js/main.js
index 3cad7f4..d3aa494 100644
--- a/views/ngXosViews/sampleView/src/js/main.js
+++ b/views/ngXosViews/sampleView/src/js/main.js
@@ -94,6 +94,10 @@
class: 'success'
}
]
+ };
+
+ this.errors = {
+ email: false
}
// retrieving user list
diff --git a/views/ngXosViews/sampleView/src/templates/users-list.tpl.html b/views/ngXosViews/sampleView/src/templates/users-list.tpl.html
index f79f9ba..c1f7b20 100644
--- a/views/ngXosViews/sampleView/src/templates/users-list.tpl.html
+++ b/views/ngXosViews/sampleView/src/templates/users-list.tpl.html
@@ -7,7 +7,12 @@
<div class="row">
<div class="col-xs-12">
- <!-- <xos-form ng-model="vm.users[0]" config="vm.formConfig"></xos-form> -->
+ <xos-form ng-model="vm.users[0]" config="vm.formConfig"></xos-form>
+ <xos-alert config="vm.alertConfig">Random alert</xos-alert>
+ <a class="btn" ng-click="vm.errors.email = !vm.errors.email" ng-class="{'btn-default': !vm.errors.email, 'btn-success': vm.errors.email}">
+ Email
+ </a>
+ <xos-validation errors="vm.errors"></xos-validation>
</div>
</div>