thepaperpilot/Planar-Pioneers
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Planar-Pioneers.git synced 2024-11-26 02:01:39 +00:00
Code Issues Releases Activity Actions

Made layer style and classes

Browse source
This commit is contained in:
thepaperpilot 2022-05-03 21:10:24 -05:00
parent 223b1cfcd4
commit eec494370c
2 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/Game.vue
View file

@ -1,6 +1,13 @@
<template> <template>
<div class="tabs-container" :class="{ useHeader }"> <div class="tabs-container" :class="{ useHeader }">
<div v-for="(tab, index) in tabs" :key="index" class="tab" :ref="`tab-${index}`"> <div
v-for="(tab, index) in tabs"
:key="index"
class="tab"
:ref="`tab-${index}`"
:style="unref(layers[tab]?.style)"
:class="unref(layers[tab]?.classes)"
>
<Nav v-if="index === 0 && !useHeader" /> <Nav v-if="index === 0 && !useHeader" />
<div class="inner-tab"> <div class="inner-tab">
<Layer <Layer
@ -19,7 +26,7 @@
import projInfo from "data/projInfo.json"; import projInfo from "data/projInfo.json";
import { GenericLayer, layers } from "game/layers"; import { GenericLayer, layers } from "game/layers";
import player from "game/player"; import player from "game/player";
import { computed, toRef } from "vue"; import { computed, toRef, unref } from "vue";
import Layer from "./Layer.vue"; import Layer from "./Layer.vue";
import Nav from "./Nav.vue"; import Nav from "./Nav.vue";
@ -28,8 +35,8 @@ const layerKeys = computed(() => Object.keys(layers));
const useHeader = projInfo.useHeader; const useHeader = projInfo.useHeader;
function gatherLayerProps(layer: GenericLayer) { function gatherLayerProps(layer: GenericLayer) {
const { display, minimized, minWidth, name, color, style, classes, minimizable, nodes } = layer; const { display, minimized, minWidth, name, color, minimizable, nodes } = layer;
return { display, minimized, minWidth, name, color, style, classes, minimizable, nodes }; return { display, minimized, minWidth, name, color, minimizable, nodes };
} }
</script> </script>

11
src/components/Layer.vue
View file

@ -4,12 +4,7 @@
<button class="layer-tab minimized" v-if="minimized.value" @click="minimized.value = false"> <button class="layer-tab minimized" v-if="minimized.value" @click="minimized.value = false">
<div>{{ unref(name) }}</div> <div>{{ unref(name) }}</div>
</button> </button>
<div <div class="layer-tab" :class="{ showGoBack }" v-else>
class="layer-tab"
:style="unref(style)"
:class="[{ showGoBack }, unref(classes)]"
v-else
>
<Context ref="contextRef"> <Context ref="contextRef">
<component :is="component" /> <component :is="component" />
</Context> </Context>
@ -22,7 +17,7 @@
<script lang="ts"> <script lang="ts">
import projInfo from "data/projInfo.json"; import projInfo from "data/projInfo.json";
import { CoercableComponent, StyleValue } from "features/feature"; import { CoercableComponent } from "features/feature";
import { FeatureNode } from "game/layers"; import { FeatureNode } from "game/layers";
import { Persistent } from "game/persistence"; import { Persistent } from "game/persistence";
import player from "game/player"; import player from "game/player";
@ -58,8 +53,6 @@ export default defineComponent({
required: true required: true
}, },
color: processedPropType<string>(String), color: processedPropType<string>(String),
style: processedPropType<StyleValue>(String, Object, Array),
classes: processedPropType<Record<string, boolean>>(Object),
minimizable: processedPropType<boolean>(Boolean), minimizable: processedPropType<boolean>(Boolean),
nodes: { nodes: {
type: Object as PropType<Ref<Record<string, FeatureNode | undefined>>>, type: Object as PropType<Ref<Record<string, FeatureNode | undefined>>>,