From 9d76344f379b275aed6ba8c64a1501064db47858 Mon Sep 17 00:00:00 2001
From: Serghey Rodin <serghey.rodin@gmail.com>
Date: Wed, 3 Dec 2014 23:48:46 +0200
Subject: [PATCH] New submenu

---
 web/css/main.css                       |  73 +++++++++++++++++--------
 web/images/arrow.png                   | Bin 0 -> 243 bytes
 web/templates/admin/list_backup.html   |   2 +-
 web/templates/admin/list_cron.html     |   2 +-
 web/templates/admin/list_firewall.html |   2 +-
 web/templates/admin/list_services.html |   1 +
 web/templates/admin/list_stats.html    |   3 +-
 web/templates/admin/list_updates.html  |   3 +-
 web/templates/admin/list_user.html     |   2 +-
 web/templates/header.html              |  24 +++++---
 web/templates/user/list_cron.html      |   2 +-
 11 files changed, 76 insertions(+), 38 deletions(-)
 create mode 100644 web/images/arrow.png

diff --git a/web/css/main.css b/web/css/main.css
index 97bf55de7..11633e7e0 100644
--- a/web/css/main.css
+++ b/web/css/main.css
@@ -316,17 +316,17 @@ label:active {
 }
 
 .submenu-button-select {
-    width: 28px;
+    width: 24px;
     height: 28px;
     cursor: pointer;
     color: #555;
     background-color: #fafafa;
     border: 1px solid #ccc;
-    border-radius: 3px 3px 3px 3px;
-    padding: 0;
+    border-radius: 0px 3px 3px 0px;
     font-size: 9pt;
     font-weight: bold;
     font-family:Arial, Helvetica, sans-serif;
+    position: absolute;
 }
 
 .submenu-button-search {
@@ -426,35 +426,61 @@ label:active {
     background-color: #777;
 }
 
-.submenu-select-dropdown {
-    font-family:Arial, Helvetica, sans-serif;
-    font-size: 9pt;
-    color: #333;
-    display: block;
+.submenu-select-wrapper {
     float: left;
-    height: 28px;
-    margin: 0 4px 0 0;
-    min-width: 138px;
+    border-top: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+    border-left: 1px solid #ccc;
+    background: #fafafa url("/images/arrow.png") no-repeat right 3px center;
+    cursor: pointer;
+    color: #777;
+    font-size: 9pt;
+    border-radius: 3px 0px 0px 3px;
+    padding: 0 11px 0 0;
+}
+
+.submenu-select-wrapper, .submenu-select-wrapper select{
+    min-width: 107px;
+    height: 26px;
+    line-height: 26px;
+}
+
+.submenu-select-wrapper:hover {
     background-color: #fff;
-    border: 1px solid #ccc;
-    border-radius: 3px 3px 3px 3px;
-    padding: 0px 0px 2px 4px;
+    border-color:#909090;
+    color: #555;
 }
 
-
-.submenu-select-dropdown:hover {
-    border: 1px solid #909090;
-}
-
-.submenu-select-dropdown:focus {
-    border: 1px solid #f79b44;
+.submenu-select-wrapper select:focus {
+    border-color:#f79b44;
     background-color: #fffcd2;
     color: #333;
 }
 
+.submenu-select-wrapper option {
+    padding: 5px;
+}
 
-.submenu-select-dropdown option {
-    padding: 5px 5px 5px 8px;
+.submenu-select-wrapper .holder{
+    display: block;
+    margin: 0 5px 0 5px;
+    white-space: nowrap;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.submenu-select-wrapper select{
+    margin: 0;
+    position: absolute;
+    cursor: pointer;
+    outline: none;
+    opacity: 0;
+    /* CSS hacks for older browsers */
+    _noFocusLine: expression(this.hideFocus=true); 
+    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0);
+    -khtml-opacity: 0;
+    -moz-opacity: 0;
 }
 
 .submenu-search-block {
@@ -1249,3 +1275,4 @@ label:active {
     color: #555;
     padding: 2px 0 1px 2px;
 }
+
diff --git a/web/images/arrow.png b/web/images/arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..81098cf2365e7c5c272a99713214274cb1cd8220
GIT binary patch
literal 243
zcmeAS@N?(olHy`uVBq!ia0vp^+#t-s1|(OmDOUqhY)RhkE)4%caKYZ?lYt_f1s;*b
zKvlvZ%*Zfnjs#GUy~NYkmHi$MlbEt$&C#egKq1Kz*N775{M_8syb=cIqSVBa)D(sC
z%#sWRcTeAd@J2pyprU9`7sn8Z%gG4`n53knHgFmn7*1fwSUyAW<Xko$9v)R7HuCu7
zFCigO1(eq_0D;3U{4y3F4jnxBP>z|onU9&7S$>z3$k7a`HIfn%Q4>WUu>`2|hA}Y2
X9+SMXerCpYpfwDhu6{1-oD!M<EIUBT

literal 0
HcmV?d00001

diff --git a/web/templates/admin/list_backup.html b/web/templates/admin/list_backup.html
index 637340132..997f00fcc 100644
--- a/web/templates/admin/list_backup.html
+++ b/web/templates/admin/list_backup.html
@@ -19,7 +19,7 @@
                             </select>
                             <input type="submit" name="ok" value="›" class="submenu-button-select">
                         </div>
-                        <div class="submenu-select-block">
+                        <div class="submenu-select-block" style="margin: 0 0 0 21px;">
                             <a class="submenu-select-link" href="/list/backup/exclusions/">[ <?php print __('backup exclusions');?> ]</a>
                         </div>
                         <?php display_error_block(); ?> 
diff --git a/web/templates/admin/list_cron.html b/web/templates/admin/list_cron.html
index 7ac971907..9ed5ed75b 100644
--- a/web/templates/admin/list_cron.html
+++ b/web/templates/admin/list_cron.html
@@ -24,7 +24,7 @@
                             <input type="submit" name="ok" value="›" class="submenu-button-select">
                         </div>
                         <?php  if ($panel[$user]['LANGUAGE'] == 'en') { ?>
-                        <div class="submenu-select-block">
+                        <div class="submenu-select-block" style="margin: 0 0 0 21px;">
                             <?php
                                 if($panel[$user]['CRON_REPORTS'] == 'yes') {
                             ?> 
diff --git a/web/templates/admin/list_firewall.html b/web/templates/admin/list_firewall.html
index 958ca62f6..2fcb81b6d 100644
--- a/web/templates/admin/list_firewall.html
+++ b/web/templates/admin/list_firewall.html
@@ -20,7 +20,7 @@
                             <input type="submit" name="ok" value="›" class="submenu-button-select">
                         </div>
                         <?php if(!empty($_SESSION['FIREWALL_EXTENSION'])) { ?> 
-                        <div class="submenu-select-block">
+                        <div class="submenu-select-block" style="margin: 0 0 0 21px;">
                             <a class="submenu-select-link" href="/list/firewall/banlist/">[ <?php print __('list fail2ban');?> ]</a>
                         </div>
                         <?php } ?>
diff --git a/web/templates/admin/list_services.html b/web/templates/admin/list_services.html
index 3460f6c01..2f1e16f97 100644
--- a/web/templates/admin/list_services.html
+++ b/web/templates/admin/list_services.html
@@ -1,6 +1,7 @@
             <table class="submenu">
                 <tr>
                     <td class="wrapper">
+                        <div style="float:left; width: 160px;">&nbsp;</div>
                         <div class="submenu-search-block">
                             <form action="/search/" method="get">
                             <input type="text" name="q" class="submenu-search-field">
diff --git a/web/templates/admin/list_stats.html b/web/templates/admin/list_stats.html
index fe4860e4f..5dc52347f 100644
--- a/web/templates/admin/list_stats.html
+++ b/web/templates/admin/list_stats.html
@@ -1,6 +1,7 @@
             <table class="submenu">
                 <tr>
                     <td class="wrapper">
+                        <div style="float:left; width: 147px;">&nbsp;</div>
                         <div class="submenu-search-block">
                             <form action="/search/" method="get">
                             <input type="text" name="q" class="submenu-search-field">
@@ -9,7 +10,7 @@
                         </div>
                         <div class="submenu-select-block" style="padding-left:8px;">
                             <form action="/list/stats/" method="get" id="objects">
-                            <a class="vst<?php if (empty($_GET['user'])) echo "-selected"; ?>" style="padding: 4px 12px 0 0;" href='/list/stats/'><?php print __('Overall Statistics');?></a> 
+                            <a class="vst-selected" style="margin: 0px 8px 0 0;" href='/list/stats/'><?php print __('Overall Statistics');?></a> 
                             <select class="submenu-select-dropdown" name="user">
                                 <option value=""><?php print __('show per user');?></option>
                             <?php
diff --git a/web/templates/admin/list_updates.html b/web/templates/admin/list_updates.html
index 12b7b9fe0..06006482b 100644
--- a/web/templates/admin/list_updates.html
+++ b/web/templates/admin/list_updates.html
@@ -2,6 +2,7 @@
             <table class="submenu">
                 <tr>
                     <td class="wrapper">
+                        <div style="float:left; width: 160px;">&nbsp;</div>
                         <div class="submenu-search-block">
                             <form action="/search/" method="get">
                             <input type="text" name="q" class="submenu-search-field">
@@ -17,7 +18,7 @@
                             </select>
                             <input type="submit" name="ok" value="›" class="submenu-button-select">
                         </div>
-                        <div class="submenu-select-block">
+                        <div class="submenu-select-block" style="margin: 0 0 0 21px;">
                             <?php
                                 if($autoupdate == 'Enabled') {
                             ?>
diff --git a/web/templates/admin/list_user.html b/web/templates/admin/list_user.html
index c233ca338..d2dabbf16 100644
--- a/web/templates/admin/list_user.html
+++ b/web/templates/admin/list_user.html
@@ -19,7 +19,7 @@
                         <div class="submenu-select-block">
                             <form action="/bulk/user/" method="post" id="objects">
                             <a class="submenu-select-link" href='javascript:checkedAll("objects");'> <?php print __('toggle all');?> </a>
-                            <select class="submenu-select-dropdown" name="action">
+                            <select name="action" class="submenu-select-dropdown">
                                 <option value=""><?php print __('apply to selected');?></option>
                                 <option value="rebuild"><?php print __('rebuild');?></option>
                                 <option value="rebuild web"><?php print __('rebuild web');?></option>
diff --git a/web/templates/header.html b/web/templates/header.html
index f002ecf76..26f6e5ece 100644
--- a/web/templates/header.html
+++ b/web/templates/header.html
@@ -4,7 +4,7 @@
         <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
         <title>Vesta - <?php echo "$TAB"; ?> </title>
         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
-        <link type="text/css" href="/css/main.css?ver=1413983264" rel="stylesheet" />
+        <link type="text/css" href="/css/main.css?ver=1417643221" rel="stylesheet" />
         <!--[if IE 7]>
             <link rel="stylesheet" type="text/css" href="/css/ie.css" />
             <style type="text/css">
@@ -23,11 +23,6 @@
                 .submenu-select-block {
                     width:239px;
                 }
-
-                .submenu-select-dropdown {
-                    position: relative;
-                    top: 2px;
-                }
             </style>
         <![endif]-->
         <link type="text/css" href="/css/jquery-custom-dialogs.css" rel="stylesheet" />
@@ -177,9 +172,22 @@
                     }
                 }
             }
-
         </script>
+
+        <script language="JavaScript">
+            $(document).ready(function(){
+                $(".submenu-select-dropdown").each(function(){
+                    $(this).wrap( "<span class='submenu-select-wrapper'></span>" );
+                    $(this).after("<span class='holder'></span>");
+                });
+                $(".submenu-select-dropdown").change(function(){
+                    var selectedOption = $(this).find(":selected").text();
+                    $(this).next(".holder").text(selectedOption);
+                }).trigger('change');
+            })
+        </script>
+
         <script type="text/javascript" src="/js/app.js"></script>
         <script type="text/javascript" src="/js/templates.js"></script>
     </head>
-    <body>
\ No newline at end of file
+    <body>
diff --git a/web/templates/user/list_cron.html b/web/templates/user/list_cron.html
index fc6f7807a..1b5106833 100644
--- a/web/templates/user/list_cron.html
+++ b/web/templates/user/list_cron.html
@@ -22,7 +22,7 @@
                             <input type="submit" name="ok" value="›" class="submenu-button-select">
                         </div>
                         <?php  if ($panel[$user]['LANGUAGE'] == 'en') { ?>
-                        <div class="submenu-select-block">
+                        <div class="submenu-select-block" style="margin: 0 0 0 21px;">
                             <?php
                                 if($panel[$user]['CRON_REPORTS'] == 'yes') {
                             ?>