KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 103 additions and 0 deletions
Show stats 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"
}
},
"EVENTS": {
"HEADER": {
"TITLE": "Activities"
},
"BUTTON": {
"PILL_BUTTON_NOTES": "notes",
"PILL_BUTTON_EVENTS": "events",
"PILL_BUTTON_CONVO": "conversations"
}
},
"CUSTOM_ATTRIBUTES": {
"TITLE": "Custom Attributes",
"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>