Refactor PluginsLoader into separate components
This commit is contained in:
parent
f6d02c6d33
commit
de445627bf
112
components/DataDirPicker.tsx
Normal file
112
components/DataDirPicker.tsx
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
import React, { useEffect, useRef } from "react";
|
||||||
|
|
||||||
|
import { useAppSelector, useAppDispatch } from "../lib/hooks";
|
||||||
|
import {
|
||||||
|
addPluginInOrder,
|
||||||
|
clearPlugins,
|
||||||
|
setPending,
|
||||||
|
decrementPending,
|
||||||
|
PluginFile,
|
||||||
|
} from "../slices/plugins";
|
||||||
|
import styles from "../styles/DataDirPicker.module.css";
|
||||||
|
|
||||||
|
export const excludedPlugins = [
|
||||||
|
"Skyrim.esm",
|
||||||
|
"Update.esm",
|
||||||
|
"Dawnguard.esm",
|
||||||
|
"HearthFires.esm",
|
||||||
|
"Dragonborn.esm",
|
||||||
|
];
|
||||||
|
|
||||||
|
type Props = {};
|
||||||
|
|
||||||
|
const DataDirPicker: React.FC<Props> = () => {
|
||||||
|
const workerRef = useRef<Worker>();
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
const plugins = useAppSelector((state) => state.plugins.plugins);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function loadWorker() {
|
||||||
|
const { default: Worker } = await import(
|
||||||
|
"worker-loader?filename=static/[fullhash].worker.js!../workers/PluginsLoader.worker"
|
||||||
|
);
|
||||||
|
console.log(Worker);
|
||||||
|
workerRef.current = new Worker();
|
||||||
|
workerRef.current.onmessage = (evt: { data: PluginFile }) => {
|
||||||
|
const { data } = evt;
|
||||||
|
console.log(`WebWorker Response =>`);
|
||||||
|
dispatch(decrementPending(1));
|
||||||
|
console.log(data.parsed);
|
||||||
|
dispatch(addPluginInOrder(data));
|
||||||
|
};
|
||||||
|
}
|
||||||
|
loadWorker();
|
||||||
|
return () => {
|
||||||
|
if (workerRef.current) {
|
||||||
|
workerRef.current.terminate();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, [dispatch]);
|
||||||
|
|
||||||
|
const onDataDirButtonClick = async () => {
|
||||||
|
if (!workerRef.current) {
|
||||||
|
return alert("Worker not loaded yet");
|
||||||
|
}
|
||||||
|
const dirHandle = await (
|
||||||
|
window as Window & typeof globalThis & { showDirectoryPicker: () => any }
|
||||||
|
).showDirectoryPicker();
|
||||||
|
dispatch(clearPlugins());
|
||||||
|
const values = dirHandle.values();
|
||||||
|
const plugins = [];
|
||||||
|
while (true) {
|
||||||
|
const next = await values.next();
|
||||||
|
if (next.done) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
next.value.kind == "file" &&
|
||||||
|
(next.value.name.endsWith(".esp") ||
|
||||||
|
next.value.name.endsWith(".esm") ||
|
||||||
|
next.value.name.endsWith(".esl"))
|
||||||
|
) {
|
||||||
|
console.log(next.value);
|
||||||
|
plugins.push(next.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dispatch(setPending(plugins.length));
|
||||||
|
|
||||||
|
for (const plugin of plugins) {
|
||||||
|
const file = await plugin.getFile();
|
||||||
|
console.log(file.lastModified);
|
||||||
|
console.log(file.lastModifiedDate);
|
||||||
|
const contents = new Uint8Array(await file.arrayBuffer());
|
||||||
|
try {
|
||||||
|
workerRef.current.postMessage(
|
||||||
|
{
|
||||||
|
skipParsing: excludedPlugins.includes(plugin.name),
|
||||||
|
filename: plugin.name,
|
||||||
|
lastModified: file.lastModified,
|
||||||
|
contents,
|
||||||
|
},
|
||||||
|
[contents.buffer]
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<p className={styles["no-top-margin"]}>
|
||||||
|
To see all of the cell edits and conflicts for your current mod load
|
||||||
|
order select your <code>Data</code> directory below to load the plugins.
|
||||||
|
</p>
|
||||||
|
<button onClick={onDataDirButtonClick}>
|
||||||
|
{plugins.length === 0 ? "Open" : "Reload"} Skyrim Data directory
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DataDirPicker;
|
||||||
88
components/PluginTxtEditor.tsx
Normal file
88
components/PluginTxtEditor.tsx
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
import { createPortal } from "react-dom";
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
import { useAppSelector, useAppDispatch } from "../lib/hooks";
|
||||||
|
import { setPluginsTxt } from "../slices/pluginsTxt";
|
||||||
|
import { applyLoadOrder } from "../slices/plugins";
|
||||||
|
import styles from "../styles/PluginTxtEditor.module.css";
|
||||||
|
|
||||||
|
export const excludedPlugins = [
|
||||||
|
"Skyrim.esm",
|
||||||
|
"Update.esm",
|
||||||
|
"Dawnguard.esm",
|
||||||
|
"HearthFires.esm",
|
||||||
|
"Dragonborn.esm",
|
||||||
|
];
|
||||||
|
|
||||||
|
type Props = {};
|
||||||
|
|
||||||
|
const PluginsLoader: React.FC<Props> = () => {
|
||||||
|
const [editPluginsTxt, setEditPluginsTxt] = useState<string | null>(null);
|
||||||
|
const [pluginsTxtShown, setPluginsTxtShown] = useState(false);
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
const pluginsTxt = useAppSelector((state) => state.pluginsTxt);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setPluginsTxtShown(false);
|
||||||
|
console.log("going to apply!");
|
||||||
|
dispatch(applyLoadOrder());
|
||||||
|
}, [dispatch, pluginsTxt]);
|
||||||
|
|
||||||
|
const onPluginsTxtButtonClick = async () => {
|
||||||
|
setEditPluginsTxt(pluginsTxt);
|
||||||
|
setPluginsTxtShown(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
Paste or drag-and-drop your <code>plugins.txt</code> below to sort and
|
||||||
|
enable the loaded plugins by your current load order.
|
||||||
|
</p>
|
||||||
|
<button onClick={onPluginsTxtButtonClick}>
|
||||||
|
{!pluginsTxt ? "Paste" : "Edit"} Skyrim plugins.txt file
|
||||||
|
</button>
|
||||||
|
{process.browser &&
|
||||||
|
createPortal(
|
||||||
|
<dialog open={pluginsTxtShown} className={styles.dialog}>
|
||||||
|
<h3>Paste plugins.txt</h3>
|
||||||
|
<p>
|
||||||
|
The plugins.txt file is typically found at{" "}
|
||||||
|
<code>
|
||||||
|
C:\Users\username\AppData\Local\Skyrim Special Edition
|
||||||
|
</code>
|
||||||
|
. You can also drag-and-drop the file anywhere on the window to
|
||||||
|
load the file.
|
||||||
|
</p>
|
||||||
|
<textarea
|
||||||
|
value={editPluginsTxt ?? undefined}
|
||||||
|
onChange={(e) => setEditPluginsTxt(e.target.value)}
|
||||||
|
/>
|
||||||
|
<menu>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setEditPluginsTxt(null);
|
||||||
|
setPluginsTxtShown(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
dispatch(setPluginsTxt(editPluginsTxt ?? ""));
|
||||||
|
setPluginsTxtShown(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</menu>
|
||||||
|
</dialog>,
|
||||||
|
document.body
|
||||||
|
)}
|
||||||
|
{process.browser &&
|
||||||
|
createPortal(<div className={styles["drop-area"]} />, document.body)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PluginsLoader;
|
||||||
56
components/PluginsList.tsx
Normal file
56
components/PluginsList.tsx
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import { useAppSelector, useAppDispatch } from "../lib/hooks";
|
||||||
|
import { togglePlugin } from "../slices/plugins";
|
||||||
|
import styles from "../styles/PluginList.module.css";
|
||||||
|
import { excludedPlugins } from "./DataDirPicker";
|
||||||
|
|
||||||
|
type Props = {};
|
||||||
|
|
||||||
|
const PluginsList: React.FC<Props> = () => {
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
const plugins = useAppSelector((state) => state.plugins.plugins);
|
||||||
|
const pluginsPending = useAppSelector((state) => state.plugins.pending);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ol className={styles["plugin-list"]}>
|
||||||
|
{plugins.map((plugin) => (
|
||||||
|
<li key={plugin.filename} title={plugin.filename}>
|
||||||
|
<input
|
||||||
|
id={plugin.filename}
|
||||||
|
type="checkbox"
|
||||||
|
disabled={
|
||||||
|
excludedPlugins.includes(plugin.filename) || !!plugin.parseError
|
||||||
|
}
|
||||||
|
checked={plugin.enabled}
|
||||||
|
onChange={() => dispatch(togglePlugin(plugin.filename))}
|
||||||
|
/>
|
||||||
|
<label htmlFor={plugin.filename} className={styles["plugin-label"]}>
|
||||||
|
{excludedPlugins.includes(plugin.filename) ? (
|
||||||
|
<span>{plugin.filename}</span>
|
||||||
|
) : (
|
||||||
|
<Link href={`/?plugin=${plugin.hash}`}>
|
||||||
|
<a
|
||||||
|
className={plugin.parseError ? styles["plugin-error"] : ""}
|
||||||
|
>
|
||||||
|
{plugin.filename}
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</label>
|
||||||
|
{/* <p>{plugin.parsed && plugin.parsed.header.description}</p> */}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
{pluginsPending > 0 && (
|
||||||
|
<span className={styles.loading}>
|
||||||
|
Loading {pluginsPending} plugin{pluginsPending === 1 ? "" : "s"}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PluginsList;
|
||||||
@ -1,218 +0,0 @@
|
|||||||
import Link from "next/link";
|
|
||||||
import { createPortal } from "react-dom";
|
|
||||||
import React, { useEffect, useRef, useState } from "react";
|
|
||||||
|
|
||||||
import { useAppSelector, useAppDispatch } from "../lib/hooks";
|
|
||||||
import { setPluginsTxt } from "../slices/pluginsTxt";
|
|
||||||
import {
|
|
||||||
addPluginInOrder,
|
|
||||||
applyLoadOrder,
|
|
||||||
clearPlugins,
|
|
||||||
setPending,
|
|
||||||
decrementPending,
|
|
||||||
togglePlugin,
|
|
||||||
PluginFile,
|
|
||||||
} from "../slices/plugins";
|
|
||||||
import styles from "../styles/PluginLoader.module.css";
|
|
||||||
|
|
||||||
const excludedPlugins = [
|
|
||||||
"Skyrim.esm",
|
|
||||||
"Update.esm",
|
|
||||||
"Dawnguard.esm",
|
|
||||||
"HearthFires.esm",
|
|
||||||
"Dragonborn.esm",
|
|
||||||
];
|
|
||||||
|
|
||||||
type Props = {};
|
|
||||||
|
|
||||||
const PluginsLoader: React.FC<Props> = () => {
|
|
||||||
const workerRef = useRef<Worker>();
|
|
||||||
const [editPluginsTxt, setEditPluginsTxt] = useState<string | null>(null);
|
|
||||||
const [pluginsTxtShown, setPluginsTxtShown] = useState(false);
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const plugins = useAppSelector((state) => state.plugins.plugins);
|
|
||||||
const pluginsPending = useAppSelector((state) => state.plugins.pending);
|
|
||||||
const pluginsTxt = useAppSelector((state) => state.pluginsTxt);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setPluginsTxtShown(false);
|
|
||||||
console.log("going to apply!");
|
|
||||||
dispatch(applyLoadOrder());
|
|
||||||
}, [dispatch, pluginsTxt]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
async function loadWorker() {
|
|
||||||
const { default: Worker } = await import(
|
|
||||||
"worker-loader?filename=static/[fullhash].worker.js!../workers/PluginsLoader.worker"
|
|
||||||
);
|
|
||||||
console.log(Worker);
|
|
||||||
workerRef.current = new Worker();
|
|
||||||
workerRef.current.onmessage = (evt: { data: PluginFile }) => {
|
|
||||||
const { data } = evt;
|
|
||||||
console.log(`WebWorker Response =>`);
|
|
||||||
dispatch(decrementPending(1));
|
|
||||||
console.log(data.parsed);
|
|
||||||
dispatch(addPluginInOrder(data));
|
|
||||||
};
|
|
||||||
}
|
|
||||||
loadWorker();
|
|
||||||
return () => {
|
|
||||||
if (workerRef.current) {
|
|
||||||
workerRef.current.terminate();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, [dispatch]);
|
|
||||||
|
|
||||||
const onDataDirButtonClick = async () => {
|
|
||||||
if (!workerRef.current) {
|
|
||||||
return alert("Worker not loaded yet");
|
|
||||||
}
|
|
||||||
const dirHandle = await (
|
|
||||||
window as Window & typeof globalThis & { showDirectoryPicker: () => any }
|
|
||||||
).showDirectoryPicker();
|
|
||||||
dispatch(clearPlugins());
|
|
||||||
const values = dirHandle.values();
|
|
||||||
const plugins = [];
|
|
||||||
while (true) {
|
|
||||||
const next = await values.next();
|
|
||||||
if (next.done) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
next.value.kind == "file" &&
|
|
||||||
(next.value.name.endsWith(".esp") ||
|
|
||||||
next.value.name.endsWith(".esm") ||
|
|
||||||
next.value.name.endsWith(".esl"))
|
|
||||||
) {
|
|
||||||
console.log(next.value);
|
|
||||||
plugins.push(next.value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
dispatch(setPending(plugins.length));
|
|
||||||
|
|
||||||
for (const plugin of plugins) {
|
|
||||||
const file = await plugin.getFile();
|
|
||||||
console.log(file.lastModified);
|
|
||||||
console.log(file.lastModifiedDate);
|
|
||||||
const contents = new Uint8Array(await file.arrayBuffer());
|
|
||||||
try {
|
|
||||||
workerRef.current.postMessage(
|
|
||||||
{
|
|
||||||
skipParsing: excludedPlugins.includes(plugin.name),
|
|
||||||
filename: plugin.name,
|
|
||||||
lastModified: file.lastModified,
|
|
||||||
contents,
|
|
||||||
},
|
|
||||||
[contents.buffer]
|
|
||||||
);
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onPluginsTxtButtonClick = async () => {
|
|
||||||
setEditPluginsTxt(pluginsTxt);
|
|
||||||
setPluginsTxtShown(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<p className={styles["no-top-margin"]}>
|
|
||||||
To see all of the cell edits and conflicts for your current mod load
|
|
||||||
order select your <code>Data</code> directory below to load the plugins.
|
|
||||||
</p>
|
|
||||||
<button onClick={onDataDirButtonClick}>
|
|
||||||
{plugins.length === 0 ? "Open" : "Reload"} Skyrim Data directory
|
|
||||||
</button>
|
|
||||||
<p>
|
|
||||||
Paste or drag-and-drop your <code>plugins.txt</code> below to sort and
|
|
||||||
enable the loaded plugins by your current load order.
|
|
||||||
</p>
|
|
||||||
<button
|
|
||||||
onClick={onPluginsTxtButtonClick}
|
|
||||||
className={styles["plugins-txt-button"]}
|
|
||||||
>
|
|
||||||
{!pluginsTxt ? "Paste" : "Edit"} Skyrim plugins.txt file
|
|
||||||
</button>
|
|
||||||
<ol className={styles["plugin-list"]}>
|
|
||||||
{plugins.map((plugin) => (
|
|
||||||
<li key={plugin.filename} title={plugin.filename}>
|
|
||||||
<input
|
|
||||||
id={plugin.filename}
|
|
||||||
type="checkbox"
|
|
||||||
disabled={
|
|
||||||
excludedPlugins.includes(plugin.filename) || !!plugin.parseError
|
|
||||||
}
|
|
||||||
checked={plugin.enabled}
|
|
||||||
onChange={() => dispatch(togglePlugin(plugin.filename))}
|
|
||||||
/>
|
|
||||||
<label htmlFor={plugin.filename} className={styles["plugin-label"]}>
|
|
||||||
{excludedPlugins.includes(plugin.filename) ? (
|
|
||||||
<span>{plugin.filename}</span>
|
|
||||||
) : (
|
|
||||||
<Link href={`/?plugin=${plugin.hash}`}>
|
|
||||||
<a
|
|
||||||
className={plugin.parseError ? styles["plugin-error"] : ""}
|
|
||||||
>
|
|
||||||
{plugin.filename}
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
</label>
|
|
||||||
{/* <p>{plugin.parsed && plugin.parsed.header.description}</p> */}
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ol>
|
|
||||||
{pluginsPending > 0 && (
|
|
||||||
<span className={styles.processing}>
|
|
||||||
Loading {pluginsPending} plugin{pluginsPending === 1 ? "" : "s"}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{process.browser &&
|
|
||||||
createPortal(
|
|
||||||
<dialog
|
|
||||||
open={pluginsTxtShown}
|
|
||||||
className={styles["plugins-txt-dialog"]}
|
|
||||||
>
|
|
||||||
<h3>Paste plugins.txt</h3>
|
|
||||||
<p>
|
|
||||||
The plugins.txt file is typically found at{" "}
|
|
||||||
<code>
|
|
||||||
C:\Users\username\AppData\Local\Skyrim Special Edition
|
|
||||||
</code>
|
|
||||||
. You can also drag-and-drop the file anywhere on the window to
|
|
||||||
load the file.
|
|
||||||
</p>
|
|
||||||
<textarea
|
|
||||||
value={editPluginsTxt ?? undefined}
|
|
||||||
onChange={(e) => setEditPluginsTxt(e.target.value)}
|
|
||||||
/>
|
|
||||||
<menu>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setEditPluginsTxt(null);
|
|
||||||
setPluginsTxtShown(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
dispatch(setPluginsTxt(editPluginsTxt ?? ""));
|
|
||||||
setPluginsTxtShown(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Save
|
|
||||||
</button>
|
|
||||||
</menu>
|
|
||||||
</dialog>,
|
|
||||||
document.body
|
|
||||||
)}
|
|
||||||
{process.browser &&
|
|
||||||
createPortal(<div className={styles["drop-area"]} />, document.body)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PluginsLoader;
|
|
||||||
@ -5,7 +5,9 @@ import { formatRelative } from "date-fns";
|
|||||||
import CellData from "./CellData";
|
import CellData from "./CellData";
|
||||||
import ModData from "./ModData";
|
import ModData from "./ModData";
|
||||||
import PluginData from "./PluginData";
|
import PluginData from "./PluginData";
|
||||||
import PluginsLoader from "./PluginsLoader";
|
import DataDirPicker from "./DataDirPicker";
|
||||||
|
import PluginTxtEditor from "./PluginTxtEditor";
|
||||||
|
import PluginsList from "./PluginsList";
|
||||||
import styles from "../styles/Sidebar.module.css";
|
import styles from "../styles/Sidebar.module.css";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
@ -126,7 +128,9 @@ const Sidebar: React.FC<Props> = ({
|
|||||||
<p className={styles.subheader}>
|
<p className={styles.subheader}>
|
||||||
An interactive map of Skyrim mods.
|
An interactive map of Skyrim mods.
|
||||||
</p>
|
</p>
|
||||||
<PluginsLoader />
|
<DataDirPicker />
|
||||||
|
<PluginTxtEditor />
|
||||||
|
<PluginsList />
|
||||||
{lastModified && (
|
{lastModified && (
|
||||||
<div className={styles["sidebar-modified-date"]}>
|
<div className={styles["sidebar-modified-date"]}>
|
||||||
<strong>Last updated:</strong>{" "}
|
<strong>Last updated:</strong>{" "}
|
||||||
|
|||||||
3
styles/DataDirPicker.module.css
Normal file
3
styles/DataDirPicker.module.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.no-top-margin {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
@ -1,7 +1,3 @@
|
|||||||
.no-top-margin {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plugin-list {
|
.plugin-list {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@ -22,7 +18,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* From: https://stackoverflow.com/a/28074607/6620612 */
|
/* From: https://stackoverflow.com/a/28074607/6620612 */
|
||||||
.processing:after {
|
.loading:after {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
@ -43,35 +39,3 @@
|
|||||||
width: 1.25em;
|
width: 1.25em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.plugins-txt-dialog {
|
|
||||||
top: 12px;
|
|
||||||
z-index: 4;
|
|
||||||
background-color: #fbefd5;
|
|
||||||
box-shadow: 0 0 1em black;
|
|
||||||
max-width: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plugins-txt-dialog h3 {
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plugins-txt-dialog textarea {
|
|
||||||
width: 100%;
|
|
||||||
min-height: 100px;
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plugins-txt-dialog menu {
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop-area {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
31
styles/PluginTxtEditor.module.css
Normal file
31
styles/PluginTxtEditor.module.css
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
.dialog {
|
||||||
|
top: 12px;
|
||||||
|
z-index: 4;
|
||||||
|
background-color: #fbefd5;
|
||||||
|
box-shadow: 0 0 1em black;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog h3 {
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog textarea {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog menu {
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop-area {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user