accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2025-02-14 01:40:26 +00:00
Code Issues Releases Activity

fix(ui): transition on printview customizer

Browse Source
This commit is contained in:
18alantom 2022-11-08 15:44:54 +05:30
parent 9bcb651f02
commit ad2eec1acb
3 changed files with 39 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/pages/Desk.vue
View File

@ -88,23 +88,4 @@ export default {
.sidebar-leave-active { .sidebar-leave-active {
transition: all 250ms ease-out; transition: all 250ms ease-out;
} }
.quickedit-enter-from,
.quickedit-leave-to {
transform: translateX(var(--w-quick-edit));
width: 0px;
opacity: 0;
}
.quickedit-enter-to,
.quickedit-leave-from {
transform: translateX(0px);
width: var(--w-quick-edit);
opacity: 1;
}
.quickedit-enter-active,
.quickedit-leave-active {
transition: all 250ms ease-out;
}
</style> </style>

30
src/pages/PrintView/PrintView.vue
View File

@ -37,21 +37,23 @@
</div> </div>
<!-- Printview Customizer --> <!-- Printview Customizer -->
<div class="border-l w-quick-edit" v-if="showCustomiser"> <Transition name="quickedit">
<div <div class="border-l w-quick-edit" v-if="showCustomiser">
class="px-4 flex items-center justify-between h-row-largest border-b" <div
> class="px-4 flex items-center justify-between h-row-largest border-b"
<h2 class="font-semibold">{{ t`Customise` }}</h2> >
<Button :icon="true" @click="showCustomiser = false"> <h2 class="font-semibold">{{ t`Customise` }}</h2>
<feather-icon name="x" class="w-4 h-4" /> <Button :icon="true" @click="showCustomiser = false">
</Button> <feather-icon name="x" class="w-4 h-4" />
</Button>
</div>
<TwoColumnForm
:doc="printSettings"
:autosave="true"
class="border-none"
/>
</div> </div>
<TwoColumnForm </Transition>
:doc="printSettings"
:autosave="true"
class="border-none"
/>
</div>
</div> </div>
</template> </template>
<script> <script>

23
src/styles/index.css
View File

@ -145,3 +145,26 @@ input[type='number']::-webkit-inner-spin-button {
.custom-scroll::-webkit-scrollbar-thumb:hover { .custom-scroll::-webkit-scrollbar-thumb:hover {
background: theme('colors.gray.400'); background: theme('colors.gray.400');
} }
/*
Transitions
*/
.quickedit-enter-from,
.quickedit-leave-to {
transform: translateX(var(--w-quick-edit));
width: 0px;
opacity: 0;
}
.quickedit-enter-to,
.quickedit-leave-from {
transform: translateX(0px);
width: var(--w-quick-edit);
opacity: 1;
}
.quickedit-enter-active,
.quickedit-leave-active {
transition: all 250ms ease-out;
}