Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Preferences screen redesigned #10

Merged
merged 2 commits into from
Mar 3, 2018
Merged

Preferences screen redesigned #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cce1977
Preferences screen redesigned
umpirsky Mar 3, 2018
208d2fc
Update manifest
umpirsky Mar 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,10 @@
},
"homepage": "https://github.com/umpirsky/chess-notifier",
"dependencies": {
"webextension-polyfill": "0.2.1"
"bootstrap": "^4.0.0",
"jquery": "^3.3.1",
"popper.js": "^1.12.9",
"webextension-polyfill": "^0.2.1"
},
"scripts": {
"build:firefox": "./bin/build firefox",
Expand Down
2 changes: 1 addition & 1 deletion src/manifest/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "Chess Notifier",
"description": "Get Chess.com browser notifications on your desktop.",
"version": "0.2.0",
"version": "0.2.1",
"manifest_version": 2,
"background": {
"scripts": [
Expand Down
73 changes: 49 additions & 24 deletions src/options.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="application/javascript" src="node_modules/webextension-polyfill/dist/browser-polyfill.min.js"></script>
</head>
<body>

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>

<body>
<div class="container">
<div class="py-5 text-center">
<h2>Preferences</h2>
<p class="lead">Configure Chess Notifier by filling the form below.</p>
</div>
<form>
<fieldset>
<div style="color: green; display: none;" id="status">Options saved.</div>
<legend>Options</legend>
<p>
<label for="access-token">Chess.com username</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="checking_interval">Checking interval</label>
<input type="number" name="checking_interval" id="checking_interval"> seconds
</p>
<p>
<label for="show_notifications">Show desktop notifications</label>
<input type="checkbox" name="show_notifications" id="show_notifications">
</p>
<button type="submit">Save</button>
</fieldset>
<div id="status" class="alert alert-success" style="display: none;" role="alert">Preferences saved.</div>
<div class="form-group row">
<label for="access-token" class="col-sm-3 col-form-label">Chess.com username</label>
<div class="col-sm-9">
<input placeholder="Chess.com username" class="form-control" type="text" name="username" id="username">
</div>
</div>
<div class="form-group row">
<label for="checking_interval" class="col-sm-3 col-form-label">Checking interval</label>
<div class="col-sm-6">
<div class="input-group">
<input placeholder="Checking interval" class="form-control" type="number" name="checking_interval" id="checking_interval">
<div class="input-group-append">
<span class="input-group-text">seconds</span>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-3">Notifications</div>
<div class="col-sm-9">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="show_notifications" id="show_notifications">
<label class="form-check-label" for="show_notifications">Show desktop notifications</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-9">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
<script src="options.js"></script>
</body>
</div>
<script type="application/javascript" src="node_modules/webextension-polyfill/dist/browser-polyfill.min.js"></script>
<script src="options.js"></script>
</body>

</html>