lisang
/
d2-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: padding var

This commit is contained in:
FairyEver 2021-12-11 11:32:19 +08:00
parent b58d025214
commit c51130cff9
6 changed files with 88 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
d2/components/d2/admin/layout/dashboard/container/index.vue
View File

@ -3,24 +3,25 @@
</route>
<template>
<d2-scroll ref="scrollbar" class="body__scroll">
<div class="scroll__body" :style="scrollInnerStyle">
<d2-scroll ref="scrollbar" class="body__main">
<div class="main__inner" :style="scrollInnerStyle">
<slot/>
</div>
</d2-scroll>
<div ref="header" class="body__header container__blur">
<d2-size-sensor class="body__header container__blur" @resize="onHeaderResize">
{{ cssVar }}
<slot name="header"/>
</div>
<div ref="footer" class="body__footer container__blur">
</d2-size-sensor>
<d2-size-sensor class="body__footer container__blur" @resize="onFooterResize">
<slot name="footer"/>
</div>
</d2-size-sensor>
</template>
<script>
import { computed, onBeforeUnmount, onBeforeUpdate, onMounted, ref } from 'vue'
import { bind, clear } from 'size-sensor'
import { computed, ref } from 'vue'
import { makeNameByUrl } from 'd2/utils/component.js'
import { px, getStyle, getCssVar } from 'd2/utils/css.js'
import { px } from 'd2/utils/css.js'
import { useCssVar } from 'd2/use/css-var.js'
export default {
name: makeNameByUrl(import.meta.url),
@ -33,46 +34,65 @@ export default {
const headerHeight = ref(0)
const footerHeight = ref(0)
const cssVar = useCssVar('--d2-admin-layout-dashboard-body-padding')
const scrollInnerStyle = computed(() => ({
paddingTop: px(headerHeight),
paddingBottom: px(footerHeight)
}))
onBeforeUpdate(() => {
console.log('onBeforeUpdate')
})
function onHeaderResize ({ style }) {
const { offsetHeight } = style
headerHeight.value = offsetHeight
}
onMounted(() => {
console.log(getCssVar('--d2-admin-layout-dashboard-body-padding'))
console.log(slots.default)
console.log(slots.header)
console.log(slots.footer)
bind(header.value, element => {
headerHeight.value = element.offsetHeight
const scrollbarElement = scrollbar.value.$el
const scrollbarVertical = scrollbarElement.getElementsByClassName('os-scrollbar-vertical')[0]
const scrollInner = document.getElementsByClassName('scroll__body')[0]
let scrollInnerMarginTop = getStyle(scrollInner, 'marginTop')
scrollbarVertical.style.top = px(Number(scrollInnerMarginTop.replace('px', '')) + element.offsetHeight)
})
bind(footer.value, element => {
footerHeight.value = element.offsetHeight
const scrollbarElement = scrollbar.value.$el
const scrollbarVertical = scrollbarElement.getElementsByClassName('os-scrollbar-vertical')[0]
scrollbarVertical.style.bottom = px(element.offsetHeight)
})
})
function onFooterResize ({ style }) {
const { offsetHeight } = style
footerHeight.value = offsetHeight
}
onBeforeUnmount(() => {
clear(header.value)
clear(footer.value)
})
function getScrollbarVertical () {
return scrollbar.value.$el.getElementsByClassName('os-scrollbar-vertical')[0]
}
function updateScrollbarVerticalMarginTop () {
const scrollbarVertical = getScrollbarVertical()
scrollbarVertical.style.top = px(value)
}
function updateScrollbarVerticalMarginBottom () {
const scrollbarVertical = getScrollbarVertical()
scrollbarVertical.style.bottom = px(value)
}
// onMounted(() => {
// console.log(slots.default)
// console.log(slots.header)
// console.log(slots.footer)
// bind(header.value, element => {
// headerHeight.value = element.offsetHeight
// const scrollbarElement = scrollbar.value.$el
// const scrollbarVertical = scrollbarElement.getElementsByClassName('os-scrollbar-vertical')[0]
// const scrollInner = document.getElementsByClassName('main__inner')[0]
// let scrollInnerMarginTop = getStyle(scrollInner, 'marginTop')
// scrollbarVertical.style.top = px(Number(scrollInnerMarginTop.replace('px', '')) + element.offsetHeight)
// })
// bind(footer.value, element => {
// footerHeight.value = element.offsetHeight
// const scrollbarElement = scrollbar.value.$el
// const scrollbarVertical = scrollbarElement.getElementsByClassName('os-scrollbar-vertical')[0]
// scrollbarVertical.style.bottom = px(element.offsetHeight)
// })
// })
return {
cssVar,
scrollbar,
header,
footer,
scrollInnerStyle
scrollInnerStyle,
onHeaderResize,
onFooterResize
}
}
}

