task.component.scss

@import '../../../../variables';
@import '~angular-material-css-vars/public-util';

$task-shadow: $shadow-card-shadow;
$sub-task-shadow: $whiteframe-shadow-1dp;
$task-active-shadow: $whiteframe-shadow-6dp;
$task-first-line-min-height: 40px;
$task-icon-default-opacity: 0.7;
$task-current-task-zoom: 1.0178571428, 1;
$task-inner-padding-top-bottom: 4px;
$task-is-done-dim-opacity: 0.3;

// z-indexes
$z-drag-handle: 1;
$z-task-title: 4;
$z-btn: 4;
$z-time-wrapper: 4;
$z-btn-hover: 5;
$z-hover-controls: 6;
$z-progress-bar: 7;

$z-check-done: 11;
$z-first-line-controls-hover: 12;
$z-swipe-block: 13;

$z-is-current-host: 20;
$z-focus-host: 20;

$z-toggle-sub-task-btn: 21;
$z-drag-over-msg: 22;
$z-task-title-focus: 23;

$z-time-btn-svg-wrapper: 5555;

@import './task.component.mixins';


// TASK BOX STYLES
// ---------------
// NOTE: needs to come first to be overwritten by :host.isCurrent
// NOTE: needs to be very light, because we're on a lighter background for the dark theme
:host-context(.isDarkTheme) {
  color: $dark-theme-text-color-most-intense;
}

:host {
  display: block;
  position: relative;

  color: $light-theme-text-color;

  &.isCurrent {
    z-index: $z-is-current-host;
  }

  &:focus {
    z-index: $z-focus-host;
    outline: none;
  }
}


.inner-wrapper {
  position: relative;
  padding: $task-inner-padding-top-bottom 0;
  margin-bottom: 0;

  :host.isAdditionalInfoOpen > & {
    margin-top: $s*2;
    margin-bottom: $s*2;
    box-shadow: $whiteframe-shadow-1dp;
    border-top-width: 1px;
  }
}

.box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  transition: $transition-standard;
  transition-property: transform;
  //border-radius: $card-border-radius;
  border: 1px solid $light-theme-extra-border-color;
  //border: 1px solid #cdcdcd;
  border-top-width: 0;


  :host.gu-mirror & {
    box-shadow: $whiteframe-shadow-8dp !important;
  }

  @include lightTheme {
    background: #fff;
  }

  @include darkTheme {
    border-color: $dark-theme-extra-border-color;
  }

  @include isHostFocus('.inner-wrapper') {
    border-radius: $card-border-radius;

    @include mq(xs) {
      // NOTE: somehow ng build messes up, if we don't include it like that
      border-color: $c-primary;
      border-top-width: 1px;
      border-width: 2px;
    }
  }

  @include isCurrent {
    transform: scale($task-current-task-zoom);
    box-shadow: $task-active-shadow;
    border: 2px solid $c-accent !important;
    border-color: $c-accent !important;
    border-bottom-color: $c-accent !important;
    border-radius: 12px !important;
    bottom: -2px;
    top: -2px;
  }

  :host:first-child > .inner-wrapper > & {
    border-top-left-radius: $card-border-radius;
    border-top-right-radius: $card-border-radius;
  }

  :host:last-child > .inner-wrapper > & {
    border-bottom-left-radius: $card-border-radius;
    border-bottom-right-radius: $card-border-radius;
  }

  // NOTE: there are also styles in the task list component, because of host not being usable
  // with the adjacent child selector
  :host:first-child > .inner-wrapper > &,
  :host.isAdditionalInfoOpen > .inner-wrapper > & {
    border-top-width: 1px;
  }

  // because the shadow gets to intense otherwise
  :host.isAdditionalInfoOpen > .inner-wrapper > & {
    border-bottom-width: 0;
  }


  :host-context(.isLightTheme):last-child > .inner-wrapper > & {
    @include mq(xs, max) {
      border-bottom-color: $light-theme-extra-border-color;
    }
  }

  :host-context(.isDarkTheme):last-child > .inner-wrapper > & {
    @include mq(xs, max) {
      border-bottom-color: rgb(55, 55, 55);
    }
  }

  //.inner-wrapper:not(.isCurrent) > .box {
  //  border-color: transparent;
  //  background: transparent !important;
  //}
}


.sub-tasks {
  margin: $s 0 $s $s*3;
  position: relative;

  @include mq(xs) {
    //margin: $s $s*2 $s $s*3;
    margin: $s 0 $s $s*5;
  }
}


.first-line {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  user-select: none;
  justify-content: space-between;
  min-height: $task-first-line-min-height;
  touch-action: pan-y;

  @include mq(xs, max) {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}


.title-and-left-btns-wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  flex-grow: 1;
  flex-basis: 70%;
  @include mq(xs, max) {
    //margin-bottom: 5px;
    //flex-shrink: 0;
    flex-basis: 50%;
  }

  @include isDoneForFirstLine {
    opacity: $task-is-done-dim-opacity;
  }
}

