New dialogs panel

app/css/app.css

@@ -283,6 +283,11 @@ input[type="number"]::-webkit-inner-spin-button {
   overflow: hidden;
 }
 
+.dropdown-menu > li > a {
+  padding: 3px 14px;
+  font-size: 13px;
+}
+
 .modal-backdrop {
   background: #111111;
 }
@@ -510,10 +515,14 @@ input[type="number"]::-webkit-inner-spin-button {
   border-radius         : 0;
 }
 
-.im_dialogs_search {
+.im_dialogs_panel {
   padding: 14px 12px;
   position: relative;
 }
+.im_dialogs_search {
+  margin-right: 48px;
+  position: relative;
+}
 .im_dialogs_search_field {
   font-size: 12px;
   line-height: normal;
@@ -535,7 +544,7 @@ input[type="number"]::-webkit-inner-spin-button {
 
 .im_dialogs_search_clear {
   position: absolute;
-  right: 19px;
+  right: 9px;
   margin-top: -23px;
   color: #999;
   width: 13px;
@@ -552,6 +561,22 @@ input[type="number"]::-webkit-inner-spin-button {
   opacity: 1;
 }
 
+.im_dialogs_panel_dropdown {
+  position: absolute;
+  right: 12px;
+}
+
+.im_dialogs_panel_dropdown .dropdown-menu {
+  border-radius: 2px;
+  right: auto;
+  left: 0;
+  margin-top: 8px;
+  padding: 0;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.175);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.175);
+}
+
+
 
 
 .im_dialogs_wrap {
@@ -781,10 +806,6 @@ a.im_dialog:hover .im_dialog_date {
   margin-left: 5px;
 }
 
-.im_history_panel_media_dropdown .dropdown-menu > li > a {
-  font-size: 13px;
-}
-
 .icon-caret {
   width: 8px;
   height: 4px;
@@ -811,9 +832,6 @@ a.im_dialog:hover .im_dialog_date {
   -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.175);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.175);
 }
-.dropdown-menu > li > a {
-  padding: 3px 14px;
-}
 
 
 .im_history_wrap {
@@ -2569,4 +2587,37 @@ ce671b orange
 }
 .tooltip-arrow {
   opacity: 0.8;
-}
+}
+
+
+.im_dialogs_panel_dropdown {
+  margin-left: 8px;
+}
+
+.im_dialogs_panel_dropdown .dropdown-toggle {
+  background: #F2F2F2;
+  display: block;
+  border-radius: 2px;
+  overflow: hidden;
+  padding: 11px 12px;
+  width: 38px;
+  height: 34px;
+}
+.im_dialogs_panel_dropdown .dropdown-toggle .icon-bar {
+  background: #b3b3b3;
+  display: block;
+  height: 2px;
+  margin-bottom: 3px;
+}
+.im_dialogs_panel_dropdown .dropdown-toggle .icon-bar:last-child {
+  margin-bottom: 0;
+}
+
+
+
+.im_dialogs_panel_dropdown.open .dropdown-toggle {
+  background: #6690b0;
+}
+.im_dialogs_panel_dropdown.open .dropdown-toggle .icon-bar {
+  background: #fff;
+}

app/partials/head.html

@@ -28,7 +28,6 @@
         </ul>
 
         <ul ng-if="!offline" class="nav navbar-nav navbar-right">
-          <li ng-if="isLoggedIn"><a href="" ng-click="openGroup()">New Group</a></li>
           <li ng-if="isLoggedIn"><a href="" ng-click="openContacts()">Contacts</a></li>
           <li ng-if="isLoggedIn"><a href="" ng-click="openSettings()">Settings</a></li>
           <li><a  href="https://github.com/zhukov/webogram" target="_blank">About</a></li>

app/partials/im.html

@@ -5,9 +5,23 @@
   <div class="im_page_split clearfix">
 
     <div class="im_dialogs_col_wrap" ng-controller="AppImDialogsController">
-      <div class="im_dialogs_search">
+      <div class="im_dialogs_panel">
-        <input class="form-control im_dialogs_search_field" type="search" placeholder="Search" ng-model="search.query"/>
+        <div class="dropdown im_dialogs_panel_dropdown pull-right">
-        <a class="im_dialogs_search_clear" ng-click="search.query = ''" ng-show="search.query.length"></a>
+          <a class="dropdown-toggle">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </a>
+          <ul class="dropdown-menu">
+            <li><a href="" ng-click="openGroup()">New Group</a></li>
+            <li><a href="" ng-click="openContacts()">Contacts</a></li>
+            <li><a href="" ng-click="openSettings()">Settings</a></li>
+          </ul>
+        </div>
+        <div class="im_dialogs_search">
+          <input class="form-control im_dialogs_search_field" type="search" placeholder="Search" ng-model="search.query"/>
+          <a class="im_dialogs_search_clear" ng-click="search.query = ''" ng-show="search.query.length"></a>
+        </div>
       </div>
       <div my-dialogs-list class="im_dialogs_col">
         <div class="im_dialogs_wrap nano">