LiveAtlas/src/components/Sidebar.vue

208 lines
4.7 KiB
Vue
Raw Normal View History

2020-12-16 16:54:41 +00:00
<!--
- Copyright 2020 James Lyne
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-->
2020-11-20 21:44:02 +00:00
<template>
2020-12-01 23:20:38 +00:00
<aside class="sidebar">
<header class="sidebar__buttons">
<button v-if="mapCount > 1" :class="{'button--maps': true, 'active': menusActive.has('maps')}"
@click="toggleMenu('maps')" title="Map list" aria-label="Map list">
2020-12-12 21:36:41 +00:00
<SvgIcon name="maps"></SvgIcon>
</button>
<button :class="{'button--players': true, 'active': menusActive.has('players')}"
@click="toggleMenu('players')" title="Player list" aria-label="Player list">
2020-12-12 21:36:41 +00:00
<SvgIcon name="players"></SvgIcon>
</button>
<!-- <button :class="{'button&#45;&#45;settings': true, 'active': menusActive.has('settings')}"-->
<!-- @click="toggleMenu('settings')" title="Settings" aria-label="Settings">-->
2020-12-16 16:54:41 +00:00
<!-- <SvgIcon name="settings"></SvgIcon>-->
<!-- </button>-->
2020-12-01 23:20:38 +00:00
</header>
<WorldList v-if="mapCount > 1" v-show="menusActive.has('maps')"></WorldList>
<PlayerList v-show="menusActive.has('players')"></PlayerList>
<FollowTarget v-if="following" v-show="followActive" :target="following"></FollowTarget>
2020-12-01 23:20:38 +00:00
</aside>
2020-11-20 21:44:02 +00:00
</template>
2020-11-23 12:13:28 +00:00
<script lang="ts">
import {defineComponent, ref, reactive, computed, onMounted, onUnmounted, watch} from "@vue/runtime-core";
2020-12-01 23:20:38 +00:00
import PlayerList from './sidebar/PlayerList.vue';
import WorldList from './sidebar/WorldList.vue';
import FollowTarget from './sidebar/FollowTarget.vue';
import {useStore} from "@/store";
2020-12-12 21:36:41 +00:00
import SvgIcon from "@/components/SvgIcon.vue";
2020-12-01 23:20:38 +00:00
export default defineComponent({
components: {
2020-12-12 21:36:41 +00:00
SvgIcon,
2020-12-01 23:20:38 +00:00
PlayerList,
FollowTarget,
WorldList,
},
setup() {
const store = useStore(),
onResize = () => {
smallScreen.value = window.innerWidth < 480 || window.innerHeight < 500;
},
toggleMenu = (menu: string) => {
if(menusActive.has(menu)) {
menusActive.delete(menu);
} else {
if(smallScreen.value) {
menusActive.clear();
}
menusActive.add(menu);
}
},
followActive = computed(() => {
//Show following alongside playerlist on small screens
return (!smallScreen.value && following) || (smallScreen.value && menusActive.has('players'));
});
let menusActive = reactive(new Set<string>()),
smallScreen = ref(false),
mapCount = computed(() => store.state.maps.size),
2020-12-17 00:13:28 +00:00
following = computed(() => store.state.followTarget);
2020-12-01 23:20:38 +00:00
onResize();
onMounted(() => window.addEventListener('resize', onResize));
onUnmounted(() => window.addEventListener('resize', onResize));
watch(smallScreen, (newValue) => {
if(newValue && menusActive.size > 1) {
menusActive.clear();
}
});
2020-12-01 23:20:38 +00:00
return {
mapCount,
menusActive,
followActive,
toggleMenu,
2020-12-01 23:20:38 +00:00
following
}
}
2020-11-23 12:13:28 +00:00
})
2020-11-20 21:44:02 +00:00
</script>
2020-12-01 23:20:38 +00:00
<style lang="scss">
@import '../scss/variables';
@import '../scss/placeholders';
.sidebar {
position: fixed;
z-index: 120;
top: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
padding: 1rem;
width: 23rem;
2020-12-15 22:12:57 +00:00
font-size: 1.5rem;
2020-12-01 23:20:38 +00:00
will-change: transform;
2020-12-12 19:06:25 +00:00
pointer-events: none;
ul, ol, li {
padding: 0;
list-style: none;
margin: 0;
}
2020-12-01 23:20:38 +00:00
.sidebar__buttons {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
margin-bottom: 1rem;
2020-12-12 19:06:25 +00:00
pointer-events: auto;
2020-12-01 23:20:38 +00:00
button {
width: 5rem;
height: 5rem;
2020-11-20 21:44:02 +00:00
2020-12-01 23:20:38 +00:00
& + button {
margin-left: 1rem;
}
}
2020-12-20 14:45:04 +00:00
@media (max-width: 30rem) {
flex-direction: column;
align-items: flex-end;
margin: 0;
position: absolute;
2020-12-20 16:18:01 +00:00
right: 1rem;
top: 1rem;
2020-12-20 14:45:04 +00:00
button + button {
margin-left: 0;
margin-top: 1rem;
}
}
2020-12-20 16:18:01 +00:00
@media (max-width: 25rem) {
right: 0.5rem;
top: 0.5rem;
}
2020-12-01 23:20:38 +00:00
}
.sidebar__section {
@extend %panel;
flex: 0 1 auto;
min-height: 10rem;
2020-12-01 23:20:38 +00:00
margin-bottom: 1rem;
2020-12-12 19:06:25 +00:00
pointer-events: auto;
2020-12-01 23:20:38 +00:00
&:last-child {
margin-bottom: 0;
}
.section__heading {
font-size: 2rem;
margin-bottom: 1rem;
}
.section__content {
flex-shrink: 1;
min-height: 0;
overflow: auto;
will-change: transform;
}
}
2020-12-20 14:45:04 +00:00
2020-12-20 16:18:01 +00:00
@media (max-width: 30rem) {
padding-right: 7rem;
}
@media (max-width: 25rem), (max-height: 30rem) {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.5rem;
2020-12-20 14:45:04 +00:00
}
2020-12-20 16:18:01 +00:00
@media (max-width: 25rem) {
2020-12-20 14:45:04 +00:00
padding-right: 6.5rem;
}
@media (max-width: 20rem) {
box-sizing: border-box;
width: 100%;
}
2020-12-01 23:20:38 +00:00
}
2020-11-20 21:44:02 +00:00
</style>