mirror of
https://github.com/logos-storage/ethcc-demo.git
synced 2026-01-08 08:03:11 +00:00
fix dark mode memory on page load, hide drawer on item click, remove bg from logo when on home page
This commit is contained in:
Eric
parent
ce7470bcd5
commit
09c4ed7daf
112
src/App.vue
112
src/App.vue
@ -13,103 +13,15 @@ import { storeToRefs } from 'pinia'
|
||||
import NetworkConnectionState from './components/NetworkConnectionState.vue'
|
||||
import serializer from '@/stores/serializer'
|
||||
import { generateUniqueId } from '@/utils/ids'
|
||||
import { useEventsStore } from './stores/events'
|
||||
|
||||
const alerts = ref([])
|
||||
const id = ref(0)
|
||||
const eventsStore = useEventsStore()
|
||||
const requestsStore = useRequestsStore()
|
||||
const { loadingRecent, loadingRequestStates } = storeToRefs(requestsStore)
|
||||
const { events } = storeToRefs(eventsStore)
|
||||
const codexApi = inject('codexApi')
|
||||
const ethProvider = inject('ethProvider')
|
||||
|
||||
function addAlert(type, event, state) {
|
||||
alerts.value.push({
|
||||
id: event + '123456' + (1234567890 + ++id.value),
|
||||
type,
|
||||
event,
|
||||
blockNumber: 123456,
|
||||
requestId: '0x1a93c8ea68a45dadc599f38858b3fdcb3c442aea0f6180c20e3f08614c251041',
|
||||
state
|
||||
})
|
||||
}
|
||||
|
||||
function addSlotAlert(type, event, state) {
|
||||
alerts.value.push({
|
||||
id: event + '123456' + (1234567890 + ++id.value),
|
||||
type,
|
||||
event,
|
||||
blockNumber: 123456,
|
||||
requestId: '0x0d08d8fa3df9d79f1c57a34ebc6a8050ae91fca2c0d6f7191470cbbf38a048bd',
|
||||
slotIdx: 1,
|
||||
state
|
||||
})
|
||||
}
|
||||
|
||||
function onStorageRequested(blockNumber, requestId, state) {
|
||||
alerts.value.push({
|
||||
type: 'info',
|
||||
event: 'StorageRequested',
|
||||
blockNumber,
|
||||
requestId,
|
||||
state
|
||||
})
|
||||
}
|
||||
function onRequestFulfilled(blockNumber, requestId) {
|
||||
alerts.value.push({
|
||||
type: 'success',
|
||||
event: 'RequestStarted',
|
||||
blockNumber,
|
||||
requestId,
|
||||
state: 'Fulfilled'
|
||||
})
|
||||
}
|
||||
function onRequestCancelled(blockNumber, requestId) {
|
||||
alerts.value.push({
|
||||
type: 'danger',
|
||||
event: 'RequestCancelled',
|
||||
blockNumber,
|
||||
requestId,
|
||||
state: 'Cancelled'
|
||||
})
|
||||
}
|
||||
function onRequestFailed(blockNumber, requestId) {
|
||||
alerts.value.push({
|
||||
type: 'danger',
|
||||
event: 'RequestFailed',
|
||||
blockNumber,
|
||||
requestId,
|
||||
state: 'Failed'
|
||||
})
|
||||
}
|
||||
function onRequestFinished(blockNumber, requestId) {
|
||||
alerts.value.push({
|
||||
type: 'info',
|
||||
event: 'RequestFinished',
|
||||
blockNumber,
|
||||
requestId,
|
||||
state: 'Finished'
|
||||
})
|
||||
}
|
||||
function onSlotFreed(blockNumber, requestId, slotIdx) {
|
||||
alerts.value.push({
|
||||
type: 'warning',
|
||||
event: 'SlotFreed',
|
||||
blockNumber,
|
||||
requestId,
|
||||
slotIdx,
|
||||
state: 'Freed'
|
||||
})
|
||||
}
|
||||
function onSlotFilled(blockNumber, requestId, slotIdx) {
|
||||
alerts.value.push({
|
||||
type: 'info',
|
||||
event: 'SlotFilled',
|
||||
blockNumber,
|
||||
requestId,
|
||||
slotIdx,
|
||||
state: 'Filled'
|
||||
})
|
||||
}
|
||||
|
||||
window.name = generateUniqueId()
|
||||
|
||||
onMounted(() => {
|
||||
@ -117,16 +29,7 @@ onMounted(() => {
|
||||
initDismisses()
|
||||
requestsStore.refetchRequestStates()
|
||||
requestsStore.fetchPastRequests()
|
||||
|
||||
requestsStore.listenForNewEvents(
|
||||
onStorageRequested,
|
||||
onRequestFulfilled,
|
||||
onRequestCancelled,
|
||||
onRequestFailed,
|
||||
onRequestFinished,
|
||||
onSlotFreed,
|
||||
onSlotFilled
|
||||
)
|
||||
eventsStore.listenForNewEvents()
|
||||
|
||||
window.addEventListener('storage', handleStorageEvent)
|
||||
})
|
||||
@ -186,7 +89,7 @@ onUnmounted(() => {
|
||||
<AppNav />
|
||||
</header>
|
||||
<main class="grow flex flex-col mx-auto max-w-screen-xl w-full p-4">
|
||||
<ContractEventAlerts v-model="alerts"></ContractEventAlerts>
|
||||
<ContractEventAlerts v-model="events"></ContractEventAlerts>
|
||||
<NavBreadcrumb class="mb-4"></NavBreadcrumb>
|
||||
<RouterView />
|
||||
</main>
|
||||
@ -219,7 +122,10 @@ onUnmounted(() => {
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<style>
|
||||
body {
|
||||
@apply bg-white dark:bg-gray-900;
|
||||
}
|
||||
header,
|
||||
footer,
|
||||
main {
|
||||
|
||||
@ -40,7 +40,9 @@ onMounted(() => {
|
||||
(!('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')
|
||||
}
|
||||
|
||||
@ -51,25 +53,12 @@ onMounted(() => {
|
||||
themeToggleDarkIcon.classList.toggle('hidden')
|
||||
themeToggleLightIcon.classList.toggle('hidden')
|
||||
|
||||
// if set via local storage previously
|
||||
if (localStorage.getItem('color-theme')) {
|
||||
if (localStorage.getItem('color-theme') === 'light') {
|
||||
document.documentElement.classList.add('dark')
|
||||
localStorage.setItem('color-theme', 'dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
localStorage.setItem('color-theme', 'light')
|
||||
}
|
||||
|
||||
// if NOT set via local storage previously
|
||||
if (document.documentElement.classList.contains('dark')) {
|
||||
document.documentElement.classList.remove('dark')
|
||||
localStorage.setItem('color-theme', 'light')
|
||||
} else {
|
||||
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.classList.add('dark')
|
||||
localStorage.setItem('color-theme', 'dark')
|
||||
}
|
||||
})
|
||||
})
|
||||
@ -77,7 +66,7 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<nav class="mx-auto max-w-screen-xl flex flex-wrap items-center justify-between">
|
||||
<RouterLink to="/" class="flex items-center relative rtl:space-x-reverse">
|
||||
<RouterLink to="/" class="logo flex items-center relative rtl:space-x-reverse">
|
||||
<img src="../assets/logo.svg" class="h-8 hidden dark:inline" alt="Codex Logo" />
|
||||
<img src="../assets/logo-black.svg" class="h-8 inline dark:hidden" alt="Codex Logo" />
|
||||
<span class="self-center ml-3 text-2xl font-semibold whitespace-nowrap dark:text-white"
|
||||
@ -163,6 +152,7 @@ onMounted(() => {
|
||||
<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"
|
||||
@ -186,6 +176,7 @@ onMounted(() => {
|
||||
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"
|
||||
@ -257,7 +248,7 @@ onMounted(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
nav a.router-link-exact-active {
|
||||
nav a.router-link-exact-active:not(.logo) {
|
||||
@apply dark:bg-gray-700;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user