quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

proto-badges for type flags

Browse source
This commit is contained in:
Xanazf 2024-10-18 00:52:02 +03:00
parent eeb2b46f76
commit 87955bdda3
Signed by: Xanazf
GPG key ID: 4E4A5AD1FB748427
4 changed files with 88 additions and 67 deletions
src
components
navigation/sidebars
nav
index.tsx
toc
index.tsx
type
Properties.astro
styles/docs
docs-types.css

7
src/components/navigation/sidebars/nav/index.tsx
View file

@ -47,9 +47,10 @@ const NavComponent: Component<NavProps> = props => {
} }
}; };
onMount(() => {}); onMount(() => {
onCleanup(() => { onCleanup(() => {
window.removeEventListener("click", handleClickOutside); window.removeEventListener("click", handleClickOutside);
});
}); });
createEffect(() => { createEffect(() => {

7
src/components/navigation/sidebars/toc/index.tsx
View file

@ -40,9 +40,10 @@ const TableOfContents: Component<TOCProps> = props => {
} }
}; };
onMount(() => {}); onMount(() => {
onCleanup(() => { onCleanup(() => {
window.removeEventListener("click", handleClickOutside); window.removeEventListener("click", handleClickOutside);
});
}); });
createEffect(() => { createEffect(() => {

38
src/components/type/Properties.astro
View file

@ -37,7 +37,8 @@ const { propsKeys, propsData } = Astro.props;
} }
return ( return (
<li id={ item } class="typedata-root typeprop-root"> <li id={ item } class="typedata-root typeprop-root">
<p class="typedata-name typeprop-name"> <div class="typedata-title typeprop-title">
<section class="typedata-name typeprop-name">
<Tag client:idle/> <Tag client:idle/>
{ item }<span class="type-datatype">:&nbsp;<a { item }<span class="type-datatype">:&nbsp;<a
href={typeLink} href={typeLink}
@ -46,23 +47,24 @@ const { propsKeys, propsData } = Astro.props;
href={genericTypeLink}>{genericType}</a href={genericTypeLink}>{genericType}</a
><span class="type-datatype">&gt;</span> ><span class="type-datatype">&gt;</span>
)}</span> )}</span>
</p> </section>
{ {
propData.flags && propData.flags.length > 0 ? ( propData.flags && propData.flags.length > 0 ? (
<p class="type-flags"> <p class="type-flags">
{ {
propData.flags.map((flag) => { propData.flags.map((flag) => {
return ( return (
<span class="type-flag"> <span class="type-flag">
<Flag client:idle/> <Flag client:idle/>
{flag} {flag}
</span> </span>
) )
}) })
} }
</p> </p>
) : null ) : null
} }
</div>
{ {
gadget ? ( gadget ? (
<p class="typedata-params typefunc-params"> <p class="typedata-params typefunc-params">

103
src/styles/docs/docs-types.css
View file

@ -31,12 +31,10 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 1px; height: 1px;
background: linear-gradient( background: linear-gradient(90deg,
90deg, transparent 25%,
transparent 25%, hsla(var(--accent-500) / 0.88) 50%,
hsla(var(--accent-500) / 0.88) 50%, transparent 75%);
transparent 75%
);
} }
} }
} }
@ -60,7 +58,7 @@
} }
#injectedMd { #injectedMd {
& > p:not(:first-child) { &>p:not(:first-child) {
margin-block: 0.724rem; margin-block: 0.724rem;
} }
} }
@ -74,7 +72,7 @@
} }
.typedocs-content { .typedocs-content {
& > p { &>p {
margin-block: 0.618rem; margin-block: 0.618rem;
} }
@ -102,16 +100,39 @@
padding: 0.8rem; padding: 0.8rem;
transition: border 0.3s; transition: border 0.3s;
& > .typedata-name { & .typedata-title {
display: flex; margin-bottom: 1.618rem;
align-items: center;
font-size: 1.272rem;
margin: 0;
& svg { & .typedata-name {
width: 1.2em; font-size: 1.272rem;
height: 1.2em; display: flex;
margin-right: 0.3em; align-items: center;
margin: 0;
& svg {
width: 1.2em;
height: 1.2em;
margin-right: 0.3em;
}
}
& .type-flags {
display: flex;
flex-flow: row nowrap;
gap: 0.517rem;
font-size: 0.815rem;
margin: 0;
& .type-flag {
padding-inline: 6px;
padding-block: 3px;
display: flex;
align-items: center;
gap: 0.117rem;
color: hsl(var(--inner-param-color));
border: 1px solid hsl(var(--inner-param-color));
border-radius: 5px;
}
} }
} }
} }
@ -137,11 +158,11 @@
& .typedata-detailsdata, & .typedata-detailsdata,
.typedocs-subheading { .typedocs-subheading {
& > p { &>p {
margin-top: 0.618rem; margin-top: 0.618rem;
} }
& > p:last-child { &>p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -201,22 +222,11 @@
width: max-content; width: max-content;
transition: opacity 0.5s; transition: opacity 0.5s;
& > a { &>a {
opacity: inherit; opacity: inherit;
} }
} }
.type-flags {
& .type-flag {
margin: 0;
margin-top: 0.272rem;
display: flex;
align-items: center;
gap: 0.117rem;
color: hsl(var(--inner-param-color));
}
}
.typeprops { .typeprops {
& .typeprop-root { & .typeprop-root {
border: 1px solid hsla(var(--prop-color) / 0.6); border: 1px solid hsla(var(--prop-color) / 0.6);
@ -239,7 +249,8 @@ html.dark .typeprops {
& .typeprop-root { & .typeprop-root {
border: 1px solid hsla(var(--prop-color) / 0.3); border: 1px solid hsla(var(--prop-color) / 0.3);
&:hover, &:target { &:hover,
&:target {
border: 1px solid hsla(var(--prop-color) / 0.6); border: 1px solid hsla(var(--prop-color) / 0.6);
} }
} }
@ -268,7 +279,7 @@ html.dark .typeprops {
align-items: center; align-items: center;
gap: 0.117rem; gap: 0.117rem;
& > svg { &>svg {
height: 1.272rem; height: 1.272rem;
width: 1.272rem; width: 1.272rem;
} }
@ -281,7 +292,8 @@ html.dark .typefuncs {
& .typefunc-root { & .typefunc-root {
border: 1px solid hsla(var(--func-color) / 0.3); border: 1px solid hsla(var(--func-color) / 0.3);
&:hover, &:target { &:hover,
&:target {
border: 1px solid hsla(var(--func-color) / 0.6); border: 1px solid hsla(var(--func-color) / 0.6);
} }
} }
@ -320,7 +332,7 @@ html.dark .typefuncs {
align-items: center; align-items: center;
gap: 0.117rem; gap: 0.117rem;
& > svg { &>svg {
height: 1.272rem; height: 1.272rem;
width: 1.272rem; width: 1.272rem;
} }
@ -333,7 +345,8 @@ html.dark .typesignals {
& .typesignal-root { & .typesignal-root {
border: 1px solid hsla(var(--signal-color) / 0.3); border: 1px solid hsla(var(--signal-color) / 0.3);
&:hover, &:target { &:hover,
&:target {
border: 1px solid hsla(var(--signal-color) / 0.6); border: 1px solid hsla(var(--signal-color) / 0.6);
} }
} }
@ -371,7 +384,8 @@ html.dark .typevariants {
& .typevariant-root { & .typevariant-root {
border: 1px solid hsla(var(--var-color) / 0.3); border: 1px solid hsla(var(--var-color) / 0.3);
&:hover, &:target { &:hover,
&:target {
border: 1px solid hsla(var(--var-color) / 0.6); border: 1px solid hsla(var(--var-color) / 0.6);
} }
} }
@ -389,11 +403,9 @@ html.dark .typevariants {
&::before { &::before {
width: 0; width: 0;
background: linear-gradient( background: linear-gradient(to right,
to right, hsla(var(--accent-400) / 0.5) var(--percent),
hsla(var(--accent-400) / 0.5) var(--percent), hsla(var(--accent-400) / 0) 100%);
hsla(var(--accent-400) / 0) 100%
);
animation: percentToZero 250ms ease-in-out forwards; animation: percentToZero 250ms ease-in-out forwards;
transition: width 0.25s ease-in-out; transition: width 0.25s ease-in-out;
} }
@ -414,11 +426,16 @@ html.dark .typevariants {
.typedocs-content { .typedocs-content {
margin-inline: 1.272rem; margin-inline: 1.272rem;
& .typedata-title {
display: flex;
justify-content: space-between;
}
& section { & section {
min-width: 30svw; min-width: 30svw;
} }
& > p { &>p {
margin-block: 1.217rem; margin-block: 1.217rem;
} }
} }