make mini mode hour shown

RoderickQiu · Aug 24, 2021 · 4a58e50 · 4a58e50
1 parent 1bb8e4c
commit 4a58e50
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 5 deletions.
diff --git a/floating.html b/floating.html
@@ -19,7 +19,7 @@
     <div class="d-flex mx-auto justify-content-center align-items-center text-dark" id="main">
         <div id="timer" class="justify-content-center align-content-center text-center">
             <div id="floating-unhover">
-                <div id="time-left" class="text-center h4 work">--</div>
+                <div id="time-left" class="text-center h6 work">--</div>
                 <div id="time-left-msg" class="text-center small work">
                     <script>document.write(i18n.__('min-left'));</script>
                 </div>
@@ -121,13 +121,44 @@
             $("#floating-back").css("display", "none");
         }
 
+        let timeLeft = $("#time-left");
+        let lastTimeHasHours = null;
+        let h = " " + i18n.__("h"), min = " " + i18n.__("min");
+
+        function getStyledTimeLeft(minute) {
+            if (lastTimeHasHours == null) {
+                lastTimeHasHours = Math.floor(minute / 60) > 0;
+                if (!lastTimeHasHours) {
+                    timeLeft.removeClass("h6");
+                    timeLeft.addClass("h4");
+                }
+            }
+            let hour = Math.floor(minute / 60);
+            if (hour > 0) {
+                if (!lastTimeHasHours) {
+                    timeLeft.removeClass("h4");
+                    timeLeft.addClass("h6");
+                    lastTimeHasHours = true;
+                }
+                return hour + h + (minute - hour * 60) + min;
+            } else {
+                if (lastTimeHasHours) {
+                    timeLeft.removeClass("h6");
+                    timeLeft.addClass("h4");
+                    lastTimeHasHours = false;
+                }
+                if (minute === 0) return "<1" + min;
+                return minute + min;
+            }
+        }
+
         let method = 1;
         ipc.on("floating-time-left", function (event, message) {
             isWorking = message.isWorking;
             if (isWorking) $("#stopper").html("<i class='iconfont icon-pause' aria-hidden='true'></i>");
             else $("#stopper").html("<i class='iconfont icon-play' aria-hidden='true'></i>");
 
-            $("#time-left").text(message.minute === 0 ? '<1' : message.minute);
+            $("#time-left").text(getStyledTimeLeft(message.minute));
             $('#floating-bottom-bar').css("width", message.percentage + "%");
 
             if (message.method === 2 && method === 1) {

diff --git a/locales/en.json b/locales/en.json
@@ -253,7 +253,7 @@
 	"focus-notify-body": "focus mode will be on",
 	"recover": "Exit the mini mode",
 	"mini-mode": "Mini mode",
-	"min-left": "min left",
+	"min-left": "left",
 	"statistics": "Statistics",
 	"statistics-work-time": "Working time",
 	"statistics-rest-time": "Resting time",

diff --git a/locales/zh-CN.json b/locales/zh-CN.json
@@ -249,7 +249,7 @@
 	"focus-notify-body": "时开启全屏专心模式，到时将无法退出",
 	"recover": "退出 MINI 模式",
 	"mini-mode": "MINI 模式",
-	"min-left": "分钟剩余",
+	"min-left": "剩余",
 	"statistics": "使用统计",
 	"statistics-work-time": "工作时间",
 	"statistics-rest-time": "休息时间",

diff --git a/locales/zh-TW.json b/locales/zh-TW.json
@@ -249,7 +249,7 @@
 	"focus-notify-body": "時開啓全屏專心模式，到時將無法退出",
 	"recover": "退出 MINI 模式",
 	"mini-mode": "MINI 模式",
-	"min-left": "分鐘剩餘",
+	"min-left": "剩餘",
 	"statistics": "使用統計",
 	"statistics-work-time": "工作時間",
 	"statistics-rest-time": "休息時間",