Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>pull/22111/head
John Molakvoæ (skjnldsv)
4 years ago
parent
f359529555
commit
f04b182b94
|
After Width: | Height: | Size: 207 B |
@ -1,77 +0,0 @@ |
||||
<!-- |
||||
- @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com> |
||||
- |
||||
- @author John Molakvoæ <skjnldsv@protonmail.com> |
||||
- |
||||
- @license GNU AGPL version 3 or any later version |
||||
- |
||||
- This program is free software: you can redistribute it and/or modify |
||||
- it under the terms of the GNU Affero General Public License as |
||||
- published by the Free Software Foundation, either version 3 of the |
||||
- License, or (at your option) any later version. |
||||
- |
||||
- This program is distributed in the hope that it will be useful, |
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
- GNU Affero General Public License for more details. |
||||
- |
||||
- You should have received a copy of the GNU Affero General Public License |
||||
- along with this program. If not, see <http://www.gnu.org/licenses/>. |
||||
- |
||||
--> |
||||
<template> |
||||
<li> |
||||
<a :title="t('core', 'Search for {name} only', { name })" |
||||
class="unified-search__filter" |
||||
href="#" |
||||
@click.prevent="onClick"> |
||||
{{ filter }} |
||||
</a> |
||||
</li> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'SearchFilter', |
||||
|
||||
props: { |
||||
type: { |
||||
type: String, |
||||
required: true, |
||||
}, |
||||
name: { |
||||
type: String, |
||||
required: true, |
||||
}, |
||||
}, |
||||
computed: { |
||||
filter() { |
||||
return `in:${this.type}` |
||||
}, |
||||
}, |
||||
|
||||
methods: { |
||||
onClick() { |
||||
this.$emit('click', this.filter) |
||||
}, |
||||
}, |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.unified-search__filter { |
||||
height: 1em; |
||||
margin-right: 5px; |
||||
padding: 3px 8px; |
||||
border-radius: 1em; |
||||
background-color: var(--color-background-darker); |
||||
|
||||
&:active, |
||||
&:focus, |
||||
&:hover { |
||||
background-color: var(--color-background-hover); |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -1,68 +0,0 @@ |
||||
<template> |
||||
<svg |
||||
class="unified-search__result-placeholder" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
fill="url(#unified-search__result-placeholder-gradient)"> |
||||
<defs> |
||||
<linearGradient id="unified-search__result-placeholder-gradient"> |
||||
<stop offset="0%" stop-color="#ededed"><animate attributeName="stop-color" |
||||
values="#ededed; #ededed; #cccccc; #cccccc; #ededed" |
||||
dur="2s" |
||||
repeatCount="indefinite" /></stop> |
||||
<stop offset="100%" stop-color="#cccccc"><animate attributeName="stop-color" |
||||
values="#cccccc; #ededed; #ededed; #cccccc; #cccccc" |
||||
dur="2s" |
||||
repeatCount="indefinite" /></stop> |
||||
</linearGradient> |
||||
</defs> |
||||
<rect class="unified-search__result-placeholder-icon" /> |
||||
<rect class="unified-search__result-placeholder-line-one" /> |
||||
<rect class="unified-search__result-placeholder-line-two" :style="{width: `calc(${randWidth}%)`}" /> |
||||
</svg> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'SearchResultPlaceholder', |
||||
|
||||
data() { |
||||
return { |
||||
randWidth: Math.floor(Math.random() * 20) + 30, |
||||
} |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
$clickable-area: 44px; |
||||
$margin: 10px; |
||||
|
||||
.unified-search__result-placeholder { |
||||
width: calc(100% - 2 * #{$margin}); |
||||
height: $clickable-area; |
||||
margin: $margin; |
||||
|
||||
&-icon { |
||||
width: $clickable-area; |
||||
height: $clickable-area; |
||||
rx: var(--border-radius); |
||||
ry: var(--border-radius); |
||||
} |
||||
|
||||
&-line-one, |
||||
&-line-two { |
||||
width: calc(100% - #{$margin + $clickable-area}); |
||||
height: 1em; |
||||
x: $margin + $clickable-area; |
||||
} |
||||
|
||||
&-line-one { |
||||
y: 5px; |
||||
} |
||||
|
||||
&-line-two { |
||||
y: 25px; |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,100 @@ |
||||
<template> |
||||
<ul> |
||||
<!-- Placeholder animation --> |
||||
<svg class="unified-search__result-placeholder-gradient"> |
||||
<defs> |
||||
<linearGradient id="unified-search__result-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> |
||||
|
||||
<!-- Placeholders --> |
||||
<li v-for="placeholder in [1, 2, 3]" :key="placeholder"> |
||||
<svg |
||||
class="unified-search__result-placeholder" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
fill="url(#unified-search__result-placeholder-gradient)"> |
||||
<rect class="unified-search__result-placeholder-icon" /> |
||||
<rect class="unified-search__result-placeholder-line-one" /> |
||||
<rect class="unified-search__result-placeholder-line-two" :style="{width: `calc(${randWidth()}%)`}" /> |
||||
</svg> |
||||
</li> |
||||
</ul> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'SearchResultPlaceholders', |
||||
|
||||
data() { |
||||
return { |
||||
light: null, |
||||
dark: null, |
||||
} |
||||
}, |
||||
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) + 30 |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
$clickable-area: 44px; |
||||
$margin: 10px; |
||||
|
||||
.unified-search__result-placeholder-gradient { |
||||
position: fixed; |
||||
height: 0; |
||||
width: 0; |
||||
z-index: -1; |
||||
} |
||||
|
||||
.unified-search__result-placeholder { |
||||
width: calc(100% - 2 * #{$margin}); |
||||
height: $clickable-area; |
||||
margin: $margin; |
||||
|
||||
&-icon { |
||||
width: $clickable-area; |
||||
height: $clickable-area; |
||||
rx: var(--border-radius); |
||||
ry: var(--border-radius); |
||||
} |
||||
|
||||
&-line-one, |
||||
&-line-two { |
||||
width: calc(100% - #{$margin + $clickable-area}); |
||||
height: 1em; |
||||
x: $margin + $clickable-area; |
||||
} |
||||
|
||||
&-line-one { |
||||
y: 5px; |
||||
} |
||||
|
||||
&-line-two { |
||||
y: 25px; |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue