@brightspot/ui 3.0.1 → 5.0.1

package/src/legacy/tool-ui/src/Conversation.css

@@ -0,0 +1,325 @@
+.Conversation {
+  --post-form-h: 198px; /* this magic number is the approx height of the post form to reduce the jittering of the height while the RTE renders. */
+  @apply !col-[fullbleed-start_/_fullbleed-end] grid min-h-0 grid-rows-[minmax(0px,1fr)_minmax(var(--post-form-h),auto)];
+}
+
+.Conversation-pinned {
+  @apply border-b border-b-gray-200;
+}
+
+.Conversation-earlier {
+  @apply contents;
+
+  > .Conversation {
+    @apply contents;
+  }
+
+  .Conversation-posts {
+    @apply contents;
+
+    .Conversation-post {
+      @apply last:border-b;
+    }
+  }
+
+  &:has(> .Button) {
+    @apply flex justify-center border-b border-b-gray-200 py-2;
+
+    .Button {
+      @apply btu-button btu-button-fill-none btu-button-primary btu-button-sm text-sm before:btu-icon before:btu-icon-history [&:not(.Popup-content_>)]:btu-button-fill-none;
+    }
+  }
+}
+
+.Conversation-date {
+  @apply sticky top-0 z-[1] content-center border-b border-b-gray-200 bg-gray-50 px-4 py-3 text-xs font-medium text-gray-500;
+}
+
+.Conversation-post,
+.Conversation-reply-main {
+  @apply grid grid-cols-[auto_minmax(0px,1fr)] grid-rows-[auto_1fr] gap-2 p-4 @container hover:bg-gray-50 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-b-gray-200;
+
+  &.is-pinned {
+    @apply bg-warning-25 hover:bg-warning-50;
+
+    .Conversation-pin {
+      @apply btu-button-warning;
+    }
+  }
+
+  &.is-resolved {
+    @apply bg-teal-50 hover:bg-teal-50;
+  }
+}
+
+.Conversation-posts.is-empty > .Conversation-context {
+  @apply m-4;
+}
+
+.Conversation-posts > .Message {
+  @apply m-4;
+}
+
+.Conversation-header {
+  @apply flex justify-between gap-4;
+}
+
+.Conversation-metadata {
+  @apply overflow-hidden;
+}
+
+.ContentEdit-right .Conversation-post.is-fielded {
+  .Conversation-avatar,
+  .Conversation-metadata,
+  .Conversation-context,
+  .Conversation-text {
+    @apply hover:cursor-pointer;
+  }
+}
+
+.Conversation-user {
+  @apply truncate text-sm font-medium text-gray-900;
+}
+
+.Conversation-time {
+  @apply inline text-xs text-gray-500;
+}
+
+.Conversation-position {
+  @apply ms-[0.375rem] inline text-xs font-normal text-gray-500;
+}
+
+.Conversation-post-workflowTransition {
+  @apply col-span-full flex items-center gap-2 text-xs text-gray-700;
+}
+
+.Conversation-workflowStateIcon {
+  @apply flex before:btu-icon before:btu-icon-arrow-right before:font-semibold before:text-gray-500 before:btu-icon-xs;
+}
+
+.Conversation-text {
+  @apply col-span-full break-words text-sm text-gray-900 after:text-xs after:italic after:text-gray-500 [&[data-edited]]:after:[content:'_'_attr(data-edited)];
+
+  a:has(img) {
+    @apply mx-auto my-2 block max-w-fit rounded-lg rounded-tl-none border border-solid border-gray-200 bg-white px-3 py-2 hover:bg-gray-100;
+
+    img {
+      @apply max-h-[50dvh] rounded-lg @lg:max-w-[75cqi];
+    }
+  }
+
+  ol {
+    @apply list-decimal ps-4;
+  }
+
+  ul {
+    @apply list-disc ps-4;
+  }
+
+  /* TODO: remove when Highlight.less gets converted? */
+  .Highlight {
+    @apply rounded bg-primary-50 text-primary-800;
+  }
+}
+
+.Conversation-reply {
+  @apply btu-button btu-button-fill-none btu-button-primary btu-button-sm col-span-2 mt-2 justify-self-start btu-button-container-none after:btu-icon after:btu-icon-chevron-right rtl:after:btu-icon-chevron-left after:pt-[.15rem];
+}
+
+/* TODO: revisit newPost when ProseMirror is styled */
+.Conversation-newPost {
+  @apply flex flex-col items-end gap-4 border-t border-t-gray-200 p-4;
+}
+
+.Conversation-newPost .ProseMirrorContainer {
+  @apply bg-white;
+}
+
+.Conversation-newPostButton {
+  @apply btu-button btu-button-text-hidden btu-button-primary btu-button-sm before:btu-icon before:btu-icon-send-horizontal;
+}
+
+/* Conversation comment in workflow popup */
+.Conversation-workflow {
+  @apply hidden;
+}
+
+/*****************************/
+/****** One-off styles *******/
+/*****************************/
+
+/* Right rail placement */
+.ContentEdit-right.is-visible {
+  &:has(.Conversation) {
+    @apply grid grid-rows-[auto_minmax(0px,1fr)];
+
+    > .frame {
+      @apply contents;
+    }
+  }
+
+  .Conversation-posts {
+    @apply overflow-y-auto;
+  }
+}
+
+.Conversation-delete.Dropdown-item {
+  @apply text-error-700;
+}
+
+.Conversation-pinned-by {
+  @apply col-span-full text-xs font-medium text-warning-700 before:btu-icon before:btu-icon-pin before:me-1 before:rotate-[50deg];
+}
+
+/* Contextual comments */
+.Popup[name='Contextual-comments'] {
+  .Conversation-earlier:has(> .Button) {
+    @apply my-0 p-4;
+
+    .Button {
+      @apply btu-button btu-button-gray z-[2];
+    }
+  }
+
+  .Conversation-posts {
+    @apply max-h-[calc(100vh-3.3rem)] overflow-y-auto;
+  }
+
+  .Conversation-posts:has(.Conversation-pinned-container) {
+    .Conversation-date {
+      @apply top-11;
+    }
+  }
+
+  .Conversation-pinned-container {
+    @apply sticky top-0 z-10;
+
+    h1 {
+      @apply btu-heading-6 flex cursor-pointer items-center justify-between border-b border-b-gray-200 bg-white px-4 py-2 after:btu-button after:btu-button-text-hidden after:btu-button-fill-none after:btu-button-gray after:btu-button-xs after:btu-icon after:btu-icon-chevron-down touch-device:after:btu-button-sm;
+    }
+
+    .Conversation-pinned-list {
+      @apply hidden;
+    }
+  }
+
+  .Conversation-pinned-container.is-expanded {
+    h1 {
+      @apply after:btu-icon-chevron-up;
+    }
+
+    .Conversation-pinned-list {
+      @apply block max-h-[300px] overflow-y-auto;
+    }
+  }
+
+  .Conversation {
+    @apply flex min-h-max flex-col;
+  }
+}
+
+.Popup[name='conversation-reply'] {
+  .Conversation {
+    @apply flex flex-col;
+
+    .Conversation-posts {
+      @apply overflow-y-visible;
+    }
+  }
+}
+
+.Conversation-context {
+  @apply col-span-full text-xs font-normal text-gray-500;
+
+  span:not(:first-child):not(:empty) {
+    @apply before:[content:'_•_'];
+  }
+}
+
+.Conversation-actionsToggle {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs bg-white before:btu-icon before:btu-icon-ellipsis touch-device:btu-button-sm before:btu-icon-md;
+}
+
+.Conversation-resolve,
+.Conversation-unresolve {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs bg-white touch-device:btu-button-sm;
+}
+
+.Conversation-resolve {
+  @apply hover:text-success-700;
+}
+
+.Conversation-unresolve {
+  @apply text-success-700;
+}
+
+.Dropdown.is-open {
+  @apply Dropdown-is-open;
+}
+
+/* Reply popup */
+.Popup-content {
+  .Conversation {
+    .Conversation-posts {
+      @apply overflow-y-auto;
+    }
+  }
+
+  .Widget-title + .Conversation-posts {
+    @apply !col-[fullbleed-start_/_fullbleed-end];
+  }
+
+  .Conversation-reply-date {
+    @apply me-1 inline text-xs text-gray-500;
+  }
+
+  .Conversation-reply-main {
+    @apply bg-primary-50;
+
+    .Conversation-user {
+      @apply text-primary-800;
+    }
+  }
+
+  .Conversation-reply-count {
+    @apply border-b border-b-gray-200 p-4 text-sm font-medium text-gray-500;
+  }
+
+  .Conversation-earlier:has(> .Button) {
+    @apply -my-[18px] border-b-0 p-0;
+
+    .Button {
+      @apply btu-button btu-button-gray z-[2];
+    }
+  }
+}
+
+.Conversation-action-container {
+  @apply flex gap-2;
+}
+
+.Conversation-action-buttons {
+  @apply flex items-center gap-2;
+}
+
+.Conversation-resolveThread {
+  @apply btu-button btu-button-outline btu-button-fill-none btu-button-gray btu-button-sm after:btu-icon after:btu-icon-circle-check-big;
+}
+
+.Conversations-resolved-toggle {
+  @apply Checkbox-toggle me-2;
+}
+
+.Conversation-action-container
+  .Conversation-resolve.is-animating
+  btu-icon[symbol='check-circle']
+  svg
+  path:last-of-type {
+  @apply stroke-primary-600 [animation:animateDash_1s_ease-in_forwards] [stroke-dasharray:100] [stroke-dashoffset:100];
+}
+
+@keyframes animateDash {
+  to {
+    stroke-dashoffset: 0;
+  }
+}