@tuki-io/tuki-widgets 0.0.133 → 0.0.134

package/projects/tuki/widgets/di2mt/widgets/site-upgrade/site-upgrade-data-table/site-upgrade-data-table.component.scss

@@ -0,0 +1,460 @@
+@import url("https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
+
+.webex-action-menu {
+  box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.1) !important;
+  border-radius: 0px !important;
+  width: 258px;
+  box-sizing: content-box;
+  cursor: pointer;
+}
+.webex-action-menu-row-disabled {
+  cursor: default !important;
+  opacity: 0.4;
+
+  .webex-action-menu-title {
+    color: #bababa !important;
+    line-height: 23px;
+  }
+}
+.app-progress-bar-container {
+  margin: 7px 20px 0 0;
+}
+.progress-bar-container {
+  min-width: 40px;
+}
+.webex-action-menu-row:hover {
+  background: #f5f5f5;
+}
+.webex-icon {
+  display: inline-block;
+  height: 25px;
+  width: 25px;
+  margin: 0 7px 0 0;
+}
+.webex-details-icon {
+  background-image: url("../../../assets/icons/details_d_icon.svg");
+}
+.webex-action-menu-row {
+  padding: 5px 15px;
+  display: flex;
+  justify-content: flex-start;
+
+  .webex-action-menu-title {
+    line-height: 23px;
+  }
+}
+.mat-menu-content:not(:empty) {
+  padding-top: 0 !important;
+}
+.mat-menu-panel {
+  min-height: auto !important;
+}
+
+#siteUpgradeTable {
+  font-family: "Inter", sans-serif !important;
+}
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.4);
+  z-index: 200;
+}
+.mat-progress-spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -20px;
+  margin-left: -25px;
+  width: 50px;
+  height: 40px;
+  text-align: center;
+  font-size: 10px;
+}
+.mat-progress-spinner-td {
+  position: relative;
+
+  .mat-progress-spinner {
+    top: 28%;
+    left: 0;
+    margin: 0;
+    position: absolute;
+  }
+}
+.progress-percents {
+  font-weight: 500;
+  font-size: 12px;
+}
+
+:host ::ng-deep {
+  .mat-progress-spinner-td {
+    position: relative;
+  }
+  #siteUpgradeTable .mat-progress-spinner-td {
+    .mat-progress-spinner {
+      top: 28%;
+      left: 0;
+      margin: 0;
+    }
+  }
+}
+
+.site-upgrade-status-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+  align-items: stretch;
+}
+
+.site-upgrade-table {
+  width: 100%;
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
+  font-size: 14px;
+
+  .mat-header-row {
+    // background-color: #ededed;
+    font-size: 12px;
+    height: 35px;
+  }
+
+  .mat-cell {
+    border-bottom: 1px solid #d6d6d6;
+    font-family: "Inter", sans-serif !important;
+  }
+  .mat-header-cell {
+    border-bottom: 1px solid #afafaf;
+    font-family: "Inter", sans-serif !important;
+  }
+
+  // Site info styling
+  .site-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .site-indicator {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: #1170cf;
+    }
+  }
+  .indicator-status-ready {
+    color: #1170cf !important;
+  }
+
+  // Device info styling
+  .device-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    .device-name-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      // margin-bottom: 2px;
+
+      .device-name {
+        font-weight: 500;
+        color: #212121;
+      }
+
+      .device-indicator {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: #f8cd00;
+      }
+    }
+
+    .device-model {
+      font-size: 12px;
+      color: #757575;
+    }
+  }
+
+  // Status indicators
+  .status-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .status-indicator {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+
+      &.ready {
+        background-color: #1170cf;
+      }
+
+      &.partial-ready {
+        background-color: #f8cd00;
+      }
+
+      &.not-ready {
+        background-color: #9e9e9e;
+      }
+
+      &.completed {
+        background-color: #1d805f;
+      }
+
+      &.failed {
+        background-color: #f23933;
+      }
+    }
+  }
+
+  // Dependencies styling
+  .dependencies-text {
+    font-size: 12px;
+    background-color: #ffe9e9;
+    padding: 0.25rem 0.5rem;
+    border-radius: 3px;
+    color: #000;
+  }
+
+  // Upgrade status cell
+  .upgrade-status-cell {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  .flex-container {
+    display: flex;
+  }
+
+  .upgrade-button {
+    border: 1px solid #08599c !important;
+    color: #08599c !important;
+    background: white !important;
+    border-radius: 20px !important;
+    font-size: 14px !important;
+    font-style: normal !important;
+    font-weight: 500 !important;
+    height: 32px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+
+    &:hover {
+      background-color: #e3f2fd !important;
+    }
+  }
+
+  // User count info styling
+  .user-count-info {
+    .user-count {
+      font-weight: 500;
+      color: #212121;
+      // margin-bottom: 2px;
+    }
+
+    .user-label {
+      font-size: 12px;
+      color: #757575;
+    }
+  }
+
+  // Status icon cell styling
+  .status-icon-cell, .collect-icon-cell {
+    display: flex;
+    align-items: center;
+  }
+
+  .icon-play {
+    width: 24px;
+    height: 24px;
+    background-image: url("../../../assets/icons/icon_play.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+  }
+  .collect-icon-cell {
+    cursor: pointer;
+  }
+}
+
+:host ::ng-deep .action-wrapper {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  justify-content: space-between;
+  gap: 1rem;
+  color: #555555;
+}
+
+.table-action-panel {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 1rem;
+}
+
+/// Play button
+// Pay Button Icon - Circle with right arrow triangle
+.pay-button-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 1px solid #2c355d; // Light grey border
+  background-color: #ffffff;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+
+  // Blue right arrow triangle
+  &::after {
+    content: "";
+    width: 0;
+    height: 0;
+    border-left: 6px solid #2c355d; // Blue color
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+    margin-left: 2px; // Slight offset to center visually
+  }
+
+  // Hover effects
+  &:hover {
+    border-color: #2c355d;
+    background-color: #f8fafc;
+    transform: scale(1.05);
+
+    &::after {
+      border-left-color: #2c355d; // Darker blue on hover
+    }
+  }
+
+  // Active/pressed state
+  &:active {
+    transform: scale(0.95);
+    background-color: #e2e8f0;
+  }
+
+  // Disabled state
+  &:disabled,
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    &:hover {
+      transform: none;
+      border-color: #d1d5db;
+      background-color: #ffffff;
+
+      &::after {
+        border-left-color: #2c355d;
+      }
+    }
+  }
+}
+
+// Size variations
+.pay-button-icon {
+  // Small size
+  &.small {
+    width: 32px;
+    height: 32px;
+    border-width: 1.5px;
+
+    &::after {
+      border-left-width: 6px;
+      border-top-width: 5px;
+      border-bottom-width: 5px;
+      margin-left: 1px;
+    }
+  }
+
+  // Large size
+  &.large {
+    width: 48px;
+    height: 48px;
+    border-width: 2.5px;
+
+    &::after {
+      border-left-width: 10px;
+      border-top-width: 7px;
+      border-bottom-width: 7px;
+      margin-left: 3px;
+    }
+  }
+
+  // Extra large size
+  &.xl {
+    width: 56px;
+    height: 56px;
+    border-width: 3px;
+
+    &::after {
+      border-left-width: 12px;
+      border-top-width: 8px;
+      border-bottom-width: 8px;
+      margin-left: 3px;
+    }
+  }
+}
+
+// Animation for loading state
+.pay-button-icon {
+  &.loading {
+    &::after {
+      display: none;
+    }
+
+    &::before {
+      content: "";
+      width: 16px;
+      height: 16px;
+      border: 2px solid #2c355d;
+      //border-top-color: #2563eb;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// Usage with button text
+.pay-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  color: #2c355d;
+  transition: color 0.3s ease;
+
+  .pay-button-icon {
+    margin: 0;
+  }
+}