// CONTROLS
// --------
.all-controls-wrapper {
  display: flex;
  flex-flow: row;
  position: relative;
  margin-left: $s;
  align-items: stretch;
}

.controls {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  text-align: right;
  margin-right: 2px;
  position: relative;

  button {
    margin-top: auto;
    margin-bottom: auto;
  }

  @include mq(xs, max) {
    white-space: normal;
    margin-left: 5px;
  }
}


.hover-controls {
  transform-origin: right center;
  position: absolute;
  right: 100%;
  top: 0;
  bottom: 0;
  z-index: $z-hover-controls;


  @include mq(xs, max) {
    display: none !important;
  }

  @include mq(xs) {
    display: none;
  }

  button {
    margin-top: auto;
    margin-bottom: auto;
  }

  .first-line:hover & {
    display: flex;
  }

  // extra hitarea
  &:after {
    position: absolute;
    top: -$s*1.5;
    right: 0;
    left: -$s*1.5;
    bottom: -$s*1.5;
    content: '';
  }

  &:before {
    content: '';
    border-left: 1px solid;
    width: 1px;
    height: 90%;
    position: absolute;
    left: 0;
    top: 5%;
    opacity: 0.5;
  }
}


// OTHER UI ELEMENTS
// -----------------

// TASK TITLE
.task-title {
  flex-grow: 1;
  text-align: left;
  outline: none;
  margin-left: 2px;
  padding: 4px 0 4px 6px;
  line-height: 1.5;
  min-height: 20px;
  text-overflow: ellipsis;
  cursor: text;
  transition: $transition-leave;
  transition-property: opacity, transform;
  background: inherit;
  position: relative;
  overflow: visible;
  user-select: none;
  caret-color: #000000;
  z-index: $z-task-title;

  // needs to be block for it not to mess up
  display: block !important;

  @include darkTheme() {
    caret-color: #ffffff;
  }

  &:first-letter {
    // we can't do this, as this messes up text input :/
    // text-transform: uppercase;
  }


  &:after {
    transition: $transition-leave;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    opacity: 0;
    z-index: -1;
    pointer-events: none;

    @include inlineEditElevation();
  }


  &:focus {
    z-index: $z-task-title-focus;
    user-select: all;
    // thee magic number is 16/14 so we scale to whole pixels
    transform: scale(1.142857143);
    transition: $transition-standard;

    // NOTE: needed to overwrite color for current task
    color: $light-theme-text-color;

    @include darkTheme() {
      color: #fff;
    }

    .is-hide-controls & {
      transform-origin: center center;
      transform: scale(1.142857143) translateX(20px);
    }

    &:after {
      opacity: 1;
      transition: $transition-standard;
    }

    @include mq(xs, max) {
      transform: scale(1);
    }
  }
}


// TIME
.time-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
  margin-right: $s;
  z-index: $z-time-wrapper;

  &.isEditable {
    cursor: pointer;

    &:hover {
      .time {
        transition: $transition-standard;
        opacity: 1 !important;
      }
    }
  }


  @include mq(xs, max) {
    @include isDoneForFirstLine {
      opacity: $task-is-done-dim-opacity +0.1;
    }
    &:after {
      content: '';
      border-top: 1px solid;
      opacity: 0.1;
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
    }
  }

  .time {
    font-style: italic;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    font-weight: 300;

    @include mq(xs) {
      opacity: 0.5;
      flex-direction: row;
    }

    @include mq(xs, max) {
      font-size: 13px;
    }

    .time-val,
    .separator {
      display: block;
      white-space: nowrap;
    }

    .separator {
      padding: 0 $s/2;
      @include mq(xs, max) {
        display: none;
      }
    }
  }
}


.additional-info {
  display: block;
  // required as sort of a clearfix (fixes padding issue)
  overflow: hidden;
}


.drag-over-msg {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 1;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  display: flex;
  z-index: $z-drag-over-msg;
}


.check-done {
  opacity: 0.5;
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  z-index: $z-check-done;
  transform: translate(-50%, -50%);
  transition: $transition-standard;
  border-radius: 50%;

  &:hover {
    opacity: 1 !important;
  }

  mat-icon {
    $task-size: 40px;
    font-size: $task-size;
    height: $task-size;
    width: $task-size;
    line-height: $task-size;

    &.undo {
      display: none;
    }
  }

  &:hover {
    mat-icon {
      animation: $transition-duration-m success-btn-ani linear;
    }

    .check {
      display: none;
    }

    .undo {
      display: block;
    }
  }
}


