Inline some bootstrap-dark styling

This commit is contained in:
Henrik Giesel 2021-05-25 15:30:43 +02:00 committed by Damien Elmes
parent 400254277b
commit 412091ae60
4 changed files with 29 additions and 13 deletions

View file

@ -70,6 +70,7 @@ ts_library(
"//ts/lib", "//ts/lib",
"//ts/lib:backend_proto", "//ts/lib:backend_proto",
"//ts/sveltelib", "//ts/sveltelib",
"//ts/components",
"@npm//lodash-es", "@npm//lodash-es",
"@npm//svelte", "@npm//svelte",
], ],

View file

@ -6,7 +6,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
/* eslint /* eslint
@typescript-eslint/no-non-null-assertion: "off", @typescript-eslint/no-non-null-assertion: "off",
*/ */
import { onMount, onDestroy } from "svelte"; import { onMount, onDestroy, getContext } from "svelte";
import { nightModeKey } from "components/contextKeys";
import Modal from "bootstrap/js/dist/modal"; import Modal from "bootstrap/js/dist/modal";
export let title: string; export let title: string;
@ -44,16 +45,30 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
container.removeEventListener("shown.bs.modal", onShown); container.removeEventListener("shown.bs.modal", onShown);
container.removeEventListener("hidden.bs.modal", onHidden); container.removeEventListener("hidden.bs.modal", onHidden);
}); });
const nightMode = getContext<boolean>(nightModeKey);
</script> </script>
<style lang="scss">
.default-colors {
background-color: var(--window-bg);
color: var(--text-fg);
}
.invert {
filter: invert(1) grayscale(100%) brightness(200%);
}
</style>
<div class="modal fade" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal fade" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content" class:default-colors={nightMode}>
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="modalLabel">{title}</h5> <h5 class="modal-title" id="modalLabel">{title}</h5>
<button <button
type="button" type="button"
class="btn-close" class="btn-close"
class:invert={nightMode}
data-bs-dismiss="modal" data-bs-dismiss="modal"
aria-label="Close" /> aria-label="Close" />
</div> </div>

View file

@ -7,17 +7,26 @@
import TextInputModal from "./TextInputModal.svelte"; import TextInputModal from "./TextInputModal.svelte";
import { checkNightMode } from "lib/nightmode";
import { nightModeKey } from "components/contextKeys";
export interface TextInputModalProps { export interface TextInputModalProps {
title: string; title: string;
prompt: string; prompt: string;
startingValue?: string; startingValue?: string;
onOk: (string) => void; onOk: (text: string) => void;
} }
export function textInputModal(props: TextInputModalProps): TextInputModal { export function textInputModal(props: TextInputModalProps): TextInputModal {
const target = document.getElementById("modal")!; const target = document.getElementById("modal")!;
const nightMode = checkNightMode();
const context = new Map();
context.set(nightModeKey, nightMode);
return new TextInputModal({ return new TextInputModal({
target, target,
props, props,
}); context,
} as any);
} }

View file

@ -14,13 +14,4 @@
background-color: var(--window-bg); background-color: var(--window-bg);
} }
} }
.modal-content {
background-color: var(--window-bg);
color: var(--text-fg);
}
.btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
} }