Replaced the two Direction enums with a single one

This commit is contained in:
thepaperpilot 2022-04-30 22:08:29 -05:00
parent 77bcc10580
commit 665ddff196
6 changed files with 33 additions and 43 deletions

View file

@ -3,7 +3,7 @@
<img v-if="banner" :src="banner" class="banner" :alt="title" />
<div v-else class="title">{{ title }}</div>
<div @click="changelog?.open()" class="version-container">
<Tooltip display="Changelog" :direction="TooltipDirection.DOWN" class="version"
<Tooltip display="Changelog" :direction="Direction.Down" class="version"
><span>v{{ versionNumber }}</span></Tooltip
>
</div>
@ -26,56 +26,51 @@
</div>
<div>
<a href="https://forums.moddingtree.com/" target="_blank">
<Tooltip display="Forums" :direction="TooltipDirection.DOWN" yoffset="5px">
<Tooltip display="Forums" :direction="Direction.Down" yoffset="5px">
<span class="material-icons">forum</span>
</Tooltip>
</a>
</div>
<div @click="info?.open()">
<Tooltip display="Info" :direction="TooltipDirection.DOWN" class="info">
<Tooltip display="Info" :direction="Direction.Down" class="info">
<span class="material-icons">info</span>
</Tooltip>
</div>
<div @click="savesManager?.open()">
<Tooltip display="Saves" :direction="TooltipDirection.DOWN" xoffset="-20px">
<Tooltip display="Saves" :direction="Direction.Down" xoffset="-20px">
<span class="material-icons">library_books</span>
</Tooltip>
</div>
<div @click="options?.open()">
<Tooltip display="Options" :direction="TooltipDirection.DOWN" xoffset="-66px">
<Tooltip display="Options" :direction="Direction.Down" xoffset="-66px">
<span class="material-icons">settings</span>
</Tooltip>
</div>
</div>
<div v-else class="overlay-nav" v-bind="$attrs">
<div @click="changelog?.open()" class="version-container">
<Tooltip
display="Changelog"
:direction="TooltipDirection.RIGHT"
xoffset="25%"
class="version"
>
<Tooltip display="Changelog" :direction="Direction.Right" xoffset="25%" class="version">
<span>v{{ versionNumber }}</span>
</Tooltip>
</div>
<div @click="savesManager?.open()">
<Tooltip display="Saves" :direction="TooltipDirection.RIGHT">
<Tooltip display="Saves" :direction="Direction.Right">
<span class="material-icons">library_books</span>
</Tooltip>
</div>
<div @click="options?.open()">
<Tooltip display="Options" :direction="TooltipDirection.RIGHT">
<Tooltip display="Options" :direction="Direction.Right">
<span class="material-icons">settings</span>
</Tooltip>
</div>
<div @click="info?.open()">
<Tooltip display="Info" :direction="TooltipDirection.RIGHT">
<Tooltip display="Info" :direction="Direction.Right">
<span class="material-icons">info</span>
</Tooltip>
</div>
<div>
<a href="https://forums.moddingtree.com/" target="_blank">
<Tooltip display="Forums" :direction="TooltipDirection.RIGHT" xoffset="7px">
<Tooltip display="Forums" :direction="Direction.Right" xoffset="7px">
<span class="material-icons">forum</span>
</Tooltip>
</a>
@ -111,7 +106,7 @@ import Info from "./Info.vue";
import Options from "./Options.vue";
import SavesManager from "./SavesManager.vue";
import Tooltip from "features/tooltips/Tooltip.vue";
import { TooltipDirection } from "features/tooltips/tooltip";
import { Direction } from "util/common";
const info = ref<ComponentPublicInstance<typeof Info> | null>(null);
const savesManager = ref<ComponentPublicInstance<typeof SavesManager> | null>(null);

View file

