Skip to content

Commit

Permalink
feat(settings): New settings layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@tcrammond @shantanuraj
tcrammond authored and shantanuraj committed Mar 25, 2019
1 parent 3b54049 commit aeef91d
Show file tree
Hide file tree
Showing 3 changed files with 245 additions and 148 deletions.
274 changes: 166 additions & 108 deletions src/html/settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<ul class="tab-links">
<li class="tab-link">General</li>
<li class="tab-link">Pomodoro Timer</li>
<li class="tab-link">Permissions</li>
<li class="tab-link">Integrations</li>
<li class="tab-link">Telemetry</li>
</ul>
</header>
Expand Down Expand Up @@ -55,121 +55,179 @@
</div>
<div class="tabs">
<div class="tab tab-1">
<ul class="list">
<li>
<label for="default-project">Default Project</label>
<div id="default-project-container">
<div class="fields">
<div class="field">
<div class="field__label">
<label for="default-project">Default Project</label>
<div class="description">The default project will be selected when timer is started with no matched project</div>
</div>
<div class="description">The default project will be selected when timer is started with no matched project</div>
</li>
<li>
<label for="remember-project-per">Remember project per</label>
<select id="remember-project-per">
<option value="false">Use global default</option>
<option value="service">Service</option>
<option value="url">URL</option>
</select>
<div class="description">This will remember the last project used on each service/url separately. Overrides default project.</div>
</li>
<li>
<input type="checkbox" id="enable-auto-tagging">
<label for="enable-auto-tagging">Enable automatic tagging</label>
<div class="description">If a service supports tags or labels, this setting will automatically add them to the timer and create them in Toggl. Not available in all services.</div>
</li>
<li>
<input type="checkbox" id="show_right_click_button">
<label for="show_right_click_button">Show "Start timer" item in right click menu</label>
<div class="description">Makes it super easy to start timer with any copied text as description. If something is copied to clipboard you can start timer with that text. If clipboard is empty, page title is used as the description.</div>
</li>
<li>
<input type="checkbox" id="start_automatically">
<label for="start_automatically">Start automatically</label>
<div class="description">Start time tracking of latest task when the browser starts</div>
</li>
<li>
<input type="checkbox" id="stop_automatically">
<label for="stop_automatically">Stop automatically</label>
<div class="description">Stop time tracking when the browser is closed</div>
</li>
<li>
<input type="checkbox" id="show_post_start_popup">
<label for="show_post_start_popup">Show post-start popup</label>
<div class="description">Opens up edit form right after clicking "Start timer" link</div>
</li>
<li class="nag-nanny">
<input type="checkbox" id="nag-nanny">
<label for="nag-nanny">Remind me to track</label>
<p class="description">Shows reminder notification if user has forgot to start timer while working</p>
<div class="subsettings-details">
<span>Track activity on workdays</span>
<p>
<label for="nag-nanny-from">From:</label>
<input type="time" id="nag-nanny-from">
&nbsp;&nbsp;
<label for="nag-nanny-to">To:</label>
<input type="time" id="nag-nanny-to">
</p>
<p>
<label for="nag-nanny-interval">Minutes since stopping last Time Entry</label>
<input type="number" id="nag-nanny-interval" min="1">
</p>

<div>
<div id="default-project-container">
</div>
</div>
</li>
<li class="discard-notification">
<input type="checkbox" id="idle-detection">
<label for="discard-notification">Idle detection</label>
<div class="description">Shows notification when timer was tracking but user has been idle and allows to discard idle time</div>
</li>
<li class="stop-at-day-end">
<input type="checkbox" id="stop-at-day-end">
<label for="stop-at-day-end">Stop automatically at the end of the day</label>
<p class="description">The timer will be stopped automatically at this time of day</p>
<div class="subsettings-details">
<p>
<label for="day-end-time">End of day time:</label>
<input type="time" id="day-end-time">
</p>
</div>

<div class="field">
<div class="field__label">
<label for="remember-project-per">Remember last chosen project</label>
<div class="description">Remembers the last project you used on each integration or URL. Overrides the default project.</div>
</div>
</li>
<li class="danger-zone">
<hr />
<h3>Danger Zone</h3>
<button id="reset-all-settings">Reset all settings to default</button>
<p><strong>This action is irreversible.</strong> All Toggl Button settings will be reset and you will be logged out.</p>
</li>
</ul>

