New submenu

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;
+    border-radius: 0px 3px 3px 0px;
-    padding: 0;
     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 {
+.submenu-select-wrapper {
-    font-family:Arial, Helvetica, sans-serif;
-    font-size: 9pt;
-    color: #333;
-    display: block;
     float: left;
-    height: 28px;
+    border-top: 1px solid #ccc;
-    margin: 0 4px 0 0;
+    border-bottom: 1px solid #ccc;
-    min-width: 138px;
+    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-color:#909090;
-    border-radius: 3px 3px 3px 3px;
+    color: #555;
-    padding: 0px 0px 2px 4px;
 }
 
-
+.submenu-select-wrapper select:focus {
-.submenu-select-dropdown:hover {
+    border-color:#f79b44;
-    border: 1px solid #909090;
-}
-
-.submenu-select-dropdown:focus {
-    border: 1px solid #f79b44;
     background-color: #fffcd2;
     color: #333;
 }
 
+.submenu-select-wrapper option {
+    padding: 5px;
+}
 
-.submenu-select-dropdown option {
+.submenu-select-wrapper .holder{
-    padding: 5px 5px 5px 8px;
+    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;
 }
+

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(); ?> 

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') {
                             ?> 

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 } ?>

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">

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

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') {
                             ?>

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>

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>
+    <body>

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') {
                             ?>