c3lf-system-3/web/src/components/Timeline.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">
                <input type="text" placeholder="Add a comment..."/>
            </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: () => []
        }
    },
};
</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;
        width: 100%;

        &::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>