Add styles to settings dropdown-menu

- added new styles to the dropdown menu
- added icons to menu items

app/assets/stylesheets/fonts/openproject_icon_font.css.sass

@@ -67,13 +67,17 @@
   font-size: 12px
   
 @mixin icon-dropdown-rules
-  padding: 0 0px 0 3px
+  padding: 0 0 0 3px
   font-size: 13px
   
 @mixin icon-button-rules
-  padding: 0 5px 0 0px
+  padding: 0 5px 0 0
   font-size: 13px
   
+@mixin icon-dropdown-menu-rules
+  padding: 0 8px 0 0
+  font-size: 14px
+
 @mixin icon-context-rules
   padding: 0 4px 0 0
   color: $content_icon_color
@@ -108,6 +112,11 @@
   content: attr(data-icon-dropdown)
   @include icon-dropdown-rules
   
+[data-icon-dropdown-menu]:before
+  @include icon-common
+  content: attr(data-icon-dropdown-menu)
+  @include icon-dropdown-menu-rules
+  
 [data-icon-button]:before
   @include icon-common
   content: attr(data-icon-button)
@@ -144,6 +153,10 @@
 .icon-dropdown:before
   @include icon-dropdown-rules
   
+// used for icons dropdown-menus
+.icon-dropdown-menu:before
+  @include icon-dropdown-menu-rules
+  
 // used for icons in buttons
 .icon-buttons:before
   @include icon-button-rules

app/assets/stylesheets/layout/_drop_down.css.sass

@@ -32,6 +32,10 @@
 // https://github.com/plapier/jquery-dropdown
 // (dual MIT/GPL-Licensed)
 
+
+#settingsDropdown
+  margin: 10px 0 0 0
+   
 .dropdown
   position: absolute
   z-index: 9999999
@@ -45,7 +49,7 @@
   background: #FFF
   border: solid 1px #DDD
   border: solid 1px rgba(0, 0, 0, .2)
-  border-radius: 6px
+  border-radius: 0px
   box-shadow: 0 5px 10px rgba(0, 0, 0, .2)
   overflow: visible
   padding: 4px 0
@@ -103,21 +107,28 @@
   color: #555
   text-decoration: none
   line-height: 18px
-  padding: 3px 15px
+  padding: 3px 32px
   white-space: nowrap
   
 .dropdown .dropdown-menu LI > A:hover,
 .dropdown .dropdown-menu LABEL:hover
-  background-color: #08C
-  color: #FFF
+  background-color: #F0F0F0
   cursor: pointer
 
+.dropdown LI > A.dropdown-menu-hasicons
+  display: block
+  color: #555
+  text-decoration: none
+  line-height: 18px
+  padding: 3px 10px
+  white-space: nowrap
+  
 
 .dropdown .dropdown-menu .dropdown-divider
   font-size: 1px
   border-top: solid 1px #E5E5E5
   padding: 0
-  margin: 5px 0
+  margin: 4px 0
 
 /* Icon Examples - icons courtesy of http://p.yusukekamiyamane.com/ */
 .dropdown.has-icons LI > A

app/views/work_packages/index.html.erb

@@ -58,9 +58,10 @@ end
       </selectable-title>
 
       <ul>
-        <li><button class="button_highlight" with-dropdown dropdown-id="tasksDropdown"><i class="icon-add icon4"></i>New Task<i class="icon-pulldown-arrow1 icon-dropdown"></i></button></li>
-        <li><button class="button" ng-click="showFiltersOptions = !showFiltersOptions"><i class="icon-pin icon-buttons"></i>Filter</button></li>
-        <li><button class="button last" with-dropdown dropdown-id="settingsDropdown"><i class="icon-settings"></i><i class="icon-pulldown-arrow1 icon-dropdown"></i></button></li>      
+        <li><button class="button_highlight" with-dropdown dropdown-id="tasksDropdown"><%=icon_wrapper("icon-add icon4", "New Task")%>New Task<%=icon_wrapper("icon-pulldown-arrow1", "")%></button></li>
+        <li><button class="button" ng-click="showFiltersOptions = !showFiltersOptions"><%=icon_wrapper("icon-pin icon-buttons", "Filter")%>Filter</button></li>
+        <li><button class="button last" with-dropdown dropdown-id="settingsDropdown"><%=icon_wrapper("icon-settings icon-buttons", "Settings")%><%=icon_wrapper("icon-pulldown-arrow1", "")%>
+        </button></li>      
       </ul>
     </toolbar>
   </div>
@@ -77,11 +78,11 @@ end
       <li><a href ng-click="showSortingModal()">Sorting…</a></li>
       <li><a href>Display sums</a></li>
       <li class="dropdown-divider"></li>
-      <li><a href ng-click="showSaveModal()">Save</a></li>
-      <li><a href ng-click="showSaveModal(true)">Save as</a></li>
-      <li><a href ng-click="showExportModal()">Export</a></li>
-      <li><a href ng-click="showShareModal()">Share</a></li>
-      <li><a href ng-click="showSettingsModal()">Page settings</a></li>
+      <li><a class="dropdown-menu-hasicons" href ng-click="showSaveModal()"><%=icon_wrapper("icon-save1 icon-dropdown-menu", "Save")%>Save</a></li>
+      <li><a class="dropdown-menu-hasicons" href ng-click="showSaveModal(true)"><%=icon_wrapper("icon-save1 icon-dropdown-menu", "Save as")%>Save as</a></li>
+      <li><a class="dropdown-menu-hasicons" href ng-click="showExportModal()"><%=icon_wrapper("icon-excel icon-dropdown-menu", "Export")%>Export</a></li>
+      <li><a class="dropdown-menu-hasicons" href ng-click="showShareModal()"><%=icon_wrapper("icon-move icon-dropdown-menu", "Share")%>Share</a></li>
+      <li><a class="dropdown-menu-hasicons" href ng-click="showSettingsModal()"><%=icon_wrapper("icon-settings3 icon-dropdown-menu", "Page settings")%>Page settings</a></li>
     </ul>
   </div>