Lissy93/dashy
1
1
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2024-11-23 04:34:44 +03: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>
<!-- Item Icon -->
<Icon :icon="icon" :url="url" />
<div :class="`opening-method-icon ${!icon? 'short': ''}`">
<NewTabOpenIcon v-if="target === 'newtab'" />
<SameTabOpenIcon v-else-if="target === 'sametab'" />
<IframeOpenIcon v-else-if="target === 'iframe'" />
</div>
<!-- Small icon, showing opening method on hover -->
<ItemOpenMethodIcon class="opening-method-icon" :openingMethod="target" :isSmall="!icon" />
</a>
</template>
<script>
import Icon from '@/components/ItemIcon.vue';
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';
import ItemOpenMethodIcon from '@/components/ItemOpenMethodIcon';
export default {
name: 'Item',
@ -54,9 +48,7 @@ export default {
},
components: {
Icon,
NewTabOpenIcon,
SameTabOpenIcon,
IframeOpenIcon,
ItemOpenMethodIcon,
},
methods: {
/* 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 */
.item:hover, .item:focus {
/* Show opening-method icon */
.opening-method-icon svg {
.opening-method-icon {
display: block;
}
@ -213,25 +209,6 @@ export default {
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>
<!-- 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>