Adds item size switching functionality and styles

This commit is contained in:
Alicia Sykes
2021-04-14 14:31:08 +01:00
parent 84459b4864
commit 2baccdb718
9 changed files with 99 additions and 39 deletions

View File

@@ -2,11 +2,11 @@
<div>
<span class="options-label">Layout</span>
<div class="display-options">
<IconDeafault @click="updateDisplayLayout('default')"
<IconDeafault @click="updateDisplayLayout('default')" v-tooltip="tooltip('Auto')"
:class="`layout-icon ${displayLayout === 'default' ? 'selected' : ''}`" />
<IconHorizontal class="layout-icon" @click="updateDisplayLayout('horizontal')"
<IconHorizontal @click="updateDisplayLayout('horizontal')" v-tooltip="tooltip('Horizontal')"
:class="`layout-icon ${displayLayout === 'horizontal' ? 'selected' : ''}`" />
<IconVertical class="layout-icon" @click="updateDisplayLayout('vertical')"
<IconVertical @click="updateDisplayLayout('vertical')" v-tooltip="tooltip('Vertical')"
:class="`layout-icon ${displayLayout === 'vertical' ? 'selected' : ''}`" />
</div>
</div>
@@ -36,6 +36,9 @@ export default {
updateDisplayLayout(layout) {
this.$emit('layoutUpdated', layout);
},
tooltip(content) {
return { content, trigger: 'hover focus', delay: 250 };
},
},
};
</script>