@eclipse-scout/core/src/desktop/outline/Outline.less

Eclipse Scout runtime

/*
 * Copyright (c) 2010, 2025 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
.outline.tree {
  & > .tree-data {
    padding-top: @outline-data-padding-top;

    & > .scrollbar {
      #scout.scrollbar-y-padding(2px, 0);
    }

    & > .key-box {
      top: 7px;
    }

    & > .tree-node,
    & > .animation-wrapper > .tree-node {
      background-color: transparent;
      cursor: pointer;
      border: 0;

      /* padding-right is used to leave some space for the scrollbar */
      padding: @outline-node-padding-y @outline-node-padding-right @outline-node-padding-y @outline-node-padding-left;

      &.group {
        background-color: @outline-group-background-color;
      }

      & > .text {
        font-size: @outline-font-size;
      }

      & > .image-icon {
        margin-top: auto;
      }

      & > .font-icon {
        line-height: @outline-node-font-icon-line-height;
        font-size: @outline-node-font-icon-size;
        color: @outline-node-font-icon-color;
      }

      & > .menubar {
        border: 0;
        background-color: inherit;
      }

      & > .tree-node-control {
        padding-top: @outline-node-control-padding-y;
        padding-left: @outline-node-control-padding-left;
        line-height: @outline-node-control-line-height;
        color: @outline-node-control-color;

        &:hover {
          color: @highlight-color;
        }
      }

      &.selected {
        color: @outline-selection-color;
        background-color: @outline-selection-background-color;

        &::after {
          display: none;
        }

        & > .tree-node-control {
          color: @outline-node-selected-control-color;

          &:hover {
            color: @highlight-color;
          }
        }

        & > .font-icon {
          color: @outline-node-selected-icon-color;;
        }
      }

      &.broken:not(.selected) > .text {
        color: @error-color;
        font-style: italic;
      }
    }
  }

  &.in-background > .tree-data {
    & > .tree-node,
    & > .animation-wrapper > .tree-node {
      &.group {
        background-color: @outline-in-background-group-background-color;
      }

      &.selected {
        background-color: @outline-in-background-selection-background-color;
        color: @outline-in-background-selection-color;
      }
    }
  }
}

.outline-title {
  cursor: pointer;
  color: @outline-title-color;
  font-size: 19px;
  padding: 0 @outline-title-padding-right 0 @outline-title-padding-left;
  border-bottom: 1px solid @outline-title-border-color;
  display: flex;
  align-items: center;
  height: @outline-title-height;

  & > .icon {
    padding-right: @outline-title-icon-padding-right;
  }

  & > .key-box {
    top: 19px;
  }

  & > .text {
    flex-grow: 1;
    #scout.overflow-ellipsis-nowrap();
  }

  & > .menubar {
    background-color: transparent;
    border: none;
    width: auto;
    flex-grow: 0;
    margin-right: -10px;

    & > .menubar-box > .menu-item {
      &.first {
        margin-left: 4px;
      }

      &.last {
        margin-right: 0;
      }
    }
  }
}

/* bread crumb style (different colors and bigger font and arrow than original breadcrumb style) */
.outline.tree.breadcrumb {

  & > .outline-title {
    margin: 0;
    border-bottom-color: @outline-breadcrumb-border-color;

    &.touch:active {
      background-color: @outline-breadcrumb-node-active-background-color;
    }
  }

  & > .tree-data {
    padding-top: 0;

    & > .tree-node,
    & > .animation-wrapper > .tree-node {
      border-bottom: 1px solid @outline-breadcrumb-border-color;
      padding: @outline-breadcrumb-node-padding-y @outline-breadcrumb-node-padding-x;

      &.child-of-selected {
        background-color: @outline-breadcrumb-child-background-color;

        .in-background& {
          background-color: transparent;
        }

        &:active {
          background-color: @outline-breadcrumb-node-active-background-color;
        }
      }

      &.ancestor-of-selected {
        color: @text-color-1;
        background-color: @outline-breadcrumb-ancestor-background-color;

        .in-background& {
          background-color: transparent;
        }
      }

      &:active {
        background-color: @outline-breadcrumb-node-active-background-color;
      }

      &.selected {
        background-color: @outline-selection-background-color;
        color: @outline-selection-color;
        cursor: default;

        .in-background& {
          background-color: @outline-in-background-selection-background-color;
        }

        & > .text > .compact-cell-header > .compact-cell-subtitle {
          color: @outline-node-selected-icon-color;
        }
      }

      &.selected > .text,
      &.ancestor-of-selected > .text {
        & > .compact-cell-header > .compact-cell-title > .right {
          // Don't show title suffix
          display: none;
        }

        & > .compact-cell-content.has-header {
          // Don't show the content if there is a header
          display: none;
        }
      }
    }
  }

  &:focus > .tree-data,
  &.focused > .tree-data {

    & > .tree-node,
    & > .animation-wrapper > .tree-node {

      &.parent-of-selected {
        border-color: @outline-breadcrumb-border-color;
      }

      &.selected {
        border-color: @outline-breadcrumb-border-color;
      }
    }
  }
}

