From 171715dced08a1f1126c3f56f79c07e0ce20a7e9 Mon Sep 17 00:00:00 2001 From: Emilia Juda-Ozbay Date: Tue, 5 Apr 2022 18:21:39 +0100 Subject: [PATCH] Display flags next to class name Reflections in TypeDoc can be assigned flags, describing certain properties of the reflection, e.g. abstract, private, readonly etc. These flags were rendered using badges for most type of reflections, but not for reflections which are displayed on their own page (like classes, interfaces etc.). This made it difficult to establish e.g. whether a class is abstract (see #1874). This PR fixes the issue by rendering flags in the page titles next to the name of the documented entity. Styling of the badges has been amended, to account for them now showing next to much bigger headings. The styling was inspired by [Bootstrap badges](https://getbootstrap.com/docs/4.0/components/badge/). Partially resolves #1874. --- src/lib/output/themes/default/partials/header.tsx | 4 +++- static/style.css | 5 +++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/lib/output/themes/default/partials/header.tsx b/src/lib/output/themes/default/partials/header.tsx index e95185d091..9c48891326 100644 --- a/src/lib/output/themes/default/partials/header.tsx +++ b/src/lib/output/themes/default/partials/header.tsx @@ -1,7 +1,7 @@ import type { Reflection } from "../../../../models"; import { JSX } from "../../../../utils"; import type { PageEvent } from "../../../events"; -import { hasTypeParameters, join } from "../../lib"; +import { hasTypeParameters, join, renderFlags } from "../../lib"; import type { DefaultThemeRenderContext } from "../DefaultThemeRenderContext"; export const header = (context: DefaultThemeRenderContext, props: PageEvent) => ( @@ -78,6 +78,8 @@ export const header = (context: DefaultThemeRenderContext, props: PageEvent"} )} + {" "} + {renderFlags(props.model.flags)} diff --git a/static/style.css b/static/style.css index a16ed029e5..6127b27cda 100644 --- a/static/style.css +++ b/static/style.css @@ -766,12 +766,13 @@ footer .tsd-legend { .tsd-flag { display: inline-block; - padding: 1px 5px; + padding: 0.25em 0.4em; border-radius: 4px; color: var(--color-comment-tag-text); background-color: var(--color-comment-tag); text-indent: 0; - font-size: 14px; + font-size: 75%; + line-height: 1; font-weight: normal; }