Initial Smartproc
This commit is contained in:
Titan Hadiyan
178
src/layouts/side-nav-inner-toolbar.vue
Normal file
178
src/layouts/side-nav-inner-toolbar.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div class="side-nav-inner-toolbar">
|
||||
<dx-drawer
|
||||
class="drawer"
|
||||
position="before"
|
||||
template="menuTemplate"
|
||||
v-model:opened="menuOpened"
|
||||
:opened-state-mode="drawerOptions.menuMode"
|
||||
:reveal-mode="drawerOptions.menuRevealMode"
|
||||
:min-size="drawerOptions.minMenuSize"
|
||||
:max-size="drawerOptions.maxMenuSize"
|
||||
:shading="drawerOptions.shaderEnabled"
|
||||
:close-on-outside-click="drawerOptions.closeOnOutsideClick"
|
||||
>
|
||||
<div class="container">
|
||||
<header-toolbar
|
||||
:menu-toggle-enabled="headerMenuTogglerEnabled"
|
||||
:toggle-menu-func="toggleMenu"
|
||||
/>
|
||||
<dx-scroll-view ref="scrollViewRef" class="layout-body with-footer">
|
||||
<slot />
|
||||
<slot name="footer" />
|
||||
</dx-scroll-view>
|
||||
</div>
|
||||
<template #menuTemplate>
|
||||
<side-nav-menu
|
||||
:compact-mode="!menuOpened"
|
||||
@click="handleSideBarClick"
|
||||
>
|
||||
<dx-toolbar id="navigation-header">
|
||||
<dx-item v-if="!isXSmall" location="before" css-class="menu-button">
|
||||
<template #default>
|
||||
<dx-button
|
||||
icon="menu"
|
||||
styling-mode="text"
|
||||
@click="toggleMenu"
|
||||
/>
|
||||
</template>
|
||||
</dx-item>
|
||||
<dx-item location="before" css-class="header-title dx-toolbar-label">
|
||||
<template #default>
|
||||
<div>{{ title }}</div>
|
||||
</template>
|
||||
</dx-item>
|
||||
</dx-toolbar>
|
||||
</side-nav-menu>
|
||||
</template>
|
||||
</dx-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DxButton from "devextreme-vue/button";
|
||||
import DxDrawer from "devextreme-vue/drawer";
|
||||
import DxScrollView from "devextreme-vue/scroll-view";
|
||||
import DxToolbar, { DxItem } from "devextreme-vue/toolbar";
|
||||
|
||||
import HeaderToolbar from "../components/header-toolbar";
|
||||
import SideNavMenu from "../components/side-nav-menu";
|
||||
import menuItems from "../app-navigation";
|
||||
import { ref, watch, computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
title: String,
|
||||
isXSmall: Boolean,
|
||||
isLarge: Boolean
|
||||
},
|
||||
setup(props) {
|
||||
const route = useRoute();
|
||||
|
||||
const scrollViewRef = ref(null);
|
||||
const menuOpened = ref(props.isLarge);
|
||||
const menuTemporaryOpened = ref(false);
|
||||
|
||||
function toggleMenu (e) {
|
||||
const pointerEvent = e.event;
|
||||
pointerEvent.stopPropagation();
|
||||
if (menuOpened.value) {
|
||||
menuTemporaryOpened.value = false;
|
||||
}
|
||||
|
||||
menuOpened.value = !menuOpened.value;
|
||||
}
|
||||
|
||||
function handleSideBarClick () {
|
||||
if (menuOpened.value === false) {
|
||||
menuTemporaryOpened.value = true;
|
||||
}
|
||||
|
||||
menuOpened.value = true;
|
||||
}
|
||||
|
||||
const drawerOptions = computed(() => {
|
||||
const shaderEnabled = !props.isLarge;
|
||||
|
||||
return {
|
||||
menuMode: props.isLarge ? "shrink" : "overlap",
|
||||
menuRevealMode: props.isXSmall ? "slide" : "expand",
|
||||
minMenuSize: props.isXSmall ? 0 : 60,
|
||||
//minMenuSize: 0,
|
||||
maxMenuSize: props.isXSmall ? 250 : undefined,
|
||||
closeOnOutsideClick: shaderEnabled,
|
||||
shaderEnabled
|
||||
};
|
||||
});
|
||||
|
||||
const headerMenuTogglerEnabled = computed(() => {
|
||||
return props.isXSmall;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.isLarge,
|
||||
() => {
|
||||
if (!menuTemporaryOpened.value) {
|
||||
menuOpened.value = props.isLarge;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
if (menuTemporaryOpened.value || !props.isLarge) {
|
||||
menuOpened.value = false;
|
||||
menuTemporaryOpened.value = false;
|
||||
}
|
||||
scrollViewRef.value.instance.scrollTo(0);
|
||||
}
|
||||
);
|
||||
|
||||
return {
|
||||
scrollViewRef,
|
||||
menuOpened,
|
||||
drawerOptions,
|
||||
menuItems,
|
||||
headerMenuTogglerEnabled,
|
||||
toggleMenu,
|
||||
handleSideBarClick
|
||||
};
|
||||
},
|
||||
components: {
|
||||
DxButton,
|
||||
DxDrawer,
|
||||
DxScrollView,
|
||||
DxToolbar,
|
||||
DxItem,
|
||||
HeaderToolbar,
|
||||
SideNavMenu
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.side-nav-inner-toolbar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#navigation-header {
|
||||
@import "../themes/generated/variables.additional.scss";
|
||||
background-color: $base-accent;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
|
||||
.menu-button .dx-icon {
|
||||
color: $base-text-color;
|
||||
}
|
||||
|
||||
.screen-x-small & {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.dx-theme-generic & {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
135
src/layouts/side-nav-outer-toolbar.vue
Normal file
135
src/layouts/side-nav-outer-toolbar.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div class="side-nav-outer-toolbar">
|
||||
<header-toolbar
|
||||
class="layout-header"
|
||||
:menu-toggle-enabled="true"
|
||||
:toggle-menu-func="toggleMenu"
|
||||
:title="title"
|
||||
/>
|
||||
<dx-drawer
|
||||
class="layout-body"
|
||||
position="before"
|
||||
template="menuTemplate"
|
||||
v-model:opened="menuOpened"
|
||||
:opened-state-mode="drawerOptions.menuMode"
|
||||
:reveal-mode="drawerOptions.menuRevealMode"
|
||||
:min-size="drawerOptions.minMenuSize"
|
||||
:max-size="drawerOptions.maxMenuSize"
|
||||
:shading="drawerOptions.shaderEnabled"
|
||||
:close-on-outside-click="drawerOptions.closeOnOutsideClick"
|
||||
>
|
||||
<dx-scroll-view ref="scrollViewRef" class="with-footer">
|
||||
<slot />
|
||||
<slot name="footer" />
|
||||
</dx-scroll-view>
|
||||
<template #menuTemplate>
|
||||
<side-nav-menu
|
||||
:compact-mode="!menuOpened"
|
||||
@click="handleSideBarClick"
|
||||
/>
|
||||
</template>
|
||||
</dx-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DxDrawer from "devextreme-vue/drawer";
|
||||
import DxScrollView from "devextreme-vue/scroll-view";
|
||||
|
||||
import menuItems from "../app-navigation";
|
||||
import HeaderToolbar from "../components/header-toolbar";
|
||||
import SideNavMenu from "../components/side-nav-menu";
|
||||
import { computed, ref, watch} from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
title: String,
|
||||
isXSmall: Boolean,
|
||||
isLarge: Boolean
|
||||
},
|
||||
setup(props) {
|
||||
const route = useRoute();
|
||||
|
||||
const scrollViewRef = ref(null);
|
||||
const menuOpened = ref(props.isLarge);
|
||||
const menuTemporaryOpened = ref(false);
|
||||
|
||||
function toggleMenu(e) {
|
||||
const pointerEvent = e.event;
|
||||
pointerEvent.stopPropagation();
|
||||
if (menuOpened.value) {
|
||||
menuTemporaryOpened.value = false;
|
||||
}
|
||||
menuOpened.value = !menuOpened.value;
|
||||
}
|
||||
|
||||
function handleSideBarClick() {
|
||||
if (menuOpened.value === false) {
|
||||
menuTemporaryOpened.value = true;
|
||||
}
|
||||
menuOpened.value = true;
|
||||
}
|
||||
|
||||
const drawerOptions = computed(() => {
|
||||
const shaderEnabled = !props.isLarge;
|
||||
|
||||
return {
|
||||
menuMode: props.isLarge ? "shrink" : "overlap",
|
||||
menuRevealMode: props.isXSmall ? "slide" : "expand",
|
||||
minMenuSize: props.isXSmall ? 0 : 60,
|
||||
maxMenuSize: props.isXSmall ? 250 : undefined,
|
||||
closeOnOutsideClick: shaderEnabled,
|
||||
shaderEnabled
|
||||
};
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.isLarge,
|
||||
() => {
|
||||
if (!menuTemporaryOpened.value) {
|
||||
menuOpened.value = props.isLarge;
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
if (menuTemporaryOpened.value || !props.isLarge) {
|
||||
menuOpened.value = false;
|
||||
menuTemporaryOpened.value = false;
|
||||
}
|
||||
scrollViewRef.value.instance.scrollTo(0);
|
||||
}
|
||||
);
|
||||
|
||||
return {
|
||||
menuOpened,
|
||||
menuItems,
|
||||
toggleMenu,
|
||||
handleSideBarClick,
|
||||
drawerOptions,
|
||||
scrollViewRef
|
||||
};
|
||||
},
|
||||
components: {
|
||||
DxDrawer,
|
||||
DxScrollView,
|
||||
HeaderToolbar,
|
||||
SideNavMenu
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.side-nav-outer-toolbar {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layout-header {
|
||||
z-index: 1501;
|
||||
}
|
||||
</style>
|
||||
83
src/layouts/single-card.vue
Normal file
83
src/layouts/single-card.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<dx-scroll-view height="100%" width="100%" class="with-footer single-card">
|
||||
<div class="dx-card content">
|
||||
<div class="header">
|
||||
<div class="title">{{title}}</div>
|
||||
<div class="description">{{description}}</div>
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
</dx-scroll-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DxScrollView from "devextreme-vue/scroll-view";
|
||||
|
||||
import { useRoute } from 'vue-router';
|
||||
import { watch, ref } from 'vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DxScrollView
|
||||
},
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
|
||||
const title = ref(route.meta.title);
|
||||
const description = ref("");
|
||||
|
||||
watch(() => route.path,
|
||||
() => {
|
||||
title.value = route.meta.title;
|
||||
description.value = route.meta.description;
|
||||
}
|
||||
)
|
||||
return {
|
||||
title,
|
||||
description
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../themes/generated/variables.base.scss";
|
||||
|
||||
.single-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dx-card {
|
||||
width: 330px;
|
||||
margin: auto auto;
|
||||
padding: 40px;
|
||||
flex-grow: 0;
|
||||
|
||||
.screen-x-small & {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 30px;
|
||||
|
||||
.title {
|
||||
color: $base-text-color;
|
||||
line-height: 28px;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: rgba($base-text-color, alpha($base-text-color) * 0.7);
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user