accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2025-02-02 12:08:27 +00:00
Code Issues Releases Activity

incr: change scrollbar color

Browse Source 
- actuall remove border
This commit is contained in:
18alantom 2023-02-24 13:29:11 +05:30
parent c3dae8cce2
commit b0c23a6295
2 changed files with 52 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,6 @@
<template> <template>
<div> <div>
<PageHeader :title="t`Template Builder`"> <PageHeader :title="t`Template Builder`">
<Button v-if="displayDoc" @click="showHint = true">{{
t`Show Hint`
}}</Button>
<Button v-if="displayDoc && doc?.template" @click="makePDF"> <Button v-if="displayDoc && doc?.template" @click="makePDF">
{{ t`Save as PDF` }} {{ t`Save as PDF` }}
</Button> </Button>
@ -180,62 +177,62 @@
</div> </div>
</div> </div>
<!-- Hint Modal -->
<Modal
@closemodal="() => (showHint = false)"
:open-modal="showHint"
v-if="displayDoc && hint"
>
<div class="w-form">
<!-- Hint Modal Header -->
<FormHeader
:form-title="t`Hint`"
:form-sub-title="displayDoc.schema.label"
/>
<hr />
<div class="p-4 max-h-96 overflow-auto custom-scroll">
<TemplateBuilderHint :hint="hint" />
</div>
</div>
</Modal>
<!-- Editor Modal --> <!-- Editor Modal -->
<Modal <Modal
v-if="doc" v-if="doc"
@closemodal="() => (showEditor = false)" @closemodal="() => (showEditor = false)"
:open-modal="showEditor" :open-modal="showEditor"
> >
<div> <div class="flex">
<!-- Hint Modal Header --> <!-- Hint Section Header -->
<FormHeader :form-title="t`Template Editor`" /> <div class="border-r" v-if="hint">
<hr /> <h2 class="text-base font-semibold p-4 border-b">
<div class="p-4"> {{ t`Value Keys` }}
<textarea </h2>
v-if="!templateCollapsed" <div
style=" class="overflow-auto custom-scroll p-4"
font-family: monospace; style="max-height: 80vh; width: 25vw"
white-space: pre; >
overflow-wrap: normal; <TemplateBuilderHint :hint="hint" />
resize: both; </div>
" </div>
:value="doc.template ?? ''"
:spellcheck="false" <!-- Template Editor Section -->
cols="74" <div>
rows="30" <h2 class="text-base font-semibold p-4 border-b">
class=" {{ t`Template` }}
overflow-auto </h2>
p-2 <div
border class="overflow-auto custom-scroll p-4"
rounded style="max-height: 80vh; max-width: 65vw"
text-sm text-gray-900 >
focus-within:bg-gray-100 <textarea
outline-none v-if="!templateCollapsed"
bg-gray-50 style="
" font-family: monospace;
@change=" white-space: pre;
overflow-wrap: normal;
resize: both;
"
:value="doc.template ?? ''"
:spellcheck="false"
cols="74"
rows="31"
class="
overflow-auto
p-2
border
rounded
text-sm text-gray-900
focus-within:bg-gray-100
outline-none
bg-gray-50
"
@change="
async (e: Event) => await doc?.set('template', (e.target as HTMLTextAreaElement).value) async (e: Event) => await doc?.set('template', (e.target as HTMLTextAreaElement).value)
" "
></textarea> ></textarea>
</div>
</div> </div>
</div> </div>
</Modal> </Modal>
@ -283,7 +280,6 @@ export default defineComponent({
data() { data() {
return { return {
doc: null, doc: null,
showHint: false,
showEditor: false, showEditor: false,
hint: null, hint: null,
values: null, values: null,
@ -296,7 +292,6 @@ export default defineComponent({
values: null | Record<string, unknown>; values: null | Record<string, unknown>;
doc: PrintTemplate | null; doc: PrintTemplate | null;
showEditor: boolean; showEditor: boolean;
showHint: boolean;
displayDoc: PrintTemplate | null; displayDoc: PrintTemplate | null;
templateCollapsed: boolean; templateCollapsed: boolean;
helpersCollapsed: boolean; helpersCollapsed: boolean;

8
src/styles/index.css
View File

@ -133,19 +133,19 @@ input[type='number']::-webkit-inner-spin-button {
} }
.custom-scroll::-webkit-scrollbar-track:vertical { .custom-scroll::-webkit-scrollbar-track:vertical {
border-left: solid 1px theme('colors.gray.200'); border-left: solid 1px theme('colors.gray.100');
} }
.custom-scroll::-webkit-scrollbar-track:horizontal { .custom-scroll::-webkit-scrollbar-track:horizontal {
border-top: solid 1px theme('colors.gray.200'); border-top: solid 1px theme('colors.gray.100');
} }
.custom-scroll::-webkit-scrollbar-thumb { .custom-scroll::-webkit-scrollbar-thumb {
background: theme('colors.gray.200'); background: theme('colors.gray.100');
} }
.custom-scroll::-webkit-scrollbar-thumb:hover { .custom-scroll::-webkit-scrollbar-thumb:hover {
background: theme('colors.gray.400'); background: theme('colors.gray.200');
} }
/* /*