diff --git a/simple-timer@naheller/README.md b/simple-timer@naheller/README.md index f749c6f4413..c2873700c13 100644 --- a/simple-timer@naheller/README.md +++ b/simple-timer@naheller/README.md @@ -1,6 +1,6 @@ # Simple Timer -A simple timer that notifies you when it's finished. +A timer applet that offers a compact, minimal interface. ## Features diff --git a/simple-timer@naheller/files/simple-timer@naheller/applet.js b/simple-timer@naheller/files/simple-timer@naheller/applet.js index 4df92258d6d..0c260572fd6 100644 --- a/simple-timer@naheller/files/simple-timer@naheller/applet.js +++ b/simple-timer@naheller/files/simple-timer@naheller/applet.js @@ -1,4 +1,3 @@ -const Lang = imports.lang; const Applet = imports.ui.applet; const PopupMenu = imports.ui.popupMenu; const Main = imports.ui.main; @@ -7,61 +6,28 @@ const Tooltips = imports.ui.tooltips; const St = imports.gi.St; const Clutter = imports.gi.Clutter; const GLib = imports.gi.GLib; -const Gettext = imports.gettext; -const UUID = 'simple-timer@naheller'; -Gettext.bindtextdomain(UUID, GLib.get_home_dir() + '/.local/share/locale'); - -function _(str) { - return Gettext.dgettext(UUID, str); -} - -const TIMER_INTERVAL_MS = 1000; - -const ONE_MIN_IN_SECONDS = 60; -const ONE_HOUR_IN_SECONDS = ONE_MIN_IN_SECONDS * 60; -const ONE_DAY_IN_SECONDS = ONE_HOUR_IN_SECONDS * 24; - -const BUTTON_TOOLTIP_START = _('Start'); -const BUTTON_TOOLTIP_RESUME = _('Resume'); -const BUTTON_TOOLTIP_PAUSE = _('Pause'); -const BUTTON_TOOLTIP_RESET = _('Reset'); -const BUTTON_TOOLTIP_CLEAR = _('Clear'); - -// Found in /usr/share/icons//symbolic/ -const ICON_NAME_START = 'media-playback-start-symbolic'; -const ICON_NAME_PAUSE = 'media-playback-pause-symbolic'; -const ICON_NAME_STOP = 'media-playback-stop-symbolic'; -const ICON_NAME_INCR = 'go-up-symbolic'; -const ICON_NAME_DECR = 'go-down-symbolic'; -const ICON_NAME_RESET = 'object-rotate-right-symbolic'; -const ICON_NAME_CLEAR = 'user-trash-symbolic'; - -const ICON_SIZE_LG = 20; -const ICON_SIZE_SM = 12; - -const NOTIFICATION_TITLE = _('Timer'); -const NOTIFICATION_MSG = _('Your timer is finished'); - -const DIGIT_NAMES = { - SECOND_TENS: 'SECOND_TENS', - SECOND_ONES: 'SECOND_ONES', - MINUTE_TENS: 'MINUTE_TENS', - MINUTE_ONES: 'MINUTE_ONES', - HOUR_TENS: 'HOUR_TENS', - HOUR_ONES: 'HOUR_ONES' -}; - -const CLOCK_INCREMENT = 'INCREMENT'; -const CLOCK_DECREMENT = 'DECREMENT'; - -const CLOCK_STYLE = 'margin: 0 10px 10px 10px;' -const CLOCK_STYLE_ACTIVE = 'margin: 10px 10px 20px 10px;'; -const CLOCK_DIGIT_STYLE = 'margin: 0 10px 10px 10px;' -const CLOCK_DIGIT_STYLE_ACTIVE = 'margin: 10px 10px 20px 10px;'; -const CLOCK_BUTTON_STYLE = 'width: 20px; padding: 10px 0;'; -const CONTROL_BUTTON_STYLE = 'width: 40px; padding: 10px;'; -const FONT_SIZE = '22px'; +const { + TIMER_INTERVAL_MS, + ONE_MIN_IN_SECONDS, + ONE_HOUR_IN_SECONDS, + ONE_DAY_IN_SECONDS, + BUTTON_TOOLTIPS, + ICON_NAMES, + ICON_SIZE_LG, + ICON_SIZE_SM, + NOTIFICATION_TITLE, + NOTIFICATION_MSG, + DIGIT_NAMES, + CLOCK_INCREMENT, + CLOCK_DECREMENT, + CLOCK_STYLES, + CONTROL_BUTTON_STYLE, + FONT_SIZE, + APPLET_ICON_NAME, + APPLET_ICON_GREEN, + APPLET_ICON_TOOLTIP +} = require('./constants.js'); function MyApplet(metadata, orientation, panelHeight, instanceId) { @@ -75,8 +41,13 @@ MyApplet.prototype = { Applet.IconApplet.prototype._init.call(this, orientation, panelHeight, instanceId); try { - this.set_applet_icon_symbolic_name('alarm-white'); - this.set_applet_tooltip(_('Simple Timer')); + this.set_applet_icon_symbolic_name(APPLET_ICON_NAME); + this.set_applet_tooltip(APPLET_ICON_TOOLTIP); + + // Set applet icon on instance so its color can be changed later + this.appletIcon = this.actor.get_children()?.find(item => { + return item?.child?.['icon-name'] === APPLET_ICON_NAME; + }); this.timerId = null; this.timerInitialSec = this.timerCurrentSec = 0; @@ -112,7 +83,7 @@ MyApplet.prototype = { menuSection.actor.add_actor(this.clock); menuSection.actor.add_actor(this.controlBar); - + this.menu.addMenuItem(menuSection); this.menuManager.addMenu(this.menu); @@ -131,7 +102,7 @@ MyApplet.prototype = { const clockBox = new St.BoxLayout({ name: 'clock', x_align: Clutter.ActorAlign.CENTER, - style: CLOCK_STYLE + style: CLOCK_STYLES.DEFAULT }); clockBox.add_child(hourTensColumn); @@ -184,19 +155,19 @@ MyApplet.prototype = { getClockColumn(digitName, digitValue) { - const iconIncrement = getIcon(ICON_NAME_INCR, ICON_SIZE_SM); - const iconDecrement = getIcon(ICON_NAME_DECR, ICON_SIZE_SM); + const iconIncrement = getIcon(ICON_NAMES.INCR, ICON_SIZE_SM); + const iconDecrement = getIcon(ICON_NAMES.DECR, ICON_SIZE_SM); const incrementButtonName = `${DIGIT_NAMES[digitName]}_INC`; const decrementButtonName = `${DIGIT_NAMES[digitName]}_DEC`; // Set buttons instance level so they can be shown/hidden later - this[incrementButtonName] = getButton(iconIncrement, CLOCK_BUTTON_STYLE); + this[incrementButtonName] = getButton(iconIncrement, CLOCK_STYLES.BUTTON); this[incrementButtonName].connect('clicked', () => { this.adjustClockDigit(CLOCK_INCREMENT, digitName); }); - this[decrementButtonName] = getButton(iconDecrement, CLOCK_BUTTON_STYLE); + this[decrementButtonName] = getButton(iconDecrement, CLOCK_STYLES.BUTTON); this[decrementButtonName].connect('clicked', () => { this.adjustClockDigit(CLOCK_DECREMENT, digitName); }); @@ -217,11 +188,13 @@ MyApplet.prototype = { }, getControlBar() { - const iconStart = getIcon(ICON_NAME_START, ICON_SIZE_LG); - const iconClear = getIcon(ICON_NAME_CLEAR, ICON_SIZE_LG); - const iconReset = getIcon(ICON_NAME_RESET, ICON_SIZE_LG); + const iconStart = getIcon(ICON_NAMES.START, ICON_SIZE_LG); + const iconClear = getIcon(ICON_NAMES.CLEAR, ICON_SIZE_LG); + const iconReset = getIcon(ICON_NAMES.RESET, ICON_SIZE_LG); this.startPauseButton = getButton(iconStart, CONTROL_BUTTON_STYLE, true); + this.startPauseButton.reactive = this.timerCurrentSec != 0; + this.resetButton = getButton(iconReset, CONTROL_BUTTON_STYLE); this.clearButton = getButton(iconClear, CONTROL_BUTTON_STYLE); @@ -246,13 +219,13 @@ MyApplet.prototype = { // Tooltips this.startPauseButton.tooltip = new Tooltips.Tooltip(this.startPauseButton) - this.startPauseButton.tooltip.set_text(BUTTON_TOOLTIP_START) + this.startPauseButton.tooltip.set_text(BUTTON_TOOLTIPS.START) this.resetButton.tooltip = new Tooltips.Tooltip(this.resetButton) - this.resetButton.tooltip.set_text(BUTTON_TOOLTIP_RESET) + this.resetButton.tooltip.set_text(BUTTON_TOOLTIPS.RESET) this.clearButton.tooltip = new Tooltips.Tooltip(this.clearButton) - this.clearButton.tooltip.set_text(BUTTON_TOOLTIP_CLEAR) + this.clearButton.tooltip.set_text(BUTTON_TOOLTIPS.CLEAR) const controlBar = new St.BoxLayout({ x_align: Clutter.ActorAlign.CENTER @@ -304,11 +277,13 @@ MyApplet.prototype = { TIMER_INTERVAL_MS ); - this.startPauseButton.child.set_icon_name(ICON_NAME_PAUSE); - this.clock.set_style(CLOCK_STYLE_ACTIVE); - this.startPauseButton.tooltip.set_text(BUTTON_TOOLTIP_PAUSE); + this.clock.set_style(CLOCK_STYLES.ACTIVE); + + this.startPauseButton.child.set_icon_name(ICON_NAMES.PAUSE); + this.startPauseButton.tooltip.set_text(BUTTON_TOOLTIPS.PAUSE); + this.hideAllClockAdjustButtons(); - this.set_applet_icon_symbolic_name('alarm-green'); + this.updateAppletIconColor(); }, pauseTimer() { @@ -317,11 +292,13 @@ MyApplet.prototype = { } this.clearTimerInterval(); - this.startPauseButton.child.set_icon_name(ICON_NAME_START); - this.clock.set_style(CLOCK_STYLE) + this.clock.set_style(CLOCK_STYLES.DEFAULT); + + this.startPauseButton.child.set_icon_name(ICON_NAMES.START); + this.startPauseButton.tooltip.set_text(BUTTON_TOOLTIPS.RESUME); + this.showAllClockAdjustButtons(); - this.startPauseButton.tooltip.set_text(BUTTON_TOOLTIP_RESUME) - this.set_applet_icon_symbolic_name('alarm-white'); + this.updateAppletIconColor(); }, resetTimer() { @@ -332,12 +309,14 @@ MyApplet.prototype = { this.timerCurrentSec = this.timerInitialSec; this.updateClockText(); + this.clock.set_style(CLOCK_STYLES.DEFAULT); + this.startPauseButton.set_checked(false); - this.startPauseButton.child.set_icon_name(ICON_NAME_START); - this.clock.set_style(CLOCK_STYLE) + this.startPauseButton.child.set_icon_name(ICON_NAMES.START); + this.startPauseButton.tooltip.set_text(BUTTON_TOOLTIPS.START); + this.showAllClockAdjustButtons(); - this.startPauseButton.tooltip.set_text(BUTTON_TOOLTIP_START) - this.set_applet_icon_symbolic_name('alarm-white'); + this.updateAppletIconColor(); }, clearTimer() { @@ -422,6 +401,16 @@ MyApplet.prototype = { } this.updateClockText(); + }, + + updateAppletIconColor() { + if (!this.appletIcon) return; + + if (!!this.timerId) { + this.appletIcon.style = `color: ${APPLET_ICON_GREEN};`; + } else { + this.appletIcon.style = null; + } } }; @@ -555,7 +544,7 @@ function getButton(iconName, style = '', isToggle = false) { function getClockDigit(text) { const label = new St.Label({ text, - style: 'font-size: 22px;', + style: `font-size: ${FONT_SIZE};` }); const bin = new St.Bin({ diff --git a/simple-timer@naheller/files/simple-timer@naheller/constants.js b/simple-timer@naheller/files/simple-timer@naheller/constants.js new file mode 100644 index 00000000000..829cad5ceb4 --- /dev/null +++ b/simple-timer@naheller/files/simple-timer@naheller/constants.js @@ -0,0 +1,67 @@ +const GLib = imports.gi.GLib; +const Gettext = imports.gettext; +const UUID = 'simple-timer@naheller'; + +Gettext.bindtextdomain(UUID, GLib.get_home_dir() + '/.local/share/locale'); + +function _(str) { + return Gettext.dgettext(UUID, str); +} + +const TIMER_INTERVAL_MS = 1000; + +const ONE_MIN_IN_SECONDS = 60; +const ONE_HOUR_IN_SECONDS = ONE_MIN_IN_SECONDS * 60; +const ONE_DAY_IN_SECONDS = ONE_HOUR_IN_SECONDS * 24; + +const BUTTON_TOOLTIPS = { + START: _('Start'), + RESUME: _('Resume'), + PAUSE: _('Pause'), + RESET: _('Reset'), + CLEAR: _('Clear') +}; + +// Found in /usr/share/icons//symbolic/ +const ICON_NAMES = { + START: 'media-playback-start-symbolic', + PAUSE: 'media-playback-pause-symbolic', + STOP: 'media-playback-stop-symbolic', + INCR: 'go-up-symbolic', + DECR: 'go-down-symbolic', + RESET: 'object-rotate-right-symbolic', + CLEAR: 'user-trash-symbolic' +}; + +const ICON_SIZE_LG = 20; +const ICON_SIZE_SM = 12; + +const NOTIFICATION_TITLE = _('Timer'); +const NOTIFICATION_MSG = _('Your timer is finished'); + +const DIGIT_NAMES = { + SECOND_TENS: 'SECOND_TENS', + SECOND_ONES: 'SECOND_ONES', + MINUTE_TENS: 'MINUTE_TENS', + MINUTE_ONES: 'MINUTE_ONES', + HOUR_TENS: 'HOUR_TENS', + HOUR_ONES: 'HOUR_ONES' +}; + +const CLOCK_INCREMENT = 'INCREMENT'; +const CLOCK_DECREMENT = 'DECREMENT'; + +const CLOCK_STYLES = { + DEFAULT: 'margin: 0 10px 10px 10px;', + ACTIVE: 'margin: 10px 10px 20px 10px;', + DIGIT_DEFAULT: 'margin: 0 10px 10px 10px;', + DIGIT_ACTIVE: 'margin: 10px 10px 20px 10px;', + BUTTON: 'width: 20px; padding: 10px 0;' +} + +const CONTROL_BUTTON_STYLE = 'width: 40px; padding: 10px;'; +const FONT_SIZE = '24px'; + +const APPLET_ICON_NAME = 'alarm'; +const APPLET_ICON_GREEN = '#00d173'; +const APPLET_ICON_TOOLTIP = _('Simple Timer'); \ No newline at end of file diff --git a/simple-timer@naheller/files/simple-timer@naheller/icons/alarm-green.svg b/simple-timer@naheller/files/simple-timer@naheller/icons/alarm-green.svg deleted file mode 100644 index 85c4a0a7516..00000000000 --- a/simple-timer@naheller/files/simple-timer@naheller/icons/alarm-green.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/simple-timer@naheller/files/simple-timer@naheller/icons/alarm-white.svg b/simple-timer@naheller/files/simple-timer@naheller/icons/alarm-white.svg deleted file mode 100644 index 18be8abecb6..00000000000 --- a/simple-timer@naheller/files/simple-timer@naheller/icons/alarm-white.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/simple-timer@naheller/files/simple-timer@naheller/metadata.json b/simple-timer@naheller/files/simple-timer@naheller/metadata.json index 9e51f89b900..a54fffff51d 100644 --- a/simple-timer@naheller/files/simple-timer@naheller/metadata.json +++ b/simple-timer@naheller/files/simple-timer@naheller/metadata.json @@ -1,7 +1,7 @@ { "uuid": "simple-timer@naheller", "name": "Simple Timer", - "version": "1.0.0", + "version": "1.0.1", "author": "naheller", - "description": "A simple timer that notifies you when it's finished" + "description": "A timer applet that offers a compact, minimal interface." } \ No newline at end of file diff --git a/simple-timer@naheller/screenshot.png b/simple-timer@naheller/screenshot.png index 6f5a9705fd4..97837253141 100644 Binary files a/simple-timer@naheller/screenshot.png and b/simple-timer@naheller/screenshot.png differ