Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: remove tinycolor from MkFolder + a11y

Browse Source
This commit is contained in:
freeplay 2023-07-14 15:31:31 -04:00
parent 038a180891
commit 79aaf392e8
1 changed files with 19 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
packages/client/src/components/MkFolder.vue
View File

@ -1,13 +1,16 @@
<template> <template>
<div v-size="{ max: [500] }" class="ssazuxis"> <section class="ssazuxis">
<header <header
class="_button" class="_button"
:style="{ background: bg }"
@click="showBody = !showBody" @click="showBody = !showBody"
> >
<div class="title"><slot name="header"></slot></div> <div class="title"><slot name="header"></slot></div>
<div class="divider"></div> <div class="divider"></div>
<button class="_button"> <button
class="_button"
:aria-expanded="showBody"
:aria-controls="bodyId"
>
<template v-if="showBody" <template v-if="showBody"
><i class="ph-caret-up ph-bold ph-lg"></i ><i class="ph-caret-up ph-bold ph-lg"></i
></template> ></template>
@ -23,16 +26,16 @@
@leave="leave" @leave="leave"
@after-leave="afterLeave" @after-leave="afterLeave"
> >
<div v-show="showBody"> <div v-show="showBody" :id="bodyId">
<slot></slot> <slot></slot>
</div> </div>
</transition> </transition>
</div> </section>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import tinycolor from "tinycolor2"; import { getUniqueId } from "@/os";
const localStoragePrefix = "ui:folder:"; const localStoragePrefix = "ui:folder:";
@ -51,7 +54,7 @@ export default defineComponent({
}, },
data() { data() {
return { return {
bg: null, bodyId: getUniqueId(),
showBody: showBody:
this.persistKey && this.persistKey &&
localStorage.getItem(localStoragePrefix + this.persistKey) localStorage.getItem(localStoragePrefix + this.persistKey)
@ -71,27 +74,6 @@ export default defineComponent({
} }
}, },
}, },
mounted() {
function getParentBg(el: Element | null): string {
if (el == null || el.tagName === "BODY") return "var(--bg)";
const bg = el.style.background || el.style.backgroundColor;
if (bg) {
return bg;
} else {
return getParentBg(el.parentElement);
}
}
const rawBg = getParentBg(this.$el);
const bg = tinycolor(
rawBg.startsWith("var(")
? getComputedStyle(document.documentElement).getPropertyValue(
rawBg.slice(4, -1),
)
: rawBg,
);
bg.setAlpha(0.85);
this.bg = bg.toRgbString();
},
methods: { methods: {
toggleContent(show: boolean) { toggleContent(show: boolean) {
this.showBody = show; this.showBody = show;
@ -161,6 +143,15 @@ export default defineComponent({
transparent transparent
); );
&::before {
content: "";
position: absolute;
inset: 0;
background: var(--bg);
opacity: 0.85;
z-index: -1;
}
> .title { > .title {
margin: 0; margin: 0;
padding: 12px 16px 12px 0; padding: 12px 16px 12px 0;
@ -185,13 +176,5 @@ export default defineComponent({
padding: 12px 0 12px 16px; padding: 12px 0 12px 16px;
} }
} }
&.max-width_500px {
> header {
> .title {
padding: 8px 10px 8px 0;
}
}
}
} }
</style> </style>