Snippets
Created by
John Martini
last modified
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | <template>
<q-page class="column">
<div class="col bg-purple relative-position">
<div class="absolute-full scroll overflow-auto">
<div class="text-h4 q-mb-md">Before</div>
<div v-for="n in 50" :key="n" class="q-my-md">
{{ n }}. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Quis praesentium cumque magnam odio iure quidem, quod illum numquam
possimus obcaecati commodi minima assumenda consectetur culpa fuga
nulla ullam. In, libero.
</div>
</div>
</div>
<div v-if="isCategoriesEnabled">
<q-bar
class="bg-primary cursor-n-size"
style="cursor: n-resize"
v-touch-pan.vertical.prevent.mouse="handlePan"
>
<div>Console</div>
<q-space />
<q-btn dense flat round icon="mdi-text-box-remove-outline">
<q-tooltip :delay="1000">Clear</q-tooltip>
</q-btn>
<q-btn
dense
round
flat
icon="mdi-close"
@click="isCategoryEnabled = False"
>
<q-tooltip :delay="1000">Close</q-tooltip>
</q-btn>
</q-bar>
<div
class="col-auto bg-green relative-position"
:style="`height: ${consoleHeight}px`"
>
<div class="absolute-full scroll overflow-auto">
<div v-for="n in 6" :key="n" class="q-my-md">
{{ n }}. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Quis praesentium cumque magnam odio iure quidem, quod illum numquam
possimus obcaecati commodi minima assumenda consectetur culpa fuga
nulla ullam. In, libero.
</div>
</div>
</div>
</div>
</q-page>
</template>
<script>
import { defineComponent, ref, computed, onMounted } from "vue";
import { useStore } from "vuex";
import AppItemsView from "components/AppItemsView.vue";
export default defineComponent({
name: "PageIndex",
components: {
//AppItemsView,
},
setup() {
const $store = useStore();
const splitterModel = ref(75);
const isBusy = computed(() => $store.state.app.isBusy);
const isCategoriesEnabled = computed(
() => $store.state.app.isCategoriesEnabled
);
const categories = computed(() => $store.state.app.categories);
const changedExpandedState = (value, name) => {
$store.commit("app/setCategoryExpanded", { expanded: value, name: name });
};
onMounted(() => {
$store.dispatch("app/initialize");
});
// console
const consoleHeight = ref(100);
let originalHeight;
let originalY;
return {
isBusy,
isCategoriesEnabled,
categories,
splitterModel,
changedExpandedState,
consoleHeight,
handlePan({ evt, ...newInfo }) {
console.log("here");
if (newInfo.isFirst) {
originalHeight = consoleHeight.value;
originalY = newInfo.position.top;
} else {
const newDelta = newInfo.position.top - originalY;
// Should add (instead of subtract) for top drawer
const newHeight = Math.max(
100,
Math.min(400, originalHeight - newDelta)
);
consoleHeight.value = newHeight;
}
},
};
},
});
</script>
|
Comments (0)
You can clone a snippet to your computer for local editing. Learn more.