@capillarytech/creatives-library 8.0.242-alpha.10 → 8.0.242-alpha.11

package/v2Containers/WebPush/Create/preview/preview.scss

@@ -0,0 +1,351 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+@import './notification-container';
+
+.webpush-preview-container {
+  .preview-controls {
+    display: flex;
+    margin-bottom: 16px;
+
+    .preview-control-os,
+    .preview-control-browser,
+    .preview-control-state {
+      flex: 1;
+      min-width: 0;
+      
+      > * {
+        max-width: 100%;
+      }
+    }
+
+    .preview-control-browser {
+      margin-left: 16px;
+    }
+
+    .preview-control-label {
+      margin-bottom: 8px;
+      display: block;
+      color: $FONT_COLOR_01;
+    }
+  }
+
+  .preview-controls-compact {
+    display: block;
+    margin-bottom: 16px;
+
+    .preview-control {
+      display: inline-block;
+      vertical-align: top;
+      margin-right: 12px;
+      width: auto;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      > * {
+        max-width: none;
+      }
+    }
+
+    .preview-control-os,
+    .preview-control-browser,
+    .preview-control-state {
+      flex: none;
+      min-width: 0;
+    }
+
+    .preview-control-browser {
+      margin-left: 0;
+    }
+
+    .preview-control-label {
+      margin-bottom: 8px;
+      display: block;
+      color: $FONT_COLOR_01;
+    }
+  }
+
+  .preview-controls-state {
+    // Additional spacing below State dropdown when shown
+    // This ensures proper spacing between State dropdown and notification preview
+    margin-bottom: 16px;
+
+    .preview-control-state {
+      > * {
+        max-width: 100%;
+      }
+    }
+
+    .preview-control-label {
+      margin-bottom: 8px;
+      display: block;
+      color: $FONT_COLOR_01;
+    }
+  }
+
+  .preview-content {
+    margin-bottom: 16px;
+
+    .preview-content-wrapper {
+      width: 100%;
+    }
+
+    .preview-placeholder {
+      padding: 20px;
+      background-color: $CAP_G09;
+      border-radius: 8px;
+      min-height: 200px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: $CAP_G05;
+      font-size: $FONT_SIZE_S;
+    }
+
+    // Notification preview wrapper - styles for preview area container only
+    // This class handles positioning, background, padding, and layout constraints
+    // The actual notification styles are in notification-container.scss
+    .notification-preview {
+      background-color: $CAP_G09;
+      border-radius: 8px;
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      // Additional positioning/container styles can be added here
+      // but NOT styles for .notification-container itself
+      &.preview-unavailable {
+        background-color: transparent;
+        border: 1px dashed $CAP_G06;
+        min-height: 84px;
+      }
+
+      .notification-container {
+        width: 100%;
+      }
+    }
+  }
+
+  .preview-disclaimer {
+    .disclaimer-text {
+      color: $CAP_G05;
+      font-size: $FONT_SIZE_S;
+      line-height: 1.5;
+      text-align: center;
+    }
+  }
+
+  .preview-all-devices-button {
+    margin-top: 16px;
+    text-align: center;
+
+    .preview-all-devices-trigger {
+      border: none;
+      background: transparent;
+      color: map-get($CAP_SECONDARY, base);
+      font-weight: $FONT_WEIGHT_MEDIUM;
+      border-radius: 8px;
+      padding: 8px 16px;
+
+      &:hover:not(:disabled) {
+        background: $CAP_G09;
+      }
+
+      &:disabled {
+        color: $CAP_G05;
+        cursor: not-allowed;
+        background: transparent;
+      }
+    }
+  }
+}
+
+// Make the backdrop transparent for the preview slidebox
+// This prevents double-darkening when it opens over an existing slidebox
+.webpush-preview-slidebox.cap-slide-box-v2 {
+  background: transparent;
+}
+
+// ============================================================================
+// Device Preview Container Styles
+// ============================================================================
+
+/**
+ * Device Preview Container
+ * 
+ * Background container for device frame previews in the SlideBox.
+ * 
+ * Specifications:
+ * - Width: 100% (responsive)
+ * - Height: Determined by device frame content (auto)
+ * - Background: $CAP_G09
+ * - Padding: 24px 16px 16px 16px (top right bottom left)
+ */
+.device-preview-container {
+  width: 100%;
+  background-color: $CAP_G09;
+  padding: 24px 16px 16px 16px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin: 0 auto;
+  // Height is determined by the device frame content
+
+  /**
+   * Device Frame Wrapper
+   * 
+   * Wraps the device frame SVG and positions it centered within the container.
+   * This wrapper will also serve as the positioning reference for notifications
+   * in later phases.
+   */
+  .device-frame-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    // Height determined by device frame image
+
+      /**
+       * Device Frame Asset
+       *
+       * Wraps the frame image and provides the positioning context for the
+       * notification overlay. Anchors notification coordinates to the frame image
+       * itself instead of the background container.
+       */
+      .device-frame-asset {
+        position: relative;
+        display: inline-block;
+        max-width: 100%;
+        width: auto;
+        height: auto;
+        line-height: 0; // remove inline-block whitespace
+      }
+
+    .device-frame {
+      filter: none;
+      transition: none;
+      transform: none;
+      
+      &:hover {
+        filter: none;
+        transform: none;
+      }
+      
+      max-width: 100%;
+      width: auto;
+      height: auto;
+      display: block;
+      object-fit: contain;
+    }
+
+    /**
+     * Device Notification Wrapper
+     * 
+     * Wraps the notification container and positions it relative to the device frame.
+     * This ensures the notification is anchored to the device frame, not the background container.
+     */
+    .device-notification-wrapper {
+      position: absolute;
+      z-index: 10;
+      line-height: normal; // prevent zero line-height inheritance from frame asset
+      // Position is set inline via style prop for precise control
+      &.preview-unavailable {
+        width: 16px;
+        height: 16px;
+        border: 1px dashed $CAP_G06;
+        border-radius: 4px;
+        background: transparent;
+      }
+    }
+
+  }
+
+  .device-notification-wrapper .notification-container.macos-chrome {
+    width: 336px;
+  }
+  .device-notification-wrapper .notification-container.macos-safari {
+    width: 336px;
+  }
+  .device-notification-wrapper .notification-container.windows-chrome {
+    width: 336px;
+  }
+  .device-notification-wrapper .notification-container.android-mobile-chrome.collapsed,
+  .device-notification-wrapper .notification-container.android-mobile-firefox.collapsed,
+  .device-notification-wrapper .notification-container.android-mobile-edge.collapsed,
+  .device-notification-wrapper .notification-container.android-mobile-opera.collapsed {
+    width: 326px;
+    height: 78px;
+  }
+
+  .device-notification-wrapper .notification-container.android-mobile-chrome.collapsed .notification-header.android-mobile-chrome-header,
+  .device-notification-wrapper .notification-container.android-mobile-firefox.collapsed .notification-header.android-mobile-chrome-header,
+  .device-notification-wrapper .notification-container.android-mobile-edge.collapsed .notification-header.android-mobile-chrome-header,
+  .device-notification-wrapper .notification-container.android-mobile-opera.collapsed .notification-header.android-mobile-chrome-header {
+    align-items: center;
+  }
+
+  .device-notification-wrapper .notification-container.android-tablet-chrome.collapsed,
+  .device-notification-wrapper .notification-container.android-tablet-firefox.collapsed,
+  .device-notification-wrapper .notification-container.android-tablet-edge.collapsed,
+  .device-notification-wrapper .notification-container.android-tablet-opera.collapsed {
+    width: 480px;
+    height: 78px;
+  }
+
+  .device-notification-wrapper .notification-container.android-tablet-chrome.collapsed .notification-header.android-mobile-chrome-header,
+  .device-notification-wrapper .notification-container.android-tablet-firefox.collapsed .notification-header.android-mobile-chrome-header,
+  .device-notification-wrapper .notification-container.android-tablet-edge.collapsed .notification-header.android-mobile-chrome-header,
+  .device-notification-wrapper .notification-container.android-tablet-opera.collapsed .notification-header.android-mobile-chrome-header {
+    align-items: center;
+  }
+
+  .device-notification-wrapper .notification-container.android-tablet-chrome.expanded,
+  .device-notification-wrapper .notification-container.android-tablet-firefox.expanded,
+  .device-notification-wrapper .notification-container.android-tablet-edge.expanded,
+  .device-notification-wrapper .notification-container.android-tablet-opera.expanded {
+    width: 480px;
+    min-height: 78px;
+  }
+
+  .device-notification-wrapper .notification-container.ios-chrome.collapsed,
+  .device-notification-wrapper .notification-container.ios-safari.collapsed,
+  .device-notification-wrapper .notification-container.ios-firefox.collapsed,
+  .device-notification-wrapper .notification-container.ios-edge.collapsed,
+  .device-notification-wrapper .notification-container.ios-opera.collapsed {
+    width: 326px;
+    height: 78px;
+  }
+
+  .device-notification-wrapper .notification-container.ios-chrome.collapsed .notification-header.ios-header,
+  .device-notification-wrapper .notification-container.ios-safari.collapsed .notification-header.ios-header,
+  .device-notification-wrapper .notification-container.ios-firefox.collapsed .notification-header.ios-header,
+  .device-notification-wrapper .notification-container.ios-edge.collapsed .notification-header.ios-header,
+  .device-notification-wrapper .notification-container.ios-opera.collapsed .notification-header.ios-header {
+    align-items: center;
+  }
+
+  .device-notification-wrapper .notification-container.ipados-chrome.collapsed,
+  .device-notification-wrapper .notification-container.ipados-safari.collapsed,
+  .device-notification-wrapper .notification-container.ipados-firefox.collapsed,
+  .device-notification-wrapper .notification-container.ipados-edge.collapsed,
+  .device-notification-wrapper .notification-container.ipados-opera.collapsed {
+    width: 480px;
+    height: 78px;
+  }
+
+  .device-notification-wrapper .notification-container.ipados-chrome.collapsed .notification-header.ios-header,
+  .device-notification-wrapper .notification-container.ipados-safari.collapsed .notification-header.ios-header,
+  .device-notification-wrapper .notification-container.ipados-firefox.collapsed .notification-header.ios-header,
+  .device-notification-wrapper .notification-container.ipados-edge.collapsed .notification-header.ios-header,
+  .device-notification-wrapper .notification-container.ipados-opera.collapsed .notification-header.ios-header {
+    align-items: center;
+  }
+
+  .device-notification-wrapper .notification-title {
+    line-height: 1.2;
+  }
+}
+

