Improve styling of filter reset

This commit is contained in:
Matthias 2022-11-08 06:53:02 +01:00
parent 975bdc4b31
commit 7f0779fd3d

View File

@ -2,10 +2,14 @@
<div> <div>
<div v-if="addNew"> <div v-if="addNew">
<b-form-group label="Add indicator" label-for="indicatorSelector"> <b-form-group label="Add indicator" label-for="indicatorSelector">
<b-input-group> <b-input-group size="sm">
<b-form-input v-model="indicatorFilter" placeholder="Filter indicators"></b-form-input> <b-form-input v-model="indicatorFilter" placeholder="Filter indicators"></b-form-input>
<b-input-group-append> <b-input-group-append>
<b-button @click="indicatorFilter = ''">X</b-button> <Reset
class="pointer align-self-center ml-1"
:size="18"
@click="indicatorFilter = ''"
></Reset>
</b-input-group-append> </b-input-group-append>
</b-input-group> </b-input-group>
<b-form-select <b-form-select
@ -78,11 +82,15 @@
<script lang="ts"> <script lang="ts">
import { ChartType, IndicatorConfig } from '@/types'; import { ChartType, IndicatorConfig } from '@/types';
import randomColor from '@/shared/randomColor'; import randomColor from '@/shared/randomColor';
import Reset from 'vue-material-design-icons/CloseCircleOutline.vue';
import { defineComponent, computed, ref, watch } from 'vue'; import { defineComponent, computed, ref, watch } from 'vue';
export default defineComponent({ export default defineComponent({
name: 'PlotIndicator', name: 'PlotIndicator',
components: {
Reset,
},
props: { props: {
value: { required: true, type: Object as () => Record<string, IndicatorConfig> }, value: { required: true, type: Object as () => Record<string, IndicatorConfig> },
columns: { required: true, type: Array as () => string[] }, columns: { required: true, type: Array as () => string[] },
@ -171,4 +179,7 @@ export default defineComponent({
width: 25px; width: 25px;
vertical-align: center; vertical-align: center;
} }
.pointer {
cursor: pointer;
}
</style> </style>