Add export-modal styles in styleguide

- added styles to export modal in styleguide
- changed some icon-classes

app/assets/fonts/openproject_icon/openproject-icon-font.svg

@@ -32,7 +32,6 @@
 <glyph unicode="&#57366;" d="M186 64l-92 0 0 384 172 0 89-92 43 46-106 110-260 0 0-512 154 0z m-26 86l0-14c81-135 271-135 352 0l0 14c-81 135-271 135-352 0z m176-88c-45 0-81 36-81 81 0 45 36 81 81 81 45 0 81-36 81-81 0-45-36-81-81-81z m41 81c0-23-19-41-41-41-22 0-41 18-41 41 0 22 19 40 41 40 22 0 41-18 41-40z"/>
 <glyph unicode="&#57367;" d="M275 200c0-13-2-15-14-15l-48 0c-13 0-15 2-15 15l0 89c0 17 24 20 48 29 24 9 48 23 48 62 0 32-20 50-56 50-42 0-77-23-84-23-3 0-7 3-7 7l-18 48c-1 3-1 5-1 8 0 19 80 42 125 42 81 0 131-56 131-133 0-92-69-116-109-131z m-36-200c-32 0-57 28-57 60 0 34 25 60 57 60 32 0 57-27 57-60 0-32-26-60-57-60z"/>
 <glyph unicode="&#57368;" d="M505 155c-9 16-9 25-42 39-33 14-41 19-41 19l0 31c0 0 12 10 16 39 7-2 16 12 16 19 0 7-1 27-10 25 1 14 3 27 2 34-2 26-27 52-66 52-38 0-63-26-66-52 0-7 1-20 3-34-10 2-11-18-11-25 1-7 9-21 17-19 4-29 16-39 16-39l-28-21c16-9 56-4 64-17 5-8 18-28 14-151l123 0c0 0 2 86-7 100z m-144 11c-11 18-49 28-85 44-37 15-46 20-46 20l0 35c0 0 14 11 18 44 9-2 18 13 18 21 1 8-1 29-11 27 2 16 3 31 2 39-2 28-30 58-73 58-43 0-71-30-73-58-1-8 0-22 3-39-11 2-13-19-12-27 0-8 9-23 18-21 4-33 18-44 18-44l0-35c0 0-9-5-46-20-37-16-74-26-85-44-10-15-7-111-7-111l368 0c0 0 2 96-7 111z"/>
