Vasanko/cista-storage
Vasanko/cista-storage
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Colored file size

Browse Source
This commit is contained in:
Leo Vasanko 2023-11-12 19:38:42 +00:00
parent be1c4c1504
commit 88aca511e7
1 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/components/FileSize.vue
View File

@ -6,27 +6,38 @@
import type { Document } from '@/repositories/Document' import type { Document } from '@/repositories/Document'
import { computed } from 'vue' import { computed } from 'vue'
const sizeClass = computed(() => props.doc.sizedisp.split('\u202F').slice(-1)[0]) const sizeClass = computed(() => {
const unit = props.doc.sizedisp.split('\u202F').slice(-1)[0]
return +unit ? "bytes" : unit
})
const props = defineProps<{ const props = defineProps<{
doc: Document doc: Document
}>() }>()
</script> </script>
<style> <style scoped>
.size.empty { .size.empty { color: #555 }
opacity: 50%; .size.bytes { color: #77a }
.size.kB { color: #474 }
.size.MB { color: #a80 }
.size.GB { color: #f83 }
.size.TB, .size.PB, .size.EB, .size.huge {
color: #f44;
text-shadow: 0 0 .2em;
} }
.size.bytes {
opacity: 60%; @media (prefers-color-scheme: dark) {
.size.empty { color: #bbb }
.size.bytes { color: #99d }
.size.kB { color: #aea }
.size.MB { color: #ff4 }
.size.GB { color: #f86 }
.size.TB, .size.PB, .size.EB, .size.huge { color: #f55 }
} }
.size.kB {
opacity: 70%; .cursor .size {
} color: inherit;
.size.MB { text-shadow: none;
opacity: 80%;
}
.size.GB {
opacity: 90%;
} }
</style> </style>