@brightspot/ui 3.0.1 → 5.0.1

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

@@ -0,0 +1,410 @@
+@import (reference) url('./../Dropdown.less');
+
+@keyframes AddAnimation {
+  65% {
+    background: var(--color-yellow2);
+  }
+}
+
+.AssignmentDeskDashboard {
+  --assignment-desk-toolbar-gap: 2;
+
+  &.has-refresh {
+    --assignment-desk-toolbar-gap: 4;
+
+    .AssignmentDeskDashboard-refresh {
+      display: flex;
+    }
+
+    .AssignmentDeskDashboard-refresh,
+    .Label.is-updated {
+      animation: fade-in 1s ease;
+    }
+  }
+
+  .Linklist tr {
+    padding-bottom: var(--gap-l);
+    padding-top: var(--gap-l);
+  }
+
+  .AssignmentDeskDashboard-boardView {
+    background: var(--color-gray2);
+    display: flex;
+  }
+
+  .AssignmentDeskDashboard-boardView-column {
+    display: flex;
+    flex-direction: column;
+    width: 25%;
+  }
+
+  .AssignmentDeskDashboard-boardView-link {
+    min-height: min-content;
+    padding: var(--gap-l);
+    padding-bottom: var(--gap-m);
+  }
+
+  .AssignmentDeskDashboard-boardView-description {
+    color: var(--color-gray5);
+    font-size: var(--fontSize-s);
+    line-height: var(--lineHeight-s);
+    margin-bottom: var(--gap-l);
+    max-height: calc(var(--lineHeight-s) * 10);
+    overflow: hidden;
+    padding: 0 var(--gap-l) var(--gap-l);
+    text-overflow: unset;
+  }
+
+  .AssignmentDeskDashboard-boardView-card {
+    background: var(--color-white);
+    box-shadow: var(--shadow-1);
+    display: flex;
+    flex-direction: column;
+    height: min-content;
+    justify-content: space-between;
+    margin: var(--gap-m);
+    margin-bottom: 0;
+  }
+
+  .AssignmentDeskDashboard-boardView-stats {
+    background: var(--color-gray1);
+
+    .LinkList {
+      td {
+        width: 100%;
+      }
+
+      td:not(
+          .LinkList-image,
+          .LinkList-main,
+          .LinkList-viewers,
+          .LinkList-button,
+          .LinkList-type,
+          .LinkList-description,
+          .date-time
+        )::before {
+        display: none;
+      }
+
+      padding-left: var(--gap-s);
+      width: 100%;
+    }
+  }
+
+  .AssignmentDeskDashboard-boardView-title {
+    background: var(--color-gray2);
+    min-height: min-content;
+    padding: var(--gap-m);
+  }
+
+  .AssignmentDeskDashboard-boardView-title.status-New {
+    border-bottom: calc(var(--lineHeight-xs) / 4) solid var(--color-blue5);
+  }
+
+  .AssignmentDeskDashboard-boardView-title.status-Assigned {
+    border-bottom: calc(var(--lineHeight-xs) / 4) solid var(--color-orange5);
+  }
+
+  .AssignmentDeskDashboard-boardView-title.status-Fulfilled {
+    border-bottom: calc(var(--lineHeight-xs) / 4) solid var(--color-yellow3);
+  }
+
+  .AssignmentDeskDashboard-boardView-title.status-Closed {
+    border-bottom: calc(var(--lineHeight-xs) / 4) solid var(--color-green5);
+  }
+
+  .Label.is-updated {
+    background: var(--color-orange4);
+  }
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .SearchWidget-form .SearchWidget-title,
+  .SearchWidget-title:not(.AssignmentDeskDashboard-title) {
+    display: none;
+  }
+
+  .SearchWidget-recent {
+    display: none;
+  }
+
+  .SearchWidget-saved {
+    display: block;
+  }
+
+  .AssignmentDeskDashboard-resultSummary {
+    display: none;
+  }
+
+  @media screen and (max-width: 767px) {
+    .SearchResult-pagination {
+      margin: 0;
+    }
+
+    &.SearchWidget {
+      display: block;
+    }
+  }
+
+  .SearchResult-pagination {
+    margin-top: 0;
+  }
+
+  .AssignmentDeskDashboard-controls {
+    .DashboardWidget-filters;
+
+    border-top: 0;
+    justify-content: space-between;
+    margin: 0;
+    top: 0;
+    width: 100%;
+  }
+
+  .AssignmentDeskDashboard-heading {
+    font-weight: bold;
+  }
+
+  .AssignmentDeskDashboard-count {
+    padding: var(--gap-s);
+  }
+
+  .LinkList {
+    .GroupingHeader tr:first-child {
+      border-bottom: var(--gap-xs) solid var(--color-black);
+    }
+
+    tr {
+      padding-left: calc(var(--LinkList-imageSize) + var(--gap-l));
+      padding-right: var(--gap-l);
+    }
+
+    tr.no-icon {
+      padding-left: var(--gap-l);
+      padding-right: var(--gap-l);
+    }
+
+    .GroupingHeader.no-icon {
+      background: var(--color-gray2);
+      border-bottom: var(--gap-xs) solid var(--color-black);
+      min-height: min-content;
+    }
+
+    .GroupingHeader.no-icon.status-New {
+      border-bottom: var(--gap-xs) solid var(--color-blue5);
+    }
+
+    .GroupingHeader.no-icon.status-Assigned {
+      border-bottom: var(--gap-xs) solid var(--color-orange5);
+    }
+
+    .GroupingHeader.no-icon.status-Fulfilled {
+      border-bottom: var(--gap-xs) solid var(--color-yellow3);
+    }
+
+    .GroupingHeader.no-icon.status-Closed {
+      border-bottom: var(--gap-xs) solid var(--color-green5);
+    }
+
+    .RightTitle {
+      padding-left: var(--gap-xs);
+    }
+
+    .LinkList-image.is-icon[data-icon-name]::before {
+      padding-left: var(--gap-l);
+    }
+
+    .LinkList-image.is-icon[data-icon-name] {
+      --Icon-size: var(--iconSize-m);
+
+      top: 0;
+    }
+
+    .Label.is-pastDue {
+      background: var(--color-red6);
+    }
+  }
+
+  .LinkList.is-urgent {
+    background: var(--color-dominant2);
+  }
+
+  .LinkList-description {
+    margin-right: var(--gap-l);
+  }
+
+  tr.is-updated {
+    animation-duration: 1000ms;
+    animation-fill-mode: forwards;
+    animation-name: AddAnimation;
+    animation-timing-function: ease-in-out;
+  }
+
+  tr.is-icon[data-icon-name]::before {
+    &:extend(.Icon);
+
+    content: attr(data-icon-name);
+    left: var(--gap-l);
+    position: absolute;
+    top: var(--gap-l);
+  }
+}
+
+.AssignmentDeskDashboard-actionsWrapper {
+  .AssignmentDeskDashboard-actionsToggle {
+    .IconButton;
+
+    --IconButton-name: 'more_horiz';
+
+    background: transparent;
+    border: none;
+    padding: 0;
+
+    &.is-active {
+      .IconButton.is-focus;
+
+      --IconButton-name: 'close';
+    }
+  }
+
+  .AssignmentDeskDashboard-actions {
+    .Dropdown;
+
+    .AssignmentDeskDashboard-action {
+      [role='menuitem'] {
+        .Dropdown-item;
+        .Link.is-blue;
+      }
+    }
+  }
+
+  .AssignmentDeskDashboard-actions.is-open {
+    .Dropdown.is-open;
+  }
+}
+
+.AssignmentDeskDashboard-refresh {
+  background-color: var(--color-blue5);
+  color: var(--color-white);
+  display: none;
+  font-weight: bold;
+  justify-content: center;
+  padding: var(--gap-m);
+  transition:
+    height 1s,
+    opacity 1s ease-in-out;
+
+  &::before {
+    .Icon;
+
+    content: 'refresh';
+    margin-right: var(--gap-l);
+  }
+
+  &:hover {
+    color: var(--color-white);
+    text-decoration: none;
+  }
+}
+
+// Hides the popup from the date field due to the calendar popup UI
+.Popup[data-popup-source-class~='SingleFieldUpdate-date'] {
+  visibility: hidden;
+}
+
+.SingleFieldUpdate-date {
+  .IconButton;
+
+  --IconButton-name: 'keyboard_arrow_down';
+
+  margin-left: calc(0 - var(--gap-xs));
+  margin-right: calc(0 - var(--gap-s));
+  transition: transform var(--time-xs);
+
+  &.is-open {
+    transform: rotate(180deg);
+  }
+}
+
+.SingleFieldUpdate-error,
+.SingleFieldUpdate-success {
+  visibility: hidden;
+}
+
+@media (@mq-m) {
+  .AssignmentDeskDashboard-toolbar {
+    background-color: var(--color-white);
+    position: fixed;
+    width: calc(100% - var(--SearchWidget-leftWidth));
+    z-index: 1;
+
+    & + * {
+      padding-top: calc(
+        var(--Text-height) * var(--assignment-desk-toolbar-gap) + var(--gap-m) *
+          2 + var(--gap-l)
+      );
+    }
+  }
+}
+
+.AssignmentDeskDashboard.is-printView {
+  padding: 0;
+
+  .AssignmentDeskDashboard-toolbar,
+  .SearchWidget-title,
+  .searchControls,
+  .SearchWidget-history,
+  .SingleFieldUpdate-date {
+    display: none;
+  }
+
+  .AssignmentDeskDashboard-toolbar + * {
+    padding-top: 0;
+  }
+
+  .SearchWidget-result {
+    .AssignmentDeskDashboard-resultSummary {
+      display: block;
+      margin-bottom: var(--gap-l);
+    }
+
+    tr {
+      page-break-inside: avoid;
+    }
+  }
+}
+
+@media print {
+  @page {
+    margin: 0.5in 0.25in;
+  }
+
+  a {
+    color: var(--color-black);
+    font-weight: bold;
+  }
+
+  body {
+    background: var(--color-white);
+  }
+
+  html {
+    height: auto;
+    position: relative;
+  }
+
+  .Page {
+    height: auto;
+  }
+
+  .Page-header {
+    display: none;
+  }
+}

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

