scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-02 12:08:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Create section header component (#2296)

Browse Source
This commit is contained in:
Sivin Varghese
2021-05-31 10:07:07 +05:30
committed by GitHub
parent 25ba852b68
commit cc75a668cb
3 changed files with 103 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/javascript/dashboard/i18n/locale/en/contact.json
View File

@@ -168,6 +168,16 @@
"BUTTON": "View all notes" "BUTTON": "View all notes"
} }
}, },
"EVENTS": {
"HEADER": {
"TITLE": "Activities"
},
"BUTTON": {
"PILL_BUTTON_NOTES": "notes",
"PILL_BUTTON_EVENTS": "events",
"PILL_BUTTON_CONVO": "conversations"
}
},
"CUSTOM_ATTRIBUTES": { "CUSTOM_ATTRIBUTES": {
"TITLE": "Custom Attributes", "TITLE": "Custom Attributes",
"BUTTON": "Add custom attribute", "BUTTON": "Add custom attribute",

22
app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.stories.js Normal file
View File

@@ -0,0 +1,22 @@
import { action } from '@storybook/addon-actions';
import SectionHeader from './SectionHeader';
export default {
title: 'Components/Events/Section',
component: SectionHeader,
argTypes: {},
};
const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { SectionHeader },
template:
'<section-header v-bind="$props" @notes="onClickNotes" @events="onClickEvents" @conversation="onClickConversation"></section-header>',
});
export const Section = Template.bind({});
Section.args = {
onClickNotes: action('notes'),
onClickEvents: action('events'),
onClickConversation: action('conversation'),
};

71
app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue Normal file
View File

@@ -0,0 +1,71 @@
<template>
<div class="wrap">
<div class="header">
<h5 class="block-title">
{{ $t('EVENTS.HEADER.TITLE') }}
</h5>
</div>
<div class="button-wrap">
<woot-button
variant="hollow"
size="tiny"
color-scheme="secondary"
class-names="pill-button"
@click="onClickNotes"
>
{{ $t('EVENTS.BUTTON.PILL_BUTTON_NOTES') }}
</woot-button>
<woot-button
variant="hollow"
size="tiny"
color-scheme="secondary"
class-names="pill-button"
@click="onClickEvents"
>
{{ $t('EVENTS.BUTTON.PILL_BUTTON_EVENTS') }}
</woot-button>
<woot-button
variant="hollow"
size="tiny"
color-scheme="secondary"
class-names="pill-button"
@click="onClickConversation"
>
{{ $t('EVENTS.BUTTON.PILL_BUTTON_CONVO') }}
</woot-button>
</div>
</div>
</template>
<script>
export default {
methods: {
onClickNotes() {
this.$emit('notes');
},
onClickEvents() {
this.$emit('events');
},
onClickConversation() {
this.$emit('conversation');
},
},
};
</script>
<style lang="scss" scoped>
.wrap {
width: 100%;
padding: var(--space-normal);
.button-wrap {
display: flex;
.pill-button {
margin-right: var(--space-small);
}
}
}
</style>