186 lines
No EOL
4 KiB
Vue
186 lines
No EOL
4 KiB
Vue
<template>
|
|
<ol class="timeline">
|
|
<li v-for="(item, index) in timeline" :key="index"
|
|
:class="{'timeline-item':true, 'extra-space': item.type === 'mail'}">
|
|
<span class="timeline-item-icon filled-icon" v-if="item.type === 'mail'">
|
|
<font-awesome-icon icon="envelope"/>
|
|
</span>
|
|
<span class="timeline-item-icon faded-icon" v-else-if="item.type === 'comment'">
|
|
<font-awesome-icon icon="comment"/>
|
|
</span>
|
|
<span class="timeline-item-icon faded-icon" v-else-if="item.type === 'state'">
|
|
<font-awesome-icon icon="check"/>
|
|
</span>
|
|
<span class="timeline-item-icon faded-icon" v-else>
|
|
<font-awesome-icon icon="pen"/>
|
|
</span>
|
|
<TimelineMail v-if="item.type === 'mail'" :item="item"/>
|
|
<TimelineComment v-else-if="item.type === 'comment'" :item="item"/>
|
|
<TimelineStateChange v-else-if="item.type === 'state'" :item="item"/>
|
|
<p v-else>{{ item }}</p>
|
|
</li>
|
|
<li class="timeline-item">
|
|
<span class="timeline-item-icon | faded-icon">
|
|
<font-awesome-icon icon="comment"/>
|
|
</span>
|
|
<div class="new-comment">
|
|
<div class="input-group">
|
|
<input type="text" placeholder="Add a comment..." v-model="newMail">
|
|
<button class="btn" @click="sendMail">
|
|
Send
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import TimelineMail from "@/components/TimelineMail.vue";
|
|
import TimelineComment from "@/components/TimelineComment.vue";
|
|
import TimelineStateChange from "@/components/TimelineStateChange.vue";
|
|
|
|
export default {
|
|
name: 'Timeline',
|
|
components: {TimelineStateChange, TimelineComment, TimelineMail},
|
|
props: {
|
|
timeline: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
emits: ['sendMail'],
|
|
data: () => ({
|
|
newMail: ""
|
|
}),
|
|
methods: {
|
|
sendMail() {
|
|
this.$emit('sendMail', this.newMail);
|
|
this.newMail = "";
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* End basic CSS override */
|
|
|
|
.timeline {
|
|
width: 85%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 32px 0 32px 32px;
|
|
border-left: 2px solid var(--gray);
|
|
font-size: 1.125rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.timeline-item {
|
|
display: flex;
|
|
gap: 24px;
|
|
|
|
& + * {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
& + .extra-space {
|
|
margin-top: 48px;
|
|
}
|
|
}
|
|
|
|
.new-comment {
|
|
width: 100%;
|
|
|
|
input {
|
|
border: 1px solid var(--gray);
|
|
border-radius: 6px;
|
|
height: 48px;
|
|
padding: 0 16px;
|
|
|
|
&::placeholder {
|
|
color: var(--gray-dark);
|
|
}
|
|
|
|
&:focus {
|
|
border-color: var(--gray-dark);
|
|
outline: 0; /* Don't actually do this */
|
|
box-shadow: 0 0 0 4px var(--dark);
|
|
}
|
|
}
|
|
}
|
|
|
|
.timeline-item-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
margin-left: -57px;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
|
|
svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
&.faded-icon {
|
|
background-color: var(--secondary);
|
|
color: var(--light);
|
|
}
|
|
|
|
&.filled-icon {
|
|
background-color: var(--primary);
|
|
color: var(--light);
|
|
}
|
|
}
|
|
|
|
|
|
.button {
|
|
border: 0;
|
|
display: inline-flex;
|
|
vertical-align: middle;
|
|
margin-right: 4px;
|
|
margin-top: 12px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1rem;
|
|
height: 32px;
|
|
padding: 0 8px;
|
|
background-color: var(--dark);
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
border-radius: 99em;
|
|
|
|
&:hover {
|
|
background-color: var(--gray);
|
|
}
|
|
}
|
|
|
|
|
|
</style> |