Merge branch 'dev-angular' into feature/client-side-routing

Conflicts:
	app/views/work_packages/index.html.erb

app/assets/javascripts/angular/controllers/work-packages-controller.js

@@ -237,13 +237,4 @@ angular.module('openproject.workPackages.controllers')
     }
   });
 
-  // Note: Again, this was in the work packages table directive but in an isolated scope so it wasn't picking up the changes to sortation.
-  // Think it would probably be a good idea to have the table directive just share the scope but that requires a refactor.
-  $scope.$watch('query.sortation.sortElements', function(oldValue, newValue) {
-    if (JSON.stringify(newValue) != JSON.stringify(oldValue)) {
-      $scope.updateResults();
-      $scope.updateBackUrl();
-    }
-  }, true);
-
 }]);

app/assets/stylesheets/content/_modal.sass

@@ -12,7 +12,7 @@ $ng-modal-image-width:   $ng-modal-image-height
 .ng-modal-window
   // overlay
   +position(fixed, 0px 0px 0px 0px)
-  background: rgba(0, 0, 0, 0.2)
+  background: rgba(0, 0, 0, 0.5)
   text-align: left
   z-index: 10000
 
@@ -34,8 +34,6 @@ $ng-modal-image-width:   $ng-modal-image-height
 
 .ng-modal-inner
   +transition(opacity 0.25s ease)
-  border-radius: $base-border-radius
-  box-shadow: 0 5px 10px rgba(0, 0, 0, .2)
   background: $ng-modal-background
   margin: auto
   max-height: 95%
@@ -46,46 +44,32 @@ $ng-modal-image-width:   $ng-modal-image-height
   margin-top: .6em
   //+media($medium-screen)
   //padding: $ng-modal-padding
-  //width: 60%
-  //max-height: 60%
+  //width: 50%
+  //max-height: 50%
   //margin-top: 10em
 
   //+media($large-screen)
-  width: 50%
+  width: 40%
   margin-top: 10em
 
   .modal-header
     padding: 0
     i
       float: right
-      padding: 10px
-
-
-#content-behind-modal
-  position: absolute
-  z-index: 1
-  padding: 10px
-
-#modal-dark-overlay
-  position: absolute
-  z-index: 2
-  background: #000000
-  opacity: 0.3
-  width: 97%
-  height: 94%
-
-.modal-container
-  position: relative
-  z-index: 3
-  margin: 20px auto
-  width: 60%
-  background: #ffffff
-  padding: 0
-  .modal-header
-    padding: 0
-    i
-      float: right
-      padding: 10px
-  .modal-content
-    padding: 20px  20px 20px 20px
-
+      cursor: pointer
+  
+  label
+    padding: 0 50px 0 0
+  input
+    width: 230px
+    height: 30px
+    line-height: 30px
+    padding: 0 5px
+    background: #ffffff
+    border: 1px solid #cacaca
+    font-size: 13px
+    color: #222222
+    border-radius: 2px
+  button
+    margin: 30px 7px 0 0
+  

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

public/templates/work_packages/modals/columns.html

@@ -2,7 +2,7 @@
   <div class="ng-modal-inner">
     <div class="modal-header"><i class="icon-close" ng-click="modal.closeMe()"></i></div>
 
-    <h1>Columns</h1>
+    <h3>Columns</h3>
 
     <div>
       <label for="selected_columns">Selected Columns</label>
@@ -16,8 +16,8 @@
     </div>
 
     <div>
-      <button ng-click="updateSelectedColumns()">Apply</button>
-      <button ng-click="modal.closeMe()">Cancel</button>
+      <button class="button_highlight" ng-click="updateSelectedColumns()">Apply</button>
+      <button class="button" ng-click="modal.closeMe()">Cancel</button>
     </div>
 
   </div>

public/templates/work_packages/modals/export.html

@@ -2,7 +2,7 @@
   <div class="ng-modal-inner">
     <div class="modal-header"><i class="icon-close" ng-click="modal.closeMe()"></i></div>
 
-    <h1>{{modal.name}}</h1>
+    <h3>{{modal.name}}</h3>
     <div class="grid-items-lines">
       <a ng-repeat="(key, value) in modal.formats" ng-href="{{value}}" class="grid-item">
         <img src="" alt="">

public/templates/work_packages/modals/save.html

@@ -2,15 +2,15 @@
   <div class="ng-modal-inner">
     <div class="modal-header"><i class="icon-close" ng-click="modal.closeMe()"></i></div>
 
-    <h1>Save</h1>
+    <h3>Save</h3>
 
     <div>
       <label for="name">Name</label>
-      <input type="text" name="query_name" ng-model="queryName"></input>
+      <input class="short" type="text" name="query_name" ng-model="queryName"></input>
     </div>
     <div>
-      <button ng-click="modal.closeMe()">Cancel</button>
-      <button ng-click="saveQueryAs(queryName)">Save</button>
+      <button class="button_highlight" ng-click="saveQueryAs(queryName)">Save</button>
+      <button class="button" ng-click="modal.closeMe()">Cancel</button>
     </div>
 
   </div>

public/templates/work_packages/modals/settings.html

@@ -2,7 +2,7 @@
   <div class="ng-modal-inner">
     <div class="modal-header"><i class="icon-close" ng-click="modal.closeMe()"></i></div>
 
-    <h1>Settings</h1>
+    <h3>Settings</h3>
 
   </div>
 </div>

public/templates/work_packages/modals/share.html

@@ -2,15 +2,15 @@
   <div class="ng-modal-inner">
     <div class="modal-header"><i class="icon-close" ng-click="modal.closeMe()"></i></div>
 
-    <h1>Share</h1>
+    <h3>Share</h3>
 
     <div>
       <label for="name">Page visible for others</label>
       <input type="checkbox" name="is_public" ng-model="query.isPublic"></input>
     </div>
     <div>
-      <button ng-click="modal.closeMe()">Cancel</button>
       <button ng-click="saveQuery()">Save</button>
+      <button ng-click="modal.closeMe()">Cancel</button>
     </div>
 
   </div>

public/templates/work_packages/modals/sorting.html

@@ -2,7 +2,7 @@
   <div class="ng-modal-inner modal-content">
     <div class="modal-header"><i class="icon-close" ng-click="modal.closeMe()"></i></div>
 
-    <h1>Sorting</h1>
+    <h3>Sorting</h3>
 
     <div ng-repeat="element in sortElements">
       <input type="hidden"