mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-19 08:51:24 +00:00
d657c4919e
* [accessibility-2278267]:[Supporting the platform - Azure Cosmos DB - Data Explorer]: All the controls present under 'Data Explorer' page are truncated after setting the viewport to 320*256 pixel. * feat: implement zoom level hook and update components for responsive design. * Format fixed. * feat: add conditionalClass utility and refactor className assignments for improved readability. --------- Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
32 lines
1.3 KiB
TypeScript
32 lines
1.3 KiB
TypeScript
// Adapted from https://gist.github.com/davidgilbertson/ed3c8bb8569bc64b094b87aa88bed5fa
|
|
export function copyStyles(sourceDoc: Document, targetDoc: Document): void {
|
|
Array.from(sourceDoc.styleSheets).forEach((styleSheet) => {
|
|
if (styleSheet.href) {
|
|
// for <link> elements loading CSS from a URL
|
|
const newLinkEl = sourceDoc.createElement("link");
|
|
|
|
newLinkEl.rel = "stylesheet";
|
|
newLinkEl.href = styleSheet.href;
|
|
targetDoc.head.appendChild(newLinkEl);
|
|
} else if (styleSheet.cssRules && styleSheet.cssRules.length > 0) {
|
|
// for <style> elements
|
|
const newStyleEl = sourceDoc.createElement("style");
|
|
|
|
Array.from(styleSheet.cssRules).forEach((cssRule) => {
|
|
// write the text of each rule into the body of the style element
|
|
newStyleEl.appendChild(sourceDoc.createTextNode(cssRule.cssText));
|
|
});
|
|
|
|
targetDoc.head.appendChild(newStyleEl);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Conditionally returns a class name based on a boolean condition.
|
|
* If the condition is true, returns the `trueValue` class; otherwise, returns `falseValue` (or an empty string if not provided).
|
|
*/
|
|
export function conditionalClass(condition: boolean, trueValue: string, falseValue?: string): string {
|
|
return condition ? trueValue : falseValue || "";
|
|
}
|