DeforaNetworks/corteza
DeforaNetworks/corteza
3
0
Fork 0
Code

Fix workflow expression type dropdown overflow

Browse Source
This commit is contained in:
Jože Fortun 2023-07-18 17:13:52 +02:00
parent b5d2e5f5f8
commit d6824f90f9
1 changed files with 63 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
client/web/workflow/src/components/ExpressionTable.vue
View File

@ -20,87 +20,93 @@
>
<b-row
class="d-flex justify-content-between align-items-center pointer expr-item"
no-gutters
@click="$set(item, '_showDetails', !item._showDetails)"
>
<b-col
v-for="(field, i) in fields"
:key="i"
class="text-truncate"
:class="{ 'ml-2 pl-3': field.key === 'target', 'mr-3 expr-column': field.key === 'expr' }"
class="text-truncate p-2"
>
<template v-if="field.key === 'expr'">
<div class="d-flex justify-content-between align-items-center">
<div :class="{ 'w-75': item._showDetails}">
<samp>{{ item[field.key] }}</samp>
</div>
</div>
<div
v-if="field.key === 'expr'"
class="d-flex justify-content-between align-items-center"
>
<samp class="text-truncate">{{ item[field.key] }}</samp>
<b-button
v-if="item._showDetails"
variant="outline-danger"
class="position-absolute trash border-0"
size="sm"
class="border-0"
@click="$emit('remove', index)"
>
<font-awesome-icon
:icon="['far', 'trash-alt']"
/>
</b-button>
</template>
</div>
<template v-else>
<var>{{ field.formatter ? field.formatter(item) : item[field.key] }}</var>
</template>
<var
v-else
class=""
>
{{ field.formatter ? field.formatter(item) : item[field.key] }}
</var>
</b-col>
</b-row>
<div
v-if="item._showDetails"
class="mb-3 px-3"
>
<div class="arrow-up" />
<b-card
class="bg-light"
body-class="px-4 pb-3"
<transition name="fade">
<div
v-if="item._showDetails"
class="mb-3 px-3"
>
<b-form-group
label-class="text-primary"
>
<b-form-input
v-model="item.target"
placeholder="Target"
@input="$root.$emit('change-detected')"
/>
</b-form-group>
<div class="arrow-up" />
<b-form-group
label-class="text-primary"
:description="getTypeDescription(item.type)"
<b-card
class="bg-light"
body-class="px-4 pb-3"
>
<vue-select
v-model="item.type"
:options="types"
:get-option-key="getOptionKey"
:clearable="false"
:filter="varFilter"
:calculate-position="calculateDropdownPosition"
@input="$root.$emit('change-detected')"
/>
</b-form-group>
<b-form-group
label-class="text-primary"
>
<b-form-input
v-model="item.target"
placeholder="Target"
@input="$root.$emit('change-detected')"
/>
</b-form-group>
<b-form-group
class="mb-0"
>
<expression-editor
:value.sync="item[valueField]"
lang="javascript"
show-line-numbers
@open="$emit('open-editor', index)"
@input="$root.$emit('change-detected')"
/>
</b-form-group>
</b-card>
</div>
<b-form-group
label-class="text-primary"
:description="getTypeDescription(item.type)"
>
<vue-select
v-model="item.type"
:options="types"
:get-option-key="getOptionKey"
:clearable="false"
:filter="varFilter"
append-to-body
:calculate-position="calculateDropdownPosition"
@input="$root.$emit('change-detected')"
/>
</b-form-group>
<b-form-group
class="mb-0"
>
<expression-editor
:value.sync="item[valueField]"
lang="javascript"
show-line-numbers
@open="$emit('open-editor', index)"
@input="$root.$emit('change-detected')"
/>
</b-form-group>
</b-card>
</div>
</transition>
</div>
</draggable>
</div>
@ -180,8 +186,4 @@ export default {
.expr-item:hover {
background-color: #F3F3F5;
}
.expr-column {
padding: 0.75rem;
}
</style>