7
d2/components/d2/size-sensor/index.jsx
View File

@ -1,7 +1,7 @@
import { defineComponent, getCurrentInstance, onBeforeUnmount, onMounted } from 'vue'
import { bind } from 'size-sensor'
import { makeName } from 'd2/utils/component.js'
import { getStyle, convertCssUnit } from 'd2/utils/css.js'
import { getStyle } from 'd2/utils/css.js'
const name = 'size-sensor'
@ -24,12 +24,9 @@ export default defineComponent({
const targetElement = ctx.$el
unbind = bind(targetElement, element => {
const style = getStyle(element)
const { height, width } = style
emit('resize', {
element,
style,
height: convertCssUnit(height),
width: convertCssUnit(width)
style
})
})
}

10
d2/style/themes/default/src/layout/dashboard/src/style.scss
View File

@ -30,23 +30,23 @@ html, body, #app {
>.body__header {
@apply absolute inset-x-0 overflow-hidden break-words border-b;
top: calc(#{--var('header-height')} + #{--var('header-border-width')});
padding: --var('body-padding');
padding: --var('body-header-padding-y') --var('body-header-padding-x');
}
>.body__footer {
@apply absolute inset-x-0 bottom-0 overflow-hidden break-words border-t;
padding: --var('body-padding');
padding: --var('body-footer-padding-y') --var('body-footer-padding-x');
}
>.body__scroll {
>.body__main {
@apply absolute inset-0;
>.os-scrollbar-vertical {
top: calc(#{--var('header-height')} + #{--var('header-border-width')});
}
.scroll__body {
.main__inner {
@apply relative overflow-hidden;
margin-top: calc(#{--var('header-height')} + #{--var('header-border-width')});
min-height: calc(100vh - (#{--var('header-height')} + #{--var('header-border-width')}));
background-color: --var('color-bg-container');
padding: --var('body-padding');
padding: --var('body-main-padding-y') --var('body-main-padding-x');
}
}
}

9
d2/style/themes/default/src/layout/dashboard/src/var.scss
View File

@ -51,4 +51,13 @@ $color-bg-container: #FFFFFF;
#{--key('footer-border-width')}: 1px;
// body
#{--key('body-padding')}: 16px;
#{--key('body-header-padding')}: --var('body-padding');
#{--key('body-header-padding-x')}: --var('body-header-padding');
#{--key('body-header-padding-y')}: --var('body-header-padding');
#{--key('body-footer-padding')}: --var('body-padding');
#{--key('body-footer-padding-x')}: --var('body-footer-padding');
#{--key('body-footer-padding-y')}: --var('body-footer-padding');
#{--key('body-main-padding')}: --var('body-padding');
#{--key('body-main-padding-x')}: --var('body-main-padding');
#{--key('body-main-padding-y')}: --var('body-main-padding');
}

12
d2/use/css-var.js Normal file
View File

@ -0,0 +1,12 @@
import { ref, onMounted } from 'vue'
import { getCssVar } from 'd2/utils/css.js'
export function useCssVar (name = '', defaultValue) {
const cssVarValue = ref(defaultValue)
onMounted(() => {
cssVarValue.value = getCssVar(name)
})
return cssVarValue
}

5
d2/views/dashboard/demo/component/d2-size-sensor/playground.vue
View File

@ -37,10 +37,11 @@ export default {
const history = ref([])
function onResize ({ height }) {
function onResize ({ style }) {
const { offsetHeight } = style
history.value.unshift({
id: id(),
text: `[size change] height: ${height}px`
text: `[size change] offsetHeight: ${offsetHeight}px`
})
}