Info block on popup

Author: Stigmatoz

src/_locales/en/messages.json

@@ -131,6 +131,9 @@
   "pomodoroMode": {
     "message": "Pomodoro"
   },
+  "pomodoroSettings": {
+    "message": "Pomodoro Settings"
+  },
   "pomodoro": {
     "message": "Pomodoro",
     "description": "The Pomodoro method is a time management technique based on alternating periods of focused work and rest. According to the classics of the Pomodoro method, the work period lasts 25 minutes, the rest period is 5 minutes."

src/assets/css/dark.css

@@ -42,4 +42,10 @@
 }
 .dark .header span{
   color: rgb(255 255 255);
+}
+.dark .review-block p{
+  color:#303030;
+}
+.dark .pomodoro-popup-block p{
+  color:#303030;
 }

src/components/PomodoroInfo.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="pomodoro-popup-block" v-if="isEnabled">
+    <p>Pomodoro Mode is enabled</p>
+    <span v-if="isWorkingTime">WORK</span>
+    <span v-if="!isWorkingTime">REST</span>
+    <input
+      type="button"
+      :value="t('pomodoroSettings.message')"
+      @click="openPage(SettingsTab.Pomodoro)"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'PomodoroInfo',
+};
+</script>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+import { StorageParams, IS_POMODORO_ENABLED_DEFAULT } from '../storage/storage-params';
+import { useI18n } from 'vue-i18n';
+import { injecStorage } from '../storage/inject-storage';
+import { openPage } from '../utils/open-page';
+import { SettingsTab } from '../utils/enums';
+import { checkPomodoro } from '../functions/pomodoro';
+
+const { t } = useI18n();
+const settingsStorage = injecStorage();
+
+const isEnabled = ref<boolean>();
+const isWorkingTime = ref<boolean>();
+
+onMounted(async () => {
+  isEnabled.value = await settingsStorage.getValue(
+    StorageParams.IS_POMODORO_ENABLED,
+    IS_POMODORO_ENABLED_DEFAULT,
+  );
+
+  isWorkingTime.value = (await checkPomodoro())?.isWork;
+});
+</script>
+
+<style scoped>
+.pomodoro-popup-block {
+  width: -webkit-fill-available;
+  position: fixed;
+  bottom: 0;
+  padding: 8px 20px;
+  font-size: 14px;
+  background-color: #efefef;
+}
+.pomodoro-popup-block p {
+  display: inline-block;
+  margin: 8px;
+  font-size: 17px;
+  font-weight: 500;
+}
+.pomodoro-popup-block span {
+  padding: 5px;
+  background-color: rgb(105, 202, 105);
+  color: black;
+  margin-left: 10px;
+  border-radius: 5px;
+  font-weight: 500;
+  font-size: 13px;
+}
+.pomodoro-popup-block input[type='button'] {
+  float: right;
+}
+</style>

src/components/Review.vue

@@ -82,6 +82,7 @@ async function openStore() {
   display: inline-block;
   margin: 8px;
   font-size: 17px;
+  font-weight: 500;
 }
 .review-block img {
   padding: 9px 0 0 0;

src/pages/Popup.vue

@@ -88,6 +88,7 @@
       </section>
     </div>
   </div>
+  <PomodoroInfo />
   <Review />
 </template>
 
@@ -97,6 +98,7 @@ import { useI18n } from 'vue-i18n';
 import TabList from '../components/TabList.vue';
 import ByDays from '../components/ByDays.vue';
 import Review from '../components/Review.vue';
+import PomodoroInfo from '../components/PomodoroInfo.vue';
 import { openPage } from '../utils/open-page';
 import { SettingsTab, TypeOfList } from '../utils/enums';
 import { injecStorage } from '../storage/inject-storage';