-<glyph unicode="&#57369;" d="M72 14c7 18 15 34 23 49l25 45-45 83 20 0 36-68 36 68 19 0-44-82 12-20 13-24c4-8 8-16 12-25 4-9 8-17 11-25l-18 0c-3 5-5 10-8 17-3 6-6 13-10 20l-12 22-11 20-12-20-11-22c-4-7-7-14-10-20-3-7-6-13-8-18z m150 45l0 218 17 4 0-222c0-5 1-9 2-13 1-3 2-6 3-8 2-2 4-3 7-4 2-1 5-2 9-2l-3-20c-6 0-11 1-15 3-4 1-8 4-11 8-3 4-5 9-7 15-1 5-2 12-2 21z m58-38l4 20c1-1 2-1 4-2 2-1 4-3 7-4 3-1 7-2 11-3 4-1 9-1 14-1 10 0 18 2 25 6 6 4 10 11 10 21 0 5-1 9-2 12-1 4-3 7-6 9-2 3-6 6-10 8l-17 9c-5 3-10 5-14 8-5 3-9 6-12 10-4 4-7 8-9 13-2 6-3 12-3 19 0 15 4 27 13 36 8 9 20 13 34 13 10 0 17-1 24-3 6-2 10-4 12-6l-3-20c-3 1-6 3-11 5-5 3-13 4-22 4-4 0-8-1-12-2-3-1-6-2-9-5-3-2-5-4-6-8-2-3-3-7-3-12 0-4 1-8 2-12 2-3 4-6 7-9 3-2 6-5 10-7l14-7c5-3 10-6 15-9 5-3 9-6 13-10 3-4 6-9 9-14 2-6 3-13 3-21 0-16-5-28-14-36-9-9-22-13-38-13-12 0-21 2-27 4-7 3-11 5-13 7z m-242 491l31 0 0-310-31 0z m15 0l249 0 0-62-249 0z m357-140l31 0 0-341-31 0z m31-15l-155 0 0 0 0 155 14 0 140-141 0-14"/>
 <glyph unicode="&#57370;" d="M336 320c0-44-36-80-80-80-44 0-80 36-80 80 0 44 36 80 80 80 44 0 80-36 80-80z m80 0c0 11-1 21-3 31l26 28-38 8c-9 19-21 36-37 50l5 38-35-16c-18 10-38 17-59 19l-19 34-19-34c-21-2-41-9-59-19l-35 16 5-38c-16-14-28-31-37-50l-38-8 26-28c-2-10-3-20-3-31 0-11 1-21 3-31l-26-28 38-8c9-19 21-36 37-50l5-5-25-198 128 128 128-128-25 198 5 5c16 14 28 31 37 50l38 8-26 28c2 10 3 20 3 31z m-160-112c-62 0-112 50-112 112 0 62 50 112 112 112 62 0 112-50 112-112 0-62-50-112-112-112z"/>
 <glyph unicode="&#57371;" d="M478 397l0-346-444 0 0 346 444 0m34 51l-512 0 0-448 512 0z m-270-345l-51 125-50-118-49 113-22-94c-1-6-6-10-11-7-4 2-6 9-5 16l33 143 54-124 50 119 46-112 36 165c1 7 6 10 11 8 4-2 7-9 5-16z m-242 409l512 0 0-115-512 0z m451-204c0-35-28-64-64-64-35 0-64 29-64 64 0 35 29 64 64 64 36 0 64-29 64-64z m-134-148l64 0 0-64-64 0z m74 0l64 0 0-64-64 0z"/>
 <glyph unicode="&#57372;" d="M256 512c-141 0-256-115-256-256 0-141 115-256 256-256 141 0 256 115 256 256 0 141-115 256-256 256z m70-389c0 0 0 0 0 0 2 0 2 0 3 2 0-4 1-6 2-9-4 14 11 14 17 23 3 3 7 12 10 13 1-2 2-5 1-8 1 2 0 0 0-1 0-2-1-5-2-8-1 1-1 1-1 2-11-9-11-35-26-42-9-3-8 8-5 12 5 6-1 10 2 15-1 0-1 1-1 1 0 0 0 0 0 0 0 0 0 0 0 0-3 0-6 7-6 11 4 1 5 3 6 2 1 1 4 7 4 8 1-5-7-17-4-21z m115 163c-4 8-8 18-11 23-6 9-9 22-17 29 2-2 2-5 1-7-4 1-8 3-10 7-1 2 4-2 1 3-6-1-11 6-16 9-10 2-20-6-30-1-2 2-4 9-7 5-2-3-4-3-7-2-11 4-15 13-25 13 0-4 7-10 10-12 5-3 8-13 8-4 6-3 2-11 11-8 6-3 5 8 6 11 2-1 3-6 5-8 3-3 8-2 12-5 4-5 6-11 5-16-4 0-1-5-3-8-3-4-2-5-4-9-5-2-10-4-9-10-3-3-32-24-35-18-5 7-6 16-10 24-5 1-17 16-19 21 2 10-24 28-28 29 3-13 14-20 20-30 4-9 12-29 19-32 11 1 18-19 24-23 7-6 23 12 30 10 1-9 1-12-2-22-6-21-15-30-28-47-7-9-11-16-17-27-4-8 8-26 5-31 2-13-1-22-13-28-9-5-17-10-14-20 3-9-9-11-10-16-4-9-9-14-15-17-4 0-8-1-12-1-7 0-15 1-22 2-10 12-20 25-30 37-6 7-15 20-6 29 1 6-6 20-9 25-5 9-30 29-21 39 2 7-4 14-4 19-5 4-11-5-16 4-5 9-15 7-24 1-1-2-24-5-26-3-18 15-23 40-17 61 2 8 3 24 9 29 3 9 13 18 19 26 3 4 7 4 11 8 5 6 7 13 14 19 7 5 21 14 9 16 5 7 13 15 16 24 4 3 12 2 16 4 4 8 6 8 5 13 0 4 11 6 13 7 5 2 9 6 12 9 17 4 33 7 51 7 93 0 171-69 185-158z m-184 123c0-6 11-5 13-6-3 2 1 2 0 0 10 12-21 24-22 24 1 1 2 2 2 4-6-4-2 7-7-4 1-9-5-15-2-24 5-9 11 5 16 6z m-24-15c-6 4-2-1-6-6-5-6-5-8-13-5-1 7 16 1 8 14-3 7-7 14-14 10-7-5-19-8-24-17-3-4-24-21-24-22 8-7 41 20 49 12-1-5-7-10-7-15 2-1 3-4 6-4 10 2 8-6 15-8 14-3 4 0 12 8 3 3 17 3 18-2 0 3 6 1 0 0 7 1 13-6 18-1 3 4 6 3 8 1 12-9 8 26 9 27-4-2-28-5-28-2 0 3-3 3-4 7 4 5-4 2 0 9-2 1-4 1-7 0-1-4 2-3-3-2-2-4 4-7 3-11 0 0-1 1-2 1-1-3 0-3 0-7-8 1-4 7-11 17 6 5-13 15-10 18-14-4 11-18 7-22z m-25-5c-1-1-3-1-4-1 1 3 6 16 9 17 0-5-4-12-5-16z m-14 4c1 4-2 1 0 0z m94 19c-3-1 1-10 5-10 4-2 7-3 11-1-1 7-19 21-25 24 1 1 1 4 3 3-2 8-10 2-10-3 3-4 15-10 16-13z m21-14c-4-1 2-3 0 0z m16 14c-3 1-6 8-10 9 0-2 0-2 0-3 0 1 1-2 0 0 1-2 7-10 10-6z m-147-2c-1-1-2-2-3-2 0 0 0 0 0-1 1 0 2 3 3 3z"/>
