add possibility to align table-column-text, fix row actions styling
This commit is contained in:
parent
8045a3d3cf
commit
c66ff6f938
@ -1,45 +1,50 @@
|
||||
<template>
|
||||
<div class="cms_table">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="table_header">
|
||||
<!-- <div class="table_row"> -->
|
||||
<div v-for="(col, i) in columns"
|
||||
:class="['table_cell', {['sortable']: col.orderBy}]"
|
||||
:key="i">
|
||||
<div @click="orderBy(col.orderBy)" v-if="col.orderBy">
|
||||
{{ col.heading }}
|
||||
<i class="icon icon-angle-up" aria-hidden="true" v-if="currentOrderBy !== col.orderBy"></i>
|
||||
<i class="icon icon-angle-circled-down" aria-hidden="true" v-else-if="currentOrderDesc"></i>
|
||||
<i class="icon icon-angle-circled-up" aria-hidden="true" v-else></i>
|
||||
</div>
|
||||
<div v-else>{{ col.heading }}</div>
|
||||
</div>
|
||||
<div class="table_cell cell_settings" v-if="actions.length"></div>
|
||||
<!-- </div> -->
|
||||
<div v-for="(col, i) in columns"
|
||||
:class="['table_cell', {['sortable']: col.orderBy, [`align-${col.align}`]: col.align}]"
|
||||
:key="i">
|
||||
|
||||
<!-- Column with sorting -->
|
||||
<div @click="orderBy(col.orderBy)" v-if="col.orderBy">
|
||||
{{ col.heading }}
|
||||
|
||||
<i class="icon icon-angle-up" aria-hidden="true" v-if="currentOrderBy !== col.orderBy"></i>
|
||||
<i class="icon icon-angle-circled-down" aria-hidden="true" v-else-if="currentOrderDesc"></i>
|
||||
<i class="icon icon-angle-circled-up" aria-hidden="true" v-else></i>
|
||||
</div>
|
||||
|
||||
<!-- Column without sorting -->
|
||||
<div v-else>{{ col.heading }}</div>
|
||||
</div>
|
||||
<div class="table_cell cell_settings" v-if="actions.length"></div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="table_content" is="transition-group" name="list">
|
||||
<div class="table_row" v-for="(row, ri) in rows" :key="ri">
|
||||
<div class="table_cell" v-for="(col, ci) in columns" :key="ci + 'c'">
|
||||
<span v-if="col.prop">{{ getProp(row, col.prop) }}</span>
|
||||
|
||||
<!-- Row content -->
|
||||
<div v-for="(col, ci) in columns"
|
||||
:class="['table_cell', {[`align-${col.align}`]: col.align}]"
|
||||
:key="ci + 'c'">
|
||||
|
||||
<span v-if="col.prop" :title="getProp(row, col.prop)">{{ getProp(row, col.prop) }}</span>
|
||||
<span v-else-if="col.render">{{ col.render(row) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Row actions -->
|
||||
<div class="table_cell cell_settings" v-if="actions.length" ref="row_actions">
|
||||
<div title="Open actions" class="actions_btn" @click="openActions">
|
||||
<i class="icon icon-cog" aria-hidden="true"></i>
|
||||
</div>
|
||||
|
||||
<ul class="actions_container">
|
||||
<li v-for="(a, i) in actions">
|
||||
<div :title="a.title" @click="a.action(row)">
|
||||
<i :class="['icon', a.icon]"></i>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div title="Close actions" @click="closeActions">
|
||||
<i class="icon icon-cog"></i>
|
||||
</div>
|
||||
<li v-for="(a, i) in actions" :title="a.title" @click="a.action(row)">
|
||||
<i :class="['icon', a.icon]"></i>
|
||||
</li>
|
||||
</ul>
|
||||
<div title="Open actions" class="actions_btn" @click="toggleActions">
|
||||
<i class="icon icon-cog" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -97,17 +102,13 @@
|
||||
});
|
||||
return val;
|
||||
},
|
||||
openActions(event) {
|
||||
toggleActions(event) {
|
||||
const parent = event.currentTarget.parentNode;
|
||||
this.$refs.row_actions.forEach((item) => {
|
||||
if (item !== parent)
|
||||
item.classList.remove("open")
|
||||
});
|
||||
parent.classList.add("open");
|
||||
},
|
||||
closeActions(event) {
|
||||
const parent = event.currentTarget.parentNode.parentNode.parentNode;
|
||||
parent.classList.remove("open");
|
||||
parent.classList.toggle("open");
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -115,6 +116,7 @@
|
||||
|
||||
<style lang="less">
|
||||
@import "../mixins";
|
||||
|
||||
.list-item {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
@ -166,19 +168,19 @@
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&.sortable{
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&.sortable:hover{cursor: pointer;}
|
||||
|
||||
&.align-center{text-align: center;}
|
||||
&.align-left{text-align: left;}
|
||||
&.align-right{text-align: right;}
|
||||
}
|
||||
|
||||
/*.cell_checkbox {width:40px;}
|
||||
.cell_image {width:120px; line-height:0;} .cell_image img {width:100%;}
|
||||
.cell_title {position:relative;}
|
||||
.cell_title a {color:#000;} .cell_title a:hover {color:#28b78d;}*/
|
||||
|
||||
/* === Other cell types === */
|
||||
/*.cell_checkbox {width:40px;}
|
||||
.cell_image {width:120px; line-height:0;} .cell_image img {width:100%;}
|
||||
.cell_title {position:relative;}
|
||||
.cell_title a {color:#000;} .cell_title a:hover {color:#28b78d;}*/
|
||||
|
||||
/*.cell_date {}
|
||||
.cell_author {}
|
||||
.cell_category {}
|
||||
@ -205,11 +207,16 @@
|
||||
.cell_settings {
|
||||
.clearfix();
|
||||
position: relative;
|
||||
width: 40px;
|
||||
width: 22.4px + 2*15px;
|
||||
text-align: right;
|
||||
overflow: visible;
|
||||
|
||||
.icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.actions_btn{
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
@ -217,53 +224,45 @@
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.actions_container {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: -5px;
|
||||
right: 0;
|
||||
padding: 5px 10px;
|
||||
top: 50%;
|
||||
margin-top: -16px;
|
||||
right: 7px;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
color: white;
|
||||
background: @cms_brand_primary;
|
||||
border-radius: 20px;
|
||||
background: @cms_bg_lighter;
|
||||
transition: all 0.3s;
|
||||
white-space: nowrap;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding-right: 5px;
|
||||
|
||||
&:last-child{
|
||||
border-left: 1px solid @text_color;
|
||||
padding-left: 5px;
|
||||
border-right: 1px solid white;
|
||||
padding-right: 10px;
|
||||
margin-right: 26px;
|
||||
.icon:before{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li+li{
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
.icon:hover{
|
||||
cursor: pointer;
|
||||
color: @text_color;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
color: @cms_brand_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
.actions_container{
|
||||
.actions_btn {color: white; &:hover{color: black;}}
|
||||
.actions_container {
|
||||
z-index: 10;
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,9 +5,10 @@
|
||||
|
||||
@text_color: black;
|
||||
|
||||
@gray_dark: #152129;
|
||||
|
||||
@cms_bg_lighter: #e0e0e0;
|
||||
@cms_bg_light: #1a2e3b;
|
||||
@cms_dark_border: #152129;
|
||||
|
||||
@cms_brand_primary: #28b78d;
|
||||
@cms_brand_secondary: #152129;
|
||||
|
||||
@ -151,7 +151,7 @@ export default {
|
||||
border-color: transparent;
|
||||
|
||||
&:focus {
|
||||
border: solid 1px @cms_dark_border;
|
||||
border: solid 1px @gray_dark;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,12 +38,12 @@ export default {
|
||||
heading: 'ID',
|
||||
prop: 'ID',
|
||||
orderBy: 'id',
|
||||
align: 'left'
|
||||
align: 'right'
|
||||
}, {
|
||||
heading: 'Benutzername',
|
||||
prop: 'Username',
|
||||
orderBy: 'username',
|
||||
align: 'center'
|
||||
align: 'left'
|
||||
}, {
|
||||
heading: 'Firma',
|
||||
prop: 'Company',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user