Skip to content

Commit 65de0a4

Browse files
smashedrsmashedr
authored
Update Popup (#21)
* Update popupLinks * Update Options * Update popupLinks Selector * Fix Lint * Update .eslintrc.json * Update .eslintrc.json * Update Catch * Tweaks * Fix Badge * Fix Popup Margins
1 parent 4d98a0c commit 65de0a4

File tree

10 files changed

+140
-117
lines changed

10 files changed

+140
-117
lines changed

‎.eslintrc.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,9 @@
1010
"ecmaVersion": "latest",
1111
"sourceType": "module"
1212
},
13-
"rules": {}
13+
"rules": {
14+
"no-empty": "off",
15+
"no-extra-semi": "off",
16+
"no-undef": "off"
17+
}
1418
}

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
[![Build](https://github.com/django-files/web-extension/actions/workflows/build.yaml/badge.svg)](https://github.com/django-files/web-extension/actions/workflows/build.yaml)
88
[![Test](https://github.com/django-files/web-extension/actions/workflows/test.yaml/badge.svg)](https://github.com/django-files/web-extension/actions/workflows/test.yaml)
99
[![Codacy Badge](https://app.codacy.com/project/badge/Grade/7842944ada6b4c7ebb4f9dc83ed6a654)](https://app.codacy.com/gh/django-files/web-extension/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade)
10-
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=django-files_django-files&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=django-files_django-files)
10+
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=django-files_web-extension&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=django-files_web-extension)
1111
# Django Files Web Extension
1212

1313
[Chrome](https://chromewebstore.google.com/detail/django-files/abpbiefojfkekhkjnpakpekkpeibnjej) Web Extension and

‎src/css/options.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/* CSS for options.html */
2+
13
body {
24
margin: 0;
35
background: #000;
@@ -18,6 +20,10 @@ video {
1820
transition: 1s opacity;
1921
}
2022

23+
.card {
24+
min-width: 380px;
25+
}
26+
2127
.card,
2228
table tr {
2329
background: rgba(0 0 0 / 30%);

‎src/css/popup.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/* CSS for popup.html */
2+
13
body {
24
width: 380px;
35
overflow-x: hidden;

‎src/html/options.html‎

Lines changed: 76 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -14,69 +14,85 @@
1414
</video>
1515

1616
<div class="container-fluid p-2 h-100">
17-
<div class="d-flex align-items-center h-100">
18-
<div class="col-xl-6 col-md-8 col-12 m-auto">
19-
<div class="card p-2 mb-3" >
20-
21-
<div class="justify-content-center align-items-center d-flex">
22-
<img src="../media/logo48.png" class="img-fluid float-start me-2" alt="Link Extractor" height="48" width="48">
23-
<h1 class="align-middle">Django Files Extension</h1>
24-
</div>
25-
<div class="clearfix"></div>
26-
<p class="text-center lead mb-0">v<span id="version"></span></p>
27-
<div class="card-body">
28-
<table class="table table-sm table-borderless">
29-
<caption class="visually-hidden">Keyboard Shortcuts</caption>
30-
<thead class="visually-hidden"><tr><th>Description</th><th>Shortcut</th></tr></thead>
31-
<tbody><tr>
32-
<td class="bg-transparent">Show Popup Action</td>
33-
<td class="bg-transparent text-end"><kbd id="mainKey">Unknown</kbd></td>
34-
</tr></tbody>
35-
</table>
36-
<form id="options-form" class="options">
37-
<div class="mb-2">
38-
<label for="siteUrl" class="form-label">Django Files URL</label>
39-
<input id="siteUrl" aria-describedby="siteUrlHelp" type="text" class="form-control" autocomplete="off">
40-
<div class="form-text" id="siteUrlHelp" >The Full URL to your Django Files server.</div>
41-
</div>
42-
<div class="mb-2">
43-
<label for="authToken" class="form-label">Auth Token</label>
44-
<input id="authToken" aria-describedby="authTokenHelp" type="password" class="form-control" autocomplete="off">
45-
<div class="form-text" id="authTokenHelp">Token From Django Files Settings.</div>
46-
</div>
47-
<div class="mb-2">
48-
<label for="recentFiles" class="form-label">Recent Files</label>
49-
<input id="recentFiles" aria-describedby="recentFilesHelp" type="number" class="form-control" autocomplete="off">
50-
<div class="form-text" id="recentFilesHelp">Recent Files (0-99) in Popup (0 to disable).</div>
51-
</div>
52-
<div class="form-check form-switch mb-2">
53-
<input class="form-check-input" id="contextMenu" type="checkbox" role="switch">
54-
<label class="form-check-label" for="contextMenu" aria-describedby="contextMenuHelp">Enable Right Click Menu</label>
55-
</div>
56-
<div class="form-check form-switch mb-2">
57-
<input class="form-check-input" id="checkAuth" type="checkbox" role="switch">
58-
<label class="form-check-label" for="checkAuth" aria-describedby="checkAuthHelp">Always Check for Site Auth</label>
59-
</div>
60-
<div class="form-check form-switch mb-2">
61-
<input class="form-check-input" id="showUpdate" type="checkbox" role="switch">
62-
<label class="form-check-label" for="showUpdate" aria-describedby="showUpdateHelp">Show Release Notes on Update</label>
63-
</div>
64-
</form>
65-
</div>
66-
<div class="text-center">
67-
<a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"
68-
href="https://github.com/django-files/chrome-extension#readme">Get Help</a>
69-
|
70-
<a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"
71-
href="https://github.com/django-files/chrome-extension">View Source</a>
72-
|
73-
<a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"
74-
href="https://django-files.github.io/">Django Files</a>
75-
</div>
17+
<div class="d-flex align-items-center h-100">
18+
<div class="col-xl-6 col-md-8 col-12 m-auto">
19+
<div class="card p-2 mb-3" >
20+
<div class="card-body">
21+
<div class="justify-content-center align-items-center d-flex">
22+
<img src="../media/logo48.png" class="img-fluid float-start me-2" alt="Link Extractor" height="48" width="48">
23+
<h1 class="align-middle">Django Files Extension</h1>
24+
</div>
25+
<div class="clearfix"></div>
26+
<p class="text-center lead">v<span id="version"></span></p>
27+
<table class="table table-sm table-borderless">
28+
<caption class="visually-hidden">Keyboard Shortcuts</caption>
29+
<thead class="visually-hidden"><tr><th>Description</th><th>Shortcut</th></tr></thead>
30+
<tbody><tr>
31+
<td class="bg-transparent">Show Popup Action <i class="fa-regular fa-keyboard ms-2"></i></td>
32+
<td class="bg-transparent text-end" title="Keyboard Shortcut"><kbd id="mainKey">Unknown</kbd></td>
33+
</tr></tbody>
34+
</table>
35+
<form id="options-form" class="options">
36+
<div class="mb-2">
37+
<label for="siteUrl" class="form-label"><i class="fa-solid fa-globe me-2"></i> Django Files URL</label>
38+
<input id="siteUrl" aria-describedby="siteUrlHelp" type="text" class="form-control" autocomplete="off">
39+
<div class="form-text" id="siteUrlHelp" >The Full URL to your Django Files server.</div>
40+
</div>
41+
<div class="mb-2">
42+
<label for="authToken" class="form-label"><i class="fa-solid fa-key me-2"></i> Auth Token</label>
43+
<input id="authToken" aria-describedby="authTokenHelp" type="password" class="form-control" autocomplete="off">
44+
<div class="form-text" id="authTokenHelp">Token From Django Files Settings.</div>
45+
</div>
46+
<div class="mb-2">
47+
<label for="recentFiles" class="form-label"><i class="fa-solid fa-list-ol me-2"></i> Recent Files</label>
48+
<input id="recentFiles" aria-describedby="recentFilesHelp" type="number" class="form-control" autocomplete="off">
49+
<div class="form-text" id="recentFilesHelp">Recent Files (0-99) in Popup (0 to disable).</div>
50+
</div>
51+
<div class="my-3">
52+
<div class="form-check form-switch mb-2">
53+
<input class="form-check-input" id="contextMenu" type="checkbox" role="switch">
54+
<label class="form-check-label" for="contextMenu" aria-describedby="contextMenuHelp">
55+
Enable Right Click Menu
56+
<span data-bs-toggle="tooltip" data-bs-title="Show Right Click Context Menu.">
57+
<i class="fa-solid fa-circle-info ms-1"></i>
58+
</span>
59+
</label>
60+
</div>
61+
<div class="form-check form-switch mb-2">
62+
<input class="form-check-input" id="checkAuth" type="checkbox" role="switch">
63+
<label class="form-check-label" for="checkAuth" aria-describedby="checkAuthHelp">
64+
Always Check for Site Auth
65+
<span data-bs-toggle="tooltip" data-bs-title="Always Query Current Site for Auth Credentials.">
66+
<i class="fa-solid fa-circle-info ms-1"></i>
67+
</span>
68+
</label>
69+
</div>
70+
<div class="form-check form-switch mb-2">
71+
<input class="form-check-input" id="showUpdate" type="checkbox" role="switch">
72+
<label class="form-check-label" for="showUpdate" aria-describedby="showUpdateHelp">
73+
Show Release Notes on Update
74+
<span data-bs-toggle="tooltip" data-bs-title="Show Release Notes on Version Update.">
75+
<i class="fa-solid fa-circle-info ms-1"></i>
76+
</span>
77+
</label>
7678
</div>
7779
</div>
80+
</form>
81+
<div class="text-center">
82+
<a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"
83+
href="https://github.com/django-files/chrome-extension#readme">Get Help</a>
84+
<i class="fa-solid fa-circle fa-2xs mx-2"></i>
85+
<a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"
86+
href="https://github.com/django-files/chrome-extension">View Source</a>
87+
<i class="fa-solid fa-circle fa-2xs mx-2"></i>
88+
<a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"
89+
href="https://django-files.github.io/">Django Files</a>
7890
</div>
79-
</div>
91+
</div> <!-- card-body -->
92+
</div> <!-- card -->
93+
</div> <!-- col -->
94+
</div> <!-- flex -->
95+
</div> <!-- container -->
8096

8197
<script type="text/javascript" src="../dist/polyfill/browser-polyfill.min.js"></script>
8298
<script type="text/javascript" src="../dist/jquery/jquery.min.js"></script>

‎src/html/popup.html‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,32 +11,31 @@
1111
<body>
1212

1313
<div class="container-fluid p-3">
14-
<div class="text-center">
15-
<img src="../media/logo32.png" class="float-start" alt="Django Files" height="32" width="32">
14+
<div class="d-flex align-items-center justify-content-center mb-1">
15+
<img src="../media/logo32.png" class="me-2" alt="Django Files" height="32" width="32">
1616
<h2>Django Files Extension</h2>
1717
</div>
18-
<div class="d-grid g-2" id="popup-buttons">
19-
<div id="django-files-links" class="btn-group btn-group-sm d-none" role="group" aria-label="Django Files Links">
20-
<a role="button" class="btn btn-outline-success" data-href="" data-location="/files/">
18+
<div class="d-grid g-2 gap-1 mb-1">
19+
<div id="django-files-links" class="d-none btn-group btn-group-sm" role="group" aria-label="Django Files Links">
20+
<a role="button" class="btn btn-outline-success" href="" data-location="/files/">
2121
<i class="fa-regular fa-folder-open me-2"></i> Files</a>
22-
<a role="button" class="btn btn-outline-success" data-href="" data-location="/gallery/">
22+
<a role="button" class="btn btn-outline-success" href="" data-location="/gallery/">
2323
<i class="fa-regular fa-images me-2"></i> Gallery</a>
2424
</div>
25-
<a class="btn btn-outline-primary btn-sm my-1" role="button" data-href="options">
25+
<a class="btn btn-outline-primary btn-sm" role="button" href="../html/options.html">
2626
<i class="fa-solid fa-gear me-2"></i> Open Options</a>
27+
<a id="auth-button" class="d-none btn btn-sm btn-success w-100" role="button">
28+
<i class="fa-solid fa-key"></i> Add Auth from Current Site</a>
2729
</div>
2830

29-
<a id="auth-button" class="btn btn-sm btn-success w-100 d-none" role="button">
30-
<i class="fa-solid fa-key"></i> Add Auth from Current Site</a>
31-
3231
<div id="loading-spinner" class="text-center mt-3">
3332
<i class="fa-solid fa-sync fa-spin fa-3x"></i>
3433
<p>Loading...</p>
3534
</div>
3635

37-
<div id="error-alert" class="alert text-center my-2 d-none" role="alert"></div>
36+
<div id="error-alert" class="d-none alert text-center my-2" role="alert"></div>
3837

39-
<table id="files-table" class="table table-striped table-hover table-sm small align-middle mt-1 mb-0 d-none">
38+
<table id="files-table" class="d-none table table-striped table-hover table-sm small align-middle mb-0">
4039
<caption class="visually-hidden">Recent Uploads</caption>
4140
<thead class="visually-hidden"><tr><th>Number</th><th>File URL</th></tr></thead>
4241
<tbody></tbody>

‎src/js/auth.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
// JS auth.js
22

3-
// eslint-disable-next-line no-extra-semi
43
;(async () => {
54
const credentials = getCredentials()
65
if (credentials) {

‎src/js/options.js‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,17 @@
22

33
document.addEventListener('DOMContentLoaded', initOptions)
44

5+
chrome.runtime.onMessage.addListener(onMessage)
6+
57
document
68
.querySelectorAll('input')
79
.forEach((el) => el.addEventListener('change', saveOptions))
810
document
911
.getElementById('options-form')
1012
.addEventListener('submit', (e) => e.preventDefault())
11-
12-
chrome.runtime.onMessage.addListener(onMessage)
13+
document
14+
.querySelectorAll('[data-bs-toggle="tooltip"]')
15+
.forEach((el) => new bootstrap.Tooltip(el))
1316

1417
/**
1518
* Options Init Function
@@ -34,6 +37,18 @@ async function initOptions() {
3437
commands.find((x) => x.name === '_execute_action').shortcut || 'Not Set'
3538
}
3639

40+
/**
41+
* On Message Callback
42+
* @function onMessage
43+
* @param {Object} message
44+
*/
45+
async function onMessage(message) {
46+
// console.log('onMessage: message, sender:', message, sender)
47+
if (message === 'reload-options') {
48+
window.location.reload()
49+
}
50+
}
51+
3752
/**
3853
* Save Options Callback
3954
* @function saveOptions
@@ -63,18 +78,6 @@ async function saveOptions(event) {
6378
await chrome.storage.sync.set({ options })
6479
}
6580

66-
/**
67-
* On Message Callback
68-
* @function onMessage
69-
* @param {Object} message
70-
*/
71-
async function onMessage(message) {
72-
// console.log('onMessage: message, sender:', message, sender)
73-
if (message === 'reload-options') {
74-
window.location.reload()
75-
}
76-
}
77-
7881
/**
7982
* Update Options
8083
* @function initOptions

0 commit comments

Comments
 (0)