vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

feat: resizable sidebar

Browse source
This commit is contained in:
Shariq Ansari 2022-10-19 16:01:51 +05:30
parent 8564b93dee
commit db2c13a2f4
2 changed files with 79 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
frappe/public/js/form_builder/components/FormBuilder.vue
View file

@ -20,13 +20,13 @@ onMounted(() => store.fetch());
</script>
<template>
<div class="layout-main-section row" v-if="should_render">
<div class="form-controls col-3">
<div class="form-builder-container" v-if="should_render">
<div class="form-controls">
<div class="form-sidebar">
<Sidebar />
</div>
</div>
<div class="form-container col-9">
<div class="form-container">
<div class="form-main">
<Tabs />
</div>
@ -35,8 +35,23 @@ onMounted(() => store.fetch());
</template>
<style lang="scss" scoped>
.layout-main-section {
.form-builder-container {
margin-bottom: -60px;
display: flex;
gap: 20px;
&.resizing {
user-select: none;
cursor: col-resize;
}
.form-controls {
position: relative;
}
.form-container {
flex: 1;
}
.form-sidebar,
.form-main {

74
frappe/public/js/form_builder/components/Sidebar.vue
View file

@ -8,6 +8,30 @@ let store = useStore();
let tab_titles = [__("Field Types"), __("Field Properties")];
let active_tab = ref(tab_titles[0]);
let sidebar_width = ref(272);
let sidebar_resizing = ref(false);
function start_resize() {
$(document).on("mousemove", resize);
$(document).on("mouseup", () => {
$(".form-builder-container").removeClass("resizing");
sidebar_resizing.value = false;
$(document).off("mousemove", resize);
});
}
function resize(e) {
sidebar_resizing.value = true;
$(".form-builder-container").addClass("resizing");
sidebar_width.value = e.clientX - 90;
if (sidebar_width.value < 16 * 16) {
sidebar_width.value = 16 * 16;
}
if (sidebar_width.value > 24 * 16) {
sidebar_width.value = 24 * 16;
}
}
watch(
() => store.selected_field,
@ -19,25 +43,47 @@ watch(
</script>
<template>
<div class="tab-header">
<div
:class="['tab', active_tab == tab ? 'active' : '']"
v-for="(tab, i) in tab_titles"
:key="i"
@click="active_tab = tab"
>
{{ tab }}
<div
:class="['sidebar-resizer', sidebar_resizing ? 'resizing' : '']"
@mousedown="start_resize"
/>
<div class="sidebar-container" :style="{ width: `${sidebar_width}px` }">
<div class="tab-header">
<div
:class="['tab', active_tab == tab ? 'active' : '']"
v-for="(tab, i) in tab_titles"
:key="i"
@click="active_tab = tab"
>
{{ tab }}
</div>
</div>
<div :class="['tab-content', active_tab == tab_titles[0] ? 'active' : '']">
<FieldTypes />
</div>
<div :class="['tab-content', active_tab == tab_titles[1] ? 'active' : '']">
<FieldProperties />
</div>
</div>
<div :class="['tab-content', active_tab == tab_titles[0] ? 'active' : '']">
<FieldTypes />
</div>
<div :class="['tab-content', active_tab == tab_titles[1] ? 'active' : '']">
<FieldProperties />
</div>
</template>
<style lang="scss" scoped>
.sidebar-resizer {
position: absolute;
top: 0;
right: -6px;
width: 5px;
height: 100%;
opacity: 0;
background-color: var(--bg-gray);
transition: opacity 0.2s ease;
z-index: 10;
cursor: col-resize;
&:hover, &.resizing {
opacity: 1;
}
}
.tab-header {
display: flex;
justify-content: space-between;