WIP: Add light/dark theme with toggle in navbar (dark theme styling incomplete - dont care for now)
This commit is contained in:
Peter Stockings
@@ -7,19 +7,30 @@ const FunctionHistory = {
|
||||
vnode.state.rightVersion = versions[0];
|
||||
vnode.state.editor = null;
|
||||
vnode.state.aceDiffer = null;
|
||||
|
||||
// Listen for theme changes
|
||||
vnode.state.themeListener = (e) => {
|
||||
const newTheme = e.detail.theme;
|
||||
const aceTheme = newTheme === 'dark' ? "ace/theme/monokai" : "ace/theme/chrome";
|
||||
if (vnode.state.editor) {
|
||||
vnode.state.editor.setTheme(aceTheme);
|
||||
}
|
||||
// Note: AceDiff might need a full re-init to change theme properly, or we can just let it be
|
||||
};
|
||||
window.addEventListener('themeChanged', vnode.state.themeListener);
|
||||
},
|
||||
|
||||
view: function (vnode) {
|
||||
const { versions } = vnode.attrs;
|
||||
const { mode, selectedVersion, leftVersion, rightVersion } = vnode.state;
|
||||
|
||||
return m(".flex.flex-col.md:flex-row.h-full", [
|
||||
return m(".flex.flex-col.md:flex-row.h-full.bg-white.dark:bg-gray-900.text-gray-900.dark:text-white", [
|
||||
// Vertical Timeline
|
||||
m(".w-full.md:w-64.border-b.md:border-r.md:border-b-0.overflow-y-auto", [
|
||||
m("div.p-4.border-b.flex.justify-between.items-center", [
|
||||
m(".w-full.md:w-64.border-b.md:border-r.md:border-b-0.border-gray-200.dark:border-gray-700.overflow-y-auto.bg-gray-50.dark:bg-gray-800", [
|
||||
m("div.p-4.border-b.border-gray-200.dark:border-gray-700.flex.justify-between.items-center", [
|
||||
m("h3.text-lg.font-semibold", "History"),
|
||||
m(
|
||||
"button.text-sm.bg-gray-200.hover:bg-gray-300.text-gray-800.font-semibold.py-1.px-2.rounded",
|
||||
"button.text-sm.bg-gray-200.hover:bg-gray-300.dark:bg-gray-700.dark:hover:bg-gray-600.text-gray-800.dark:text-gray-200.font-semibold.py-1.px-2.rounded",
|
||||
{
|
||||
onclick: () => {
|
||||
vnode.state.mode = mode === "view" ? "diff" : "view";
|
||||
@@ -35,11 +46,11 @@ const FunctionHistory = {
|
||||
selectedVersion &&
|
||||
version.version_number === selectedVersion.version_number;
|
||||
return m(
|
||||
"li.p-2.cursor-pointer",
|
||||
"li.p-2.cursor-pointer.mb-1",
|
||||
{
|
||||
class: isActive
|
||||
? "bg-gray-200 rounded"
|
||||
: "hover:bg-gray-100 rounded",
|
||||
? "bg-blue-100 dark:bg-blue-900/50 rounded"
|
||||
: "hover:bg-gray-200 dark:hover:bg-gray-700 rounded",
|
||||
onclick: () => {
|
||||
vnode.state.selectedVersion = version;
|
||||
if (mode === "diff") {
|
||||
@@ -50,7 +61,7 @@ const FunctionHistory = {
|
||||
[
|
||||
m("div.font-bold", `Version ${version.version_number}`),
|
||||
m(
|
||||
"div.text-sm.text-gray-600",
|
||||
"div.text-sm.text-gray-600.dark:text-gray-400",
|
||||
new Date(version.versioned_at).toLocaleString()
|
||||
),
|
||||
]
|
||||
@@ -60,7 +71,7 @@ const FunctionHistory = {
|
||||
]),
|
||||
|
||||
// Code Viewer or Differ
|
||||
m(".flex-1.p-4", [
|
||||
m(".flex-1.p-4.bg-white.dark:bg-gray-900", [
|
||||
mode === "view"
|
||||
? m("div", [
|
||||
m(
|
||||
@@ -72,9 +83,9 @@ const FunctionHistory = {
|
||||
: m("div", [
|
||||
m(".flex.flex-col.md:flex-row.gap-4.mb-4", [
|
||||
m(".flex-1", [
|
||||
m("label.block.text-sm.font-medium.text-gray-700", "Left"),
|
||||
m("label.block.text-sm.font-medium.text-gray-700.dark:text-gray-300", "Left"),
|
||||
m(
|
||||
"select.mt-1.block.w-full.rounded-md.border-gray-300.shadow-sm",
|
||||
"select.mt-1.block.w-full.rounded-md.border-gray-300.dark:border-gray-600.shadow-sm.bg-white.dark:bg-gray-700.text-gray-900.dark:text-white",
|
||||
{
|
||||
onchange: (e) =>
|
||||
(vnode.state.leftVersion = versions.find(
|
||||
@@ -92,9 +103,9 @@ const FunctionHistory = {
|
||||
),
|
||||
]),
|
||||
m(".flex-1", [
|
||||
m("label.block.text-sm.font-medium.text-gray-700", "Right"),
|
||||
m("label.block.text-sm.font-medium.text-gray-700.dark:text-gray-300", "Right"),
|
||||
m(
|
||||
"select.mt-1.block.w-full.rounded-md.border-gray-300.shadow-sm",
|
||||
"select.mt-1.block.w-full.rounded-md.border-gray-300.dark:border-gray-600.shadow-sm.bg-white.dark:bg-gray-700.text-gray-900.dark:text-white",
|
||||
{
|
||||
onchange: (e) =>
|
||||
(vnode.state.rightVersion = versions.find(
|
||||
@@ -128,6 +139,8 @@ const FunctionHistory = {
|
||||
|
||||
updateEditorOrDiffer: function (vnode) {
|
||||
const { mode, selectedVersion, leftVersion, rightVersion } = vnode.state;
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
const theme = isDark ? "ace/theme/monokai" : "ace/theme/chrome";
|
||||
|
||||
if (mode === "view") {
|
||||
if (vnode.state.aceDiffer) {
|
||||
@@ -136,9 +149,11 @@ const FunctionHistory = {
|
||||
}
|
||||
if (!vnode.state.editor) {
|
||||
vnode.state.editor = ace.edit("editor-history");
|
||||
vnode.state.editor.setTheme("ace/theme/monokai");
|
||||
vnode.state.editor.setTheme(theme);
|
||||
vnode.state.editor.session.setMode("ace/mode/javascript");
|
||||
vnode.state.editor.setReadOnly(true);
|
||||
} else {
|
||||
vnode.state.editor.setTheme(theme);
|
||||
}
|
||||
vnode.state.editor.setValue(selectedVersion.script, -1);
|
||||
} else {
|
||||
@@ -153,6 +168,7 @@ const FunctionHistory = {
|
||||
vnode.state.aceDiffer = new AceDiff({
|
||||
element: "#diff-container",
|
||||
mode: "ace/mode/javascript",
|
||||
theme: theme,
|
||||
left: { content: leftVersion.script, editable: false },
|
||||
right: { content: rightVersion.script, editable: false },
|
||||
});
|
||||
@@ -166,5 +182,8 @@ const FunctionHistory = {
|
||||
if (vnode.state.aceDiffer) {
|
||||
vnode.state.aceDiffer.destroy();
|
||||
}
|
||||
if (vnode.state.themeListener) {
|
||||
window.removeEventListener('themeChanged', vnode.state.themeListener);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
@@ -57,7 +57,12 @@ const Editor = {
|
||||
oncreate() {
|
||||
this.editorJS = ace.edit("js-editor");
|
||||
this.editorJS.setOptions({ maxLines: 100 });
|
||||
this.editorJS.setTheme("ace/theme/github_dark");
|
||||
|
||||
// Determine initial theme
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
const theme = isDark ? "ace/theme/monokai" : "ace/theme/chrome";
|
||||
|
||||
this.editorJS.setTheme(theme);
|
||||
this.editorJS.session.setMode(
|
||||
this.runtime === "python" ? "ace/mode/python" : "ace/mode/javascript"
|
||||
);
|
||||
@@ -70,7 +75,7 @@ const Editor = {
|
||||
|
||||
this.editorJSON = ace.edit("json-editor");
|
||||
this.editorJSON.setOptions({ maxLines: 100 });
|
||||
this.editorJSON.setTheme("ace/theme/github_dark");
|
||||
this.editorJSON.setTheme(theme);
|
||||
this.editorJSON.session.setMode("ace/mode/json");
|
||||
this.editorJSON.setValue(this.jsonValue, -1);
|
||||
|
||||
@@ -78,6 +83,20 @@ const Editor = {
|
||||
this.jsonValue = this.editorJSON.getValue();
|
||||
m.redraw();
|
||||
});
|
||||
|
||||
// Listen for theme changes
|
||||
this.themeListener = (e) => {
|
||||
const newTheme = e.detail.theme === 'dark' ? "ace/theme/monokai" : "ace/theme/chrome";
|
||||
this.editorJS.setTheme(newTheme);
|
||||
this.editorJSON.setTheme(newTheme);
|
||||
};
|
||||
window.addEventListener('themeChanged', this.themeListener);
|
||||
},
|
||||
|
||||
onremove() {
|
||||
if (this.themeListener) {
|
||||
window.removeEventListener('themeChanged', this.themeListener);
|
||||
}
|
||||
},
|
||||
|
||||
async execute() {
|
||||
|
||||
Reference in New Issue
Block a user