lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-11-22 19:15:15 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Interactive color selection box on click

Browse Source
This commit is contained in:
Matthias 2023-05-21 20:06:49 +02:00
parent ad82df1b2c
commit 8ba42f30a5
1 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/charts/PlotIndicator.vue
View File

@ -13,9 +13,16 @@
<b-form-group label="Color" label-for="colsel" size="sm" class="ms-xl-1 col"> <b-form-group label="Color" label-for="colsel" size="sm" class="ms-xl-1 col">
<b-input-group> <b-input-group>
<b-input-group-prepend> <b-input-group-prepend>
<div :style="{ 'background-color': selColor }" class="colorbox me-1"></div> <b-form-input
v-model="selColor"
type="color"
size="sm"
class="p-0"
style="max-width: 29px"
></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" class="flex-grow-1">
</b-form-input>
<b-input-group-append> <b-input-group-append>
<b-button variant="primary" size="sm" @click="newColor"> <b-button variant="primary" size="sm" @click="newColor">
<i-mdi-dice-multiple /> <i-mdi-dice-multiple />
@ -39,6 +46,7 @@ import { ChartType, IndicatorConfig } from '@/types';
import randomColor from '@/shared/randomColor'; import randomColor from '@/shared/randomColor';
import PlotIndicatorSelect from '@/components/charts/PlotIndicatorSelect.vue'; import PlotIndicatorSelect from '@/components/charts/PlotIndicatorSelect.vue';
import { computed, ref, watch } from 'vue'; import { computed, ref, watch } from 'vue';
import { watchDebounced } from '@vueuse/core';
const props = defineProps({ const props = defineProps({
modelValue: { required: true, type: Object as () => Record<string, IndicatorConfig> }, modelValue: { required: true, type: Object as () => Record<string, IndicatorConfig> },
@ -94,21 +102,15 @@ watch(
}, },
); );
watch([selColor, graphType, fillTo], () => { watchDebounced(
emitIndicator(); [selColor, graphType, fillTo],
}); () => {
emitIndicator();
},
{
debounce: 200,
},
);
</script> </script>
<style scoped> <style scoped></style>
.colorbox {
border-radius: 50% !important;
margin-top: auto;
margin-bottom: auto;
height: 25px;
width: 25px;
vertical-align: center;
}
.pointer {
cursor: pointer;
}
</style>