generalize work package table dom even more

The only thing that remains to be specific is the "work-package-table--container" class as the beginning of the element block. With it, it should be possible to later on apply specific styles to the work packages table again
oliverguenther · Aug 12, 2015 · efe4845 · efe4845
1 parent c26a58f
commit efe4845
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 73 deletions.
diff --git a/app/assets/stylesheets/content/_work_packages_table.lsg b/app/assets/stylesheets/content/_work_packages_table.lsg
@@ -3,9 +3,9 @@
 ## with work packages
 
 ```
-<div class="work-packages-table--container">
-  <div class="work-packages-table--results-container">
-    <table class="workpackages-table">
+<div class="generic-table--container work-package-table--container" interactive-table>
+  <div class="generic-table--results-container">
+    <table class="generic-table">
       <colgroup>
         <col highlight-col>
         <col highlight-col>
@@ -16,53 +16,53 @@
       <thead>
         <tr>
           <th>
-            <div class="work-packages-table--header-outer">
+            <div class="generic-table--header-outer">
               <input type="checkbox">
             </div>
           </th>
           <th>
-            <div class="sort-header-outer">
-              <span class="sort-header">
+            <div class="generic-table--sort-header-outer">
+              <span class="generic-table--sort-header">
                 #
                 <span class="icon-context icon-button icon-pulldown-arrow1 dropdown-indicator"></span>
               </span>
             </div>
           </th>
           <th class="active-column">
-            <div class="sort-header-outer">
-              <span class="sort-header">
+            <div class="generic-table--sort-header-outer">
+              <span class="generic-table--sort-header">
                 Subject
                 <span class="icon-context icon-button icon-pulldown-arrow1 dropdown-indicator"></span>
               </span>
             </div>
           </th>
           <th>
-            <div class="sort-header-outer">
-              <span class="sort-header">
+            <div class="generic-table--sort-header-outer">
+              <span class="generic-table--sort-header">
                 Type
                 <span class="icon-context icon-button icon-pulldown-arrow1 dropdown-indicator"></span>
               </span>
             </div>
           </th>
           <th>
-            <div class="sort-header-outer">
-              <span class="sort-header">
+            <div class="generic-table--sort-header-outer">
+              <span class="generic-table--sort-header">
                 Status
                 <span class="icon-context icon-button icon-pulldown-arrow1 dropdown-indicator"></span>
               </span>
             </div>
           </th>
           <th>
-            <div class="sort-header-outer">
-              <span class="sort-header">
+            <div class="generic-table--sort-header-outer">
+              <span class="generic-table--sort-header">
                 Priority
                 <span class="icon-context icon-button icon-pulldown-arrow1 dropdown-indicator"></span>
               </span>
             </div>
           </th>
           <th>
-            <div class="sort-header-outer">
-              <span class="sort-header">
+            <div class="generic-table--sort-header-outer">
+              <span class="generic-table--sort-header">
                 Assignee
                 <span class="icon-context icon-button icon-pulldown-arrow1 dropdown-indicator"></span>
               </span>
@@ -145,21 +145,21 @@
         </tr>
       </tbody>
     </table>
-    <div class="work-packages-table--header-background"></div>
+    <div class="generic-table--header-background"></div>
   </div>
 </div>
 ```
 
 ## with no work packages
 
 ```
-<div class="work-packages-table--container" style="height:150px">
-  <div class="work-packages-table--no-results-container">
-    <h2 class="work-packages-table--no-results-title">
+<div class="generic-table--container work-package-table--container" style="height:150px">
+  <div class="generic-table--no-results-container">
+    <h2 class="generic-table--no-results-title">
       <i class="icon-info"></i>
       No work packages to display
     </h2>
-    <div class="work-packages-table--no-results-description">
+    <div class="generic-table--no-results-description">
       <p>Either none have been created or all work packages are filtered out.</p>
     </div>
   </div>

diff --git a/app/assets/stylesheets/content/_work_packages_table.sass b/app/assets/stylesheets/content/_work_packages_table.sass
@@ -25,41 +25,3 @@
 //
 // See doc/COPYRIGHT.rdoc for more details.
 //++
-
-@import 'table'
-.work-packages-table--container
-  @extend .generic-table--container
-
-.work-packages-table--results-container
-  @extend .generic-table--results-container
-
-#work-packages-table
-  @extend #generic-table 
-
-table.workpackages-table
-  @extend table.generic-table
-
-  .work-packages-table--footer-outer
-    @extend .generic-table--footer-outer
-
-  .work-packages-table--header-outer,
-  .sort-header-outer
-    @extend .generic-table--header-outer, .generic-table--sort-header-outer
-
-  .sort-header
-    @extend .generic-table--sort-header
-
-.work-packages-table--header-background
-  @extend .generic-table--header-background
-
-.work-packages-table--footer-background
-  @extend .generic-table--footer-background
-
-.work-packages-table--no-results-container
-  @extend .generic-table--no-results-container
-
-.work-packages-table--no-results-title
-  @extend .generic-table--no-results-title
-
-.work-packages-table--no-results-description
-  @extend .generic-table--no-results-description
diff --git a/frontend/app/templates/work_packages/sort_header.html b/frontend/app/templates/work_packages/sort_header.html
@@ -1,5 +1,5 @@
-<div class="sort-header-outer generic-table--sort-header-outer">
-  <span title="{{ fullTitle }}" class="sort-header">
+<div class="generic-table--sort-header-outer">
+  <span title="{{ fullTitle }}" class="generic-table--sort-header">
     <a href="javascript://"
        ng-if="sortable"
        ng-class="[currentSortDirection && 'sort', currentSortDirection]"

diff --git a/frontend/app/templates/work_packages/work_packages_table.html b/frontend/app/templates/work_packages/work_packages_table.html
@@ -1,16 +1,16 @@
-<div class="work-packages-table--container"
+<div class="generic-table--container work-package-table--container"
   ng-class="{ '-with-footer': displaySums }"
   interactive-table>
-  <div class="work-packages-table--results-container generic-table--results-container" ng-if="rows.length">
-    <table class="workpackages-table keyboard-accessible-list">
+  <div class="generic-table--results-container" ng-if="rows.length">
+    <table class="keyboard-accessible-list generic-table">
       <colgroup>
         <col highlight-col />
         <col highlight-col ng-repeat="column in columns" />
       </colgroup>
       <thead>
         <tr>
           <th class="checkbox hide-when-print">
-            <div class="work-packages-table--header-outer generic-table--sort-header-outer">
+            <div class="generic-table--header-outer">
               <a href
                  alt="{{toggleRowsLabel}}"
                  class="no-decoration-on-hover"
@@ -24,7 +24,7 @@
 
           <th sort-header ng-repeat="column in columns"
                           has-dropdown-menu
-                          position-relative-to=".sort-header-outer"
+                          position-relative-to=".generic-table--sort-header-outer"
                           target="ColumnContextMenu"
                           locals="columns, column"
                           locale="column.custom_field && columns.custom_field.name_locale || I18n.locale"
@@ -164,28 +164,28 @@
             ng-if="displaySums"
             class="sum group all issue work_package">
           <td colspan="{{1  - (!!hideWorkPackageDetails * 1)}}">
-            <div class="work-packages-table--footer-outer">
+            <div class="generic-table--footer-outer">
               {{ I18n.t('js.label_sum_for') }} {{ I18n.t('js.label_all_work_packages') }}
             </div>
           </td>
           <td ng-repeat="column in columns">
-            <div class="work-packages-table--footer-outer">
+            <div class="generic-table--footer-outer">
               {{ column.total_sum }}
             </div>
           </td>
         </tr>
 
       </tfoot>
     </table>
-    <div class="work-packages-table--header-background"></div>
-    <div class="work-packages-table--footer-background" ng-if="displaySums"></div>
+    <div class="generic-table--header-background"></div>
+    <div class="generic-table--footer-background" ng-if="displaySums"></div>
   </div>
-  <div class="work-packages-table--no-results-container" ng-if="!rows.length">
-    <h2 class="work-packages-table--no-results-title">
+  <div class="generic-table--no-results-container" ng-if="!rows.length">
+    <h2 class="generic-table--no-results-title">
       <i class="icon-info"></i>
       {{ I18n.t('js.work_packages.no_results.title') }}
     </h2>
-    <div class="work-packages-table--no-results-description"
+    <div class="generic-table--no-results-description"
       ng-bind-html="I18n.t('js.work_packages.no_results.description_html')"></div>
   </div>
 </div>