Implement changes based on UI/UX feedback
This commit is contained in:
@@ -129,9 +129,11 @@ export default {
|
||||
|
||||
this.$root.$emit(`drill-down-recordList:${recordListUniqueID}`, prefilter)
|
||||
} else {
|
||||
const { title } = this.block
|
||||
|
||||
// Open in modal
|
||||
const block = new compose.PageBlockRecordList({
|
||||
title: `${dimensions} = '${name}'`,
|
||||
title: title ? `${title} - "${name}"` : name,
|
||||
blockID: `drillDown-${chartID}`,
|
||||
options: {
|
||||
moduleID,
|
||||
@@ -141,11 +143,13 @@ export default {
|
||||
hideRecordViewButton: false,
|
||||
hideConfigureFieldsButton: false,
|
||||
hideImportButton: true,
|
||||
enableRecordPageNavigation: true,
|
||||
selectable: true,
|
||||
allowExport: true,
|
||||
perPage: 14,
|
||||
showTotalCount: true,
|
||||
magnifyOption: 'modal',
|
||||
recordDisplayOption: 'modal',
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
@@ -381,12 +381,16 @@
|
||||
class="text-right"
|
||||
@click.stop
|
||||
>
|
||||
<b-button-group v-if="inlineEditing">
|
||||
<b-button-group
|
||||
v-if="inlineEditing"
|
||||
size="sm"
|
||||
class="ml-auto"
|
||||
>
|
||||
<b-button
|
||||
v-if="showCloneRecordButton"
|
||||
:title="$t('recordList.record.tooltip.clone')"
|
||||
variant="outline-light"
|
||||
class="text-primary d-print-none border-0"
|
||||
class="d-flex align-items-center text-primary d-print-none border-0"
|
||||
@click="handleCloneInline(item.r)"
|
||||
>
|
||||
<font-awesome-icon
|
||||
@@ -398,7 +402,7 @@
|
||||
v-if="item.r.deletedAt"
|
||||
:title="$t('recordList.record.tooltip.undelete')"
|
||||
variant="outline-light"
|
||||
class="border-0 text-dark d-print-none"
|
||||
class="d-flex align-items-center border-0 text-dark d-print-none"
|
||||
@click.prevent="handleRestoreInline(item, index)"
|
||||
>
|
||||
<font-awesome-icon
|
||||
@@ -410,7 +414,7 @@
|
||||
<b-button
|
||||
v-else-if="(item.r.canDeleteRecord || item.r.recordID === '0') && !item.r.deletedAt"
|
||||
variant="outline-light"
|
||||
class="border-0 show-when-hovered text-danger d-print-none"
|
||||
class="d-flex align-items-center border-0 show-when-hovered text-danger d-print-none"
|
||||
@click.prevent="handleDeleteInline(item, index)"
|
||||
>
|
||||
<font-awesome-icon
|
||||
@@ -419,12 +423,16 @@
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
|
||||
<b-button-group v-if="!inlineEditing">
|
||||
<b-button-group
|
||||
v-if="!inlineEditing"
|
||||
size="sm"
|
||||
class="ml-auto"
|
||||
>
|
||||
<b-button
|
||||
v-if="!options.hideRecordViewButton && item.r.canReadRecord && (options.rowViewUrl || recordPageID)"
|
||||
:title="$t('recordList.record.tooltip.view')"
|
||||
variant="outline-light"
|
||||
class="text-primary d-print-none border-0"
|
||||
class="d-flex align-items-center text-primary d-print-none border-0"
|
||||
:to="{ name: options.rowViewUrl || 'page.record', params: { pageID: recordPageID, recordID: item.r.recordID }, query: null }"
|
||||
>
|
||||
<font-awesome-icon
|
||||
@@ -437,7 +445,7 @@
|
||||
:title="$t('recordList.record.tooltip.edit')"
|
||||
:to="{ name: options.rowEditUrl || 'page.record.edit', params: { pageID: recordPageID, recordID: item.r.recordID }, query: null }"
|
||||
variant="outline-light"
|
||||
class="text-primary d-print-none border-0"
|
||||
class="d-flex align-items-center text-primary d-print-none border-0"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['far', 'edit']"
|
||||
@@ -449,7 +457,7 @@
|
||||
:title="$t('recordList.record.tooltip.clone')"
|
||||
variant="outline-light"
|
||||
:to="{ name: options.rowCreateUrl || 'page.record.create', params: { pageID: recordPageID, values: item.r.values }, query: null }"
|
||||
class="text-primary d-print-none border-0"
|
||||
class="d-flex align-items-center text-primary d-print-none border-0"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['far', 'clone']"
|
||||
@@ -460,7 +468,7 @@
|
||||
v-if="!options.hideRecordReminderButton"
|
||||
:title="$t('recordList.record.tooltip.reminder')"
|
||||
variant="outline-light"
|
||||
class="text-primary d-print-none border-0"
|
||||
class="d-flex align-items-center text-primary d-print-none border-0"
|
||||
@click.prevent="createReminder(item.r)"
|
||||
>
|
||||
<font-awesome-icon
|
||||
@@ -475,7 +483,7 @@
|
||||
:title="item.r.recordID"
|
||||
:tooltip="$t('permissions:resources.compose.record.tooltip')"
|
||||
button-variant="outline-light"
|
||||
class="text-dark d-print-none border-0"
|
||||
class="d-flex align-items-center text-dark d-print-none border-0"
|
||||
/>
|
||||
</b-button-group>
|
||||
</b-td>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
v-if="block.options.showRefresh"
|
||||
:title="$t('general.label.refresh')"
|
||||
variant="outline-light"
|
||||
class="text-secondary d-print-none border-0"
|
||||
class="d-flex align-items-center text-secondary d-print-none border-0"
|
||||
@click="$emit('refreshBlock')"
|
||||
>
|
||||
<font-awesome-icon :icon="['fa', 'sync']" />
|
||||
@@ -41,9 +41,9 @@
|
||||
|
||||
<b-button
|
||||
v-if="block.options.magnifyOption"
|
||||
:title="$t('general.label.magnify')"
|
||||
:title="isBlockOpened ? '' : $t('general.label.magnify')"
|
||||
variant="outline-light"
|
||||
class="text-secondary d-print-none border-0"
|
||||
class="d-flex align-items-center text-secondary d-print-none border-0"
|
||||
@click="$root.$emit('magnify-page-block', isBlockOpened ? undefined : { blockID: block.blockID })"
|
||||
>
|
||||
<font-awesome-icon :icon="['fas', isBlockOpened ? 'times' : 'search-plus']" />
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
v-if="block.options.showRefresh"
|
||||
:title="$t('general.label.refresh')"
|
||||
variant="outline-light"
|
||||
class="d-print-none border-0 text-primary"
|
||||
class="d-flex align-items-center text-primary d-print-none border-0"
|
||||
@click="$emit('refreshBlock')"
|
||||
>
|
||||
<font-awesome-icon :icon="['fa', 'sync']" />
|
||||
@@ -39,9 +39,9 @@
|
||||
|
||||
<b-button
|
||||
v-if="block.options.magnifyOption"
|
||||
:title="$t('general.label.magnify')"
|
||||
:title="isBlockOpened ? '' : $t('general.label.magnify')"
|
||||
variant="outline-light"
|
||||
class="d-print-none border-0 text-primary"
|
||||
class="d-flex align-items-center text-primary d-print-none border-0"
|
||||
@click="$root.$emit('magnify-page-block', isBlockOpened ? undefined : { blockID: block.blockID })"
|
||||
>
|
||||
<font-awesome-icon :icon="['fas', isBlockOpened ? 'times' : 'search-plus']" />
|
||||
|
||||
@@ -68,7 +68,7 @@ export default {
|
||||
},
|
||||
|
||||
contentClass () {
|
||||
return `${this.block && this.block.options.magnifyOption === 'fullscreen' ? 'mh-100' : ''} position-initial`
|
||||
return `${this.block && this.block.options.magnifyOption === 'fullscreen' ? 'mh-100 rounded-0' : 'card'} position-initial`
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@@ -270,6 +270,14 @@ input[type="search"]::-webkit-search-cancel-button {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
&.card {
|
||||
background-color: #FFF;
|
||||
background-clip: border-box;
|
||||
border: 0 solid rgba(0, 0, 0, 0.125);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
// Supporting CSS to improve print-to-PDF option
|
||||
@media print {
|
||||
@page {
|
||||
|
||||
@@ -73,7 +73,7 @@ const defaults: Readonly<Options> = Object.freeze({
|
||||
hideRecordEditButton: false,
|
||||
hideRecordViewButton: true,
|
||||
hideRecordPermissionsButton: true,
|
||||
enableRecordPageNavigation: true,
|
||||
enableRecordPageNavigation: false,
|
||||
allowExport: false,
|
||||
perPage: 20,
|
||||
recordDisplayOption: 'sameTab',
|
||||
|
||||
Reference in New Issue
Block a user