rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add task status messages to collapsed log, give summary more space

Browse source
This commit is contained in:
Joe Knapper 2026-06-18 12:59:41 +01:00
parent 3c64c00b74
commit 816dad79fa
1 changed files with 12 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

19
webapp/src/components/labThingsComponents/actionLogDisplay.vue
View file

@ -2,7 +2,6 @@
<div class="action-log-display"> <div class="action-log-display">
<!-- Toggle button --> <!-- Toggle button -->
<button <button
v-if="log.length"
class="log-toggle" class="log-toggle"
:title="isCollapsed ? 'Show full log' : 'Hide full log'" :title="isCollapsed ? 'Show full log' : 'Hide full log'"
:aria-label="isCollapsed ? 'Show full log' : 'Hide full log'" :aria-label="isCollapsed ? 'Show full log' : 'Hide full log'"
@ -15,9 +14,15 @@
<!-- Header always shows latest message--> <!-- Header always shows latest message-->
<div class="log-summary"> <div class="log-summary">
<span v-if="latestMessage"> <div v-if="latestMessage">
{{ latestMessage }} {{ latestMessage }}
</span> </div>
<div v-else-if="taskStatus === 'error'">
<p>The task failed due to an error:</p>
<p>{{ errorMessage }}</p>
</div>
<div v-else-if="taskStatus == 'cancelled'">The task was cancelled.</div>
<div v-else-if="taskStatus == 'completed'">The task completed successfully.</div>
</div> </div>
<!-- Expanded view shows log --> <!-- Expanded view shows log -->
@ -175,8 +180,8 @@ export default {
} }
.log-summary { .log-summary {
padding: 0.6em; padding: 2px;
padding-right: 2.5em; /* reserve room for the toggle button, prevents overlap */ padding-right: 30px; /* reserve room for the toggle button, prevents overlap */
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -215,8 +220,8 @@ export default {
/* Toggle button */ /* Toggle button */
.log-toggle { .log-toggle {
position: absolute; position: absolute;
top: 6px; top: 0;
right: 6px; right: 2px;
background: transparent; background: transparent;
border: none; border: none;
padding: 4px; padding: 4px;