Merge pull request #1295 from opf/feature/toolbar-dropdown-menu-styling

Feature/toolbar dropdown menu styling

app/assets/stylesheets/fonts/_openproject_icon_font.sass

@@ -67,12 +67,16 @@
   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
@@ -124,6 +128,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)
@@ -133,7 +142,7 @@
   @include icon-common
   content: attr(data-icon-table)
   @include icon-table-rules
-  
+
 [data-icon-action-menu]:before
   content: attr(data-icon-action-menu)
   @include icon-action-menu-rules
@@ -173,6 +182,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.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,15 +58,15 @@ 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_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"
-                  ng-class="{active: showFiltersOptions}">
-            <i class="icon-pin icon-buttons"></i>Filter
+                    ng-click="showFiltersOptions = !showFiltersOptions"
+                    ng-class="{active: showFiltersOptions}"><%=icon_wrapper("icon-pin icon-buttons", "Filter")%>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 last" with-dropdown dropdown-id="settingsDropdown"><%=icon_wrapper("icon-settings icon-buttons", "Settings")%><%=icon_wrapper("icon-pulldown-arrow1", "")%>
+        </button></li>
       </ul>
     </toolbar>
   </div>
@@ -83,10 +83,10 @@ end
       <li><a href ng-click="showSortingModal()">Sorting…</a></li>
       <li><a href ng-click="toggleDisplaySums()">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 ng-show="!query.isNew()"><a href ng-click="showShareModal()">Share</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 ng-show="!query.isNew()"><a class="dropdown-menu-hasicons" href ng-click="showShareModal()"><%=icon_wrapper("icon-move icon-dropdown-menu", "Share")%>Share</a></li>
     </ul>
   </div>