tyler.durden
/
dashy
mirror of https://github.com/Lissy93/dashy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

✨ Shows icon on hover for items with hotkey bound

This commit is contained in:
Alicia Sykes 2021-07-19 21:55:05 +01:00
parent 642c42bfe2
commit 4843802268
2 changed files with 30 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/LinkItems/Item.vue
View File

@ -20,8 +20,9 @@
<Icon :icon="icon" :url="url" :size="itemSize" :color="color" <Icon :icon="icon" :url="url" :size="itemSize" :color="color"
v-bind:style="customStyles" class="bounce" /> v-bind:style="customStyles" class="bounce" />
<!-- Small icon, showing opening method on hover --> <!-- Small icon, showing opening method on hover -->
<ItemOpenMethodIcon class="opening-method-icon" :isSmall="!icon" :openingMethod="target" <ItemOpenMethodIcon class="opening-method-icon" :isSmall="!icon || itemSize === 'small'"
:position="itemSize === 'medium'? 'bottom right' : 'top right'"/> :openingMethod="target" :position="itemSize === 'medium'? 'bottom right' : 'top right'"
:hotkey="hotkey" />
<!-- Status indicator dot (if enabled) showing weather srevice is availible --> <!-- Status indicator dot (if enabled) showing weather srevice is availible -->
<StatusIndicator <StatusIndicator
class="status-indicator" class="status-indicator"
@ -60,6 +61,7 @@ export default {
color: String, // Optional text and icon color, specified in hex code color: String, // Optional text and icon color, specified in hex code
backgroundColor: String, // Optional item background color backgroundColor: String, // Optional item background color
url: String, // URL to the resource, optional but recommended url: String, // URL to the resource, optional but recommended
hotkey: Number, // Shortcut for quickly launching app
target: { // Where resource will open, either 'newtab', 'sametab' or 'modal' target: { // Where resource will open, either 'newtab', 'sametab' or 'modal'
type: String, type: String,
default: 'newtab', default: 'newtab',
@ -119,9 +121,10 @@ export default {
}, },
/* Returns configuration object for the tooltip */ /* Returns configuration object for the tooltip */
getTooltipOptions() { getTooltipOptions() {
const hotkeyText = this.hotkey ? `\nPress '${this.hotkey}' to launch` : '';
return { return {
disabled: !this.description, disabled: !this.description,
content: this.description, content: this.description + hotkeyText,
trigger: 'hover focus', trigger: 'hover focus',
hideOnTargetClick: true, hideOnTargetClick: true,
html: false, html: false,

30
src/components/LinkItems/ItemOpenMethodIcon.vue
View File

@ -1,9 +1,14 @@
<template> <template>
<div :class="makeClass(position, isSmall, isTransparent)"> <div>
<NewTabOpenIcon v-if="openingMethod === 'newtab'" /> <div :class="makeClass(position, isSmall, isTransparent)">
<SameTabOpenIcon v-else-if="openingMethod === 'sametab'" /> <NewTabOpenIcon v-if="openingMethod === 'newtab'" />
<IframeOpenIcon v-else-if="openingMethod === 'modal'" /> <SameTabOpenIcon v-else-if="openingMethod === 'sametab'" />
<WorkspaceOpenIcon v-else-if="openingMethod === 'workspace'" /> <IframeOpenIcon v-else-if="openingMethod === 'modal'" />
<WorkspaceOpenIcon v-else-if="openingMethod === 'workspace'" />
</div>
<div v-if="hotkey" :class="`hotkey-denominator ${makeClass(position, isSmall, isTransparent)}`">
{{ hotkey }}
</div>
</div> </div>
</template> </template>
@ -23,6 +28,7 @@ export default {
isSmall: Boolean, // If true, will apply small class isSmall: Boolean, // If true, will apply small class
position: String, // Position classes: top, bottom, left, right position: String, // Position classes: top, bottom, left, right
isTransparent: Boolean, // If true, will apply opacity isTransparent: Boolean, // If true, will apply opacity
hotkey: Number, // Optional hotkey to also display
}, },
methods: { methods: {
/* Returns custom class string, from optional props */ /* Returns custom class string, from optional props */
@ -49,7 +55,6 @@ export default {
width: 1rem; width: 1rem;
margin: 2px; margin: 2px;
path { path {
// fill: var(--primary);
fill: currentColor; fill: currentColor;
} }
} }
@ -68,4 +73,17 @@ export default {
} }
} }
div.hotkey-denominator {
position: absolute;
font-size: 0.8rem;
margin: 2px;
bottom: 2px;
color: currentColor;
border-radius: 18px;
border: 1px solid currentColor;
padding: 0.1rem 0.4rem 0.2rem 0.4rem;
&.top { right: 0; } // Position opposite of opening method icon
&.bottom { left: 0; }
}
</style> </style>