117 lines
3.6 KiB
Vue
117 lines
3.6 KiB
Vue
<template>
|
|
<div class="toolbox">
|
|
<div class="main-row">
|
|
<icon
|
|
class="toolbox-button"
|
|
icon-name="lh"
|
|
:class="{ active: selectedTool === 'track-unit-type' }"
|
|
@click="selectedTool = 'track-unit-type'" />
|
|
<icon
|
|
class="toolbox-button"
|
|
icon-name="lf"
|
|
:class="{ active: selectedTool === 'sticking' }"
|
|
@click="selectedTool = 'sticking'" />
|
|
<icon
|
|
class="toolbox-button"
|
|
:class="{ active: selectedTool === 'eraser' }"
|
|
@click="selectedTool = 'eraser'" />
|
|
</div>
|
|
<div v-if="selectedTool === 'track-unit-type'" class="details">
|
|
<div v-for="(type, i) in TrackUnitTypeList"
|
|
:key="type"
|
|
class="toolbox-button"
|
|
:class="{ active: i === activeTrackUnitType }"
|
|
@click="activeTrackUnitType = i">
|
|
<div :class="getClasses({ on: true, type, stickingType: 'none' })" />
|
|
</div>
|
|
</div>
|
|
<div v-else-if="selectedTool === 'sticking'" class="details">
|
|
<div v-for="(stickingType, i) in TrackUnitStickingTypeList.slice(1)"
|
|
:key="stickingType"
|
|
class="toolbox-button"
|
|
:class="{ active: i + 1 === activeStickingType }"
|
|
@click="activeStickingType = i + 1">
|
|
<icon :icon-name="StickingTypeIconMap[stickingType]" />
|
|
</div>
|
|
</div>
|
|
<div v-else-if="selectedTool === 'eraser'" class="details hidden" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useAppStateStore } from "@/AppState";
|
|
import { TrackUnitStickingTypeList, TrackUnitTypeList } from "@/Track";
|
|
import { StickingTypeIconMap } from "@/ui/TrackUnit/trackUnit";
|
|
import Icon from "@/ui/Widgets/Icon/Icon.vue";
|
|
import { getClasses } from "@/ui/TrackUnit/trackUnit";
|
|
|
|
const {
|
|
selectedTool,
|
|
activeTrackUnitType,
|
|
activeStickingType
|
|
} = useAppStateStore();
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.toolbox {
|
|
.main-row {
|
|
margin: auto;
|
|
display: flex;
|
|
background-color: var(--color-ui-neutral-dark);
|
|
justify-content: center;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.details {
|
|
margin: auto;
|
|
height: 4em;
|
|
width: min-content;
|
|
border-radius: 0 0 1em 1em;
|
|
padding: 0.5em;
|
|
background-color: var(--color-ui-neutral-dark-active);
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
&.hidden {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.track-unit {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.toolbox-button {
|
|
padding: 0.5em;
|
|
cursor: pointer;
|
|
color: black;
|
|
background-color: var(--color-ui-neutral-dark);
|
|
|
|
&:hover {
|
|
background-color: var(--color-ui-neutral-dark-hover);
|
|
}
|
|
|
|
&.active {
|
|
background-color: var(--color-ui-neutral-dark-active);
|
|
}
|
|
}
|
|
|
|
.details {
|
|
.toolbox-button {
|
|
background-color: var(--color-ui-neutral-dark-active);
|
|
|
|
&.active {
|
|
background-color: var(--color-ui-neutral-dark);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--color-ui-neutral-dark-hover);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|