mirror of
https://github.com/Lissy93/dashy.git
synced 2024-11-23 04:34:44 +03:00
Refactored the Search functionality into its own component
This commit is contained in:
Alicia Sykes
parent
8bdf59a1ee
commit
84459b4864
1
src/assets/icons/icon-size-large.svg
Normal file
1
src/assets/icons/icon-size-large.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="expand-arrows-alt" class="svg-inline--fa fa-expand-arrows-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M448 344v112a23.94 23.94 0 0 1-24 24H312c-21.39 0-32.09-25.9-17-41l36.2-36.2L224 295.6 116.77 402.9 153 439c15.09 15.1 4.39 41-17 41H24a23.94 23.94 0 0 1-24-24V344c0-21.4 25.89-32.1 41-17l36.19 36.2L184.46 256 77.18 148.7 41 185c-15.1 15.1-41 4.4-41-17V56a23.94 23.94 0 0 1 24-24h112c21.39 0 32.09 25.9 17 41l-36.2 36.2L224 216.4l107.23-107.3L295 73c-15.09-15.1-4.39-41 17-41h112a23.94 23.94 0 0 1 24 24v112c0 21.4-25.89 32.1-41 17l-36.19-36.2L263.54 256l107.28 107.3L407 327.1c15.1-15.2 41-4.5 41 16.9z"></path></svg>
|
||||
|
After Width: | Height: | Size: 757 B |
1
src/assets/icons/icon-size-medium.svg
Normal file
1
src/assets/icons/icon-size-medium.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="expand" class="svg-inline--fa fa-expand fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"></path></svg>
|
||||
|
After Width: | Height: | Size: 740 B |
1
src/assets/icons/icon-size-small.svg
Normal file
1
src/assets/icons/icon-size-small.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="compress-arrows-alt" class="svg-inline--fa fa-compress-arrows-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M200 288H88c-21.4 0-32.1 25.8-17 41l32.9 31-99.2 99.3c-6.2 6.2-6.2 16.4 0 22.6l25.4 25.4c6.2 6.2 16.4 6.2 22.6 0L152 408l31.1 33c15.1 15.1 40.9 4.4 40.9-17V312c0-13.3-10.7-24-24-24zm112-64h112c21.4 0 32.1-25.9 17-41l-33-31 99.3-99.3c6.2-6.2 6.2-16.4 0-22.6L481.9 4.7c-6.2-6.2-16.4-6.2-22.6 0L360 104l-31.1-33C313.8 55.9 288 66.6 288 88v112c0 13.3 10.7 24 24 24zm96 136l33-31.1c15.1-15.1 4.4-40.9-17-40.9H312c-13.3 0-24 10.7-24 24v112c0 21.4 25.9 32.1 41 17l31-32.9 99.3 99.3c6.2 6.2 16.4 6.2 22.6 0l25.4-25.4c6.2-6.2 6.2-16.4 0-22.6L408 360zM183 71.1L152 104 52.7 4.7c-6.2-6.2-16.4-6.2-22.6 0L4.7 30.1c-6.2 6.2-6.2 16.4 0 22.6L104 152l-33 31.1C55.9 198.2 66.6 224 88 224h112c13.3 0 24-10.7 24-24V88c0-21.3-25.9-32-41-16.9z"></path></svg>
|
||||
|
After Width: | Height: | Size: 980 B |
@ -1,199 +0,0 @@
|
||||
<template>
|
||||
<section>
|
||||
<form>
|
||||
<label for="filter-tiles">Search</label>
|
||||
<input
|
||||
id="filter-tiles"
|
||||
v-model="input"
|
||||
ref="filter"
|
||||
placeholder="Start typing to filter tiles..."
|
||||
v-on:input="userIsTypingSomething"
|
||||
@keydown.esc="clearFilterInput" />
|
||||
<i v-if="input.length > 0"
|
||||
class="el-icon-circle-close clear-search"
|
||||
title="Clear search"
|
||||
@click="clearFilterInput"></i>
|
||||
</form>
|
||||
<div class="options-container">
|
||||
<div class="theme-selector">
|
||||
<ThemeSelector :themes="availableThemes" />
|
||||
</div>
|
||||
<div>
|
||||
<span class="options-label">Layout</span>
|
||||
<div class="display-options">
|
||||
<IconDeafault @click="updateDisplayLayout('default')"
|
||||
:class="`layout-icon ${displayLayout === 'default' ? 'selected' : ''}`" />
|
||||
<IconHorizontal class="layout-icon" @click="updateDisplayLayout('horizontal')"
|
||||
:class="`layout-icon ${displayLayout === 'horizontal' ? 'selected' : ''}`" />
|
||||
<IconVertical class="layout-icon" @click="updateDisplayLayout('vertical')"
|
||||
:class="`layout-icon ${displayLayout === 'vertical' ? 'selected' : ''}`" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<KeyboardShortcutInfo />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import KeyboardShortcutInfo from '@/components/Settings/KeyboardShortcutInfo';
|
||||
import ThemeSelector from '@/components/Settings/ThemeSelector';
|
||||
|
||||
import IconDeafault from '@/assets/icons/layout-default.svg';
|
||||
import IconHorizontal from '@/assets/icons/layout-horizontal.svg';
|
||||
import IconVertical from '@/assets/icons/layout-vertical.svg';
|
||||
|
||||
export default {
|
||||
name: 'FilterTile',
|
||||
data() {
|
||||
return {
|
||||
input: '',
|
||||
};
|
||||
},
|
||||
props: {
|
||||
displayLayout: String,
|
||||
availableThemes: Object,
|
||||
},
|
||||
components: {
|
||||
KeyboardShortcutInfo,
|
||||
ThemeSelector,
|
||||
IconDeafault,
|
||||
IconHorizontal,
|
||||
IconVertical,
|
||||
},
|
||||
methods: {
|
||||
userIsTypingSomething() {
|
||||
this.$emit('user-is-searchin', this.input);
|
||||
},
|
||||
clearFilterInput() {
|
||||
this.input = '';
|
||||
this.userIsTypingSomething();
|
||||
document.activeElement.blur();
|
||||
},
|
||||
updateDisplayLayout(layout) {
|
||||
this.$emit('change-display-layout', layout);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('keyup', (event) => {
|
||||
const { key, keyCode } = event;
|
||||
if (/^[a-zA-Z]$/.test(key) && !document.activeElement.id) {
|
||||
try {
|
||||
this.input += key;
|
||||
this.$refs.filter.focus();
|
||||
this.userIsTypingSomething();
|
||||
} catch (e) {
|
||||
// Do nothing
|
||||
}
|
||||
} else if (keyCode === 27) {
|
||||
this.clearFilterInput();
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: stretch;
|
||||
background: linear-gradient(0deg, var(--background) 0%, var(--background-darker) 100%);
|
||||
}
|
||||
form {
|
||||
border-radius: 0 0 20px 0;
|
||||
padding: 0 0.2rem 0.2rem 0;
|
||||
background: var(--background-darker);
|
||||
label {
|
||||
display: inline;
|
||||
color: var(--primary);
|
||||
margin: 0.5rem;
|
||||
display: inline;
|
||||
}
|
||||
input {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
padding: 0.5rem;
|
||||
margin: 0.5rem;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
background: var(--background);
|
||||
color: var(--primary);
|
||||
&:focus {
|
||||
background: var(--background-transparent);
|
||||
}
|
||||
}
|
||||
.clear-search {
|
||||
position: absolute;
|
||||
margin: 1em 0 0 -2em;
|
||||
color: var(--primary);
|
||||
opacity: 0.5;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background: var(--background-darker);
|
||||
}
|
||||
}
|
||||
}
|
||||
.options-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
padding: 0 1rem;
|
||||
border-radius: 20px 0 0;
|
||||
background: var(--background);
|
||||
|
||||
span.options-label {
|
||||
font-size: 0.8rem;
|
||||
color: var(--primary-transparent);
|
||||
width: 5.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.theme-selector {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.display-options {
|
||||
color: var(--primary-transparent);
|
||||
svg {
|
||||
path {
|
||||
fill: var(--primary-transparent);
|
||||
}
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 0.2rem;
|
||||
padding: 0.2rem;
|
||||
text-align: center;
|
||||
background: var(--background);
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 4px;
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
&:hover, &.selected {
|
||||
background: var(--primary-transparent);
|
||||
path { fill: var(--background); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
form {
|
||||
flex: 1;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
.options-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
72
src/components/Settings/ItemSizeSelector.vue
Normal file
72
src/components/Settings/ItemSizeSelector.vue
Normal file
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div>
|
||||
<span class="options-label">Icon Size</span>
|
||||
<div class="display-options">
|
||||
<IconSmall @click="updateIconSize('default')"
|
||||
:class="`layout-icon ${iconSize === 'small' ? 'selected' : ''}`" />
|
||||
<IconMedium class="layout-icon" @click="updateIconSize('horizontal')"
|
||||
:class="`layout-icon ${iconSize === 'medium' ? 'selected' : ''}`" />
|
||||
<IconLarge class="layout-icon" @click="updateIconSize('vertical')"
|
||||
:class="`layout-icon ${iconSize === 'large' ? 'selected' : ''}`" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconSmall from '@/assets/icons/icon-size-small.svg';
|
||||
import IconMedium from '@/assets/icons/icon-size-medium.svg';
|
||||
import IconLarge from '@/assets/icons/icon-size-large.svg';
|
||||
|
||||
export default {
|
||||
name: 'IconSizeSelector',
|
||||
data() {
|
||||
return {
|
||||
input: '',
|
||||
};
|
||||
},
|
||||
props: {
|
||||
iconSize: String,
|
||||
},
|
||||
components: {
|
||||
IconSmall,
|
||||
IconMedium,
|
||||
IconLarge,
|
||||
},
|
||||
methods: {
|
||||
updateIconSize(iconSize) {
|
||||
this.$emit('iconSizeUpdated', iconSize);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
span.options-label {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.display-options {
|
||||
color: var(--primary-transparent);
|
||||
svg {
|
||||
path {
|
||||
fill: var(--primary-transparent);
|
||||
}
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 0.2rem;
|
||||
padding: 0.2rem;
|
||||
text-align: center;
|
||||
background: var(--background);
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 4px;
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
&:hover, &.selected {
|
||||
background: var(--primary-transparent);
|
||||
path { fill: var(--background); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
71
src/components/Settings/LayoutSelector.vue
Normal file
71
src/components/Settings/LayoutSelector.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div>
|
||||
<span class="options-label">Layout</span>
|
||||
<div class="display-options">
|
||||
<IconDeafault @click="updateDisplayLayout('default')"
|
||||
:class="`layout-icon ${displayLayout === 'default' ? 'selected' : ''}`" />
|
||||
<IconHorizontal class="layout-icon" @click="updateDisplayLayout('horizontal')"
|
||||
:class="`layout-icon ${displayLayout === 'horizontal' ? 'selected' : ''}`" />
|
||||
<IconVertical class="layout-icon" @click="updateDisplayLayout('vertical')"
|
||||
:class="`layout-icon ${displayLayout === 'vertical' ? 'selected' : ''}`" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconDeafault from '@/assets/icons/layout-default.svg';
|
||||
import IconHorizontal from '@/assets/icons/layout-horizontal.svg';
|
||||
import IconVertical from '@/assets/icons/layout-vertical.svg';
|
||||
|
||||
export default {
|
||||
name: 'LayoutSelector',
|
||||
data() {
|
||||
return {
|
||||
input: '',
|
||||
};
|
||||
},
|
||||
props: {
|
||||
displayLayout: String,
|
||||
},
|
||||
components: {
|
||||
IconDeafault,
|
||||
IconHorizontal,
|
||||
IconVertical,
|
||||
},
|
||||
methods: {
|
||||
updateDisplayLayout(layout) {
|
||||
this.$emit('layoutUpdated', layout);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
span.options-label {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.display-options {
|
||||
color: var(--primary-transparent);
|
||||
svg {
|
||||
path {
|
||||
fill: var(--primary-transparent);
|
||||
}
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 0.2rem;
|
||||
padding: 0.2rem;
|
||||
text-align: center;
|
||||
background: var(--background);
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
&:hover, &.selected {
|
||||
background: var(--primary-transparent);
|
||||
path { fill: var(--background); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
113
src/components/Settings/SearchBar.vue
Normal file
113
src/components/Settings/SearchBar.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<form>
|
||||
<label for="filter-tiles">Search</label>
|
||||
<input
|
||||
id="filter-tiles"
|
||||
v-model="input"
|
||||
ref="filter"
|
||||
placeholder="Start typing to filter tiles..."
|
||||
v-on:input="userIsTypingSomething"
|
||||
@keydown.esc="clearFilterInput" />
|
||||
<i v-if="input.length > 0"
|
||||
class="clear-search"
|
||||
title="Clear search"
|
||||
@click="clearFilterInput">x</i>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'FilterTile',
|
||||
data() {
|
||||
return {
|
||||
input: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
userIsTypingSomething() {
|
||||
this.$emit('user-is-searchin', this.input);
|
||||
},
|
||||
clearFilterInput() {
|
||||
this.input = '';
|
||||
this.userIsTypingSomething();
|
||||
document.activeElement.blur();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('keyup', (event) => {
|
||||
const { key, keyCode } = event;
|
||||
if (/^[a-zA-Z]$/.test(key) && !document.activeElement.id) {
|
||||
try {
|
||||
this.input += key;
|
||||
this.$refs.filter.focus();
|
||||
this.userIsTypingSomething();
|
||||
} catch (e) {
|
||||
// Do nothing
|
||||
}
|
||||
} else if (keyCode === 27) {
|
||||
this.clearFilterInput();
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: stretch;
|
||||
background: linear-gradient(0deg, var(--background) 0%, var(--background-darker) 100%);
|
||||
}
|
||||
form {
|
||||
border-radius: 0 0 20px 0;
|
||||
padding: 0 0.2rem 0.2rem 0;
|
||||
background: var(--background-darker);
|
||||
label {
|
||||
display: inline;
|
||||
color: var(--primary);
|
||||
margin: 0.5rem;
|
||||
display: inline;
|
||||
}
|
||||
input {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
padding: 0.5rem;
|
||||
margin: 0.5rem;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
background: var(--background);
|
||||
color: var(--primary);
|
||||
&:focus {
|
||||
background: var(--background-transparent);
|
||||
}
|
||||
}
|
||||
.clear-search {
|
||||
position: absolute;
|
||||
color: var(--primary);
|
||||
margin: 0.55rem 0 0 -2.2rem;
|
||||
padding: 0 0.4rem;
|
||||
font-style: normal;
|
||||
font-size: 1.5rem;
|
||||
opacity: 0.5;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background: var(--background-darker);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
form {
|
||||
flex: 1;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
79
src/components/Settings/SettingsContainer.vue
Normal file
79
src/components/Settings/SettingsContainer.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<section>
|
||||
<SearchBar @user-is-searchin="userIsTypingSomething" ref="SearchBar" />
|
||||
<div class="options-container">
|
||||
<ThemeSelector class="theme-selector" :themes="availableThemes" />
|
||||
<LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
|
||||
<ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
|
||||
</div>
|
||||
<KeyboardShortcutInfo />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SearchBar from '@/components/Settings/SearchBar';
|
||||
import ThemeSelector from '@/components/Settings/ThemeSelector';
|
||||
import LayoutSelector from '@/components/Settings/LayoutSelector';
|
||||
import ItemSizeSelector from '@/components/Settings/ItemSizeSelector';
|
||||
import KeyboardShortcutInfo from '@/components/Settings/KeyboardShortcutInfo';
|
||||
|
||||
export default {
|
||||
name: 'FilterTile',
|
||||
props: {
|
||||
displayLayout: String,
|
||||
iconSize: String,
|
||||
availableThemes: Object,
|
||||
},
|
||||
components: {
|
||||
SearchBar,
|
||||
ThemeSelector,
|
||||
LayoutSelector,
|
||||
ItemSizeSelector,
|
||||
KeyboardShortcutInfo,
|
||||
},
|
||||
methods: {
|
||||
userIsTypingSomething(something) {
|
||||
this.$emit('user-is-searchin', something);
|
||||
},
|
||||
clearFilterInput() {
|
||||
this.$refs.SearchBar.clearFilterInput();
|
||||
},
|
||||
updateDisplayLayout(layout) {
|
||||
this.$emit('change-display-layout', layout);
|
||||
},
|
||||
updateIconSize(iconSize) {
|
||||
this.$emit('change-icon-size', iconSize);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: stretch;
|
||||
background: linear-gradient(0deg, var(--background) 0%, var(--background-darker) 100%);
|
||||
}
|
||||
.options-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
padding: 0 1rem;
|
||||
border-radius: 20px 0 0;
|
||||
background: var(--background);
|
||||
div {
|
||||
opacity: 0.85;
|
||||
&:hover { opacity: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.options-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -54,7 +54,8 @@ export default {
|
||||
div.vs__dropdown-toggle {
|
||||
border-color: var(--primary);
|
||||
min-width: 10rem;
|
||||
height: 2rem;
|
||||
height: 1.8rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
span.vs__selected, li.vs__dropdown-option {
|
||||
color: var(--primary);
|
||||
@ -78,15 +79,14 @@ export default {
|
||||
.theme-selector-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
opacity: 0.8;
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
span.theme-label {
|
||||
font-size: 0.8rem;
|
||||
font-size: 1rem;
|
||||
color: var(--primary);
|
||||
margin: 1px 0 2px 0;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<!-- Search bar, layout options and settings -->
|
||||
<FilterTile ref="filterComp"
|
||||
<SettingsContainer ref="filterComp"
|
||||
@user-is-searchin="searching"
|
||||
@change-display-layout="setLayoutOrientation"
|
||||
:displayLayout="layout"
|
||||
@ -26,7 +26,7 @@
|
||||
|
||||
<script>
|
||||
|
||||
import FilterTile from '@/components/Settings/FilterTile.vue';
|
||||
import SettingsContainer from '@/components/Settings/SettingsContainer.vue';
|
||||
import ItemGroup from '@/components/LinkItems/ItemGroup.vue';
|
||||
|
||||
export default {
|
||||
@ -36,7 +36,7 @@ export default {
|
||||
appConfig: Object, // Main site configuation (optional)
|
||||
},
|
||||
components: {
|
||||
FilterTile,
|
||||
SettingsContainer,
|
||||
ItemGroup,
|
||||
},
|
||||
data: () => ({
|
||||
@ -59,7 +59,7 @@ export default {
|
||||
},
|
||||
/* Updates local data with search value, triggered from filter comp */
|
||||
searching(searchValue) {
|
||||
this.searchValue = searchValue;
|
||||
this.searchValue = searchValue || '';
|
||||
},
|
||||
/* Clears input field, once a searched item is opened */
|
||||
finishedSearching() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user