@eclipse-scout/core/src/desktop/viewbutton/ViewButton.less

Eclipse Scout runtime

/*
 * Copyright (c) 2010, 2023 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
 */
@view-tab-transition-duration: 200ms;
@view-tab-transition: margin @view-tab-transition-duration ease-out, padding @view-tab-transition-duration ease-out, width @view-tab-transition-duration ease-out, border-radius @view-tab-transition-duration ease-out;

// The wrapper is necessary to make sure the view tabs don't change their size when one of them is selected.
// Without a wrapper this would not be possible because an unselected view tab has a margin, a selected one does not.
// When the tabs are shrinking, flex box distributes the size based on their widths (which is different). It should actually distribute it based on width + margin.
// So, if the items were static (no shrink or grow), it would work without a wrapper.
// A programmatic layout would not make it easier because we are using transitions.
// When the inBackground property changes, the items need to be layouted considering the margin, but reading the margin would return the wrong value while the transition is running.
.view-tab-wrapper {
  display: flex;
  width: @view-tab-selected-width;
}

.view-tab {
  position: relative;
  border-radius: @view-tab-border-radius;
  margin: @view-tab-margin-top @view-tab-margin @view-tab-margin;

  & > .key-box {
    bottom: @view-tab-key-box-bottom;
  }

  &.in-background {
    border-radius: @view-tab-selected-border-radius;
  }

  & > .edge {
    // Ensure GlassPane.js does not set position: relative if glass pane is added before view tab is selected
    position: absolute;
  }

  &.selected:not(.in-background) {
    margin: @view-tab-selected-margin-top 0 0;
    border-radius: @view-tab-selected-border-radius @view-tab-selected-border-radius 0 0;

    & > .edge {
      #scout.inverted-bottom-round-edge(@border-radius: @view-tab-selected-border-radius, @color: @view-tab-selected-background-color);

      &.right {
        z-index: 1; // lay over right tab
      }
    }

    & > .key-box {
      bottom: @view-tab-key-box-bottom + @view-tab-margin;
    }
  }

  &.animate-bring-to-front,
  &.animate-bring-to-back {
    // Transition should only be active when desktop changes from back to front and back, not when outline is changed
    // The classes animate-* are only set while the animation is running, thus, we need an animation, even if it does nothing (nop)
    transition: @view-tab-transition;
    animation: nop @view-tab-transition-duration ease-out;

    &:not(.in-background) {

      & > .edge {

        &.left {
          visibility: hidden;
          animation: show-view-tab-left-edge 40ms ease-out 160ms forwards;
        }

        &.right {
          visibility: hidden;
          animation: show-view-tab-right-edge 40ms ease-out 160ms forwards;
        }
      }
    }
  }
}

.view-button-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: calc(~'100% - ' 2 * @view-tab-margin);

  &:hover {
    cursor: pointer;
    background-color: @view-tab-hover-background-color;
  }

  &.selected {
    background-color: @view-tab-selected-background-color;
    color: @view-tab-selected-color;

    &.in-background {
      background-color: @view-tab-in-background-selected-background-color;
    }

    &:not(.in-background) {
      width: 100%;
    }
  }

  &.disabled {
    color: @desktop-header-disabled-color;;

    &:hover {
      cursor: default;
      color: @desktop-header-disabled-color;
      background-color: transparent;
    }

    &.selected {
      color: @text-disabled-color;
    }
  }

  & > .icon {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    font-size: @view-tab-icon-font-size;
  }
}

@keyframes show-view-tab-left-edge {
  0% {
    visibility: visible;
    left: -5px;
  }
  100% {
    left: -12px;
  }
}

@keyframes show-view-tab-right-edge {
  0% {
    visibility: visible;
    right: -5px;
  }
  100% {
    right: -12px;
  }
}