<div>
<select id="remember-project-per">
<option value="false">Use global default</option>
<option value="service">Service</option>
<option value="url">URL</option>
</select>
</div>
</div>

<div class="field">
<div class="field__label">
<label for="enable-auto-tagging">Enable automatic tagging</label>
<div class="description">If an integration supports tags or labels, automatically add them to the timer and
create them in Toggl. Not available in all integrations.</div>
</div>

<div>
<input type="checkbox" id="enable-auto-tagging">
</div>
</div>

<hr />

<div class="field">
<div class="field__label">
<label for="start_automatically">Start timer automatically</label>
<div class="description">Starts the timer with the most recent task when the browser is opened</div>
</div>
<div>
<input type="checkbox" id="start_automatically">
</div>
</div>

<div class="field">
<div class="field__label">
<label for="stop_automatically">Stop timer automatically</label>
<div class="description">Stops the timer when the browser is closed</div>
</div>
<div>
<input type="checkbox" id="stop_automatically">
</div>
</div>

<div class="field nag-nanny">
<div class="field__label">
<label for="nag-nanny">Remind me to track time</label>
<div class="description">Receive a notification if you forget to track time during work hours</div>
<div class="subsettings-details">
On weekdays from <input type="time" id="nag-nanny-from"> to <input type="time" id="nag-nanny-to">&nbsp;, after <input type="number" id="nag-nanny-interval" min="1"> minutes since the last time entry was stopped.
</div>
</div>
<div>
<input type="checkbox" id="nag-nanny">
</div>
</div>

<div class="field">
<div class="field__label">
<label for="discard-notification">Idle detection</label>
<div class="description">Receive a notification when you've been idle and the timer was running, allowing you to discard the time.</div>
</div>
<div>
<input type="checkbox" id="idle-detection">
</div>
</div>

<div class="field stop-at-day-end">
<div class="field__label">
<label for="stop-at-day-end">Stop timer automatically at the end of the day</label>
<div class="description">The timer will be stopped automatically when your day ends</div>
<div class="subsettings-detail">
<div class="subsettings-details">
<label for="day-end-time">End of day time:</label>
<input type="time" id="day-end-time">
</div>
</div>
</div>

<div>
<input type="checkbox" id="stop-at-day-end">
</div>
</div>

<hr />

<div class="field">
<div class="field__label">
<label for="show_post_start_popup">Show post-start popup</label>
<div class="description">Opens the edit form immediately after clicking a "Start timer" link</div>
</div>
<div>
<input type="checkbox" id="show_post_start_popup">
</div>
</div>

<div class="field">
<div class="field__label">
<label for="show_right_click_button">Show "Start timer" item in right click menu</label>
<div class="description">Makes it super easy to start a timer with any highlighted text. If you highlight text on the page, you can start a timer for it in the right-click menu. If nothing is selected, page title is used as the description.</div>
</div>
<div>
<input type="checkbox" id="show_right_click_button">
</div>
</div>

<div class="field danger-zone">
<div class="field__label">
<h3>Reset all settings</h3>
<p><strong>This action is irreversible.</strong> All Toggl Button settings will be reset and you will be logged out.</p>
</div>
<div>
<button id="reset-all-settings">Reset all settings to default</button>
</div>
</div>
</div>

</div>
<div class="tab tab-2">
<ul class="list">
<li class="pomodoro-mode">
<input type="checkbox" id="pomodoro-mode">
<label for="pomodoro-mode">Enable Pomodoro Timer</label>
<p class="description">Allows user to define Pomodoro Timer interval. Pomodoro timer starts running every time a time entry is started. At the end of the interval the user is shown notification to take a break.
User can set an option to stop or continue time tracking when pomodoro timer ends.</p>
<div class="subsettings-details">
<p>
<label for="pomodoro-interval">Pomodoro timer interval in minutes</label>
<input type="number" id="pomodoro-interval" min="1">
</p>
<p>
<input type="checkbox" id="pomodoro-stop-time">
<label for ="pomodoro-stop-time">Stop time tracking when pomodoro time ends</label>
</p>
<div class="pomodoro-sound">
<input type="checkbox" id="enable-sound-signal">
<label for="enable-sound-signal">Enable sound notification at the end of an interval</label>

