@brightspot/ui 3.0.1-cms-ui-migration.0 → 3.0.1-cms-ui-migration.2

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

@@ -0,0 +1,922 @@
+@import (reference) './IconButton.less';
+@import (reference) './Button.less';
+@import (reference) './Checkbox.less';
+@import (reference) './Dropdown.less';
+@import (reference) './Link.less';
+@import (reference) './Text.less';
+
+.cropper-drag-box,
+.cropper-center::before,
+.cropper-center::after,
+.cropper-face,
+.cropper-line,
+.cropper-point,
+.cropper-point.point-se::before {
+  background-color: var(--color-white);
+}
+
+.cropper-modal {
+  background-color: var(--color-black);
+  opacity: 0.5;
+}
+
+.cropper-view-box {
+  outline-color: var(--color-white);
+}
+
+.cropper-dashed {
+  border-color: var(--color-white);
+}
+
+.cropper-dashed,
+.cropper-center,
+.cropper-point {
+  opacity: 1;
+}
+
+@keyframes isAdded {
+  from {
+    background: var(--color-green4);
+  }
+
+  to {
+    background: var(--color-white);
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.ImageEditor-open,
+.ImageEditor-editToggle {
+  .IconButton;
+
+  background: var(--color-white);
+  display: none;
+  position: absolute;
+  top: 0;
+
+  &::after {
+    border-radius: 0%;
+  }
+
+  button& {
+    background: var(--color-white);
+  }
+
+  .is-imageEditorLoaded & {
+    display: block;
+  }
+}
+
+.ImageEditor-open {
+  --IconButton-name: 'brush';
+
+  right: calc(var(--gap-s) * 2 + var(--Icon-size));
+
+  &.noEditor {
+    --IconButton-name: 'crop';
+  }
+
+  &:focus-visible {
+    z-index: 1;
+  }
+}
+
+.ImageEditor-editToggle {
+  --IconButton-name: 'more_horiz';
+
+  right: 0;
+
+  &.is-active {
+    --IconButton-name: 'close';
+
+    color: var(--Link-hoverColor);
+  }
+}
+
+.ImageEditor-editTools {
+  .Dropdown;
+
+  &.is-open {
+    .Dropdown.is-open;
+
+    [role='menuitem'] {
+      .Dropdown-item;
+      .Link.is-blue;
+    }
+  }
+}
+
+.is-imagePreview {
+  background: var(--color-gray1);
+  display: flex;
+  min-height: 204px;
+  min-width: 272px;
+  position: relative;
+  width: fit-content;
+}
+
+.ImageEditor-container {
+  margin-top: var(--gap-s);
+}
+
+.ImageEditor-preview {
+  cursor: pointer;
+  display: flex;
+  margin: auto;
+  position: relative;
+  width: fit-content;
+
+  img,
+  canvas {
+    background-color: var(--color-gray1);
+    background-image: linear-gradient(
+        45deg,
+        var(--color-gray3) 25%,
+        transparent 25%,
+        transparent 75%,
+        var(--color-gray3) 75%,
+        var(--color-gray3)
+      ),
+      linear-gradient(
+        -45deg,
+        var(--color-gray3) 25%,
+        transparent 25%,
+        transparent 75%,
+        var(--color-gray2) 75%,
+        var(--color-gray3)
+      );
+    background-size: 10px 10px;
+    display: block;
+    margin: auto;
+    max-height: 60vh;
+    max-width: 100%;
+  }
+
+  &.is-hidden {
+    img {
+      display: none;
+    }
+  }
+}
+
+.ImageEditor-preview-border {
+  border-color: rgb(0 0 0 / 50%);
+  border-style: solid;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.ImageEditor-preview-loader {
+  display: none;
+  height: 0;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 0;
+  z-index: 1;
+
+  &::before {
+    background: rgb(255 255 255 / 70%);
+    bottom: -1px;
+    content: '';
+    left: -1px;
+    position: absolute;
+    right: -1px;
+    top: -1px;
+  }
+
+  &::after {
+    .Icon;
+
+    animation: spin var(--time-xl) infinite ease-in-out;
+    color: var(--color-black);
+    content: 'autorenew';
+    left: calc(50% - var(--Icon-size) / 2);
+    position: absolute;
+    top: calc(50% - var(--Icon-size) / 2);
+  }
+}
+
+.ImageEditor {
+  --ImageEditor-asideWidth: 428px;
+
+  background: var(--color-white);
+  bottom: 0;
+  display: block;
+  left: 0;
+  opacity: 0;
+  position: fixed;
+  right: 0;
+  top: var(--Page-headerBottom);
+  transform: scaleY(0);
+  transform-origin: bottom;
+  transition:
+    opacity var(--time-xs) var(--ease-in),
+    transform var(--time-s) var(--ease-out);
+  z-index: 1000;
+
+  .CIG & > .TabBar {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  > [data-tab] {
+    height: calc(100% - var(--gap-m) * 2 - var(--lineHeight-m));
+  }
+
+  .ActionBar {
+    bottom: 0;
+    justify-content: space-between;
+    padding: var(--gap-l) var(--gap-xl);
+    position: fixed;
+    width: var(--ImageEditor-asideWidth);
+  }
+}
+
+.ImageEditor-main {
+  align-items: center;
+  background-color: var(--color-gray2);
+  bottom: 0;
+  left: var(--ImageEditor-asideWidth);
+  min-width: 420px;
+  position: absolute;
+  right: 0;
+  top: 0;
+
+  img {
+    display: block;
+    max-height: 100%;
+    max-width: 100%;
+  }
+}
+
+.ImageEditor-focus {
+  color: var(--color-gray6);
+  margin: var(--gap-l) 0;
+
+  button {
+    margin-bottom: var(--gap-m);
+    width: 100%;
+
+    --Icon-color: var(--color-dominant6);
+
+    &:hover,
+    &:focus {
+      color: var(--color-dominant6);
+    }
+
+    &.is-active {
+      border-color: var(--Link-hoverColor);
+      color: var(--Link-hoverColor);
+
+      --Icon-color: var(--Link-hoverColor);
+    }
+
+    &.is-disabled {
+      border-color: var(--color-gray3);
+      color: var(--color-gray3);
+      pointer-events: none;
+
+      --Icon-color: var(--color-gray3);
+    }
+
+    &::before {
+      background: repeating-radial-gradient(
+        var(--Icon-color),
+        var(--Icon-color) 3px,
+        var(--color-white) 3px,
+        var(--color-white) 6px
+      );
+      border-radius: 50%;
+      content: '';
+      height: 24px;
+      margin-right: var(--gap-s);
+      width: 24px;
+    }
+  }
+}
+
+.ImageEditor-focus-container,
+.ImageEditor-focus-modal,
+.ImageEditor-hotspot-container,
+.ImageEditor-editableArea {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+
+  &.is-hidden {
+    display: none;
+  }
+}
+
+.ImageEditor-focus-modal {
+  background: var(--color-black);
+  opacity: 0.6;
+}
+
+.ImageEditor-focusLine-x {
+  border-top: 2px dashed var(--color-white);
+  left: 0;
+  opacity: 0.64;
+  position: absolute;
+  width: 100%;
+}
+
+.ImageEditor-focusLine-y {
+  border-left: 2px dashed var(--color-white);
+  height: 100%;
+  opacity: 0.64;
+  position: absolute;
+  top: 0;
+}
+
+.ImageEditor-focusableArea {
+  border: 1px solid var(--Link-hoverColor);
+
+  &:hover {
+    cursor: crosshair;
+  }
+}
+
+.ImageEditor-implicitMessage,
+.ImageEditor-focusMessage {
+  .Text.is-s;
+
+  background: var(--color-gray7);
+  bottom: var(--gap-s);
+  color: var(--color-white);
+  left: 50%;
+  max-width: 95%;
+  opacity: 1;
+  padding: var(--gap-xs);
+  position: absolute;
+  right: auto;
+  text-transform: lowercase;
+  transform: translateX(-50%);
+  width: fit-content;
+
+  &::first-letter {
+    text-transform: uppercase;
+  }
+}
+
+.ImageEditor-implicitMessage {
+  bottom: auto;
+  top: var(--gap-s);
+}
+
+.ImageEditor-title {
+  background: var(--color-gray1);
+  font-weight: bold;
+  padding: var(--gap-m) var(--gap-l);
+  width: var(--ImageEditor-asideWidth);
+}
+
+.ImageEditor-aside {
+  bottom: calc(var(--lineHeight-m) + var(--gap-s) * 2 + var(--gap-l) * 2);
+  left: 0;
+  margin-top: calc(var(--lineHeight-m) + var(--gap-m) * 2);
+  overflow: auto;
+  padding: 0 var(--gap-xl) var(--gap-l) var(--gap-xl);
+  position: absolute;
+  top: 0;
+  width: var(--ImageEditor-asideWidth);
+
+  .TC-unselected {
+    display: none;
+  }
+
+  .TabBar {
+    margin: 0 calc(var(--gap-xl) * -1);
+  }
+}
+
+.ImageEditor-hotspotableArea {
+  background: rgb(255 255 255 / 0%);
+  position: relative;
+}
+
+.ImageEditor-hotspotableArea.is-dragging
+  .ImageEditor-hotspot.is-draggable:not(.is-dragging) {
+  opacity: 0.3;
+}
+
+// Hide the Transient hotspot region option since it isn't used.
+.ImageEditor-hotspots {
+  .ComboInput-option[data-value^='Transient'] {
+    display: none;
+  }
+}
+
+.ImageEditor-hotspots .hotSpots {
+  max-width: calc(var(--ImageEditor-asideWidth) - 2 * var(--gap-l));
+}
+
+// Hide the hotspot item's x/y inputs since those values will come from dragging hotspot overlays.
+.ImageEditor-hotspots .CIG-row[data-name$='/cms.image.x'],
+.ImageEditor-hotspots .CIG-row[data-name$='/cms.image.y'] {
+  display: none;
+}
+
+.ImageEditor-hotspot {
+  --x: 0;
+  --y: 0;
+  --size: 36px;
+  --Icon-size: calc(var(--size) - var(--size) / 2);
+
+  align-items: center;
+  background: var(--color-white);
+  border-radius: 100%;
+  box-shadow:
+    0 0 0 2px var(--color-gray6),
+    0 2px 3px 1px rgb(123 123 123 / 80%);
+  color: var(--color-gray6);
+  display: flex;
+  height: var(--size);
+  justify-content: center;
+  opacity: 1;
+  position: absolute;
+  transition: opacity var(--time-l) ease;
+  width: var(--size);
+  z-index: var(--index);
+}
+
+.ImageEditor-hotspot.is-hidden {
+  opacity: 0;
+}
+
+.ImageEditor-hotspot.is-hovered {
+  background: var(--color-blue5);
+}
+
+.ImageEditor-hotspot.is-removing {
+  background: var(--color-red1);
+  box-shadow:
+    0 0 0 2px var(--color-red6),
+    0 2px 1px 1px rgb(123 123 123 / 80%);
+  opacity: 0.8;
+  pointer-events: none;
+}
+
+.ImageEditor-hotspot.is-added {
+  animation: 500ms forwards isAdded ease-in-out;
+}
+
+.ImageEditor-hotspot.is-dragging {
+  background: var(--color-green2);
+  border-color: transparent;
+  box-shadow:
+    0 0 0 2px var(--color-green4),
+    0 2px 1px 1px rgb(123 123 123 / 80%);
+  color: var(--color-black);
+  opacity: 0.75;
+}
+
+.ImageEditor-focus {
+  > h2 {
+    .Text.is-m;
+
+    margin-bottom: var(--gap-m);
+  }
+
+  .ImageEditor-image {
+    cursor: crosshair;
+  }
+
+  .ImageEditor-aside {
+    align-items: center;
+    display: flex;
+    font-style: italic;
+    justify-content: center;
+    text-align: center;
+  }
+}
+
+.ImageEditor-edit {
+  > h2 {
+    display: none;
+  }
+
+  > table {
+    display: none;
+  }
+
+  .CIG-label:has(input[type='range']) {
+    --Text-height: var(--lineHeight-m);
+
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    height: calc(2 * var(--Text-height));
+
+    input[type='range'] {
+      width: 100%;
+    }
+  }
+}
+
+.ImageEditor-editGroup {
+  input[type='checkbox'] {
+    .Checkbox;
+
+    color: var(--Link-color);
+    margin-right: var(--gap-s);
+
+    &::before {
+      border-radius: 50%;
+    }
+
+    &:checked::after {
+      content: 'circle';
+    }
+  }
+}
+
+.imageEditor-adjustment {
+  label {
+    display: block;
+  }
+
+  > ul > li > label {
+    align-items: center;
+    display: flex;
+  }
+}
+
+.imageEditor-adjustment-icons {
+  list-style-type: none;
+  margin-left: 0;
+
+  li {
+    display: inline;
+    margin-right: 0.5em;
+  }
+}
+
+.ImageEditor-sizes {
+  margin: 0 calc(0px - var(--gap-xl)) calc(0px - var(--gap-l))
+    calc(0px - var(--gap-xl));
+
+  > h2 {
+    .Text.is-m;
+
+    margin-bottom: var(--gap-m);
+  }
+
+  > table {
+    display: none;
+  }
+}
+
+.ImageEditor-groups {
+  background: rgb(var(--rgb-white) / 90%);
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 0;
+
+  > * {
+    flex-basis: 100%;
+  }
+
+  > span {
+    padding: var(--gap-s) 0;
+    vertical-align: middle;
+  }
+
+  .ComboInput {
+    padding-left: var(--gap-s);
+  }
+}
+
+.ImageEditor-sizeSelectors {
+  display: grid;
+  grid-gap: var(--gap-s);
+}
+
+.ImageEditor-size {
+  cursor: pointer;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: var(--gap-m) var(--gap-xl);
+  position: relative;
+
+  &::after {
+    bottom: 0;
+    content: '';
+    left: 0;
+    position: absolute;
+    top: 0;
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform var(--time-xs) var(--ease-out);
+    width: var(--gap-m);
+  }
+
+  &.imageEditor-sizeSelected {
+    .ImageEditor-sizePreview {
+      --Icon-size: 20px;
+      --Icon-margin: 5px;
+
+      &::before {
+        background: var(--Input-focusBackground);
+        content: '';
+        height: calc(var(--Icon-size) + calc(var(--Icon-margin) * 2));
+        position: absolute;
+        top: 0;
+        width: calc(var(--Icon-size) + calc(var(--Icon-margin) * 2));
+      }
+
+      &::after {
+        .Icon;
+
+        content: 'check';
+        left: var(--Icon-margin);
+        position: absolute;
+        top: var(--Icon-margin);
+      }
+
+      canvas {
+        box-shadow: var(--shadow-1);
+      }
+    }
+  }
+
+  &.ImageEditor-sizeModified {
+    background: var(--color-yellow1);
+
+    &::after {
+      background: var(--color-yellow3);
+      transform: none;
+    }
+
+    .ImageEditor-sizeDescription .is-inherit {
+      display: none;
+    }
+
+    .ImageEditor-sizeDescription .is-override {
+      display: block;
+    }
+  }
+}
+
+.ImageEditor-sizePreview {
+  order: 1;
+  width: 100%;
+
+  canvas,
+  img {
+    background-color: var(--color-gray1);
+    background-image: linear-gradient(
+        45deg,
+        var(--color-gray3) 25%,
+        transparent 25%,
+        transparent 75%,
+        var(--color-gray3) 75%,
+        var(--color-gray3)
+      ),
+      linear-gradient(
+        -45deg,
+        var(--color-gray3) 25%,
+        transparent 25%,
+        transparent 75%,
+        var(--color-gray2) 75%,
+        var(--color-gray3)
+      );
+    background-size: 10px 10px;
+    display: block;
+    max-height: 20vh;
+    max-width: 100%;
+  }
+}
+
+.ImageEditor-sizeContainer {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  margin-top: var(--gap-s);
+  order: 2;
+}
+
+.ImageEditor-sizeLabel {
+  align-items: center;
+  text-transform: capitalize;
+
+  br {
+    display: none;
+  }
+
+  > * {
+    &:not(:last-child)::after {
+      content: ', ';
+    }
+  }
+}
+
+.ImageEditor-sizeDescription {
+  .Text.is-s;
+
+  color: var(--color-gray6);
+  flex-basis: 100%;
+  order: 2;
+  text-transform: capitalize;
+
+  .is-inherit {
+    display: block;
+  }
+
+  .is-override {
+    display: none;
+  }
+}
+
+.ImageEditor-resetButton,
+.ImageEditor-renditionResetButton {
+  .Link;
+  .Link.is-red;
+  .Text.is-s;
+
+  align-items: center;
+  display: none;
+  margin: var(--gap-s) 0 0 0;
+  min-width: max-content;
+
+  &::before {
+    .Icon;
+    .Icon.is-s;
+
+    content: 'refresh';
+    margin-right: var(--gap-xs);
+  }
+}
+
+.ImageEditor-renditionResetButton.is-visible {
+  display: block;
+  line-height: var(--lineHeight-m);
+  margin: 0 0 0 var(--gap-l);
+
+  &::before {
+    top: 50%;
+  }
+}
+
+.ImageEditor-resetButton {
+  display: block;
+  margin: 0;
+}
+
+.is-imageEditorOpen {
+  .ImageEditor {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.is-imageEditorLoading {
+  .ImageEditor-preview-loader {
+    display: block;
+  }
+}
+
+.ImageEditor-focusMessage.is-hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.is-imageEditorReady {
+  .ImageEditor-preview-loader {
+    display: none;
+
+    &::before,
+    &::after {
+      animation: none;
+      background: none;
+      content: '';
+    }
+  }
+}
+
+.ImageEditor-rotate-left,
+.ImageEditor-rotate-right,
+.ImageEditor-flip-h,
+.ImageEditor-flip-v {
+  .IconButton;
+
+  float: left;
+}
+
+.ImageEditor-rotate-left {
+  --IconButton-name: 'rotate_90_degrees_ccw';
+}
+
+.ImageEditor-rotate-right {
+  --IconButton-name: 'rotate_90_degrees_ccw';
+
+  transform: scaleX(-1);
+}
+
+.ImageEditor-flip-h {
+  --IconButton-name: 'flip';
+}
+
+.ImageEditor-flip-v {
+  --IconButton-name: 'flip';
+
+  transform: rotate(90deg);
+}
+
+.ImageEditor-focus-point {
+  background: repeating-radial-gradient(
+    var(--color-black),
+    var(--color-black) 3px,
+    var(--color-white) 3px,
+    var(--color-white) 6px
+  );
+  border-radius: 50%;
+  height: 24px;
+  margin-left: -12px;
+  margin-top: -12px;
+  position: absolute;
+  width: 24px;
+
+  &.is-hidden:not(.is-implicit) {
+    display: none;
+  }
+
+  &.is-implicit {
+    opacity: 0.4;
+  }
+}
+
+.ImageEditor-implicitMessage.is-hidden {
+  display: none;
+}
+
+// noUiSlider style overrides:
+
+.is-slideable.noUi-target {
+  border: none;
+  box-shadow: none;
+}
+
+.is-slideable {
+  --Thumb-diameter: 1.5em;
+  --Thumb-color: var(--color-dominant6);
+  --Thumb-hover-color: var(--Input-focusColor);
+  --Track-color: var(--color-gray3);
+  --Track-height: 4px;
+}
+
+.is-slideable.noUi-target {
+  background: none;
+  height: 20px;
+}
+
+.is-slideable.noUi-target::after {
+  background: var(--Track-color);
+  content: '';
+  height: var(--Track-height);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 100%;
+}
+
+.is-slideable.noUi-horizontal .noUi-handle {
+  background: var(--Thumb-color);
+  border: none;
+  border-radius: 100%;
+  box-shadow: none;
+  height: var(--Thumb-diameter);
+  left: calc(-1 * var(--Thumb-diameter) / 2);
+  top: -2px;
+  width: var(--Thumb-diameter);
+
+  &::before,
+  &::after {
+    content: none;
+  }
+
+  &:hover {
+    background: var(--Thumb-hover-color);
+  }
+}
+
+html:not([dir='rtl']) .is-slideable.noUi-horizontal .noUi-handle {
+  right: calc(-1 * var(--Thumb-diameter) / 2);
+}