feat: 1.优化当前聚焦日期的list展示

JuckZ · Mar 7, 2023 · 21110a0 · 21110a0
1 parent ab60803
commit 21110a0
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 14 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -487,7 +487,12 @@ export default class AwesomeBrainManagerPlugin extends Plugin {
         toggleCursorEffects(SETTINGS.cursorEffect.value);
         // 状态栏图标
         const obsidianManagerPomodoroStatusBar = this.addStatusBarItem();
-        obsidianManagerPomodoroStatusBar.createEl('span', { text: '🍅' });
+        obsidianManagerPomodoroStatusBar.createEl('span', {
+            text: '🍅',
+            attr: {
+                style: 'cursor: pointer',
+            },
+        });
         obsidianManagerPomodoroStatusBar.onClickEvent(async evt => {
             this.app.workspace.detachLeavesOfType(POMODORO_HISTORY_VIEW);
             await this.app.workspace.getRightLeaf(true).setViewState({

diff --git a/src/ui/CalendarView.vue b/src/ui/CalendarView.vue
@@ -9,24 +9,32 @@
             <template #header="{ year, month }">
                 {{ `${year}-${month}` }}
             </template>
-            <template #default="{ year, month, date }"> <PomodoroListView :time="{ year, month, date }" /></template>
+            <template #default="{ year, month, date }">
+                <PomodoroListView :active-time="activeTime" :time="{ year, month, date }"
+            /></template>
         </NCalendar>
     </div>
 </template>
 
 <script setup lang="ts">
 import { NCalendar } from 'naive-ui';
-import { ref } from 'vue';
+import { Ref, ref } from 'vue';
 import { moment } from 'obsidian';
 import PomodoroListView from './PomodoroListView.vue';
 
 const emit = defineEmits(['focus-change']);
 
 const now = moment();
 const timestampNow = ref(now.valueOf());
+const activeTime: Ref<{ year: number; month: number; date: number }> = ref({
+    year: now.year(),
+    month: now.month(),
+    date: now.date(),
+});
 
 const handleUpdateValue = (_: number, { year, month, date }: { year: number; month: number; date: number }) => {
-    emit('focus-change', { year, month, date });
+    activeTime.value = { year, month, date };
+    emit('focus-change', activeTime.value);
     // message.success(`${year}-${month}-${date}`);
 };
 

diff --git a/src/ui/PomodoroListView.vue b/src/ui/PomodoroListView.vue
@@ -3,11 +3,18 @@
         <span
             v-show="planButNotStart.length !== 0"
             style="position: absolute; transform: translateY(-100%); right: 0"
-            >{{ '📥' }}</span
+            >{{ '📥' + activeTime.date }}</span
+        >
+        <n-list
+            :class="{
+                pomodoroList: true,
+                active: activeTime.date === time.date,
+                notActive: activeTime.date !== time.date,
+            }"
+            :show-divider="false"
         >
-        <n-list id="pomodoroList" :show-divider="false">
             <n-list-item v-for="pomodoro in pomodoroList" :key="pomodoro.timestamp" :style="getRandomStyle()" bordered>
-                <n-ellipsis>
+                <n-ellipsis v-show="activeTime.date !== time.date">
                     {{ pomodoro.task }}
                 </n-ellipsis>
             </n-list-item>
@@ -30,6 +37,7 @@ const planButNotStart = ref([] as Pomodoro[]);
 
 const props = withDefaults(
     defineProps<{
+        activeTime: { year: number; month: number; date: number };
         time: { year: number; month: number; date: number };
     }>(),
     {
@@ -43,7 +51,7 @@ const props = withDefaults(
         },
     },
 );
-const { time } = toRefs(props);
+const { activeTime, time } = toRefs(props);
 watchEffect(() => {
     planButNotStart.value = pomodoroHistory.value.filter(
         item =>
@@ -72,17 +80,31 @@ const getRandomStyle = () => {
 </script>
 
 <style lang="scss">
-#pomodoroList {
-    background-color: none !important;
+.pomodoroList {
+    background-color: transparent !important;
+
     .n-list-item {
         padding: 0;
         margin-top: 2px;
         margin-bottom: 2px;
+        font-size: 80%;
         opacity: 0.5;
-        // 解决子元素超出父元素宽度的问题 https://juejin.cn/post/6974356682574921765
-        .n-list-item__main {
-            width: 0;
-            flex: 1;
+    }
+
+    &.active {
+        .n-list-item {
+            opacity: 1;
+            width: max-content;
+        }
+    }
+
+    &.notActive {
+        .n-list-item {
+            // 解决子元素超出父元素宽度的问题 https://juejin.cn/post/6974356682574921765
+            .n-list-item__main {
+                width: 0;
+                flex: 1;
+            }
         }
     }
 }