Updated

Removed browser settings from dashboard,
in favor of config tab in homepage.
With this even non-registered users can configure the uploader.

Fixed homepage breaking when URL uploader is disabled.

Updated fontello.
Added link, cog-alt, and floppy icons.

Better tabs design in homepage.

Bumped v1 & v3 version strings.

public/css/home.css

@@ -184,21 +184,23 @@
 }
 
 #tabs ul {
-  border-bottom: 1px solid #bdc3c7;
+  border-bottom: 1px solid #898b8d;
 }
 
-#tabs li:not(.is-active) a {
+#tabs li a {
   color: #bdc3c7;
+  border-bottom-color: #898b8d;
 }
 
-#tabs li:not(.is-active) a:hover {
-  color: #7f8c8d;
-  border-bottom-color: #7f8c8d;
-}
-
-.tabs li.is-active a {
-  border-bottom-color: #3794d2;
+#tabs.is-boxed li.is-active a {
   color: #3794d2;
+  background: #232629;
+  border-color: #898b8d;
+  border-bottom-color: #232629;
+}
+
+#tabs.is-boxed li:not(.is-active) a:hover {
+  background: #4d4d4d;
 }
 
 .tab-content {
@@ -207,6 +209,15 @@
   animation: fadeInOpacity .5s;
 }
 
