@brightspot/ui 3.0.0 → 3.0.1-cms-ui-migration.1

package/src/legacy/tool-ui/src/main/webapp/v4/widget/Conversation.less

@@ -0,0 +1,537 @@
+@import (reference) '../IconButton.less';
+
+.CIG-comments {
+  .Icon.is-s;
+  .IconButton;
+
+  --IconButton-name: 'chat';
+
+  margin-left: var(--gap-xs);
+  order: 1;
+  text-decoration: none;
+  visibility: hidden;
+}
+
+.Conversation-workflow {
+  display: none;
+  padding: var(--gap-m) var(--gap-m) 0;
+
+  .ProseMirrorContainer {
+    min-height: 275px;
+    padding-bottom: 0;
+  }
+}
+
+.Conversation-add-comment {
+  margin-top: var(--gap-m);
+  width: 100%;
+}
+
+.Popup[name^='conversation-edit-post'] {
+  .Popup-close {
+    background: var(--color-gray2);
+    left: calc(
+      var(--Tether-rl) + var(--Tether-rw) - var(--gap-l) - var(--gap-m) -
+        var(--Icon-size)
+    );
+  }
+
+  .Widget-actions {
+    left: calc(
+      var(--Tether-rl) + var(--Tether-rw) - (var(--Icon-size) * 2) -
+        (var(--gap-xl) * 2) - var(--gap-m)
+    );
+    padding-left: var(--gap-l);
+    position: fixed;
+
+    .Widget-actionsToggle {
+      .IconButton();
+
+      background: linear-gradient(
+        to right,
+        rgb(255 255 255 / 0%),
+        var(--color-gray2) calc(var(--gap-xs) + 4px)
+      );
+    }
+  }
+}
+
+.Popup[name^='conversation-edit-post-history'] .Widget-actions {
+  display: none;
+}
+
+.Popup-content {
+  .Conversation-earlier {
+    .Conversation-post {
+      &:last-child {
+        border-bottom: 1px solid var(--color-gray2);
+      }
+    }
+  }
+}
+
+.ContentEdit-right {
+  .Conversation {
+    display: grid;
+    grid-template-rows: 1fr auto;
+    height: 100%;
+
+    > .Conversation-posts {
+      overflow-y: scroll;
+      padding: 0 var(--Widget-padding);
+    }
+
+    .Message {
+      margin: var(--gap-m) 0;
+    }
+  }
+
+  .Conversation-pinned {
+    margin-bottom: var(--gap-m);
+    padding: var(--gap-m);
+  }
+
+  .Conversation-date {
+    top: 0;
+
+    &:first-child {
+      border-top: none;
+    }
+  }
+
+  .Conversation-avatar {
+    top: var(--gap-m);
+  }
+
+  .Conversation-header {
+    padding-left: calc(var(--Avatar-size));
+  }
+
+  .Conversation-user {
+    .Text.is-s;
+
+    display: block;
+    margin: unset;
+    padding-top: var(--gap-xs);
+  }
+
+  .Conversation-text {
+    margin-top: var(--gap-s);
+
+    img {
+      max-width: 100%;
+    }
+  }
+
+  .Conversation-post {
+    background: var(--color-gray1);
+    margin: var(--gap-m) 0;
+    padding: var(--gap-s) var(--gap-m) var(--gap-m) var(--gap-m);
+
+    &:not(:last-child) {
+      border-bottom: 0;
+    }
+  }
+
+  .Conversation-newPost {
+    margin: unset;
+  }
+}
+
+.Conversation-pinned {
+  background: var(--color-gray1);
+  margin: 0 calc(0px - var(--Widget-padding));
+  padding: var(--Widget-padding);
+
+  &-reply {
+    margin-bottom: var(--Widget-padding);
+
+    .Conversation-post:first-child {
+      margin-top: 0;
+    }
+  }
+}
+
+.Conversation-earlier {
+  .Button:not(.Conversation-actionsToggle) {
+    margin: var(--Widget-padding) 0;
+  }
+}
+
+.Conversation-date {
+  .Text.is-s;
+
+  background: var(--color-white);
+  border-color: var(--color-gray2);
+  border-style: solid;
+  border-width: 1px 0;
+  font-weight: bold;
+  margin: 0 calc(0px - var(--Widget-padding));
+  padding: var(--gap-m) var(--gap-l);
+  position: sticky;
+  top: calc(var(--gap-m) * 2 + var(--Text-height));
+  z-index: 11;
+}
+
+.Conversation-post {
+  border-bottom: 1px solid var(--color-gray2);
+  padding: var(--gap-m) var(--gap-m) var(--gap-m)
+    calc(var(--Avatar-size) + var(--gap-l));
+  position: relative;
+
+  &.is-pinned > .Conversation-avatar {
+    top: calc((var(--gap-m) * 3) + var(--gap-s));
+  }
+
+  &:last-child,
+  &:has(+ .Conversation-date) {
+    border-bottom: none;
+  }
+
+  &:first-child {
+    margin-top: var(--gap-l);
+  }
+}
+
+.Conversation-avatar {
+  left: var(--gap-s);
+  position: absolute;
+  top: calc(var(--gap-m) * 2);
+}
+
+.Conversation-header {
+  align-items: center;
+  display: flex;
+  gap: var(--gap-s);
+}
+
+.Conversation-metadata {
+  flex-grow: 1;
+  overflow: hidden;
+}
+
+.Conversation-user {
+  display: inline;
+  font-weight: bold;
+  margin-right: var(--gap-s);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.Conversation-time {
+  margin-right: var(--gap-xs);
+}
+
+.Conversation-time,
+.Conversation-position {
+  .Text.is-s;
+
+  color: var(--color-gray5);
+  display: inline;
+}
+
+.Conversation-edit,
+.Conversation-reply,
+.Conversation-resolve,
+.Conversation-unresolve,
+.Conversation-pin {
+  .IconButton;
+
+  color: var(--color-black);
+}
+
+.Conversation-edit {
+  --IconButton-name: 'edit';
+}
+
+.Conversation-reply {
+  --IconButton-name: 'reply';
+
+  align-items: center;
+  display: inline-flex;
+  flex-direction: row-reverse;
+  text-decoration: none;
+  width: auto;
+
+  &::before {
+    height: calc(var(--gap-s) * 2 + var(--Icon-size));
+    padding: var(--gap-s);
+    width: calc(var(--gap-s) * 2 + var(--Icon-size));
+  }
+
+  &:not(:empty) {
+    padding-left: var(--gap-s);
+  }
+
+  &-main {
+    padding: var(--gap-m) var(--gap-m) var(--gap-m)
+      calc(var(--Avatar-size) + var(--gap-l));
+    position: relative;
+  }
+
+  &-date {
+    color: var(--color-gray5);
+    display: inline;
+    font-size: var(--fontSize-s);
+    margin-right: var(--gap-xs);
+  }
+
+  &-count {
+    border-bottom: 1px solid var(--color-gray3);
+    margin: var(--gap-m) calc(0px - var(--Widget-padding));
+
+    &-text {
+      color: var(--color-gray5);
+      font-weight: bold;
+      margin: var(--gap-m) 0;
+      padding: 0 var(--gap-l);
+    }
+  }
+}
+
+.Conversation-pin {
+  --IconButton-name: 'push_pin';
+}
+
+.Conversation-text {
+  margin-top: calc(0px - var(--gap-s) + var(--gap-xs));
+
+  b {
+    font-weight: bold;
+  }
+
+  i {
+    font-style: italic;
+  }
+
+  img {
+    max-height: 30vh;
+    max-width: 50%;
+  }
+
+  u {
+    text-decoration: underline;
+  }
+
+  s {
+    text-decoration: line-through;
+  }
+
+  ol,
+  ul {
+    margin-left: var(--gap-l);
+  }
+
+  ol {
+    list-style: decimal;
+  }
+
+  ul {
+    list-style: disc;
+  }
+
+  &[data-edited]::after {
+    .Text.is-s;
+
+    color: var(--color-gray5);
+    content: ' ' attr(data-edited);
+    font-style: italic;
+  }
+
+  &[data-workflow-transition]::after {
+    .Text.is-s;
+
+    color: var(--color-gray5);
+    content: ' ' attr(data-old-workflow-state) ' ' 'trending_flat' ' '
+      attr(data-new-workflow-state);
+  }
+}
+
+.Conversation-newPost {
+  background: var(--color-white);
+  border-top: 1px solid var(--color-gray2);
+  margin: var(--gap-l) calc(0px - var(--Widget-padding))
+    calc(0px - var(--Widget-padding)) calc(0px - var(--Widget-padding));
+  padding: var(--Widget-padding);
+
+  .CIG-small {
+    margin-top: 0;
+  }
+
+  .Mention .CIG-wordCount {
+    display: none;
+  }
+}
+
+.Conversation-post-workflowTransition {
+  .Text.is-s;
+
+  color: var(--color-gray6);
+  font-size: var(--fontSize-s);
+  line-height: var(--lineHeight-m);
+  padding: var(--gap-xs) calc(0px - var(--iconSize-s) * 3 - var(--gap-s) * 6) 0
+    0;
+}
+
+.Conversation-workflowStateIcon::before {
+  .Icon;
+
+  content: ' ' 'trending_flat' ' ';
+  padding: calc(var(--gap-xs) - 2px) var(--gap-xs) 0;
+}
+
+.Conversation-newPostButton {
+  .Button.is-dominant;
+}
+
+.Popup[name='Contextual-comments'] {
+  &:has(.Conversation-pinned-container) {
+    .Conversation-date {
+      top: calc(var(--gap-m) * 2 + var(--Text-height));
+    }
+  }
+
+  .Conversation {
+    margin-top: 0;
+  }
+
+  .Conversation-avatar {
+    top: calc(var(--gap-m) * 3);
+  }
+
+  .Conversation-date {
+    top: calc(var(--Text-height) + var(--gap-xs));
+  }
+
+  .Conversation-pinned-by {
+    margin: 0;
+  }
+
+  .Conversation-pinned-container {
+    margin-bottom: calc(var(--gap-m) * 3);
+
+    h1 {
+      background: var(--color-gray2);
+      color: var(--color-black);
+      cursor: pointer;
+      font-weight: 700;
+      padding: var(--gap-m);
+      position: relative;
+
+      &::after {
+        .Icon;
+
+        content: 'expand_more';
+      }
+    }
+
+    .Conversation-pinned-list {
+      display: none;
+    }
+  }
+
+  .Conversation-pinned-container.is-expanded {
+    h1 {
+      cursor: pointer;
+      position: relative;
+
+      &::after {
+        .Icon;
+
+        content: 'expand_less';
+      }
+    }
+
+    .Conversation-pinned-list {
+      display: block;
+      overflow-y: hidden;
+    }
+  }
+
+  .Popup-content {
+    max-height: 580px;
+    max-width: 100%;
+    width: auto;
+  }
+}
+
+.Conversation-pinned-by {
+  color: var(--color-yellow4);
+  font-size: var(--fontSize-m);
+  margin: var(--gap-s) 0;
+
+  &::before {
+    .Icon;
+
+    --Icon-fill: 'FILL' 0;
+
+    content: 'push_pin';
+    font-size: var(--fontSize-l);
+    padding-top: var(--gap-xs);
+    transform: rotate(45deg);
+  }
+}
+
+.Conversation-context {
+  color: var(--color-gray5);
+  font-size: var(--fontSize-xs);
+
+  span:not(:first-child) {
+    &::before {
+      content: ' • ';
+    }
+  }
+}
+
+.Conversation-action-container {
+  .Dropdown .Dropdown-item {
+    padding: var(--gap-m);
+  }
+
+  .Conversation-pin::before,
+  .Conversation-edit::before {
+    content: none;
+  }
+}
+
+.Conversation-resolve {
+  --IconButton-name: 'check_small';
+}
+
+.Conversation-unresolve {
+  --IconButton-name: 'check_circle';
+}
+
+.Conversation-posts .Widget-filters {
+  margin-top: 0;
+}
+
+.Conversations-resolved-toggle {
+  .Checkbox;
+  .Checkbox.is-toggle;
+
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &.is-active {
+    text-decoration: none;
+
+    &::after {
+      color: var(--Link-hoverColor);
+      content: 'toggle_on';
+    }
+
+    &:hover::before {
+      background: var(--Link-hoverColor);
+    }
+  }
+}
+
+.Conversation-action-buttons {
+  display: flex;
+  gap: var(--gap-m);
+}

package/src/legacy/tool-ui/src/main/webapp/v4/widget/CopySiteWidget.less

@@ -0,0 +1,13 @@
+.CopySiteWidget {
+  & .addButtonContainer {
+    display: none;
+  }
+
+  [data-field-name='configurationTypeId'] {
+    display: none;
+  }
+
+  [data-field-name='count'] {
+    display: none;
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/widget/FormSubmission.less

@@ -0,0 +1,3 @@
+div[data-tab='Submissions'] > div > div > ul.pagination > li > a.button {
+  border: 0;
+}

package/src/legacy/tool-ui/src/main/webapp/v4/widget/LiveBlog.less

@@ -0,0 +1,158 @@
+.LiveBlogPostList {
+  background-color: var(--color-white);
+  box-shadow: var(--shadow-1);
+  display: grid;
+  grid-auto-rows: auto auto 1fr;
+  position: relative;
+
+  &-titleBar {
+    display: flex;
+    flex-grow: 1;
+    order: -1;
+    padding: 0 var(--gap-l) 0;
+    width: 100%;
+  }
+
+  &-title {
+    font-weight: bold;
+    margin-left: calc(0px - var(--gap-l));
+    order: -4;
+    overflow: hidden;
+    padding: var(--gap-m) var(--gap-m) var(--gap-m) var(--gap-l);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: auto;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  &-controls {
+    .Link.is-black;
+
+    align-items: center;
+    display: flex;
+    flex: 1;
+    order: -3;
+    width: auto;
+
+    li:not(:first-child) {
+      margin-left: var(--gap-m);
+    }
+  }
+
+  &-filters {
+    --Input-focusBackground: var(--color-gray2);
+
+    background: var(--color-gray1);
+    border-color: var(--color-gray2);
+    border-style: solid;
+    border-width: 1px 0;
+    margin-top: -1px;
+    order: -1;
+    position: relative;
+
+    .Widget-title {
+      margin-bottom: var(--gap-xs);
+    }
+
+    .searchInput input {
+      margin-top: var(--gap-l);
+    }
+
+    .searchInput input,
+    .ComboInput {
+      margin-bottom: var(--gap-l);
+    }
+
+    .ComboInput::before,
+    input[type] {
+      border-color: var(--color-gray3);
+    }
+  }
+
+  tr.is-new-content > td {
+    animation: fade 10s forwards;
+  }
+
+  tr.is-new-content {
+    animation: fade 10s forwards;
+    border: solid 1px;
+    box-shadow: var(--shadow-2);
+  }
+
+  .LinkList tbody {
+    padding: 0 var(--gap-s) 0;
+  }
+
+  .LinkList tr {
+    border: solid 1px;
+    border-color: var(--color-gray2);
+    box-shadow: var(--shadow-1);
+    margin-bottom: var(--gap-s);
+    margin-top: var(--gap-s);
+    padding-right: calc(var(--LinkList-imageSize) + var(--gap-l));
+  }
+
+  .LinkList tr.is-pin {
+    background: var(--color-gray1);
+    box-shadow: none;
+  }
+
+  .LinkList tr.is-buttoned {
+    width: auto;
+  }
+
+  .LinkList-button {
+    right: calc(var(--gap-xl) / 2);
+  }
+
+  .LinkList-main {
+    padding-left: var(--gap-m);
+  }
+
+  .LinkList-image {
+    padding-left: var(--gap-m);
+    width: calc(var(--gap-m) + 40px);
+  }
+
+  .date-time {
+    padding-left: var(--gap-m);
+  }
+
+  @keyframes fade {
+    from {
+      border-color: var(--color-green5);
+      color: var(--color-green5);
+    }
+
+    to {
+      border-color: var(--color-gray2);
+      color: var(--color-gray5);
+    }
+  }
+
+  &-button {
+    display: block;
+    text-align: center;
+  }
+}
+
+.LiveBlogPostList.is-collapsed {
+  height: calc(var(--gap-m) * 2 + var(--lineHeight-m));
+  overflow: hidden;
+}
+
+@media (@mq-m) {
+  .LiveBlogPostList.is-collapsible {
+    height: calc(
+      100vh - var(--Page-headerHeight) - var(--Icon-size) - (2 * var(--gap-m))
+    );
+  }
+
+  .LiveBlogPostList.is-collapsed {
+    height: auto;
+    overflow: auto;
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/widget/PitchAssignments.js

@@ -0,0 +1,25 @@
+import onFind from '../dom/onFind'
+import rtc from '../rtc/index'
+
+onFind(
+  '.Widget[data-internal-name="com.psddev.assign.widget.PitchAssignmentsWidget"]',
+  (widget) => {
+    const pitchId = widget
+      .closest('.ContentEdit[data-content-id]')
+      .getAttribute('data-content-id')
+
+    // Listen for Assignments RTC broadcast
+    rtc.receive('com.psddev.assign.AssignmentRtcBroadcast', (data) => {
+      if (data['pitchId'] === pitchId) {
+        let refreshButton = widget.querySelector(
+          '.AssignmentDeskWidget-refresh',
+        )
+        /* document.contains accounts for the nested popups/frames in the Assignment Desk UI, in which there are scenarios where
+          previously bound elements can be detached from the dom. */
+        if (document.contains(refreshButton)) {
+          refreshButton.click()
+        }
+      }
+    })
+  },
+)