feat: selectable table style

oocx · Nov 1, 2018 · 8e55d41 · 8e55d41
1 parent 7cf5322
commit 8e55d41
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 26 deletions.
diff --git a/projects/oocx-ng/src/lib/tables.less b/projects/oocx-ng/src/lib/tables.less
@@ -50,12 +50,21 @@ table.ox-table {
  margin: 0;
  }
 
+ tr {
+ border-top: 1px solid @border-color;
+ }
+
+ tr.header-row {
+ border: none;
+ }
+
  tr:nth-child(2n + 1) {
  background-color: @table-alternating-background-color;
  }
 
  tr.groupHeader {
  background-color: @table-background-color !important;
+ border: none;
  }
 
  tr.groupHeader h3 {
@@ -65,18 +74,31 @@ table.ox-table {
  tr.groupFooter > th {
  padding: 4px 4px 32px 4px;
  vertical-align: top;
+ border: none;
  }
 
- tr.data-row,
- tr.start-row {
- border-top: 1px solid @border-color;
- }
+
 
  th {
  text-align: left;
  }
 }
 
+table.ox-table.selectable {
+ tr:not(.groupFooter):not(.groupHeader):hover {
+ background-color: @accent-color;
+ text-decoration: none;
+ cursor: pointer;
+
+ td {
+ color: @table-background-color;
+ }
+ th {
+ cursor: default;
+ }
+ }
+}
+
 table.ox-table2 {
 
  margin-top: 8px;
@@ -216,8 +238,4 @@ table.ox-table5 {
  th, td {
  padding: 4px;
  }
-
- td:has(> input) {
- padding: 0;
- }
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -136,8 +136,8 @@ <h3>Tables</h3>
 
 
 <h4>ox-table</h4>
-<table class="ox-table">
- <tr>
+<table class="ox-table selectable">
+ <tr class="header-row">
  <th>Datum</th>
  <th>Kennzeichen</th>
  <th>Startzeit</th>
@@ -146,7 +146,7 @@ <h4>ox-table</h4>
  <th>Landeort</th>
  <th>Dauer</th>
  </tr>
- <tr class="start-row">
+ <tr>
  <td>01.07.2018</td>
  <td>D-1234</td>
  <td>10:00</td>
@@ -155,7 +155,7 @@ <h4>ox-table</h4>
  <td>EDXG</td>
  <td>0:55</td>
  </tr>
- <tr class="start-row">
+ <tr>
  <td>01.07.2018</td>
  <td>D-1234</td>
  <td>10:00</td>
@@ -164,7 +164,7 @@ <h4>ox-table</h4>
  <td>EDXG</td>
  <td>0:55</td>
  </tr>
- <tr class="start-row">
+ <tr>
  <td>01.07.2018</td>
  <td>D-1234</td>
  <td>10:00</td>
@@ -186,7 +186,7 @@ <h4>ox-table2</h4>
  <th>Landeort</th>
  <th>Dauer</th>
  </tr>
- <tr class="start-row">
+ <tr>
  <td>01.07.2018</td>
  <td>D-1234</td>
  <td>10:00</td>
@@ -195,7 +195,7 @@ <h4>ox-table2</h4>
  <td>EDXG</td>
  <td>0:55</td>
  </tr>
- <tr class="start-row">
+ <tr>
  <td>01.07.2018</td>
  <td>D-1234</td>
  <td>10:00</td>
@@ -204,7 +204,7 @@ <h4>ox-table2</h4>
  <td>EDXG</td>
  <td>0:55</td>
  </tr>
- <tr class="start-row">
+ <tr>
  <td>01.07.2018</td>
  <td>D-1234</td>
  <td>10:00</td>
@@ -226,7 +226,7 @@ <h4>ox-table3</h4>
  <th>Landeort</th>
  <th>Dauer</th>
  </tr>
- <tr class="start-row">
+ <tr>
  <td>01.07.2018</td>
  <td>D-1234</td>
  <td>10:00</td>
@@ -235,7 +235,7 @@ <h4>ox-table3</h4>
  <td>EDXG</td>
  <td>0:55</td>
  </tr>
- <tr class="start-row">
+ <tr>
  <td>01.07.2018</td>
  <td>D-1234</td>
  <td>10:00</td>
@@ -244,7 +244,7 @@ <h4>ox-table3</h4>
  <td>EDXG</td>
  <td>0:55</td>
  </tr>
- <tr class="start-row">
+ <tr>
  <td>01.07.2018</td>
  <td>D-1234</td>
  <td>10:00</td>
@@ -266,7 +266,7 @@ <h4>ox-table4</h4>
  <th>Landeort</th>
  <th>Dauer</th>
  </tr>
- <tr class="start-row">
+ <tr>
  <td>01.07.2018</td>
  <td>D-1234</td>
  <td>10:00</td>
@@ -275,7 +275,7 @@ <h4>ox-table4</h4>
  <td>EDXG</td>
  <td>0:55</td>
  </tr>
- <tr class="start-row">
+ <tr>
  <td>01.07.2018</td>
  <td>D-1234</td>
  <td>10:00</td>
@@ -284,7 +284,7 @@ <h4>ox-table4</h4>
  <td>EDXG</td>
  <td>0:55</td>
  </tr>
- <tr class="start-row">
+ <tr>
  <td>01.07.2018</td>
  <td>D-1234</td>
  <td>10:00</td>
@@ -306,7 +306,7 @@ <h4>ox-table5</h4>
  <th>Landeort</th>
  <th>Dauer</th>
  </tr>
- <tr class="start-row">
+ <tr>
  <td>01.07.2018</td>
  <td>D-1234</td>
  <td>10:00</td>
@@ -315,7 +315,7 @@ <h4>ox-table5</h4>
  <td>EDXG</td>
  <td>0:55</td>
  </tr>
- <tr class="start-row">
+ <tr>
  <td>01.07.2018</td>
  <td>D-1234</td>
  <td>10:00</td>
@@ -325,7 +325,7 @@ <h4>ox-table5</h4>
  <td>0:55</td>
  </tr>
  <tr class="group-separator"></tr>
- <tr class="start-row">
+ <tr>
  <td>02.07.2018</td>
  <td>D-1234</td>
  <td>10:00</td>
@@ -334,7 +334,7 @@ <h4>ox-table5</h4>
  <td>EDXG</td>
  <td>0:55</td>
  </tr>
- <tr class="start-row">
+ <tr>
  <td>02.07.2018</td>
  <td>D-1234</td>
  <td>12:00</td>