From ff9cb08425ce44254c96537e6bac04a06a250229 Mon Sep 17 00:00:00 2001
From: Serghey Rodin <serghey.rodin@gmail.com>
Date: Wed, 30 Jul 2014 15:51:22 +0300
Subject: [PATCH] scrollable top panel

---
 web/templates/admin/panel.html |  15 ++++-
 web/templates/header.html      | 114 ++++++++++++++++++++++++++++++++-
 web/templates/user/panel.html  |  15 ++++-
 3 files changed, 137 insertions(+), 7 deletions(-)

diff --git a/web/templates/admin/panel.html b/web/templates/admin/panel.html
index ee9ffef3f..968b5fc0f 100644
--- a/web/templates/admin/panel.html
+++ b/web/templates/admin/panel.html
@@ -15,9 +15,11 @@
                     <a class="top-logout" href="/logout/"> <?php print __('Log out') ?> </a>
                 </span>
             </div>
-            <div style="display:block; float:left;">
+            <div class="main-menu">
                 <span class="nav-logo">
-                    <img style="margin: 30px 0 0 10px;" src="/images/logo.png">
+                    <div class="logo-container">
+                        <img src="/images/logo.png">
+                    </div>
                 </span>
 
                 <a class="nav-lnk" href="/list/user/">
@@ -29,9 +31,10 @@
                         <?php print __('users');?>: <? echo $panel[$user]['U_USERS'] ?><br>
                         <?php print __('spnd');?>: <? echo $panel[$user]['SUSPENDED_USERS']?> 
                     </p>
+                    <p class="marker"></p>
                 </span>
-
                 </a>
+
                 <a class="nav-lnk" href="/list/web/">
                 <span class="nav-<?php if($TAB == 'WEB' ) echo 'selected-' ?>block">
                     <p class="nav-<?php if($TAB == 'WEB' ) echo 'selected-' ?>header">
@@ -42,6 +45,7 @@
                         <?php print __('aliases');?>: <? echo $panel[$user]['U_WEB_ALIASES']?><br>
                         <?php print __('spnd');?>: <? echo $panel[$user]['SUSPENDED_WEB']?> 
                     </p>
+                    <p class="marker"></p>
                 </span>
                 </a>
 
@@ -55,6 +59,7 @@
                         <?php print __('records');?>: <? echo $panel[$user]['U_DNS_RECORDS']?><br>
                         <?php print __('spnd');?>: <? echo $panel[$user]['SUSPENDED_DNS']?> 
                     </p>
+                    <p class="marker"></p>
                 </span>
                 </a>
 
@@ -68,6 +73,7 @@
                         <?php print __('accounts');?>: <? echo $panel[$user]['U_MAIL_ACCOUNTS']?><br>
                         <?php print __('spnd');?>: <? echo $panel[$user]['SUSPENDED_MAIL']?> 
                     </p>
+                    <p class="marker"></p>
                 </span>
                 </a>
 
@@ -80,6 +86,7 @@
                         <?php print __('databases');?>: <? echo $panel[$user]['U_DATABASES']?><br>
                         <?php print __('spnd');?>: <? echo $panel[$user]['SUSPENDED_DB']?> 
                     </p>
+                    <p class="marker"></p>
                 </span>
                 </a>
 
@@ -92,6 +99,7 @@
                         <?php print __('jobs');?>: <? echo $panel[$user]['U_CRON_JOBS']?><br>
                         <?php print __('spnd');?>: <? echo $panel[$user]['SUSPENDED_CRON']?> 
                     </p>
+                    <p class="marker"></p>
                 </span>
                 </a>
 
@@ -103,6 +111,7 @@
                     <p class="nav-counters">
                         <?php print __('backups');?>: <? echo $panel[$user]['U_BACKUPS']?><br>
                     </p>
+                    <p class="marker"></p>
                 </span>
                 </a>
             </div>