@ -45,13 +45,13 @@
</template>
<script lang="ts">
import { Direction } from "./bar";
import { CoercableComponent, Visibility } from "features/feature";
import Decimal, { DecimalSource } from "util/bignum";
import { computeOptionalComponent, processedPropType, unwrapRef } from "util/vue";
import { computed, CSSProperties, defineComponent, StyleValue, toRefs, unref } from "vue";
import Node from "components/Node.vue";
import MarkNode from "components/MarkNode.vue";
import { Direction } from "util/common";
export default defineComponent({
props: {

View file

@ -11,6 +11,7 @@ import {
Visibility
} from "features/feature";
import { DecimalSource } from "util/bignum";
import { Direction } from "util/common";
import {
Computable,
GetComputableType,
@ -23,14 +24,6 @@ import { unref } from "vue";
export const BarType = Symbol("Bar");
export enum Direction {
Up = "Up",
Down = "Down",
Left = "Left",
Right = "Right",
Default = "Up"
}
export interface BarOptions {
visibility?: Computable<Visibility>;
width: Computable<number>;

View file

@ -13,10 +13,10 @@
v-if="isShown"
class="tooltip"
:class="{
top: unref(direction) === TooltipDirection.UP,
left: unref(direction) === TooltipDirection.LEFT,
right: unref(direction) === TooltipDirection.RIGHT,
bottom: unref(direction) === TooltipDirection.DOWN,
top: unref(direction) === Direction.Up,
left: unref(direction) === Direction.Left,
right: unref(direction) === Direction.Right,
bottom: unref(direction) === Direction.Down,
...unref(classes)
}"
:style="[
@ -39,6 +39,7 @@ import themes from "data/themes";
import { CoercableComponent, jsx, StyleValue } from "features/feature";
import { Persistent } from "game/persistence";
import settings from "game/settings";
import { Direction } from "util/common";
import {
coerceComponent,
computeOptionalComponent,
@ -58,7 +59,6 @@ import {
unref,
watchEffect
} from "vue";
import { TooltipDirection } from "./tooltip";
export default defineComponent({
props: {
@ -69,7 +69,7 @@ export default defineComponent({
},
style: processedPropType<StyleValue>(Object, String, Array),
classes: processedPropType<Record<string, boolean>>(Object),
direction: processedPropType<TooltipDirection>(Number),
direction: processedPropType<Direction>(Number),
xoffset: processedPropType<string>(String),
yoffset: processedPropType<string>(String),
pinned: Object as PropType<Persistent<boolean>>
@ -102,7 +102,7 @@ export default defineComponent({
const showPin = computed(() => unwrapRef(pinned) && themes[settings.theme].showPin);
return {
TooltipDirection,
Direction,
isHovered,
isShown,
comp,

View file

@ -17,6 +17,7 @@ import {
import { VueFeature } from "util/vue";
import { nextTick, Ref, unref } from "vue";
import { persistent } from "game/persistence";
import { Direction } from "util/common";
declare module "@vue/runtime-dom" {
interface CSSProperties {
@ -25,19 +26,12 @@ declare module "@vue/runtime-dom" {
}
}
export enum TooltipDirection {
UP,
LEFT,
RIGHT,
DOWN
}
export interface TooltipOptions {
pinnable?: boolean;
display: Computable<CoercableComponent>;
classes?: Computable<Record<string, boolean>>;
style?: Computable<StyleValue>;
direction?: Computable<TooltipDirection>;
direction?: Computable<Direction>;
xoffset?: Computable<string>;
yoffset?: Computable<string>;
}
@ -54,7 +48,7 @@ export type Tooltip<T extends TooltipOptions> = Replace<
display: GetComputableType<T["display"]>;
classes: GetComputableType<T["classes"]>;
style: GetComputableType<T["style"]>;
direction: GetComputableTypeWithDefault<T["direction"], TooltipDirection.UP>;
direction: GetComputableTypeWithDefault<T["direction"], Direction.Up>;
xoffset: GetComputableType<T["xoffset"]>;
yoffset: GetComputableType<T["yoffset"]>;
}
@ -65,7 +59,7 @@ export type GenericTooltip = Replace<
{
pinnable: boolean;
pinned: Ref<boolean> | undefined;
direction: ProcessedComputable<TooltipDirection>;
direction: ProcessedComputable<Direction>;
}
>;
@ -77,7 +71,7 @@ export function addTooltip<T extends TooltipOptions>(
processComputable(options as T, "classes");
processComputable(options as T, "style");
processComputable(options as T, "direction");
setDefault(options, "direction", TooltipDirection.UP);
setDefault(options, "direction", Direction.Up);
processComputable(options as T, "xoffset");
processComputable(options as T, "yoffset");

View file

@ -14,3 +14,11 @@ export function isPlainObject(object: unknown): boolean {
export function isFunction(func: unknown): func is Function {
return typeof func === "function";
}
export enum Direction {
Up = "Up",
Down = "Down",
Left = "Left",
Right = "Right",
Default = "Up"
}