Merge pull request #1717 from opf/feature/styleguide-details-pane-table

pull/1629/merge
Hagen Schink 10 years ago
commit f6d0afcf6f
  1. 32
      app/assets/stylesheets/content/_work_packages_details_attachments.sass
  2. 36
      app/assets/stylesheets/content/_work_packages_details_pane_tables.md
  3. 46
      app/assets/stylesheets/content/_work_packages_details_pane_tables.sass
  4. 24
      app/assets/stylesheets/content/_work_packages_relations.sass
  5. 1
      app/assets/stylesheets/default.css.sass
  6. 1
      app/assets/stylesheets/default_simple.css.sass
  7. 18
      public/templates/work_packages/tabs/_attachments_table.html
  8. 8
      public/templates/work_packages/tabs/_work_package_relations.html

@ -38,38 +38,6 @@
margin: 0
padding: 0
line-height: 20px
table
padding: 0
margin: 0px 0 10px 0
float: left
border-collapse: collapse
border: 0px solid #ddd
width: 100%
table-layout: fixed
tbody
tr
td
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
width: 10%
tr
&:hover
background: #ffffae
th
text-align: left
font-family: 'LatoBold'
font-weight: normal
text-transform: uppercase
background: #fff
padding: 6px 10px 6px 0
border-bottom: 2px solid #eee
td
text-align: left
font-weight: normal
border-bottom: 0px solid #ddd
padding: 6px 10px 6px 0
.add-file
float: left

@ -0,0 +1,36 @@
# Work Packages - [Details Pane] - Tables
```
<table class="detail-pane-table">
<thead>
<tr>
<td>Subject</td>
<td>Status</td>
<td>Assignee</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">Lorem ipsum</a></td>
<td>Resolved</td>
<td><a href="#">John Doe</a></td>
<td><i title="Delete relation" class="delete-item icon-delete"></i></td>
</tr>
<tr>
<td><a href="#">Lorem ipsum evvrevrevrevrebrebreberberbrebbreevrvrevrebre</a></td>
<td>Resolved</td>
<td><a href="#">John Doe</a></td>
<td><i title="Delete relation" class="delete-item icon-delete"></i></td>
</tr>
<tr>
<td><a href="#">Lorem ipsum</a></td>
<td>Resolved</td>
<td><a href="#">John Doe</a></td>
<td><i title="Delete relation" class="delete-item icon-delete"></i></td>
</tr>
</tbody>
</table>
```

@ -0,0 +1,46 @@
/* Please use these styles for tables inside the details-pane */
table.detail-pane-table
width: 100%
table-layout: fixed
border-collapse: collapse
thead
border-bottom: 1px solid #dddddd
font-weight: bold
text-transform: uppercase
tr
td
padding: 3px 8px 3px 0
text-overflow: ellipsis
white-space: nowrap
overflow: hidden
.delete-item
cursor: pointer
float: right
table.relations-table
tr
td
&:first-of-type
width: 50%
&:nth-child(2)
width: 15%
&:nth-child(3)
width: 25%
&:last-of-type
width: 10%
table.attachments-table
tr
td
&:first-of-type
width: 20%
&:nth-child(2)
width: 10%
&:nth-child(3)
width: 20%
&:nth-child(4)
width: 15%
&:last-of-type
width: 25%

@ -35,30 +35,6 @@
a
text-decoration: none
color: inherit
.content
.workpackages
table
width: 100%
table-layout: fixed
thead
font-weight: bold
text-transform: uppercase
line-height: 32px
tr
td
text-overflow: ellipsis
white-space: nowrap
overflow: hidden
&:first-of-type
width: 50%
&:nth-child(2)
width: 15%
&:nth-child(3)
width: 25%
&:last-of-type
width: 10%
.delete-item
cursor: pointer
.add-relation
.related-issue-candidates ul li

@ -59,6 +59,7 @@
@import content/work_packages_table
@import content/work_packages_details_activities
@import content/work_packages_details_attachments
@import content/work_packages_details_pane_tables
@import content/expandable_group_content
@import content/control_colors
@import content/components_add_comments_default

@ -59,6 +59,7 @@
@import content/work_packages
@import content/work_packages_filters
@import content/work_packages_table
@import content/work_packages_details_pane_tables
@import content/expandable_group_content
@import content/control_colors
@import content/components_add_comments_default

@ -1,20 +1,22 @@
<table ng-if="attachments.length">
<tbody>
<table ng-if="attachments.length" class="detail-pane-table attachments-table">
<thead>
<tr>
<th>{{ I18n.t('js.label_filename')}}</th>
<th>{{ I18n.t('js.label_filesize')}}</th>
<th>{{ I18n.t('js.label_uploaded_by')}}</th>
<th>{{ I18n.t('js.label_description')}}</th>
<th>{{ I18n.t('js.label_date')}}</th>
<td title="{{ I18n.t('js.label_filename')}}">{{ I18n.t('js.label_filename')}}</td>
<td title="{{ I18n.t('js.label_filesize')}}">{{ I18n.t('js.label_filesize')}}</td>
<td title="{{ I18n.t('js.label_uploaded_by')}}">{{ I18n.t('js.label_uploaded_by')}}</td>
<td title="{{ I18n.t('js.label_description')}}">{{ I18n.t('js.label_description')}}</td>
<td title="{{ I18n.t('js.label_date')}}">{{ I18n.t('js.label_date')}}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="attachment in attachments"
attachment="attachment">
<td attachment-title-cell attachment="attachment"></td>
<td attachment-file-size attachment="attachment"></td>
<td attachment-user-cell attachment="attachment"></td>
<td>{{ attachment.props.description }}</td>
<td><date-time date-time-value="attachment.props.createdAt"></date></td>
<td><date-time date-time-value="attachment.props.createdAt"></date-time></td>
</tr>
</tbody>
</table>

@ -8,12 +8,12 @@
<div class="content" ng-show="expand">
<div class="workpackages">
<div ng-if="handler.relations">
<table>
<table class="detail-pane-table relations-table">
<thead>
<tr>
<td>{{ I18n.t('js.work_packages.properties.subject') }}</td>
<td>{{ I18n.t('js.work_packages.properties.status') }}</td>
<td>{{ I18n.t('js.work_packages.properties.assignee') }}</td>
<td title="{{ I18n.t('js.work_packages.properties.subject')}}">{{ I18n.t('js.work_packages.properties.subject') }}</td>
<td title="{{ I18n.t('js.work_packages.properties.status')}}">{{ I18n.t('js.work_packages.properties.status') }}</td>
<td title="{{ I18n.t('js.work_packages.properties.assignee')}}">{{ I18n.t('js.work_packages.properties.assignee') }}</td>
<td></td>
</tr>
</thead>

Loading…
Cancel
Save