Added animations
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