diff --git a/web/app/index.html b/web/app/index.html
index 9414bf3248e7e6765198639158698c0bc80969b0..10d69f84c85048ddd70b227967258e2b97bafbc3 100644
--- a/web/app/index.html
+++ b/web/app/index.html
@@ -24,7 +24,7 @@
<li><a href="">Ouvidoria</a></li>
<li><a href="">Mapa do site</a></li>
</ul>
-
+
<div class="header-font-size">
<a class="dec" href="#" title="Diminuir fonte">A-</a>
<a class="reset" href="#" title="Tamanho normal da fonte">A </a>
@@ -40,24 +40,20 @@
</div>
</div>
- <div class="big-button-row ng-hide" ng-class="bigButtons.collapsedClass" ng-show="bigButtons.show">
+ <div class="big-button-row" ng-class="bigButtons.rowClass" mc-collapsed-class="bigButtons.collapsed">
<div class="container">
- <a href="#/attendance" class="big-button dark" ng-class="bigButtons.attendanceClass">
- <span class="big-button-icon icon-charts"></span>
- <p>Acompanhamento</p>
- </a>
- <a href="#/install" class="big-button medium" ng-class="bigButtons.installClass">
- <span class="big-button-icon icon-install"></span>
- <p>Instalação</p>
- </a>
- <a href="#/doc" class="big-button light" ng-class="bigButtons.docClass">
- <span class="big-button-icon icon-doc"></span>
- <p>Documentação</p>
+ <a ng-repeat="item in bigButtons.items | orderBy:bigButtons.order" href="{{item.link}}" class="big-button" ng-class="item.color" mc-active-class="item.active">
+ <span class="big-button-icon" ng-class="item.icon"></span>
+ <p>{{item.title}}</p>
</a>
</div>
</div>
<div class="container">
+ <div ng-show="bigButtons.collapsed">
+ <div ng-include="'partials/breadcrumb.html'"></div>
+ </div>
+
<div ui-view></div>
</div>
diff --git a/web/app/js/app.js b/web/app/js/app.js
index 6e73a4b5343c610e9d0c3c787ede7a5e5d9a0b8a..1776f96ce3cb642272a77dceaaa1ed9f52374df7 100644
--- a/web/app/js/app.js
+++ b/web/app/js/app.js
@@ -11,16 +11,19 @@ angular.module('datasid', ['ngResource', 'ui.router', 'datasid.controllers', 'da
state('attendance', {
url: '/attendance',
templateUrl: 'partials/attendance.html',
- controller: 'AttendanceCtrl'
+ controller: 'AttendanceCtrl',
+ section: 'attendance'
}).
state('install', {
url: '/install',
templateUrl: 'partials/install.html',
- controller: 'InstallCtrl'
+ controller: 'InstallCtrl',
+ section: 'install'
}).
state('doc', {
url: '/doc',
templateUrl: 'partials/doc.html',
- controller: 'DocCtrl'
+ controller: 'DocCtrl',
+ section: 'doc'
});
});
\ No newline at end of file
diff --git a/web/app/js/controllers.js b/web/app/js/controllers.js
index ad404ff85a960dbda291c04c2c1212edccef05e6..3b5b0068b59906bdd5836f80e2c888f6969a546a 100644
--- a/web/app/js/controllers.js
+++ b/web/app/js/controllers.js
@@ -1,47 +1,71 @@
'use strict';
angular.module('datasid.controllers', []).
- controller('MainCtrl', function ($scope, $rootScope) {
+ controller('MainCtrl', function ($scope, $rootScope, $state) {
$scope.bigButtons = {
- collapsedClass: "",
- attendanceClass: "",
- installClass: "",
- docClass: "",
- show: false,
+ collapsed: false,
+ rowClass: "",
+ order: "",
+ current: null,
+ items: [
+ {
+ title: "Acompanhamento",
+ icon: "icon-charts",
+ color: "dark",
+ link: "#/attendance",
+ section: "attendance",
+ active: false
+ },
+ {
+ title: "Instalação",
+ icon: "icon-install",
+ color: "medium",
+ link: "#/install",
+ section: "install",
+ active: false
+ },
+ {
+ title: "Documentação",
+ icon: "icon-doc",
+ color: "light",
+ link: "#/doc",
+ section: "doc",
+ active: false
+ },
+ ],
+ }
- collapse: function () {
- $scope.bigButtons.collapsedClass = "collapsed";
- $scope.bigButtons.attendanceClass = "";
- $scope.bigButtons.installClass = "";
- $scope.bigButtons.docClass = "";
- $scope.bigButtons.show = true;
- },
-
- uncollapse: function () {
- $scope.bigButtons.collapsedClass = "";
- $scope.bigButtons.attendanceClass = "";
- $scope.bigButtons.installClass = "";
- $scope.bigButtons.docClass = "";
- $scope.bigButtons.show = true;
+ $scope.$on("$stateChangeSuccess", function(event, toState, toParams, fromState, fromParams) {
+ if ((typeof $state.current !== "undefined") && ("section" in $state.current)) {
+ angular.forEach($scope.bigButtons.items, function (item) {
+ item.active = (item.section === $state.current.section);
+ if (item.active)
+ $scope.bigButtons.current = item;
+ });
}
- };
+ })
}).
controller('RootCtrl', function ($scope, $rootScope) {
- $scope.bigButtons.uncollapse()
+ $scope.bigButtons.collapsed = false;
+ $scope.bigButtons.rowClass = "";
+ $scope.bigButtons.order = "";
}).
controller('AttendanceCtrl', function ($scope, $rootScope) {
- $scope.bigButtons.collapse()
- $scope.bigButtons.attendanceClass = "active";
+ $scope.bigButtons.collapsed = true;
+ $scope.bigButtons.rowClass = "dark";
+ $scope.bigButtons.order = "-active";
}).
controller('InstallCtrl', function ($scope, $rootScope) {
- $scope.bigButtons.collapse()
- $scope.bigButtons.installClass = "active";
+ $scope.bigButtons.collapsed = true;
+ $scope.bigButtons.rowClass = "medium";
+ $scope.bigButtons.order = "-active";
}).
controller('DocCtrl', function ($scope, $rootScope) {
- $scope.bigButtons.collapse()
- $scope.bigButtons.docClass = "active";
+ $scope.bigButtons.collapsed = true;
+ $scope.bigButtons.rowClass = "light";
+ $scope.bigButtons.order = "-active";
});
\ No newline at end of file
diff --git a/web/app/js/directives.js b/web/app/js/directives.js
index 4af455487923246866f735a225037b2747419c91..50dbd8268c2a25b19eb4490814b1f696023d7b85 100644
--- a/web/app/js/directives.js
+++ b/web/app/js/directives.js
@@ -1,69 +1,28 @@
'use strict';
+function toBoolean(value) {
+ if (value && value.length !== 0) {
+ var v = ("" + value).toLowerCase();
+ value = !(v == 'f' || v == '0' || v == 'false' || v == 'no' || v == 'n' || v == '[]');
+ } else {
+ value = false;
+ }
+ return value;
+}
+
angular.module('datasid.directives', []).
- directive('ngDraggable', function() {
+ directive('mcActiveClass', function($animate) {
return function (scope, element, attrs) {
- element.addClass('draggable');
- element.on('dragstart', function (e) {
- console.log('dragstart');
- });
- element.on('dragend', function (e) {
- console.log('dragend');
- console.log(e);
+ scope.$watch(attrs.mcActiveClass, function (value) {
+ $animate[toBoolean(value) ? 'addClass' : 'removeClass'](element, 'active');
});
}
}).
- directive('ngSelectable', function() {
- return function (scope, element, attrs) {
- var input = $(element.find('td input'));
- element.on('click', function (e) {
- if (typeof input.attr('checked') !== 'undefined') {
- input.removeAttr('checked');
- element.removeClass('selected');
- }
- else {
- input.attr('checked', 'checked');
- element.addClass('selected');
- }
- scope.$apply();
- });
- }
- }).
- directive('ngHighchart', function() {
- return function (scope, element, attrs) {
- scope[attrs.ngHighchart] = scope[attrs.ngHighchart](element);
- }
- }).
- directive('srsViewer', function() {
+ directive('mcCollapsedClass', function($animate) {
return function (scope, element, attrs) {
- scope[attrs.srsViewer].bind(element);
- }
- }).
- directive('solFile', function() {
- return function (scope, element, attrs) {
- element.bind('change', function (e) {
- scope.$broadcast('$fileLoadBegin');
-
- var files = e.target.files;
-
- if (files.length != 1) {
- scope.$broadcast('$fileLoadError', null);
- return;
- }
-
- var fileReader = new FileReader();
-
- fileReader.onload = function (e) {
- files[0].buffer = this.result;
- scope.$broadcast('$fileLoadDone', files[0]);
- };
-
- fileReader.onerror = function (e) {
- scope.$broadcast('$fileLoadError', files[0]);
- };
-
- fileReader.readAsArrayBuffer(files[0]);
+ scope.$watch(attrs.mcCollapsedClass, function (value) {
+ $animate[toBoolean(value) ? 'addClass' : 'removeClass'](element, 'collapsed');
});
}
});
\ No newline at end of file
diff --git a/web/assets/less/big-button.less b/web/assets/less/big-button.less
index 6f15cd7f15db4bcf30af89e1394433c267b15880..3b818e951f9cac05e0c0cb6c5fc120cbabf7960e 100644
--- a/web/assets/less/big-button.less
+++ b/web/assets/less/big-button.less
@@ -4,65 +4,7 @@
position: relative;
width: 100%;
top: -24px;
-
- &.collapsed {
- background-color: #004170;
-
- .big-button {
- width: 245px;
- height: 60px;
- border-radius: 0;
- margin-left: 8px;
- text-align: left;
-
- font-size: 1.6em;
-
- p {
- padding-top: 22px;
- padding-left: 70px;
- }
-
- /*.big-button-icon {
- display: none;
- }*/
-
- .big-button-icon {
- display: block;
- width: 60px;
- height: 60px;
- margin: 0;
- float: left;
-
- &.icon-charts { background: url('../img/icon-charts-collapsed.png') no-repeat; }
- &.icon-install { background: url('../img/icon-install-collapsed.png') no-repeat; }
- &.icon-doc { background: url('../img/icon-doc-collapsed.png') no-repeat; }
- }
-
- -webkit-transition: width ease-in .5s;
- -moz-transition: width ease-in .5s;
- -o-transition: width ease-in .5s;
- transition: width ease-in .5s;
- }
-
- .big-button:after {
- float: right;
- height: 60px;
- content: '';
- width: 8px;
- left: 8px;
- background-color: white;
- position: relative;
- top: -60px;
- }
-
- .big-button.active {
- width: 425px;
-
- &.dark:hover { background-color: @big-button-primary-color; cursor: default; }
- &.medium:hover { background-color: lighten(@big-button-primary-color, 15%); cursor: default; }
- &.light:hover { background-color: lighten(@big-button-primary-color, 30%); cursor: default; }
- }
- }
+ margin-bottom: -14px;
.big-button {
float: left;
@@ -102,4 +44,73 @@
&.icon-doc { background: url('../img/icon-doc.png') no-repeat; }
}
}
+}
+
+.big-button-row.collapsed {
+ background-color: #004170;
+
+ &.dark { background-color: @big-button-primary-color; }
+ &.medium { background-color: lighten(@big-button-primary-color, 15%); }
+ &.light { background-color: lighten(@big-button-primary-color, 30%); }
+
+ .big-button {
+ width: 200px;
+ height: 60px;
+ border-radius: 0;
+ margin-left: 8px;
+ text-align: center;
+
+ font-size: 1.6em;
+
+ p {
+ padding-top: 22px;
+ padding-left: 0;
+ }
+
+ .big-button-icon {
+ display: none;
+ width: 0;
+ }
+
+ // -webkit-transition: width ease-in .5s;
+ // -moz-transition: width ease-in .5s;
+ // -o-transition: width ease-in .5s;
+ // transition: width ease-in .5s;
+ }
+
+ .big-button:after {
+ float: right;
+ height: 60px;
+ content: '';
+ width: 8px;
+ left: 8px;
+ background-color: white;
+ position: relative;
+ top: -60px;
+ }
+
+ .big-button.active {
+ width: 510px;
+ text-align: left;
+
+ p {
+ padding-left: 70px;
+ }
+
+ .big-button-icon {
+ display: block;
+ width: 60px;
+ height: 60px;
+ margin: 0;
+ float: left;
+
+ &.icon-charts { background: url('../img/icon-charts-collapsed.png') no-repeat; }
+ &.icon-install { background: url('../img/icon-install-collapsed.png') no-repeat; }
+ &.icon-doc { background: url('../img/icon-doc-collapsed.png') no-repeat; }
+ }
+
+ &.dark:hover { background-color: @big-button-primary-color; cursor: default; }
+ &.medium:hover { background-color: lighten(@big-button-primary-color, 15%); cursor: default; }
+ &.light:hover { background-color: lighten(@big-button-primary-color, 30%); cursor: default; }
+ }
}
\ No newline at end of file
diff --git a/web/assets/less/main.less b/web/assets/less/main.less
index b75420cc9414f1c878107f553f9ce936d1739d7a..51170b1d978af185db841a8570866aa3d555f585 100644
--- a/web/assets/less/main.less
+++ b/web/assets/less/main.less
@@ -1,5 +1,6 @@
@import "barra-brasil.less";
@import "big-button.less";
+@import "breadcrumb.less";
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;