<p class="pomodoro-sound-volume">
<label for="sound-volume">Sound volume</label>
<input type="range" id="sound-volume">
<span id="volume-label">100%</span>
<br>
<button id="sound-test">Test &#9658;</button>
<div class="fields">
<div class="field pomodoro-mode">
<div class="field__label">
<label for="pomodoro-mode">Enable Pomodoro Timer</label>
<div class="description">A Pomodoro timer is started when you start a time entry. At the end of the Pomodoro interval, you will receive a notification to take a break.</div>

<div class="subsettings-details">
<div>
<label for="pomodoro-interval">Pomodoro timer interval in minutes</label>
<input type="number" id="pomodoro-interval" min="1">
</div>
<p>
<input type="checkbox" id="pomodoro-stop-time">
<label for="pomodoro-stop-time">Stop time tracking when pomodoro time ends</label>
</p>
<div class="pomodoro-sound">
<input type="checkbox" id="enable-sound-signal">
<label for="enable-sound-signal">Enable sound notification at the end of an interval</label>

<p class="pomodoro-sound-volume">
<label for="sound-volume">Sound volume</label>
<input type="range" id="sound-volume">
<span id="volume-label">100%</span>
<button id="sound-test">Test &#9658;</button>
</p>
</div>
</div>

</div>
<div>
<input type="checkbox" id="pomodoro-mode">

</div>
</div>
</li>
<ul>

</div>
</div>
<div class="tab tab-3">
<div class="section">
Expand Down
7 changes: 7 additions & 0 deletions src/scripts/settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,8 @@ const Settings = {
);
Settings.toggleState(Settings.$postPopup, showPostPopup);
Settings.toggleState(Settings.$nanny, nannyCheckEnabled);
document.querySelector('.field.nag-nanny').classList.toggle('field--showDetails', nannyCheckEnabled);

Settings.toggleState(
Settings.$idleDetection,
idleDetectionEnabled
Expand All @@ -103,6 +105,7 @@ const Settings = {
Settings.$pomodoroMode,
pomodoroModeEnabled
);
document.querySelector('.field.pomodoro-mode').classList.toggle('field--showDetails', pomodoroModeEnabled);
Settings.toggleState(
Settings.$pomodoroSound,
pomodoroSoundEnabled
Expand Down Expand Up @@ -131,6 +134,7 @@ const Settings = {

Settings.toggleState(Settings.$stopAtDayEnd, stopAtDayEnd);
document.querySelector('#day-end-time').value = dayEndTime;
document.querySelector('.field.stop-at-day-end').classList.toggle('field--showDetails', stopAtDayEnd);

Settings.fillDefaultProject();

Expand Down Expand Up @@ -712,6 +716,7 @@ document.addEventListener('DOMContentLoaded', async function (e) {
Settings.$nanny.addEventListener('click', async function (e) {
const nannyCheckEnabled = await db.get('nannyCheckEnabled');
Settings.toggleSetting(e.target, !nannyCheckEnabled, 'toggle-nanny');
document.querySelector('.field.nag-nanny').classList.toggle('field--showDetails', !nannyCheckEnabled);
});
Settings.$idleDetection.addEventListener('click', async function (e) {
const idleDetectionEnabled = await db.get('idleDetectionEnabled');
Expand All @@ -720,6 +725,7 @@ document.addEventListener('DOMContentLoaded', async function (e) {
Settings.$pomodoroMode.addEventListener('click', async function (e) {
const pomodoroModeEnabled = await db.get('pomodoroModeEnabled');
Settings.toggleSetting(e.target, !pomodoroModeEnabled, 'toggle-pomodoro');
document.querySelector('.field.pomodoro-mode').classList.toggle('field--showDetails', !pomodoroModeEnabled);
});
Settings.$pomodoroSound.addEventListener('click', async function (e) {
const pomodoroSoundEnabled = await db.get('pomodoroSoundEnabled');
Expand All @@ -733,6 +739,7 @@ document.addEventListener('DOMContentLoaded', async function (e) {
Settings.$stopAtDayEnd.addEventListener('click', async function (e) {
const stopAtDayEnd = await db.get('stopAtDayEnd');
Settings.toggleSetting(e.target, !stopAtDayEnd, 'toggle-stop-at-day-end');
document.querySelector('.field.stop-at-day-end').classList.toggle('field--showDetails', !stopAtDayEnd);
});

Settings.$rememberProjectPer.addEventListener('change', function (e) {
Expand Down
Loading

0 comments on commit aeef91d

Please sign in to comment.