diff --git a/client/web/compose/src/views/Admin/Pages/Edit.vue b/client/web/compose/src/views/Admin/Pages/Edit.vue
index 4c717841c..ab8910b64 100644
--- a/client/web/compose/src/views/Admin/Pages/Edit.vue
+++ b/client/web/compose/src/views/Admin/Pages/Edit.vue
@@ -231,148 +231,154 @@
cols="12"
>
-
-
+
-
-
- |
-
-
- {{ $t('page-layout.title') }}
- |
-
-
- {{ $t('page-layout.handle') }}
- |
-
- |
-
-
-
-
-
+
+ |
+
+
+ {{ $t('page-layout.title') }}
+ |
+
+
+ {{ $t('page-layout.handle') }}
+ |
+
+ |
+
+
+
+
-
-
-
-
-
-
-
+
+
-
-
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+ |
+
+
+
-
-
-
-
-
-
-
-
-
-
-
- |
-
-
-
-
- |
-
-
- {{ $t('page-layout.add') }}
-
- |
-
-
-
+
+
+ {{ $t('general:label.add') }}
+
+
+
@@ -589,146 +595,179 @@
-
-
+
-
-
- |
-
-
- {{ $t('page-layout.recordToolbar.actions.buttonLabel') }}
- |
-
-
- {{ $t('page-layout.recordToolbar.actions.layout.label') }}
- |
-
-
- {{ $t('page-layout.recordToolbar.actions.variant') }}
- |
-
-
- {{ $t('page-layout.recordToolbar.actions.placement.label') }}
- |
-
-
- {{ $t('page-layout.recordToolbar.actions.visible') }}
- |
-
- |
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-
-
-
+
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
+
-
-
-
+
+
+
+
-
-
-
-
-
+
+
+
+
-
- |
-
-
- {{ $t('page-layout.recordToolbar.actions.add') }}
-
- |
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('general:label.add') }}
+
+
+
@@ -1079,19 +1118,25 @@ export default {
},
},
+ actionKindOptions () {
+ return [
+ { value: 'toLayout', text: this.$t('page-layout.recordToolbar.actions.kind.toLayout') },
+ { value: 'toURL', text: this.$t('page-layout.recordToolbar.actions.kind.toURL') },
+ ]
+ },
+
actionLayoutOptions () {
return [
- { pageLayoutID: '', label: this.$t('page-layout.recordToolbar.actions.layout.placeholder') },
+ { pageLayoutID: '', label: this.$t('page-layout.recordToolbar.actions.toLayout.placeholder') },
...this.layouts.filter(({ pageLayoutID }) => pageLayoutID !== NoID)
.map(({ pageLayoutID, handle, meta }) => ({ pageLayoutID, label: meta.title || handle || pageLayoutID })),
]
},
- actionPlacementOptions () {
+ actionOpenInOptions () {
return [
- { value: 'start', text: this.$t('page-layout.recordToolbar.actions.placement.start') },
- { value: 'center', text: this.$t('page-layout.recordToolbar.actions.placement.center') },
- { value: 'end', text: this.$t('page-layout.recordToolbar.actions.placement.end') },
+ { value: 'sameTab', text: this.$t('page-layout.recordToolbar.actions.openIn.sameTab') },
+ { value: 'newTab', text: this.$t('page-layout.recordToolbar.actions.openIn.newTab') },
]
},
@@ -1107,6 +1152,14 @@ export default {
{ value: 'dark', text: this.$t('general:variants.dark') },
]
},
+
+ actionPlacementOptions () {
+ return [
+ { value: 'start', text: this.$t('page-layout.recordToolbar.actions.placement.start') },
+ { value: 'center', text: this.$t('page-layout.recordToolbar.actions.placement.center') },
+ { value: 'end', text: this.$t('page-layout.recordToolbar.actions.placement.end') },
+ ]
+ },
},
watch: {
@@ -1329,6 +1382,12 @@ export default {
this.layoutEditor.layout.config.actions.splice(index, 1)
},
+ onActionKindChange (action) {
+ if (action.kind === 'toURL' && !action.params.openIn) {
+ this.$set(action.params, 'openIn', 'sameTab')
+ }
+ },
+
async saveIcon () {
return this.$ComposeAPI.pageUpdateIcon({
namespaceID: this.namespace.namespaceID,
@@ -1447,4 +1506,18 @@ export default {
.selected-icon {
outline: 2px solid $success;
}
+
+.list-background {
+ background-color: $body-bg;
+}
+
+.layout-actions {
+ tr:not(:first-child) td {
+ padding-top: 0.75rem;
+ }
+
+ tr td {
+ padding-bottom: 0.75rem;
+ }
+}
diff --git a/client/web/compose/src/views/Public/Pages/Records/View.vue b/client/web/compose/src/views/Public/Pages/Records/View.vue
index d0e9ef27e..2cd53e906 100644
--- a/client/web/compose/src/views/Public/Pages/Records/View.vue
+++ b/client/web/compose/src/views/Public/Pages/Records/View.vue
@@ -74,7 +74,7 @@
:variant="action.meta.style.variant"
size="lg"
class="ml-2"
- @click.prevent="determineLayout(action.params.pageLayoutID)"
+ @click.prevent="handleAction(action)"
>
{{ action.meta.label }}
@@ -86,7 +86,7 @@
:key="index"
:variant="action.meta.style.variant"
size="lg"
- @click.prevent="determineLayout(action.params.pageLayoutID)"
+ @click.prevent="handleAction(action)"
>
{{ action.meta.label }}
@@ -99,7 +99,7 @@
:variant="action.meta.style.variant"
size="lg"
class="ml-2"
- @click.prevent="determineLayout(action.params.pageLayoutID)"
+ @click.prevent="handleAction(action)"
>
{{ action.meta.label }}
@@ -612,6 +612,14 @@ export default {
})
},
+ handleAction ({ kind, params = {} }) {
+ if (kind === 'toLayout') {
+ this.determineLayout(params.pageLayoutID)
+ } else if (kind === 'toURL') {
+ window.open(params.url, params.openIn === 'newTab' ? '_blank' : '_self')
+ }
+ },
+
setDefaultValues () {
this.inEditing = false
this.inCreating = false
diff --git a/locale/en/corteza-webapp-compose/page.yaml b/locale/en/corteza-webapp-compose/page.yaml
index cf102fdfd..d9bca280a 100644
--- a/locale/en/corteza-webapp-compose/page.yaml
+++ b/locale/en/corteza-webapp-compose/page.yaml
@@ -1,4 +1,5 @@
page-layout:
+ layouts: Layouts
title: Title *
handle: Handle
add: Add layout
@@ -35,14 +36,25 @@ page-layout:
buttonLabel: Label
variant: Variant
visible: Visible
+ kind:
+ label: Type
+ toLayout: Redirect to layout
+ toURL: Redirect to URL
placement:
label: Placement
start: Start
center: Center
end: End
- layout:
+ openIn:
+ label: Open in
+ sameTab: Same tab
+ newTab: New tab
+ toLayout:
label: Redirect to layout
placeholder: No layout selected
+ toURL:
+ label: Redirect to URL
+ placeholder: No URL specified
block:
general: