Skip to content

Commit d7a4f71

Browse files
smashedrsmashedr
authored
Add Popup Options (#37)
* Add Options * Flush Out Popup Options * Add Option for DF Links * Tweak
1 parent 1fdba34 commit d7a4f71

File tree

7 files changed

+122
-63
lines changed

7 files changed

+122
-63
lines changed

‎manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"manifest_version": 3,
3-
"version": "0.4.1",
3+
"version": "0.4.2",
44
"name": "Django Files",
55
"description": "Django Files Web Extension designed to work with github.com/django-files/django-files.",
66
"homepage_url": "https://github.com/django-files/web-extension",

‎src/css/popup.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* CSS for popup.html */
22

33
body {
4-
width: 400px;
4+
width: 380px;
55
overflow-x: hidden;
66
}
77

@@ -15,7 +15,7 @@ body {
1515
}
1616

1717
ul.dropdown-menu {
18-
width: 240px;
18+
width: 260px;
1919
}
2020

2121
.hover-menu {

‎src/html/options.html‎

Lines changed: 33 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en" class="h-100" data-bs-theme="dark">
33
<head>
44
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
56
<title>Django Files Options</title>
67
<link rel="icon" href="../media/logo16.png" sizes="any">
78
<link rel="stylesheet" type="text/css" href="../dist/bootstrap/bootstrap.min.css">
@@ -17,7 +18,7 @@
1718

1819
<div class="container-fluid p-2 h-100">
1920
<div class="d-flex align-items-center h-100">
20-
<div class="col-xl-6 col-md-8 col-12 m-auto">
21+
<div class="col-xxl-8 col-lg-10 col-12 m-auto">
2122
<div class="card p-2 mb-2">
2223
<div class="card-body">
2324
<div class="d-flex justify-content-center align-items-center">
@@ -49,33 +50,47 @@ <h1>Django Files Options</h1>
4950
<input id="authToken" aria-describedby="authTokenHelp" type="password" class="form-control" autocomplete="off">
5051
<div class="form-text" id="authTokenHelp">Token From Django Files Settings.</div>
5152
</div>
52-
<div class="col-sm-6 col-12 mb-2">
53+
<div class="col-sm-4 col-12 mb-2">
5354
<label for="recentFiles" class="form-label"><i class="fa-solid fa-list-ol me-2"></i> Recent Files</label>
5455
<input id="recentFiles" aria-describedby="recentFilesHelp" type="number" class="form-control" autocomplete="off">
55-
<div class="form-text" id="recentFilesHelp">Popup Recent Files. 0 to Disable.</div>
56+
<div class="form-text" id="recentFilesHelp">Popup Recent Files. <span class="d-inline-block">0 to Disable.</span></div>
5657
</div>
57-
<div class="col-sm-6 col-12 mb-2">
58-
<label for="popupTimeout" class="form-label"><i class="fa-solid fa-stopwatch me-2"></i> Preview Timeout</label>
58+
<div class="col-sm-4 col-12 mb-2">
59+
<label for="popupWidth" class="form-label"><i class="fa-solid fa-arrows-left-right-to-line me-2"></i> Popup Width</label>
60+
<input id="popupWidth" aria-describedby="popupWidthHelp" type="number" class="form-control" autocomplete="off">
61+
<div class="form-text" id="popupWidthHelp">Popup Width in Pixels. <span class="d-inline-block">320-600.</span></div>
62+
</div>
63+
<div class="col-sm-4 col-12 mb-2">
64+
<label for="popupTimeout" class="form-label"><i class="fa-regular fa-clock me-2"></i> Preview Timeout</label>
5965
<input id="popupTimeout" aria-describedby="popupTimeoutHelp" type="number" class="form-control" autocomplete="off">
60-
<div class="form-text" id="popupTimeoutHelp">Popup Preview Timeout Seconds.</div>
66+
<div class="form-text" id="popupTimeoutHelp">Popup Preview Timeout in Seconds.</div>
6167
</div>
6268
</div>
6369

6470
<div class="my-3">
6571
<div class="form-check form-switch mb-2">
66-
<input class="form-check-input" id="contextMenu" type="checkbox" role="switch">
67-
<label class="form-check-label" for="contextMenu" aria-describedby="contextMenuHelp">
68-
Enable Right Click Menu
69-
<span data-bs-toggle="tooltip" data-bs-title="Show Right Click Context Menu.">
72+
<input class="form-check-input" id="popupPreview" type="checkbox" role="switch">
73+
<label class="form-check-label" for="popupPreview" aria-describedby="popupPreviewHelp">
74+
Show Preview on Popup
75+
<span data-bs-toggle="tooltip" data-bs-title="Display Media Preview on Popup Mouseover.">
7076
<i class="fa-solid fa-circle-info ms-1"></i>
7177
</span>
7278
</label>
7379
</div>
7480
<div class="form-check form-switch mb-2">
75-
<input class="form-check-input" id="popupPreview" type="checkbox" role="switch">
76-
<label class="form-check-label" for="popupPreview" aria-describedby="popupPreviewHelp">
77-
Show Preview on Popup
78-
<span data-bs-toggle="tooltip" data-bs-title="Display Media Preview on Popup Mouseover.">
81+
<input class="form-check-input" id="checkAuth" type="checkbox" role="switch">
82+
<label class="form-check-label" for="checkAuth" aria-describedby="checkAuthHelp">
83+
Always Check for Site Auth
84+
<span data-bs-toggle="tooltip" data-bs-title="Always Query Current Site for Auth Credentials.">
85+
<i class="fa-solid fa-circle-info ms-1"></i>
86+
</span>
87+
</label>
88+
</div>
89+
<div class="form-check form-switch mb-2">
90+
<input class="form-check-input" id="popupLinks" type="checkbox" role="switch">
91+
<label class="form-check-label" for="popupLinks" aria-describedby="popupLinksHelp">
92+
Show Django File Links in Popup
93+
<span data-bs-toggle="tooltip" data-bs-title="Show or Hide Django File Links in Popup.">
7994
<i class="fa-solid fa-circle-info ms-1"></i>
8095
</span>
8196
</label>
@@ -90,10 +105,10 @@ <h1>Django Files Options</h1>
90105
</label>
91106
</div>
92107
<div class="form-check form-switch mb-2">
93-
<input class="form-check-input" id="checkAuth" type="checkbox" role="switch">
94-
<label class="form-check-label" for="checkAuth" aria-describedby="checkAuthHelp">
95-
Always Check for Site Auth
96-
<span data-bs-toggle="tooltip" data-bs-title="Always Query Current Site for Auth Credentials.">
108+
<input class="form-check-input" id="contextMenu" type="checkbox" role="switch">
109+
<label class="form-check-label" for="contextMenu" aria-describedby="contextMenuHelp">
110+
Enable Context Menu
111+
<span data-bs-toggle="tooltip" data-bs-title="Show Right Click Context Menu.">
97112
<i class="fa-solid fa-circle-info ms-1"></i>
98113
</span>
99114
</label>

‎src/html/popup.html‎

Lines changed: 37 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
56
<title>Django Files</title>
67
<link rel="icon" href="../media/logo16.png" sizes="any">
78
<link rel="stylesheet" type="text/css" href="../dist/bootstrap/bootstrap.min.css">
@@ -14,7 +15,7 @@
1415

1516
<div id="media-outer" class="d-none position-fixed top-0 p-1 w-100">
1617
<img id="media-image" src="../media/loading.gif" alt="" class="d-block img-thumbnail rounded border-white mx-auto mw-100">
17-
<div id="media-error" class="d-flex align-items-center justify-content-center d-none">
18+
<div id="media-error" class="d-none d-flex align-items-center justify-content-center">
1819
<div class="alert alert-danger text-center d-inline-block" role="alert">
1920
<i class="fa-solid fa-triangle-exclamation me-2"></i> Error Loading Image!<br>
2021
Inspect Popup for More Details...
@@ -23,37 +24,43 @@
2324
</div>
2425

2526
<div class="container-fluid p-2">
26-
<div class=" mb-1">
27-
<div class="form-check form-switch float-start form-select-lg me-2 pb-0" style="padding-top: 1px;"
27+
28+
<div class="head mb-1">
29+
<div class="form-check form-switch float-start form-select-lg pb-0" style="padding-top: 1px;"
2830
data-bs-title="Disable/Enable Mouseover Preview." data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-trigger="hover">
2931
<input class="form-check-input" id="popupPreview" type="checkbox" role="switch">
3032
<label class="form-check-label visually-hidden" for="popupPreview" aria-describedby="popupPreviewHelp">Popup Preview</label>
3133
</div>
32-
<a id="always-auth" class="d-none btn btn-sm btn-outline-warning float-start add-auth" role="button"
34+
<a class="btn btn-sm btn-outline-primary float-end ms-2" role="button" href="../html/options.html" title="Options">
35+
<i class="fa-solid fa-gears"></i></a>
36+
<a id="always-auth" class="d-none btn btn-sm btn-outline-warning float-end add-auth" role="button"
3337
data-bs-title="Update Authentication with Current Site." data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-trigger="hover">
3438
<i class="fa-solid fa-key"></i></a>
35-
<a class="btn btn-sm btn-outline-primary float-end" role="button" href="../html/options.html" title="Options">
36-
<i class="fa-solid fa-gears"></i></a>
3739
<div class="d-flex align-items-center justify-content-center">
38-
<img src="../media/logo32.png" class="me-2" height="32" width="32" alt="Django Files" title="Django Files">
39-
<h3 class="my-0">Django Files</h3>
40+
<a class="" href=""><img src="../media/logo32.png" class="me-1" height="32" width="32" alt="Django Files"></a>
41+
<h3 class="my-0"><a role="button" class="link-body-emphasis text-decoration-none" href="">Django Files</a></h3>
4042
</div>
4143
</div>
4244

43-
<div class="d-grid g-2 gap-1 mb-1">
44-
<div id="django-files-links" class="d-none btn-group btn-group-sm" role="group" aria-label="Django Files Links">
45+
<div class="mb-1">
46+
<div id="django-files-links" class="d-none btn-group btn-group-sm w-100" role="group" aria-label="Django Files Links">
4547
<a role="button" class="btn btn-outline-success" href="" data-location="/files/">
4648
<i class="fa-regular fa-folder-open me-2"></i> Files</a>
4749
<a role="button" class="btn btn-outline-success" href="" data-location="/gallery/">
4850
<i class="fa-regular fa-images me-2"></i> Gallery</a>
4951
<a role="button" class="btn btn-outline-success" href="" data-location="/uppy/">
5052
<i class="fa-solid fa-upload me-2"></i> Upload</a>
5153
</div>
52-
<a id="auth-button" class="d-none btn btn-lg btn-success w-100 my-2 add-auth" role="button">
53-
<i class="fa-solid fa-key"></i> Add Auth from Current Site</a>
5454
</div>
5555

56-
<div id="error-alert" class="d-none alert text-center my-2" role="alert"></div>
56+
<a id="auth-button" class="d-none btn btn-lg btn-success w-100 my-2 add-auth" role="button">
57+
<i class="fa-solid fa-key"></i> Add Auth from Current Site</a>
58+
59+
<div id="error-alert" class="d-none alert text-center p-1 my-2" role="alert"></div>
60+
<div id="auth-alert" class="d-none alert alert-success text-center p-1 my-2" role="alert">
61+
<i class="fa-solid fa-lightbulb me-2"></i>
62+
To automatically authenticate, visit your Django Files Website, then check back here...
63+
</div>
5764

5865
<table id="files-table" class="d-none table table-striped table-hover table-sm small align-middle mb-0">
5966
<caption class="visually-hidden">Recent Uploads</caption>
@@ -77,7 +84,7 @@ <h3 class="my-0">Django Files</h3>
7784
<i class="fa-solid fa-copy mx-1"></i></a>
7885
<a role="button" class="link-body-emphasis copy-link clip" title="Copy Link">
7986
<i class="fa-solid fa-copy mx-1"></i></a>
80-
<a role="button" class="link-body-emphasis ctx-button" title="Open Menu" data-bs-toggle="dropdown">
87+
<a role="button" class="link-body-emphasis ctx-button" data-bs-toggle="dropdown">
8188
<i class="fa-solid fa-bars"></i></a>
8289
</div>
8390

@@ -88,11 +95,11 @@ <h3 class="my-0">Django Files</h3>
8895
<input id="ctx-menu-row" type="hidden" value="">
8996

9097
<ul class="dropdown-menu py-1">
91-
<li class="small"><a class="dropdown-item clip copy-link">
98+
<li class="small d-none "><a class="dropdown-item clip copy-link">
9299
<i class="fa-solid fa-copy link-body-emphasis me-3"></i> Copy Share Link</a></li>
93-
<li class="small"><a class="dropdown-item clip copy-raw">
100+
<li class="small d-none "><a class="dropdown-item clip copy-raw">
94101
<i class="fa-regular fa-copy link-body-emphasis me-3"></i> Copy Raw Link</a></li>
95-
<li><hr class="dropdown-divider my-1"></li>
102+
<li class="d-none "><hr class="dropdown-divider my-1"></li>
96103
<li class="small"><a class="dropdown-item clip raw" href="">
97104
<i class="fa-solid fa-arrow-up-right-from-square link-body-emphasis me-3"></i> Open Raw File</a></li>
98105
<li class="small"><a class="dropdown-item" data-action="delete">
@@ -109,16 +116,16 @@ <h3 class="my-0">Django Files</h3>
109116
<span class="expr-text"></span></a>
110117
</li>
111118
</ul>
112-
</div> <!-- d-none -->
119+
</div> <!-- d-none clone -->
113120

114121
<div class="modal fade" id="delete-modal" tabindex="-1" aria-hidden="true">
115122
<div class="modal-dialog modal-dialog-centered">
116123
<div class="modal-content">
117-
<div class="modal-body text-center">
118-
<p>Are you sure you want to delete this file?</p>
119-
<p class="text-break"><kbd class="file-name"></kbd></p>
124+
<div class="modal-body text-center p-2">
125+
<p class="mb-1">Are you sure you want to delete this file?</p>
126+
<p class="text-break mb-1"><kbd class="file-name"></kbd></p>
120127
</div>
121-
<div class="modal-footer">
128+
<div class="modal-footer p-2">
122129
<button type="button" class="btn btn-danger me-auto" id="confirm-delete">
123130
<i class="fa-regular fa-trash-can me-2"></i> Delete</button>
124131
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
@@ -131,21 +138,21 @@ <h3 class="my-0">Django Files</h3>
131138
<div class="modal fade" id="expire-modal" tabindex="-1" aria-hidden="true">
132139
<div class="modal-dialog modal-dialog-centered">
133140
<div class="modal-content">
134-
<div class="modal-body">
135-
<p class="text-center">
141+
<div class="modal-body p-2">
142+
<p class="text-center mb-1">
136143
Set the file's expiration. <br>
137144
For examples, see
138145
<a href="https://github.com/onegreyonewhite/pytimeparse2#pytimeparse2-time-expression-parser" target="_blank" rel="noopener">
139146
this README.md</a>.
140147
</p>
141-
<p class="text-center text-break"><kbd class="file-name"></kbd></p>
148+
<p class="text-center text-break mb-1"><kbd class="file-name"></kbd></p>
142149
<form id="expire-form">
143150
<label for="expire-input" class="form-label"><i class="fa-solid fa-hourglass-start me-1"></i> Expiration</label>
144151
<input id="expire-input" aria-describedby="expire-input-help" class="form-control" type="text" autocomplete="off">
145152
<div class="form-text" id="expire-input-help" >File Expiration (Blank to Disable Expiration).</div>
146153
</form>
147154
</div>
148-
<div class="modal-footer">
155+
<div class="modal-footer p-2">
149156
<button type="submit" form="expire-form" class="btn btn-success me-auto">
150157
<i class="fa-regular fa-floppy-disk me-2"></i> Save</button>
151158
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
@@ -158,16 +165,16 @@ <h3 class="my-0">Django Files</h3>
158165
<div class="modal fade" id="password-modal" tabindex="-1" aria-hidden="true">
159166
<div class="modal-dialog modal-dialog-centered">
160167
<div class="modal-content">
161-
<div class="modal-body">
162-
<p class="text-center">Set the file's Password.</p>
163-
<p class="text-center text-break"><kbd class="file-name"></kbd></p>
168+
<div class="modal-body p-2">
169+
<p class="text-center mb-1">Set the file's Password.</p>
170+
<p class="text-center text-break mb-1"><kbd class="file-name"></kbd></p>
164171
<form id="password-form">
165172
<label for="password-input" class="form-label"><i class="fa-solid fa-key me-1"></i> Password</label>
166173
<input id="password-input" aria-describedby="password-input-help" class="form-control" type="text" autocomplete="off">
167174
<div class="form-text" id="password-input-help" >File Password (Blank to Disable Password).</div>
168175
</form>
169176
</div>
170-
<div class="modal-footer">
177+
<div class="modal-footer p-2">
171178
<button type="submit" form="password-form" class="btn btn-success me-auto">
172179
<i class="fa-regular fa-floppy-disk me-2"></i> Save</button>
173180
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">

‎src/js/options.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,11 +66,21 @@ async function saveOptions(event) {
6666
options[event.target.id] = event.target.value
6767
} else if (event.target.type === 'number') {
6868
const number = parseInt(event.target.value, 10)
69-
if (!isNaN(number) && number >= 0 && number <= 99) {
69+
let min = 0
70+
let max = 60
71+
if (event.target.id === 'recentFiles') {
72+
max = 99
73+
} else if (event.target.id === 'popupWidth') {
74+
min = 320
75+
max = 600
76+
}
77+
if (!isNaN(number) && number >= min && number <= max) {
7078
event.target.value = number.toString()
7179
options[event.target.id] = number
7280
} else {
7381
event.target.value = options[event.target.id]
82+
// TODO: Add Error Handling
83+
// showToast(`Value ${number} Out of Range for ${event.target.id}`,'warning')
7484
}
7585
} else {
7686
options[event.target.id] = event.target.value

0 commit comments

Comments
 (0)