@@ -245,4 +244,5 @@
 <glyph unicode="&#57577;" d="M211 195l-26 0 0-47 15 0 0 15 11 0c11 0 17 7 17 16 0 9-6 16-17 16z m-2-20l-9 0 0 8 9 0c2 0 4-1 4-4 0-2-2-4-4-4z m47 20l-21 0 0-47 21 0c15 0 26 9 26 24 0 15-11 23-26 23z m0-35l-7 0 0 23 7 0c8 0 12-5 12-11 0-6-5-12-12-12z m35-12l14 0 0 18 21 0 0 12-21 0 0 5 22 0 0 12-36 0z m120 300l0 0 0 21c0 4-4 8-9 8l-168 0-133-132 0-302c0-4 4-8 9-8l292 0c5 0 9 4 9 8l0 13 0 0z m-259-362l0 241 91 0c5 0 9 4 9 9l0 90 108 0 0-340z"/>
 <glyph unicode="&#57578;" d="M207 183c4 0 8-3 9-6l12 5c-2 7-9 14-21 14-15 0-26-10-26-24 0-15 11-25 26-25 12 0 19 8 21 14l-12 6c-1-4-5-7-9-7-7 0-12 5-12 12 0 6 5 11 12 11z m42-1c0 1 1 2 3 2 5 0 10-2 14-5l8 10c-5 5-12 7-20 7-13 0-20-8-20-16 0-18 27-14 27-18 0-2-3-3-6-3-6 0-11 3-15 6l-7-10c5-5 12-8 22-8 12 0 20 6 20 17 0 17-26 13-26 18z m56-19l-11 32-16 0 18-47 18 0 17 47-16 0z m106 285l0 0 0 21c0 4-4 8-9 8l-168 0-133-132 0-302c0-4 4-8 9-8l292 0c5 0 9 4 9 8l0 13 0 0z m-259-362l0 241 91 0c5 0 9 4 9 9l0 90 108 0 0-340z"/>
 <glyph unicode="&#57574;" d="M210 328l84 0 0-279-84 0z m256 128l-213-277-215 277z"/>
+<glyph unicode="&#57369;" d="M72 14c7 18 15 34 23 49l25 45-45 83 20 0 36-68 36 68 19 0-44-82 12-20 13-24c4-8 8-16 12-25 4-9 8-17 11-25l-18 0c-3 5-5 10-8 17-3 6-6 13-10 20l-12 22-11 20-12-20-11-22c-4-7-7-14-10-20-3-7-6-13-8-18z m150 45l0 218 17 4 0-222c0-5 1-9 2-13 1-3 2-6 3-8 2-2 4-3 7-4 2-1 5-2 9-2l-3-20c-6 0-11 1-15 3-4 1-8 4-11 8-3 4-5 9-7 15-1 5-2 12-2 21z m58-38l4 20c1-1 2-1 4-2 2-1 4-3 7-4 3-1 7-2 11-3 4-1 9-1 14-1 10 0 18 2 25 6 6 4 10 11 10 21 0 5-1 9-2 12-1 4-3 7-6 9-2 3-6 6-10 8l-17 9c-5 3-10 5-14 8-5 3-9 6-12 10-4 4-7 8-9 13-2 6-3 12-3 19 0 15 4 27 13 36 8 9 20 13 34 13 10 0 17-1 24-3 6-2 10-4 12-6l-3-20c-3 1-6 3-11 5-5 3-13 4-22 4-4 0-8-1-12-2-3-1-6-2-9-5-3-2-5-4-6-8-2-3-3-7-3-12 0-4 1-8 2-12 2-3 4-6 7-9 3-2 6-5 10-7l14-7c5-3 10-6 15-9 5-3 9-6 13-10 3-4 6-9 9-14 2-6 3-13 3-21 0-16-5-28-14-36-9-9-22-13-38-13-12 0-21 2-27 4-7 3-11 5-13 7z m-242 491l31 0 0-310-31 0z m15 0l249 0 0-62-249 0z m357-140l31 0 0-341-31 0z m31-15l-155 0 0 0 0 155 14 0 140-141 0-14"/>
 </font></defs></svg>

