Align BIM comments with OPS detail card

This commit is contained in:
CODEX
2026-06-20 17:21:07 +03:00
parent 684f85b382
commit d70f6e0886
4 changed files with 800 additions and 192 deletions
+114 -39
View File
@@ -134,7 +134,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<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 rel="stylesheet" href="./dcViewer.css?v=24">
<link rel="stylesheet" href="./dcViewer.css?v=25">
</head>
<body>
<header>
@@ -293,51 +293,126 @@
<div id="objectModalBackdrop" class="modal-backdrop hidden"></div>
<div id="objectModal" class="templates-panel measurement-modal hidden"></div>
<div id="commentModalBackdrop" class="modal-backdrop hidden"></div>
<div id="commentModal" class="comment-card-modal hidden" role="dialog" aria-modal="true" aria-label="Комментарий к модели">
<div id="commentModal" class="comment-card-modal ops-comment-detail hidden" role="dialog" aria-modal="true" aria-label="Комментарий к модели">
<div class="comment-card-modal__header" id="commentModalHeader">
<div class="comment-card-modal__titles">
<div class="comment-card-modal__title">Комментарий к модели</div>
<div class="comment-card-modal__subtitle" id="commentModalSubtitle">Новый таргет</div>
<div class="ops-detail-nav">
<button class="ops-detail-icon-btn" type="button" aria-label="Назад" title="Назад">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M14 7 9 12l5 5"></path>
</svg>
</button>
<button class="ops-detail-icon-btn" type="button" aria-label="Развернуть" title="Развернуть">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M14 5h5v5M19 5l-7 7M10 19H5v-5M5 19l7-7"></path>
</svg>
</button>
</div>
<div class="ops-detail-actions">
<button class="ops-detail-icon-btn" type="button" aria-label="Уведомления" title="Уведомления">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9"></path>
<path d="M10 21h4"></path>
</svg>
</button>
<button class="ops-detail-icon-btn" type="button" aria-label="Ещё" title="Ещё">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 12h.01M18 12h.01M6 12h.01"></path>
</svg>
</button>
<button class="ops-detail-icon-btn modal-close" id="commentModalClose" type="button" aria-label="Закрыть" title="Закрыть">
<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="M4.25 4.25 11.75 11.75M11.75 4.25 4.25 11.75" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
</svg>
</button>
</div>
<button class="modal-close inspector-collapse-btn" id="commentModalClose" type="button" aria-label="Закрыть">
<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="M4.25 4.25 11.75 11.75M11.75 4.25 4.25 11.75" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
</svg>
</button>
</div>
<div class="comment-card-modal__body">
<label class="comment-field">
<span>Тема</span>
<input type="text" id="commentTitleInput" autocomplete="off" placeholder="Тема комментария">
</label>
<label class="comment-field">
<span>Описание</span>
<textarea id="commentBodyInput" rows="5" placeholder="Описание комментария"></textarea>
</label>
<div class="comment-attachments">
<div class="comment-attachments__head">
<span>Картинки</span>
<button type="button" class="comment-attach-button" id="commentAttachButton">Добавить</button>
<input type="file" id="commentAttachmentInput" accept="image/*" multiple hidden>
<section class="ops-detail-hero">
<div class="comment-card-modal__subtitle" id="commentModalSubtitle">BIM-COMMENT</div>
<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>
<div class="ops-detail-meta-row">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M3 12a9 9 0 1 0 3-6.7M3 4v6h6"></path>
<path d="M12 7v5l3 2"></path>
</svg>
<span id="commentModalEditedMeta">Последнее редактирование: только что</span>
</div>
<div class="ops-detail-pills">
<button class="ops-detail-pill" id="commentAddSubitemButton" type="button">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 3 4 7l8 4 8-4-8-4ZM4 12l8 4 8-4M4 17l8 4 8-4"></path>
</svg>
<span>Добавить подэлемент</span>
</button>
</div>
</section>
<section class="ops-comment-subitems hidden" id="commentSubitemsSection">
<div class="ops-detail-section-title">Подэлементы</div>
<div class="ops-comment-subitems__list" id="commentSubitemsList"></div>
</section>
<section class="comment-attachments ops-detail-dropzone" id="commentDropzone">
<div class="ops-detail-dropzone__icon">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 16V7"></path>
<path d="m8 11 4-4 4 4"></path>
<path d="M20 16.5a4.5 4.5 0 0 0-8.7-1.6A3.5 3.5 0 1 0 6.5 19H18a2 2 0 0 0 2-2.5Z"></path>
</svg>
</div>
<div class="ops-detail-dropzone__copy">
<strong>Перетащите файлы сюда или нажмите для выбора</strong>
<span>Любой формат, несколько файлов за раз, до 50 МБ на файл</span>
</div>
<button type="button" class="comment-attach-button" id="commentAttachButton">Выбрать</button>
<input type="file" id="commentAttachmentInput" multiple hidden>
<div class="comment-attachment-grid" id="commentAttachmentGrid"></div>
</div>
<div class="comment-thread">
<div class="comment-thread__title">Комментарии</div>
<div class="comment-thread__list" id="commentThreadList"></div>
<label class="comment-field comment-field--reply">
<span>Новый комментарий</span>
<textarea id="commentReplyInput" rows="3" placeholder="Оставить комментарий"></textarea>
</label>
<div class="comment-attachments comment-attachments--reply">
<div class="comment-attachments__head">
<span>Картинки к ответу</span>
<button type="button" class="comment-attach-button" id="commentReplyAttachButton">Добавить</button>
<input type="file" id="commentReplyAttachmentInput" accept="image/*" multiple hidden>
</section>
<section class="comment-thread ops-detail-activity">
<div class="ops-detail-section-head">
<div class="comment-thread__title">Активность</div>
<div class="ops-detail-section-actions">
<button class="ops-detail-mini-btn" type="button" aria-label="Сортировка" title="Сортировка">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M4 6h12M4 12h8M4 18h4M18 8v10M15 15l3 3 3-3"></path>
</svg>
</button>
<button class="ops-detail-mini-btn" type="button" aria-label="Фильтр" title="Фильтр">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M4 6h16M7 12h10M10 18h4"></path>
</svg>
</button>
</div>
<div class="comment-attachment-grid" id="commentReplyAttachmentGrid"></div>
</div>
</div>
<label class="ops-activity-composer">
<span>Добавить комментарий</span>
<textarea id="commentReplyInput" rows="5" placeholder="Добавить комментарий"></textarea>
<div class="ops-activity-composer__toolbar">
<button type="button" class="ops-detail-mini-btn" id="commentReplyAttachButton" aria-label="Прикрепить файл" title="Прикрепить файл">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="m21.4 11.6-8.5 8.5a6 6 0 0 1-8.5-8.5l8.5-8.5a4 4 0 0 1 5.7 5.7l-8.5 8.5a2 2 0 0 1-2.8-2.8l7.8-7.8"></path>
</svg>
</button>
<button type="button" class="ops-detail-mini-btn" aria-label="Реакция" title="Реакция">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z"></path>
<path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"></path>
</svg>
</button>
<button type="button" class="ops-activity-send" id="commentApplyInlineButton" aria-label="Отправить комментарий" title="Отправить комментарий">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 19V5"></path>
<path d="m5 12 7-7 7 7"></path>
</svg>
</button>
<input type="file" id="commentReplyAttachmentInput" multiple hidden>
</div>
</label>
<div class="comment-attachment-grid comment-attachment-grid--reply" id="commentReplyAttachmentGrid"></div>
<div class="comment-thread__list" id="commentThreadList"></div>
</section>
<div class="error-text" id="commentModalError"></div>
</div>
<div class="comment-card-modal__footer">
@@ -494,6 +569,6 @@
<input id="fileInput" class="hidden" type="file"
accept=".xkt,.glb,.gltf,.bim,.las,.laz,.obj,.stl">
<script type="module" src="./dcViewer.js?v=28"></script>
<script type="module" src="./dcViewer.js?v=29"></script>
</body>
</html>