imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Custom select + styling toolbar

Browse Source
This commit is contained in:
Colin Kallemein 2024-06-13 23:31:11 +02:00
parent a308696cf2
commit be766cda59
2 changed files with 109 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/assets/icons/zoneEditor/chevron.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 9.5L12 14.5L7 9.5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 325 B

114
src/components/utilities/zoneEditor/Toolbar.vue
View File

@ -2,11 +2,13 @@
<div class="wrapper">
<div class="toolbar">
<div class="tools">
<button :class="{ active: zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
<button class="tool move" :class="{ active: zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
<img src="/assets/icons/zoneEditor/move.svg" alt="Move camera" />
</button>
<div class="divider"></div>
<button :class="{ active: zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
<button class="tool pencil" :class="{ active: zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
<img src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" />
<select v-model="drawMode" v-if="zoneEditorStore.tool === 'pencil'">
<option value="tile" :selected="zoneEditorStore.drawMode === 'tile'">tile</option>
@ -15,23 +17,53 @@
<option value="teleport" :selected="zoneEditorStore.drawMode === 'teleport'">teleport</option>
<option value="blocking_tile" :selected="zoneEditorStore.drawMode === 'blocking_tile'">blocking tile</option>
</select>
<div class="select" v-if="zoneEditorStore.tool === 'pencil'">
<div class="select-trigger" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen">
{{ zoneEditorStore.drawMode }}
<img src="/assets/icons/zoneEditor/chevron.svg"/>
</div>
<div class="options" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
<span class="option" data-value="tile">Tile</span>
<span class="option" data-value="wall">Wall</span>
<span class="option" data-value="decoration">Decoration</span>
<span class="option" data-value="teleport">Teleport</span>
<span class="option" data-value="blocking_tile">Blocking tile</span>
</div>
</div>
</button>
<div class="divider"></div>
<button :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
<button class="tool eraser" :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
<img src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" />
<select v-model="drawMode" v-if="zoneEditorStore.tool === 'eraser'">
<select v-model="drawMode" v-if="zoneEditorStore.tool === 'pencil'">
<option value="tile" :selected="zoneEditorStore.drawMode === 'tile'">tile</option>
<option value="wall" :selected="zoneEditorStore.drawMode === 'wall'">wall</option>
<option value="decoration" :selected="zoneEditorStore.drawMode === 'decoration'">decoration</option>
<option value="teleport" :selected="zoneEditorStore.drawMode === 'teleport'">teleport</option>
<option value="blocking_tile" :selected="zoneEditorStore.drawMode === 'blocking_tile'">blocking tile</option>
</select>
<div class="select" v-if="zoneEditorStore.tool === 'eraser'">
<div class="select-trigger" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen">
{{ zoneEditorStore.drawMode }}
<img src="/assets/icons/zoneEditor/chevron.svg"/>
</div>
<div class="options" v-show="selectEraserOpen">
<span class="option" data-value="tile">Tile</span>
<span class="option" data-value="wall">Wall</span>
<span class="option" data-value="decoration">Decoration</span>
<span class="option" data-value="teleport">Teleport</span>
<span class="option" data-value="blocking_tile">Blocking tile</span>
</div>
</div>
</button>
<div class="divider"></div>
<button @click="() => zoneEditorStore.toggleSettingsModal()">
<button class="tool settings" @click="() => zoneEditorStore.toggleSettingsModal()">
<img src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" />
</button>
</div>
<div class="buttons">
<button class="btn-cyan">Load</button>
<button class="btn-cyan" @click="() => emit('save')">Save</button>
@ -58,6 +90,11 @@ const props = defineProps({
const scene = useScene()
const emit = defineEmits(['move', 'eraser', 'pencil', 'save'])
// track select state
let selectPencilOpen = ref(false);
let selectEraserOpen = ref(false);
// drawMode
const drawMode = ref('tile')
@ -119,12 +156,11 @@ function clear() {
position: fixed;
top: 20px;
border-radius: 5px;
opacity: 0.8;
display: flex;
background: $dark-gray;
background: rgba($dark-gray, 0.8);
border: 2px solid $cyan;
color: $light-gray;
padding: 5px;
padding: 5px 5px 5px 10px;
min-width: 90%;
height: 40px;
@ -138,13 +174,73 @@ function clear() {
}
// vertical center
button {
.tool {
display: flex;
justify-content: center;
align-items: center;
min-width: 40px;
padding: 0;
select {
display: none;
}
&.active {
border-bottom: 3px solid $light-cyan;
gap: 10px;
}
.select {
position: relative;
.select-trigger {
text-transform: capitalize;
display: flex;
gap: 15px;
img {
transform: rotate(0);
transition: ease-in-out 0.2s;
}
&.open {
img {
transform: rotate(180deg);
}
}
}
.options {
display: flex;
flex-direction: column;
position: absolute;
top: calc(100% + 20px);
left: 50%;
transform: translateX(-50%);
background: rgba($dark-gray, 0.8);
border-radius: 5px;
min-width: 100px;
border: 1px solid $cyan;
text-align: left;
.option {
padding: 8px 10px;
position: relative;
&:hover {
background-color: rgba($cyan, 0.5);
}
&::after {
content: '';
position: absolute;
width: 80%;
left: 50%;
transform: translateX(-50%);
bottom: 0;
height: 1px;
background-color: $cyan;
}
&:last-child::after {
display: none;
}
}
}
}
}