mirror of
https://github.com/logos-storage/ethcc-demo.git
synced 2026-01-02 21:23:09 +00:00
Hide thumbnails setting
Prevents downloading thumbnails, due to a known issue where certain image downloads will crash the Codex node.
This commit is contained in:
Eric
parent
5555d5d1a0
commit
56e22d539d
12
src/App.vue
12
src/App.vue
@ -51,16 +51,24 @@ async function detectRunningCodexDevnet() {
|
||||
return false
|
||||
}
|
||||
}
|
||||
const hideThumbnails = ref(false)
|
||||
function onToggleHideThumbnails(override) {
|
||||
if (override !== undefined) {
|
||||
hideThumbnails.value = override
|
||||
} else {
|
||||
hideThumbnails.value = !hideThumbnails.value
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col h-full min-w-96 bg-white dark:bg-gray-900">
|
||||
<header class="sticky top-0 z-10 w-full text-center border-b p-4 flex-none">
|
||||
<AppNav />
|
||||
<AppNav :hideThumbnails="hideThumbnails" @toggle-hide-thumbnails="onToggleHideThumbnails" />
|
||||
</header>
|
||||
<main class="grow flex flex-col mx-auto max-w-screen-xl w-full p-4">
|
||||
<NavBreadcrumb class="mb-4"></NavBreadcrumb>
|
||||
<RouterView />
|
||||
<RouterView :hideThumbnails="hideThumbnails" />
|
||||
</main>
|
||||
<footer class="w-full sticky bottom-0 border-t p-4 mt-4 flex-none flex justify-between">
|
||||
<div class="flex flex-col space-y-1">
|
||||
|
||||
@ -1,82 +1,14 @@
|
||||
<script setup>
|
||||
import { initDrawers, Drawer } from 'flowbite'
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import NotificationCentre from './NotificationCentre.vue'
|
||||
import { useEventsStore } from '@/stores/events'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import MainMenu from './MainMenu.vue'
|
||||
import { useAttrs } from 'vue'
|
||||
|
||||
const eventsStore = useEventsStore()
|
||||
const { events } = storeToRefs(eventsStore)
|
||||
|
||||
let drawer
|
||||
onMounted(() => {
|
||||
// initDrawers()
|
||||
// set the drawer menu element
|
||||
const $targetEl = document.getElementById('drawer-navigation')
|
||||
// options with default values
|
||||
const options = {
|
||||
placement: 'left',
|
||||
backdrop: true,
|
||||
bodyScrolling: false,
|
||||
edge: false,
|
||||
edgeOffset: '',
|
||||
backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-0'
|
||||
}
|
||||
|
||||
// instance options object
|
||||
const instanceOptions = {
|
||||
id: 'drawer-navigation',
|
||||
override: true
|
||||
}
|
||||
|
||||
/*
|
||||
* $targetEl (required)
|
||||
* options (optional)
|
||||
* instanceOptions (optional)
|
||||
*/
|
||||
drawer = new Drawer($targetEl, options, instanceOptions)
|
||||
|
||||
var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon')
|
||||
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon')
|
||||
|
||||
// Change the icons inside the button based on previous settings
|
||||
if (
|
||||
localStorage.getItem('color-theme') === 'dark' ||
|
||||
(!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||
) {
|
||||
themeToggleLightIcon.classList.remove('hidden')
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
themeToggleDarkIcon.classList.remove('hidden')
|
||||
}
|
||||
|
||||
var themeToggleBtn = document.getElementById('theme-toggle')
|
||||
|
||||
themeToggleBtn.addEventListener('click', function () {
|
||||
// toggle icons inside button
|
||||
themeToggleDarkIcon.classList.toggle('hidden')
|
||||
themeToggleLightIcon.classList.toggle('hidden')
|
||||
|
||||
if (document.documentElement.classList.contains('dark')) {
|
||||
document.documentElement.classList.remove('dark')
|
||||
localStorage.setItem('color-theme', 'light')
|
||||
} else {
|
||||
document.documentElement.classList.add('dark')
|
||||
localStorage.setItem('color-theme', 'dark')
|
||||
}
|
||||
})
|
||||
document.documentElement.addEventListener('click', hideDrawer)
|
||||
})
|
||||
function hideDrawer() {
|
||||
if (drawer.isVisible) {
|
||||
drawer.hide()
|
||||
}
|
||||
}
|
||||
onUnmounted(() => {
|
||||
document.documentElement.removeEventListener('click', hideDrawer)
|
||||
})
|
||||
const attrs = useAttrs()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -95,163 +27,12 @@ onUnmounted(() => {
|
||||
v-model="events"
|
||||
@clear-events="eventsStore.clearEvents"
|
||||
@clear-event="eventsStore.clearEvent"
|
||||
:hideThumbnails="attrs.hideThumbnails"
|
||||
></NotificationCentre>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
||||
@click.stop="drawer.toggle()"
|
||||
>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg
|
||||
class="w-5 h-5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 17 14"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M1 1h15M1 7h15M1 13h15"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- drawer component -->
|
||||
<div
|
||||
id="drawer-navigation"
|
||||
class="fixed top-0 left-0 z-40 w-64 h-screen p-4 overflow-y-auto transition-transform -translate-x-full bg-white dark:bg-gray-800"
|
||||
tabindex="-1"
|
||||
aria-labelledby="drawer-navigation-label"
|
||||
>
|
||||
<h5
|
||||
id="drawer-navigation-label"
|
||||
class="text-base text-left font-semibold text-gray-500 uppercase dark:text-gray-400"
|
||||
>
|
||||
Menu
|
||||
</h5>
|
||||
<button
|
||||
@click="drawer.hide()"
|
||||
type="button"
|
||||
data-drawer-hide="drawer-navigation"
|
||||
aria-controls="drawer-navigation"
|
||||
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 end-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
<span class="sr-only">Close menu</span>
|
||||
</button>
|
||||
<div class="py-4 overflow-y-auto">
|
||||
<ul class="space-y-2 font-medium">
|
||||
<li>
|
||||
<RouterLink
|
||||
to="/moderate"
|
||||
class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
|
||||
@click="drawer.hide()"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 22 21"
|
||||
>
|
||||
<path
|
||||
d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"
|
||||
/>
|
||||
<path
|
||||
d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ms-3">Moderate</span>
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/codex-storage/ethcc-demo"
|
||||
target="_blank"
|
||||
class="flex text-left items-center text-gray-900 p-2 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
|
||||
@click="drawer.hide()"
|
||||
>
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 18 18"
|
||||
>
|
||||
<path
|
||||
d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="flex-1 ms-3 whitespace-nowrap">Instructions</span>
|
||||
<svg
|
||||
class="w-6 h-6 text-gray-900 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M18 14v4.833A1.166 1.166 0 0 1 16.833 20H5.167A1.167 1.167 0 0 1 4 18.833V7.167A1.166 1.166 0 0 1 5.167 6h4.618m4.447-2H20v5.768m-7.889 2.121 7.778-7.778"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="pt-4 mt-4 space-y-2 font-medium border-t border-gray-200 dark:border-gray-700">
|
||||
<li>
|
||||
<button
|
||||
id="theme-toggle"
|
||||
type="button"
|
||||
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
|
||||
>
|
||||
<svg
|
||||
id="theme-toggle-dark-icon"
|
||||
class="hidden w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
|
||||
</svg>
|
||||
<svg
|
||||
id="theme-toggle-light-icon"
|
||||
class="hidden w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<MainMenu
|
||||
:hideThumbnails="attrs.hideThumbnails"
|
||||
@toggle-hide-thumbnails="attrs.onToggleHideThumbnails"
|
||||
></MainMenu>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
315
src/components/MainMenu.vue
Normal file
315
src/components/MainMenu.vue
Normal file
@ -0,0 +1,315 @@
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
import { initDrawers, Drawer } from 'flowbite'
|
||||
|
||||
const props = defineProps({
|
||||
hideThumbnails: Boolean
|
||||
})
|
||||
const emit = defineEmits(['toggle-hide-thumbnails'])
|
||||
|
||||
let drawer
|
||||
onMounted(() => {
|
||||
// initDrawers()
|
||||
// set the drawer menu element
|
||||
const $targetEl = document.getElementById('drawer-navigation')
|
||||
// options with default values
|
||||
const options = {
|
||||
placement: 'left',
|
||||
backdrop: true,
|
||||
bodyScrolling: false,
|
||||
edge: false,
|
||||
edgeOffset: '',
|
||||
backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-0'
|
||||
}
|
||||
|
||||
// instance options object
|
||||
const instanceOptions = {
|
||||
id: 'drawer-navigation',
|
||||
override: true
|
||||
}
|
||||
|
||||
/*
|
||||
* $targetEl (required)
|
||||
* options (optional)
|
||||
* instanceOptions (optional)
|
||||
*/
|
||||
drawer = new Drawer($targetEl, options, instanceOptions)
|
||||
|
||||
document.documentElement.addEventListener('click', hideDrawer)
|
||||
|
||||
themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon')
|
||||
themeToggleLightIcon = document.getElementById('theme-toggle-light-icon')
|
||||
thumbnailToggle = document.getElementById('thumbnail-toggle')
|
||||
loadDarkModeFromLocalStorage()
|
||||
loadHideThumbnailsFromLocalStorage()
|
||||
})
|
||||
|
||||
var themeToggleDarkIcon
|
||||
var themeToggleLightIcon
|
||||
var thumbnailToggle
|
||||
|
||||
function loadDarkModeFromLocalStorage() {
|
||||
// Change the icons inside the button based on previous settings
|
||||
if (
|
||||
localStorage.getItem('color-theme') === 'dark' ||
|
||||
(!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||
) {
|
||||
themeToggleLightIcon.classList.remove('hidden')
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
themeToggleDarkIcon.classList.remove('hidden')
|
||||
}
|
||||
}
|
||||
function loadHideThumbnailsFromLocalStorage() {
|
||||
// Change the icons inside the button based on previous settings
|
||||
if (localStorage.getItem('hideThumbnails') === 'true') {
|
||||
thumbnailToggle.checked = true
|
||||
emit('toggle-hide-thumbnails', true)
|
||||
}
|
||||
}
|
||||
function toggleDarkMode() {
|
||||
// toggle icons inside button
|
||||
themeToggleDarkIcon.classList.toggle('hidden')
|
||||
themeToggleLightIcon.classList.toggle('hidden')
|
||||
|
||||
if (document.documentElement.classList.contains('dark')) {
|
||||
document.documentElement.classList.remove('dark')
|
||||
localStorage.setItem('color-theme', 'light')
|
||||
} else {
|
||||
document.documentElement.classList.add('dark')
|
||||
localStorage.setItem('color-theme', 'dark')
|
||||
}
|
||||
}
|
||||
function toggleHideThumbnails(event) {
|
||||
emit('toggle-hide-thumbnails')
|
||||
localStorage.setItem('hideThumbnails', event.target.checked)
|
||||
}
|
||||
function hideDrawer() {
|
||||
if (drawer.isVisible) {
|
||||
drawer.hide()
|
||||
}
|
||||
}
|
||||
onUnmounted(() => {
|
||||
document.documentElement.removeEventListener('click', hideDrawer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
||||
@click.stop="drawer.toggle()"
|
||||
>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg
|
||||
class="w-5 h-5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 17 14"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M1 1h15M1 7h15M1 13h15"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- drawer component -->
|
||||
<div
|
||||
id="drawer-navigation"
|
||||
class="fixed top-0 left-0 z-40 w-64 h-screen p-4 overflow-y-auto transition-transform -translate-x-full bg-white dark:bg-gray-800"
|
||||
tabindex="-1"
|
||||
aria-labelledby="drawer-navigation-label"
|
||||
>
|
||||
<h5
|
||||
id="drawer-navigation-label"
|
||||
class="text-base text-left font-semibold text-gray-500 uppercase dark:text-gray-400"
|
||||
>
|
||||
Menu
|
||||
</h5>
|
||||
<button
|
||||
@click="drawer.hide()"
|
||||
type="button"
|
||||
data-drawer-hide="drawer-navigation"
|
||||
aria-controls="drawer-navigation"
|
||||
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 end-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
<span class="sr-only">Close menu</span>
|
||||
</button>
|
||||
<div class="py-4 overflow-y-auto">
|
||||
<ul class="space-y-2 font-medium">
|
||||
<li>
|
||||
<RouterLink
|
||||
to="/moderate"
|
||||
class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
|
||||
@click="drawer.hide()"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M9 2a1 1 0 0 0-1 1H6a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-2a1 1 0 0 0-1-1H9Zm1 2h4v2h1a1 1 0 1 1 0 2H9a1 1 0 0 1 0-2h1V4Zm5.707 8.707a1 1 0 0 0-1.414-1.414L11 14.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span class="ms-3">Moderate</span>
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/codex-storage/ethcc-demo"
|
||||
target="_blank"
|
||||
class="flex text-left items-center text-gray-900 p-2 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
|
||||
@click="drawer.hide()"
|
||||
>
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6Zm4.996 2a1 1 0 0 0 0 2h.01a1 1 0 1 0 0-2h-.01ZM11 8a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2h-6Zm-4.004 3a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2h-.01ZM11 11a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2h-6Zm-4.004 3a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2h-.01ZM11 14a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2h-6Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span class="flex-1 ms-3 whitespace-nowrap">Instructions</span>
|
||||
<svg
|
||||
class="w-6 h-6 text-gray-900 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M18 14v4.833A1.166 1.166 0 0 1 16.833 20H5.167A1.167 1.167 0 0 1 4 18.833V7.167A1.166 1.166 0 0 1 5.167 6h4.618m4.447-2H20v5.768m-7.889 2.121 7.778-7.778"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="pt-4 mt-4 space-y-2 font-medium border-t border-gray-200 dark:border-gray-700">
|
||||
<li>
|
||||
<h6
|
||||
id="drawer-navigation-label"
|
||||
class="text-sm text-left font-semibold text-gray-500 uppercase dark:text-gray-400"
|
||||
>
|
||||
Settings
|
||||
</h6>
|
||||
</li>
|
||||
<li>
|
||||
<label class="inline-flex items-center cursor-pointer">
|
||||
<span class="me-3 text-sm font-light text-gray-900 dark:text-gray-300"
|
||||
>Download thumbnails</span
|
||||
>
|
||||
<input
|
||||
id="thumbnail-toggle"
|
||||
type="checkbox"
|
||||
value=""
|
||||
class="sr-only peer"
|
||||
@input="toggleHideThumbnails"
|
||||
/>
|
||||
<div
|
||||
class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
|
||||
></div>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
|
||||
>
|
||||
<svg
|
||||
id="thumbnail-toggle-enabled"
|
||||
class="hidden w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
|
||||
</svg>
|
||||
<svg
|
||||
id="thumbnail-toggle-disabled"
|
||||
class="hidden w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
id="theme-toggle"
|
||||
type="button"
|
||||
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
|
||||
@click="toggleDarkMode"
|
||||
>
|
||||
<svg
|
||||
id="theme-toggle-dark-icon"
|
||||
class="hidden w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
|
||||
</svg>
|
||||
<svg
|
||||
id="theme-toggle-light-icon"
|
||||
class="hidden w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -15,12 +15,12 @@ const router = useRouter()
|
||||
|
||||
const events = defineModel()
|
||||
const emit = defineEmits(['clearEvents', 'clearEvent'])
|
||||
defineProps({
|
||||
hideThumbnails: Boolean
|
||||
})
|
||||
function request(requestId) {
|
||||
return requests.value[requestId]
|
||||
}
|
||||
const eventsFiltered = computed(() => {
|
||||
return Object.values(events.value).filter((event) => event !== null)
|
||||
})
|
||||
const showNotifCentre = ref(false)
|
||||
function toggleNotifCentre() {
|
||||
showNotifCentre.value = !showNotifCentre.value
|
||||
@ -54,20 +54,24 @@ const eventsOrdered = computed(() => {
|
||||
|
||||
<template>
|
||||
<div class="relative">
|
||||
<button @click.stop="toggleNotifCentre">
|
||||
<button
|
||||
@click.stop="toggleNotifCentre"
|
||||
class="focus:outline-none focus:ring-2 focus:ring-gray-200 dark:focus:ring-gray-600 rounded-lg"
|
||||
>
|
||||
<svg
|
||||
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
||||
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
|
||||
:class="buttonClass"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 22 21"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"
|
||||
/>
|
||||
<path
|
||||
d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"
|
||||
fill-rule="evenodd"
|
||||
d="M18.458 3.11A1 1 0 0 1 19 4v16a1 1 0 0 1-1.581.814L12 16.944V7.056l5.419-3.87a1 1 0 0 1 1.039-.076ZM22 12c0 1.48-.804 2.773-2 3.465v-6.93c1.196.692 2 1.984 2 3.465ZM10 8H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6V8Zm0 9H5v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-3Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
@ -100,8 +104,9 @@ const eventsOrdered = computed(() => {
|
||||
@click="dismissAndRedirect(requestId)"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div v-if="!hideThumbnails" class="flex-shrink-0">
|
||||
<CodexImage
|
||||
v-if="request(requestId)?.request"
|
||||
:cid="request(requestId).request.content.cid"
|
||||
:moderated="moderated"
|
||||
class="w-8 h-8 rounded-full mt-1"
|
||||
|
||||
@ -31,7 +31,8 @@ defineProps({
|
||||
enableModeration: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
hideThumbnails: Boolean
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
@ -175,7 +176,7 @@ onMounted(() => {
|
||||
class="flex items-center px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
|
||||
>
|
||||
<CodexImage
|
||||
v-if="fetched.request"
|
||||
v-if="fetched.request && !hideThumbnails"
|
||||
:cid="request.content.cid"
|
||||
:moderated="moderated"
|
||||
class="w-10 h-10 rounded-full mt-1"
|
||||
|
||||
@ -6,11 +6,14 @@ import SkeletonLoading from '@/components/SkeletonLoading.vue'
|
||||
|
||||
const requestsStore = useRequestsStore()
|
||||
const { loading } = storeToRefs(requestsStore)
|
||||
defineProps({
|
||||
hideThumbnails: Boolean
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<SkeletonLoading v-if="loading.past" type="text" />
|
||||
<StorageRequests v-else />
|
||||
<StorageRequests v-else :hideThumbnails="hideThumbnails" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user