package/v2Containers/WebPush/Create/preview/styles/_android-mobile-chrome.scss

@@ -0,0 +1,370 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+/**
+ * Android (Mobile) + Chrome Notification Styles
+ */
+
+.notification-container.android-mobile-chrome {
+  background-color: $CAP_WHITE;
+  border: 1px solid $CAP_G08;
+  border-radius: 12px;
+  padding: 12px;
+  box-sizing: border-box;
+
+  &.collapsed {
+    width: 326px;
+    height: 78px;
+
+    .notification-header {
+      display: flex;
+      gap: 12px;
+      height: 100%;
+    }
+
+    .notification-header.android-mobile-chrome-header {
+      align-items: center;
+    }
+
+    .notification-icon-container {
+      width: 28px;
+      height: 28px;
+      padding: 2px;
+      border-radius: 50%;
+    }
+
+    .android-mobile-chrome-content {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 0;
+
+      .notification-title-row {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        min-width: 0;
+
+        .notification-title {
+          font-weight: 600;
+          font-size: $FONT_SIZE_S;
+          color: $FONT_COLOR_01;
+          margin: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          flex: 1;
+          min-width: 0;
+        }
+
+        .notification-time {
+          font-size: $FONT_SIZE_S;
+          color: $CAP_G05;
+          flex-shrink: 0;
+        }
+      }
+
+      .notification-body {
+        font-size: $FONT_SIZE_S;
+        color: $FONT_COLOR_01;
+        margin: 0;
+        line-height: 1.2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+      }
+
+      .notification-url {
+        display: none;
+      }
+    }
+
+    .notification-right-rail {
+      display: flex;
+      gap: 8px;
+      margin-left: 8px;
+      flex-shrink: 0;
+
+      .android-mobile-chrome-brand-icon {
+        width: 30px;
+        height: 30px;
+        padding: 0;
+        background-color: transparent;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .notification-brand-icon {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          border-radius: 4px;
+        }
+      }
+
+      .android-mobile-chrome-arrow {
+        font-size: 5.92px;
+        color: $CAP_G05;
+        line-height: 1;
+        margin-top: 0;
+        padding-top: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .android-mobile-chrome-arrow-icon {
+          height: 5.92px;
+          width: auto;
+          display: block;
+        }
+      }
+    }
+  }
+
+  &.expanded {
+    width: 326px;
+    min-height: 78px;
+    padding: 12px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 8px;
+    position: relative;
+
+    // Browser icon as separate column, aligned to top
+    .android-mobile-expanded-icon {
+      padding: 2px;
+      border-radius: 50%;
+      flex-shrink: 0;
+      align-self: flex-start;
+
+      .notification-icon-container {
+        width: 16px;
+        height: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .notification-icon {
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    .android-mobile-expanded-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .android-mobile-expanded-top {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      width: 100%;
+    }
+
+    .android-mobile-expanded-top-content {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .android-mobile-expanded-title {
+      font-weight: 600;
+      font-size: $FONT_SIZE_S;
+      color: $FONT_COLOR_01;
+      margin: 0;
+      line-height: 1.2;
+      word-break: break-word;
+    }
+
+    // Top container: Browser name, URL, time (all inline) | Brand icon
+    .android-mobile-expanded-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      width: 100%;
+
+      .android-mobile-expanded-header-content {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        flex: 1;
+        min-width: 0;
+        font-family: Roboto, sans-serif;
+        font-size: 10px;
+        line-height: 13px;
+        letter-spacing: 0;
+        overflow: hidden;
+
+        .android-mobile-expanded-browser-name {
+          font-weight: 400;
+          color: $CAP_G04;
+          flex-shrink: 0;
+        }
+
+        .android-mobile-expanded-domain-time {
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          min-width: 0;
+          overflow: hidden;
+
+          .android-mobile-expanded-domain {
+            color: $CAP_G04;
+            font-weight: 400;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .android-mobile-expanded-time {
+            color: $CAP_G04;
+            font-weight: 400;
+            flex-shrink: 0;
+          }
+        }
+      }
+    }
+
+    .android-mobile-chrome-brand-icon {
+      width: 34.288px;
+      height: 34.288px;
+      padding: 0;
+      background-color: transparent;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+
+      .notification-brand-icon {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 4.576px;
+      }
+    }
+
+    // Arrow icon positioned as sibling to wrapper
+    .android-mobile-expanded-arrow {
+      font-size: 5.92px;
+      color: $CAP_G05;
+      line-height: 1;
+      flex-shrink: 0;
+      align-self: flex-start;
+      margin-top: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .android-mobile-expanded-arrow-icon {
+        height: 5.92px;
+        width: auto;
+        display: block;
+      }
+    }
+
+    // Body container: body text, media
+    .android-mobile-expanded-body {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      width: 100%;
+
+      // Body text (limited to 4 lines)
+      .android-mobile-expanded-body-text {
+        font-size: $FONT_SIZE_S;
+        color: $FONT_COLOR_01;
+        margin: 0;
+        line-height: 1.4;
+        word-break: break-word;
+        
+        // Limit notification body to 4 lines with ellipsis
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 4;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      // Media image at bottom (if visible)
+      .android-mobile-expanded-media {
+        width: 100%;
+        margin-top: 4px;
+        border-radius: 8px;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .android-mobile-expanded-media-image {
+          width: 100%;
+          max-width: 100%;
+          height: 192px; // Fixed height limit
+          object-fit: cover; // Ensures image covers the area without distortion
+          object-position: center; // Centers the image
+          display: block;
+          box-sizing: border-box;
+        }
+      }
+    }
+
+    // CTA buttons container - direct child of notification-container, below the three vertical components
+    .android-mobile-expanded-cta-container {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      flex-basis: 100%;
+      box-sizing: border-box;
+      padding-top: 9.6px;
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    .android-mobile-expanded-cta-divider {
+      width: 1px;
+      height: 100%;
+      background-color: $CAP_G07; // #DFE2E7
+      flex-shrink: 0;
+      align-self: stretch;
+    }
+
+    .android-mobile-expanded-cta-button {
+      flex: 1;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 0;
+      box-sizing: border-box;
+
+      &.android-mobile-expanded-cta-button-single {
+        flex: 1;
+        width: 100%;
+      }
+
+      .android-mobile-expanded-cta-button-text {
+        font-family: $FONT_FAMILY; // Roboto
+        font-weight: $FONT_WEIGHT_MEDIUM; // 500
+        font-size: $FONT_SIZE_S; // 12px
+        line-height: 16px;
+        color: $FONT_COLOR_01; // #091E42
+        letter-spacing: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
+      }
+    }
+  }
+}
+