@voplus/morpho-workspace 9.0.5 → 9.0.7

package/es/style/common.css

@@ -0,0 +1,166 @@
+@import "@voplus/morpho-theme/styles/index.css";
+
+.module-header-title {
+	position: relative;
+	padding: 10px 0;
+	font-size: 15px;
+	line-height: 15px;
+	color: var(--purple-primary-color);
+}
+.module-header-title:before {
+	position: absolute;
+	content: "";
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	border-bottom: 1px solid var(--purple-primary-color);
+}
+.module-detail-view,
+.module-tab-view {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	.ant-tabs {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		.ant-tabs-nav {
+			margin: 0;
+		}
+		.ant-tabs-content {
+			height: 100%;
+			padding-bottom: 0px !important;
+			.ant-tabs-tabpane {
+				position: relative;
+				height: 100%;
+			}
+		}
+		.ant-tabs-bar {
+			margin: 0 20px;
+		}
+		.module-box {
+			height: 100%;
+			padding: 10px 20px;
+			box-sizing: border-box;
+			overflow-x: hidden;
+		}
+	}
+}
+.module-detail-view {
+	.module-view-header {
+		padding: 10px 20px;
+	}
+}
+.module-tab-view {
+	background: #f2f2f2;
+	.module-tab-view_content,
+	.module-tab-view_aside {
+		flex: 1;
+		background: #fff;
+		overflow-x: hidden;
+	}
+	.module-tab-view_content {
+		padding: 15px 20px;
+	}
+	.module-tab-view_aside {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+}
+.padding-vertical-10 {
+	padding: 10px 0;
+}
+.padding-horizontal-5 {
+	padding: 0 5px;
+}
+.padding-top-5 {
+	padding-top: 5px;
+}
+.padding-top-10 {
+	padding-top: 10px;
+}
+.padding-left-10 {
+	padding-left: 10px;
+}
+.padding-left-20 {
+	padding-left: 20px;
+}
+.padding-left-30 {
+	padding-left: 30px;
+}
+.padding-right-10 {
+	padding-right: 10px;
+}
+.padding-right-20 {
+	padding-right: 20px;
+}
+.padding-bottom-5 {
+	padding-bottom: 5px;
+}
+.padding-bottom-15 {
+	padding-bottom: 15px;
+}
+.padding-bottom-20 {
+	padding-bottom: 20px;
+}
+.margin-left-5 {
+	margin-left: 5px;
+}
+.margin-right-5 {
+	margin-right: 5px;
+}
+.margin-left-10 {
+	margin-left: 10px;
+}
+.margin-left-15 {
+	margin-left: 15px;
+}
+.margin-left-30 {
+	margin-left: 30px;
+}
+.margin-right-10 {
+	margin-right: 10px;
+}
+.margin-right-15 {
+	margin-right: 15px;
+}
+.margin-right-20 {
+	margin-right: 20px;
+}
+.margin-right-30 {
+	margin-right: 30px;
+}
+.margin-top-5 {
+	margin-top: 5px;
+}
+.margin-top-10 {
+	margin-top: 10px;
+}
+.margin-bottom-5 {
+	margin-bottom: 5px;
+}
+.margin-bottom-10 {
+	margin-bottom: 10px;
+}
+.margin-bottom-15 {
+	margin-bottom: 15px;
+}
+.margin-bottom-20 {
+	margin-bottom: 20px;
+}
+.margin-bottom-25 {
+	margin-bottom: 25px;
+}
+
+.tool-bar-icon {
+	display: inline-block;
+	width: 22px;
+	height: 22px;
+	line-height: 22px;
+	border: 1px solid var(--border-color-base);
+	border-radius: 50%;
+	color: #666;
+	text-align: center;
+	cursor: pointer;
+}

package/es/style/index.css

@@ -0,0 +1,11 @@
+@import "@voplus/morpho-theme/styles/index.css";
+
+.themed {
+	.ant-btn-primary {
+		background-color: var(--success-color);
+	}
+}
+
+.app {
+	color: var(--purple-primary-color);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@voplus/morpho-workspace",
-	"version": "9.0.5",
+	"version": "9.0.7",
 	"description": "morpho workspace module",
 	"repository": {
 		"type": "git",

package/es/components/AutoSequenceDialog/index.less

@@ -1,14 +0,0 @@
-:global {
-	.format-tip {
-		line-height: 25px;
-		h3 {
-			font-size: unit((20/16), em);
-			color: #000;
-		}
-		ul {
-			list-style-type: disc;
-			margin: 10px 0;
-			padding: 0 0 0 18px;
-		}
-	}
-}

package/es/components/TeamTaskList/index.less

@@ -1,4 +0,0 @@
-:global {
-	.my-space-tasks {
-	}
-}

package/es/components/TimeLog/index.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-declare const TimeLog: (props: {
-    size?: "middle" | "small" | "large";
-}) => React.JSX.Element;
-export default TimeLog;

package/es/components/TimeLog/index.js

@@ -1,70 +0,0 @@
-import { Avatar, Button, Dropdown, Input, Row } from "antd";
-import React, { useEffect, useState } from "react";
-import { FontAwesomeIcon as FAIcon, faPlaySolid, faStopSolid, faStopwatchRegular, } from "@voplus/morpho-ui/es/faIcons";
-import dayjs from "dayjs";
-import { observe } from "@voplus/morpho-ui";
-import styles from "./index.less";
-const TimeLog = (props) => {
-    const [visible, setVisible] = useState(false);
-    const [on, setOn] = useState(false);
-    const [times, setTimes] = useState(0);
-    useEffect(() => {
-        const timer = setInterval(() => {
-            if (on)
-                setTimes((times) => times + 1);
-        }, 1000);
-        return () => clearInterval(timer);
-    }, [on]);
-    // 计时时间不足两位补0显示
-    const appendZero = (time) => {
-        return Number.parseInt(time).toLocaleString("zh", { minimumIntegerDigits: 2 });
-    };
-    // 手动输入更改计数时间
-    const onChange = (type, e) => {
-        e.persist();
-        const value = e.target.value - 0;
-        if (type === "hour")
-            setTimes(value * 3600 + (times % 3600));
-        if (type === "minute")
-            setTimes(value * 60 + (times % 60));
-        if (type === "second")
-            setTimes(value + times - (times % 60));
-    };
-    // 清空
-    const onClear = () => {
-        setTimes(0);
-        setOn(false);
-    };
-    const handleVisibleChange = (flag) => {
-        setVisible(flag);
-    };
-    const hour = appendZero(times / 3600);
-    const minute = appendZero((times / 60) % 60);
-    const second = appendZero(times % 60);
-    return observe(() => (React.createElement(Dropdown, { open: visible, popupRender: () => (React.createElement("div", { className: styles["time-log"] },
-            React.createElement("div", { className: "time-header" },
-                React.createElement(Button, { type: "link", onClick: onClear }, "Clear"),
-                React.createElement(Button, { type: "link" }, "Record")),
-            React.createElement("div", { className: "timer" },
-                React.createElement(Input, { value: hour, maxLength: 3, onChange: onChange.bind(event, "hour") }),
-                ":",
-                React.createElement(Input, { value: minute, maxLength: 3, onChange: onChange.bind(event, "minute") }),
-                ":",
-                React.createElement(Input, { value: second, maxLength: 3, onChange: onChange.bind(event, "second") }),
-                React.createElement("span", { onClick: () => setOn(!on), className: "status-icon" },
-                    React.createElement(FAIcon, { icon: on ? faStopSolid : faPlaySolid, color: "#000" }))),
-            React.createElement("div", { className: "record-list" }, Array.from(new Array(3).keys()).map((item) => (React.createElement(Row, { key: item, justify: "space-around" },
-                React.createElement(Avatar, { size: "small" }, "Mn"),
-                React.createElement("div", { className: "record-time" },
-                    React.createElement("div", null,
-                        React.createElement("span", null, dayjs().format("YYYY-MM-DD")),
-                        " from",
-                        React.createElement("span", null, dayjs().format("HH:mm")),
-                        " to ",
-                        React.createElement("span", null, dayjs().format("HH:mm"))),
-                    React.createElement("div", null, "3 hours 4 minutes 4 seconds")))))))), trigger: ["click"], placement: "bottomCenter", onOpenChange: handleVisibleChange },
-        React.createElement(Button, { shape: "circle", size: props.size },
-            React.createElement(FAIcon, { icon: faStopwatchRegular })))));
-};
-export default TimeLog;
-//# sourceMappingURL=index.js.map

package/es/components/TimeLog/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TimeLog/index.tsx"],"names":[],"mappings":"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"}

package/es/components/TimeLog/index.less

@@ -1,86 +0,0 @@
-.time-log {
-	position: relative;
-	margin-top: 8px;
-	background-color: #fff;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-	:global {
-		.time-header {
-			display: flex;
-			justify-content: space-around;
-			padding: 1px 0;
-			background: #f5f5f5;
-			.ant-btn {
-				padding: 0;
-				color: #333;
-			}
-		}
-		.timer {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			padding: 12px 25px;
-			.status-icon {
-				cursor: pointer;
-				margin-left: 10px;
-				font-size: 20px;
-			}
-			.ant-input {
-				width: 40px;
-				padding: 0;
-				border: 0;
-				text-align: center;
-				font-size: 22px;
-				color: #000;
-			}
-			.ant-input:focus {
-				box-shadow: none;
-				border: 0;
-			}
-		}
-		.record-list {
-			position: relative;
-			padding: 15px 15px 0 15px;
-			font-size: 13px;
-			line-height: 14px;
-			color: #666;
-			.ant-avatar {
-				margin-right: 10px;
-			}
-			.record-time {
-				padding-bottom: 15px;
-				> div + div {
-					padding-top: 5px;
-				}
-				span {
-					color: #000;
-				}
-			}
-		}
-		.record-list:before {
-			position: absolute;
-			content: "";
-			left: 0;
-			top: 0;
-			right: 0;
-			border-top: 1px #d9d9d9 solid;
-		}
-	}
-}
-.time-log:before,
-.time-log:after {
-	position: absolute;
-	content: "";
-	border-width: 6px;
-	top: -13px;
-	border-style: dashed solid solid dashed;
-}
-.time-log:before {
-	left: 50%;
-	margin-left: -6px;
-	border-color: transparent transparent #e4e7ed transparent;
-}
-.time-log:after {
-	left: 50%;
-	margin-left: -5px;
-	border-color: transparent transparent #f5f5f5 transparent;
-}

package/es/controls/Corner/index.less

@@ -1,7 +0,0 @@
-:global {
-	.corner-view {
-		position: absolute;
-		right: 20px;
-		bottom: 20px;
-	}
-}

package/es/controls/InlineSearch/index.less

@@ -1,10 +0,0 @@
-.inline-search {
-	:global {
-		.ant-input-affix-wrapper {
-			border-radius: 20px;
-		}
-		.ant-btn {
-			font-style: italic;
-		}
-	}
-}

package/es/controls/NodeLink/index.less

@@ -1,8 +0,0 @@
-.node-link {
-	color: #868686;
-	:global {
-		.tool-bar.tool-bar-2 .ant-btn {
-			font-size: 14px;
-		}
-	}
-}

package/es/controls/StickyAddButton/index.less

@@ -1,22 +0,0 @@
-@import "~@voplus/morpho-theme/styles/index.less";
-
-:global {
-	.sticky-add-button {
-		display: block;
-		width: 36px;
-		height: 36px;
-		line-height: 36px;
-		font-size: 16px;
-		text-align: center;
-		color: #222;
-		cursor: pointer;
-		border-radius: 50%;
-		background: #fff;
-		box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-			0 9px 28px 8px rgba(0, 0, 0, 0.05);
-		transition: color 0.3s;
-		&:hover {
-			color: @primary-color;
-		}
-	}
-}

package/es/controls/filters/AssigneeViewFilter/index.less

@@ -1,24 +0,0 @@
-:global {
-	.assignee-view {
-		&-item {
-			position: relative;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			height: 32px;
-			padding: 0 7px;
-			margin-top: 7px;
-			color: #999;
-			background: #f2f2f2;
-			font-size: 13px;
-			box-shadow: 0px 1px 0px 0.5px #dcdcdc;
-			cursor: pointer;
-			&.bold {
-				color: #000;
-			}
-			.anticon-close {
-				color: #444;
-			}
-		}
-	}
-}

package/es/modules/board/components/Board/index.less

@@ -1,156 +0,0 @@
-@import "~@voplus/morpho-theme/styles/index.less";
-
-.board-context {
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	:global {
-		.list-view-header-tool {
-			padding: 20px 20px 0;
-			.search-header-tool .ant-input-outlined {
-				width: 310px;
-			}
-			.tree-view-btn,
-			.table-view-btn {
-				color: #868686;
-				border: 1px solid #868686;
-				padding: 0 10px;
-				margin-left: 10px;
-				&.current {
-					color: @purple-primary-color;
-					border-color: @purple-primary-color;
-				}
-				&:hover {
-					color: @purple-primary-color;
-					border-color: @purple-primary-color;
-				}
-			}
-		}
-		.board-list {
-			height: 100%;
-			display: flex;
-			justify-content: space-between;
-			padding: 10px 12px;
-
-			.board-sortDnD {
-				flex: 1;
-				display: flex;
-				> div {
-					flex: 1;
-				}
-			}
-			.add-board {
-				width: 100px;
-				min-width: 100px;
-				font-size: 16px;
-				text-align: center;
-				line-height: 50px;
-				margin: 8px 0;
-				> div {
-					cursor: pointer;
-				}
-			}
-			.add-board-controls {
-				.ant-spin-nested-loading {
-					margin: 8px 0 8px 8px;
-					> div > .ant-spin {
-						height: 50px;
-					}
-				}
-			}
-			.add-board-able {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				height: 50px;
-				color: #000000;
-				line-height: 50px;
-				padding: 0 10px;
-				background: #ffffff;
-				margin-bottom: 15px;
-				min-width: 150px;
-				.ant-input {
-					padding: 0;
-					border: none;
-				}
-				.ant-input:focus {
-					box-shadow: none;
-				}
-				.svg-inline--fa {
-					cursor: pointer;
-					margin-left: 8px;
-				}
-			}
-			.ant-calendar {
-				max-width: 250px;
-			}
-		}
-
-		.swiper {
-			width: 100%;
-			height: 100%;
-			background-color: #eeeeee;
-		}
-
-		.swiper-slide {
-			text-align: center;
-			font-size: 18px;
-			background: #fff;
-
-			/* Center slide text vertically */
-			display: -webkit-box;
-			display: -ms-flexbox;
-			display: -webkit-flex;
-			display: flex;
-			-webkit-box-pack: center;
-			-ms-flex-pack: center;
-			-webkit-justify-content: center;
-			justify-content: center;
-			-webkit-box-align: center;
-			-ms-flex-align: center;
-			-webkit-align-items: center;
-			align-items: center;
-		}
-
-		.swiper-slide img {
-			display: block;
-			width: 100%;
-			height: 100%;
-			object-fit: cover;
-		}
-
-		.swiper-slide {
-			width: 80%;
-			background-color: cornsilk;
-			> div {
-				width: 100%;
-				height: 100%;
-				min-width: auto;
-				margin: 0;
-				.content-top {
-					width: 100%;
-				}
-				.wrapper {
-					width: 100%;
-					padding: 0 15px;
-				}
-				.new-sub-doc {
-					background: #fff;
-					border-top: solid 1px #eeeeee;
-					padding: 5px 10px;
-					.ant-btn {
-						padding: 4px 5px;
-					}
-				}
-			}
-		}
-	}
-}
-// .board_header {
-// 	display: flex;
-// 	justify-content: space-between;
-// 	align-items: center;
-// 	padding: 10px 20px;
-// 	border-bottom: 1px solid #f2f2f2;
-// 	background-color: #ffffff;
-// }