This is the 8th day of my participation in Gwen Challenge

Give yourself a pat on the back for making it to the eighth day.

Today, when I was packing things in the office, I came across a book called Pompomo Technique, so I came up with a dedicated countdown function. After turning on this function, the computer will enter the full-screen countdown, and I will not operate the computer, so that I can spend my time in other places that can be focused, such as reading.

Let’s start with the renderings:

Add control buttons

Directly add “Focus mode” button on “Settings” page:

// settingsub. vue <Button type=" Button "label=" open focus mode" icon=" PI pi-times" class="p-d-block p-mx-auto p-button-success" @click="focus" /> ... focus(): void { this.$emit('focusClick'); this.$emit('update:visibleFullSetting', this.sidebarVisible = false); window.electron.ipcRenderer.send('show-focus-window'); },Copy the code

Main functions:

  1. Up (FullCalendarMain Components)emit focusClickEvent, which opens the “Focus countdown” page.
  2. The Settings page is closed.
  3. Send to the Main processshow-focus-windowEvent is used to remind the screen of full screen.

Open the Focus screen

Just set visibleFocusView to true in the FullCalendarMain component.

<focus-view-sub
  v-model:visibleFocusView="visibleFocusView"
/>
Copy the code

Specific focus on the following interface code, relatively simple.

<template> <Sidebar v-model:visible="sidebarVisible" class="p-grid nested-grid" :base-z-index="1000" position="full" @click="hideFocus" > <h1> focus mode </h1> <Vue3CountdownClock /> </Sidebar> </template> <script lang="ts"> import { defineComponent, ref, provide } from 'vue'; import Sidebar from 'primevue/sidebar'; import Vue3CountdownClock from 'vue3-clock-countdown'; import Moment from 'moment'; export default defineComponent({ name: 'FocusViewSub', components: { Sidebar, Vue3CountdownClock, }, props: { visibleFocusView: Boolean, }, emits: [ 'update:visibleFocusView', ], setup () { const deadLine = ref(Moment().add(40, 'minute').format()); provide('deadline', deadLine); Const Title = ref(' enter countdown '); provide('title', Title); const timerStyle = ref({ 'text-align': 'center', 'font-family': 'sans-serif', 'font-weight': 100, }); provide('timerStyle', timerStyle); const h1Style = ref({ color: '#396', 'font-weight': 100, 'font-size': '40px', margin: '40px 0px 20px', }); provide('h1Style', h1Style); const clockdiv = ref({ 'font-family': 'sans-serif', color: '#fff', display: 'inline-block', 'font-weight': 100, 'text-align': 'center', 'font-size': '30px', }); provide('clockdiv', clockdiv); const clockdivDiv = ref({ padding: '10px', 'border-radius': '3px', background: '#00BF96', display: 'inline-block', margin: '1px', }); provide('clockdivDiv', clockdivDiv); const clockdivDivSpan = ref({ padding: '15px', 'border-radius': '3px', background: '#00816A', display: 'inline-block', }); provide('clockdivDivSpan', clockdivDivSpan); const styleEndTime = ref({ color: '#fff', }); provide('styleEndTime', styleEndTime); const smalltext = ref({ 'padding-top': '5px', 'font-size': '16px', }); provide('smalltext', smalltext); const titleDays = ref('Days'); provide('titleDays', titleDays); const titleHours = ref('Hours'); provide('titleHours', titleHours); const titleMinutes = ref('Minutes'); provide('titleMinutes', titleMinutes); const titleSeconds = ref('Seconds'); provide('titleSeconds', titleSeconds); const titleEndTime = ref('End Time! '); provide('titleEndTime', titleEndTime); }, data() { return { sidebarVisible: false, }; }, watch: { visibleFocusView(): void { this.sidebarVisible = this.visibleFocusView; }, }, methods: { hideFocus() { this.$emit('update:visibleFocusView', this.sidebarVisible); window.electron.ipcRenderer.send('hide-focus-window'); ,}}}); </script>Copy the code

The Sidebar component in PrimeVue control is mainly used.

In addition, I directly used a third party plug-in: vue3-Countle-clock. This plug-in is currently used by me temporarily. I basically use it for the configuration inside, and it mainly looks consistent with my theme.

Note:

  1. Here I temporarily write dead time, the next step must be to dynamically set the tomato working time;
  2. Plug-ins need to be addedshims-vue.d.tsIn:
declare module 'vue3-clock-countdown'
Copy the code

Now that you have the interface, all that’s left is full screen enlargement.

Full screen magnification

To achieve the effect of concentration, we first need to enlarge our Windows in full screen, to achieve our goal of being away from the computer. Add to app.ts class:

setFullScreen(flag: boolean): this {
    this.window.setFullScreen(flag);
    return this;
}
Copy the code

This allows you to add code to the Main thread:

Ipcmain. on('show-focus-window', () => {if (mainApp == null) {mainApp = new App(); } mainApp.setFullScreen(true); }); Ipcmain. on('hide-focus-window', () => {if (mainApp == null) {mainApp = new App(); } mainApp.setFullScreen(false).show(); });Copy the code

summary

This basically implements the basic logic of our focus function. By the way, if the close button is triggered on the page, the close event is sent to the Main thread:

hideFocus() {
  this.$emit('update:visibleFocusView', this.sidebarVisible);
  window.electron.ipcRenderer.send('hide-focus-window');
},
Copy the code

Show-focus-window = hide-focus-window = show-focus-window = hide-focus-window

All the records of this project are basically in the column, welcome to check out: Electron+Vue3 MAC Calendar Development records