timeline.vue 2.24 KB
Newer Older
lain's avatar
.  
lain committed
1
<template>
2
3
  <div :class="classes.root">
    <div :class="classes.header">
4
      <div class="title">
HJ's avatar
HJ committed
5
        {{ title }}
lain's avatar
lain committed
6
      </div>
HJ's avatar
HJ committed
7
8
9
10
11
12
      <div
        v-if="timelineError"
        class="loadmore-error alert error"
        @click.prevent
      >
        {{ $t('timeline.error_fetching') }}
13
      </div>
HJ's avatar
HJ committed
14
15
16
17
18
19
      <button
        v-if="timeline.newStatusCount > 0 && !timelineError"
        class="loadmore-button"
        @click.prevent="showNewStatuses"
      >
        {{ $t('timeline.show_new') }}{{ newStatusCountStr }}
20
      </button>
HJ's avatar
HJ committed
21
22
23
24
25
26
      <div
        v-if="!timeline.newStatusCount > 0 && !timelineError"
        class="loadmore-text faint"
        @click.prevent
      >
        {{ $t('timeline.up_to_date') }}
27
      </div>
28
    </div>
29
    <div :class="classes.body">
30
      <div class="timeline">
31
        <conversation
32
          v-for="status in statuses"
Dave LiPuma's avatar
Dave LiPuma committed
33
          :key="status.id"
HJ's avatar
HJ committed
34
          class="status-fadein"
Dave LiPuma's avatar
Dave LiPuma committed
35
36
37
          :statusoid="status"
          :collapsable="true"
        />
lain's avatar
lain committed
38
      </div>
39
    </div>
40
    <div :class="classes.footer">
HJ's avatar
HJ committed
41
42
43
44
45
      <div
        v-if="count===0"
        class="new-status-notification text-center panel-footer faint"
      >
        {{ $t('timeline.no_statuses') }}
46
      </div>
HJ's avatar
HJ committed
47
48
49
50
51
      <div
        v-else-if="bottomedOut"
        class="new-status-notification text-center panel-footer faint"
      >
        {{ $t('timeline.no_more_statuses') }}
52
      </div>
HJ's avatar
HJ committed
53
54
55
56
57
58
      <a
        v-else-if="!timeline.loading"
        href="#"
        @click.prevent="fetchOlderStatuses()"
      >
        <div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div>
59
      </a>
HJ's avatar
HJ committed
60
61
62
63
64
      <div
        v-else
        class="new-status-notification text-center panel-footer"
      >
        <i class="icon-spin3 animate-spin" />
65
      </div>
66
    </div>
lain's avatar
.  
lain committed
67
68
  </div>
</template>
69

lain's avatar
.  
lain committed
70
<script src="./timeline.js"></script>
lain's avatar
lain committed
71
72

<style lang="scss">
73
@import '../../_variables.scss';
lain's avatar
lain committed
74

75
.timeline {
HJ's avatar
indents    
HJ committed
76
  .loadmore-text {
HJ's avatar
HJ committed
77
    opacity: 1;
78
  }
79
}
80

81
.new-status-notification {
HJ's avatar
indents    
HJ committed
82
83
84
85
86
87
88
89
  position:relative;
  margin-top: -1px;
  font-size: 1.1em;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: var(--border, $fallback--border);
  padding: 10px;
  z-index: 1;
HJ's avatar
HJ committed
90
  background-color: $fallback--fg;
HJ's avatar
fixes    
HJ committed
91
  background-color: var(--panel, $fallback--fg);
HJ's avatar
indents    
HJ committed
92
}
lain's avatar
lain committed
93
</style>