@@ -0,0 +1,3 @@
+.AssignmentDeskRelatedWidget.RelatedItem {
+  padding: var(--gap-s);
+}

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

@@ -0,0 +1,23 @@
+.AssignmentDeskWidget-controls {
+  .DashboardWidget-filters;
+
+  justify-content: space-between;
+  margin-left: calc(0px - var(--gap-xl));
+  margin-right: calc(0px - var(--gap-xl));
+  margin-top: var(--Widget-padding);
+  overflow-y: scroll;
+  width: unset;
+}
+
+.AssignmentDeskWidget-filters {
+  display: flex;
+  flex: none;
+  flex-direction: row;
+  flex-grow: 2;
+  margin-left: 10px;
+}
+
+.AssignmentDeskWidget-sorts {
+  flex: none;
+  padding-right: 10px;
+}

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

@@ -0,0 +1,92 @@
+.AssociatedContent-controls {
+  .DashboardWidget-filters;
+
+  justify-content: space-between;
+  margin: var(--gap-l) calc(0px - var(--gap-xl)) calc(0px - var(--gap-l))
+    calc(0px - var(--gap-xl));
+  padding-left: var(--gap-l);
+  width: unset;
+
+  .SearchInput {
+    width: 25%;
+  }
+
+  .AssociatedContent-filters {
+    display: flex;
+    flex: none;
+    flex-direction: row;
+    flex-grow: 2;
+    margin-left: 10px;
+  }
+
+  .AssociatedContent-sorts {
+    display: flex;
+    flex: none;
+    flex-direction: row;
+    padding-right: 10px;
+  }
+
+  .AssociatedContent-refresh {
+    .IconButton;
+
+    --IconButton-name: 'refresh';
+
+    flex: none;
+  }
+}
+
+.AssociatedContent-results {
+  padding-left: var(--gap-xl);
+  padding-right: var(--gap-xl);
+
+  .SearchResult-actions-wrapper {
+    display: none;
+  }
+
+  .SearchResult-sorts {
+    display: none;
+  }
+
+  .SearchResult-limit {
+    display: none;
+  }
+
+  .SearchResult-fields {
+    display: none;
+  }
+}
+
+.AssociatedContent {
+  .LinkCarousel {
+    background: none;
+    padding: var(--gap-s) var(--gap-l) var(--gap-m) var(--gap-l);
+  }
+
+  .SearchWidget-filter {
+    margin-top: 0;
+
+    .SearchWidget-filterItem {
+      .ComboInput {
+        margin-right: var(--gap-xl);
+        width: auto;
+      }
+
+      .ContentSelector-search {
+        border-width: 0 0 1px;
+        height: 100%;
+      }
+    }
+  }
+}
+
+.Widget.is-associatedContentWidget {
+  .Widget-title {
+    margin-bottom: var(--gap-s);
+  }
+
+  .SearchWidget-result {
+    border-left: none;
+    margin-left: calc(0px - var(--gap-xl));
+    margin-right: calc(0px - var(--gap-xl));
+  }
+}

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

