Removes 'see' eye icon from tables and makes columns innner text clickable. Column row is still not clickable, a conversation is being made with Buefy team.

This commit is contained in:
mateuswetah 2018-03-02 10:57:08 -03:00
parent 3bb3ac7c6e
commit 048227261e
2 changed files with 13 additions and 7 deletions

View File

@ -31,27 +31,32 @@
:per-page="collectionsPerPage"
@page-change="onPageChange">
<template slot-scope="props">
<b-table-column tabindex="0" label="Imagem" :aria-label="$i18n.get('label_image')" field="featured_image" width="55">
<router-link class="clickable-row" tag="span" :to="{path: $routerHelper.getCollectionPath(props.row.id)}">
<template v-if="props.row.featured_image" slot-scope="scope">
<img class="table-thumb" :src="`${props.row.featured_image}`"/>
</template>
</router-link>
</b-table-column>
<b-table-column tabindex="0" label="Nome" :aria-label="$i18n.get('label_name') + ': ' + props.row.name" field="props.row.name">
<router-link class="clickable-row" tag="span" :to="{path: $routerHelper.getCollectionPath(props.row.id)}">
{{ props.row.name }}
</router-link>
</b-table-column>
<b-table-column tabindex="0" :aria-label="$i18n.get('label_description') + ': ' + props.row.description" property="description" label="Descrição" show-overflow-tooltip field="props.row.description">
<router-link class="clickable-row" tag="span" :to="{path: $routerHelper.getCollectionPath(props.row.id)}">
{{ props.row.description }}
</router-link>
</b-table-column>
<b-table-column tabindex="0" label="Ações" width="110" :aria-label="$i18n.get('label_ações')">
<a id="button-view" :aria-label="$i18n.get('label_button_view')" @click.prevent.stop="goToCollectionPage(props.row.id)"><b-icon icon="eye"></a>
<!-- <a id="button-view" :aria-label="$i18n.get('label_button_view')" @click.prevent.stop="goToCollectionPage(props.row.id)"><b-icon icon="eye"></a> -->
<a id="button-edit" :aria-label="$i18n.get('label_button_edit')" @click.prevent.stop="goToCollectionEditPage(props.row.id)"><b-icon icon="pencil"></a>
<a id="button-delete" :aria-label="$i18n.get('label_button_delete')" @click.prevent.stop="deleteOneCollection(props.row.id)"><b-icon icon="delete"></a>
</b-table-column>
</template>
<!-- Empty state image -->
@ -206,7 +211,7 @@ export default {
vertical-align: middle !important;
}
tr { cursor: pointer !important; }
.clickable-row{ cursor: pointer !important; }
</style>

View File

@ -47,12 +47,12 @@
@page-change="onPageChange"
backend-sorting>
<template slot-scope="props">
<b-table-column v-for="(column, index) in tableFields"
:key="index"
:label="column.label"
:visible="column.visible"
:width="column.field == 'row_actions' ? 110 : column.field == 'featured_image' ? 55 : undefined ">
<router-link tag="span" class="clickable-row" :to="{path: $routerHelper.getItemPath(collectionId, props.row.id)}">
<template v-if="column.field != 'featured_image' && column.field != 'row_actions'">{{
props.row.metadata[column.slug].multiple == 'yes' ? props.row.metadata[column.slug].value.join(', ') : props.row.metadata[column.slug].value
}}</template>
@ -60,10 +60,11 @@
<img class="table-thumb" :src="`${ props.row[column.slug] }`"/>
</template>
<template v-if="column.field == 'row_actions'">
<a id="button-view" @click.prevent.stop="goToItemPage(props.row.id)"><b-icon icon="eye"></a>
<!-- <a id="button-view" @click.prevent.stop="goToItemPage(props.row.id)"><b-icon icon="eye"></a> -->
<a id="button-edit" @click.prevent.stop="goToItemEditPage(props.row.id)"><b-icon icon="pencil"></a>
<a id="button-delete" @click.prevent.stop="deleteOneItem(props.row.id)"><b-icon icon="delete"></a>
</template>
</router-link>
</b-table-column>
</template>
@ -239,7 +240,7 @@ export default {
vertical-align: middle !important;
}
tr { cursor: pointer }
.clickable-row{ cursor: pointer !important }
</style>