feat(timer): Redesign control bar (#280)

components/timer/controls/controlsNew.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { PlayerPlayIcon, PlayerPauseIcon, PlayerStopIcon, PlayerTrackNextIcon } from 'vue-tabler-icons'
+import CButton from '@/components/base/button.vue'
+import { TimerState, useSchedule } from '~~/stores/schedule'
+
+const scheduleStore = useSchedule()
+
+const reset = () => {
+  if (scheduleStore.timerState !== TimerState.COMPLETED && scheduleStore.items[0].timeElapsed > scheduleStore.items[0].length) {
+    scheduleStore.timerState = TimerState.COMPLETED
+  } else {
+    scheduleStore.timerState = TimerState.STOPPED
+  }
+}
+
+const playPause = () => {
+  scheduleStore.timerState = scheduleStore.timerState === TimerState.RUNNING ? TimerState.PAUSED : TimerState.RUNNING
+}
+
+const advance = () => {
+  scheduleStore.timerState = TimerState.STOPPED
+  scheduleStore.advance()
+}
+</script>
+
+<template>
+  <div class="flex items-center justify-center gap-5 md:gap-8">
+    <CButton
+      circle
+      inner-class="p-5"
+      bg-class="bg-themed"
+      :importance="1"
+      class="h-16 transition secondary"
+      :class="{ 'scale-0 opacity-0 pointer-events-none' : !scheduleStore.isRunning }"
+      @click="reset"
+    >
+      <PlayerStopIcon :size="24" />
+    </CButton>
+
+    <CButton inner-class="p-6 px-8 text-white transition dark:text-inherit" bg-class="rounded-full bg-themed" :importance="1" class="play" @click="playPause">
+      <PlayerPlayIcon v-if="scheduleStore.timerState !== TimerState.RUNNING" :size="28" />
+      <PlayerPauseIcon v-else :size="28" />
+    </CButton>
+
+    <CButton
+      circle
+      inner-class="p-5"
+      bg-class="bg-themed"
+      :importance="1"
+      class="h-16 transition secondary"
+      :class="{ 'scale-0 opacity-0 pointer-events-none' : scheduleStore.timerState === TimerState.RUNNING }"
+      @click="advance()"
+    >
+      <PlayerTrackNextIcon :size="24" />
+    </CButton>
+  </div>
+</template>
+
+<style scoped>
+.play {
+  --theme: 21 21 21;
+}
+
+.dark .play {
+  --theme: 220 220 220;
+
+  color: black;
+}
+
+.secondary {
+  --theme: 114 247 152;
+}
+
+.dark .secondary {
+  --theme: 28 107 50;
+}
+</style>

pages/timer.vue

@@ -42,9 +42,8 @@
         class="flex-grow"
         @tick="timeString = $event"
       />
-      <div class="relative flex flex-row items-center justify-center w-full gap-2 mb-4">
-        <TimerControls :class="[{ 'pointer-events-none': preview }]" :can-use-keyboard="!preview && !showSettings" />
-      </div>
+
+      <TimerControls class="mb-8" />
     </div>
     <client-only>
       <TutorialView />
@@ -54,7 +53,7 @@
 
 <script>
 import { mapStores } from 'pinia'
-import { SettingsIcon, ListCheckIcon } from 'vue-tabler-icons'
+// import { SettingsIcon, ListCheckIcon } from 'vue-tabler-icons'
 import { defineAsyncComponent } from 'vue'
 import { useHead } from '#app'
 import { useSchedule } from '~~/stores/schedule'
@@ -69,7 +68,7 @@ import { useMobile } from '~~/platforms/mobile'
 import TimerSwitch from '@/components/timer/display/_timerSwitch.vue'
 import Button from '@/components/base/button.vue'
 import TimerProgress from '@/components/timer/timerProgress.vue'
-import TimerControls from '@/components/timer/controls/contolsBasic.vue'
+import TimerControls from '@/components/timer/controls/controlsNew.vue'
 import { AppPlatform } from '~~/platforms/platforms'
 
 import { useMobileSettings } from '~~/stores/platforms/mobileSettings'
@@ -80,14 +79,14 @@ export default {
     // lazy-loaded components
     AppBar: defineAsyncComponent(() => import('@/components/appBar.vue')),
     SettingsPanel: defineAsyncComponent(() => import('@/components/settings/settingsPanel.vue')),
-    TodoList: defineAsyncComponent(() => import('@/components/todoList/main.vue')),
+    // TodoList: defineAsyncComponent(() => import('@/components/todoList/main.vue')),
     TutorialView: defineAsyncComponent(() => import('@/components/tutorial/_tutorialView.vue')),
     UiOverlay: defineAsyncComponent(() => import('@/components/base/overlay.vue')),
     TimerControls,
     TimerProgress,
     TimerSwitch,
-    CogIcon: SettingsIcon,
-    ListCheckIcon,
+    // CogIcon: SettingsIcon,
+    // ListCheckIcon,
     Button
   },