DeforaNetworks/corteza
3
0
Fork 0
Code Activity

Add action placement, variant and visible UI/UX

Browse Source
This commit is contained in:
Jože Fortun
2023-04-03 19:02:10 +02:00
parent fce2ae90e3
commit 09ed669ada
7 changed files with 130 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/compose/src/components/Admin/Page/Tree.vue
+4 -18
View File
@@ -57,7 +57,6 @@
</router-link>
<span class="view d-inline-block">
<router-link
v-if="!hideViewPageButton(item)"
data-test-id="button-page-view"
:to="pageViewer(item)"
class="btn"
@@ -69,17 +68,7 @@
class="d-none d-md-inline-block edit text-left"
>
<router-link
v-if="item.moduleID !== '0'"
v-b-tooltip.hover.top
data-test-id="button-module-edit"
:title="moduleName(item)"
class="btn text-primary"
:to="{ name: 'admin.modules.edit', params: { moduleID: item.moduleID }}"
>
{{ $t('moduleEdit') }}
</router-link>
<router-link
v-if="item.canUpdatePage && item.moduleID === '0'"
v-if="item.canUpdatePage"
:to="{name: 'admin.pages.edit', params: { pageID: item.pageID }}"
data-test-id="button-page-edit"
class="btn text-primary"
@@ -178,12 +167,9 @@ export default {
return (this.getModuleByID(moduleID) || {}).name
},
pageViewer ({ pageID = NoID }) {
return { name: 'page', params: { pageID } }
},
hideViewPageButton ({ blocks = {}, moduleID = NoID }) {
return blocks && blocks.length >= 1 && moduleID !== NoID
pageViewer ({ pageID = NoID, moduleID = NoID }) {
const name = moduleID !== NoID ? 'page.record.create' : 'page'
return { name, params: { pageID } }
},
handleChangePosition ({ beforeParent, data, afterParent }) {
client/web/compose/src/components/Common/RecordToolbar.vue
+6 -2
View File
@@ -26,6 +26,8 @@
/>
{{ showRecordModal ? $t('label.close') : labels.back || $t('label.back') }}
</b-button>
<slot name="start-actions" />
</b-col>
<b-col
@@ -55,6 +57,8 @@
<font-awesome-icon :icon="['fas', 'angle-right']" />
</b-button>
</b-button-group>
<slot name="center-actions" />
</b-col>
<b-col
@@ -116,6 +120,8 @@
{{ labels.clone || $t('label.saveAsCopy') }}
</b-button>
<slot name="end-actions" />
<b-button
v-if="!inEditing && isCreated && !(hideEdit || settings.hideEdit)"
data-test-id="button-edit"
@@ -162,8 +168,6 @@
{{ labels.submit || $t('label.save') }}
</span>
</b-button>
<slot name="actions" />
</template>
</b-col>
</b-row>
client/web/compose/src/views/Admin/Pages/Builder.vue
+2 -6
View File
@@ -31,7 +31,6 @@
<b-button
variant="primary"
class="d-flex align-items-center"
:disabled="!pageViewer"
:to="pageViewer"
>
{{ $t('navigation.viewPage') }}
@@ -385,11 +384,8 @@ export default {
},
pageViewer () {
if (this.module) {
return undefined
}
return { name: 'page', params: { pageID: this.pageID } }
const name = this.module ? 'page.record.create' : 'page'
return { name, params: { pageID: this.pageID } }
},
pageEditor () {
client/web/compose/src/views/Admin/Pages/Edit.vue
+74 -24
View File
@@ -34,7 +34,6 @@
<b-button
variant="primary"
:title="$t('tooltip.view')"
:disabled="!pageViewer"
:to="pageViewer"
class="d-flex align-items-center"
style="margin-left:2px;"
@@ -299,7 +298,7 @@
:ok-title="$t('general:label.saveAndClose')"
ok-variant="primary"
cancel-variant="link"
size="lg"
size="xl"
@ok="updateLayout()"
@cancel="layoutEditor.layout = undefined"
@hide="layoutEditor.layout = undefined"
@@ -396,13 +395,13 @@
label-class="text-primary"
>
<b-table-simple
responsive="lg"
responsive
borderless
small
>
<b-thead>
<tr>
<th />
<th style="width: 1%;" />
<th
class="text-primary"
@@ -413,16 +412,30 @@
<th
class="text-primary"
style="width: 33%; min-width: 240px;"
style="width: 25%; min-width: 240px;"
>
Type
Redirect to layout
</th>
<th
style="min-width: 100px;"
class="text-primary"
style="width: 33%; min-width: 240px;"
>
Options
Variant
</th>
<th
style="min-width: 100px;"
class="text-primary"
>
Placement
</th>
<th
style="min-width: 80px;"
class="text-primary text-center"
>
Visible
</th>
<th style="min-width: 80px;" />
@@ -454,15 +467,6 @@
/>
</b-td>
<b-td
class="align-middle"
>
<b-form-select
v-model="action.kind"
:options="actionKindOptions"
/>
</b-td>
<b-td
class="align-middle"
>
@@ -474,14 +478,41 @@
/>
</b-td>
<td
class="text-center align-middle"
<b-td
class="align-middle"
>
<b-form-select
v-model="action.meta.style.variant"
:options="actionVariantOptions"
/>
</b-td>
<b-td
class="align-middle"
>
<b-form-select
v-model="action.placement"
:options="actionPlacementOptions"
/>
</b-td>
<b-td
class="align-middle text-center"
>
<b-form-checkbox
v-model="action.enabled"
class="ml-2"
/>
</b-td>
<b-td
class="align-middle text-center"
>
<c-input-confirm
class="ml-2"
@confirmed="removeLayoutAction(index)"
/>
</td>
</b-td>
</tr>
</draggable>
</b-table-simple>
@@ -712,11 +743,9 @@ export default {
},
pageViewer () {
if (this.isRecordPage) {
return undefined
}
const { pageID } = this.page
return { name: 'page', params: { pageID } }
const name = this.isRecordPage ? 'page.record.create' : 'page'
return { name, params: { pageID } }
},
isRecordPage () {
@@ -794,6 +823,27 @@ export default {
.map(({ pageLayoutID, handle, meta }) => ({ pageLayoutID, label: meta.title || handle || pageLayoutID })),
]
},
actionPlacementOptions () {
return [
{ value: 'start', text: 'Start' },
{ value: 'center', text: 'Center' },
{ value: 'end', text: 'End' },
]
},
actionVariantOptions () {
return [
{ text: this.$t('general:variants.primary'), value: 'primary' },
{ text: this.$t('general:variants.secondary'), value: 'secondary' },
{ text: this.$t('general:variants.success'), value: 'success' },
{ text: this.$t('general:variants.warning'), value: 'warning' },
{ text: this.$t('general:variants.danger'), value: 'danger' },
{ text: this.$t('general:variants.info'), value: 'info' },
{ text: this.$t('general:variants.light'), value: 'light' },
{ text: this.$t('general:variants.dark'), value: 'dark' },
]
},
},
watch: {
client/web/compose/src/views/Public/Pages/Records/View.vue
+30 -5
View File
@@ -55,16 +55,41 @@
@submit="handleFormSubmit('page.record')"
@update-navigation="handleRedirectToPrevOrNext"
>
<template #actions>
<template #start-actions>
<b-button
v-for="(action, index) in layoutActions"
v-for="(action, index) in layoutActions.filter(a => a.placement === 'start')"
:key="index"
variant="primary"
:variant="action.meta.style.variant"
size="lg"
class="ml-2"
@click.prevent="determineLayout(action.params.pageLayoutID)"
>
{{ action.Meta.label }}
{{ action.meta.label }}
</b-button>
</template>
<template #center-actions>
<b-button
v-for="(action, index) in layoutActions.filter(a => a.placement === 'center')"
:key="index"
:variant="action.meta.style.variant"
size="lg"
@click.prevent="determineLayout(action.params.pageLayoutID)"
>
{{ action.meta.label }}
</b-button>
</template>
<template #end-actions>
<b-button
v-for="(action, index) in layoutActions.filter(a => a.placement === 'end')"
:key="index"
:variant="action.meta.style.variant"
size="lg"
class="ml-2"
@click.prevent="determineLayout(action.params.pageLayoutID)"
>
{{ action.meta.label }}
</b-button>
</template>
</record-toolbar>
@@ -178,7 +203,7 @@ export default {
const { config = {} } = this.layout || {}
const { actions = [] } = config
return actions
return actions.filter(({ enabled }) => enabled)
},
title () {
lib/js/src/compose/types/page-layout.ts
+5 -1
View File
@@ -110,12 +110,16 @@ export class PageLayout {
addAction () {
this.config.actions.push({
kind: 'toLayout',
placement: '',
placement: 'end',
enabled: true,
params: {
pageLayoutID: '',
},
meta: {
label: '',
style: {
variant: 'primary'
}
},
} as Action)
}
locale/en/corteza-webapp-compose/general.yaml
+9
View File
@@ -151,3 +151,12 @@ resourceList:
recordNavigation:
next: Next record
prev: Previous record
variants:
primary: Primary
secondary: Secondary
light: Light
dark: Dark
info: Info
success: Success
danger: Danger
warning: Warning