@worktile/gantt 12.2.2 → 13.0.0-next.1

package/components/bar/bar.component.scss

@@ -0,0 +1,201 @@
+@use 'sass:math';
+@use '../../styles/variables';
+
+$gantt-bar-layer-append-width: 32px;
+$gantt-bar-layer-append-height: 42px;
+$gantt-bar-link-height: 16px;
+$gantt-bar-link-handle-size: 16px;
+$gantt-bar-link-drop-border: 5px;
+
+@mixin link-handles {
+  .link-handles {
+    .handle {
+      position: absolute;
+      display: inline-block;
+      cursor: pointer;
+      width: $gantt-bar-link-height;
+      height: $gantt-bar-link-height;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1001;
+
+      &:first-child {
+        left: 0;
+        top: 0;
+      }
+
+      &:last-child {
+        right: 0;
+        bottom: 0;
+      }
+
+      .point {
+        color: #348fe4;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: #348fe4;
+        transition: 0.3 ease;
+
+        &:hover {
+          width: 12px;
+          height: 12px;
+        }
+      }
+    }
+  }
+}
+
+@mixin drag-handles {
+  .drag-handles {
+    background: variables.$gantt-bar-layer-bg;
+    width: 100%;
+    height: calc(100% - #{$gantt-bar-link-height} * 2);
+    position: absolute;
+    border-radius: 4px;
+    top: $gantt-bar-link-height;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
+
+    .handle {
+      width: 15px;
+      height: 100%;
+      position: absolute;
+      cursor: col-resize;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:before,
+      &:after {
+        content: '';
+        display: inline-block;
+        width: 1px;
+        height: variables.$gantt-bar-handle-height;
+        background: variables.$gantt-bar-handle-color;
+      }
+
+      &::before {
+        margin-right: 2px;
+      }
+
+      &:first-child {
+        left: 0;
+      }
+
+      &:last-child {
+        right: 0;
+      }
+    }
+  }
+}
+
+@mixin active-bar {
+  z-index: 1000;
+
+  .gantt-bar-layer {
+    display: block;
+    z-index: 1;
+  }
+
+  .gantt-bar-content {
+    z-index: 1;
+    box-shadow: none;
+  }
+
+  .cdk-drag {
+    transition: none;
+  }
+}
+
+.gantt-bar {
+  position: absolute;
+  border-radius: 4px;
+  z-index: 2;
+  background: variables.$gantt-bar-bg;
+
+  .gantt-bar-layer {
+    width: calc(100% + #{$gantt-bar-layer-append-width});
+    height: calc(100% + #{$gantt-bar-layer-append-height});
+    position: absolute;
+    border-radius: 4px;
+    left: math.div($gantt-bar-layer-append-width, 2) * -1;
+    top: math.div($gantt-bar-layer-append-height, 2) * -1;
+    display: none;
+    @include drag-handles();
+    @include link-handles();
+  }
+
+  .gantt-bar-border {
+    width: calc(100% + #{$gantt-bar-link-drop-border} * 2);
+    height: calc(100% + #{$gantt-bar-link-drop-border} * 2);
+    position: absolute;
+    border-radius: 4px;
+    left: $gantt-bar-link-drop-border * -1;
+    top: $gantt-bar-link-drop-border * -1;
+    display: none;
+    background: #fff;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .gantt-bar-content {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    cursor: pointer;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    background: variables.$gantt-bar-background-color;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    .gantt-bar-content-progress {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+    }
+  }
+
+  &-active {
+    @include active-bar();
+  }
+
+  &-single-drop-active {
+    .gantt-bar-border {
+      display: block;
+    }
+
+    .gantt-bar-content {
+      box-shadow: none;
+    }
+  }
+
+  &-drop-active {
+    @include active-bar();
+
+    .gantt-bar-layer {
+      .link-handles {
+        .handle {
+          width: $gantt-bar-link-handle-size + 10px;
+          height: 100%;
+
+          &:first-child {
+            left: -$gantt-bar-link-handle-size - 5px;
+          }
+
+          &:last-child {
+            right: -$gantt-bar-link-handle-size - 5px;
+          }
+
+          &:hover {
+            .point {
+              width: 12px;
+              height: 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/components/calendar/calendar.component.scss

@@ -0,0 +1,79 @@
+@use '../../styles/variables';
+
+.gantt-calendar-overlay {
+  display: block;
+  height: 100%;
+  overflow: hidden;
+
+  .gantt-calendar-today-overlay {
+    position: relative;
+    z-index: 2;
+    .today-rect {
+      width: 35px;
+      height: 24px;
+      position: absolute;
+      background: variables.$gantt-date-today-color;
+      color: variables.$gantt-date-today-text-color;
+      text-align: center;
+      border-radius: 4px;
+    }
+    .today-line {
+      position: absolute;
+      width: 3px;
+      background: variables.$gantt-date-today-color;
+      transform: scaleX(0.5);
+      transform-origin: 100% 0;
+      margin-left: -2px;
+    }
+  }
+
+  .gantt-calendar-overlay-main {
+    position: relative;
+    z-index: 1;
+    background-color: variables.$gantt-bg-color;
+  }
+
+  svg {
+    overflow: visible;
+  }
+
+  line {
+    shape-rendering: crispEdges;
+  }
+
+  .primary-text {
+    fill: variables.$gantt-date-primary-color;
+    font-size: variables.$gantt-date-primary-font-size;
+  }
+
+  .secondary-text {
+    fill: variables.$gantt-date-secondary-color;
+    font-size: variables.$gantt-date-secondary-font-size;
+
+    &-weekend {
+      fill: variables.$gantt-date-secondary-weekend-color;
+    }
+  }
+
+  .primary-text,
+  .secondary-text {
+    text-anchor: middle;
+  }
+
+  .primary-line {
+    stroke: variables.$gantt-date-primary-border;
+  }
+
+  .secondary-line {
+    stroke-dasharray: 2px 5px;
+    stroke: #cacaca;
+  }
+
+  .header-line {
+    stroke: variables.$gantt-border-color;
+  }
+
+  .secondary-backdrop {
+    fill: variables.$gantt-date-week-backdrop-bg;
+  }
+}

package/components/drag-backdrop/drag-backdrop.component.scss

@@ -0,0 +1,50 @@
+@use '../../styles/variables';
+
+.gantt-drag-backdrop {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  display: none;
+}
+
+.gantt-drag-mask {
+  position: absolute;
+  top: variables.$gantt-header-height;
+  z-index: 1;
+  height: 100%;
+  display: none;
+  background: rgba($color: variables.$gantt-item-drag-mask-color, $alpha: 0.05);
+
+  .date-range {
+    width: 100%;
+    min-width: 120px;
+    top: -23px;
+    background: variables.$gantt-item-drag-mask-color;
+    line-height: 23px;
+    border-radius: 4px;
+    color: #fff;
+    position: absolute;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px;
+    box-sizing: border-box;
+  }
+}
+
+.gantt-link-drag-container {
+  width: 100%;
+  height: 1px;
+  overflow: visible !important;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2000;
+
+  .link-dragging-line {
+    stroke: variables.$gantt-link-dragging-line-color;
+    stroke-width: 2px;
+  }
+}

package/components/icon/icon.component.scss

@@ -0,0 +1,13 @@
+.gantt-icon {
+    font-size: 1rem;
+    line-height: 0;
+
+    svg {
+        width: 1em;
+        height: 1em;
+        fill: currentColor;
+        vertical-align: -0.125em;
+        background-repeat: no-repeat;
+    }
+
+}

package/components/links/links.component.scss

@@ -0,0 +1,29 @@
+@use '../../styles/variables';
+
+.gantt-links-overlay {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  svg {
+    overflow: visible;
+    z-index: 2;
+    position: absolute;
+  }
+}
+
+.link-dragging-container {
+  width: 100%;
+  height: 1px;
+  overflow: visible !important;
+  position: absolute;
+  top: variables.$gantt-header-height;
+  left: 0;
+  z-index: 2000;
+
+  .link-dragging-line {
+    stroke: variables.$gantt-link-line-color;
+    stroke-width: 2px;
+  }
+}

package/components/range/range.component.scss

@@ -0,0 +1,35 @@
+.gantt-range {
+  position: absolute;
+  z-index: 2;
+  .gantt-range-main {
+    height: 10px;
+    background: #dfdfdf;
+    border: 1px solid #888;
+    border-radius: 4px 4px 0 0;
+    box-sizing: border-box;
+    position: relative;
+    .gantt-range-main-progress {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      background: #888;
+    }
+  }
+  .gantt-range-triangle {
+    width: 0;
+    height: 0;
+    border-top: 7px solid #888;
+    position: absolute;
+    top: 10px;
+
+    &.left {
+      border-right: 6px solid transparent;
+      left: 0;
+    }
+    &.right {
+      border-left: 6px solid transparent;
+      right: 0;
+    }
+  }
+}

package/components/table/gantt-table.component.scss

@@ -0,0 +1,153 @@
+@use '../../styles/variables';
+
+.gantt-table {
+  display: block;
+  &-empty {
+    height: 100%;
+    position: relative;
+    .gantt-table-body {
+      position: absolute;
+      text-align: center;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      margin-top: 22px;
+      .empty-icon {
+        svg {
+          height: 78px;
+          width: 78px;
+        }
+      }
+      .empty-text {
+        color: #cacaca;
+      }
+    }
+  }
+
+  &-drag-trigger {
+    width: variables.$gantt-table-header-drag-line-width;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    cursor: ew-resize;
+    z-index: 1;
+
+    &:hover {
+      background: variables.$gantt-table-header-drag-line-color;
+      z-index: 2;
+    }
+  }
+
+  &-drag-auxiliary-line {
+    width: variables.$gantt-table-header-drag-line-width;
+    background: variables.$gantt-table-header-drag-line-color;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
+    display: none;
+  }
+
+  .gantt-table-row {
+    display: flex;
+    box-sizing: border-box;
+    border-bottom: 1px solid variables.$gantt-border-color;
+
+    .gantt-table-column {
+      overflow: hidden;
+      border-right: 1px solid variables.$gantt-border-color;
+      box-sizing: border-box;
+      position: relative;
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
+
+  .gantt-table-header {
+    text-align: center;
+    position: sticky;
+    top: 0;
+    background: #fff;
+    z-index: 2;
+    height: variables.$gantt-header-height;
+    line-height: variables.$gantt-header-height;
+
+    .gantt-table-column {
+      font-weight: 400;
+    }
+  }
+
+  .gantt-table-body {
+    .gantt-table-group {
+      display: flex;
+      height: variables.$gantt-group-height;
+      background: variables.$gantt-group-background-color;
+      padding: 0 10px;
+      align-items: center;
+      border-bottom: 1px solid variables.$gantt-border-color;
+      box-sizing: border-box;
+      position: relative;
+
+      .gantt-table-group-title {
+        cursor: pointer;
+
+        .expand-icon {
+          color: #aaa;
+          margin-right: 6px;
+        }
+      }
+    }
+
+    .gantt-table-item {
+      cursor: pointer;
+      &-first-level-group {
+        background: variables.$gantt-group-background-color;
+      }
+
+      &-with-group {
+        .gantt-table-column {
+          &:first-child {
+            padding: 0 15px 0 32px;
+          }
+        }
+      }
+
+      .gantt-table-column {
+        display: flex;
+        padding: variables.$gantt-table-td-padding;
+
+        &:last-child {
+          border-right: none;
+        }
+      }
+
+      .gantt-table-column-content {
+        flex: 1;
+        position: relative;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &:hover {
+        background-color: variables.$gantt-container-background-color;
+      }
+
+      &-active {
+        background-color: rgba($color: variables.$gantt-table-header-drag-line-color, $alpha: 0.1);
+        &:hover {
+          background-color: rgba($color: variables.$gantt-table-header-drag-line-color, $alpha: 0.1);
+        }
+      }
+    }
+
+    .gantt-expand-icon {
+      display: inline-block;
+      width: 20px;
+      color: #aaa;
+    }
+  }
+}