Adds new icon styles preference for tray

CHANGELOG.md

@@ -5,6 +5,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+### Added
+- new icon styles preference for tray (showing time to break or visual progress to break)
+
 ### Fixed
 - snap package not starting on Wayland
 - break windows not closing correctly on all platforms

README.md

@@ -211,6 +211,7 @@ Here are the preferences editable via the app. If values in the app does not sui
 - `language` - language
 - `useMonochromeTrayIcon` - use monochrome icon
 - `useMonochromeInvertedTrayIcon` - use inverted monochrome icon
+- `trayIconStyle` - icon style for menubar: default, time to break, or progress to break 
 - `silentNotifications` - enable sounds
 - `monitorDnd` - monitor DND mode
 - `checkNewVersion` - check for new versions
@@ -406,10 +407,6 @@ In case you have disabled showing of breaks on all monitors, you can specify whi
 - `"cursor"` - monitor where there is cursor
 - `"0"` (or `0`), `"1"`, `"2"` etc, where `"0"` is the first monitor returned by OS and so forth
 
-#### Show time to the next break in menubar icon [![Contributor Preferences](https://img.shields.io/badge/Contributor_Preferences-✔-success)](#contributor-preferences) ![Not Reliable](https://img.shields.io/badge/Not_Reliable-β-yellow)
-
-If you want Stretchly to show time to the next break in menubar icon set `timeToBreakInTray` to `true`.
-
 #### Show current time in breaks [![Contributor Preferences](https://img.shields.io/badge/Contributor_Preferences-✔-success)](#contributor-preferences)
 To show current time in breaks, set the value of `currentTimeInBreaks` from `false` to `true`.
 

app/breaksPlanner.js

@@ -272,6 +272,7 @@ class BreaksPlanner extends EventEmitter {
   }
 
   get timeToNextBreak () {
+    if (!this.scheduler) return null
     if (this.scheduler.reference === 'startMicrobreak' || this.scheduler.reference === 'startBreak') {
       return this.scheduler.timeLeft
     }
@@ -287,6 +288,34 @@ class BreaksPlanner extends EventEmitter {
     }
     return null
   }
+
+  get _progressInterval () {
+    if (!this.scheduler) return null
+    const { reference, delay } = this.scheduler
+
+    if (reference === 'startMicrobreak' || reference === 'startBreak') {
+      return delay
+    }
+
+    if (reference === 'startBreakNotification') {
+      return delay + this.settings.get('breakNotificationInterval')
+    }
+
+    if (reference === 'startMicrobreakNotification') {
+      return delay + this.settings.get('microbreakNotificationInterval')
+    }
+
+    return null
+  }
+
+  get progressPercentage () {
+    const total = this._progressInterval
+    const remaining = this.timeToNextBreak
+    if (total === null || total <= 0 || remaining === null) return 0
+
+    const progress = 1 - (remaining / total)
+    return Math.max(0, Math.min(100, Math.round(progress * 100)))
+  }
 }
 
 export default BreaksPlanner

app/contributor-preferences.html

@@ -483,23 +483,20 @@
           </select>
         </div>
       </div>
+
       <div>
         <hr>
       </div>
-      <div>
-        <span data-i18next="contributorPreferences.timeToBreakInTray"></span>
-      </div>
-      <div>
-        <input type="checkbox" value="timeToBreakInTray" id="showTimeToBreakInTray">
-        <label data-i18next="contributorPreferences.showTimeToBreakInTray" for="showTimeToBreakInTray"></label>
-      </div>
       <div>
         <span data-i18next="contributorPreferences.showTrayIcon"></span>
       </div>
       <div>
         <input type="checkbox" value="showTrayIcon" id="toShowTrayIcon">
         <label data-i18next="contributorPreferences.toShowTrayIcon" for="toShowTrayIcon"></label>
       </div>
+      <div>
+        <hr>
+      </div>
       <div>
         <span data-i18next="contributorPreferences.currentTimeInBreaks"></span>
       </div>

app/css/contributor.css

@@ -174,24 +174,15 @@ body[dir=rtl] .contributor-preferences > :nth-child(61) {
   text-align: left;
 }
 
-.contributor-preferences > :nth-child(63) {
-  grid-column: 1/2;
-  grid-row: 49/50;
-  padding: 0 16px;
-  text-align: right;
-}
 
-body[dir=rtl] .contributor-preferences > :nth-child(63) {
-  text-align: left;
+.contributor-preferences > :nth-child(64) {
+ grid-column: 1/2;
+ grid-row: 50/51;
+ padding: 0 16px;
+ text-align: right;
 }
 
-.contributor-preferences > :nth-child(65) {
-  grid-column: 1/2;
-  grid-row: 50/51;
-  padding: 0 16px;
-  text-align: right;
+body[dir=rtl] .contributor-preferences > :nth-child(64) {
+ text-align: left;
 }
 
-body[dir=rtl] .contributor-preferences > :nth-child(65) {
-  text-align: left;
-}

app/css/preferences.css

@@ -171,7 +171,7 @@ body[dir=rtl] .theme > :nth-child(10) {
 
 .theme > :nth-child(17) {
   grid-column: 1/2;
-  grid-row: 14/17;
+  grid-row: 15/18;
   padding: 0 16px;
   text-align: right;
 }