Add workflow menu button to thread lists
Bug: twpowertools:74
Change-Id: I703950394d674c2084278bf9e876014d08fa5cfb
diff --git a/src/contentScripts/communityConsole/workflows/components/Overlay.vue b/src/contentScripts/communityConsole/workflows/components/Overlay.vue
new file mode 100644
index 0000000..304b362
--- /dev/null
+++ b/src/contentScripts/communityConsole/workflows/components/Overlay.vue
@@ -0,0 +1,29 @@
+<script>
+import WfMenu from './WfMenu.vue';
+
+export default {
+ components: {
+ WfMenu,
+ },
+ data() {
+ return {
+ shown: false,
+ position: [0, 0],
+ // TODO: Get real data.
+ workflows: [
+ {name: 'Move to accounts'},
+ {name: 'Mark as spam w/ message'},
+ ],
+ };
+ },
+ methods: {
+ startWorkflow(e) {
+ console.log(e);
+ }
+ },
+}
+</script>
+
+<template>
+ <wf-menu v-model="shown" :position="position" :workflows="workflows" @select="startWorkflow" />
+</template>
diff --git a/src/contentScripts/communityConsole/workflows/components/WfMenu.vue b/src/contentScripts/communityConsole/workflows/components/WfMenu.vue
new file mode 100644
index 0000000..88528ea
--- /dev/null
+++ b/src/contentScripts/communityConsole/workflows/components/WfMenu.vue
@@ -0,0 +1,39 @@
+<script>
+import {Corner} from '@material/menu-surface/constants.js';
+
+export default {
+ components: {},
+ props: {
+ modelValue: Boolean,
+ position: Array,
+ workflows: Array,
+ },
+ data() {
+ return {
+ corner: Corner.TOP_RIGHT,
+ };
+ },
+ emits: [
+ 'update:modelValue',
+ 'select',
+ ],
+}
+</script>
+
+<template>
+ <mcw-menu :model-value="modelValue" fixed :anchor-corner="corner"
+ :style="{ left: 'unset', right: 'calc(100% - ' + position[0] + 'px)', top: position[1] + 'px' }"
+ @update:model-value="$emit('update:modelValue', $event)" @select="$emit('select', $event)">
+ <mcw-list-item v-for="wf in workflows">{{ wf.name }}</mcw-list-item>
+ </mcw-menu>
+</template>
+
+<style scoped>
+.mdc-list-item {
+ /* These styles mimic the Community Console style. */
+ font-family: 'Google Sans Text', 'Noto', sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ height: 40px!important;
+}
+</style>