@@ -0,0 +1,65 @@
+@import (reference) url('../Icon.less');
+
+.BulkUpload-file {
+  color: var(--color-gray5);
+
+  &::after {
+    &:extend(.Icon all);
+
+    content: 'description';
+    font-size: 70px;
+  }
+}
+
+.BulkUpload-fileName {
+  --Text-height: var(--lineHeight-s);
+
+  color: var(--color-gray5);
+  font-size: var(--fontSize-s);
+  line-height: var(--lineHeight-s);
+}
+
+.BulkUpload-filePreview {
+  overflow: hidden;
+  padding: 0 var(--gap-s) 0 var(--gap-s);
+  text-align: center;
+  text-overflow: ellipsis;
+  width: 150px;
+}
+
+.BulkUpload-header {
+  visibility: visible;
+}
+
+.BulkUpload-loader {
+  background-color: var(--color-gray2);
+  display: none;
+  padding: var(--gap-m);
+}
+
+.BulkUpload-form {
+  .loaded & {
+    display: block;
+  }
+
+  .loading & {
+    display: none;
+  }
+}
+
+.BulkUpload-loader {
+  .loading & {
+    display: block;
+    visibility: visible;
+
+    &::before {
+      .Icon;
+
+      animation: spin var(--time-xl) infinite ease-in-out;
+      color: var(--color-black);
+      content: 'autorenew';
+      margin-right: var(--gap-m);
+      z-index: 10;
+    }
+  }
+}

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

