Webapp: show placeholder when worker tag has no description

Show a 'click to set a description' placeholder, when a worker tag has
no description. That way it's clear where to click to edit it.
This commit is contained in:
Sybren A. Stüvel 2023-09-04 13:16:08 +02:00
parent 31a5a8dc23
commit 9029ab89eb

View File

@ -35,7 +35,7 @@
<footer class="app-footer"></footer> <footer class="app-footer"></footer>
</template> </template>
<style scoped> <style>
.create-tag-container { .create-tag-container {
width: 100%; width: 100%;
display: flex; display: flex;
@ -47,6 +47,9 @@
margin-right: 10px; margin-right: 10px;
height: 30px; height: 30px;
} }
.placeholder {
color: var(--color-text-hint);
}
</style> </style>
<script> <script>
@ -85,6 +88,13 @@ export default {
field: "description", field: "description",
sorter: "string", sorter: "string",
editor: "input", editor: "input",
formatter(cell) {
const cellValue = cell.getData().description;
if (!cellValue) {
return '<span class="placeholder">click to set a description</span>';
}
return cellValue;
},
}, },
], ],
layout: "fitData", layout: "fitData",