Align BIM comments with OPS detail card
This commit is contained in:
CODEX
parent
684f85b382
commit
d70f6e0886
|
|
@ -1582,24 +1582,29 @@ header {
|
|||
|
||||
.comment-card-modal {
|
||||
position: fixed;
|
||||
--env-control-h: 46px;
|
||||
--env-button-radius: 17px;
|
||||
--env-glass-control-bg: var(--nodedc-glass-control-bg);
|
||||
--env-glass-control-hover: var(--nodedc-glass-control-hover);
|
||||
--env-glass-control-shadow: var(--nodedc-glass-control-shadow);
|
||||
top: 96px;
|
||||
left: calc(50vw - 230px);
|
||||
--env-control-h: 42px;
|
||||
--ops-detail-bg: rgba(18, 18, 20, 0.96);
|
||||
--ops-detail-surface: rgba(28, 28, 31, 0.76);
|
||||
--ops-detail-surface-strong: rgba(32, 32, 35, 0.92);
|
||||
--ops-detail-border: rgba(255, 255, 255, 0.055);
|
||||
--ops-detail-muted: rgba(229, 231, 235, 0.54);
|
||||
top: 34px;
|
||||
left: calc(50vw - 440px);
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
width: min(520px, calc(100vw - 36px));
|
||||
max-height: min(760px, calc(100vh - 72px));
|
||||
background: color-mix(in srgb, var(--modal-bg) var(--modal-bg-alpha, 100%), transparent);
|
||||
border: 1px solid var(--modal-border);
|
||||
border-radius: var(--modal-radius, 16px);
|
||||
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
|
||||
z-index: 30050;
|
||||
width: min(880px, calc(100vw - 48px));
|
||||
max-height: min(820px, calc(100vh - 68px));
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(18px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 30px;
|
||||
background:
|
||||
radial-gradient(circle at 80% 20%, rgba(130, 58, 120, 0.13), transparent 34%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.006)),
|
||||
var(--ops-detail-bg);
|
||||
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.64);
|
||||
z-index: 30050;
|
||||
backdrop-filter: blur(30px) saturate(1.08);
|
||||
-webkit-backdrop-filter: blur(30px) saturate(1.08);
|
||||
}
|
||||
|
||||
.comment-card-modal.hidden {
|
||||
|
|
@ -1607,14 +1612,11 @@ header {
|
|||
}
|
||||
|
||||
.comment-card-modal__header {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) var(--env-control-h);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: calc(var(--env-control-h) + 20px);
|
||||
padding: 12px 12px 8px 16px;
|
||||
background: color-mix(in srgb, var(--modal-bg) var(--modal-bg-alpha, 100%), transparent);
|
||||
border-radius: var(--modal-radius, 16px) var(--modal-radius, 16px) 0 0;
|
||||
justify-content: space-between;
|
||||
min-height: 64px;
|
||||
padding: 20px 28px 8px;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -1623,172 +1625,471 @@ header {
|
|||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.comment-card-modal__titles {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
.ops-detail-nav,
|
||||
.ops-detail-actions,
|
||||
.ops-detail-section-actions,
|
||||
.ops-activity-composer__toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.comment-card-modal__title {
|
||||
color: var(--text);
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
.ops-detail-actions {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.ops-detail-icon-btn,
|
||||
.ops-detail-mini-btn,
|
||||
.ops-activity-send {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.038);
|
||||
color: rgba(245, 245, 250, 0.78);
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: background 130ms ease, color 130ms ease, transform 120ms ease;
|
||||
}
|
||||
|
||||
.ops-detail-mini-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.ops-detail-icon-btn:hover,
|
||||
.ops-detail-mini-btn:hover,
|
||||
.ops-activity-send:hover {
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.ops-detail-icon-btn:active,
|
||||
.ops-detail-mini-btn:active,
|
||||
.ops-activity-send:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.ops-detail-icon-btn svg,
|
||||
.ops-detail-mini-btn svg,
|
||||
.ops-activity-send svg,
|
||||
.ops-detail-pill svg,
|
||||
.ops-detail-meta-row svg,
|
||||
.ops-detail-dropzone__icon svg {
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.8;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.comment-card-modal__body {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding: 30px 32px 24px;
|
||||
}
|
||||
|
||||
.ops-detail-hero {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.comment-card-modal__subtitle {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
color: rgba(229, 231, 235, 0.68);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.comment-card-modal__body {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding: 12px 14px 14px;
|
||||
}
|
||||
|
||||
.comment-field {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.comment-field span,
|
||||
.comment-thread__title,
|
||||
.comment-attachments__head span {
|
||||
color: rgba(245, 245, 250, 0.84);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.comment-field input,
|
||||
.comment-field textarea {
|
||||
.ops-detail-title-input,
|
||||
.ops-detail-description-input {
|
||||
width: 100%;
|
||||
border: 1px solid var(--modal-border);
|
||||
border-radius: var(--modal-radius, 10px);
|
||||
background: var(--modal-element);
|
||||
color: var(--text);
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: rgba(245, 245, 250, 0.94);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
padding: 11px 12px;
|
||||
resize: vertical;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.comment-field textarea {
|
||||
min-height: 86px;
|
||||
line-height: 1.42;
|
||||
.ops-detail-title-input {
|
||||
min-height: 36px;
|
||||
font-size: 21px;
|
||||
font-weight: 760;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.comment-field input:focus,
|
||||
.comment-field textarea:focus {
|
||||
border-color: var(--modal-element-outline);
|
||||
box-shadow: 0 0 0 2px rgba(255, 234, 0, 0.08);
|
||||
.ops-detail-title-input::placeholder {
|
||||
color: rgba(245, 245, 250, 0.52);
|
||||
}
|
||||
|
||||
.ops-detail-description-input {
|
||||
min-height: 30px;
|
||||
color: rgba(245, 245, 250, 0.72);
|
||||
font-size: 16px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.ops-detail-description-input::placeholder {
|
||||
color: rgba(245, 245, 250, 0.4);
|
||||
}
|
||||
|
||||
.ops-detail-meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
min-height: 22px;
|
||||
margin-top: 18px;
|
||||
color: var(--ops-detail-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.ops-detail-meta-row svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.ops-detail-pills {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.ops-detail-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
min-height: 38px;
|
||||
padding: 0 18px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.034);
|
||||
color: rgba(245, 245, 250, 0.78);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 720;
|
||||
}
|
||||
|
||||
.ops-detail-pill:hover {
|
||||
background: rgba(255, 255, 255, 0.065);
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.ops-comment-subitems,
|
||||
.comment-attachments,
|
||||
.comment-thread {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.ops-comment-subitems.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ops-detail-section-title,
|
||||
.comment-thread__title {
|
||||
color: rgba(245, 245, 250, 0.92);
|
||||
font-size: 19px;
|
||||
font-weight: 760;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.ops-comment-subitems__list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
border: 1px solid var(--modal-border);
|
||||
border-radius: var(--modal-radius, 10px);
|
||||
background: color-mix(in srgb, var(--modal-focus) var(--modal-focus-alpha, 100%), transparent);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.comment-attachments--reply {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.comment-attachments__head {
|
||||
display: flex;
|
||||
.ops-comment-subitem {
|
||||
display: grid;
|
||||
grid-template-columns: 20px minmax(0, 1fr) 28px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
min-height: 42px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--ops-detail-border);
|
||||
border-radius: 15px;
|
||||
background: rgba(255, 255, 255, 0.026);
|
||||
}
|
||||
|
||||
.ops-comment-subitem input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
|
||||
.ops-comment-subitem input[type="text"] {
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: rgba(245, 245, 250, 0.86);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.ops-comment-subitem button {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
color: rgba(245, 245, 250, 0.48);
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ops-comment-subitem button:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: rgba(245, 245, 250, 0.9);
|
||||
}
|
||||
|
||||
.ops-detail-dropzone {
|
||||
grid-template-columns: 38px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
min-height: 76px;
|
||||
padding: 16px 18px;
|
||||
border: 0;
|
||||
border-radius: 21px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.024));
|
||||
transition: background 140ms ease, box-shadow 140ms ease;
|
||||
}
|
||||
|
||||
.ops-detail-dropzone.drag-over {
|
||||
background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.04));
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 44%, transparent);
|
||||
}
|
||||
|
||||
.ops-detail-dropzone__icon {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.ops-detail-dropzone__copy {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ops-detail-dropzone__copy strong {
|
||||
color: rgba(245, 245, 250, 0.92);
|
||||
font-size: 15px;
|
||||
font-weight: 760;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.ops-detail-dropzone__copy span {
|
||||
color: rgba(245, 245, 250, 0.52);
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.comment-attach-button {
|
||||
min-height: 28px;
|
||||
min-height: 34px;
|
||||
border: 0;
|
||||
border-radius: 9px;
|
||||
background: var(--modal-element);
|
||||
color: rgba(245, 245, 250, 0.82);
|
||||
border-radius: 13px;
|
||||
background: transparent;
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 11px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
padding: 0 10px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.comment-attach-button:hover {
|
||||
background: var(--env-glass-control-hover);
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.055);
|
||||
}
|
||||
|
||||
.comment-attachment-grid {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
|
||||
gap: 8px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.comment-attachment-grid--reply {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.comment-attachment-thumb {
|
||||
position: relative;
|
||||
min-height: 70px;
|
||||
min-height: 86px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--modal-border);
|
||||
border-radius: 9px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--ops-detail-border);
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.comment-attachment-thumb img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 82px;
|
||||
height: 104px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.comment-attachment-file {
|
||||
display: grid;
|
||||
grid-template-columns: 32px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
min-height: 86px;
|
||||
padding: 12px;
|
||||
color: rgba(245, 245, 250, 0.82);
|
||||
}
|
||||
|
||||
.comment-attachment-file svg {
|
||||
display: block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.7;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.comment-attachment-file__meta {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.comment-attachment-file__meta strong,
|
||||
.comment-attachment-file__meta span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.comment-attachment-file__meta strong {
|
||||
font-size: 12px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.comment-attachment-file__meta span {
|
||||
color: rgba(245, 245, 250, 0.48);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.comment-attachment-thumb button {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: rgba(12, 12, 14, 0.76);
|
||||
border-radius: 9px;
|
||||
background: rgba(12, 12, 14, 0.78);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.comment-thread__list {
|
||||
.ops-detail-activity {
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.ops-detail-section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.ops-activity-composer {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--ops-detail-border);
|
||||
border-radius: 24px;
|
||||
background: rgba(22, 23, 25, 0.78);
|
||||
}
|
||||
|
||||
.ops-activity-composer > span {
|
||||
color: rgba(245, 245, 250, 0.9);
|
||||
font-size: 15px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.ops-activity-composer textarea {
|
||||
width: 100%;
|
||||
min-height: 118px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.045);
|
||||
background: transparent;
|
||||
color: rgba(245, 245, 250, 0.84);
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.ops-activity-composer textarea::placeholder {
|
||||
color: rgba(245, 245, 250, 0.34);
|
||||
}
|
||||
|
||||
.ops-activity-composer__toolbar {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.ops-activity-send {
|
||||
margin-left: auto;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: rgba(245, 245, 250, 0.74);
|
||||
}
|
||||
|
||||
.ops-activity-send:disabled,
|
||||
.comment-card-modal__footer button:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.55;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.comment-thread__list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.comment-thread-empty {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
color: var(--ops-detail-muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.comment-thread-message {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.045);
|
||||
padding: 9px;
|
||||
gap: 7px;
|
||||
border: 1px solid var(--ops-detail-border);
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.026);
|
||||
padding: 11px 12px;
|
||||
}
|
||||
|
||||
.comment-thread-message__head {
|
||||
|
|
@ -1797,8 +2098,8 @@ header {
|
|||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
color: rgba(245, 245, 250, 0.56);
|
||||
font-size: 10px;
|
||||
color: rgba(245, 245, 250, 0.5);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
|
@ -1811,32 +2112,59 @@ header {
|
|||
}
|
||||
|
||||
.comment-thread-message__body {
|
||||
color: rgba(245, 245, 250, 0.78);
|
||||
font-size: 12px;
|
||||
line-height: 1.42;
|
||||
color: rgba(245, 245, 250, 0.76);
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.comment-card-modal__footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
padding: 12px 14px;
|
||||
background: color-mix(in srgb, var(--modal-bg) var(--modal-bg-alpha, 100%), transparent);
|
||||
border-top: 1px solid var(--modal-border);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 14px 32px 18px;
|
||||
background: var(--ops-detail-bg);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.comment-card-modal__footer .primary-btn,
|
||||
.comment-card-modal__footer .secondary-btn {
|
||||
width: 100%;
|
||||
min-width: 148px;
|
||||
}
|
||||
|
||||
.comment-card-modal .error-text {
|
||||
min-height: 16px;
|
||||
color: var(--error);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.comment-card-modal {
|
||||
top: 14px;
|
||||
left: 12px;
|
||||
width: calc(100vw - 24px);
|
||||
max-height: calc(100vh - 28px);
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.comment-card-modal__header,
|
||||
.comment-card-modal__body,
|
||||
.comment-card-modal__footer {
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
|
||||
.ops-detail-dropzone {
|
||||
grid-template-columns: 30px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.ops-detail-dropzone .comment-attach-button {
|
||||
grid-column: 2;
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-panel {
|
||||
|
|
|
|||
|
|
@ -57,11 +57,16 @@ const commentModal = document.getElementById("commentModal");
|
|||
const commentModalHeader = document.getElementById("commentModalHeader");
|
||||
const commentModalClose = document.getElementById("commentModalClose");
|
||||
const commentModalSubtitle = document.getElementById("commentModalSubtitle");
|
||||
const commentModalEditedMeta = document.getElementById("commentModalEditedMeta");
|
||||
const commentTitleInput = document.getElementById("commentTitleInput");
|
||||
const commentBodyInput = document.getElementById("commentBodyInput");
|
||||
const commentDropzone = document.getElementById("commentDropzone");
|
||||
const commentAttachButton = document.getElementById("commentAttachButton");
|
||||
const commentAttachmentInput = document.getElementById("commentAttachmentInput");
|
||||
const commentAttachmentGrid = document.getElementById("commentAttachmentGrid");
|
||||
const commentSubitemsSection = document.getElementById("commentSubitemsSection");
|
||||
const commentSubitemsList = document.getElementById("commentSubitemsList");
|
||||
const commentAddSubitemButton = document.getElementById("commentAddSubitemButton");
|
||||
const commentThreadList = document.getElementById("commentThreadList");
|
||||
const commentReplyInput = document.getElementById("commentReplyInput");
|
||||
const commentReplyAttachButton = document.getElementById("commentReplyAttachButton");
|
||||
|
|
@ -70,6 +75,7 @@ const commentReplyAttachmentGrid = document.getElementById("commentReplyAttachme
|
|||
const commentModalError = document.getElementById("commentModalError");
|
||||
const commentCancelButton = document.getElementById("commentCancelButton");
|
||||
const commentApplyButton = document.getElementById("commentApplyButton");
|
||||
const commentApplyInlineButton = document.getElementById("commentApplyInlineButton");
|
||||
const treeContainer = document.getElementById("treeContainer");
|
||||
const displayModeControl = document.getElementById("displayModeControl");
|
||||
const displayModeSelectHost = document.getElementById("displayModeSelect");
|
||||
|
|
@ -297,6 +303,7 @@ let activeCommentId = null;
|
|||
let hoverCommentId = null;
|
||||
let commentDraftAttachments = [];
|
||||
let commentReplyAttachments = [];
|
||||
let commentDraftSubitems = [];
|
||||
let commentTargetRaf = 0;
|
||||
let commentLongPressTimer = null;
|
||||
let commentLongPressStart = null;
|
||||
|
|
@ -890,8 +897,16 @@ const openCommentContextMenuFromEvent = (event) => {
|
|||
return true;
|
||||
};
|
||||
|
||||
const readImageFiles = async (fileList) => {
|
||||
const files = Array.from(fileList || []).filter((file) => file?.type?.startsWith("image/")).slice(0, 8);
|
||||
const COMMENT_FILE_LIMIT_BYTES = 50 * 1024 * 1024;
|
||||
|
||||
const readAttachmentFiles = async (fileList) => {
|
||||
const files = Array.from(fileList || [])
|
||||
.filter((file) => file && file.size <= COMMENT_FILE_LIMIT_BYTES)
|
||||
.slice(0, 8);
|
||||
const skipped = Array.from(fileList || []).filter((file) => file && file.size > COMMENT_FILE_LIMIT_BYTES).length;
|
||||
if (skipped && commentModalError) {
|
||||
commentModalError.textContent = `Файлы больше 50 МБ не добавлены: ${skipped}`;
|
||||
}
|
||||
const readOne = (file) => new Promise((resolve) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => resolve({
|
||||
|
|
@ -908,21 +923,51 @@ const readImageFiles = async (fileList) => {
|
|||
return items.filter(Boolean);
|
||||
};
|
||||
|
||||
const formatFileSize = (value) => {
|
||||
const size = Number(value);
|
||||
if (!Number.isFinite(size) || size <= 0) return "";
|
||||
if (size >= 1024 * 1024) return `${(size / (1024 * 1024)).toFixed(size >= 10 * 1024 * 1024 ? 0 : 1)} МБ`;
|
||||
if (size >= 1024) return `${Math.round(size / 1024)} КБ`;
|
||||
return `${Math.round(size)} Б`;
|
||||
};
|
||||
|
||||
const renderAttachmentGrid = (grid, attachments, onRemove) => {
|
||||
if (!grid) return;
|
||||
grid.replaceChildren();
|
||||
(attachments || []).forEach((attachment, index) => {
|
||||
const thumb = document.createElement("div");
|
||||
thumb.className = "comment-attachment-thumb";
|
||||
const img = document.createElement("img");
|
||||
img.src = attachment.dataUrl;
|
||||
img.alt = attachment.name || "attachment";
|
||||
const isImage = String(attachment.type || "").startsWith("image/") || /^data:image\//i.test(String(attachment.dataUrl || ""));
|
||||
if (isImage) {
|
||||
const img = document.createElement("img");
|
||||
img.src = attachment.dataUrl;
|
||||
img.alt = attachment.name || "attachment";
|
||||
thumb.appendChild(img);
|
||||
} else {
|
||||
const file = document.createElement("div");
|
||||
file.className = "comment-attachment-file";
|
||||
file.innerHTML = `
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7Z"></path>
|
||||
<path d="M14 2v5h5"></path>
|
||||
</svg>
|
||||
`;
|
||||
const meta = document.createElement("div");
|
||||
meta.className = "comment-attachment-file__meta";
|
||||
const name = document.createElement("strong");
|
||||
name.textContent = attachment.name || "Файл";
|
||||
const size = document.createElement("span");
|
||||
size.textContent = formatFileSize(attachment.size) || attachment.type || "Файл";
|
||||
meta.append(name, size);
|
||||
file.appendChild(meta);
|
||||
thumb.appendChild(file);
|
||||
}
|
||||
const remove = document.createElement("button");
|
||||
remove.type = "button";
|
||||
remove.setAttribute("aria-label", "Удалить картинку");
|
||||
remove.setAttribute("aria-label", "Удалить файл");
|
||||
remove.textContent = "×";
|
||||
remove.addEventListener("click", () => onRemove?.(index));
|
||||
thumb.append(img, remove);
|
||||
thumb.appendChild(remove);
|
||||
grid.appendChild(thumb);
|
||||
});
|
||||
};
|
||||
|
|
@ -934,10 +979,31 @@ const renderThreadAttachments = (container, attachments) => {
|
|||
attachments.forEach((attachment) => {
|
||||
const thumb = document.createElement("div");
|
||||
thumb.className = "comment-attachment-thumb";
|
||||
const img = document.createElement("img");
|
||||
img.src = attachment.dataUrl;
|
||||
img.alt = attachment.name || "attachment";
|
||||
thumb.appendChild(img);
|
||||
const isImage = String(attachment.type || "").startsWith("image/") || /^data:image\//i.test(String(attachment.dataUrl || ""));
|
||||
if (isImage) {
|
||||
const img = document.createElement("img");
|
||||
img.src = attachment.dataUrl;
|
||||
img.alt = attachment.name || "attachment";
|
||||
thumb.appendChild(img);
|
||||
} else {
|
||||
const file = document.createElement("div");
|
||||
file.className = "comment-attachment-file";
|
||||
file.innerHTML = `
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7Z"></path>
|
||||
<path d="M14 2v5h5"></path>
|
||||
</svg>
|
||||
`;
|
||||
const meta = document.createElement("div");
|
||||
meta.className = "comment-attachment-file__meta";
|
||||
const name = document.createElement("strong");
|
||||
name.textContent = attachment.name || "Файл";
|
||||
const size = document.createElement("span");
|
||||
size.textContent = formatFileSize(attachment.size) || attachment.type || "Файл";
|
||||
meta.append(name, size);
|
||||
file.appendChild(meta);
|
||||
thumb.appendChild(file);
|
||||
}
|
||||
grid.appendChild(thumb);
|
||||
});
|
||||
container.appendChild(grid);
|
||||
|
|
@ -976,7 +1042,9 @@ const renderCommentThread = (comment) => {
|
|||
const resetCommentModalAttachments = () => {
|
||||
commentDraftAttachments = [];
|
||||
commentReplyAttachments = [];
|
||||
commentDraftSubitems = [];
|
||||
renderModalAttachmentInputs();
|
||||
renderCommentSubitems();
|
||||
};
|
||||
|
||||
const renderModalAttachmentInputs = () => {
|
||||
|
|
@ -990,6 +1058,40 @@ const renderModalAttachmentInputs = () => {
|
|||
});
|
||||
};
|
||||
|
||||
const renderCommentSubitems = () => {
|
||||
if (!commentSubitemsList || !commentSubitemsSection) return;
|
||||
commentSubitemsList.replaceChildren();
|
||||
const subitems = Array.isArray(commentDraftSubitems) ? commentDraftSubitems : [];
|
||||
commentSubitemsSection.classList.toggle("hidden", !subitems.length);
|
||||
subitems.forEach((subitem, index) => {
|
||||
const row = document.createElement("label");
|
||||
row.className = "ops-comment-subitem";
|
||||
const checkbox = document.createElement("input");
|
||||
checkbox.type = "checkbox";
|
||||
checkbox.checked = !!subitem.done;
|
||||
checkbox.addEventListener("change", () => {
|
||||
commentDraftSubitems[index] = { ...commentDraftSubitems[index], done: checkbox.checked };
|
||||
});
|
||||
const input = document.createElement("input");
|
||||
input.type = "text";
|
||||
input.value = subitem.title || "";
|
||||
input.placeholder = "Новый подэлемент";
|
||||
input.addEventListener("input", () => {
|
||||
commentDraftSubitems[index] = { ...commentDraftSubitems[index], title: input.value };
|
||||
});
|
||||
const remove = document.createElement("button");
|
||||
remove.type = "button";
|
||||
remove.setAttribute("aria-label", "Удалить подэлемент");
|
||||
remove.textContent = "×";
|
||||
remove.addEventListener("click", () => {
|
||||
commentDraftSubitems.splice(index, 1);
|
||||
renderCommentSubitems();
|
||||
});
|
||||
row.append(checkbox, input, remove);
|
||||
commentSubitemsList.appendChild(row);
|
||||
});
|
||||
};
|
||||
|
||||
const openCommentModalForTarget = () => {
|
||||
if (!commentContextTarget || !commentModal) return;
|
||||
commentsModeActive = true;
|
||||
|
|
@ -1001,8 +1103,13 @@ const openCommentModalForTarget = () => {
|
|||
commentBodyInput && (commentBodyInput.value = "");
|
||||
commentReplyInput && (commentReplyInput.value = "");
|
||||
if (commentModalSubtitle) {
|
||||
commentModalSubtitle.textContent = "BIM-COMMENT";
|
||||
}
|
||||
if (commentModalEditedMeta) {
|
||||
const [x, y, z] = commentContextTarget.worldPos || [];
|
||||
commentModalSubtitle.textContent = Number.isFinite(x) ? `Точка: ${x.toFixed(2)}, ${y.toFixed(2)}, ${z.toFixed(2)}` : "Новый таргет";
|
||||
commentModalEditedMeta.textContent = Number.isFinite(x)
|
||||
? `Последнее редактирование: новая точка ${x.toFixed(2)}, ${y.toFixed(2)}, ${z.toFixed(2)}`
|
||||
: "Последнее редактирование: новый комментарий";
|
||||
}
|
||||
if (commentModalError) commentModalError.textContent = "";
|
||||
resetCommentModalAttachments();
|
||||
|
|
@ -1024,10 +1131,17 @@ const openCommentModalForComment = (commentId) => {
|
|||
commentBodyInput && (commentBodyInput.value = comment.body || "");
|
||||
commentReplyInput && (commentReplyInput.value = "");
|
||||
if (commentModalSubtitle) {
|
||||
commentModalSubtitle.textContent = `Создан: ${formatDateTime(comment.createdAt)} · Изменён: ${formatDateTime(comment.updatedAt)}`;
|
||||
commentModalSubtitle.textContent = comment.id || "BIM-COMMENT";
|
||||
}
|
||||
if (commentModalEditedMeta) {
|
||||
commentModalEditedMeta.textContent = `Последнее редактирование: ${formatDateTime(comment.updatedAt || comment.createdAt)}`;
|
||||
}
|
||||
if (commentModalError) commentModalError.textContent = "";
|
||||
resetCommentModalAttachments();
|
||||
commentDraftSubitems = Array.isArray(comment.subitems)
|
||||
? comment.subitems.map((item) => ({ ...item }))
|
||||
: [];
|
||||
renderCommentSubitems();
|
||||
renderCommentThread(comment);
|
||||
commentModalBackdrop?.classList.remove("hidden");
|
||||
commentModal.classList.remove("hidden");
|
||||
|
|
@ -1049,39 +1163,58 @@ const closeCommentModal = () => {
|
|||
renderCommentTargets();
|
||||
};
|
||||
|
||||
const buildCommentPayload = () => ({
|
||||
...(commentContextTarget || {}),
|
||||
title: commentTitleInput?.value?.trim() || "",
|
||||
body: commentBodyInput?.value?.trim() || "",
|
||||
attachments: commentDraftAttachments,
|
||||
});
|
||||
const normalizedSubitemsDraft = () => (
|
||||
(commentDraftSubitems || [])
|
||||
.map((item) => ({
|
||||
id: item.id || `sub_${Date.now()}_${Math.random().toString(36).slice(2)}`,
|
||||
title: String(item.title || "").trim(),
|
||||
done: !!item.done,
|
||||
}))
|
||||
.filter((item) => item.title)
|
||||
);
|
||||
|
||||
const buildCommentPayload = ({ title, body, replyBody } = {}) => {
|
||||
const finalBody = body || replyBody || "";
|
||||
return {
|
||||
...(commentContextTarget || {}),
|
||||
title: title || (finalBody ? finalBody.slice(0, 80) : "Комментарий"),
|
||||
body: finalBody,
|
||||
attachments: [...commentDraftAttachments, ...commentReplyAttachments].slice(0, 8),
|
||||
subitems: normalizedSubitemsDraft(),
|
||||
};
|
||||
};
|
||||
|
||||
const applyCommentModal = async () => {
|
||||
if (isGuestMode()) return;
|
||||
const title = commentTitleInput?.value?.trim() || "";
|
||||
const body = commentBodyInput?.value?.trim() || "";
|
||||
const replyBody = commentReplyInput?.value?.trim() || "";
|
||||
if (!title && !body && commentModalMode === "create") {
|
||||
if (commentModalError) commentModalError.textContent = "Заполните тему или описание";
|
||||
if (!title && !body && !replyBody && !commentDraftAttachments.length && !commentReplyAttachments.length && !commentDraftSubitems.length && commentModalMode === "create") {
|
||||
if (commentModalError) commentModalError.textContent = "Добавьте заголовок, описание, комментарий или файл";
|
||||
return;
|
||||
}
|
||||
if (commentApplyButton) {
|
||||
commentApplyButton.disabled = true;
|
||||
commentApplyButton.textContent = "Сохранение...";
|
||||
}
|
||||
if (commentApplyInlineButton) {
|
||||
commentApplyInlineButton.disabled = true;
|
||||
}
|
||||
try {
|
||||
let payload = null;
|
||||
if (commentModalMode === "create") {
|
||||
payload = await fetchJSON(COMMENTS_API, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(buildCommentPayload()),
|
||||
body: JSON.stringify(buildCommentPayload({ title, body, replyBody })),
|
||||
});
|
||||
} else if (commentModalCommentId) {
|
||||
const original = commentRecords.find((item) => item.id === commentModalCommentId);
|
||||
const subitems = normalizedSubitemsDraft();
|
||||
const patchPayload = {};
|
||||
if (!original || title !== (original.title || "")) patchPayload.title = title;
|
||||
if (!original || body !== (original.body || "")) patchPayload.body = body;
|
||||
if (JSON.stringify(subitems) !== JSON.stringify(original?.subitems || [])) patchPayload.subitems = subitems;
|
||||
if (replyBody || commentReplyAttachments.length) {
|
||||
patchPayload.message = {
|
||||
body: replyBody,
|
||||
|
|
@ -1117,6 +1250,9 @@ const applyCommentModal = async () => {
|
|||
commentApplyButton.disabled = false;
|
||||
commentApplyButton.textContent = "Применить";
|
||||
}
|
||||
if (commentApplyInlineButton) {
|
||||
commentApplyInlineButton.disabled = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -4941,23 +5077,59 @@ const loadProjectSnapshot = async (project) => {
|
|||
commentModalClose?.addEventListener("click", closeCommentModal);
|
||||
commentCancelButton?.addEventListener("click", closeCommentModal);
|
||||
commentApplyButton?.addEventListener("click", applyCommentModal);
|
||||
commentApplyInlineButton?.addEventListener("click", applyCommentModal);
|
||||
commentModalBackdrop?.addEventListener("click", (event) => {
|
||||
if (event.target === commentModalBackdrop) closeCommentModal();
|
||||
});
|
||||
commentAttachButton?.addEventListener("click", () => commentAttachmentInput?.click());
|
||||
commentReplyAttachButton?.addEventListener("click", () => commentReplyAttachmentInput?.click());
|
||||
commentAddSubitemButton?.addEventListener("click", () => {
|
||||
commentDraftSubitems.push({
|
||||
id: `sub_${Date.now()}_${Math.random().toString(36).slice(2)}`,
|
||||
title: "",
|
||||
done: false,
|
||||
});
|
||||
renderCommentSubitems();
|
||||
const inputs = commentSubitemsList?.querySelectorAll?.(".ops-comment-subitem input[type='text']");
|
||||
inputs?.[inputs.length - 1]?.focus?.();
|
||||
});
|
||||
commentAttachmentInput?.addEventListener("change", async (event) => {
|
||||
const files = await readImageFiles(event.target.files);
|
||||
const files = await readAttachmentFiles(event.target.files);
|
||||
commentDraftAttachments = [...commentDraftAttachments, ...files].slice(0, 8);
|
||||
event.target.value = "";
|
||||
renderModalAttachmentInputs();
|
||||
});
|
||||
commentReplyAttachmentInput?.addEventListener("change", async (event) => {
|
||||
const files = await readImageFiles(event.target.files);
|
||||
const files = await readAttachmentFiles(event.target.files);
|
||||
commentReplyAttachments = [...commentReplyAttachments, ...files].slice(0, 8);
|
||||
event.target.value = "";
|
||||
renderModalAttachmentInputs();
|
||||
});
|
||||
if (commentDropzone) {
|
||||
commentDropzone.addEventListener("click", (event) => {
|
||||
if (event.target?.closest?.("button,input,.comment-attachment-thumb")) return;
|
||||
commentAttachmentInput?.click();
|
||||
});
|
||||
["dragenter", "dragover"].forEach((type) => {
|
||||
commentDropzone.addEventListener(type, (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
commentDropzone.classList.add("drag-over");
|
||||
});
|
||||
});
|
||||
["dragleave", "drop"].forEach((type) => {
|
||||
commentDropzone.addEventListener(type, (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
commentDropzone.classList.remove("drag-over");
|
||||
});
|
||||
});
|
||||
commentDropzone.addEventListener("drop", async (event) => {
|
||||
const files = await readAttachmentFiles(event.dataTransfer?.files);
|
||||
commentDraftAttachments = [...commentDraftAttachments, ...files].slice(0, 8);
|
||||
renderModalAttachmentInputs();
|
||||
});
|
||||
}
|
||||
if (!isGuestMode()) {
|
||||
loadProjectsList().catch(() => {
|
||||
templatesMenu?.setData({ templates: templateFallbacks, projects: [], error: "API недоступно" });
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1578,22 +1578,47 @@ const sanitizeCommentAttachments = (value) => {
|
|||
return [];
|
||||
}
|
||||
const dataUrl = typeof item.dataUrl === "string" ? item.dataUrl : "";
|
||||
if (!/^data:image\/(png|jpe?g|webp|gif);base64,/i.test(dataUrl)) {
|
||||
if (!/^data:[^;,]+\/?[^;,]*;base64,/i.test(dataUrl)) {
|
||||
return [];
|
||||
}
|
||||
if (dataUrl.length > 4_500_000) {
|
||||
const size = Number(item.size);
|
||||
if (Number.isFinite(size) && size > 50 * 1024 * 1024) {
|
||||
return [];
|
||||
}
|
||||
if (dataUrl.length > 70_000_000) {
|
||||
return [];
|
||||
}
|
||||
return [{
|
||||
id: stringOrNull(item.id) || `att_${randomBase64Url(8)}`,
|
||||
name: sanitizeFilename(item.name || "image", "image"),
|
||||
type: stringOrNull(item.type) || "image",
|
||||
size: Number.isFinite(Number(item.size)) ? Number(item.size) : null,
|
||||
name: sanitizeFilename(item.name || "file", "file"),
|
||||
type: stringOrNull(item.type) || "application/octet-stream",
|
||||
size: Number.isFinite(size) ? size : null,
|
||||
dataUrl
|
||||
}];
|
||||
});
|
||||
};
|
||||
|
||||
const sanitizeCommentSubitems = (value) => {
|
||||
if (!Array.isArray(value)) {
|
||||
return [];
|
||||
}
|
||||
return value.slice(0, 100).flatMap((item) => {
|
||||
if (!item || typeof item !== "object") {
|
||||
return [];
|
||||
}
|
||||
const title = sanitizeCommentText(item.title ?? item.text ?? item.name, 300);
|
||||
if (!title) {
|
||||
return [];
|
||||
}
|
||||
return [{
|
||||
id: stringOrNull(item.id) || `sub_${randomBase64Url(8)}`,
|
||||
title,
|
||||
done: item.done === true,
|
||||
createdAt: stringOrNull(item.createdAt) || nowIso()
|
||||
}];
|
||||
});
|
||||
};
|
||||
|
||||
const resolveCommentSource = (payload = {}) => {
|
||||
const identity = resolveAssetIdentityFromPayload(payload);
|
||||
const rawSrc = stringOrNull(payload.src) ||
|
||||
|
|
@ -1649,6 +1674,7 @@ const publicComment = (comment) => ({
|
|||
objectId: comment.objectId || null,
|
||||
title: comment.title || "",
|
||||
body: comment.body || "",
|
||||
subitems: Array.isArray(comment.subitems) ? comment.subitems : [],
|
||||
worldPos: comment.worldPos || null,
|
||||
createdAt: comment.createdAt,
|
||||
updatedAt: comment.updatedAt,
|
||||
|
|
@ -1722,6 +1748,7 @@ const handleCreateComment = async (req, res) => {
|
|||
objectId: stringOrNull(payload?.objectId),
|
||||
title: title || "Комментарий",
|
||||
body,
|
||||
subitems: sanitizeCommentSubitems(payload?.subitems),
|
||||
worldPos,
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
|
|
@ -1773,11 +1800,14 @@ const handlePatchComment = async (req, res, commentId) => {
|
|||
}
|
||||
const hasTitle = Object.prototype.hasOwnProperty.call(payload, "title");
|
||||
const hasBody = Object.prototype.hasOwnProperty.call(payload, "body");
|
||||
const hasSubitems = Object.prototype.hasOwnProperty.call(payload, "subitems");
|
||||
const nextTitle = hasTitle ? sanitizeCommentText(payload.title, 180) || comment.title || "Комментарий" : comment.title;
|
||||
const nextBody = hasBody ? sanitizeCommentText(payload.body, 8000) : comment.body;
|
||||
const nextSubitems = hasSubitems ? sanitizeCommentSubitems(payload.subitems) : (Array.isArray(comment.subitems) ? comment.subitems : []);
|
||||
const titleChanged = hasTitle && nextTitle !== comment.title;
|
||||
const bodyChanged = hasBody && nextBody !== comment.body;
|
||||
if ((titleChanged || bodyChanged) && !isOwner) {
|
||||
const subitemsChanged = hasSubitems && JSON.stringify(nextSubitems) !== JSON.stringify(comment.subitems || []);
|
||||
if ((titleChanged || bodyChanged || subitemsChanged) && !isOwner) {
|
||||
sendJSON(res, 403, {ok: false, error: "comment_owner_required"});
|
||||
return;
|
||||
}
|
||||
|
|
@ -1787,6 +1817,9 @@ const handlePatchComment = async (req, res, commentId) => {
|
|||
if (bodyChanged) {
|
||||
comment.body = nextBody;
|
||||
}
|
||||
if (subitemsChanged) {
|
||||
comment.subitems = nextSubitems;
|
||||
}
|
||||
const nextMessage = buildCommentMessage(payload?.message || null, user);
|
||||
if (nextMessage) {
|
||||
comment.messages = Array.isArray(comment.messages) ? comment.messages : [];
|
||||
|
|
|
|||
Loading…
Reference in New Issue