feat: z-index (#117)

Author: raduwen

src/components/IFrameWidget/editor.tsx

@@ -195,6 +195,18 @@ class IFrameWidgetEditor extends Component<Props, IFrameWidgetProps> {
               value={this.state.position?.left}
             />
           </FormGroup>
+          <FormGroup>
+            <TextField
+              type="number"
+              label="z-index"
+              fullWidth
+              variant="outlined"
+              onChange={(e) => {
+                this.setState({ ...this.state, zIndex: parseInt(e.target.value) });
+              }}
+              value={this.state.zIndex}
+            />
+          </FormGroup>
         </>
 
         <FormGroup>
@@ -226,6 +238,7 @@ class IFrameWidgetEditor extends Component<Props, IFrameWidgetProps> {
     retry_count: 3,
     width: 640,
     height: 480,
+    zIndex: 0,
   };
 }
 

src/components/IFrameWidget/types.ts

@@ -12,6 +12,7 @@ type IFrameWidgetProps = {
   width: number;
   height: number;
   position?: Position;
+  zIndex: number;
 }
 
 export type { Position, IFrameWidgetProps };

src/components/IFrameWidget/widget.tsx

@@ -2,7 +2,7 @@ import React, { VFC, useState, CSSProperties } from 'react';
 import styled from 'styled-components';
 import type { IFrameWidgetProps } from './types';
 
-const IFrameWidget: VFC<IFrameWidgetProps> = ({ url, retry_time, retry_count, width, height, position }) => {
+const IFrameWidget: VFC<IFrameWidgetProps> = ({ url, retry_time, retry_count, width, height, position, zIndex }) => {
   const [count, setCount] = useState(0);
 
   const handleLoaded = () => {
@@ -20,6 +20,7 @@ const IFrameWidget: VFC<IFrameWidgetProps> = ({ url, retry_time, retry_count, wi
 
   const style: CSSProperties = {
     position: 'absolute',
+    zIndex,
   };
 
   if (position?.top !== undefined) style.top = position.top;

src/components/TextWidget/editor.tsx

@@ -314,6 +314,18 @@ class TextWidgetEditor extends Component<Props, TextWidgetProps> {
               value={this.state.position?.left}
             />
           </FormGroup>
+          <FormGroup>
+            <TextField
+              type="number"
+              label="z-index"
+              fullWidth
+              variant="outlined"
+              onChange={(e) => {
+                this.setState({ ...this.state, zIndex: parseInt(e.target.value) });
+              }}
+              value={this.state.zIndex}
+            />
+          </FormGroup>
           <FormGroup>
             <FormControlLabel
               control={
@@ -371,6 +383,7 @@ class TextWidgetEditor extends Component<Props, TextWidgetProps> {
     text: "",
     hidden: false,
     autoHidden: true,
+    zIndex: 0,
   }
 }
 

src/components/TextWidget/types.ts

@@ -21,6 +21,7 @@ type TextWidgetProps = {
   position?: Position;
   hidden: boolean;
   autoHidden: boolean;
+  zIndex: number;
 };
 
 export type { Position, TextWidgetProps };

src/components/TextWidget/widget.tsx

@@ -43,6 +43,7 @@ const TextWidget: VFC<TextWidgetProps> = ({
   position,
   hidden,
   autoHidden,
+  zIndex,
 }) => {
   const edge = calcTextShadow(edgeWeight || 1, edgeColor || '#000000');
 
@@ -57,6 +58,7 @@ const TextWidget: VFC<TextWidgetProps> = ({
     textAlign: textAlign || 'left',
     backgroundColor: backgroundColor || 'rgba(0,0,0,0.1)',
     display: hidden || autoHidden && text.length === 0 ? 'none' : 'block',
+    zIndex,
   };
 
   if (position?.top !== undefined) style.top = position.top;

src/components/TimeWidget/editor.tsx

@@ -73,6 +73,18 @@ class TimeWidgetEditor extends Component<Props, TimeWidgetProps> {
               value={this.state.size}
             />
           </FormGroup>
+          <FormGroup>
+            <TextField
+              type="number"
+              label="z-index"
+              fullWidth
+              variant="outlined"
+              onChange={(e) => {
+                this.setState({ ...this.state, zIndex: parseInt(e.target.value) });
+              }}
+              value={this.state.zIndex}
+            />
+          </FormGroup>
           <FormGroup>
             <FormControlLabel
               control={
@@ -116,6 +128,7 @@ class TimeWidgetEditor extends Component<Props, TimeWidgetProps> {
   public static defaultProps: TimeWidgetProps = {
     size: 24,
     hidden: false,
+    zIndex: 0,
   };
 }
 

src/components/TimeWidget/types.ts

@@ -1,6 +1,7 @@
 type TimeWidgetProps = {
   size: number;
   hidden: boolean;
+  zIndex: number;
 };
 
 export type { TimeWidgetProps };

src/components/TimeWidget/widget.tsx

@@ -16,7 +16,7 @@ class TimeWidget extends React.Component<TimeWidgetProps, TimeWidgetState> {
   }
 
   render() {
-    const { size } = this.props
+    const { size, zIndex } = this.props
 
     const style: CSSProperties = {
       display: this.props.hidden ? 'none' : 'flex',
@@ -34,6 +34,7 @@ class TimeWidget extends React.Component<TimeWidgetProps, TimeWidgetState> {
       transform: `translate(${size*1.25}px, ${size*2.4}px) rotate(-20deg)`,
       fontSize: `${size}px`,
       fontWeight: 'bold',
+      zIndex: zIndex,
     }
 
     return (