@everchron/ec-shards 2.1.5 → 2.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<ecs-flex-row class="ecs-log-message" :class="[type, highlight ? 'highlighted' : '']" align="start" :style="padding">
|
|
3
|
-
<ecs-
|
|
3
|
+
<ecs-skeleton-loader v-if="loading && type != 'blank'" type="rect" :width="16" :height="16" />
|
|
4
|
+
<ecs-sticker v-else-if="type != 'blank'" :type="type" />
|
|
4
5
|
<div class="ecs-log-message-content">
|
|
5
|
-
<
|
|
6
|
+
<ecs-skeleton-loader v-if="loading" type="single" :width="40" class="skeleton-text" />
|
|
7
|
+
<slot v-else></slot>
|
|
6
8
|
</div>
|
|
7
|
-
<
|
|
9
|
+
<ecs-skeleton-loader v-if="loading && meta" type="single" :width="15" class="skeleton-text" />
|
|
10
|
+
<div v-else-if="meta" class="ecs-log-message-meta">
|
|
8
11
|
{{ meta }}
|
|
9
12
|
</div>
|
|
10
13
|
</ecs-flex-row>
|
|
@@ -13,10 +16,11 @@
|
|
|
13
16
|
<script>
|
|
14
17
|
import EcsFlexRow from '../flex/flex-row'
|
|
15
18
|
import EcsSticker from '../sticker/sticker'
|
|
19
|
+
import EcsSkeletonLoader from '../skeleton-loader/skeleton-loader'
|
|
16
20
|
|
|
17
21
|
export default {
|
|
18
22
|
components: {
|
|
19
|
-
EcsFlexRow, EcsSticker
|
|
23
|
+
EcsFlexRow, EcsSticker, EcsSkeletonLoader
|
|
20
24
|
},
|
|
21
25
|
|
|
22
26
|
props: {
|
|
@@ -40,6 +44,11 @@ export default {
|
|
|
40
44
|
type: String,
|
|
41
45
|
default: '20px'
|
|
42
46
|
},
|
|
47
|
+
/** Turns the log message into fetching/loading state, which replaces it's content with skeleton loaders. */
|
|
48
|
+
loading: {
|
|
49
|
+
type: Boolean,
|
|
50
|
+
default: false
|
|
51
|
+
}
|
|
43
52
|
},
|
|
44
53
|
|
|
45
54
|
computed: {
|
|
@@ -54,6 +63,8 @@ export default {
|
|
|
54
63
|
@import "../../tokens/build/scss/tokens.scss";
|
|
55
64
|
|
|
56
65
|
.ecs-log-message-content{
|
|
66
|
+
min-height: $type-scale-2-line-height;
|
|
67
|
+
|
|
57
68
|
p, ol, ul, blockquote{
|
|
58
69
|
margin: $spacing-10 0;
|
|
59
70
|
}
|
|
@@ -141,4 +152,8 @@ export default {
|
|
|
141
152
|
border-color: $color-green-2;
|
|
142
153
|
color: $color-green-15;
|
|
143
154
|
}
|
|
155
|
+
|
|
156
|
+
.skeleton-text{
|
|
157
|
+
margin-top: 5px !important;
|
|
158
|
+
}
|
|
144
159
|
</style>
|
|
@@ -35,3 +35,14 @@ export const logMessageRichText = () => ({
|
|
|
35
35
|
</ecs-log-message>
|
|
36
36
|
</div>`,
|
|
37
37
|
});
|
|
38
|
+
|
|
39
|
+
export const logMessageLoading = () => ({
|
|
40
|
+
components: { EcsLogMessage },
|
|
41
|
+
template: `<div>
|
|
42
|
+
<ecs-log-message type="info" meta="07/21/2022, 11:23 AM" loading>Message</ecs-log-message>
|
|
43
|
+
<ecs-log-message type="info" meta="07/21/2022, 11:23 AM" highlight loading>
|
|
44
|
+
<p>Broken Transcript Issue opened by <strong><a href="mailto:r.reyes@orrick.com">r.reyes@orrick.com</a></strong></p>
|
|
45
|
+
<p>Hey there, it looks like this transcript is cut-off at page 58, even though the original file has a total of 112 pages. Additionally there are lines of text missing at the end of each page.</p>
|
|
46
|
+
</ecs-log-message>
|
|
47
|
+
</div>`,
|
|
48
|
+
});
|