tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-22 13:14:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactors OpeningMethod icons into their own component

Browse Source
This commit is contained in:
Alicia Sykes 2021-04-12 19:39:59 +01:00
parent 9bec0526db
commit 0761e4d5a4
2 changed files with 55 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/Item.vue
View File

@ -15,20 +15,14 @@
</div> </div>
<!-- Item Icon --> <!-- Item Icon -->
<Icon :icon="icon" :url="url" /> <Icon :icon="icon" :url="url" />
<div :class="`opening-method-icon ${!icon? 'short': ''}`"> <!-- Small icon, showing opening method on hover -->
<NewTabOpenIcon v-if="target === 'newtab'" /> <ItemOpenMethodIcon class="opening-method-icon" :openingMethod="target" :isSmall="!icon" />
<SameTabOpenIcon v-else-if="target === 'sametab'" />
<IframeOpenIcon v-else-if="target === 'iframe'" />
</div>
</a> </a>
</template> </template>
<script> <script>
import Icon from '@/components/ItemIcon.vue'; import Icon from '@/components/ItemIcon.vue';
import ItemOpenMethodIcon from '@/components/ItemOpenMethodIcon';
import NewTabOpenIcon from '@/assets/icons/open-new-tab.svg';
import SameTabOpenIcon from '@/assets/icons/open-current-tab.svg';
import IframeOpenIcon from '@/assets/icons/open-iframe.svg';
export default { export default {
name: 'Item', name: 'Item',
@ -54,9 +48,7 @@ export default {
}, },
components: { components: {
Icon, Icon,
NewTabOpenIcon, ItemOpenMethodIcon,
SameTabOpenIcon,
IframeOpenIcon,
}, },
methods: { methods: {
/* Called when an item is clicked, manages the opening of iframe & resets the search field */ /* Called when an item is clicked, manages the opening of iframe & resets the search field */
@ -176,10 +168,14 @@ export default {
} }
} }
.opening-method-icon {
display: none; // Hidden by default, visible on hover
}
/* Manage hover and focus actions */ /* Manage hover and focus actions */
.item:hover, .item:focus { .item:hover, .item:focus {
/* Show opening-method icon */ /* Show opening-method icon */
.opening-method-icon svg { .opening-method-icon {
display: block; display: block;
} }
@ -213,25 +209,6 @@ export default {
width: 56px; width: 56px;
} }
/* Opening-method icon */
.opening-method-icon {
svg {
position: absolute;
display: none;
width: 1rem;
margin: 2px;
right: 0;
top: 0;
path {
fill: var(--primary-transparent);
}
}
&.short svg {
width: 0.5rem;
margin: 0;
}
}
</style> </style>
<!-- An un-scoped style tag, since tooltip is outside this DOM tree --> <!-- An un-scoped style tag, since tooltip is outside this DOM tree -->

46
src/components/ItemOpenMethodIcon.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<div :class="`opening-method-icon ${isSmall? 'short': ''}`">
<NewTabOpenIcon v-if="openingMethod === 'newtab'" />
<SameTabOpenIcon v-else-if="openingMethod === 'sametab'" />
<IframeOpenIcon v-else-if="openingMethod === 'iframe'" />
</div>
</template>
<script>
import NewTabOpenIcon from '@/assets/icons/open-new-tab.svg';
import SameTabOpenIcon from '@/assets/icons/open-current-tab.svg';
import IframeOpenIcon from '@/assets/icons/open-iframe.svg';
export default {
name: 'ItemOpenMethodIcon',
props: {
openingMethod: String,
isSmall: Boolean,
},
components: {
NewTabOpenIcon,
SameTabOpenIcon,
IframeOpenIcon,
},
};
</script>
<style scoped lang="scss">
.opening-method-icon {
svg {
position: absolute;
width: 1rem;
margin: 2px;
right: 0;
top: 0;
path {
fill: var(--primary-transparent);
}
}
&.short svg {
width: 0.5rem;
margin: 0;
}
}
</style>