calendar

Author: yunyuyuan

README.md

@@ -27,10 +27,11 @@
 ### Powered by:
 * Manjaro Linux
 * Vue
-* @kangc/v-md-editor
-* dayjs
+* [vue-markdown-editor](https://github.com/code-farmer-i/vue-markdown-editor)
+* [dayjs](https://github.com/iamkun/dayjs)
+* [color-calendar](https://github.com/yunyuyuan/color-calendar)
+* [viewerjs](https://github.com/fengyuanchen/viewerjs)
 * iframe: [github1s](https://github1s.com)
-* iframe: [3dimg](https://https://3dimg.com/editor)
 * iframe: [vue-netease-music](https://github.com/sl1673495/vue-netease-music)
 * And more...
 

README.zh.md

@@ -27,10 +27,11 @@
 ### Powered by:
 * Manjaro Linux
 * Vue
-* @kangc/v-md-editor
-* dayjs
+* [vue-markdown-editor](https://github.com/code-farmer-i/vue-markdown-editor)
+* [dayjs](https://github.com/iamkun/dayjs)
+* [color-calendar](https://github.com/yunyuyuan/color-calendar)
+* [viewerjs](https://github.com/fengyuanchen/viewerjs)
 * iframe: [github1s](https://github1s.com)
-* iframe: [3dimg](https://https://3dimg.com/editor)
 * iframe: [vue-netease-music](https://github.com/sl1673495/vue-netease-music)
 * 以及其它的项目...
 

package.json

@@ -10,9 +10,10 @@
  "@fontsource/noto-sans": "^4.3.0",
  "@fontsource/source-code-pro": "^4.3.0",
  "@kangc/v-md-editor": "^2.2.4",
+ "color-calendar": "^1.0.5",
  "dayjs": "^1.10.4",
- "yunyuyuan-viewerjs": "^1.9.0",
- "vue": "^3.0.5"
+ "vue": "^3.0.5",
+ "yunyuyuan-viewerjs": "^1.9.0"
  },
  "devDependencies": {
  "@types/node": "^15.0.2",

src/main.ts

@@ -13,7 +13,7 @@ import apps from "./utils/apps";
 createApp(App)
  .component('svg-icon', IconSvg)
  .provide('apps', apps)
- .provide('lock', ref(true))
+ .provide('lock', ref(false))
  .provide('power', ref(''))
  .use(VMdEditor)
  .mount('#app')

src/utils/apps.ts

@@ -91,7 +91,7 @@ export default [{
  icon: "about",
  order: ref(0),
  position: reactive([50, 50]),
- size: reactive([500, 500]),
+ size: reactive([450, 400]),
  status: ref(2),
  maxed: ref(false),
  zindex: ref(1),

src/views/app/about/index.vue

@@ -6,18 +6,12 @@
  <img src="https://blog.halberd.cn/image/i.png" alt="avatar"/>
  <a target="_blank" href="https://github.com/yunyuyuan">yunyuyuan</a>
  </div>
- <strong>This project is powered by:</strong>
- <ul>
- <li>Manjaro Linux</li>
- <li>Vue</li>
- <li>@kangc/v-md-editor</li>
- <li>dayjs</li>
- <li>iframe: <a target="_blank" href="https://github1s.com">github1s</a></li>
- <li>iframe: <a target="_blank" href="https://3dimg.com/editor/">3dimg</a></li>
- <li>iframe: <a target="_blank" href="https://github.com/sl1673495/vue-netease-music">vue-netease-music</a></li>
- <li>And more...</li>
- </ul>
- <a target="_blank" href="https://github.com/yunyuyuan/vue3-manjaro-ui">click to github repo</a>
+ <div>
+ <b>Contributors:</b>
+ <span>Need your code!</span>
+ </div>
+ <hr/>
+ <strong>Go to <a target="_blank" href="https://github.com/yunyuyuan/vue3-manjaro-ui#readme">github</a> to get more information!</strong>
  <a href="mailto:yun-yu-yuan@qq.com">Email to me</a>
  </div>
 </template>
@@ -43,7 +37,6 @@ export default {
  align-items: center;
  margin: 1rem;
  padding-bottom: 1rem;
- border-bottom: 1px solid gray;
  b{
  margin-right: 2rem;
  }
@@ -56,8 +49,9 @@ export default {
  }
  }
  >strong{
- font-size: 1.1rem;
+ font-size: 1rem;
  margin: .8rem;
+ display: block;
  }
  >ul{
  margin-left: 3rem;
@@ -70,6 +64,7 @@ export default {
  }
  >a{
  margin: 1rem;
+ color: #ff7533;
  }
 }
 </style>

src/views/app/image viewer/index.vue

@@ -10,7 +10,7 @@
 <script lang="ts">
 import {defineComponent, watchEffect} from 'vue';
 import 'yunyuyuan-viewerjs/dist/viewer.css';
-import Viewer from 'yunyuyuan-viewerjs';
+import Viewer from 'yunyuyuan-viewerjs/dist/viewer';
 import dolphinFiles from "../../../../get-dolphin-filesystem";
 import {typeFile} from "../../../../filesystem";
 

src/views/taskbar/calendar.vue

@@ -0,0 +1,48 @@
+<template>
+ <div :class="{active: show}" class="calendar" tabindex="1" @focusout="$emit('focusout')">
+ <div id="calendar"></div>
+ </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue';
+import Calendar from "color-calendar";
+import "color-calendar/dist/css/theme-glass.css";
+
+export default defineComponent({
+ name: "calendar",
+ props: {
+ show: Boolean
+ },
+ emits: ['focusout'],
+ watch: {
+ show (){
+ if (this.show) {
+ this.$el.focus();
+ }
+ }
+ },
+ mounted() {
+ new Calendar({
+ id: "#calendar",
+ theme: "glass"
+ });
+ }
+})
+</script>
+
+<style scoped lang="scss">
+.calendar{
+ width: 20rem;
+ position: absolute;
+ right: 0;
+ top: 0;
+ transform: translateY(4rem);
+ transition: transform .12s ease-in;
+ outline: none;
+ z-index: 0;
+ &.active{
+ transform: translateY(-100%);
+ }
+}
+</style>

src/views/taskbar/index.vue

@@ -30,14 +30,15 @@
  <i @click="showDesktop">
  <svg-icon name="desktop" style="width: 2.2rem;height: 2.2rem"/>
  </i>
- <div class="time flex">
+ <div class="time flex" @click="toggleCalendar">
  <time>{{time}}</time>
  <span>{{date}}</span>
  </div>
  </div>
 
- <left-menu :show="showLeft" @focusout="leftFocusout"/>
+ <left-menu ref="leftmenu" :show="showLeft" @focusout="leftFocusout"/>
  <right-menu :show="showRight" @focusout="rightFocusout"/>
+ <the-calendar ref="calendar" :show="showCalendar" @focusout="calendarFocusout"/>
  <span class="bg"></span>
  </section>
 </template>
@@ -47,17 +48,19 @@ import {defineComponent} from 'vue';
 import AppIcon from "./appIcon.vue";
 import leftMenu from "./leftMenu.vue";
 import rightMenu from "./rightMenu.vue";
+import TheCalendar from "./calendar.vue";
 import dayjs, {Dayjs} from "dayjs";
 import {typeApp} from "../../utils/apps";
 import mixin from "../../utils/mixin";
 
 export default defineComponent({
  name: "index",
- components: {AppIcon, leftMenu, rightMenu},
+ components: {AppIcon, leftMenu, rightMenu, TheCalendar},
  data (){
  return {
  showLeft: false,
  showRight: '',
+ showCalendar: false,
  oldShowRight: '',
  animation: false,
 
@@ -89,7 +92,9 @@ export default defineComponent({
  },
  methods: {
  toggleLeftMenu (){
- if (this.animation) return
+ const actived = this.$refs.leftmenu.$el.classList.contains('active');
+ if (this.animation && actived) return;
+ this.animation = false;
  !this.showLeft && (this.showLeft = !this.showLeft);
  },
  leftFocusout (){
@@ -117,6 +122,17 @@ export default defineComponent({
  this.showDesktopLis.push(app.name)
  }
  })
+ },
+ toggleCalendar (){
+ const actived = this.$refs.calendar.$el.classList.contains('active');
+ if (this.animation && actived) return;
+ this.showCalendar = !actived;
+ this.animation = false;
+ },
+ calendarFocusout (){
+ this.showCalendar = false;
+ this.animation = true;
+ setTimeout(()=>this.animation=false, 200)
  }
  }
 })

src/views/taskbar/rightMenu.vue

@@ -1,5 +1,5 @@
 <template>
- <div class="right-menu" tabindex="1" :class="{active: show !== ''}" @focusout="focusout">
+ <div class="right-menu" tabindex="1" :class="{active: show !== ''}" @focusout="$emit('focusout')">
  <div class="head flex">
  <i class="flex"><svg-icon name="arrow"/></i>
  <span>{{title}}</span>
@@ -135,9 +135,6 @@ export default defineComponent({
  }
  },
  methods: {
- focusout (e: FocusEvent){
- this.$emit('focusout')
- },
  startVolume (){
  },
  changeVolume (){