Improve "Run JavaScript" dialog

This commit is contained in:
Tom Najdek 2024-01-16 14:53:21 +01:00 committed by Dan Stillman
parent a54ed665bf
commit 2f9a12c2da
6 changed files with 128 additions and 110 deletions

View file

@ -37,5 +37,9 @@ window.addEventListener("DOMContentLoaded", function(e) {
JavaScriptMode = require("ace/mode/javascript").Mode; JavaScriptMode = require("ace/mode/javascript").Mode;
TextMode = require("ace/mode/text").Mode; TextMode = require("ace/mode/text").Mode;
EditSession = require("ace/edit_session").EditSession; EditSession = require("ace/edit_session").EditSession;
editor = ace.edit('ace-div');
const isDark = Zotero.getMainWindow()?.matchMedia('(prefers-color-scheme: dark)').matches;
editor = ace.edit('ace-div', {
theme: isDark ? 'ace/theme/monokai' : 'ace/theme/chrome'
});
}, false); }, false);

View file

@ -1,7 +1,7 @@
<html> <html id="run-js">
<head> <head>
<title>Run JavaScript</title> <title>Run JavaScript</title>
<link href="chrome://zotero/skin/runJS.css" rel="stylesheet"/> <link href="chrome://zotero-platform/content/zotero.css" rel="stylesheet"/>
</head> </head>
<body> <body>
<nav> <nav>

View file

@ -93,9 +93,15 @@ window.addEventListener("load", function (e) {
// TODO: Enable if we modify to autocomplete from the Zotero API // TODO: Enable if we modify to autocomplete from the Zotero API
//enableLiveAutocompletion: true, //enableLiveAutocompletion: true,
highlightActiveLine: false, highlightActiveLine: false,
showGutter: false, showGutter: false
theme: "ace/theme/chrome",
}); });
codeEditor.on('input', handleInput); codeEditor.on('input', handleInput);
codeEditor.focus(); codeEditor.focus();
const isDarkMQL = Zotero.getMainWindow()?.matchMedia('(prefers-color-scheme: dark)');
isDarkMQL.addEventListener("change", (ev) => {
codeEditor.setOptions({
theme: ev.matches ? 'ace/theme/monokai' : 'ace/theme/chrome'
});
});
}, false); }, false);

View file

@ -1,81 +0,0 @@
body {
font-family: Helvetica, sans-serif;
margin: 0;
height: 100%;
}
nav {
padding: 8px 5px 5px;
height: 25px;
}
button {
font-size: 15px;
}
#help-button {
margin-left: 15px;
}
#run-label {
margin-left: 2px;
font-size: 12px;
}
main {
display: flex;
justify-content: stretch;
height: calc(100% - 38px);
}
.textbox-container {
display: flex;
flex-direction: column;
align-items: stretch;
flex-grow: 1;
padding: 10px;
}
.textbox-header {
display: flex;
align-items: center;
justify-content: space-between;
line-height: 1.5;
}
.textbox-label {
font-size: 15px;
}
#run-as-async-label {
font-size: 13px;
}
label {
flex-grow: 0;
}
input[type=checkbox] {
margin-top: 0;
margin-bottom: 0;
}
iframe {
border: 1px solid gray;
}
iframe, textarea {
flex-grow: 1;
margin: 5px 0;
font-family: Monaco, Consolas, Inconsolata, monospace;
font-size: 12px;
resize: none;
}
textarea.error {
color: red;
}
.editor-code {
flex: 1;
}

View file

@ -40,7 +40,8 @@
@import "components/notesList"; @import "components/notesList";
@import "components/progressMeter"; @import "components/progressMeter";
@import "components/publications-dialog"; @import "components/publications-dialog";
@import "components/rtfScan.scss"; @import "components/rtfScan";
@import "components/runJS";
@import "components/search"; @import "components/search";
@import "components/selectItemsDialog"; @import "components/selectItemsDialog";
@import "components/spinner"; @import "components/spinner";

View file

@ -0,0 +1,88 @@
#run-js {
body {
font-size: 12px;
margin: 0;
height: 100%;
}
nav {
padding: 8px 5px 5px;
height: 25px;
}
button {
font-size: 15px;
}
#help-button {
margin-left: 15px;
}
#run-label {
margin-left: 2px;
font-size: 12px;
}
main {
display: flex;
justify-content: stretch;
height: calc(100% - 38px);
}
.textbox-container {
display: flex;
flex-direction: column;
align-items: stretch;
flex-grow: 1;
padding: 10px;
}
.textbox-header {
display: flex;
align-items: center;
justify-content: space-between;
line-height: 1.5;
}
.textbox-label {
font-size: 15px;
}
#run-as-async-label {
font-size: 13px;
}
label {
flex-grow: 0;
}
input[type=checkbox] {
margin-top: 0;
margin-bottom: 0;
}
iframe {
border: var(--material-panedivider);;
}
iframe,
textarea {
flex-grow: 1;
margin: 5px 0;
font-family: Monaco, Consolas, Inconsolata, monospace;
font-size: 12px;
resize: none;
}
textarea {
padding: 8px;
}
textarea.error {
color: var(--accent-red);
}
.editor-code {
flex: 1;
}
}