accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2025-01-08 17:24:05 +00:00
Code Issues Releases Activity

fix(ui): update template editor colors

Browse Source
This commit is contained in:
18alantom 2023-03-08 19:55:45 +05:30
parent a8f73b605e
commit ec9cc7f2b4
3 changed files with 41 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/pages/TemplateBuilder/TemplateBuilder.vue
View File

@ -195,16 +195,13 @@
<h2 class="text-base font-semibold p-4 border-b"> <h2 class="text-base font-semibold p-4 border-b">
{{ t`Template` }} {{ t`Template` }}
</h2> </h2>
<div <TemplateEditor
class="overflow-auto custom-scroll" class="overflow-auto custom-scroll"
style="max-height: 80vh; width: 65vw" style="max-height: 80vh; width: 65vw"
> v-if="!templateCollapsed && typeof doc.template === 'string'"
<TemplateEditor v-model.lazy="doc.template"
v-if="!templateCollapsed && typeof doc.template === 'string'" :disabled="!doc.isCustom"
v-model.lazy="doc.template" />
:disabled="!doc.isCustom"
/>
</div>
</div> </div>
</div> </div>
</Modal> </Modal>

6
src/pages/TemplateBuilder/TemplateBuilderHint.vue
View File

@ -34,9 +34,9 @@
<div <div
v-else v-else
class=" class="
text-green-600 text-pink-600
bg-green-50 bg-pink-50
border-green-200 border border-pink-200 border
tracking-tighter tracking-tighter
rounded rounded
text-xs text-xs

40
src/pages/TemplateBuilder/TemplateEditor.vue
View File

@ -1,13 +1,15 @@
<template> <template>
<div ref="container"></div> <div ref="container" class="bg-white text-gray-900"></div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { vue } from '@codemirror/lang-vue'; import { vue } from '@codemirror/lang-vue';
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
import { Compartment, EditorState } from '@codemirror/state'; import { Compartment, EditorState } from '@codemirror/state';
import { ViewUpdate, EditorView } from '@codemirror/view'; import { EditorView, ViewUpdate } from '@codemirror/view';
import { tags } from '@lezer/highlight';
import { basicSetup } from 'codemirror'; import { basicSetup } from 'codemirror';
import { defineComponent } from 'vue'; import { uicolors } from 'src/utils/colors';
import { markRaw } from 'vue'; import { defineComponent, markRaw } from 'vue';
export default defineComponent({ export default defineComponent({
data() { data() {
@ -33,15 +35,24 @@ export default defineComponent({
if (!this.view) { if (!this.view) {
this.init(); this.init();
} }
// @ts-ignore
window.vte = this;
}, },
methods: { methods: {
init() { init() {
const readOnly = new Compartment(); const readOnly = new Compartment();
const editable = new Compartment(); const editable = new Compartment();
const highlightStyle = HighlightStyle.define([
{ tag: tags.typeName, color: uicolors.pink[600] },
{ tag: tags.angleBracket, color: uicolors.pink[600] },
{ tag: tags.attributeName, color: uicolors.gray[700] },
{ tag: tags.attributeValue, color: uicolors.blue[700] },
{ tag: tags.comment, color: uicolors.gray[500] },
{ tag: tags.keyword, color: uicolors.blue[500] },
{ tag: tags.variableName, color: uicolors.yellow[600] },
{ tag: tags.string, color: uicolors.pink[700] },
{ tag: tags.content, color: uicolors.gray[700] },
]);
const view = new EditorView({ const view = new EditorView({
doc: this.modelValue, doc: this.modelValue,
extensions: [ extensions: [
@ -50,6 +61,7 @@ export default defineComponent({
editable.of(EditorView.editable.of(!this.disabled)), editable.of(EditorView.editable.of(!this.disabled)),
basicSetup, basicSetup,
vue(), vue(),
syntaxHighlighting(highlightStyle),
], ],
parent: this.container, parent: this.container,
}); });
@ -96,3 +108,17 @@ export default defineComponent({
}, },
}); });
</script> </script>
<style>
.cm-gutter {
@apply bg-gray-50;
}
.cm-gutters {
border: none !important;
}
.cm-activeLine,
.cm-activeLineGutter {
background-color: #e5f3ff67 !important;
}
</style>