Skip to content

Commit

Permalink
include legacy settings for visability (#474)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdroidian
mdroidian authored Mar 6, 2024
1 parent 3f6e462 commit 5e2c56c
Show file tree
Hide file tree
Showing 4 changed files with 203 additions and 122 deletions.
39 changes: 39 additions & 0 deletions src/components/LegacySettings.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import React from "react";
import { Divider, HTMLTable } from "@blueprintjs/core";
import { get } from "../settings";
import { FEATURES } from "..";

const LegacySettings = ({ moduleId }: { moduleId: string }) => {
const featureSettings = FEATURES.find((f) => f.id === moduleId)?.settings;
if (!featureSettings) return <>No Settings For {moduleId}</>;

const docs = FEATURES.find((f) => f.id === moduleId)?.docs;

return (
<div className="mx-auto">
<HTMLTable bordered={false}>
{Object.entries(featureSettings).map(([key, value]) => {
const setting = get(value) || "Not Set";
return (
<tr>
<td>{key}</td>
<td>{setting}</td>
</tr>
);
})}
</HTMLTable>
<Divider />
{docs && (
<div className="text-center">
<a
href={`https://github.com/RoamJs/workbench/blob/main/docs/${docs}`}
>
Documentation
</a>
</div>
)}
</div>
);
};

export default LegacySettings;
263 changes: 148 additions & 115 deletions src/components/SettingsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,15 @@ import React, { useState } from "react";
import {
AnchorButton,
Button,
Classes,
Dialog,
HTMLTable,
Popover,
Switch,
} from "@blueprintjs/core";
import { OnloadArgs } from "roamjs-components/types";
import { Feature } from "../index";
import LegacySettings from "./LegacySettings";

const SettingsTable =
(FEATURES: Feature[], extensionAPI: OnloadArgs["extensionAPI"]) => () => {
Expand All @@ -18,7 +21,12 @@ const SettingsTable =
});
const [featureToggleSettings, setFeatureToggleSettings] =
useState(initialSettings);

