Add status bar

Author: xingrz

package-lock.json

@@ -23,6 +23,7 @@
     "@types/md5": "^2.3.2",
     "@types/qs": "^6.9.14",
     "@typescript-eslint/eslint-plugin": "^8.46.0",
+    "@vicons/ionicons5": "^0.13.0",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/tsconfig": "^0.8.1",

package.json

@@ -1,20 +1,31 @@
 <template>
   <n-config-provider>
-    <n-split direction="horizontal" :resize-trigger-size="8" v-model:size="width">
-      <template #1>
-        <editor v-model:content="editorStore.content" v-model:selection="editorStore.selection"
-          v-model:scroll="editorStore.scroll" :icons="iconStore.icons" :size="editorStore.size" />
-      </template>
-      <template #2>
-        <scroller v-model:scroll="editorStore.scroll">
-          <BSMap :map="ast" :size="editorStore.size" />
-        </scroller>
-      </template>
-      <template #resize-trigger>
-        <div :class="$style.resizer">
-        </div>
-      </template>
-    </n-split>
+    <div :class="$style.container">
+      <n-split :class="$style.main" direction="horizontal" :resize-trigger-size="8" v-model:size="width">
+        <template #1>
+          <editor v-model:content="editorStore.content" v-model:selection="editorStore.selection"
+            v-model:scroll="editorStore.scroll" :icons="iconStore.icons" :size="editorStore.size" />
+        </template>
+        <template #2>
+          <scroller v-model:scroll="editorStore.scroll">
+            <BSMap :map="ast" :size="editorStore.size" />
+          </scroller>
+        </template>
+        <template #resize-trigger>
+          <div :class="$style.resizer" />
+        </template>
+      </n-split>
+      <app-bar>
+        <template #1>
+          <size-setter />
+        </template>
+        <template #2>
+        </template>
+        <template #3>
+          <icon-status />
+        </template>
+      </app-bar>
+    </div>
   </n-config-provider>
 </template>
 
@@ -33,6 +44,10 @@ import { useIconStore } from '@/stores/icon';
 import Scroller from './components/Scroller.vue';
 import BSMap from './components/BSMap.vue';
 import Editor from './components/Editor.vue';
+import AppBar from './components/AppBar.vue';
+
+import SizeSetter from './components/AppBar/SizeSetter.vue';
+import IconStatus from './components/AppBar/IconStatus.vue';
 
 const editorStore = useEditorStore();
 const iconStore = useIconStore();
@@ -63,6 +78,17 @@ const ast = computed(() => parseMap(editorStore.content));
   overscroll-behavior: none;
 }
 
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.main {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
 .resizer {
   height: 100%;
   background: #cccccc;

src/App.vue

@@ -0,0 +1,27 @@
+<template>
+  <n-flex align="center" justify="space-between" :class="$style.appBar">
+    <n-space align="center">
+      <n-space align="center">
+        <slot name="1" />
+      </n-space>
+      <n-divider vertical />
+      <n-space align="center">
+        <slot name="2" />
+      </n-space>
+    </n-space>
+    <n-space align="center">
+      <slot name="3" />
+    </n-space>
+  </n-flex>
+</template>
+
+<script lang="ts" setup>
+import { NDivider, NFlex, NSpace } from 'naive-ui';
+</script>
+
+<style lang="scss" module>
+.appBar {
+  border-top: 1px solid #ddd;
+  padding: 2px 16px;
+}
+</style>

src/components/AppBar.vue

@@ -0,0 +1,36 @@
+<template>
+  <n-element :class="$style.status">
+    <template v-if="loading > 0">
+      Loading {{ loading }} icons…
+    </template>
+    <template v-else>
+      <n-icon :size="14" :color="themeVars.textColor2" :style="{ marginRight: '0.5em' }">
+        <CheckmarkDone />
+      </n-icon>
+      Cached {{ ready }} icons
+    </template>
+  </n-element>
+</template>
+
+<script lang="ts" setup>
+import { NElement, NIcon, useThemeVars } from 'naive-ui';
+import { computed } from 'vue';
+import { CheckmarkDone } from '@vicons/ionicons5';
+
+import { useIconStore } from '@/stores/icon';
+
+const themeVars = useThemeVars();
+const iconStore = useIconStore();
+
+const loading = computed(() => Object.values(iconStore.icons).filter((icon) => icon.status === 'loading').length);
+const ready = computed(() => Object.values(iconStore.icons).filter((icon) => icon.status === 'ready').length);
+</script>
+
+<style lang="scss" module>
+.status {
+  font-size: var(--font-size-tiny);
+  color: var(--text-color-1);
+  display: flex;
+  align-items: center;
+}
+</style>

src/components/AppBar/IconStatus.vue

@@ -0,0 +1,38 @@
+<template>
+  <n-popover trigger="click">
+    <template #trigger>
+      <n-button quaternary size="tiny" block>
+        <template #icon>
+          <n-icon>
+            <CopyOutline />
+          </n-icon>
+        </template>
+        {{ editorStore.size }}px
+      </n-button>
+    </template>
+    <div :class="$style.setter">
+      <n-slider v-model:value="editorStore.size" :min="20" :max="60" />
+    </div>
+  </n-popover>
+</template>
+
+<script lang="ts" setup>
+import {
+  NButton,
+  NIcon,
+  NPopover,
+  NSlider,
+} from 'naive-ui';
+import { CopyOutline } from '@vicons/ionicons5';
+
+import { useEditorStore } from '@/stores/editor';
+
+const editorStore = useEditorStore();
+</script>
+
+<style lang="scss" module>
+.setter {
+  width: 200px;
+  padding: 8px var(--n-option-prefix-width);
+}
+</style>

src/components/AppBar/SizeSetter.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="holder" :style="{
     width: `100%`,
-    height: `100vh`,
+    height: `100%`,
     lineHeight: `${size}px`,
   }" />
 </template>

src/components/Editor.vue

@@ -33,7 +33,7 @@ function onScroll(): void {
 
 <style lang="scss" module>
 .scroller {
-  height: 100vh;
+  height: 100%;
   overflow-y: scroll;
   overflow-x: hidden;
   background: #f9f9f9;