Refine BIM comment modal constraints

This commit is contained in:
CODEX 2026-06-20 23:34:41 +03:00
parent eee3eecde3
commit 4be23070a1
3 changed files with 25 additions and 13 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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>