thepaperpilot/Planar-Pioneers
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Planar-Pioneers.git synced 2024-11-21 16:13:54 +00:00
Code Issues Releases Activity Actions

Added minimizing tabs

Browse source
This commit is contained in:
thepaperpilot 2021-06-13 03:56:42 -05:00
parent 8e5c1b457d
commit 684c72ade0
7 changed files with 144 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

145
src/components/system/LayerTab.vue
View file

@ -1,14 +1,19 @@
<template>
<LayerProvider :layer="layer" :index="index">
<div class="layer-tab" :style="style" :class="{ hasSubtabs: subtabs }">
<branches>
<sticky v-if="subtabs" class="subtabs" :class="{ floating, firstTab: firstTab || !allowGoBack }">
<tab-button v-for="(subtab, id) in subtabs" @selectTab="selectSubtab(id)" :key="id" :activeTab="id === activeSubtab"
:options="subtab" :text="id" />
</sticky>
<component v-if="display" :is="display" />
<default-layer-tab v-else />
</branches>
<div class="layer-container">
<button v-if="index > 0 && allowGoBack && !minimized" class="goBack" @click="goBack(index)">←</button>
<button class="layer-tab minimized" v-if="minimized" @click="toggleMinimized"><div>{{ name }}</div></button>
<div class="layer-tab" :style="style" :class="{ hasSubtabs: subtabs }" v-else>
<branches>
<sticky v-if="subtabs" class="subtabs" :class="{ floating, firstTab: firstTab || !allowGoBack }">
<tab-button v-for="(subtab, id) in subtabs" @selectTab="selectSubtab(id)" :key="id"
:activeTab="id === activeSubtab" :options="subtab" :text="id" />
</sticky>
<component v-if="display" :is="display" />
<default-layer-tab v-else />
</branches>
</div>
<button v-if="!disableMinimize" class="minimize" @click="toggleMinimized">▼</button>
</div>
</LayerProvider>
</template>
@ -26,12 +31,20 @@ export default {
props: {
layer: String,
index: Number,
forceFirstTab: Boolean
forceFirstTab: Boolean,
disableMinimize: Boolean,
tab: Function
},
data() {
return { allowGoBack: modInfo.allowGoBack };
},
computed: {
minimized() {
return !this.disableMinimize && player.minimized[this.layer];
},
name() {
return layers[this.layer].name;
},
floating() {
return themes[player.theme].floatingTabs;
},
@ -76,19 +89,67 @@ export default {
return this.index === 0;
}
},
watch: {
minimized(newValue) {
const tab = this.tab();
if (tab != undefined) {
if (newValue) {
tab.style.flexGrow = 0;
tab.style.flexShrink = 0;
tab.style.width = "60px";
tab.style.margin = 0;
} else {
tab.style.flexGrow = null;
tab.style.flexShrink = null;
tab.style.width = null;
tab.style.margin = null;
}
}
}
},
mounted() {
const tab = this.tab();
if (tab != undefined) {
if (this.minimized) {
tab.style.flexGrow = 0;
tab.style.flexShrink = 0;
tab.style.width = "60px";
tab.style.margin = 0;
} else {
tab.style.flexGrow = null;
tab.style.flexShrink = null;
tab.style.width = null;
tab.style.margin = null;
}
} else {
this.$nextTick(this.mounted);
}
},
methods: {
selectSubtab(subtab) {
if (player.subtabs[this.layer] == undefined) {
player.subtabs[this.layer] = {};
}
player.subtabs[this.layer].mainTabs = subtab;
},
toggleMinimized() {
player.minimized[this.layer] = !player.minimized[this.layer];
},
goBack(index) {
player.tabs = player.tabs.slice(0, index);
}
}
};
</script>
<style scoped>
.layer-tab {
.layer-container {
min-width: 100%;
min-height: 100%;
margin: 0;
}
.layer-tab:not(.minimized) {
padding-top: 50px;
padding-bottom: 20px;
min-height: 100%;
@ -97,7 +158,31 @@ export default {
position: relative;
}
.inner-tab > .layer-tab {
.layer-tab.minimized {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
padding: 0;
padding-top: 50px;
margin: 0;
cursor: pointer;
font-size: 40px;
color: var(--color);
border: none;
background-color: transparent;
}
.layer-tab.minimized div {
margin: 0;
writing-mode: vertical-rl;
padding-left: 10px;
width: 50px;
}
.inner-tab > .layer-container > .layer-tab:not(.minimized) {
margin: -50px -10px;
padding: 50px 10px;
}
@ -148,4 +233,40 @@ export default {
.subtabs:not(.floating):not(.firstTab) {
padding-left: 70px;
}
.minimize {
position: absolute;
top: 0;
right: 15px;
background-color: transparent;
border: 1px solid transparent;
color: var(--color);
font-size: 40px;
cursor: pointer;
line-height: 40px;
z-index: 7;
}
.minimized + .minimize {
transform: rotate(-90deg);
top: 3px;
}
.goBack {
position: absolute;
top: 0;
left: 20px;
background-color: transparent;
border: 1px solid transparent;
color: var(--color);
font-size: 40px;
cursor: pointer;
line-height: 40px;
z-index: 7;
}
.goBack:hover {
transform: scale(1.1, 1.1);
text-shadow: 0 0 7px var(--color);
}
</style>

2
src/components/system/Nav.vue
View file

@ -181,7 +181,7 @@ export default {
.version {
margin-left: 12px;
margin-right: 12px;
margin-bottom: 7px;
margin-bottom: 5px;
color: var(--points);
cursor: pointer;
}

37
src/components/system/Tabs.vue
View file

@ -1,14 +1,14 @@
<template>
<perfect-scrollbar class="tabs-container">
<div class="tabs">
<div v-for="(tab, index) in tabs" :key="index" class="tab">
<button v-if="index > 0 && allowGoBack" class="goBack" @click="goBack(index)">←</button>
<div v-for="(tab, index) in tabs" :key="index" class="tab" :ref="`tab-${index}`">
<perfect-scrollbar>
<div class="inner-tab">
<LayerProvider :layer="tab" :index="index" v-if="tab in components && components[tab]">
<component :is="components[tab]" />
</LayerProvider>
<layer-tab :layer="tab" :index="index" v-else-if="tab in components" />
<layer-tab :layer="tab" :index="index" v-else-if="tab in components"
:tab="() => $refs[`tab-${index}`] && $refs[`tab-${index}`][0]" />
<component :is="tab" :index="index" v-else />
</div>
</perfect-scrollbar>
@ -21,14 +21,9 @@
<script>
import { mapState } from 'vuex';
import { layers } from '../../store/layers';
import { player } from '../../store/proxies';
import modInfo from '../../data/modInfo.json';
export default {
name: 'Tabs',
data() {
return { allowGoBack: modInfo.allowGoBack };
},
computed: {
...mapState([ 'tabs' ]),
components() {
@ -37,11 +32,6 @@ export default {
return acc;
}, {});
}
},
methods: {
goBack(index) {
player.tabs = player.tabs.slice(0, index);
}
}
};
</script>
@ -60,7 +50,8 @@ export default {
.tab {
position: relative;
height: 100%;
width: 100%;
flex-grow: 1;
transition-duration: 0s;
}
.tab .ps {
@ -84,24 +75,6 @@ export default {
background: var(--separator);
z-index: 1;
}
.goBack {
position: absolute;
top: 0;
left: 20px;
background-color: transparent;
border: 1px solid transparent;
color: var(--color);
font-size: 40px;
cursor: pointer;
line-height: 40px;
z-index: 7;
}
.goBack:hover {
transform: scale(1.1, 1.1);
text-shadow: 0 0 7px var(--color);
}
</style>
<style>

2
src/components/tree/Tree.vue
View file

@ -8,7 +8,7 @@
</span>
<modal :show="showModal" @close="closeModal">
<div slot="header"><h2 v-if="modalHeader">{{ modalHeader }}</h2></div>
<layer-tab slot="body" v-if="modal" :layer="modal" :index="tab.index" :forceFirstTab="true" />
<layer-tab slot="body" v-if="modal" :layer="modal" :index="tab.index" :forceFirstTab="true" :disableMinimize="true" />
</modal>
</div>
</template>

1
src/data/layers/aca/f.js
View file

@ -29,6 +29,7 @@ export default {
base: 3,
roundUpCost: true,
canBuyMax() {return false},
name: "Farms",
//directMult() {return new Decimal(player.c.otherThingy)},
row: 1,

3
src/data/mod.js
View file

@ -38,7 +38,8 @@ const spook = {
const main = {
id: 'main',
display: '<tree :append="true" />'
display: '<tree :append="true" />',
name: "Tree"
}
export const initialLayers = [ main, f, c, a, g, h, spook ];

1
src/util/load.js
View file

@ -17,6 +17,7 @@ export function getInitialStore() {
hideChallenges: false,
theme: "paper",
subtabs: {},
minimized: {},
...getStartingData(),
...initialLayers.reduce((acc, layer) => {
acc[layer.id] = {