+.tab-content .label {
+  color: #bdc3c7;
+  font-weight: normal;
+}
+
+#tab-config.tab-content form {
+  margin-bottom: .75rem;
+}
+
 .git-commit a {
   display: inline-block;
   word-break: break-all;

public/css/style.css

@@ -9,16 +9,22 @@ body {
   animation: fadeInOpacity .5s;
 }
 
-.title {
-  color: #eff0f1;
+@-webkit-keyframes fadeInOpacity {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
-.subtitle {
-  color: #bdc3c7;
+@keyframes fadeInOpacity {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
   }
-
-.subtitle strong {
-  color: #bdc3c7;
 }
 
 a {
@@ -33,6 +39,18 @@ hr {
   background-color: #898b8d;
 }
 
+.title {
+  color: #eff0f1;
+}
+
+.subtitle {
+  color: #bdc3c7;
+}
+
+.subtitle strong {
+  color: #bdc3c7;
+}
+
 .input.is-active,
 .input.is-focused,
 .input:active,
@@ -122,21 +140,3 @@ hr {
   -webkit-box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
   box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
 }
-
-@-webkit-keyframes fadeInOpacity {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeInOpacity {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}

public/js/dashboard.js

@@ -10,9 +10,7 @@ const lsKeys = {
     uploads: 'selectedUploads',
     uploadsAll: 'selectedUploadsAll',
     users: 'selectedUsers'
-  },
-  chunkSize: 'chunkSize',
-  parallelUploads: 'parallelUploads'
+  }
 }
 
 const page = {
@@ -169,11 +167,6 @@ page.prepareDashboard = function () {
     page.getAlbums()
   })
 
-  document.querySelector('#itemBrowserSettings').addEventListener('click', function () {
-    page.setActiveMenu(this)
-    page.browserSettings()
-  })
-
   document.querySelector('#itemFileLength').addEventListener('click', function () {
     page.setActiveMenu(this)
     page.changeFileLength()
@@ -1414,7 +1407,7 @@ page.submitAlbum = function (element) {
         return swal('An error occurred!', response.data.description, 'error')
       }
 
-    swal('Woohoo!', 'Album was created successfully', 'success')
+    swal('Woohoo!', 'Album was created successfully.', 'success')
     page.getAlbumsSidebar()
     page.getAlbums()
   }).catch(function (error) {
@@ -1465,111 +1458,6 @@ page.getAlbum = function (album) {
   page.getUploads({ album: album.id })
 }
 
-page.browserSettings = function () {
-  const selectionMap = { uploads: 'Selected uploads' }
-
-  if (page.permissions.moderator)
-    selectionMap.uploadsAll = 'Selected uploads (manager)'
-
-  if (page.permissions.admin)
-    selectionMap.users = 'Selected users'
-
-  let selectionSection = ''
-  const keys = Object.keys(selectionMap)
-  for (let i = 0; i < keys.length; i++)
-    selectionSection += `
-      <p>${selectionMap[keys[i]]}: ${page.selected[keys[i]].length}
-    `
-
-  const maxChunkSize = 95
-  const siBytes = localStorage[lsKeys.siBytes] !== '0'
-
-  page.dom.innerHTML = `
-    <h2 class="subtitle">Browser settings</h2>
-    <article class="message has-text-left">
-      <div class="message-body">
-        ${selectionSection}
-      </div>
-    </article>
-    <article class="message has-text-left">
-      <div class="message-body">
-        <form class="prevent-default" id="browserSettingsForm">
-          <div class="field">
-            <label class="label">File size unit</label>
-            <div class="control">
-              <label class="radio">
-                <input type="radio" name="siBytes" value="default"${siBytes ? ' checked' : ''}>
-                1 Kilobyte = 1 kB = 1000 B (default)
-              </label>
-            </div>
-            <div>
-              <label class="radio">
-                <input type="radio" name="siBytes" value="0"${siBytes ? '' : ' checked'}>
-                1 Kibibyte = 1 KiB = 1024 B
-              </label>
-            </div>
-          </div>
-          <div class="field">
-            <label class="label">Upload chunk size (MB)</label>
-            <div class="control">
-              <input class="input" type="number" name="chunkSize" min="0" max="${maxChunkSize}" step="5" value="${localStorage[lsKeys.chunkSize] || '0'}">
-            </div>
-            <p class="help">Default is 0, which means to use server's setting. Max is ${maxChunkSize} MB.</p>
-          </div>
-          <div class="field">
-            <label class="label">Parallel uploads</label>
-            <div class="control">
-              <input class="input" type="number" name="parallelUploads" min="0" value="${localStorage[lsKeys.parallelUploads] || '0'}">
-            </div>
-            <p class="help">Default is 0, which means to use hard-coded Dropzone setting.</p>
-          </div>
-          <div class="field is-grouped">
-            <p class="control">
-              <button type="submit" id="saveBrowserSettings" class="button is-breeze">
-                Save
-              </button>
-            </p>
-          </div>
-        </form>
-      </div>
-    </article>
-  `
-  page.fadeAndScroll()
-
-  document.querySelector('#saveBrowserSettings').addEventListener('click', function () {
-    const form = document.querySelector('#browserSettingsForm')
-
-    const prefKeys = ['siBytes']
-    for (let i = 0; i < prefKeys.length; i++) {
-      const value = form.elements[prefKeys[i]].value
-      if (value !== '0')
-        localStorage.removeItem(lsKeys[prefKeys[i]])
-      else
-        localStorage[lsKeys[prefKeys[i]]] = value
-    }
-
-    const numKeys = ['chunkSize', 'parallelUploads']
-    for (let i = 0; i < numKeys.length; i++) {
-      const parsed = parseInt(form.elements[numKeys[i]].value)
-      let value = isNaN(parsed) ? 0 : Math.max(parsed, 0)
-      if (numKeys[i] === 'chunkSize') value = Math.min(value, maxChunkSize)
-      value = Math.min(value, Number.MAX_SAFE_INTEGER)
-      if (value > 0)
-        localStorage[lsKeys[numKeys[i]]] = value
-      else
-        localStorage.removeItem(lsKeys[numKeys[i]])
-    }
-
-    swal({
-      title: 'Woohoo!',
-      text: 'Browser settings saved.',
-      icon: 'success'
-    }).then(function () {
-      page.browserSettings()
-    })
-  })
-}
-
 page.changeFileLength = function () {
   axios.get('api/filelength/config').then(function (response) {
     if (response.data.success === false)

public/js/home.js

@@ -3,8 +3,7 @@
 const lsKeys = {
   token: 'token',
   chunkSize: 'chunkSize',
-  parallelUploads: 'parallelUploads',
-  ufBehavior: 'ufBehavior'
+  parallelUploads: 'parallelUploads'
 }
 
 const page = {
@@ -20,6 +19,7 @@ const page = {
   // store album id that will be used with upload requests
   album: null,
 
+  parallelUploads: null,
   maxSizeBytes: null,
   urlMaxSize: null,
   urlMaxSizeBytes: null,
@@ -97,7 +97,6 @@ page.prepareUpload = function () {
   // I think this fits best here because we need to check for a valid token before we can get the albums
   if (page.token) {
     page.albumSelect = document.querySelector('#albumSelect')
-
     page.albumSelect.addEventListener('change', function () {
       page.album = parseInt(page.albumSelect.value)
     })
@@ -108,14 +107,11 @@ page.prepareUpload = function () {
     document.querySelector('#albumDiv').style.display = 'flex'
   }
 
+  page.prepareUploadConfig()
+
   document.querySelector('#maxSize').innerHTML = `Maximum upload size per file is ${page.getPrettyBytes(page.maxSizeBytes)}`
   document.querySelector('#loginToUpload').style.display = 'none'
 
-  const urlMaxSize = document.querySelector('#urlMaxSize')
-  page.urlMaxSize = parseInt(urlMaxSize.innerHTML)
-  page.urlMaxSizeBytes = page.urlMaxSize * 1e6
-  urlMaxSize.innerHTML = page.getPrettyBytes(page.urlMaxSizeBytes)
-
   if (!page.token && page.enableUserAccounts)
     document.querySelector('#loginLinkText').innerHTML = 'Create an account and keep track of your uploads'
 
@@ -125,22 +121,24 @@ page.prepareUpload = function () {
 
   page.prepareDropzone()
 
+  const urlMaxSize = document.querySelector('#urlMaxSize')
+  if (urlMaxSize) {
+    page.urlMaxSize = parseInt(urlMaxSize.innerHTML)
+    page.urlMaxSizeBytes = page.urlMaxSize * 1e6
+    urlMaxSize.innerHTML = page.getPrettyBytes(page.urlMaxSizeBytes)
+    document.querySelector('#uploadUrls').addEventListener('click', function () {
+      page.uploadUrls(this)
+    })
+  }
+
   const tabs = document.querySelector('#tabs')
-  if (tabs) {
   tabs.style.display = 'flex'
   const items = tabs.getElementsByTagName('li')
   for (let i = 0; i < items.length; i++)
     items[i].addEventListener('click', function () {
       page.setActiveTab(this.dataset.id)
     })
-
-    document.querySelector('#uploadUrls').addEventListener('click', function () {
-      page.uploadUrls(this)
-    })
   page.setActiveTab('tab-files')
-  } else {
-    document.querySelector('#tab-files').style.display = 'block'
-  }
 }
 
 page.prepareAlbums = function () {
@@ -202,21 +200,18 @@ page.prepareDropzone = function () {
       <span class="icon">
         <i class="icon-upload-cloud"></i>
       </span>
-      <span>Click here or drag and drop files</span>
+      <span>Click here or drag & drop files</span>
     </div>
   `
   tabDiv.querySelector('.dz-container').appendChild(div)
 
   const previewsContainer = tabDiv.querySelector('#tab-files .field.uploads')
 
-  const chunkSize = (localStorage[lsKeys.chunkSize] || parseInt(page.chunkSize)) * 1e6
-  const parallelUploads = localStorage[lsKeys.parallelUploads] || 2
-
   page.dropzone = new Dropzone('#dropzone', {
     url: 'api/upload',
     paramName: 'files[]',
     maxFilesize: page.maxSizeBytes / 1024 / 1024, // this option expects MiB
-    parallelUploads,
+    parallelUploads: page.parallelUploads,
     uploadMultiple: false,
     previewsContainer,
     previewTemplate: page.previewTemplate,
@@ -224,7 +219,7 @@ page.prepareDropzone = function () {
     autoProcessQueue: true,
     headers: { token: page.token },
     chunking: Boolean(page.chunkSize),
-    chunkSize, // the option below expects Bytes
+    chunkSize: page.chunkSize * 1e6, // the option below expects Bytes
     parallelChunkUploads: false, // when set to true, it often hangs with hundreds of parallel uploads
     chunksUploaded (file, done) {
       file.previewElement.querySelector('.progress').setAttribute('value', 100)
@@ -481,7 +476,7 @@ page.createAlbum = function () {
       option.innerHTML = name
       option.selected = true
 
-      swal('Woohoo!', 'Album was created successfully', 'success')
+      swal('Woohoo!', 'Album was created successfully.', 'success')
     }).catch(function (error) {
       console.log(error)
       return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
@@ -489,6 +484,65 @@ page.createAlbum = function () {
   })
 }
 
+page.prepareUploadConfig = function () {
+  const fallback = {
+    chunkSize: parseInt(page.chunkSize),
+    parallelUploads: 2
+  }
+  document.querySelector('#defaultChunkSize').innerHTML = `${fallback.chunkSize} MB`
+  document.querySelector('#defaultParallelUploads').innerHTML = `${fallback.parallelUploads}`
+
+  page.chunkSize = localStorage[lsKeys.chunkSize] || fallback.chunkSize
+  page.parallelUploads = localStorage[lsKeys.parallelUploads] || fallback.parallelUploads
+  document.querySelector('#chunkSize').value = page.chunkSize
+  document.querySelector('#parallelUploads').value = page.parallelUploads
+
+  const tabContent = document.querySelector('#tab-config')
+  const form = tabContent.querySelector('form')
+  form.addEventListener('submit', function (event) {
+    event.preventDefault()
+  })
+
+  const siBytes = localStorage[lsKeys.siBytes] !== '0'
+  if (!siBytes) document.querySelector('#siBytes').value = '0'
+
+  // Always display this in MB?
+  const maxChunkSize = 95
+  document.querySelector('#maxChunkSize').innerHTML = `${maxChunkSize} MB`
+  document.querySelector('#chunkSize').setAttribute('max', maxChunkSize)
+
+  document.querySelector('#saveConfig').addEventListener('click', function () {
+    const prefKeys = ['siBytes']
+    for (let i = 0; i < prefKeys.length; i++) {
+      const value = form.elements[prefKeys[i]].value
+      if (value !== '0' && value !== fallback[prefKeys[i]])
+        localStorage.removeItem(lsKeys[prefKeys[i]])
+      else
+        localStorage[lsKeys[prefKeys[i]]] = value
+    }
+
+    const numKeys = ['chunkSize', 'parallelUploads']
+    for (let i = 0; i < numKeys.length; i++) {
+      const parsed = parseInt(form.elements[numKeys[i]].value)
+      let value = isNaN(parsed) ? 0 : Math.max(parsed, 0)
+      if (numKeys[i] === 'chunkSize') value = Math.min(value, maxChunkSize)
+      value = Math.min(value, Number.MAX_SAFE_INTEGER)
+      if (value > 0 && value !== fallback[numKeys[i]])
+        localStorage[lsKeys[numKeys[i]]] = value
+      else
+        localStorage.removeItem(lsKeys[numKeys[i]])
+    }
+
+    swal({
+      title: 'Woohoo!',
+      text: 'Upload configuration saved.',
+      icon: 'success'
+    }).then(function () {
+      location.reload()
+    })
+  })
+}
+
 // Handle image paste event
 window.addEventListener('paste', function (event) {
   const items = (event.clipboardData || event.originalEvent.clipboardData).items

public/libs/fontello/fontello.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'fontello';
-  src: url('fontello.eot?13682569');
-  src: url('fontello.eot?13682569#iefix') format('embedded-opentype'),
-       url('fontello.woff2?13682569') format('woff2'),
-       url('fontello.woff?13682569') format('woff'),
-       url('fontello.ttf?13682569') format('truetype'),
-       url('fontello.svg?13682569#fontello') format('svg');
+  src: url('fontello.eot?tWLiAlAX5i');
+  src: url('fontello.eot?tWLiAlAX5i#iefix') format('embedded-opentype'),
+       url('fontello.woff2?tWLiAlAX5i') format('woff2'),
+       url('fontello.woff?tWLiAlAX5i') format('woff'),
+       url('fontello.ttf?tWLiAlAX5i') format('truetype'),
+       url('fontello.svg?tWLiAlAX5i#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -15,7 +15,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'fontello';
-    src: url('fontello.svg?13682569#fontello') format('svg');
+    src: url('fontello.svg?tWLiAlAX5i#fontello') format('svg');
   }
 }
 */
@@ -78,6 +78,9 @@
 .icon-terminal:before { content: '\e810'; } /* '' */
 .icon-hammer:before { content: '\e811'; } /* '' */
 .icon-block:before { content: '\e812'; } /* '' */
+.icon-link:before { content: '\e813'; } /* '' */
+.icon-cog-alt:before { content: '\e814'; } /* '' */
+.icon-floppy:before { content: '\e815'; } /* '' */
 .icon-privatebin:before { content: '\e817'; } /* '' */
 .icon-github-circled:before { content: '\f09b'; } /* '' */
 .icon-filter:before { content: '\f0b0'; } /* '' */

public/libs/fontello/fontello.svg

@@ -44,6 +44,12 @@
 
 <glyph glyph-name="block" unicode="&#xe812;" d="M732 352q0 90-48 164l-421-420q76-50 166-50 62 0 118 25t96 65 65 97 24 119z m-557-167l421 421q-75 50-167 50-83 0-153-40t-110-111-41-153q0-91 50-167z m682 167q0-88-34-168t-91-137-137-92-166-34-167 34-137 92-91 137-34 168 34 167 91 137 137 91 167 34 166-34 137-91 91-137 34-167z" horiz-adv-x="857.1" />
 
+<glyph glyph-name="link" unicode="&#xe813;" d="M813 171q0 23-16 38l-116 116q-16 16-38 16-24 0-40-18 1-1 10-10t12-12 9-11 7-14 2-15q0-23-16-38t-38-16q-8 0-15 2t-14 7-11 9-12 12-10 10q-19-17-19-40 0-23 16-38l115-116q15-15 38-15 22 0 38 15l82 81q16 16 16 37z m-393 394q0 22-15 38l-115 115q-16 16-38 16-22 0-38-15l-82-82q-16-15-16-37 0-22 16-38l116-116q15-15 38-15 23 0 40 17-2 2-11 11t-12 12-8 10-7 14-2 16q0 22 15 38t38 15q9 0 16-2t14-7 11-8 12-12 10-11q18 17 18 41z m500-394q0-66-48-113l-82-81q-46-47-113-47-68 0-114 48l-115 115q-46 47-46 114 0 68 49 116l-49 49q-48-49-116-49-67 0-114 47l-116 116q-47 47-47 114t47 113l82 82q47 46 114 46 67 0 114-47l115-116q46-46 46-113 0-69-49-117l49-49q48 49 116 49 67 0 114-47l116-116q47-47 47-114z" horiz-adv-x="928.6" />
+
+<glyph glyph-name="cog-alt" unicode="&#xe814;" d="M500 350q0 59-42 101t-101 42-101-42-42-101 42-101 101-42 101 42 42 101z m429-286q0 29-22 51t-50 21-50-21-21-51q0-29 21-50t50-21 51 21 21 50z m0 572q0 29-22 50t-50 21-50-21-21-50q0-30 21-51t50-21 51 21 21 51z m-215-235v-103q0-6-4-11t-8-6l-87-14q-6-19-18-42 19-27 50-64 4-6 4-11 0-7-4-11-12-17-46-50t-43-33q-7 0-12 4l-64 50q-21-11-43-17-6-60-13-87-4-13-17-13h-104q-6 0-11 4t-5 10l-13 85q-19 6-42 18l-66-50q-4-4-11-4-6 0-12 4-80 75-80 90 0 5 4 10 5 8 23 30t26 34q-13 24-20 46l-85 13q-5 1-9 5t-4 11v104q0 5 4 10t9 6l86 14q7 19 18 42-19 27-50 64-4 6-4 11 0 7 4 12 12 16 46 49t44 33q6 0 12-4l64-50q19 10 43 18 6 60 13 86 3 13 16 13h104q6 0 11-4t6-10l13-85q19-6 42-17l65 49q5 4 12 4 6 0 11-4 81-75 81-90 0-4-4-10-7-9-24-30t-25-34q13-27 19-46l85-12q6-2 9-6t4-11z m357-298v-78q0-9-83-17-6-15-16-29 28-63 28-77 0-2-2-4-68-40-69-40-5 0-26 27t-29 37q-11-1-17-1t-17 1q-7-11-29-37t-25-27q-1 0-69 40-3 2-3 4 0 14 29 77-10 14-17 29-83 8-83 17v78q0 9 83 18 7 16 17 29-29 63-29 77 0 2 3 4 2 1 19 11t33 19 17 9q4 0 25-26t29-38q12 1 17 1t17-1q28 40 51 63l4 1q2 0 69-39 2-2 2-4 0-14-28-77 9-13 16-29 83-9 83-18z m0 572v-78q0-9-83-18-6-15-16-29 28-63 28-77 0-2-2-4-68-39-69-39-5 0-26 26t-29 38q-11-1-17-1t-17 1q-7-12-29-38t-25-26q-1 0-69 39-3 2-3 4 0 14 29 77-10 14-17 29-83 9-83 18v78q0 9 83 17 7 16 17 29-29 63-29 77 0 2 3 4 2 1 19 11t33 19 17 9q4 0 25-26t29-37q12 1 17 1t17-1q28 39 51 62l4 1q2 0 69-39 2-2 2-4 0-14-28-77 9-13 16-29 83-8 83-17z" horiz-adv-x="1071.4" />
+
+<glyph glyph-name="floppy" unicode="&#xe815;" d="M214-7h429v214h-429v-214z m500 0h72v500q0 8-6 21t-11 20l-157 156q-5 6-19 12t-22 5v-232q0-22-15-38t-38-16h-322q-22 0-37 16t-16 38v232h-72v-714h72v232q0 22 16 38t37 16h465q22 0 38-16t15-38v-232z m-214 518v178q0 8-5 13t-13 5h-107q-7 0-13-5t-5-13v-178q0-7 5-13t13-5h107q7 0 13 5t5 13z m357-18v-518q0-22-15-38t-38-16h-750q-23 0-38 16t-16 38v750q0 22 16 38t38 16h517q23 0 50-12t42-26l156-157q16-15 27-42t11-49z" horiz-adv-x="857.1" />
+
 <glyph glyph-name="privatebin" unicode="&#xe817;" d="M484-131c-7 4-107 58-221 121-151 82-209 115-211 118-2 4-2 48-1 245 1 221 2 240 5 243 2 2 101 57 221 122 151 82 220 118 224 118 4 0 15-4 27-11 12-7 110-61 219-120 143-78 199-109 201-113 2-4 2-48 1-245-1-221-1-240-5-243-3-4-436-239-442-241-2 0-9 2-18 6z m138 213c0 1-8 31-17 67-31 119-46 187-48 216l-2 19 21 21c37 39 56 74 58 105 0 13 0 18-4 28-9 25-37 53-67 67-50 24-102 18-142-16-34-28-51-62-48-96 2-28 17-55 49-87 11-11 21-22 21-25 2-9 0-38-6-67-7-34-29-123-46-184-7-26-13-48-13-49 0 0 55-1 122-1 78 0 122 1 122 2z" horiz-adv-x="1000" />
 
 <glyph glyph-name="github-circled" unicode="&#xf09b;" d="M429 779q116 0 215-58t156-156 57-215q0-140-82-252t-211-155q-15-3-22 4t-7 17q0 1 0 43t0 75q0 54-29 79 32 3 57 10t53 22 45 37 30 58 11 84q0 67-44 115 21 51-4 114-16 5-46-6t-51-25l-21-13q-52 15-107 15t-108-15q-8 6-23 15t-47 22-47 7q-25-63-5-114-44-48-44-115 0-47 12-83t29-59 45-37 52-22 57-10q-21-20-27-58-12-5-25-8t-32-3-36 12-31 35q-11 18-27 29t-28 14l-11 1q-12 0-16-2t-3-7 5-8 7-6l4-3q12-6 24-21t18-29l6-13q7-21 24-34t37-17 39-3 31 1l13 3q0-22 0-50t1-30q0-10-8-17t-22-4q-129 43-211 155t-82 252q0 117 58 215t155 156 216 58z m-267-616q2 4-3 7-6 1-8-1-1-4 4-7 5-3 7 1z m18-19q4 3-1 9-6 5-9 2-4-3 1-9 5-6 9-2z m16-25q6 4 0 11-4 7-9 3-5-3 0-10t9-4z m24-23q4 4-2 10-7 7-11 2-5-5 2-11 6-6 11-1z m32-14q1 6-8 9-8 2-10-4t7-9q8-3 11 4z m35-3q0 7-10 6-9 0-9-6 0-7 10-6 9 0 9 6z m32 5q-1 7-10 5-9-1-8-8t10-4 8 7z" horiz-adv-x="857.1" />

views/_globals.njk

@@ -16,9 +16,9 @@
   v3: CSS and JS files (libs such as bulma, lazyload, etc).
   v4: Renders in /public/render/* directories (to be used by render.js).
 #}
-{% set v1 = "Jlu03caLZN" %}
+{% set v1 = "tWLiAlAX5i" %}
 {% set v2 = "hiboQUzAzp" %}
-{% set v3 = "f0nYw5J15T" %}
+{% set v3 = "tWLiAlAX5i" %}
 {% set v4 = "S3TAWpPeFS" %}
 
 {#

views/dashboard.njk

@@ -71,9 +71,6 @@
             <li>
               <a id="ShareX">ShareX user profile</a>
             </li>
-            <li>
-              <a id="itemBrowserSettings">Browser settings</a>
-            </li>
             <li>
               <a id="itemFileLength">File name length</a>
             </li>

views/home.njk

@@ -56,14 +56,30 @@
               </a>
             </div>
           </div>
-          {% if urlMaxSize -%}
-          <div id="tabs" class="tabs is-centered" style="display: none">
+          <div id="tabs" class="tabs is-centered is-boxed" style="display: none">
             <ul>
-              <li data-id="tab-files" class="is-active"><a>Files</a></li>
-              <li data-id="tab-urls"><a>URLs</a></li>
+              <li data-id="tab-files" class="is-active">
+                <a>
+                  <span class="icon is-small"><i class="icon-docs"></i></span>
+                  <span>Files</span>
+                </a>
+              </li>
+              {% if urlMaxSize -%}
+              <li data-id="tab-urls">
+                <a>
+                  <span class="icon is-small"><i class="icon-link"></i></span>
+                  <span>URLs</span>
+                </a>
+              </li>
+              {%- endif %}
+              <li data-id="tab-config">
+                <a>
+                  <span class="icon is-small"><i class="icon-cog-alt"></i></span>
+                  <span>Config</span>
+                </a>
+              </li>
             </ul>
           </div>
-          {%- endif %}
           <div id="tab-files" class="tab-content" style="display: none">
             <div class="field dz-container"></div>
             <div class="field uploads"></div>
@@ -103,6 +119,45 @@
             <div class="field uploads"></div>
           </div>
           {%- endif %}
+          <div id="tab-config" class="tab-content" style="display: none">
+            <form>
+              <div class="field">
+                <label class="label">File size display</label>
+                <div class="control is-expanded">
+                  <div class="select is-fullwidth">
+                    <select id="siBytes">
+                      <option value="default">1000 B = 1 kB = 1 Kilobyte (default)</option>
+                      <option value="0">1024 B = 1 KiB = 1 Kibibyte</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+              <div class="field">
+                <label class="label">Upload chunk size (MB)</label>
+                <div class="control is-expanded">
+                  <input id="chunkSize" class="input is-fullwidth" type="number" min="0" step="5">
+                </div>
+                <p class="help">Default is <span id="defaultChunkSize"></span>. Max is <span id="maxChunkSize"></span>.</p>
+              </div>
+              <div class="field">
+                <label class="label">Parallel uploads</label>
+                <div class="control is-expanded">
+                  <input id="parallelUploads" class="input is-fullwidth" type="number" name="parallelUploads" min="0">
+                </div>
+                <p class="help">Default is <span id="defaultParallelUploads"></span>.</p>
+              </div>
+              <div class="field">
+                <p class="control is-expanded">
+                  <button id="saveConfig" type="submit" class="button is-danger is-fullwidth">
+                    <span class="icon">
+                      <i class="icon-floppy"></i>
+                    </span>
+                    <span>Save & reload</span>
+                  </button>
+                </p>
+              </div>
+            </form>
+          </div>
         </div>
         <div class="column is-hidden-mobile"></div>
       </div>