feat(ui): improved placeholder panes

Akryum · Jan 21, 2022 · 186e345 · 186e345
1 parent 6c9a56a
commit 186e345
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 3 deletions.
diff --git a/packages/peeky-client/src/features/BaseButton.vue b/packages/peeky-client/src/features/BaseButton.vue
@@ -3,8 +3,8 @@ import { computed, defineComponent } from 'vue'
 
 const colors = {
   gray: [
-    'hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-700 dark:hover:text-gray-100',
-    'bg-gray-300 text-gray-900 dark:bg-gray-800 dark:text-gray-100',
+    'hover:bg-gray-300 hover:text-black dark:hover:bg-gray-700 dark:hover:text-gray-100',
+    'bg-gray-200 text-gray-900 dark:bg-gray-800 dark:text-gray-100',
   ],
   primary: [
     'hover:bg-primary-200 hover:text-primary-900 dark:hover:bg-primary-700 dark:hover:text-primary-100',

diff --git a/packages/peeky-client/src/features/test/TestOutput.vue b/packages/peeky-client/src/features/test/TestOutput.vue
@@ -4,6 +4,7 @@ import { useQuery, useResult } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { useRoute } from 'vue-router'
 import { defineProps, onMounted, ref, watch } from 'vue'
+import { TerminalIcon } from '@zhuowenli/vue-feather-icons'
 import TerminalView from '../terminal/TerminalView.vue'
 
 const route = useRoute()
@@ -60,8 +61,19 @@ onMounted(async () => {
 </script>
 
 <template>
+  <div
+    v-if="!logs.length"
+    class="h-full flex flex-col items-center justify-center space-y-4"
+  >
+    <TerminalIcon class="w-24 h-24 text-primary-500 bg-primary-100 dark:bg-primary-900 rounded-full p-4" />
+    <div class="text-3xl opacity-50">
+      No logs yet
+    </div>
+    <div>Console output will appear here.</div>
+  </div>
+
   <TerminalView
-    v-if="fontsLoaded"
+    v-else-if="fontsLoaded"
     :logs="logs"
     class="w-full h-full"
   />

diff --git a/packages/peeky-client/src/features/test/TestResult.vue b/packages/peeky-client/src/features/test/TestResult.vue
@@ -62,6 +62,14 @@ function onStackClick (event: MouseEvent) {
 const showFullStack = ref(false)
 
 const diffShown = computed(() => props.test?.error?.actual && props.test?.error?.expected)
+
+const texts = {
+  success: ['Success', 'This test succesfully passed.'],
+  idle: ['Idle', ''],
+  in_progress: ['In progress', 'This test is being run.'],
+  skipped: ['Skipped', 'This test was skipped.'],
+  todo: ['Todo', 'This test is marked as todo.'],
+}
 </script>
 
 <template>
@@ -76,6 +84,10 @@ const diffShown = computed(() => props.test?.error?.actual && props.test?.error?
         icon-class="w-24 h-24 p-4"
         bg
       />
+      <div class="text-3xl opacity-50">
+        {{ texts[test.status][0] }}
+      </div>
+      <div>{{ texts[test.status][1] }}</div>
 
       <BaseButton
         v-if="test.status === 'todo'"

diff --git a/packages/peeky-client/src/features/test/TestSnapshots.vue b/packages/peeky-client/src/features/test/TestSnapshots.vue
@@ -4,6 +4,7 @@ import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { useRoute, useRouter } from 'vue-router'
 import { computed, defineProps, watch } from 'vue'
+import { CameraIcon } from '@zhuowenli/vue-feather-icons'
 
 import BaseSplitPane from '../BaseSplitPane.vue'
 import SnapshotItem from '../snapshot/SnapshotItem.vue'
@@ -92,7 +93,27 @@ function selectNext () {
 </script>
 
 <template>
+  <div
+    v-if="!snapshots.length"
+    class="h-full flex flex-col items-center justify-center space-y-4"
+  >
+    <div class="w-24 h-24 text-primary-500 bg-primary-100 dark:bg-primary-900 rounded-full p-4">
+      <CameraIcon class="w-full h-full" />
+    </div>
+    <div class="text-3xl opacity-50">
+      No snapshots yet
+    </div>
+    <div>
+      Text snapshots will appear here. <a
+        href="https://peeky.dev/guide/writing-tests.html#text-snapshots"
+        target="_blank"
+        class="text-primary-500"
+      >Learn more</a>
+    </div>
+  </div>
+
   <BaseSplitPane
+    v-else
     :default-split="30"
     :min="5"
     :max="70"