118 lines
2.2 KiB
Vue
118 lines
2.2 KiB
Vue
<template>
|
|
<div class="top-box">
|
|
<div class="mode-wrap button-group">
|
|
<button
|
|
class="button clear button--reply"
|
|
:class="replyButtonClass"
|
|
@click="handleReplyClick"
|
|
>
|
|
<emoji-or-icon icon="" emoji="💬" />
|
|
{{ $t('CONVERSATION.REPLYBOX.REPLY') }}
|
|
</button>
|
|
|
|
<button
|
|
class="button clear button--note"
|
|
:class="noteButtonClass"
|
|
@click="handleNoteClick"
|
|
>
|
|
<emoji-or-icon icon="" emoji="📝" />
|
|
{{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
|
|
</button>
|
|
</div>
|
|
<div class="action-wrap"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { REPLY_EDITOR_MODES } from './constants';
|
|
import EmojiOrIcon from 'shared/components/EmojiOrIcon';
|
|
export default {
|
|
name: 'ReplyTopPanel',
|
|
components: {
|
|
EmojiOrIcon,
|
|
},
|
|
props: {
|
|
mode: {
|
|
type: String,
|
|
default: REPLY_EDITOR_MODES.REPLY,
|
|
},
|
|
setReplyMode: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
},
|
|
computed: {
|
|
replyButtonClass() {
|
|
return {
|
|
'is-active': this.mode === REPLY_EDITOR_MODES.REPLY,
|
|
};
|
|
},
|
|
noteButtonClass() {
|
|
return {
|
|
'is-active': this.mode === REPLY_EDITOR_MODES.NOTE,
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
handleReplyClick() {
|
|
this.setReplyMode(REPLY_EDITOR_MODES.REPLY);
|
|
},
|
|
handleNoteClick() {
|
|
this.setReplyMode(REPLY_EDITOR_MODES.NOTE);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.top-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
background: var(--b-100);
|
|
}
|
|
|
|
.button-group {
|
|
border: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
.button {
|
|
font-size: var(--font-size-small);
|
|
font-weight: var(--font-weight-medium);
|
|
padding: var(--space-one) var(--space-normal);
|
|
margin: 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
&.is-active {
|
|
background: white;
|
|
}
|
|
}
|
|
|
|
.button--reply {
|
|
border-right: 1px solid var(--color-border);
|
|
|
|
&:hover {
|
|
border-right: 1px solid var(--color-border);
|
|
}
|
|
}
|
|
|
|
.button--note {
|
|
&.is-active {
|
|
border-right: 1px solid var(--color-border);
|
|
background: var(--y-50);
|
|
}
|
|
}
|
|
}
|
|
|
|
.button--note {
|
|
color: var(--y-900);
|
|
}
|
|
|
|
.action-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|