💄 Improve display of output- and execution-selection

This commit is contained in:
Jan Oberhauser 2019-06-27 14:07:45 +02:00
parent bbab4fc6e1
commit 3d80d9602e

View file

@ -32,20 +32,18 @@
</el-popover> </el-popover>
<span v-if="maxOutputIndex > 0"> <span v-if="maxOutputIndex > 0">
| Output: | Output:
<select v-model="outputIndex" @click.stop> <el-select v-model="outputIndex" @click.stop>
<option v-for="option in (maxOutputIndex + 1)" :value="option -1" :key="option"> <el-option v-for="option in (maxOutputIndex + 1)" :label="getOutputName(option-1)" :value="option -1" :key="option">
{{ getOutputName(option-1) }} </el-option>
</option> </el-select>
</select>
</span> </span>
<span v-if="maxRunIndex > 0"> <span v-if="maxRunIndex > 0">
| Data of Execution: | Data of Execution:
<select v-model="runIndex" @click.stop> <el-select v-model="runIndex" @click.stop>
<option v-for="option in (maxRunIndex + 1)" :value="option-1" :key="option"> <el-option v-for="option in (maxRunIndex + 1)" :label="option + '/' + (maxRunIndex+1)" :value="option-1" :key="option">
{{ option }} </el-option>
</option> </el-select>
</select>
/{{maxRunIndex+1}}
</span> </span>
</div> </div>
<div v-if="node && workflowRunData !== null && workflowRunData.hasOwnProperty(node.name) && !workflowRunData[node.name][runIndex].error" class="title-data-display-selector" @click.stop> <div v-if="node && workflowRunData !== null && workflowRunData.hasOwnProperty(node.name) && !workflowRunData[node.name][runIndex].error" class="title-data-display-selector" @click.stop>
@ -585,7 +583,7 @@ export default mixins(
top: 10px; top: 10px;
right: 10px; right: 10px;
height: 30px; height: 30px;
width: 130px; width: 140px;
padding: 7px; padding: 7px;
border-radius: 13px; border-radius: 13px;
color: $--color-primary; color: $--color-primary;
@ -622,6 +620,24 @@ export default mixins(
font-weight: bold; font-weight: bold;
} }
} }
.el-select {
width: 80px;
z-index: 1;
.el-input__suffix-inner {
// TODO: Not sure why I have to do that. Invesigate when I have some time
position: absolute;
top: -5px;
right: 0;
}
input.el-input__inner {
border: 1px solid $--color-primary;
height: 25px;
line-height: 25px;
}
}
} }
} }