app/assets/stylesheets/content/_modal.md

@@ -1,17 +1,52 @@
 # Modal
 
 ```
-<div id="content-behind-modal">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
-Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Crasdapibus. Vivamus elementum semper</div>
-
-<div id="modal-dark-overlay">
-</div>
-
 <div class="modal-container">
   <div class="modal-header"><i class="icon-close"></i></div>
   <div class="modal-content">
     <h3>Modal Headline</h3>
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper
   </div>
-</div>
+</div><br /><br />
+<h3>Export</h3>
+    <ul class="export-options">
+      <li>
+        <a>
+          <i class="icon-page-atom icon-big"></i>
+          <label>ATOM</label>
+        </a>
+      </li>
+       <li>
+        <a>
+          <i class="icon-page-xls icon-big"></i>
+          <label>XLS</label>
+        </a>
+      </li>
+       <li>
+        <a>
+          <i class="icon-page-xls icon-big"></i>
+          <label>XLS with description</label>
+        </a>
+      </li>
+       <li>
+        <a>
+          <i class="icon-page-pdf icon-big"></i>
+          <label>PDF</label>
+        </a>
+      </li>
+       <li>
+        <a>
+          <i class="icon-page-pdf icon-big"></i>
+          <label>PDF with description</label>
+        </a>
+      </li>
+       <li>
+        <a>
+          <i class="icon-page-csv icon-big"></i>
+          <label>CSV</label>
+        </a>
+      </li>
+    </ul>
+
+
 ```

app/assets/stylesheets/content/_modal.sass

@@ -87,3 +87,26 @@ $ng-modal-image-width:   $ng-modal-image-height
         width: 160px
       @media(max-width: 800px)
         width: 120px
+
+.export-options
+ul
+  margin: 0
+  padding: 0
+  list-style-type: none
+  li
+    float: left
+    margin: 0 40px 20px 0
+    text-align: center
+    cursor: pointer
+  a
+    display: block
+    text-decoration: none
+    color: $global_font_color 
+    font-weight: normal
+    &:hover, &:active
+      text-decoration: none
+      color: $global_font_color 
+    label
+      display: block
+      
+       

app/assets/stylesheets/fonts/_openproject_icon_font.md

@@ -238,8 +238,10 @@
 <i class="icon-table-view"></i>
 <i class="icon-table-detail-view"></i>
 <i class="icon-timeline-view"></i>
-<i class="icon-toggler"></i>
+<i class="icon-toggle"></i>
 <i class="icon-page-pdf"></i>
 <i class="icon-page-csv"></i>
+<i class="icon-page-xls"></i>
+<i class="icon-page-atom"></i>
 <i class="icon-filter-big"></i>
 ```

app/assets/stylesheets/fonts/_openproject_icon_font.sass

@@ -935,6 +935,12 @@ dt > .icon-wiki-page:before,
 .icon-filter-big:before
   content: "\e0e6"
 
+.icon-page-xls:before
+  content: "\e019"
+
+.icon-page-atom:before
+  content: "\e0a5"
+
 /* remove once all menu items have an icon */
 .no-icon
   margin-left: 15px

public/templates/work_packages/modals/export.html

@@ -3,7 +3,7 @@
     <div class="modal-header"><i class="icon-close" ng-click="modal.closeMe()"></i></div>
 
     <h3>{{modal.name}}</h3>
-    <ul>
+    <ul class="export-options">
       <li ng-repeat="option in modal.exportOptions">
         <a ng-href="{{ option.url }}">
           <i class="icon-page-{{ option.label }} icon-big"></i>