openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

TASK: #110347 overflowmenu样式修改

This commit is contained in:
yajun 2022-09-26 15:41:26 +08:00
parent 3d04992b58
commit 00240af245
5 changed files with 64 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/button/button.ts
View File

@ -121,6 +121,10 @@ export class StarButton extends StarBaseElement {
align-items: center;
margin: auto;
}
:host(#menuitem) button {
font-size: 24px;
height: 76px;
}
`,
]
}

34
src/components/overlay/active-overlay.ts
View File

@ -5,7 +5,6 @@ import { sharedStyles } from './overlaystyle'
@customElement('star-activeoverlay')
export class ActiveOverlay extends LitElement {
public static override get styles(): CSSResultArray {
return [sharedStyles]
}
@ -20,9 +19,6 @@ export class ActiveOverlay extends LitElement {
@property({reflect: true})
public placement?: String
offset!: number
skidding!: number
public constructor() {
super()
}
@ -37,8 +33,6 @@ export class ActiveOverlay extends LitElement {
this.root = detail.root
}
private stealOverlayContent(element: HTMLElement) {}
// 位置更新函数
public updatePosition = () => {
// 设置最大显示宽度和高度
@ -57,38 +51,36 @@ export class ActiveOverlay extends LitElement {
const targettop = Number(targetNodePosition?.top)
const targetbottom = Number(targetNodePosition?.bottom)
const targetleft = Number(targetNodePosition?.left)
const targetright = Number(targetNodePosition?.right)
// 设置样式
this.style.position = 'relative'
this.style.zIndex = '10'
this.style.maxWidth = availableWidth + 'px'
this.style.maxHeight = availableHeight + 'px'
// 边界判断：targetright指被点击的节点右边界，contentwidth表示将要显示的内容的宽度
const rightline = targetright + contentwidth > bodywidth ? true : false // 右侧越界条件
const rightline = targetleft + contentwidth > bodywidth ? true : false // 右侧越界条件
const bottomline =
targetbottom + availableHeight > bodyheight ? true : false //下方越界条件
let left: number
let top: number
// 右下角边界
if (rightline && bottomline) {
this.style.left = targetleft - (contentwidth - targetnode.offsetWidth) + 'px'
this.style.top = targettop - contentheight - targetnode.offsetHeight + 'px'
return
left = targetleft - (contentwidth - targetnode.offsetWidth)
top = targettop - contentheight - targetnode.offsetHeight
} else if (rightline) {
// 右侧边界
this.style.left =
targetleft - (contentwidth - targetnode.offsetWidth) + 'px'
this.style.top = targettop + targetnode.offsetHeight + 'px'
return
left = targetleft - (contentwidth - targetnode.offsetWidth)
top = targettop + targetnode.offsetHeight
} else if (bottomline) {
// 下侧边界
this.style.left = targetleft + 'px'
this.style.top = targettop - contentheight - targetnode.offsetHeight + 'px'
return
left = targetleft
top = targettop - contentheight - targetnode.offsetHeight
} else {
// 正常情况
this.style.left = targetleft + 'px'
this.style.top = targettop + targetnode.offsetHeight + 'px'
return
left = targetleft
top = targettop + targetnode.offsetHeight
}
this.style.left = left + 'px'
this.style.top = top + 'px'
}
private onSlotChange(): void {

5
src/components/overlay/overlay-stack.ts
View File

@ -32,7 +32,7 @@ export class OverlayStack {
position: 'fixed',
backgroundColor: '#00000033',
justifycontent: 'center',
});
})
} else {
showmenu.style.display = 'fixed'
}
@ -43,7 +43,7 @@ export class OverlayStack {
this.overlays.push(activeOverlay)
// 为showmenu显示层添加监听
showmenu.addEventListener('click', function (e: Event) {
console.log(e.target);
console.log(e.target)
if (e.target == this) {
root!.dispatchEvent(
new Event('test', {
@ -67,7 +67,6 @@ export class OverlayStack {
const placeholder = srcroot?.lastChild as Node
// 获取overlay中的内容
const content = closeactiveoverlay.restoreContent as HTMLElement
console.log(content.offsetWidth);
// 替换子节点
srcroot?.replaceChild(content, placeholder)
const showmenu = document.querySelector('#showmenu') as HTMLElement

7
src/components/ul/ul.ts
View File

@ -116,6 +116,13 @@ export class StarUl extends LitElement {
max-width: 88vw;
}
:host(#iconmenu) {
width: 320px;
display: block;
margin: 0;
border-radius: 16px;
}
ul {
list-style: none;
flex-direction: column;

63
src/test/panels/overflowmenu/overflowmenu.ts
View File

@ -15,26 +15,24 @@ export class PanelOverflowMenu extends LitElement {
return html`
<star-overflowmenu icon="more">
<div id="menu">
<star-ul
type="onlyheader"
title="菜单"
id="iconmenu"
background="var(--bg-dialog)"
>
<star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
<star-button
type="iconlabel"
icon="info"
label="应用详情"
id="menuitem"
></star-button>
<star-button
type="iconlabel"
icon="delete"
label="卸载"
id="menuitem"
></star-button>
<star-button
type="iconlabel"
icon="download-circle"
label="固定至Dock"
id="menuitem"
></star-button>
</star-ul>
<star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
@ -42,6 +40,7 @@ export class PanelOverflowMenu extends LitElement {
type="iconlabel"
icon="keyboard-circle"
label="编辑屏幕"
id="menuitem"
></star-button>
</star-ul>
</div>
@ -52,26 +51,24 @@ export class PanelOverflowMenu extends LitElement {
style="position: fixed; top: 50%; left: 50%;"
>
<div id="menu">
<star-ul
type="onlyheader"
title="菜单"
id="iconmenu"
background="var(--bg-dialog)"
>
<star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
<star-button
type="iconlabel"
icon="info"
label="应用详情"
id="menuitem"
></star-button>
<star-button
type="iconlabel"
icon="delete"
label="卸载"
id="menuitem"
></star-button>
<star-button
type="iconlabel"
icon="download-circle"
label="固定至Dock"
id="menuitem"
></star-button>
</star-ul>
<star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
@ -79,33 +76,35 @@ export class PanelOverflowMenu extends LitElement {
type="iconlabel"
icon="keyboard-circle"
label="编辑屏幕"
id="menuitem"
></star-button>
</star-ul>
</div>
</star-overflowmenu>
<star-overflowmenu icon="more" style="position: fixed; top: 0; left: 90%;">
<div id="menu">
<star-ul
type="onlyheader"
title="菜单"
id="iconmenu"
background="var(--bg-dialog)"
<star-overflowmenu
icon="more"
style="position: fixed; top: 0; left: 90%;"
>
<div id="menu">
<star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
<star-button
type="iconlabel"
icon="info"
label="应用详情"
id="menuitem"
></star-button>
<star-button
type="iconlabel"
icon="delete"
label="卸载"
id="menuitem"
></star-button>
<star-button
type="iconlabel"
icon="download-circle"
label="固定至Dock"
id="menuitem"
></star-button>
</star-ul>
<star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
@ -113,6 +112,7 @@ export class PanelOverflowMenu extends LitElement {
type="iconlabel"
icon="keyboard-circle"
label="编辑屏幕"
id="menuitem"
></star-button>
</star-ul>
</div>
@ -123,26 +123,24 @@ export class PanelOverflowMenu extends LitElement {
style="position: fixed; top: 90%; left: 0;"
>
<div id="menu">
<star-ul
type="onlyheader"
title="菜单"
id="iconmenu"
background="var(--bg-dialog)"
>
<star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
<star-button
type="iconlabel"
icon="info"
label="应用详情"
id="menuitem"
></star-button>
<star-button
type="iconlabel"
icon="delete"
label="卸载"
id="menuitem"
></star-button>
<star-button
type="iconlabel"
icon="download-circle"
label="固定至Dock"
id="menuitem"
></star-button>
</star-ul>
<star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
@ -150,6 +148,7 @@ export class PanelOverflowMenu extends LitElement {
type="iconlabel"
icon="keyboard-circle"
label="编辑屏幕"
id="menuitem"
></star-button>
</star-ul>
</div>
@ -160,26 +159,24 @@ export class PanelOverflowMenu extends LitElement {
style="position: fixed; top: 90%; left: 90%;"
>
<div id="menu">
<star-ul
type="onlyheader"
title="菜单"
id="iconmenu"
background="var(--bg-dialog)"
>
<star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
<star-button
type="iconlabel"
icon="info"
label="应用详情"
id="menuitem"
></star-button>
<star-button
type="iconlabel"
icon="delete"
label="卸载"
id="menuitem"
></star-button>
<star-button
type="iconlabel"
icon="download-circle"
label="固定至Dock"
id="menuitem"
></star-button>
</star-ul>
<star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
@ -187,6 +184,7 @@ export class PanelOverflowMenu extends LitElement {
type="iconlabel"
icon="keyboard-circle"
label="编辑屏幕"
id="menuitem"
></star-button>
</star-ul>
</div>
@ -215,6 +213,9 @@ export class PanelOverflowMenu extends LitElement {
star-li span.split {
color: var(--split-line);
}
::slotted(div) {
border-radius: 16px;
}
`,
]
}