Merge pull request #3322 from HDinger/fix/20908-new-table-component
[20908] new table componentpull/3342/head
ulferts
9 years ago
commit
132ec4adbe
@ -0,0 +1,124 @@ |
||||
# Table component |
||||
|
||||
## style emulation from |
||||
[WP tables](http://localhost:8080/assets/css/styleguide.html#with-work-packages) |
||||
|
||||
``` |
||||
<div class="generic-table--container"> |
||||
<div class="generic-table--results-container" style="max-height: 340px;"> |
||||
<table role="grid" class="generic-table"> |
||||
<colgroup> |
||||
<col highlight-col> |
||||
<col highlight-col> |
||||
<col highlight-col> |
||||
<col highlight-col> |
||||
<col highlight-col> |
||||
</colgroup> |
||||
<thead> |
||||
<tr> |
||||
<th> |
||||
<div class="generic-table--sort-header-outer"> |
||||
<div class="generic-table--sort-header"> |
||||
<span class="sort asc"> |
||||
First |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</th> |
||||
<th> |
||||
<div class="generic-table--sort-header-outer"> |
||||
<div class="generic-table--sort-header"> |
||||
<span class="sort asc"> |
||||
Second |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</th> |
||||
<th> |
||||
<div class="generic-table--sort-header-outer"> |
||||
<div class="generic-table--sort-header"> |
||||
<span class="sort desc"> |
||||
Third |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</th> |
||||
<th> |
||||
<div class="generic-table--sort-header-outer"> |
||||
<div class="generic-table--sort-header"> |
||||
<span class="sort desc"> |
||||
Fourth |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</th> |
||||
<th> |
||||
<div class="generic-table--sort-header-outer"> |
||||
<div class="generic-table--sort-header"> |
||||
<span class="sort desc"> |
||||
Fifth |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr> |
||||
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td> |
||||
<td>Nullam a sem et metus congue placerat.</td> |
||||
<td>Mauris ut augue viverra, consequat eros eu, maximus quam.</td> |
||||
<td>Maecenas elementum orci a varius suscipit.</td> |
||||
<td>Nunc molestie neque sit amet eros semper dapibus.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Nullam a sem et metus congue placerat.</td> |
||||
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td> |
||||
<td>Mauris ut augue viverra, consequat eros eu, maximus quam.</td> |
||||
<td>Maecenas elementum orci a varius suscipit.</td> |
||||
<td>Nunc molestie neque sit amet eros semper dapibus.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Nullam a sem et metus congue placerat.</td> |
||||
<td>Mauris ut augue viverra, consequat eros eu, maximus quam.</td> |
||||
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td> |
||||
<td>Maecenas elementum orci a varius suscipit.</td> |
||||
<td>Nunc molestie neque sit amet eros semper dapibus.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Nullam a sem et metus congue placerat.</td> |
||||
<td>Mauris ut augue viverra, consequat eros eu, maximus quam.</td> |
||||
<td>Maecenas elementum orci a varius suscipit.</td> |
||||
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td> |
||||
<td>Nunc molestie neque sit amet eros semper dapibus.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Nullam a sem et metus congue placerat.</td> |
||||
<td>Mauris ut augue viverra, consequat eros eu, maximus quam.</td> |
||||
<td>Maecenas elementum orci a varius suscipit.</td> |
||||
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td> |
||||
<td>Nunc molestie neque sit amet eros semper dapibus.</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
<div class="generic-table--header-background"></div> |
||||
</div> |
||||
</div> |
||||
|
||||
``` |
||||
|
||||
## with no content |
||||
|
||||
``` |
||||
<div class="generic-table--container" style="height:150px"> |
||||
<div class="generic-table--no-results-container"> |
||||
<h2 class="generic-table--no-results-title"> |
||||
<i class="icon-info"></i> |
||||
Nothing to display |
||||
</h2> |
||||
<div class="generic-table--no-results-description"> |
||||
<p>Either nothing have been created or everything is filtered out.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
``` |
||||
@ -0,0 +1,232 @@ |
||||
//-- copyright |
||||
// OpenProject is a project management system. |
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF) |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License version 3. |
||||
// |
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: |
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang |
||||
// Copyright (C) 2010-2013 the ChiliProject Team |
||||
// |
||||
// This program is free software; you can redistribute it and/or |
||||
// modify it under the terms of the GNU General Public License |
||||
// as published by the Free Software Foundation; either version 2 |
||||
// of the License, or (at your option) any later version. |
||||
// |
||||
// This program is distributed in the hope that it will be useful, |
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
// GNU General Public License for more details. |
||||
// |
||||
// You should have received a copy of the GNU General Public License |
||||
// along with this program; if not, write to the Free Software |
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
||||
// |
||||
// See doc/COPYRIGHT.rdoc for more details. |
||||
//++ |
||||
|
||||
@include keyframes(fade-out) |
||||
from |
||||
opacity: 1 |
||||
to |
||||
opacity: 0 |
||||
|
||||
$generic-table--font-size: 0.875rem |
||||
$generic-table--header-font-size: 0.875rem |
||||
|
||||
$generic-table--header-height: 40px |
||||
$generic-table--footer-height: 34px |
||||
|
||||
.generic-table--container |
||||
position: relative |
||||
height: 100% |
||||
padding-top: $generic-table--header-height |
||||
overflow: |
||||
x: auto |
||||
y: hidden |
||||
|
||||
&.-with-footer |
||||
padding-bottom: $generic-table--footer-height |
||||
|
||||
.generic-table--results-container |
||||
height: 100% |
||||
overflow: |
||||
x: hidden |
||||
y: auto |
||||
|
||||
#generic-table |
||||
tr.issue |
||||
&.ng-enter, &.ng-move |
||||
@include transition(0.5s linear all) |
||||
opacity: 0 |
||||
&.ng-enter.ng-enter-active, &.ng-move.ng-move-active |
||||
opacity: 1 |
||||
&.ng-leave |
||||
@include animation(0.5s fade-out) |
||||
|
||||
table.generic-table |
||||
border-collapse: collapse |
||||
width: 100% |
||||
margin: 0 |
||||
font-size: $generic-table--font-size |
||||
|
||||
col |
||||
&:hover, |
||||
&.hover |
||||
background: #f8f8f8 |
||||
|
||||
thead |
||||
tr |
||||
&:hover |
||||
background: none |
||||
th |
||||
font-size: $generic-table--header-font-size |
||||
text-transform: uppercase |
||||
text-align: left |
||||
line-height: 34px |
||||
padding: 0 |
||||
|
||||
&.icon-table |
||||
// |
||||
&.active-column |
||||
background: #f8f8f8 |
||||
a |
||||
text-decoration: none |
||||
color: $body-font-color |
||||
&:hover, &:active |
||||
text-decoration: none |
||||
color: $body-font-color |
||||
|
||||
.sort |
||||
&.asc:after |
||||
@include icon-common |
||||
content: "\e0dd" |
||||
margin-left: 5px |
||||
font-size: 1.2em |
||||
vertical-align: text-bottom |
||||
|
||||
&.desc:after |
||||
@include icon-common |
||||
content: "\e0de" |
||||
margin-left: 5px |
||||
font-size: 1.2em |
||||
vertical-align: text-bottom |
||||
|
||||
tfoot |
||||
tr |
||||
border: |
||||
top: 0 |
||||
bottom: 0 |
||||
height: 0 |
||||
td |
||||
height: 0 |
||||
padding: |
||||
top: 0 |
||||
bottom: 0 |
||||
|
||||
tbody |
||||
tr |
||||
border-bottom: 1px solid #dddddd |
||||
&:hover |
||||
background: #e4f7fb |
||||
|
||||
td |
||||
min-width: 150px |
||||
max-width: 300px |
||||
overflow: hidden |
||||
text-overflow: ellipsis |
||||
text-align: left |
||||
line-height: 34px |
||||
|
||||
&.icon-table |
||||
// |
||||
&.checkbox |
||||
min-width: 0 |
||||
width: 20px |
||||
line-height: 1 |
||||
&.id |
||||
min-width: 0 |
||||
width: 50px |
||||
&.info |
||||
min-width: 0 |
||||
width: 20px |
||||
a |
||||
text-decoration: none |
||||
color: $body-font-color |
||||
|
||||
p |
||||
padding: 0 8px |
||||
margin: 0 |
||||
|
||||
.generic-table--footer-outer |
||||
position: absolute |
||||
bottom: 0 |
||||
line-height: $generic-table--footer-height |
||||
z-index: 1 |
||||
|
||||
.generic-table--header-outer, |
||||
.generic-table--sort-header-outer |
||||
position: absolute |
||||
top: 0 |
||||
padding: 0 8px |
||||
line-height: $generic-table--header-height |
||||
overflow: hidden |
||||
z-index: 1 |
||||
|
||||
&:hover, |
||||
&.hover |
||||
background: #f8f8f8 |
||||
|
||||
.generic-table--sort-header |
||||
white-space: nowrap |
||||
width: 100% |
||||
clear: both |
||||
display: table |
||||
|
||||
& > a, |
||||
& > span |
||||
display: table-cell |
||||
font-weight: bold |
||||
|
||||
& > .dropdown-indicator |
||||
width: 1em |
||||
text-align: right |
||||
|
||||
.generic-table--header-background |
||||
position: absolute |
||||
top: 0 |
||||
width: 100% |
||||
height: $generic-table--header-height |
||||
background: white |
||||
border-bottom: 1px solid #dddddd |
||||
box-shadow: 0 5px 15px -5px #dddddd |
||||
z-index: 0 |
||||
|
||||
.generic-table--footer-background |
||||
position: absolute |
||||
bottom: 0 |
||||
width: 100% |
||||
height: $generic-table--footer-height |
||||
background: #f6f7f8 |
||||
z-index: 0 |
||||
|
||||
.generic-table--no-results-container |
||||
position: absolute |
||||
top: $generic-table--header-height |
||||
left: 0 |
||||
right: 10px |
||||
background: #fff |
||||
border: 1px solid #ddd |
||||
border-radius: $global-radius |
||||
padding: 20px |
||||
|
||||
.generic-table--no-results-title |
||||
// properties to reset h2 |
||||
border: 0 |
||||
font-weight: normal |
||||
text-transform: none |
||||
color: black |
||||
|
||||
.generic-table--no-results-description |
||||
color: black |
||||
Loading…
Reference in new issue