zotero-better-notes/addon/chrome/content/templateEditor.xhtml

243 lines
7.3 KiB
HTML

<?xml version="1.0"?>
<!-- prettier-ignore -->
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<!-- prettier-ignore -->
<?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
<!-- prettier-ignore -->
<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css" type="text/css"?>
<!-- prettier-ignore -->
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css" type="text/css"?>
<!-- prettier-ignore -->
<!DOCTYPE html>
<html
id="__addonRef__-templateEditor"
lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
windowtype="__addonRef__-templateEditor"
sizemode="normal"
scrolling="false"
persist="screenX screenY width height sizemode"
>
<head>
<title data-l10n-id="title"></title>
<meta charset="utf-8" />
<meta name="referrer" content="no-referrer" />
<xul:linkset>
<link rel="localization" href="browser/menubar.ftl" />
<link rel="localization" href="browser/browserSets.ftl" />
<link rel="localization" href="toolkit/global/textActions.ftl" />
<link rel="localization" href="zotero.ftl" />
<link rel="localization" href="__addonRef__-templateEditor.ftl" />
</xul:linkset>
<xul:commandset id="mainCommandSet">
<xul:command id="cmd_close" oncommand="window.close();" />
</xul:commandset>
<xul:keyset id="mainKeyset">
<xul:key
id="key_close"
data-l10n-id="close-shortcut"
command="cmd_close"
modifiers="accel"
reserved="true"
/>
</xul:keyset>
<script>
document.addEventListener("DOMContentLoaded", (ev) => {
const { Services } = ChromeUtils.import(
"resource://gre/modules/Services.jsm",
);
Services.scriptloader.loadSubScript(
"chrome://zotero/content/include.js",
this,
);
Services.scriptloader.loadSubScript(
"resource://zotero/require.js",
this,
);
window.arguments[0]._initPromise.resolve();
});
</script>
<style>
html,
body {
min-width: 600px;
min-height: 400px;
}
html,
body,
.viewport {
padding: 0;
margin: 0;
height: 100%;
word-wrap: break-word;
}
.viewport {
flex-grow: 1;
flex-shrink: 1;
margin: 0 5px 0 5px;
overflow-x: hidden;
overflow-y: auto;
}
.viewport-container {
padding: 0;
margin: 0;
height: calc(100% - 50px);
width: 100%;
display: flex;
flex-direction: row;
overflow: hidden;
border-bottom: var(--material-border);
background: var(--material-background);
}
.footer-container {
padding: 5px;
}
.list-viewport {
width: calc(30% - 10px);
height: 100%;
overflow: hidden;
}
#table-container {
height: 100%;
width: 100%;
overflow: auto;
}
#templates-table {
height: 100%;
}
.editor-viewport {
display: flex;
flex-direction: column;
width: calc(40% - 10px);
padding: 5px;
}
.preview-viewport {
display: flex;
flex-direction: column;
width: calc(30% - 10px);
padding: 5px;
}
.markdown-body {
box-sizing: border-box;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 0px;
}
.help-button {
appearance: auto;
-moz-default-appearance: -moz-mac-help-button;
min-width: 0;
}
</style>
<link
rel="stylesheet"
type="text/css"
href="chrome://__addonRef__/content/lib/css/github-markdown.css"
/>
</head>
<body class="zotero-window">
<div class="viewport-container">
<xul:hbox id="list-container" class="viewport list-viewport">
<div id="table-container"></div>
</xul:hbox>
<xul:splitter
state="open"
collapse="before"
orient="horizontal"
></xul:splitter>
<xul:hbox class="viewport editor-viewport">
<xul:hbox align="center">
<div style="flex-shrink: 0" data-l10n-id="templateType"></div>
<xul:menulist id="editor-type" native="true">
<xul:menupopup>
<xul:menuitem
data-l10n-id="templateType-unknown"
value="unknown"
></xul:menuitem>
<xul:menuitem
data-l10n-id="templateType-system"
value="system"
hidden="true"
></xul:menuitem>
<xul:menuitem
data-l10n-id="templateType-item"
value="item"
></xul:menuitem>
<xul:menuitem
data-l10n-id="templateType-text"
value="text"
></xul:menuitem>
</xul:menupopup>
</xul:menulist>
<button
id="templateType-help"
data-l10n-id="templateType-help"
class="help-button"
></button>
</xul:hbox>
<xul:hbox align="center">
<div style="flex-shrink: 0" data-l10n-id="templateName"></div>
<input id="editor-name" type="text" style="width: 100%" />
</xul:hbox>
<div style="display: flex; flex-direction: column; height: 100%">
<iframe
id="editor"
src="chrome://scaffold/content/monaco/monaco.html"
style="width: 100%; height: 100%; border: none"
onmousedown="this.focus()"
></iframe>
</div>
</xul:hbox>
<xul:splitter
state="open"
collapse="after"
orient="horizontal"
></xul:splitter>
<xul:hbox class="viewport preview-viewport">
<div style="display: flex">
<div style="flex-shrink: 0" data-l10n-id="previewContainer"></div>
</div>
<article id="preview-container" class="markdown-body"></article>
</xul:hbox>
</div>
<div
class="footer-container"
style="justify-content: flex-start; padding: 10px; gap: 8px"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
<button id="create" data-l10n-id="create"></button>
<button id="save" data-l10n-id="save"></button>
<button id="delete" data-l10n-id="delete"></button>
<button id="reset" data-l10n-id="reset"></button>
<button id="more" data-l10n-id="more"></button>
<button
id="options"
data-l10n-id="options"
tabindex="-1"
type="menu"
wantdropmarker="true"
>
<menupopup>
<menuitem
id="importClipboard"
data-l10n-id="importClipboard"
></menuitem>
<menuitem id="importNote" data-l10n-id="importNote"></menuitem>
<menuseparator />
<menuitem id="share" data-l10n-id="share"></menuitem>
<menuseparator />
<menuitem id="backup" data-l10n-id="backup"></menuitem>
<menuitem id="restore" data-l10n-id="restore"></menuitem>
<menuseparator />
<menuitem id="help" data-l10n-id="help"></menuitem>
</menupopup>
</button>
</div>
</body>
</html>