diff --git a/web/templates/header.html b/web/templates/header.html
index 56580bd2a..70fe7ee45 100644
--- a/web/templates/header.html
+++ b/web/templates/header.html
@@ -41,8 +41,10 @@
                 var valus= document.getElementById(frmname);
                 if (checked==false) {
                     checked=true;
+                    $('.data-row').addClass("selected");
                 } else {
                     checked = false;
+                    $('.data-row').removeClass("selected");
                 }
                 for (var i =0; i < valus.elements.length; i++) {
                     valus.elements[i].checked=checked;
@@ -51,8 +53,40 @@
         </script>
         <script language="JavaScript">
             $('document').ready(function() {
+                var nav = $('.top');
+                var nav = $('.top');
+                var lastScrollTop = 0;
+
+                $(window).scroll(function () {
+
+                    var st = $(this).scrollTop();
+
+                    if(st > 27 ){
+                        nav.addClass("small-logo");
+                    }else{
+                        nav.removeClass("small-logo");
+                    }
+
+                    if (st > lastScrollTop){
+                        if ($(this).scrollTop() > 58) {
+                            nav.addClass("small");
+                        }
+                    } else {
+                        if ($(this).scrollTop() < 58) {
+                            nav.removeClass("small");
+                        }
+                    }
+                    lastScrollTop = st;
+                });
+
+
                 $('#vstobjects').bind('click', function(evt) { // observe change event on whole div#vstobjects
                     var elm = evt.target; // grab element on which user clicked
+
+                    if($(elm).hasClass('data-controls') || $(elm).parents('.data-controls')[0]){
+                        return;
+                    }
+
                     var parent = $(elm).hasClass('data-row') ? $(elm) : $(elm).parents('.data-row'); // check if outer element is row container and get it
                     if (!$(parent).hasClass('selected')) {
                         parent.addClass('selected'); // add class
@@ -65,9 +99,87 @@
                         // another actions on unchecked row
                     }
                 });
+
+
+                if($('.movement.left').length){
+
+                    refresh_timer.right = $('.movement.right');
+                    refresh_timer.left = $('.movement.left');
+
+                    refresh_timer.start();
+
+
+                    $('.pause').click(function(){
+                        refresh_timer.stop();
+                        $('.pause').addClass('hidden');
+                        $('.play').removeClass('hidden');
+                        $('.refresh-timer').addClass('paused');
+                    });
+
+                    $('.play').click(function(){
+                        refresh_timer.start();
+                        $('.pause').removeClass('hidden');
+                        $('.play').addClass('hidden');
+                        $('.refresh-timer').removeClass('paused');
+                    });
+                }
             });
+
+
+
+            refresh_timer = {
+                speed: 50,
+                degr: 180,
+                right: 0,
+                left: 0,
+                periodical: 0,
+                first: 1,
+
+                start: function(){
+                    this.periodical = setInterval(function(){refresh_timer.turn()}, this.speed);
+                },
+
+                stop: function(){
+                    clearTimeout(this.periodical);
+                },
+
+                turn: function(){
+                    this.degr += 1;
+
+///                 console.log(this.first + " - " + this.degr);
+
+                    if(this.first && this.degr >= 361){
+                        this.first = 0;
+                        this.degr = 180;
+                        this.left.css({'-webkit-transform': 'rotate(180deg)'});
+                        this.left.css({'transform': 'rotate(180deg)'});
+                        this.left.children('.loader-half').addClass('dark');
+                    }
+                    if(!this.first && this.degr >= 360){
+                        this.first = 1;
+                        this.degr = 180;
+                        this.left.css({'-webkit-transform': 'rotate(0deg)'});
+                        this.right.css({'-webkit-transform': 'rotate(180deg)'});
+                        this.left.css({'transform': 'rotate(0deg)'});
+                        this.right.css({'transform': 'rotate(180deg)'});
+                        this.left.children('.loader-half').removeClass('dark');
+
+                        this.stop();
+                        location.reload();
+                    }
+
+                    if(this.first){
+                        this.right.css({'-webkit-transform': 'rotate('+this.degr+'deg)'});
+                        this.right.css({'transform': 'rotate('+this.degr+'deg)'});
+                    }else{
+                        this.left.css({'-webkit-transform': 'rotate('+this.degr+'deg)'});
+                    this.left.css({'transform': 'rotate('+this.degr+'deg)'});
+                    }
+                }
+            }
+
         </script>
         <script type="text/javascript" src="/js/app.js"></script>
         <script type="text/javascript" src="/js/templates.js"></script>
     </head>
-    <body>
+    <body>
\ No newline at end of file
diff --git a/web/templates/user/panel.html b/web/templates/user/panel.html
index 80d4e8c92..fb6af499d 100644
--- a/web/templates/user/panel.html
+++ b/web/templates/user/panel.html
@@ -10,9 +10,11 @@
                     <a class="top-logout" href="/logout/"> <?php print __('Log out') ?></a>
                 </span>
             </div>
-            <div style="display:block; float:left;">
+            <div class="main-menu">
                 <span class="nav-logo">
-                    <img style="margin: 30px 0 0 10px;" src="/images/logo.png">
+                    <div class="logo-container">
+                        <img src="/images/logo.png">
+                    </div>
                 </span>
 
                 <a class="nav-lnk" href="/list/user/">
@@ -24,6 +26,7 @@
                         <?php print __('disk');?>: <? echo humanize_usage($panel[$user]['U_DISK']) ?> <br>
                         <?php print __('traffic');?>: <? echo humanize_usage($panel[$user]['U_BANDWIDTH']) ?> 
                     </p>
+                    <p class="marker"></p>
                 </span>
                 </a>
 
@@ -37,6 +40,7 @@
                         <?php print __('aliases');?>: <? echo $panel[$user]['U_WEB_ALIASES']?><br>
                         <?php print __('spnd');?>: <? echo $panel[$user]['SUSPENDED_WEB']?> 
                     </p>
+                    <p class="marker"></p>
                 </span>
                 </a>
 
@@ -50,6 +54,7 @@
                         <?php print __('records');?>: <? echo $panel[$user]['U_DNS_RECORDS']?><br>
                         <?php print __('spnd');?>: <? echo $panel[$user]['SUSPENDED_DNS']?> 
                     </p>
+                    <p class="marker"></p>
                 </span>
                 </a>
 
@@ -63,6 +68,7 @@
                         <?php print __('accounts');?>: <? echo $panel[$user]['U_MAIL_ACCOUNTS']?><br>
                         <?php print __('spnd');?>: <? echo $panel[$user]['SUSPENDED_MAIL']?> 
                     </p>
+                    <p class="marker"></p>
                 </span>
                 </a>
 
@@ -75,6 +81,7 @@
                         <?php print __('databases');?>: <? echo $panel[$user]['U_DATABASES']?><br>
                         <?php print __('spnd');?>: <? echo $panel[$user]['SUSPENDED_DB']?> 
                     </p>
+                    <p class="marker"></p>
                 </span>
                 </a>
 
@@ -87,6 +94,7 @@
                         <?php print __('jobs');?>: <? echo $panel[$user]['U_CRON_JOBS']?><br>
                         <?php print __('spnd');?>: <? echo $panel[$user]['SUSPENDED_CRON']?> 
                     </p>
+                    <p class="marker"></p>
                 </span>
                 </a>
 
@@ -98,6 +106,7 @@
                     <p class="nav-counters">
                         <?php print __('backups');?>: <? echo $panel[$user]['U_BACKUPS']?><br>
                     </p>
+                    <p class="marker"></p>
                 </span>
                 </a>
-            </div>
+            </div>
\ No newline at end of file