web: Add big buttons collapsing to a small bar

Signed-off-by: Eduardo L. Buratti <elb09@c3sl.ufpr.br>

web/app/index.html

@@ -38,7 +38,26 @@
 
             <div class="header-logo"></div>
         </div>
+    </div>
 
+    <div class="big-button-row ng-hide" ng-class="bigButtons.collapsedClass" ng-show="bigButtons.show">
+        <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>
+        </div>
+    </div>
+
+    <div class="container">
         <div ui-view></div>
     </div>
 

web/app/js/controllers.js

@@ -2,16 +2,46 @@
 
 angular.module('datasid.controllers', []).
     controller('MainCtrl', function ($scope, $rootScope) {
+        $scope.bigButtons = {
+            collapsedClass: "",
+            attendanceClass: "",
+            installClass: "",
+            docClass: "",
+            show: 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;
+            }
+        };
     }).
 
     controller('RootCtrl', function ($scope, $rootScope) {
+        $scope.bigButtons.uncollapse()
     }).
 
     controller('AttendanceCtrl', function ($scope, $rootScope) {
+        $scope.bigButtons.collapse()
+        $scope.bigButtons.attendanceClass = "active";
     }).
 
     controller('InstallCtrl', function ($scope, $rootScope) {
+        $scope.bigButtons.collapse()
+        $scope.bigButtons.installClass = "active";
     }).
 
     controller('DocCtrl', function ($scope, $rootScope) {
+        $scope.bigButtons.collapse()
+        $scope.bigButtons.docClass = "active";
     });
\ No newline at end of file

web/app/partials/root.html

-<div class="big-button-row">
-    <a href="#/attendance" class="big-button dark">
-        <span class="icon icon-charts"></span>
-        Acompanhamento
-    </a>
-    <a href="#/install" class="big-button medium">
-        <span class="icon icon-install"></span>
-        Instalação
-    </a>
-    <a href="#/doc" class="big-button light">
-        <span class="icon icon-doc"></span>
-        Documentação
-    </a>
-</div>
\ No newline at end of file

web/assets/less/big-button.less

+@big-button-primary-color: #004170;
+
 .big-button-row {
     position: relative;
     width: 100%;
     top: -24px;
-}
 
-.big-button {
-    float: left;
-    width: 280px;
-    height: 250px;
-    margin-left: 27px;
+    &.collapsed {
+        background-color: #004170;
 
-    font-weight: bold;
-    font-size: 2em;
-    text-align: center;
-    color: #fff;
+        .big-button {
+            width: 245px;
+            height: 60px;
+            border-radius: 0;
+            margin-left: 8px;
+            text-align: left;
 
-    border-radius: 4px;
+            font-size: 1.6em;
 
-    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,.2);
-       -moz-box-shadow: 1px 1px 4px rgba(0,0,0,.2);
-            box-shadow: 1px 1px 4px rgba(0,0,0,.2);
+            p {
+                padding-top: 22px;
+                padding-left: 70px;
+            }
 
-    &:hover {
-        color: #fff;
-        text-decoration: none;
+            /*.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; }
+        }
     }
 
-    @big-button-primary-color: #004170;
+    .big-button {
+        float: left;
+        width: 280px;
+        height: 250px;
+        margin-left: 27px;
 
-    &.dark { background-color: @big-button-primary-color; }
-    &.dark:hover { background-color: lighten(@big-button-primary-color, 30%); }
+        font-weight: bold;
+        font-size: 2em;
+        text-align: center;
+        color: #fff;
+
+        border-radius: 4px;
+
+        &:hover {
+            color: #fff;
+            text-decoration: none;
+        }
+
+        &.dark { background-color: @big-button-primary-color; }
+        &.dark:hover { background-color: lighten(@big-button-primary-color, 30%); }
 
-    &.medium { background-color: lighten(@big-button-primary-color, 15%); }
-    &.medium:hover { background-color: lighten(@big-button-primary-color, 45%); }
+        &.medium { background-color: lighten(@big-button-primary-color, 15%); }
+        &.medium:hover { background-color: lighten(@big-button-primary-color, 45%); }
 
-    &.light { background-color: lighten(@big-button-primary-color, 30%); }
-    &.light:hover { background-color: lighten(@big-button-primary-color, 60%); }
+        &.light { background-color: lighten(@big-button-primary-color, 30%); }
+        &.light:hover { background-color: lighten(@big-button-primary-color, 60%); }
+
+        .big-button-icon {
+            display: block;
+            width: 100px;
+            height: 100px;
+            margin: 50px auto 25px auto;
+
+            &.icon-charts { background: url('../img/icon-charts.png') no-repeat; }
+            &.icon-install { background: url('../img/icon-install.png') no-repeat; }
+            &.icon-doc { background: url('../img/icon-doc.png') no-repeat; }
+        }
+    }
 }
\ No newline at end of file

web/assets/less/icon.less

-.icon {
-    display: block;
-    width: 100px;
-    height: 100px;
-    margin: 50px auto 25px auto;
-
-    &.icon-charts { background: url('../img/icon-charts.png') no-repeat; }
-    &.icon-install { background: url('../img/icon-install.png') no-repeat; }
-    &.icon-doc { background: url('../img/icon-doc.png') no-repeat; }
-}
\ No newline at end of file

web/assets/less/main.less

 @import "barra-brasil.less";
-@import "icon.less";
 @import "big-button.less";
 
 body {