From f04cb69726efef1ef72df6e33ebfd1946116170f Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sat, 23 Apr 2022 14:48:25 -0500
Subject: [PATCH] Show pin on pinned tooltips
---
src/data/themes.ts | 4 +++-
src/features/tooltips/Tooltip.vue | 15 ++++++++++++++-
2 files changed, 17 insertions(+), 2 deletions(-)
diff --git a/src/data/themes.ts b/src/data/themes.ts
index 37b563f..148114e 100644
--- a/src/data/themes.ts
+++ b/src/data/themes.ts
@@ -23,6 +23,7 @@ export interface Theme {
variables: ThemeVars;
floatingTabs: boolean;
mergeAdjacent: boolean;
+ showPin: boolean;
}
declare module "@vue/runtime-dom" {
@@ -53,7 +54,8 @@ const defaultTheme: Theme = {
"--feature-margin": "0px"
},
floatingTabs: true,
- mergeAdjacent: true
+ mergeAdjacent: true,
+ showPin: true
};
export enum Themes {
diff --git a/src/features/tooltips/Tooltip.vue b/src/features/tooltips/Tooltip.vue
index 68f946f..133c139 100644
--- a/src/features/tooltips/Tooltip.vue
+++ b/src/features/tooltips/Tooltip.vue
@@ -24,6 +24,7 @@
'--yoffset': unref(yoffset) || '0px'
}"
>
+ <span v-if="showPin" class="material-icons pinned">push_pin</span>
<component v-if="comp" :is="comp" />
</div>
</transition>
@@ -31,8 +32,10 @@
</template>
<script lang="ts">
+import themes from "data/themes";
import { CoercableComponent, jsx, StyleValue } from "features/feature";
import { Persistent } from "game/persistence";
+import settings from "game/settings";
import {
coerceComponent,
computeOptionalComponent,
@@ -93,6 +96,8 @@ export default defineComponent({
}
}
+ const showPin = computed(() => unwrapRef(pinned) && themes[settings.theme].showPin);
+
return {
TooltipDirection,
isHovered,
@@ -100,7 +105,8 @@ export default defineComponent({
comp,
elementComp,
unref,
- togglePinned
+ togglePinned,
+ showPin
};
}
});
@@ -210,4 +216,11 @@ export default defineComponent({
margin-top: -10px;
border-color: transparent transparent var(--tooltip-background) transparent;
}
+
+.pinned {
+ position: absolute;
+ right: -5px;
+ top: -5px;
+ transform: rotateZ(45deg);
+}
</style>