Tobias Johansson
465f1eb87e
The filter and column settings in tables are stored per project and context in the browsers localStorage. This makes the table keep the settings even if the browser is refreshed or restarted. The table emits a "componentStateChanged" event containing the tables current state (filter/column settings) which then is saved by the top level component.
164 lines
3.6 KiB
Sass
164 lines
3.6 KiB
Sass
$thumbnail-max-width: 110px
|
|
$thumbnail-max-height: calc(110px * (9/16))
|
|
|
|
.pillar-table-container
|
|
background-color: white
|
|
height: 100%
|
|
|
|
.pillar-table
|
|
display: flex
|
|
flex-direction: column
|
|
width: 100%
|
|
height: 95% // TODO: Investigate why some rows are outside screen if 100%
|
|
|
|
.pillar-table-head
|
|
display: flex
|
|
flex-direction: row
|
|
position: relative
|
|
box-shadow: 0 5 $color-background-dark
|
|
|
|
.cell-content
|
|
display: flex
|
|
flex-direction: row
|
|
align-items: center
|
|
height: 100%
|
|
font-size: .9em
|
|
|
|
.column-sort
|
|
display: flex
|
|
opacity: 0
|
|
flex-direction: column
|
|
|
|
.sort-action
|
|
&:hover
|
|
background-color: $color-background-active
|
|
&:hover
|
|
.column-sort
|
|
opacity: 1
|
|
|
|
.pillar-table-row-group
|
|
display: block
|
|
overflow-y: auto
|
|
height: 100%
|
|
|
|
.pillar-cell
|
|
padding-left: 0.3em
|
|
|
|
.pillar-table-row:nth-child(odd)
|
|
background-color: $color-background-dark
|
|
|
|
.pillar-table-row
|
|
display: flex
|
|
flex-direction: row
|
|
transition: all 250ms ease-in-out
|
|
background-color: $color-background-light
|
|
cursor: pointer
|
|
|
|
&:hover
|
|
background-color: $color-background-active
|
|
|
|
&.is-busy
|
|
+stripes-animate
|
|
+stripes(transparent, rgba($color-background-active, .6), -45deg, 4em)
|
|
animation-duration: 4s
|
|
|
|
&.is-corrupt
|
|
background-color: $color-warning
|
|
|
|
&.active
|
|
border-left: 0.5em solid $color-background-active
|
|
|
|
.pillar-cell
|
|
display: flex
|
|
flex-direction: column
|
|
flex-grow: 1
|
|
flex-basis: 0
|
|
overflow: hidden
|
|
white-space: nowrap
|
|
text-overflow: ellipsis
|
|
justify-content: center
|
|
min-width: 2em
|
|
|
|
&.highlight
|
|
background-color: rgba($color-background-active, .4)
|
|
|
|
&.warning
|
|
background-color: rgba($color-warning, .4)
|
|
|
|
&.header-cell
|
|
text-transform: capitalize
|
|
color: $color-text-dark-secondary
|
|
|
|
.header-label
|
|
overflow: hidden
|
|
|
|
&.thumbnail
|
|
flex: 0
|
|
flex-basis: $thumbnail-max-width
|
|
text-align: center
|
|
|
|
img
|
|
max-width: $thumbnail-max-width
|
|
height: auto
|
|
|
|
a
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
|
|
@include status-color-property(background-color, '', '')
|
|
|
|
|
|
.pillar-table-menu
|
|
display: flex
|
|
flex-direction: row
|
|
|
|
.action
|
|
cursor: pointer
|
|
|
|
.settings-menu
|
|
display: flex
|
|
flex-direction: column
|
|
position: absolute
|
|
background-color: white
|
|
list-style: none
|
|
margin: 0
|
|
padding: 0
|
|
text-transform: capitalize
|
|
z-index: $z-index-base + 1
|
|
box-shadow: 0 2px 5px rgba(black, .4)
|
|
user-select: none
|
|
|
|
.pillar-table-row-filter
|
|
display: flex
|
|
flex-direction: row
|
|
|
|
input.filter-active
|
|
background-color: rgba($color-info, .50)
|
|
|
|
.pi-filter.filter-active
|
|
color: $color-info
|
|
|
|
.pillar-table-actions
|
|
margin-left: auto
|
|
|
|
.action
|
|
cursor: pointer
|
|
vertical-align: middle
|
|
color: $color-primary
|
|
border: none
|
|
background: none
|
|
|
|
&:hover
|
|
text-decoration-line: underline
|
|
|
|
.pillar-table-column-filter
|
|
margin-left: auto
|
|
.settings-menu
|
|
right: 0em
|
|
|
|
.pillar-table-row-item
|
|
display: inline-block
|
|
|
|
.pillar-table-row-enter, .pillar-table-row-leave-to
|
|
opacity: 0
|