135 lines
3.2 KiB
Vue
135 lines
3.2 KiB
Vue
<script>
|
|
import { __, sprintf } from '../../../locale';
|
|
import Icon from '../../../vue_shared/components/icon.vue';
|
|
import popover from '../../../vue_shared/directives/popover';
|
|
import { MAX_TITLE_LENGTH, MAX_BODY_LENGTH } from '../../constants';
|
|
|
|
export default {
|
|
directives: {
|
|
popover,
|
|
},
|
|
components: {
|
|
Icon,
|
|
},
|
|
props: {
|
|
text: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
scrollTop: 0,
|
|
isFocused: false,
|
|
};
|
|
},
|
|
computed: {
|
|
allLines() {
|
|
return this.text.split('\n').map((line, i) => ({
|
|
text: line.substr(0, this.getLineLength(i)) || ' ',
|
|
highlightedText: line.substr(this.getLineLength(i)),
|
|
}));
|
|
},
|
|
},
|
|
methods: {
|
|
handleScroll() {
|
|
if (this.$refs.textarea) {
|
|
this.$nextTick(() => {
|
|
this.scrollTop = this.$refs.textarea.scrollTop;
|
|
});
|
|
}
|
|
},
|
|
getLineLength(i) {
|
|
return i === 0 ? MAX_TITLE_LENGTH : MAX_BODY_LENGTH;
|
|
},
|
|
onInput(e) {
|
|
this.$emit('input', e.target.value);
|
|
},
|
|
updateIsFocused(isFocused) {
|
|
this.isFocused = isFocused;
|
|
},
|
|
},
|
|
popoverOptions: {
|
|
trigger: 'hover',
|
|
placement: 'top',
|
|
content: sprintf(
|
|
__(`
|
|
The character highlighter helps you keep the subject line to %{titleLength} characters
|
|
and wrap the body at %{bodyLength} so they are readable in git.
|
|
`),
|
|
{ titleLength: MAX_TITLE_LENGTH, bodyLength: MAX_BODY_LENGTH },
|
|
),
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<fieldset class="common-note-form ide-commit-message-field">
|
|
<div
|
|
:class="{
|
|
'is-focused': isFocused
|
|
}"
|
|
class="md-area"
|
|
>
|
|
<div
|
|
v-once
|
|
class="md-header"
|
|
>
|
|
<ul class="nav-links">
|
|
<li>
|
|
{{ __('Commit Message') }}
|
|
<span
|
|
v-popover="$options.popoverOptions"
|
|
class="form-text text-muted prepend-left-10"
|
|
>
|
|
<icon
|
|
name="question"
|
|
/>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="ide-commit-message-textarea-container">
|
|
<div class="ide-commit-message-highlights-container">
|
|
<div
|
|
:style="{
|
|
transform: `translate3d(0, ${-scrollTop}px, 0)`
|
|
}"
|
|
class="note-textarea highlights monospace"
|
|
>
|
|
<div
|
|
v-for="(line, index) in allLines"
|
|
:key="index"
|
|
>
|
|
<span
|
|
v-text="line.text"
|
|
>
|
|
</span><mark
|
|
v-show="line.highlightedText"
|
|
v-text="line.highlightedText"
|
|
>
|
|
</mark>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<textarea
|
|
ref="textarea"
|
|
:placeholder="placeholder"
|
|
:value="text"
|
|
class="note-textarea ide-commit-message-textarea"
|
|
name="commit-message"
|
|
@scroll="handleScroll"
|
|
@input="onInput"
|
|
@focus="updateIsFocused(true)"
|
|
@blur="updateIsFocused(false)"
|
|
>
|
|
</textarea>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</template>
|