Refine BIM comment modal constraints
This commit is contained in:
parent
eee3eecde3
commit
4be23070a1
|
|
@ -1696,6 +1696,7 @@ header {
|
||||||
.comment-card-modal {
|
.comment-card-modal {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
--env-control-h: 42px;
|
--env-control-h: 42px;
|
||||||
|
--comment-modal-min-width: 660px;
|
||||||
--ops-comment-accent: var(--comment-target-active, #c4ff67);
|
--ops-comment-accent: var(--comment-target-active, #c4ff67);
|
||||||
--ops-detail-bg: var(--nodedc-glass-panel-bg);
|
--ops-detail-bg: var(--nodedc-glass-panel-bg);
|
||||||
--ops-detail-surface: rgba(255, 255, 255, 0.048);
|
--ops-detail-surface: rgba(255, 255, 255, 0.048);
|
||||||
|
|
@ -1707,6 +1708,7 @@ header {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||||
width: min(880px, calc(100vw - 48px));
|
width: min(880px, calc(100vw - 48px));
|
||||||
|
min-width: min(var(--comment-modal-min-width), calc(100vw - 24px));
|
||||||
max-height: min(820px, calc(100vh - 68px));
|
max-height: min(820px, calc(100vh - 68px));
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
|
@ -2111,12 +2113,14 @@ header {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 760;
|
font-weight: 760;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ops-detail-dropzone__copy span {
|
.ops-detail-dropzone__copy span {
|
||||||
color: rgba(245, 245, 250, 0.52);
|
color: rgba(245, 245, 250, 0.52);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-attach-button {
|
.comment-attach-button {
|
||||||
|
|
@ -2130,6 +2134,7 @@ header {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
padding: 0 14px;
|
padding: 0 14px;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-attach-button:hover {
|
.comment-attach-button:hover {
|
||||||
|
|
@ -2377,6 +2382,7 @@ header {
|
||||||
top: 14px;
|
top: 14px;
|
||||||
left: 12px;
|
left: 12px;
|
||||||
width: calc(100vw - 24px);
|
width: calc(100vw - 24px);
|
||||||
|
min-width: 0;
|
||||||
max-height: calc(100vh - 28px);
|
max-height: calc(100vh - 28px);
|
||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
}
|
}
|
||||||
|
|
@ -2392,6 +2398,11 @@ header {
|
||||||
grid-template-columns: 30px minmax(0, 1fr);
|
grid-template-columns: 30px minmax(0, 1fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ops-detail-dropzone__copy strong,
|
||||||
|
.ops-detail-dropzone__copy span {
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
.ops-detail-dropzone .comment-attach-button {
|
.ops-detail-dropzone .comment-attach-button {
|
||||||
grid-column: 2;
|
grid-column: 2;
|
||||||
justify-self: start;
|
justify-self: start;
|
||||||
|
|
|
||||||
|
|
@ -553,6 +553,13 @@ const setCommentModalError = (message = "") => {
|
||||||
commentModalError.hidden = !text;
|
commentModalError.hidden = !text;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const setCommentModalSubtitle = (text = "") => {
|
||||||
|
if (!commentModalSubtitle) return;
|
||||||
|
const value = String(text || "").trim();
|
||||||
|
commentModalSubtitle.textContent = value;
|
||||||
|
commentModalSubtitle.hidden = !value;
|
||||||
|
};
|
||||||
|
|
||||||
const bringFloatingWindowToFront = (id) => {
|
const bringFloatingWindowToFront = (id) => {
|
||||||
if (!id) return;
|
if (!id) return;
|
||||||
floatingWindowOrder = [...floatingWindowOrder.filter((item) => item !== id), id];
|
floatingWindowOrder = [...floatingWindowOrder.filter((item) => item !== id), id];
|
||||||
|
|
@ -1233,9 +1240,7 @@ const openCommentModalForTarget = () => {
|
||||||
commentTitleInput && (commentTitleInput.value = "");
|
commentTitleInput && (commentTitleInput.value = "");
|
||||||
commentBodyInput && (commentBodyInput.value = "");
|
commentBodyInput && (commentBodyInput.value = "");
|
||||||
commentReplyInput && (commentReplyInput.value = "");
|
commentReplyInput && (commentReplyInput.value = "");
|
||||||
if (commentModalSubtitle) {
|
setCommentModalSubtitle();
|
||||||
commentModalSubtitle.textContent = "BIM-COMMENT";
|
|
||||||
}
|
|
||||||
if (commentModalEditedMeta) {
|
if (commentModalEditedMeta) {
|
||||||
const [x, y, z] = commentContextTarget.worldPos || [];
|
const [x, y, z] = commentContextTarget.worldPos || [];
|
||||||
commentModalEditedMeta.textContent = Number.isFinite(x)
|
commentModalEditedMeta.textContent = Number.isFinite(x)
|
||||||
|
|
@ -1263,9 +1268,7 @@ const openCommentModalForComment = (commentId) => {
|
||||||
commentTitleInput && (commentTitleInput.value = comment.title || "");
|
commentTitleInput && (commentTitleInput.value = comment.title || "");
|
||||||
commentBodyInput && (commentBodyInput.value = comment.body || "");
|
commentBodyInput && (commentBodyInput.value = comment.body || "");
|
||||||
commentReplyInput && (commentReplyInput.value = "");
|
commentReplyInput && (commentReplyInput.value = "");
|
||||||
if (commentModalSubtitle) {
|
setCommentModalSubtitle();
|
||||||
commentModalSubtitle.textContent = comment.id || "BIM-COMMENT";
|
|
||||||
}
|
|
||||||
if (commentModalEditedMeta) {
|
if (commentModalEditedMeta) {
|
||||||
commentModalEditedMeta.textContent = `Последнее редактирование: ${formatDateTime(comment.updatedAt || comment.createdAt)}`;
|
commentModalEditedMeta.textContent = `Последнее редактирование: ${formatDateTime(comment.updatedAt || comment.createdAt)}`;
|
||||||
}
|
}
|
||||||
|
|
@ -1344,9 +1347,7 @@ const syncCommentModalAfterSave = (comment) => {
|
||||||
commentDraftSubitems = Array.isArray(comment.subitems)
|
commentDraftSubitems = Array.isArray(comment.subitems)
|
||||||
? comment.subitems.map((item) => ({ ...item }))
|
? comment.subitems.map((item) => ({ ...item }))
|
||||||
: [];
|
: [];
|
||||||
if (commentModalSubtitle) {
|
setCommentModalSubtitle();
|
||||||
commentModalSubtitle.textContent = comment.id || "BIM-COMMENT";
|
|
||||||
}
|
|
||||||
if (commentModalEditedMeta) {
|
if (commentModalEditedMeta) {
|
||||||
commentModalEditedMeta.textContent = `Последнее редактирование: ${formatDateTime(comment.updatedAt || comment.createdAt)}`;
|
commentModalEditedMeta.textContent = `Последнее редактирование: ${formatDateTime(comment.updatedAt || comment.createdAt)}`;
|
||||||
}
|
}
|
||||||
|
|
@ -5658,7 +5659,7 @@ const loadProjectSnapshot = async (project) => {
|
||||||
registerFloatingWindowElement("commentModal", commentModal);
|
registerFloatingWindowElement("commentModal", commentModal);
|
||||||
setupDraggableFixedWindow(commentsPanel, commentsPanelHeader);
|
setupDraggableFixedWindow(commentsPanel, commentsPanelHeader);
|
||||||
setupDraggableFixedWindow(commentModal, commentModalHeader);
|
setupDraggableFixedWindow(commentModal, commentModalHeader);
|
||||||
setupResizableFixedWindow(commentModal, { minWidth: 560, minHeight: 420 });
|
setupResizableFixedWindow(commentModal, { minWidth: 660, minHeight: 420 });
|
||||||
commentsCollapseButton?.addEventListener("click", () => setCommentsCollapsed(true));
|
commentsCollapseButton?.addEventListener("click", () => setCommentsCollapsed(true));
|
||||||
commentsRestoreButton?.addEventListener("click", () => {
|
commentsRestoreButton?.addEventListener("click", () => {
|
||||||
commentsModeActive = true;
|
commentsModeActive = true;
|
||||||
|
|
|
||||||
|
|
@ -203,7 +203,7 @@
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="./dcViewer.css?v=35">
|
<link rel="stylesheet" href="./dcViewer.css?v=36">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
|
|
@ -384,7 +384,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="comment-card-modal__body">
|
<div class="comment-card-modal__body">
|
||||||
<section class="ops-detail-hero">
|
<section class="ops-detail-hero">
|
||||||
<div class="comment-card-modal__subtitle" id="commentModalSubtitle">BIM-COMMENT</div>
|
<div class="comment-card-modal__subtitle" id="commentModalSubtitle" hidden></div>
|
||||||
<input class="ops-detail-title-input" type="text" id="commentTitleInput" autocomplete="off" placeholder="Новый комментарий">
|
<input class="ops-detail-title-input" type="text" id="commentTitleInput" autocomplete="off" placeholder="Новый комментарий">
|
||||||
<textarea class="ops-detail-description-input" id="commentBodyInput" rows="2" placeholder="Нажмите, чтобы добавить описание"></textarea>
|
<textarea class="ops-detail-description-input" id="commentBodyInput" rows="2" placeholder="Нажмите, чтобы добавить описание"></textarea>
|
||||||
<div class="ops-detail-meta-row">
|
<div class="ops-detail-meta-row">
|
||||||
|
|
@ -641,6 +641,6 @@
|
||||||
<input id="fileInput" class="hidden" type="file"
|
<input id="fileInput" class="hidden" type="file"
|
||||||
accept=".xkt,.glb,.gltf,.bim,.las,.laz,.obj,.stl">
|
accept=".xkt,.glb,.gltf,.bim,.las,.laz,.obj,.stl">
|
||||||
|
|
||||||
<script type="module" src="./dcViewer.js?v=49"></script>
|
<script type="module" src="./dcViewer.js?v=50"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue