deck/src/components/search/Placeholder.vue at aed4baa8fca53da5d1dd48c05de86dc73d0b0458 · nextcloud/deck · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<template>
	<div class="card--placeholder">
		<svg class="card-placeholder__gradient">
			<defs>
				<linearGradient id="card-placeholder__gradient">
					<stop offset="0%" :stop-color="light">
						<animate attributeName="stop-color"
							:values="`${light}; ${light}; ${dark}; ${dark}; ${light}`"
							dur="2s"
							repeatCount="indefinite" />
					</stop>
					<stop offset="100%" :stop-color="dark">
						<animate attributeName="stop-color"
							:values="`${dark}; ${light}; ${light}; ${dark}; ${dark}`"
							dur="2s"
							repeatCount="indefinite" />
					</stop>
				</linearGradient>
			</defs>
		</svg>
		<svg class="card-placeholder__placeholder"
			:class="{ 'standalone': standalone }"
			xmlns="http://www.w3.org/2000/svg"
			fill="url(#card-placeholder__gradient)">
			<rect class="card-placeholder__placeholder-line-header" :style="{width: `calc(${randWidth()}%)`}" />
			<rect class="card-placeholder__placeholder-line-one" />
			<rect class="card-placeholder__placeholder-line-two" :style="{width: `calc(${randWidth()}%)`}" />
		</svg>
	</div>
</template>

<script>
export default {
	name: 'Placeholder',
	data() {
		return {
			light: null,
			dark: null,
			standalone: true,
		}
	},
	mounted() {
		const styles = getComputedStyle(document.documentElement)
		this.dark = styles.getPropertyValue('--color-placeholder-dark')
		this.light = styles.getPropertyValue('--color-placeholder-light')
	},

	methods: {
		randWidth() {
			return Math.floor(Math.random() * 20) + 40
		},
	},
}
</script>

<style lang="scss" scoped>
@import '../../css/variables';
$clickable-area: var(--default-clickable-area);

.card--placeholder {
	width: $stack-width;
	margin-right: $stack-spacing;
	padding: $card-padding;
	transition: box-shadow 0.1s ease-in-out;
	box-shadow: 0 0 2px 0 var(--color-box-shadow);
	border-radius: var(--border-radius-large);
	font-size: 100%;
	margin-bottom: $card-spacing;
	height: 100px;
}

.card-placeholder__gradient {
	position: fixed;
	height: 0;
	width: 0;
	z-index: -1;
}

.card-placeholder__placeholder {
	width: 100%;
	&-line-header,
	&-line-one,
	&-line-two {
		width: 100%;
		height: 1em;
		x: 0;
	}
	&-line-header {
		visibility: hidden;
	}
	&-line-one {
		y: 5px;
	}

	&-line-two {
		y: 25px;
	}

	&.standalone {
		.card-placeholder__placeholder-line-header {
			visibility: visible;
			y: 5px;
		}
		.card-placeholder__placeholder-line-one {
			y: 40px;
		}

		.card-placeholder__placeholder-line-two {
			y: 60px;
		}
	}
}

</style>