style

src/components/chart/ChartOrder.vue

@@ -4,10 +4,8 @@
   <!--    <div v-for="b in co.builderList">{{JSON.stringify(b)}}</div>-->
     <div class="overflow-y-auto">
         <template v-for="b in co.builderList">
-          <v-divider/>
           <builder :builder="b"/>
         </template>
-        <v-divider/>
     </div>
   </div>
 </template>

src/components/chart/LimitBuilder.vue

@@ -1,9 +1,13 @@
 <template>
   <!-- todo extract builder-panel --> <!-- :builder="builder" color-tag="limit" -->
   <v-card flat rounded="0">
-    <v-toolbar dense :color="color">
+    <v-toolbar dense :color="faintColor">
+      <span :style="colorStyle" style="width:1em;height:100%">&nbsp;</span>
       <v-toolbar-title>Limit</v-toolbar-title>
-      <v-text-field type="number" v-model="price" density="compact" hide-details single-line class="justify-self-start"/>
+      <v-text-field type="number" v-model="price"
+                    density="compact" hide-details single-line class="justify-self-start" variant="outlined"
+                    :color="color" :base-color="color"
+      />
       <v-menu>
         <template v-slot:activator="{ props }">
           <v-btn variant="plain" v-bind="props" icon="mdi-dots-vertical"/>
@@ -22,22 +26,23 @@
 </template>
 
 <script setup>
-import BuilderPanel from "@/components/chart/BuilderPanel.vue";
 import {computed, ref} from "vue";
-import {prototype} from "@/blockchain/common.js";
-import {builderShape, cancelDrawing, chart, crosshairPoint, setPoints, ShapeType, VerboseCallback} from "@/chart.js";
+import {builderShape, chart, setPoints, ShapeType} from "@/chart.js";
 import {useChartOrderStore} from "@/orderbuild.js";
 import {timestamp} from "@/misc.js";
+import Color from "color";
 
 const co = useChartOrderStore()
 const props = defineProps(['builder'])
 
-let updating = false
 
 const color = computed(()=>{
   // todo saturate the color when the corresponding shape is selected https://github.com/Qix-/color
   return props.builder.props.limit?.linecolor
 })
+const faintColor = computed(()=>new Color(color.value).hsl().lightness(97).string())
+const colorStyle = computed(()=>{return {'background-color':color.value}})
+
 
 const price = computed({
   get() {return props.builder.limit},
@@ -48,9 +53,7 @@ const price = computed({
     if( drawingShapeId ) {
       const shapeId = props.builder.shapes.limit;
       console.log('adjust shape', shapeId)
-      updating = true
       setPoints(shapeId, [{time: timestamp(), price:p}])
-      updating = false
     }
   }
 })