Updates (#58)

* Update Options Layout

* Update Copy Selectors

* Update Options Page

* Add Uninstall URL and Issue Template

Author: smashedr

.github/ISSUE_TEMPLATE/0-bug.yaml

@@ -0,0 +1,29 @@
+name: "⚠️ Report an Issue"
+description: "Something Not Working Right? Please let us know..."
+labels: ["bug"]
+assignees:
+  - smashedr
+
+body:
+  - type: textarea
+    id: description
+    validations:
+      required: true
+    attributes:
+      label: Details
+      description: Please describe the issue you are experiencing and how to reproduce.
+      placeholder: Provide as many details as you can...
+
+  - type: textarea
+    id: logs
+    validations:
+      required: true
+    attributes:
+      label: Support Information
+      description: Open the extension options, scroll to the bottom, click Copy Support Information and paste below.
+      render: shell
+
+  - type: markdown
+    attributes:
+      value: |
+        All issues/bugs that we can verify will be fixed. Thank you for taking the time to make this report!

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,17 @@
+blank_issues_enabled: true
+contact_links:
+  - name: "💡 Request a Feature"
+    about: Request a New Feature or Enhancement in the Discussions.
+    url: https://github.com/django-files/web-extension/discussions/new?category=feature-requests
+
+  - name: "❔ Ask a Question"
+    about: Ask a General Question or start a Discussions.
+    url: https://github.com/django-files/web-extension/discussions/new?category=q-a
+
+  - name: "💬 Join Discord"
+    about: Chat with us about Issues, Features, Questions and More.
+    url: https://discord.gg/wXy6m2X8wY
+
+  - name: "📝 Submit Feedback"
+    about: Send General Feedback.
+    url: https://cssnr.github.io/feedback/?app=Django%20Files%20Extension

src/css/options.css

@@ -1,7 +1,7 @@
 /* CSS for options.html */
 
 body {
-    min-width: 360px;
+    min-width: 340px;
 }
 
 video {
@@ -14,17 +14,32 @@ video {
     z-index: -1;
 }
 
-.options-wrapper {
+#options-wrapper {
     background: rgba(0 0 0 / 50%);
     filter: drop-shadow(15px 15px 12px #000000);
     backdrop-filter: blur(6px);
+    max-width: 800px;
 }
 
-.input-group-text,
 .form-control {
     background: rgba(0 0 0 / 50%);
 }
 
 #table-wrapper {
     background: rgba(0 0 0 / 50%);
 }
+
+.hvr-grow {
+    display: inline-block;
+    vertical-align: middle;
+    transform: translateZ(0);
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+    backface-visibility: hidden;
+    -moz-osx-font-smoothing: grayscale;
+    transition-duration: 0.3s;
+    transition-property: transform;
+}
+
+.hvr-grow:hover {
+    transform: scale(1.1);
+}

src/html/options.html

@@ -16,51 +16,53 @@
 <!--    <source src="/media/loop.mp4" type="video/mp4">-->
 </video> <!-- video -->
 
-<div class="container-fluid g-0 h-100">
-<div class="d-flex align-items-center h-100">
-<div class="col-xl-8 col-lg-10 col-12 m-auto">
-<div class="options-wrapper p-3 ms-2 mt-2 mb-3 me-3 rounded rounded-4">
+<div class="d-flex align-items-center justify-content-center pt-3 px-1 px-sm-3 h-100">
+<div class="m-auto">
+<div id="options-wrapper" class="rounded rounded-4 p-3 mb-3 w-100">
+
     <div class="d-flex justify-content-center align-items-center">
         <img src="../media/logo48.png" class="me-2" height="48" width="48"
              alt="Django Files Extension" title="Django Files Extension">
-        <h1>Django Files Options</h1>
+        <h2>Django Files Options</h2>
     </div>
     <div class="clearfix"></div>
     <p class="text-center lead">v<span id="version"></span></p>
     <div id="table-wrapper" class="rounded rounded-3 p-2 mb-3 d-none">
-    <table id="keyboard-shortcuts" class="table table-sm table-borderless table-hover mb-0">
-        <caption class="visually-hidden">Keyboard Shortcuts</caption>
-        <thead class="visually-hidden"><tr><th>Description</th><th>Shortcut</th></tr></thead>
-        <tbody>
-        <tr class="d-none">
-            <td class="bg-transparent"><i class="fa-regular fa-keyboard me-1"></i> <span class="description"></span></td>
-            <td class="bg-transparent text-end" title="Keyboard Shortcut"><kbd>Unknown</kbd></td>
-        </tr>
-        </tbody>
-    </table>
+        <table id="keyboard-shortcuts" class="table table-sm table-borderless table-hover mb-0">
+            <caption class="visually-hidden">Keyboard Shortcuts</caption>
+            <thead class="visually-hidden"><tr><th>Description</th><th>Shortcut</th></tr></thead>
+            <tbody>
+            <tr class="d-none">
+                <td class="bg-transparent"><i class="fa-regular fa-keyboard me-1"></i> <span class="description"></span></td>
+                <td class="bg-transparent text-end" title="Keyboard Shortcut"><kbd>Unknown</kbd></td>
+            </tr>
+            </tbody>
+        </table>
     </div>
 
     <form id="options-form" class="options">
         <div class="row">
             <label for="siteUrl" class="form-label"><i class="fa-solid fa-globe me-2"></i> Django Files URL</label>
-            <div class="input-group col-12 ">
+            <div class="input-group col-12">
                 <input id="siteUrl" aria-describedby="siteUrlHelp" type="text" class="form-control" autocomplete="off">
-                <button class="btn btn-outline-primary clip" data-clipboard-target="#siteUrl" type="button" data-bs-toggle="tooltip"
-                        data-bs-placement="bottom" data-bs-trigger="hover" data-bs-title="Copy to Clipboard.">
+                <button class="btn btn-outline-primary" type="button" data-bs-toggle="tooltip"
+                        data-copy-input="#authToken" data-copy-text="Site URL Copied to Clipboard."
+                        data-bs-placement="bottom" data-bs-trigger="hover" data-bs-title="Copy Site URL.">
                     <i class="fa-solid fa-copy"></i>
                 </button>
             </div>
             <div class="form-text mb-3" id="siteUrlHelp" >The Full URL to your Django Files server.</div>
 
             <label for="authToken" class="form-label"><i class="fa-solid fa-key me-2"></i> Auth Token</label>
-            <div class="input-group col-12 ">
+            <div class="input-group col-12">
                 <input id="authToken" aria-describedby="authTokenHelp" type="password" class="form-control" autocomplete="off">
-                <button class="btn btn-outline-success show-hide" type="button" data-bs-toggle="tooltip" data-selector="#authToken"
+                <button class="btn btn-outline-success" type="button" data-bs-toggle="tooltip" data-show-hide="#authToken"
                         data-bs-placement="bottom" data-bs-trigger="hover" data-bs-title="Show/Hide Auth Token.">
                     <i class="fa-regular fa-eye"></i>
                 </button>
-                <button id="authTokenCopy" class="btn btn-outline-primary copy-password" type="button" data-selector="#authToken"
-                        data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-trigger="hover" data-bs-title="Copy to Clipboard.">
+                <button id="authTokenCopy" class="btn btn-outline-primary" type="button"
+                        data-copy-input="#authToken" data-copy-text="Auth Token Copied to Clipboard."
+                        data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-trigger="hover" data-bs-title="Copy Auth Token.">
                     <i class="fa-solid fa-copy"></i>
                 </button>
             </div>
@@ -181,20 +183,19 @@ <h1>Django Files Options</h1>
             <div class="form-check form-switch mb-2">
                 <input class="form-check-input" id="ctxSidePanel" type="checkbox" role="switch">
                 <label class="form-check-label" for="ctxSidePanel" aria-describedby="ctxSidePanelHelp">
-                    Show Open Side Panel in Menu
+                    Show Open Side Panel
                     <span data-bs-toggle="tooltip" data-bs-title="Show Side Panel in Menu.">
-                    <i class="fa-solid fa-circle-info ms-1"></i>
-                </span>
+                        <i class="fa-solid fa-circle-info ms-1"></i>
+                    </span>
                 </label>
             </div>
             <div class="d-flex align-items-center">
                 <button id="reloadAlbums" class="btn btn-sm btn-outline-info" type="button"
-                        data-bs-toggle="tooltip" data-bs-title="Requires Django Files >= 0.15.0. Errors are only show in the console (Ctrl+Shift+I).">
+                        data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-title="Requires Django Files >=0.15.0 and errors are only shown in the console (Ctrl+Shift+I).">
                     <i class="fa-solid fa-arrows-rotate"></i> Reload Albums
                 </button>
                 <span id="albumsUpdated" class="text-success"  style="display: none;">
-                    <i class="fa-regular fa-circle-check fa-xl ms-3"></i>
-                    Updated
+                    <i class="fa-regular fa-circle-check fa-xl fw-bold ms-3"></i>
                 </span>
             </div>
         </div> <!-- #reloadMenu -->
@@ -258,25 +259,26 @@ <h5 class="mb-2">
     </form> <!-- options-form -->
 
     <p class="fst-italic small mt-3">
-        <a id="copy-support" href="#0">Copy Support Information</a> for issue reporting.
+        <a id="copy-support" class="link-offset-2-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#0">
+            Copy Support Information</a> for issue reporting.
     </p>
 
     <hr class="mt-0">
 
     <div class="text-center">
         <a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"
-           href="https://github.com/django-files/web-extension?tab=readme-ov-file#readme">Get Help</a>
+           href="https://django-files.github.io/extension/">Get Help</a>
         <span class="mx-2">&bull;</span>
         <a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"
            href="https://github.com/django-files/web-extension/issues">Open Issue</a>
         <span class="mx-2">&bull;</span>
         <a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"
            href="https://django-files.github.io/">Django Files</a>
     </div>
+
 </div> <!-- options-wrapper -->
-</div> <!-- col -->
-</div> <!-- flex -->
-</div> <!-- container -->
+</div> <!-- m-auto -->
+</div> <!-- d-flex -->
 
 <div aria-live="polite" aria-atomic="true" class="">
     <div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>

src/js/options.js

@@ -16,11 +16,11 @@ document
     .querySelectorAll('[data-bs-toggle="tooltip"]')
     .forEach((el) => new bootstrap.Tooltip(el))
 document
-    .querySelectorAll('.show-hide')
+    .querySelectorAll('[data-show-hide]')
     .forEach((el) => el.addEventListener('click', showHidePassword))
 document
-    .querySelectorAll('.copy-password')
-    .forEach((el) => el.addEventListener('click', copyPassword))
+    .querySelectorAll('[data-copy-input]')
+    .forEach((el) => el.addEventListener('click', copyInput))
 document
     .getElementsByName('radioBackground')
     .forEach((el) => el.addEventListener('change', loginBackgroundChange))
@@ -71,10 +71,10 @@ async function reloadAlbums(event) {
     const icon = event.target.closest('i') || event.target.querySelector('i')
     console.debug('button:', button)
     console.debug('icon:', icon)
-    button.classList.add('disabled')
+    // button.classList.add('disabled')
     icon.classList.add('fa-spin')
     await chrome.runtime.sendMessage('createContextMenus')
-    button.classList.remove('disabled')
+    // button.classList.remove('disabled')
     icon.classList.remove('fa-spin')
     const albumsUpdated = $('#albumsUpdated')
     albumsUpdated.fadeToggle()
@@ -120,9 +120,6 @@ function setBackground(options) {
     if (options.radioBackground === 'bgPicture') {
         const url = options.pictureURL || 'https://picsum.photos/1920/1080'
         document.body.style.background = `url('${url}') no-repeat center fixed`
-        document.body.style.webkitBackgroundSize = 'cover'
-        document.body.style.mozBackgroundSize = 'cover'
-        document.body.style.oBackgroundSize = 'cover'
         document.body.style.backgroundSize = 'cover'
         video.classList.add('d-none')
     } else if (options.radioBackground === 'bgVideo') {
@@ -292,21 +289,26 @@ async function setShortcuts(selector = '#keyboard-shortcuts') {
 function showHidePassword(event) {
     console.debug('showHidePassword:', event)
     const element = event.target.closest('button')
-    const input = document.querySelector(element.dataset.selector)
+    const input = document.querySelector(element.dataset.showHide)
     if (input.type === 'password') {
         input.type = 'text'
     } else {
         input.type = 'password'
     }
 }
 
-async function copyPassword(event) {
-    console.debug('copyPassword:', event)
+async function copyInput(event) {
+    console.debug('copyInput:', event)
     const element = event.target.closest('button')
-    const input = document.querySelector(element.dataset.selector)
+    console.debug('element.dataset.copyInput:', element.dataset.copyInput)
+    const input = document.querySelector(element.dataset.copyInput)
     console.debug('input:', input)
     await navigator.clipboard.writeText(input.value)
-    // showToast('Copied to Clipboard.')
+    if (element.dataset.copyText) {
+        showToast(element.dataset.copyText)
+    } else {
+        showToast('Copied to Clipboard.')
+    }
 }
 
 /**

src/js/service-worker.js

@@ -35,6 +35,7 @@ async function onInstalled(details) {
     console.log('onInstalled:', details)
     const githubURL = 'https://github.com/django-files/web-extension'
     const installURL = 'https://django-files.github.io/extension/#configure'
+    const uninstallURL = new URL('https://django-files.github.io/uninstall/')
     const options = await Promise.resolve(
         setDefaultOptions({
             siteUrl: '',
@@ -63,11 +64,11 @@ async function onInstalled(details) {
     if (options.contextMenu) {
         createContextMenus(options)
     }
+    const manifest = chrome.runtime.getManifest()
     if (details.reason === 'install') {
         chrome.runtime.openOptionsPage()
         await chrome.tabs.create({ active: false, url: installURL })
     } else if (details.reason === 'update' && options.showUpdate) {
-        const manifest = chrome.runtime.getManifest()
         if (manifest.version !== details.previousVersion) {
             let { internal } = await chrome.storage.sync.get(['internal'])
             internal = internal || {}
@@ -81,7 +82,9 @@ async function onInstalled(details) {
             }
         }
     }
-    chrome.runtime.setUninstallURL(`${githubURL}/issues`)
+    uninstallURL.searchParams.append('version', manifest.version)
+    console.log('uninstallURL:', uninstallURL.href)
+    await chrome.runtime.setUninstallURL(uninstallURL.href)
 }
 
 /**