djledda/arne-drums
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
Daniel Ledda
2023-05-07 11:17:14 +02:00
parent f20106207c
commit a1bc636c11
6 changed files with 911 additions and 575 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/ui/Root/Toolbox.vue
View File

@@ -1,24 +1,20 @@
<template>
<div class="root-toolbox">
<div class="toolbox">
<div class="main-row">
<div
<icon
class="toolbox-button"
icon-name="lh"
:class="{ active: selectedTool === 'track-unit-type' }"
@click="selectedTool = 'track-unit-type'">
Track Type
</div>
<div
@click="selectedTool = 'track-unit-type'" />
<icon
class="toolbox-button"
icon-name="lf"
:class="{ active: selectedTool === 'sticking' }"
@click="selectedTool = 'sticking'">
Sticking
</div>
<div
@click="selectedTool = 'sticking'" />
<icon
class="toolbox-button"
:class="{ active: selectedTool === 'eraser' }"
@click="selectedTool = 'eraser'">
Eraser
</div>
@click="selectedTool = 'eraser'" />
</div>
<div v-if="selectedTool === 'track-unit-type'" class="details">
<div v-for="(type, i) in TrackUnitTypeList"
@@ -57,58 +53,64 @@
</script>
<style scoped lang="scss">
.root-toolbox { }
.toolbox {
.main-row {
margin: auto;
display: flex;
background-color: var(--color-ui-neutral-dark);
justify-content: center;
width: 100%;
flex-direction: column;
}
.root-toolbox .main-row {
height: 2.5em;
margin: auto;
display: flex;
background-color: var(--color-ui-neutral-dark);
justify-content: center;
width: 100%;
}
.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;
.root-toolbox .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;
}
}
.root-toolbox .details.hidden {
visibility: hidden;
}
.track-unit {
margin: 0;
padding: 0;
}
.root-toolbox .track-unit {
margin: 0;
padding: 0;
}
.toolbox-button {
padding: 0.5em;
cursor: pointer;
color: black;
background-color: var(--color-ui-neutral-dark);
.root-toolbox .toolbox-button {
padding: 0.5em;
cursor: pointer;
color: black;
background-color: var(--color-ui-neutral-dark);
}
.root-toolbox .toolbox-button:hover {
background-color: var(--color-ui-neutral-dark-hover);
}
.root-toolbox .toolbox-button.active {
background-color: var(--color-ui-neutral-dark-active);
}
&:hover {
background-color: var(--color-ui-neutral-dark-hover);
}
.root-toolbox .details .toolbox-button.active {
background-color: var(--color-ui-neutral-dark);
}
.root-toolbox .details .toolbox-button:hover {
background-color: var(--color-ui-neutral-dark-hover);
}
.root-toolbox .details .toolbox-button {
background-color: var(--color-ui-neutral-dark-active);
&.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>