// SWIPE BLOCKS
.block-left,
.block-right {
  position: absolute;
  top: -1* $task-inner-padding-top-bottom;
  bottom: -1* $task-inner-padding-top-bottom;
  width: 33%;
  min-width: 100px;
  z-index: $z-swipe-block;
  transition: $transition-standard;
  transform: scaleX(0);

  &.isActive {
    background-color: $c-accent;
  }

  mat-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scaleX(1);
  }
}


.block-left {
  pointer-events: none;
  color: #fff;
  left: 0;
  transform-origin: left center;
  box-shadow: $shadow-card-shadow;
}

.block-right {
  pointer-events: none;
  color: #fff;
  right: 0;
  transform-origin: right center;
  box-shadow: $shadow-card-shadow;
}

progress-bar {
  z-index: $z-progress-bar;
}


// BUTTON STYLES AND DRAG HANDLE
// -----------------------------
.toggle-sub-tasks-btn,
.first-line .ico-btn {
  $task-button-spacer: 1px;
  margin: 0 $task-button-spacer;
  padding: 0;
  z-index: $z-btn;
  @extend %standardTaskOpacityChange;

  &:hover {
    z-index: $z-btn-hover;
  }

  &:focus {
    outline: none;
  }
}

.first-line .menu-trigger {
  @include mq(xs) {
    opacity: 0;
  }
}

.first-line:hover .menu-trigger {
  @include standardTaskOpacityChange;
}

.delete-btn {
  mat-icon.delete-icon {
    color: $c-warn !important;
  }
}


.drag-handle {
  min-width: 24px;
  margin: 0 4px 0 9px;
  position: relative;
  z-index: $z-drag-handle;
  cursor: grab;
  @extend %standardTaskOpacityChange;

  // fixes drag and drop on mobile
  touch-action: none;

  @include mq(xs) {
    opacity: 0;
    .first-line:hover & {
      opacity: 1;
    }
  }

  &:active {
    cursor: grabbing;
  }

  // hit area
  &:after {
    content: '';
    position: absolute;
    top: -$s*0.25;
    bottom: -$s*0.25;
    left: -$s*0.25;
    right: -$s*0.25;

    @include mq(xs) {
      top: -$s*2;
      bottom: -$s*2;
      left: -$s*2;
      right: -$s*0.5;
    }
  }
}

.ico-btn {
  color: inherit;

  &.mat-accent {
    color: $c-accent;
  }
}

.toggle-sub-tasks-btn,
.first-line .ico-btn {
  $task-button-spacer: 1px;
  margin: auto $task-button-spacer;
  padding: 0;
  z-index: $z-btn;

  @extend %standardTaskOpacityChange;

  &:hover {
    z-index: $z-btn-hover;
  }

  &:focus {
    outline: none;
  }
}

.toggle-sub-tasks-btn.toggle-sub-tasks-btn {
  position: absolute !important;
  transform: translateY(-50%);
  left: -24px;
  top: 50%;
  z-index: $z-toggle-sub-task-btn !important;
  min-width: 0;
  min-height: 0;
  width: 32px;
  height: 32px;
  margin-top: -1px !important;
  transform-origin: left top;
  transition-property: all;

  @include mq(xs, max) {
    //display: none;
  }

  :host-context(.isNoTouchDevice) & {
    opacity: 0;
  }

  @include mq(xs, max) {
    //display: none;
  }

  :host:hover & {
    opacity: 1;
  }

  @include reducedTheme {
    background: transparent !important;
    box-shadow: none !important;
  }

  mat-icon {
    transition: $transition-standard;
    margin-top: -8px;
    opacity: $task-icon-default-opacity;

    &.isHideDoneTasks {
      transform: rotate(-45deg);
    }
  }
}

.attachment-btn,
.show-additional-info-btn {
  mat-icon {
    transition: transform $transition-standard;
    backface-visibility: hidden;
  }

  &.isActive mat-icon {
    transform: rotate(45deg);
  }
}


.start-task-btn {
  :host-context(.isHidePlayBtn) & {
    display: none !important;
  }
}

// ANIMATIONS ETC
// --------------
@keyframes success-btn-ani {
  0% {
    transform: scale(0.5) rotate(-180deg);
  }
  50% {
    transform: scale(1) rotate(-90deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.isPreventPointerEventsWhilePanning {
  * {
    user-select: none !important;
    pointer-events: none !important;
    transition: none !important;
  }
}

$min-badge-size: $s*2.25;
.mini-badge {
  line-height: $min-badge-size;
  width: $min-badge-size;
  height: $min-badge-size;
  font-size: 12px;
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  text-align: center;
}

.play-icon-indicator {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: $c-accent;

  height: 20px;
  width: 20px;

  .first-line:hover & {
    display: none;
  }
}