Skip to content

Commit e02cd9e

Browse files
smashedrsmashedr
authored
Albums Support and Background Customization (#51)
* Albums Support and Background Customization * Update addContext * Update getAlbums * Add copyPassword function
1 parent 1735fe2 commit e02cd9e

File tree

5 files changed

+376
-168
lines changed

5 files changed

+376
-168
lines changed

‎src/css/options.css‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,28 @@
11
/* CSS for options.html */
22

3+
body {
4+
min-width: 360px;
5+
}
6+
37
video {
48
position: fixed;
5-
top: 50%;
6-
left: 50%;
7-
min-width: 100%;
8-
min-height: 100%;
9-
width: auto;
10-
height: auto;
11-
z-index: -100;
12-
transform: translateX(-50%) translateY(-50%);
13-
background: url('../media/loop.jpg') no-repeat;
14-
background-size: cover;
15-
filter: blur(150px);
9+
top: 0;
10+
left: 0;
11+
width: 100%;
12+
height: 100%;
13+
object-fit: cover;
14+
z-index: -1;
1615
}
1716

18-
.card {
19-
min-width: 360px;
20-
background: rgba(0 0 0 / 70%);
17+
.options-wrapper {
18+
background: rgba(0 0 0 / 50%);
19+
filter: drop-shadow(15px 15px 12px #000000);
20+
backdrop-filter: blur(6px);
21+
}
22+
23+
.input-group-text,
24+
.form-control {
25+
background: rgba(0 0 0 / 50%);
2126
}
2227

2328
table tr {

‎src/html/options.html‎

Lines changed: 140 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,14 @@
1212
</head>
1313
<body class="h-100">
1414

15-
<video poster="../media/loop.jpg" id="bgvid" class="d-none" playsinline autoplay muted loop>
16-
<source src="../media/loop.mp4" type="video/mp4">
15+
<video id="bgvid" class="d-none" playsinline autoplay muted loop>
16+
<!-- <source src="/media/loop.mp4" type="video/mp4">-->
1717
</video> <!-- video -->
1818

19-
<div class="container-fluid p-2 h-100">
19+
<div class="container-fluid g-0 h-100">
2020
<div class="d-flex align-items-center h-100">
2121
<div class="col-xl-8 col-lg-10 col-12 m-auto">
22-
<div class="card p-2 mb-2">
23-
<div class="card-body">
22+
<div class="options-wrapper p-3 ms-2 mt-2 mb-3 me-3 rounded rounded-4">
2423
<div class="d-flex justify-content-center align-items-center">
2524
<img src="../media/logo48.png" class="me-2" height="48" width="48"
2625
alt="Django Files Extension" title="Django Files Extension">
@@ -55,20 +54,19 @@ <h1>Django Files Options</h1>
5554
<label for="authToken" class="form-label"><i class="fa-solid fa-key me-2"></i> Auth Token</label>
5655
<div class="input-group col-12 ">
5756
<input id="authToken" aria-describedby="authTokenHelp" type="password" class="form-control" autocomplete="off">
58-
<button class="btn btn-outline-success show-hide" type="button" data-bs-toggle="tooltip" data-selector="#authToken" data-button="#authTokenCopy"
57+
<button class="btn btn-outline-success show-hide" type="button" data-bs-toggle="tooltip" data-selector="#authToken"
5958
data-bs-placement="bottom" data-bs-trigger="hover" data-bs-title="Show/Hide Auth Token.">
6059
<i class="fa-regular fa-eye"></i>
6160
</button>
62-
<button id="authTokenCopy" class="btn btn-outline-primary clip disabled" type="button"
63-
data-clipboard-target="#authToken" data-bs-toggle="tooltip"
64-
data-bs-placement="bottom" data-bs-trigger="hover" data-bs-title="Copy to Clipboard.">
61+
<button id="authTokenCopy" class="btn btn-outline-primary copy-password" type="button" data-selector="#authToken"
62+
data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-trigger="hover" data-bs-title="Copy to Clipboard.">
6563
<i class="fa-solid fa-copy"></i>
6664
</button>
6765
</div>
6866
<div class="form-text mb-3" id="authTokenHelp">Token From Django Files Settings.</div>
6967
</div>
7068

71-
<div class="row g-2">
69+
<div class="row g-2 mb-2">
7270
<div class="col-md-4 col-12 mb-2">
7371
<label for="recentFiles" class="form-label"><i class="fa-solid fa-list-ol me-2"></i> Recent Files</label>
7472
<input id="recentFiles" aria-describedby="recentFilesHelp" type="number" class="form-control" autocomplete="off">
@@ -86,132 +84,157 @@ <h1>Django Files Options</h1>
8684
</div>
8785
</div>
8886

89-
<div class="my-3">
90-
<div class="form-check form-switch mb-2">
91-
<input class="form-check-input" id="popupPreview" type="checkbox" role="switch">
92-
<label class="form-check-label" for="popupPreview" aria-describedby="popupPreviewHelp">
93-
Show Preview on Popup
94-
<span data-bs-toggle="tooltip" data-bs-title="Display Media Preview on Popup Mouseover.">
95-
<i class="fa-solid fa-circle-info ms-1"></i>
96-
</span>
97-
</label>
98-
</div>
87+
<div class="form-check form-switch mb-2">
88+
<input class="form-check-input" id="popupPreview" type="checkbox" role="switch">
89+
<label class="form-check-label" for="popupPreview" aria-describedby="popupPreviewHelp">
90+
Show Preview on Popup
91+
<span data-bs-toggle="tooltip" data-bs-title="Display Media Preview on Popup Mouseover.">
92+
<i class="fa-solid fa-circle-info ms-1"></i>
93+
</span>
94+
</label>
95+
</div>
9996

100-
<div class="form-check form-switch mb-2">
101-
<input class="form-check-input" id="popupIcons" type="checkbox" role="switch" data-related="iconOptions">
102-
<label class="form-check-label" for="popupIcons" aria-describedby="popupIconsHelp">
103-
Show File Icons in Popup
104-
<span data-bs-toggle="tooltip" data-bs-title="Show Private and Password Icons on Files in Popup.">
105-
<i class="fa-solid fa-circle-info ms-1"></i>
106-
</span>
97+
<div class="form-check form-switch mb-2">
98+
<input class="form-check-input" id="popupIcons" type="checkbox" role="switch" data-related="iconOptions">
99+
<label class="form-check-label" for="popupIcons" aria-describedby="popupIconsHelp">
100+
Show File Icons in Popup
101+
<span data-bs-toggle="tooltip" data-bs-title="Show Private and Password Icons on Files in Popup.">
102+
<i class="fa-solid fa-circle-info ms-1"></i>
103+
</span>
104+
</label>
105+
</div>
106+
<div id="iconOptions" class="ms-5 mb-2" style="display: none;">
107+
<div class="form-check form-check-inline">
108+
<input class="form-check-input" type="checkbox" id="iconPrivate" value="iconPrivate">
109+
<label class="form-check-label" for="iconPrivate">
110+
<i class="fa-solid fa-lock text-danger-emphasis"></i>
111+
<span class="visually-hidden">Private Icon</span>
107112
</label>
108113
</div>
109-
<div id="iconOptions" class="ms-5" style="display: none;">
110-
<div class="form-check form-check-inline">
111-
<input class="form-check-input" type="checkbox" id="iconPrivate" value="iconPrivate">
112-
<label class="form-check-label" for="iconPrivate">
113-
<i class="fa-solid fa-lock text-danger-emphasis"></i>
114-
<span class="visually-hidden">Private Icon</span>
115-
</label>
116-
</div>
117-
118-
<div class="form-check form-check-inline">
119-
<input class="form-check-input" type="checkbox" id="iconPassword" value="iconPassword">
120-
<label class="form-check-label text-warning-emphasis" for="iconPassword">
121-
<i class="fa-solid fa-key"></i>
122-
<span class="visually-hidden">Password Icon</span>
123-
</label>
124-
</div>
125-
<div class="form-check form-check-inline">
126-
<input class="form-check-input" type="checkbox" id="iconExpire" value="iconExpire">
127-
<label class="form-check-label" for="iconExpire">
128-
<i class="fa-solid fa-hourglass"></i>
129-
<span class="visually-hidden">Expire Icon</span>
130-
</label>
131-
</div>
132-
</div>
133-
134-
<div class="form-check form-switch mb-2">
135-
<input class="form-check-input" id="popupLinks" type="checkbox" role="switch">
136-
<label class="form-check-label" for="popupLinks" aria-describedby="popupLinksHelp">
137-
Show Django File Links in Popup
138-
<span data-bs-toggle="tooltip" data-bs-title="Show or Hide Django File Links in Popup.">
139-
<i class="fa-solid fa-circle-info ms-1"></i>
140-
</span>
114+
<div class="form-check form-check-inline">
115+
<input class="form-check-input" type="checkbox" id="iconPassword" value="iconPassword">
116+
<label class="form-check-label text-warning-emphasis" for="iconPassword">
117+
<i class="fa-solid fa-key"></i>
118+
<span class="visually-hidden">Password Icon</span>
141119
</label>
142120
</div>
143-
144-
<div class="form-check form-switch mb-2">
145-
<input class="form-check-input" id="checkAuth" type="checkbox" role="switch">
146-
<label class="form-check-label" for="checkAuth" aria-describedby="checkAuthHelp">
147-
Always Check for Site Auth
148-
<span data-bs-toggle="tooltip" data-bs-title="Always Query Current Site for Auth Credentials.">
149-
<i class="fa-solid fa-circle-info ms-1"></i>
150-
</span>
121+
<div class="form-check form-check-inline">
122+
<input class="form-check-input" type="checkbox" id="iconExpire" value="iconExpire">
123+
<label class="form-check-label" for="iconExpire">
124+
<i class="fa-solid fa-hourglass"></i>
125+
<span class="visually-hidden">Expire Icon</span>
151126
</label>
152127
</div>
128+
</div>
153129

154-
<div class="form-check form-switch mb-2">
155-
<input class="form-check-input" id="deleteConfirm" type="checkbox" role="switch">
156-
<label class="form-check-label" for="deleteConfirm" aria-describedby="deleteConfirmHelp">
157-
Show Confirmation on Delete
158-
<span data-bs-toggle="tooltip" data-bs-title="Show a File Delete Confirmation Dialog.">
159-
<i class="fa-solid fa-circle-info ms-1"></i>
160-
</span>
161-
</label>
162-
</div>
130+
<div class="form-check form-switch mb-2">
131+
<input class="form-check-input" id="popupLinks" type="checkbox" role="switch">
132+
<label class="form-check-label" for="popupLinks" aria-describedby="popupLinksHelp">
133+
Show Django File Links in Popup
134+
<span data-bs-toggle="tooltip" data-bs-title="Show or Hide Django File Links in Popup.">
135+
<i class="fa-solid fa-circle-info ms-1"></i>
136+
</span>
137+
</label>
138+
</div>
163139

164-
<div class="form-check form-switch mb-2">
165-
<input class="form-check-input" id="contextMenu" type="checkbox" role="switch">
166-
<label class="form-check-label" for="contextMenu" aria-describedby="contextMenuHelp">
167-
Enable Context Menu
168-
<span data-bs-toggle="tooltip" data-bs-title="Show Right Click Context Menu.">
169-
<i class="fa-solid fa-circle-info ms-1"></i>
170-
</span>
171-
</label>
172-
</div>
140+
<div class="form-check form-switch mb-2">
141+
<input class="form-check-input" id="checkAuth" type="checkbox" role="switch">
142+
<label class="form-check-label" for="checkAuth" aria-describedby="checkAuthHelp">
143+
Always Check for Site Auth
144+
<span data-bs-toggle="tooltip" data-bs-title="Always Query Current Site for Auth Credentials.">
145+
<i class="fa-solid fa-circle-info ms-1"></i>
146+
</span>
147+
</label>
148+
</div>
173149

174-
<div class="form-check form-switch mb-2">
175-
<input class="form-check-input" id="showUpdate" type="checkbox" role="switch">
176-
<label class="form-check-label" for="showUpdate" aria-describedby="showUpdateHelp">
177-
Show Release Notes on Update
178-
<span data-bs-toggle="tooltip" data-bs-title="Show Release Notes on Version Update.">
179-
<i class="fa-solid fa-circle-info ms-1"></i>
180-
</span>
181-
</label>
150+
<div class="form-check form-switch mb-2">
151+
<input class="form-check-input" id="deleteConfirm" type="checkbox" role="switch">
152+
<label class="form-check-label" for="deleteConfirm" aria-describedby="deleteConfirmHelp">
153+
Show Confirmation on Delete
154+
<span data-bs-toggle="tooltip" data-bs-title="Show a File Delete Confirmation Dialog.">
155+
<i class="fa-solid fa-circle-info ms-1"></i>
156+
</span>
157+
</label>
158+
</div>
159+
160+
<div class="form-check form-switch mb-2">
161+
<input class="form-check-input" id="contextMenu" type="checkbox" role="switch" data-related="reloadMenu">
162+
<label class="form-check-label" for="contextMenu" aria-describedby="contextMenuHelp">
163+
Enable Context Menu
164+
<span data-bs-toggle="tooltip" data-bs-title="Show Right Click Context Menu.">
165+
<i class="fa-solid fa-circle-info ms-1"></i>
166+
</span>
167+
</label>
168+
</div>
169+
<div id="reloadMenu" class="ms-5 mb-2" style="display: none;">
170+
<div class="d-flex align-items-center">
171+
<button id="reloadAlbums" class="btn btn-sm btn-outline-info" type="button">
172+
<i class="fa-solid fa-arrows-rotate"></i> Reload Albums
173+
</button>
174+
<span id="albumsUpdated" class="text-success" style="display: none;">
175+
<i class="fa-regular fa-circle-check fa-xl ms-3"></i>
176+
Updated
177+
</span>
182178
</div>
183179
</div>
184180

185-
<h5>
181+
<div class="form-check form-switch mb-2">
182+
<input class="form-check-input" id="showUpdate" type="checkbox" role="switch">
183+
<label class="form-check-label" for="showUpdate" aria-describedby="showUpdateHelp">
184+
Show Release Notes on Update
185+
<span data-bs-toggle="tooltip" data-bs-title="Show Release Notes on Version Update.">
186+
<i class="fa-solid fa-circle-info ms-1"></i>
187+
</span>
188+
</label>
189+
</div>
190+
191+
<h5 class="mb-2">
186192
Options Page Background
187193
<span class="small" data-bs-toggle="tooltip" data-bs-title="Disabled, Random Picture or Video Loop.">
188-
<i class="fa-solid fa-circle-info ms-1"></i>
189-
</span>
194+
<i class="fa-solid fa-circle-info ms-1"></i>
195+
</span>
190196
</h5>
191-
<div id="backgroundOptions" class="ms-3">
192-
<div class="form-check form-check-inline">
193-
<input class="form-check-input" type="radio" name="radioBackground" id="bgNone" value="none">
194-
<label class="form-check-label" for="bgNone">
195-
<i class="fa-regular fa-square"></i> None
196-
</label>
197-
</div>
198-
199-
<div class="form-check form-check-inline">
200-
<input class="form-check-input" type="radio" name="radioBackground" id="bgPicture" value="picture">
201-
<label class="form-check-label" for="bgPicture">
202-
<i class="fa-regular fa-image"></i> Picture
203-
</label>
197+
<div class="d-flex flex-column flex-md-row mb-2 align-items-md-center" style="min-height: 38px;">
198+
<div class="flex-grow-0 mt-md-0">
199+
<div class="ms-2 ms-md-0 mt-auto">
200+
<div class="d-grid d-sm-flex">
201+
<div class="form-check form-check-inline">
202+
<input class="form-check-input" type="radio" name="radioBackground" id="bgNone" value="none">
203+
<label class="form-check-label" for="bgNone">
204+
<i class="fa-regular fa-square"></i> None
205+
</label>
206+
</div>
207+
<div class="form-check form-check-inline">
208+
<input class="form-check-input" type="radio" name="radioBackground" id="bgPicture" value="picture">
209+
<label class="form-check-label" for="bgPicture">
210+
<i class="fa-regular fa-image"></i> Picture
211+
</label>
212+
</div>
213+
<div class="form-check form-check-inline">
214+
<input class="form-check-input" type="radio" name="radioBackground" id="bgVideo" value="video">
215+
<label class="form-check-label" for="bgVideo">
216+
<i class="fa-solid fa-video"></i> Video
217+
</label>
218+
</div>
219+
</div>
220+
</div>
204221
</div>
205-
<div class="form-check form-check-inline">
206-
<input class="form-check-input" type="radio" name="radioBackground" id="bgVideo" value="video">
207-
<label class="form-check-label" for="bgVideo">
208-
<i class="fa-solid fa-video"></i> Video
209-
</label>
222+
<div class="flex-fill mt-2 mt-md-0 ms-2 ms-md-0">
223+
<div id="bgPictureInput" class="input-group d-none">
224+
<span class="input-group-text" id="picture-addon" data-bs-toggle="tooltip" data-bs-title="URL to a Web Image or empty for default.">
225+
<i class="fa-solid fa-circle-info"></i></span>
226+
<input type="text" class="form-control" placeholder="Background Picture URL" aria-label="Background Picture URL"
227+
id="pictureURL" name="pictureURL" aria-describedby="picture-addon">
228+
</div>
229+
<div id="bgVideoInput" class="input-group d-none">
230+
<span class="input-group-text" id="video-addon" data-bs-toggle="tooltip" data-bs-title="URL to a Web Video or empty for default.">
231+
<i class="fa-solid fa-circle-info"></i></span>
232+
<input type="text" class="form-control" placeholder="Background Video URL" aria-label="Background Video URL"
233+
id="videoURL" name="videoURL" aria-describedby="video-addon">
234+
</div>
210235
</div>
211236
</div>
212-
213237
</form>
214-
215238
<hr>
216239
<div class="text-center">
217240
<a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"
@@ -223,8 +246,7 @@ <h5>
223246
<a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"
224247
href="https://django-files.github.io/">Django Files</a>
225248
</div>
226-
</div> <!-- card-body -->
227-
</div> <!-- card -->
249+
</div> <!-- options-wrapper -->
228250
</div> <!-- col -->
229251
</div> <!-- flex -->
230252
</div> <!-- container -->
@@ -242,7 +264,6 @@ <h5>
242264
<script type="text/javascript" src="../dist/polyfill/browser-polyfill.min.js"></script>
243265
<script type="text/javascript" src="../dist/jquery/jquery.min.js"></script>
244266
<script type="text/javascript" src="../dist/bootstrap/bootstrap.bundle.min.js"></script>
245-
<script type="text/javascript" src="../dist/clipboard/clipboard.min.js"></script>
246267
<script type="text/javascript" src="../js/options.js"></script>
247268

248269
</body>

0 commit comments

Comments
 (0)