Add clip list component

2022-04-30 13:59:22 +08:00
parent 5a3ec7d2af
commit 41fe51ec9c
10 changed files with 244 additions and 7 deletions
@@ -0,0 +1,131 @@
+@import "../Theme/Theme.scss";
+
+$clip-item-height: 45px;
+
+div.clip-list-root {
+	margin: -5px;
+	display: flex;
+	flex-wrap: wrap;
+
+	div.clip-item {
+		margin: 5px;
+		height: $clip-item-height;
+		user-select: none;
+		border-radius: 3px;
+        overflow: hidden;
+		cursor: pointer;
+		display: flex;
+
+		div.clip-item-hole-view {
+			height: 100%;
+			width: 10px;
+			box-sizing: border-box;
+			display: flex;
+			flex-direction: column;
+			justify-items: center;
+			justify-content: space-between;
+			padding: 5px;
+			padding-right: 0;
+
+			div.clip-item-hole {
+				width: 5px;
+				height: 5px;
+				background-color: #000000;
+				flex-shrink: 0;
+			}
+		}
+
+		div.clip-icon-view {
+			width: $clip-item-height;
+			height: $clip-item-height;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			i.icon {
+				display: inline-block;
+				font-size: 25px;
+			}
+
+			i.delete {
+				display: none;
+			}
+
+			i.delete:hover {
+				color: $lt-red;
+			}
+		}
+
+		div.clip-item-content {
+			height: $clip-item-height;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			
+		}
+	}
+
+	div.clip-item:hover {
+
+		div.clip-icon-view {
+
+			i.icon {
+				display: none;
+			}
+
+			i.delete {
+				display: inline-block;
+			}
+		}
+	}
+
+	div.add-button {
+        width: 26px;
+        height: 26px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+div.dark.clip-list-root {
+
+	div.clip-item {
+		background-color: $lt-bg-color-lvl3-dark;
+
+		div.clip-item-hole-view div.clip-item-hole {
+			background-color: $lt-bg-color-lvl4-dark;
+		}
+	}
+
+	div.clip-item:hover {
+		color: $lt-font-color-lvl2-dark;
+		background-color: $lt-bg-color-lvl2-dark;
+	}
+
+	div.clip-item.focus {
+		color: $lt-font-color-lvl1-dark;
+    	background-color: $lt-bg-color-lvl1-dark;
+	}
+}
+
+div.light.clip-list-root {
+	
+	div.clip-item {
+		background-color: $lt-bg-color-lvl3-light;
+
+		div.clip-item-hole-view div.clip-item-hole {
+			background-color: $lt-bg-color-lvl4-light;
+		}
+	}
+
+	div.clip-item:hover {
+		color: $lt-font-color-lvl2-light;
+		background-color: $lt-bg-color-lvl2-light;
+	}
+
+	div.clip-item.focus {
+		color: $lt-font-color-lvl1-light;
+    	background-color: $lt-bg-color-lvl1-light;
+	}
+}
@@ -0,0 +1,61 @@
+import { Theme } from "@Component/Theme/Theme";
+import { Icon } from "@fluentui/react";
+import { Clip } from "@Model/Clip";
+import { Component, ReactNode } from "react";
+import "./ClipList.scss";
+
+interface IClipListProps {
+	clips: Clip[];
+	add?: () => any;
+	delete?: (clip: Clip) => any;
+}
+
+class ClipList extends Component<IClipListProps> {
+
+	private renderClip(clip: Clip) {
+		return <div
+			key={clip.id}
+			className="clip-item"
+		>
+			<div className="clip-item-hole-view">
+				{new Array(4).fill(0).map(() => {
+					return <div className="clip-item-hole"/>
+				})}
+			</div>
+			<div className="clip-icon-view">
+				<Icon iconName="MyMoviesTV" className="icon"/>
+				<Icon
+					iconName="Delete"
+					className="delete"
+					onClick={() => {
+						this.props.delete && this.props.delete(clip);
+					}}
+				/>
+			</div>
+			<div className="clip-item-content">
+				<div className="title">{clip.name}</div>
+				<div className="info">{clip.frames.length}</div>
+			</div>
+		</div>;
+	}
+
+	private renderAddButton(): ReactNode {
+		return <div
+			className="clip-item add-button"
+			onClick={this.props.add}
+		>
+            <Icon iconName="Add"/>
+        </div>
+	}
+
+	public render(): ReactNode {
+		return <Theme className="clip-list-root">
+			{ this.props.clips.map((clip => {
+				return this.renderClip(clip);
+			})) }
+			{ this.renderAddButton() }
+		</Theme>;
+	}
+}
+
+export { ClipList };