dexorder/web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

welcome dialog; order UI facelift

Browse Source
This commit is contained in:
tim
2025-04-09 20:57:29 -04:00
parent 94c7b6ddb4
commit 556554fbf3
34 changed files with 395 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/chart/RungBuilder.vue
View File

@@ -1,20 +1,28 @@
<template>
<builder-panel :order="order" :builder="builder" :build-tranches="buildTranches"
:adjust-shapes="adjustShapes" :delete-shapes="deleteShapes">
:adjust-shapes="adjustShapes" :delete-shapes="deleteShapes" :name="name">
<div style="min-width: 4em; font-size: larger" :style="colorStyle"
class="d-flex flex-column align-self-start ml-2">
class="d-flex flex-column">
<!--
<div class="flex-row align-items-center">
<v-btn variant="outlined" style="width: 8em"
@click="()=>{if (props.builder.breakout!==undefined) props.builder.breakout=!props.builder.breakout}">{{ name }}</v-btn>
<div class="description w-100 text-center">{{description}}</div>
</div>
-->
<v-text-field type="number" v-model="rungs"
density="compact" hide-details class="mx-1 my-2" variant="outlined"
label="Rungs"
:color="color" :base-color="color" min="1" :max="MAX_RUNGS"
:color="color"
min="1" :max="MAX_RUNGS"
:disabled="rungsDisabled"
style="width: 6.6em;"
style="width: 6.6em; max-height: 2.5em; height: 2.5em"
/>
<v-switch v-model="builder.breakout" label="Breakout" persistent-hint :color="color" hide-details/>
<div class="mx-auto"><span style="font-size: .7em; vertical-align: top"
:style="builder.breakout?{color:color}:null">
{{description}}
</span></div>
</div>
<slot/>
@@ -23,15 +31,15 @@
<v-icon icon="mdi-chat-alert-outline" color="grey" class="mr-1"/>
Click the chart!
</div>
<div v-if="rungs>1" class="mx-2 d-flex align-start">
<div v-if="rungs>1" class="mx-2 d-flex justify-start">
<div class="d-flex align-center mt-2">
<v-slider v-if="rungs>1" :direction="orientation?'vertical':'horizontal'" min="-100" max="100" v-model="skew100"
<v-slider v-if="rungs>1" :direction="orientation?'vertical':'horizontal'" min="-100" max="100" v-model="balance100"
class="no-slider-bg ml-2 mr-4" hide-details/>
<v-text-field type="number" v-model="skew100" min="-100" max="100"
density="compact" hide-details variant="outlined" label="Skew" step="5"
:color="color" :base-color="color" class="skew">
<v-text-field type="number" v-model="balance100" min="-100" max="100"
density="compact" hide-details variant="outlined" label="Balance" step="5"
class="balance">
<template v-slot:prepend>
<v-btn icon="mdi-scale-balance" variant="plain" @click="builder.skew=0" :color="color"/>
<v-btn icon="mdi-scale-balance" variant="plain" @click="builder.balance=0"/>
</template>
</v-text-field>
</div>
@@ -70,7 +78,7 @@ const props = defineProps({
stdWidth: [Number, Array],
shape: Function, // shape() -> Shape
mode: { type: Number, default: 0 }, // rung addition mode: 0 = split, 1 = extend
flip: { type: Boolean, default: false }, // if true, the skew slider is flipped upside-down
flip: { type: Boolean, default: false }, // if true, the balance slider is flipped upside-down
orientation: { type: Number, default: 1 }, // 0 = horizontal slider, 1 = vertical
// values may be scalars or vector arrays
getModelValue: Function, // getModelValue(model) -> value
@@ -82,9 +90,9 @@ const props = defineProps({
const flippedSign = computed(()=>props.flip?-1:1)
const skew100 = computed( {
get() {return flippedSign.value*props.builder.skew*100},
set(v) {props.builder.skew = flippedSign.value*v/100; }
const balance100 = computed( {
get() {return flippedSign.value*props.builder.balance*100},
set(v) {props.builder.balance = flippedSign.value*v/100; }
} )
// validity checks
@@ -194,14 +202,14 @@ const values = computed(()=>{
const weights = computed(() => {
// const skew = props.flip ? -props.builder.skew : props.builder.skew
// const balance = props.flip ? -props.builder.balance : props.builder.balance
const most = 0.998
let skew = -props.builder.skew
if (skew <= -1)
skew = -most
else if (skew >= 1)
skew = most
const ws = linearWeights(props.builder.rungs, skew)
let balance = -props.builder.balance
if (balance <= -1)
balance = -most
else if (balance >= 1)
balance = most
const ws = linearWeights(props.builder.rungs, balance)
if (props.setWeights)
props.setWeights(ws)
return ws
@@ -228,7 +236,8 @@ const color = computed({
}
})
const colorStyle = computed(() => {
return {'color': color.value}
// return {'color': color.value}
return {}
})
@@ -428,7 +437,7 @@ if (!endpoints.value[0])
:deep(.v-slider.no-slider-bg .v-slider-track__fill) {
background-color: inherit !important;
}
.skew {
.balance {
min-width: 9em;
max-width: 12em;
}