const [isDialogOpen, setIsDialogOpen] = useState(false);
const [currentModuleId, setCurrentModuleId] = useState("");
const handleOpenDialog = (moduleId: string) => {
setCurrentModuleId(moduleId);
setIsDialogOpen(true);
};
const settingsStyle: React.CSSProperties = {
maxWidth: "25px",
minWidth: "initial",
Expand Down Expand Up @@ -46,130 +54,155 @@ const SettingsTable =
const isMaxWidth = window.matchMedia("(max-width: 1279px)").matches;

return (
<HTMLTable
bordered={false}
style={{ ...noBorder }}
className="workbench-settings"
>
<thead>
<tr style={{ ...thBorder }}>
<th style={{ ...settingsStyle, ...noBorder }}>Enabled</th>
<th style={{ ...featureStyle, ...noBorder }}>Feature</th>
<th
style={{
...settingsStyle,
...noBorder,
display: isMaxWidth ? "none" : "",
}}
>
Info
</th>
{/* <th style={{ ...settingsStyle }}>Settings</th> */}
<th style={{ ...settingsStyle, ...noBorder }}>Documentation</th>
</tr>
</thead>
<tbody>
{FEATURES.map(({ id, name, docs, module, description, gif }, i) => (
<tr
key={id}
style={{
borderBottom:
i === FEATURES.length - 1 ? "none" : "solid 1px #293742",
borderRight: "none",
borderLeft: "none",
}}
>
<td
aria-label="On/Off Switch"
style={{ ...settingsStyle, ...noBorder }}
>
<Switch
checked={featureToggleSettings[id]}
onChange={(e) => {
const updatedSettings = {
...featureToggleSettings,
[id]: (e.target as HTMLInputElement).checked,
};
setFeatureToggleSettings(updatedSettings);
extensionAPI.settings.set(
id,
(e.target as HTMLInputElement).checked
);
module.toggleFeature(
(e.target as HTMLInputElement).checked,
extensionAPI
);
}}
/>
</td>
<td
aria-label="Feature Name"
style={{ ...featureStyle, ...noBorder }}
<>
<HTMLTable
bordered={false}
style={{ ...noBorder }}
className="workbench-settings"
>
<thead>
<tr style={{ ...thBorder }}>
<th style={{ ...settingsStyle, ...noBorder }}>Enabled</th>
<th style={{ ...featureStyle, ...noBorder }}>Feature</th>
<th
style={{
...settingsStyle,
...noBorder,
display: isMaxWidth ? "none" : "",
}}
>
<span>{name}</span>
</td>
<td
aria-label="Info button"
Info
</th>
<th
style={{
...settingsStyle,
...noBorder,
display: isMaxWidth ? "none" : "",
}}
>
<Popover
content={
<div style={{ width: "540px", height: "420px" }}>
<p
style={{
padding: "10px",
margin: 0,
textAlign: "center",
borderBottom: "1px solid lightgray",
}}
>
{description}
</p>
<img
style={{
width: "100%",
marginTop: "10px",
}}
src={`https://github.com/RoamJS/workbench/blob/main/docs/media/${gif}.gif?raw=true`}
/>
</div>
}
Settings
</th>
<th style={{ ...settingsStyle, ...noBorder }}>Documentation</th>
</tr>
</thead>
<tbody>
{FEATURES.map(
({ id, name, docs, module, description, gif, settings }, i) => (
<tr
key={id}
style={{
borderBottom:
i === FEATURES.length - 1 ? "none" : "solid 1px #293742",
borderRight: "none",
borderLeft: "none",
}}
>
<Button icon="info-sign" />
</Popover>
</td>
{/* placeholder for when settings migrated to API */}
{/* https://github.com/RoamJS/workbench/issues/402 */}
{/* <td aria-label="Settings button" style={{ ...settingsStyle, ...cellsBorder }}>
{settings ? (
<Button
intent="primary"
icon="cog"
onClick={() => {
console.log("Button clicked!");
<td
aria-label="On/Off Switch"
style={{ ...settingsStyle, ...noBorder }}
>
<Switch
checked={featureToggleSettings[id]}
onChange={(e) => {
const updatedSettings = {
...featureToggleSettings,
[id]: (e.target as HTMLInputElement).checked,
};
setFeatureToggleSettings(updatedSettings);
extensionAPI.settings.set(
id,
(e.target as HTMLInputElement).checked
);
module.toggleFeature(
(e.target as HTMLInputElement).checked,
extensionAPI
);
}}
/>
) : null}
</td> */}
<td
aria-label="Docs Button"
style={{ ...settingsStyle, ...noBorder }}
>
<AnchorButton
intent="primary"
icon="document-open"
href={`https://github.com/RoamJs/workbench/blob/main/docs/${docs}`}
target="_blank"
/>
</td>
</tr>
))}
</tbody>
</HTMLTable>
</td>
<td
aria-label="Feature Name"
style={{ ...featureStyle, ...noBorder }}
>
<span>{name}</span>
</td>
<td
aria-label="Info button"
style={{
...settingsStyle,
...noBorder,
display: isMaxWidth ? "none" : "",
}}
>
<Popover
content={
<div style={{ width: "540px", height: "420px" }}>
<p
style={{
padding: "10px",
margin: 0,
textAlign: "center",
borderBottom: "1px solid lightgray",
}}
>
{description}
</p>
<img
style={{
width: "100%",
marginTop: "10px",
}}
src={`https://github.com/RoamJS/workbench/blob/main/docs/media/${gif}.gif?raw=true`}
/>
</div>
}
>
<Button icon="info-sign" />
</Popover>
</td>
{/* https://github.com/RoamJS/workbench/issues/402 */}
<td
aria-label="Settings Button"
style={{
...settingsStyle,
...noBorder,
display: isMaxWidth ? "none" : "",
}}
>
{settings ? (
<Button icon="cog" onClick={() => handleOpenDialog(id)} />
) : null}
</td>
<td
aria-label="Docs Button"
style={{ ...settingsStyle, ...noBorder }}
>
<AnchorButton
intent="primary"
icon="document-open"
href={`https://github.com/RoamJs/workbench/blob/main/docs/${docs}`}
target="_blank"
/>
</td>
</tr>
)
)}
</tbody>
</HTMLTable>
<Dialog
className="w-auto"
isOpen={isDialogOpen}
onClose={() => setIsDialogOpen(false)}
title="Module Settings"
canOutsideClickClose
canEscapeKeyClose
autoFocus={false}
>
<div className={Classes.DIALOG_BODY}>
<LegacySettings moduleId={currentModuleId} />
</div>
</Dialog>
</>
);
};

Expand Down
Loading

0 comments on commit 5e2c56c

Please sign in to comment.