better space manageemnt

This commit is contained in:
Julien Calixte
2023-05-20 12:54:44 +02:00
parent 0681cbd1e4
commit 12cbbd46e0

View File

@@ -109,52 +109,54 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<div class="record-controls buttons has-addons"> <div class="columns record-controls">
<template v-if="record && record.currentStepId"> <div class="column buttons has-addons">
<button <template v-if="record && record.currentStepId">
class="button is-primary is-light" <button
v-if="record.breakTime" class="button is-primary is-light"
@click="recordStore.resume(taskId)" v-if="record.breakTime"
> @click="recordStore.resume(taskId)"
<img src="/icons/start.svg" alt="resume" /> >
</button> <img src="/icons/start.svg" alt="resume" />
<button </button>
class="button is-primary is-light" <button
v-else class="button is-primary is-light"
@click="recordStore.pause(taskId)" v-else
> @click="recordStore.pause(taskId)"
<img src="/icons/pause.svg" alt="pause" /> >
</button> <img src="/icons/pause.svg" alt="pause" />
</template> </button>
</template>
<template v-if="!record || !record.end"> <template v-if="!record || !record.end">
<button <button
v-if="canStart" v-if="canStart"
@click="startRecording" @click="startRecording"
class="button is-primary is-light" class="button is-primary is-light"
> >
<img src="/icons/start.svg" alt="start" /> <img src="/icons/start.svg" alt="start" />
</button> </button>
<button <button
class="button is-primary is-light" class="button is-primary is-light"
v-else-if="!record?.breakTime" v-else-if="!record?.breakTime"
@click="nextStep" @click="nextStep"
> >
<img src="/icons/next.svg" alt="next" /> <img src="/icons/next.svg" alt="next" />
</button> </button>
</template> </template>
<button <button
v-if="hasStarted" v-if="hasStarted"
class="button is-warning" class="button is-warning"
@click="recordStore.reset(taskId)" @click="recordStore.reset(taskId)"
> >
<img src="/icons/recycle.svg" alt="reset" /> <img src="/icons/recycle.svg" alt="reset" />
</button> </button>
</div> </div>
<div class="message"> <div class="column message">
<p><kbd>s</kbd>: start record</p> <p><kbd>s</kbd>: start record</p>
<p><kbd>n</kbd>: next step</p> <p><kbd>n</kbd>: next step</p>
<p><kbd>p</kbd>: pause</p> <p><kbd>p</kbd>: pause</p>
</div>
</div> </div>
</template> </template>