Merge pull request #44 in YR/star-web-components from feature-component-overlay-fusion to master

* commit 'fd509c8b813483f6312f4163ff467ed1eee26ead':
  TASK: #110347 处理冲突及样式修改
  TASK: #110347 overflowmenu样式修改

src/components/button/button.css.ts

@@ -102,4 +102,10 @@ export default css`
     align-items: center;
     margin: auto;
   }
+
+  /* menubutton */
+  :host(#menuitem) button {
+    font-size: 24px;
+    height: 76px;
+  }
 `

src/components/overlay/active-overlay.ts

@@ -1,11 +1,10 @@
 import {LitElement, html, TemplateResult, CSSResultArray} from 'lit'
 import {customElement, property} from 'lit/decorators.js'
 import {OverlayOpenDetail} from './overlay-types'
-import { sharedStyles } from './overlaystyle'
+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'
+      left = targetleft - (contentwidth - targetnode.offsetWidth)
-      this.style.top = targettop - contentheight - targetnode.offsetHeight + 'px'
+      top = targettop - contentheight - targetnode.offsetHeight
-      return
     } else if (rightline) {
       // 右侧边界
-      this.style.left =
+      left = targetleft - (contentwidth - targetnode.offsetWidth)
-        targetleft - (contentwidth - targetnode.offsetWidth) + 'px'
+      top = targettop + targetnode.offsetHeight
-      this.style.top = targettop + targetnode.offsetHeight + 'px'
-      return
     } else if (bottomline) {
       // 下侧边界
-      this.style.left = targetleft + 'px'
+      left = targetleft
-      this.style.top = targettop - contentheight - targetnode.offsetHeight + 'px'
+      top = targettop - contentheight - targetnode.offsetHeight
-      return
     } else {
       // 正常情况
-      this.style.left = targetleft + 'px'
+      left = targetleft
-      this.style.top = targettop + targetnode.offsetHeight + 'px'
+      top = targettop + targetnode.offsetHeight
-      return
     }
+    this.style.left = left + 'px'
+    this.style.top = top + 'px'
   }
 
   private onSlotChange(): void {

src/components/overlay/overlay-stack.ts

@@ -23,17 +23,17 @@ export class OverlayStack {
     activeOverlay.root?.appendChild(placeholderTemplate)
     // // 将activeoverlay添加到body底部显示div中
     let showmenu = document.querySelector('#showmenu') as HTMLElement //后续关联模态时
-    if(showmenu==null){
+    if (showmenu == null) {
       showmenu = document.createElement('div')
-      showmenu.setAttribute('id','showmenu')
+      showmenu.setAttribute('id', 'showmenu')
       Object.assign(showmenu.style, {
         width: '100vw',
         height: '100vh',
         position: 'fixed',
         backgroundColor: '#00000033',
         justifycontent: 'center',
-      });
+      })
-    }else{
+    } else {
       showmenu.style.display = 'fixed'
     }
     // 为显示div添加overlay并将div添加到body中
@@ -42,9 +42,9 @@ export class OverlayStack {
     // 将activeoverlay添加到已打开overlay数组中
     this.overlays.push(activeOverlay)
     // 为showmenu显示层添加监听
-    showmenu.addEventListener('click',function(e:Event){
+    showmenu.addEventListener('click', function (e: Event) {
-      console.log(e.target);
+      console.log(e.target)
-      if(e.target == this){
+      if (e.target == this) {
         root!.dispatchEvent(
           new Event('test', {
             bubbles: true,
@@ -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

src/components/ul/ul.css.ts

@@ -8,6 +8,14 @@ export default css`
     max-width: 88vw;
   }
 
+  /* menu ul */
+  :host(#iconmenu) {
+    width: 320px;
+    display: block;
+    margin: 0;
+    border-radius: 16px;
+  }
+
   ul {
     list-style: none;
     flex-direction: column;

src/test/panels/activeoverlay/activeoverlay.ts

@@ -13,6 +13,9 @@ export class PanelActiveOverlay extends LitElement {
   public overlayStack = new OverlayStack()
 
   public test(e: Event) {
+    this.addEventListener('test', () => {
+      this.overlayStack.closeOverlay()
+    })
     if (this.overlayStack.isOpen == false) {
       // 获取被点击节点
       const targetNode = e.target as HTMLElement

src/test/panels/overflowmenu/overflowmenu.ts

@@ -15,26 +15,24 @@ export class PanelOverflowMenu extends LitElement {
     return html`
       <star-overflowmenu icon="more">
         <div id="menu">
-          <star-ul
+          <star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
-            type="onlyheader"
-            title="菜单"
-            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
+          <star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
-            type="onlyheader"
-            title="菜单"
-            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%;">
+      <star-overflowmenu
+        icon="more"
+        style="position: fixed; top: 0; left: 90%;"
+      >
         <div id="menu">
-          <star-ul
+          <star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
-            type="onlyheader"
-            title="菜单"
-            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
+          <star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
-            type="onlyheader"
-            title="菜单"
-            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
+          <star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
-            type="onlyheader"
-            title="菜单"
-            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;
+        }
       `,
     ]
   }