.compact.outline.breadcrumb {
  & > .outline-title {
    padding-left: @compact-outline-title-padding-x;
    padding-right: @compact-outline-title-padding-x;

    & > .menubar {
      margin-right: -@menubar-item-icononly-padding-x;
    }
  }

  & > .tree-data {
    background-color: @compact-outline-data-background-color;

    & > .tree-node,
    & > .animation-wrapper > .tree-node {
      padding: 0;

      & > .text {
        display: inline-block;
        padding: @compact-outline-node-padding-y @compact-outline-node-padding-x;
      }

      &.has-icon > .text {
        padding-left: 0;
      }

      & > .icon {
        padding: @compact-outline-node-padding-y @menu-item-icon-margin-right @compact-outline-node-padding-y @compact-outline-node-padding-x;
        min-width: 16px;
      }

      & > .node-menubar {
        width: auto;
        flex-grow: 0;
        padding: 0 @compact-outline-node-padding-x - @menubar-item-icononly-padding-x 0 0;
        min-height: @compact-outline-node-menubar-height;
        height: @compact-outline-node-menubar-height; // Necessary for height: 100% to work in case node menubar has no explicit height set

        & > .menubar-box > .menu-item {
          color: inherit;

          &.disabled {
            color: @compact-outline-menu-item-disabled-color;
          }
        }
      }

      & > .detail-menubar {
        padding: 0 @compact-outline-node-padding-x 0 @compact-outline-node-padding-x;
        min-height: @compact-outline-node-menubar-height;
        margin-left: -@menubar-item-icononly-padding-x;
        background-color: @desktop-navigation-body-background-color;

        & > .menubar-box > .menu-item {
          padding-left: @menubar-item-icononly-padding-x;
          padding-right: @menubar-item-icononly-padding-x;
          margin-left: @menubar-item-icononly-margin-x;
          margin-right: @menubar-item-icononly-margin-x;

          &.first {
            margin-left: 0;
          }

          &.last {
            margin-right: 0;
          }

          & > .icon {
            // Ensure menu text is aligned with node text
            min-width: 16px;
          }
        }
      }

      & > .detail-content {
        // to cover selection background
        background-color: @desktop-navigation-body-background-color;

        &.dimmed-background {
          background-color: @compact-outline-data-background-color;
        }

        color: @desktop-navigation-color;
      }

      & > .form {
        & > .root-group-box > .group-box-body {
          padding-left: @compact-outline-node-padding-x - @mandatory-indicator-width;
          padding-right: @compact-outline-node-padding-x;
        }

        & > .right-padding-invisible > .group-box-body {
          padding-right: 0;
        }
      }

      &.selected {
        display: flex;
        flex-wrap: wrap; // Move detail menubar to next line
        background-clip: content-box; // selection background shines through on the bottom of the node sometimes when zoomed -> makes it slightly better
      }

      &.child-of-selected.animate-prev-selected {
        #scout.animation-name(tree-node-prev-selection);
        #scout.animation-duration(0.6s);
        #scout.animation-timing-function(ease-in);
      }

      &.compact-root:not(.selected) {
        display: none;
      }
    }

    &.detail-content-visible > .tree-node > .detail-menubar {
      border-bottom: 1px solid @outline-breadcrumb-border-color;
    }
  }

  & > .tree-data > .tree-node.selected.has-tile-overview {
    &.compact-root {
      & > .text,
      & > .icon {
        display: none;
      }
    }

    background-color: transparent;
    color: @desktop-navigation-color;
    border-bottom: 0;

    & > .font-icon {
      color: @outline-node-font-icon-color;
    }

    & .tile-overview-content {
      margin-left: 20px;
    }

    & .tile-overview-title {
      display: none;
    }

    & > .form {
      background-color: transparent;

      & > .tile-overview-content {
        margin-top: 0;
      }
    }

    & .menu-item {
      color: @desktop-navigation-color;
    }

    & ~ .child-of-selected {
      // Hide child nodes when tile overview is shown
      display: none;
    }
  }
}

/*** Previous Selection Animation ***/

.keyframes-tree-node-prev-selection() {
  00% {
    background-color: @outline-breadcrumb-node-active-background-color;
  }
  100% {
    background-color: @outline-breadcrumb-child-background-color;
  }
}

@-webkit-keyframes tree-node-prev-selection {
  .keyframes-tree-node-prev-selection();
}

/* NOSONAR */
@keyframes tree-node-prev-selection {
  .keyframes-tree-node-prev-selection();
}

/* NOSONAR */