enso-org/enso
1
1
Fork 0
mirror of https://github.com/enso-org/enso.git synced 2024-12-23 10:05:06 +03:00
Code Issues Projects Releases Wiki Activity

Selection widget improvements (#8477)

Browse Source
This commit is contained in:
Michael Mauderer 2023-12-07 13:26:20 +00:00 committed by GitHub
parent 32f68b7ac2
commit 0ec3277695
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue
View File

@ -77,7 +77,6 @@ const selectedLabel = computed(() => {
return tagLabels.value[selectedIndex.value] ?? ''
})
const showDropdownWidget = ref(false)
const showArgumentValue = ref(true)
// When the selected index changes, we update the expression content.
watch(selectedIndex, (_index) => {
@ -107,13 +106,16 @@ export const widgetDefinition = defineWidget([ArgumentPlaceholder, ArgumentAst],
<template>
<div ref="rootElement" class="WidgetRoot">
<span class="WidgetArgumentName" @pointerdown="showDropdownWidget = !showDropdownWidget">
<template v-if="showArgumentValue">
<NodeWidget :input="props.input" /><span class="value"> {{ selectedValue }} </span>
<span
class="SelectionWidgetArgumentValue"
@pointerdown="showDropdownWidget = !showDropdownWidget"
>
<NodeWidget :input="props.input" />
<template v-if="props.input instanceof ArgumentPlaceholder">
<span class="SelectionWidgetArgumentValue"> {{ selectedValue }} </span>
</template>
<template v-else><NodeWidget :input="props.input" /></template>
</span>
<div class="WidgetSingleChoice">
<div class="SelectionWidgetSingleChoice">
<DropdownWidget
v-if="showDropdownWidget"
:color="parentColor ?? 'white'"
@ -125,10 +127,10 @@ export const widgetDefinition = defineWidget([ArgumentPlaceholder, ArgumentAst],
</div>
</template>
<style scoped>
.value {
.SelectionWidgetArgumentValue {
margin-left: 8px;
}
.WidgetSingleChoice {
.SelectionWidgetSingleChoice {
position: absolute;
top: 100%;
margin-top: 4px;