@@ -0,0 +1,103 @@
+.BulkWorkflow {
+  .Dropdown;
+
+  height: auto;
+  max-height: 50vh;
+  max-width: calc(var(--Tether-rw) * 2 + var(--Popup-gap) * 2 + 2px);
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 0;
+  right: calc(var(--gap-s) * 2);
+  width: auto;
+
+  &.is-open {
+    .Dropdown.is-open;
+
+    .BulkWorkflow-widget-title {
+      padding: var(--gap-m) var(--gap-l);
+    }
+  }
+
+  &-button {
+    .Dropdown-item;
+
+    &.is-open {
+      background-color: var(--color-gray1);
+    }
+  }
+
+  &-widget {
+    .closeButton {
+      .IconButton;
+
+      --IconButton-name: 'close';
+
+      background: var(--color-gray1);
+      border: 0;
+      padding: 0;
+      position: absolute;
+      right: var(--gap-s);
+      top: var(--gap-xs);
+    }
+
+    &-title {
+      margin-bottom: var(--gap-m);
+      padding: var(--gap-m) var(--gap-m) var(--gap-l) var(--gap-l);
+    }
+
+    .Message {
+      &.is-success,
+      &.message-info {
+        padding-left: calc(3.5 * var(--gap-l));
+      }
+
+      &-icon::before {
+        padding-left: var(--gap-l);
+      }
+    }
+
+    &-items {
+      padding: var(--gap-l) var(--gap-l);
+
+      &-item {
+        margin-bottom: var(--gap-s);
+
+        &-transitions {
+          display: flex;
+          flex-direction: column;
+
+          &-button {
+            margin: var(--gap-xs) 0 var(--gap-xs) 0;
+            width: 30%;
+
+            .BulkWorkflow.is-open & {
+              min-width: 30%;
+              width: inherit;
+            }
+          }
+        }
+      }
+    }
+
+    &:last-child {
+      margin-bottom: var(--gap-l);
+      padding: 0;
+    }
+  }
+}
+
+.bulkWorkflowConfirm {
+  &-widget {
+    .widget-publishingWorkflowLog {
+      padding-left: 0;
+
+      .objectInputs {
+        padding-left: var(--gap-m);
+      }
+    }
+
+    &-title {
+      padding: var(--gap-m) var(--gap-m) var(--gap-m) var(--gap-l);
+    }
+  }
+}