accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2024-11-09 23:30:56 +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 {
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>

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

@ -37,21 +37,23 @@
</div>
<!-- Printview Customizer -->
<div class="border-l w-quick-edit" v-if="showCustomiser">
<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">
<feather-icon name="x" class="w-4 h-4" />
</Button>
<Transition name="quickedit">
<div class="border-l w-quick-edit" v-if="showCustomiser">
<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">
<feather-icon name="x" class="w-4 h-4" />
</Button>
</div>
<TwoColumnForm
:doc="printSettings"
:autosave="true"
class="border-none"
/>
</div>
<TwoColumnForm
:doc="printSettings"
:autosave="true"
class="border-none"
/>
</div>
</Transition>
</div>
</template>
<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 {
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;
}