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

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

@@ -0,0 +1,242 @@
+@keyframes AddAnimation {
+  0% {
+    background: var(--color-white);
+  }
+
+  65% {
+    background: var(--color-yellow2);
+  }
+
+  100% {
+    background: var(--color-white);
+  }
+}
+
+@keyframes RevealAllowedContainer {
+  from {
+    opacity: 0;
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1.025);
+  }
+}
+
+.Sortable-item.is-added {
+  animation-duration: 1000ms;
+  animation-fill-mode: forwards;
+  animation-name: AddAnimation;
+  animation-timing-function: ease-in-out;
+}
+
+.Sortable-drag.Sortable-selected,
+.Sortable-drag.Sortable-chosen {
+  --drag-count: 1;
+
+  align-items: center;
+  background: var(--color-blue5);
+  border-top: none !important;
+  box-shadow: var(--shadow-3);
+  display: flex;
+  justify-content: center;
+  list-style: none;
+  opacity: 0.9;
+  user-select: none;
+
+  &::before {
+    .Text.is-s;
+
+    background: none;
+    box-shadow: none;
+    color: var(--color-white);
+    content: 'Move ' counter(count) ' item' attr(item-suffix);
+    counter-reset: count var(--drag-count);
+    display: flex;
+    font-weight: bold;
+    line-height: unset;
+    margin: 0;
+    opacity: 1;
+    padding: 0;
+    position: relative;
+  }
+
+  * > {
+    display: none !important;
+  }
+}
+
+.Sortable-selected {
+  background-color: var(--color-blue2);
+  border: 2px solid var(--color-blue5);
+  opacity: 0.9;
+}
+
+.Sortable-ghost {
+  background: var(--color-blue5);
+}
+
+.Sortable-ghost > div:first-child {
+  color: var(--color-white);
+}
+
+.Sortable-allowedContainer {
+  &::before {
+    animation-duration: 350ms;
+    animation-fill-mode: forwards;
+    animation-name: RevealAllowedContainer;
+    animation-timing-function: ease-in-out;
+    background: rgb(178 215 248 / 40%);
+    border: 2px dotted rgb(196 227 255 / 80%);
+    border-radius: 5px;
+    bottom: calc(-1 * var(--gap-l));
+    content: '';
+    left: calc(-1 * var(--gap-l));
+    margin-top: calc(-1 * var(--gap-s));
+    mix-blend-mode: multiply;
+    pointer-events: none;
+    position: absolute;
+    right: calc(-1 * var(--gap-l));
+    top: 0;
+    z-index: 0;
+  }
+}
+
+.CIG-small .Sortable-allowedContainer::before {
+  top: var(--gap-xl);
+}
+
+.CIG-large .Sortable-allowedContainer::before {
+  top: 0;
+}
+
+/* Multi-Sortable Styles */
+
+.MultiSortable,
+.MultiSortable.is-collapsed {
+  flex-wrap: wrap;
+  position: relative;
+
+  /* RCIGs do not get this cursor because they use handles and the whole thing isn't draggable */
+  &:hover:not(.RCIG-item) {
+    cursor: move;
+  }
+}
+
+.MultiSortable-buttonToggle {
+  .Icon.is-s;
+  .IconButton;
+
+  --IconButton-name: 'low_priority';
+}
+
+.Sortable-item.is-focused .MultiSortable-buttonToggle {
+  display: none;
+}
+
+/* Styling for ContentEditDrawer items when hovered over a list */
+.Sortable.RCS-list,
+.Sortable.RCIG-list,
+.Sortable.CIG-row {
+  &:not([class*='ContentEditDrawer-widget-carousel-list']) {
+    .ContentEditDrawer-widget-carousel-list-item.Sortable-ghost {
+      .ContentEditDrawer-widget-carousel-list-item-selectButton {
+        display: none;
+      }
+
+      .ContentEditDrawer-widget-carousel-list-item-type {
+        display: none;
+      }
+
+      &.RCS-item {
+        &::before {
+          display: none;
+        }
+
+        .ContentEditDrawer-widget-carousel-list-item-title {
+          padding: var(--gap-m);
+
+          &::before {
+            display: none;
+          }
+        }
+      }
+
+      &.has-image {
+        background-color: transparent;
+        border: 0;
+
+        .ContentEditDrawer-widget-carousel-list-item-image {
+          height: 10em;
+        }
+      }
+
+      .ContentEditDrawer-widget-carousel-list-item-title {
+        background-color: var(--color-blue5);
+      }
+
+      .ContentSummary-info {
+        display: none;
+      }
+    }
+
+    .ContentEditDrawer-widget-carousel-list-item {
+      &.is-gridItem {
+        .ContentSelector-clear {
+          display: none;
+        }
+
+        .ContentSelector-search {
+          max-width: none;
+          width: calc(100% - var(--gap-s) * 3 - var(--Icon-size));
+
+          > figure {
+            width: 100%;
+
+            > img {
+              height: calc(var(--RCIG-itemHeight) - var(--RCIG-titleHeight));
+              object-fit: cover;
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
+
+    .ContentEditDrawer-widget-carousel-list-item {
+      &.is-listItem {
+        .ContentSelector-clear {
+          display: none;
+        }
+
+        .ContentSelector-search {
+          > figure > img {
+            max-height: 10em;
+          }
+        }
+
+        .inputContainer-bulkUpload {
+          display: none;
+        }
+      }
+
+      &.is-listItem.is-collapsed {
+        .ContentSelector-edit,
+        .ContentSelector-clear {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &[data-type='record'] {
+    &:not([class*='ContentEditDrawer-widget-carousel-list']) {
+      &:not([data-field='items']) {
+        .ContentEditDrawer-widget-carousel-list-item.Sortable-ghost {
+          display: none;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+.StandardForm {
+  &.is-locked .ActionBar {
+    display: none;
+  }
+
+  &.is-locked .ContentLockMessage-status {
+    bottom: 0;
+    left: 0;
+    position: sticky;
+    z-index: 100;
+  }
+}

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

@@ -0,0 +1,100 @@
+import onFind from './dom/onFind'
+import Cookies from 'js.cookie'
+
+onFind('.StyleEmbeddedContent-items > li', (content) => {
+  content.addEventListener('click', async (event) => {
+    let target = event.target
+    const isTemplateSelection = target.parentElement.classList.contains('Card')
+
+    if (target.parentElement.nodeName === 'LI' || isTemplateSelection) {
+      if (isTemplateSelection) {
+        target = target.parentElement
+      }
+
+      const data = target.dataset.addEmbeddedContentData
+      if (!data) return
+
+      const parsedData = JSON.parse(data)
+      const templateTypeId = parsedData.typeId
+      if (!templateTypeId) return
+
+      const addEmbeddedContentParams = target
+        .closest('.Popup')
+        .querySelector('.AddEmbeddedContent-params')
+      if (!addEmbeddedContentParams) return
+
+      const fieldName = addEmbeddedContentParams.dataset.fieldName
+      if (!fieldName) return
+
+      let url =
+        '/cms/update-recently-used?fieldName=' +
+        fieldName +
+        '&templateTypeId=' +
+        templateTypeId
+
+      const templateStyle = parsedData.value
+      if (templateStyle) {
+        url += '&templateStyle=' + templateStyle
+      }
+
+      const headers = new Headers()
+      headers.append('Brightspot-CSRF', Cookies.get('bsp.csrf'))
+
+      try {
+        await fetch(url, {
+          method: 'POST',
+          headers: headers,
+        })
+      } catch (error) {
+        console.error(error)
+      }
+    }
+  })
+})
+
+onFind('.StyleEmbeddedContent-search input', (input) => {
+  input.addEventListener('input', (e) => {
+    const nav = input.closest('.StyleEmbeddedContent-nav')
+    const main = nav?.nextSibling
+    const reg = new RegExp(
+      e.target.value.replace(/\s/, '').split('').join('(?:.*\\W)?'),
+      'i',
+    )
+
+    main?.querySelectorAll('a').forEach((item) => {
+      const li = item.parentElement
+      const ul = li?.parentElement
+      const heading = ul?.previousSibling
+
+      if (reg.test(item.innerText)) {
+        li.style.display = ''
+        ul.style.display = ul.classList.contains('LinkTable') ? 'block' : 'flex'
+        heading.style.display = 'block'
+      } else {
+        li.style.display = 'none'
+        if (!ul.querySelector('li:not([style*="display: none"])')) {
+          ul.style.display = 'none'
+          heading.style.display = 'none'
+        }
+      }
+    })
+
+    nav?.querySelectorAll('li').forEach((li) => {
+      li.style.display =
+        li.classList.contains('is-selected') || e.target.value === ''
+          ? 'list-item'
+          : 'none'
+      li.style.borderColor = 'var(--color-gray3)'
+    })
+
+    const firstVisible = nav?.querySelector('li:not([style*="display: none"])')
+    firstVisible.style.borderColor = 'transparent'
+
+    const warning = main?.querySelector('.StyleEmbeddedContent-warning')
+    warning.style.display = main?.querySelector(
+      'li:not([style*="display: none"])',
+    )
+      ? 'none'
+      : 'flex'
+  })
+})

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

@@ -0,0 +1,131 @@
+.StyleEmbeddedContent {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - var(--Page-headerBottom) - var(--Popup-gap) * 2);
+  margin: calc(0px - var(--gap-l));
+  position: relative;
+
+  .StyleEmbeddedContent-heading {
+    .Text.is-s;
+
+    font-weight: bold;
+    margin: var(--gap-l) 0;
+    padding-top: var(--gap-s);
+  }
+}
+
+.StyleEmbeddedContent-content {
+  overflow: auto;
+  width: 100%;
+}
+
+.StyleEmbeddedContent-nav {
+  background: var(--color-white);
+  border-right: 1px solid var(--color-gray2);
+  padding: var(--gap-l);
+  width: 100%;
+
+  .StyleEmbeddedContent-search {
+    .SearchInput;
+
+    input {
+      margin-bottom: var(--gap-m);
+    }
+  }
+
+  li {
+    border-top: 1px solid var(--color-gray3);
+    color: var(--color-dominant6);
+    cursor: pointer;
+    position: relative;
+
+    > a {
+      display: block;
+      padding: var(--gap-m) 0;
+      width: 100%;
+    }
+
+    &:hover,
+    &.is-selected {
+      color: var(--Link-hoverColor);
+
+      &::after {
+        bottom: 0;
+        content: '';
+        left: calc(0px - var(--gap-l));
+        position: absolute;
+        top: 0;
+        width: var(--gap-m);
+      }
+    }
+
+    &:hover::after {
+      background: var(--Link-hoverColor);
+    }
+
+    &.is-selected::after {
+      background: var(--color-dominant6);
+    }
+
+    &:first-child {
+      border-color: transparent;
+    }
+  }
+}
+
+.StyleEmbeddedContent-main {
+  padding: 0 var(--gap-l) calc(var(--gap-l) * 6) var(--gap-l);
+  width: 100%;
+
+  .LinkTable.StyleEmbeddedContent-items {
+    display: block;
+    margin: 0;
+
+    > li {
+      width: 100%;
+    }
+  }
+
+  .StyleEmbeddedContent-items {
+    display: flex;
+    flex-wrap: wrap;
+    margin: calc(0px - var(--gap-l) / 2);
+
+    > li {
+      padding: calc(var(--gap-l) / 2);
+      width: 50%;
+    }
+  }
+
+  .StyleEmbeddedContent-warning {
+    display: none;
+    margin-top: var(--gap-l);
+  }
+}
+
+.Widget-title {
+  flex-shrink: 0;
+}
+
+@media (@mq-m) {
+  .StyleEmbeddedContent-nav {
+    height: 100%;
+    max-width: 250px;
+    overflow-y: scroll;
+    width: 35%;
+  }
+
+  .StyleEmbeddedContent-content {
+    display: flex;
+    height: 100%;
+  }
+
+  .StyleEmbeddedContent-main {
+    height: 100%;
+    overflow-y: scroll;
+  }
+}
+
+.Widget[name='AddEmbeddedContent'] {
+  height: 100%;
+}