Improve plotIndicator config

This commit is contained in:
Matthias 2023-05-06 08:37:48 +02:00
parent dc85902350
commit 54eaec1192

View File

@ -21,23 +21,22 @@
</b-form-select> </b-form-select>
</b-form-group> </b-form-group>
</div> </div>
<div class="d-xl-flex flex-row flex-grow-1 justify-content-between mt-1">
<b-form-group label="Type" label-for="plotTypeSelector"> <b-form-group class="" label="Type" label-for="plotTypeSelector">
<b-form-select <b-form-select
id="plotTypeSelector" id="plotTypeSelector"
v-model="graphType" v-model="graphType"
size="sm" size="sm"
:options="availableGraphTypes" :options="availableGraphTypes"
@change="emitIndicator()" @change="emitIndicator()"
> >
</b-form-select> </b-form-select>
</b-form-group> </b-form-group>
<hr /> <b-form-group label="Color" label-for="colsel" size="sm" class="ms-xl-1 flex-shrink-1">
<b-form-group label="Color" label-for="colsel" size="sm"> <b-input-group>
<b-input-group> <b-input-group-prepend>
<b-input-group-prepend> <div :style="{ 'background-color': selColor }" class="colorbox me-1"></div>
<div :style="{ 'background-color': selColor }" class="colorbox me-2"></div> <!-- <b-form-input
<!-- <b-form-input
id="colsel" id="colsel"
v-model="selColor" v-model="selColor"
size="sm" size="sm"
@ -46,15 +45,16 @@
:style="{ 'background-color': selColor }" :style="{ 'background-color': selColor }"
> >
</b-form-input> --> </b-form-input> -->
</b-input-group-prepend> </b-input-group-prepend>
<b-form-input id="colsel" v-model="selColor" size="sm"> </b-form-input> <b-form-input id="colsel" v-model="selColor" size="sm"> </b-form-input>
<b-input-group-append> <b-input-group-append>
<b-button variant="primary" size="sm" @click="newColor">&#x21bb;</b-button> <b-button variant="primary" size="sm" @click="newColor">&#x21bb;</b-button>
</b-input-group-append> </b-input-group-append>
</b-input-group> </b-input-group>
</b-form-group> </b-form-group>
<div class="d-flex d-flex-columns"> </div>
<div class="d-flex flex-row mt-2">
<b-button <b-button
v-if="addNew" v-if="addNew"
class="flex-grow-1" class="flex-grow-1"
@ -105,9 +105,9 @@ const filteredIndicators = computed(() => {
); );
}); });
const newColor = () => { function newColor() {
selColor.value = randomColor(); selColor.value = randomColor();
}; }
const combinedIndicator = computed(() => { const combinedIndicator = computed(() => {
if (cancelled.value || !selAvailableIndicator.value) { if (cancelled.value || !selAvailableIndicator.value) {
@ -120,14 +120,14 @@ const combinedIndicator = computed(() => {
}, },
}; };
}); });
const emitIndicator = () => { function emitIndicator() {
emit('update:modelValue', combinedIndicator.value); emit('update:modelValue', combinedIndicator.value);
}; }
const clickCancel = () => { function clickCancel() {
cancelled.value = true; cancelled.value = true;
emitIndicator(); emitIndicator();
}; }
watch( watch(
() => props.modelValue, () => props.modelValue,
@ -150,7 +150,7 @@ watch(selColor, () => {
<style scoped> <style scoped>
.colorbox { .colorbox {
border-radius: 50%; border-radius: 50% !important;
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
height: 25px; height: 25px;