@propbinder/mobile-design 0.2.50 → 0.2.52

package/src/components/post-detail-modal/ds-mobile-post-detail-modal.css

@@ -1,390 +0,0 @@
-/**
- * Post Detail Modal Specific Styles
- * 
- * Component-specific styles for the post detail modal.
- * Base modal styles are inherited from ds-mobile-modal-base.css
- */
-
-/* ============================================
-   POST CONTENT
-   ============================================ */
-
-/* Old container no longer needed - sections provide structure */
-.post-detail-container {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  width: 100%;
-  padding: 0;
-}
-
-/* Old section wrapper no longer needed - using ds-mobile-section now */
-.post-section {
-  width: 100%;
-  border-bottom: none;
-  padding: 0;
-}
-
-.post-content-only {
-  font-size: var(--font-size-sm);
-  line-height: 24px;
-  color: var(--color-text-primary, #1a1a1a);
-  margin-bottom: 16px;
-}
-
-.post-content-only post-media {
-  margin-top: 16px;
-}
-
-.post-actions {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.clickable-image {
-  cursor: pointer;
-  transition: transform 0.2s ease, opacity 0.2s ease;
-  border-radius: 8px;
-  display: block;
-  width: 100%;
-  aspect-ratio: 16/9;
-  -o-object-fit: cover;
-     object-fit: cover;
-}
-
-.clickable-image:active {
-  transform: scale(0.98);
-  opacity: 0.9;
-}
-
-/* ============================================
-   COMMENTS SECTION
-   ============================================ */
-
-/* Old section wrapper no longer needed - using ds-mobile-section now */
-.comments-section {
-  display: flex;
-  flex-direction: column;
-  margin-left: 0;
-  margin-right: 0;
-  padding: 0;
-  padding-bottom: 0;
-}
-
-/* Old header no longer needed - section headline provides this */
-.comments-header {
-  font-family: 'Brockmann', sans-serif;
-  font-size: var(--font-size-base);
-  font-weight: 600;
-  line-height: 24px;
-  color: var(--color-text-primary, #1a1a1a);
-  margin: 0 0 16px 0;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.comments-list {
-  display: flex;
-  flex-direction: column;
-}
-
-/* ============================================
-   COMMENT COMPOSER
-   ============================================ */
-
-/* Comment Composer */
-.comment-composer {
-  pointer-events: auto;
-  background: var(--color-background-neutral-primary, #ffffff);
-  border-top: 1px solid var(--border-color-default);
-  padding: 12px 16px;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-/* Edit indicator */
-.edit-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  background: var(--color-background-brand-subtle, #f0edfe);
-  border-radius: 8px;
-  animation: slideDown 0.2s ease-out;
-}
-
-.edit-indicator-content {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--color-accent, #6b5ff5);
-  flex: 1;
-  min-width: 0;
-}
-
-.edit-text {
-  font-family: 'Brockmann', sans-serif;
-  font-size: var(--font-size-sm);
-  font-weight: 500;
-  line-height: 18px;
-  color: var(--color-accent, #6b5ff5);
-}
-
-.cancel-edit {
-  background: none;
-  border: none;
-  padding: 4px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-accent, #6b5ff5);
-  border-radius: 4px;
-  transition: background 0.2s ease;
-  flex-shrink: 0;
-}
-
-.cancel-edit:active {
-  background: var(--color-brand-subtle, #e0dbfe);
-}
-
-/* Reply indicator */
-.reply-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  background: var(--color-background-neutral-secondary, #f5f5f5);
-  border-radius: 8px;
-  animation: slideDown 0.2s ease-out;
-}
-
-.reply-indicator-content {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  color: var(--color-text-secondary, #737373);
-  flex: 1;
-  min-width: 0;
-}
-
-.reply-to-text {
-  font-family: 'Brockmann', sans-serif;
-  font-size: var(--font-size-sm);
-  line-height: 18px;
-  color: var(--color-text-secondary, #737373);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.reply-author {
-  color: var(--color-accent, #6b5ff5);
-  font-weight: 600;
-}
-
-.cancel-reply {
-  background: none;
-  border: none;
-  padding: 4px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-secondary, #737373);
-  border-radius: 4px;
-  transition: background 0.2s ease;
-  flex-shrink: 0;
-}
-
-.cancel-reply:active {
-  background: var(--color-background-neutral-secondary, #f5f5f5);
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.composer-content {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  width: 100%;
-  position: relative;
-}
-
-.composer-content ds-avatar {
-  position: relative;
-  top: 6px;
-}
-
-.composer-input-wrapper {
-  flex: 1;
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  background: var(--color-background-neutral-secondary, #f5f5f5);
-  border-radius: 24px;
-  padding: 12px 16px;
-  padding-right: 48px; /* Extra padding for fixed send button */
-  min-height: 44px;
-  position: relative;
-}
-
-/* Mention menu */
-.mention-menu {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  right: 0;
-  background: var(--color-background-neutral-primary, #ffffff);
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  margin-bottom: 8px;
-  max-height: 200px;
-  overflow-y: auto;
-  z-index: 10;
-  animation: slideUp 0.2s ease-out;
-}
-
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.mention-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px;
-  border: none;
-  background: none;
-  width: 100%;
-  text-align: left;
-  cursor: pointer;
-  transition: background 0.2s ease;
-  border-bottom: 1px solid var(--border-color-default);
-}
-
-.mention-menu-item:last-child {
-  border-bottom: none;
-}
-
-.mention-menu-item:active {
-  background: var(--color-background-neutral-secondary, #f5f5f5);
-}
-
-.mention-user-info {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: 1;
-  min-width: 0;
-}
-
-.mention-user-name {
-  font-family: 'Brockmann', sans-serif;
-  font-size: var(--font-size-base);
-  font-weight: 600;
-  line-height: 20px;
-  color: var(--color-text-primary, #1a1a1a);
-}
-
-.mention-user-role {
-  font-family: 'Brockmann', sans-serif;
-  font-size: var(--font-size-sm);
-  line-height: 18px;
-  color: var(--color-text-secondary, #737373);
-}
-
-.composer-input {
-  flex: 1;
-  border: none;
-  background: transparent;
-  font-family: 'Brockmann', sans-serif;
-  font-size: var(--font-size-sm);
-  line-height: 20px;
-  color: var(--color-text-primary, #1a1a1a);
-  outline: none;
-  resize: none;
-  min-height: 20px;
-  max-height: 120px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 0;
-  margin: 0;
-}
-
-.composer-input::-moz-placeholder {
-  color: var(--color-text-tertiary, #a0a0a0);
-  font-size: var(--font-size-sm);
-}
-
-.composer-input::placeholder {
-  color: var(--color-text-tertiary, #a0a0a0);
-  font-size: var(--font-size-sm);
-}
-
-/* Style the send button (ds-icon-button) - positioned in top right corner */
-.send-button-fixed {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  z-index: 10;
-  flex-shrink: 0;
-  opacity: 0;
-  transform: translateX(20px) scale(0.8);
-  pointer-events: none;
-  transition: opacity 0.15s ease-in, transform 0.15s ease-in;
-}
-
-.send-button-fixed.show {
-  opacity: 1;
-  transform: translateX(0) scale(1);
-  pointer-events: auto;
-  animation: slideInFromRight var(--spring-bouncy);
-}
-
-/* Exit animation when button is removed */
-@media (prefers-reduced-motion: no-preference) {
-  .send-button-fixed {
-    transition: opacity 0.15s ease-in, transform 0.15s ease-in;
-  }
-}
-
-.send-button-fixed::ng-deep button {
-  width: 32px !important;
-  height: 32px !important;
-  min-width: 32px !important;
-  min-height: 32px !important;
-  padding: 0 !important;
-  border-radius: 50% !important;
-}
-
-/* Slide in animation from right */
-@keyframes slideInFromRight {
-  from {
-    opacity: 0;
-    transform: translateX(20px) scale(0.8);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0) scale(1);
-  }
-}

package/src/components/post-detail-modal/ds-mobile-post-detail-modal.service.ts

@@ -1,108 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ModalController } from '@ionic/angular/standalone';
-import {
-  DsMobilePostDetailModalComponent,
-  PostDetailData,
-} from './ds-mobile-post-detail-modal';
-import { BaseModalService } from '../../services/base-modal.service';
-
-/**
- * DsMobilePostDetailModalService
- *
- * Service for displaying post details in a full-screen modal.
- * Built on Ionic's modal system with native gestures and animations.
- * Follows the same pattern as DsMobileLightboxService for consistent behavior.
- *
- * Features:
- * - Full post content display
- * - Comments section
- * - Like/comment actions
- * - Image lightbox integration
- * - Native modal animations
- * - Safe area support
- *
- * @example
- * ```typescript
- * constructor(private postModal: DsMobilePostDetailModalService) {}
- *
- * async openPost() {
- *   await this.postModal.open({
- *     postId: '123',
- *     authorName: 'John Doe',
- *     authorRole: 'Tenant',
- *     timestamp: '2h ago',
- *     avatarInitials: 'JD',
- *     content: 'Just moved into my new apartment!',
- *     isLiked: false,
- *     likeCount: 42,
- *     commentCount: 12,
- *     comments: [
- *       {
- *         authorName: 'Jane Smith',
- *         authorRole: 'Tenant',
- *         timestamp: '1h ago',
- *         avatarInitials: 'JS',
- *         content: 'Welcome to the community!'
- *       }
- *     ]
- *   });
- * }
- * ```
- */
-@Injectable({
-  providedIn: 'root',
-})
-export class DsMobilePostDetailModalService extends BaseModalService {
-  constructor(modalController: ModalController) {
-    super(modalController);
-  }
-
-  /**
-   * Open the post detail modal
-   *
-   * @param postData Post data to display
-   * @param options Optional loading and error states
-   * @returns Promise that resolves when the modal is presented
-   */
-  async open(
-    postData: PostDetailData,
-    options?: {
-      loading?: boolean;
-      error?: string;
-      onTogglePostLike?: (payload: { postId: string; active: boolean }) => void;
-      onSubmitComment?: (payload: { postId: string; text: string }) => void;
-      onToggleCommentLike?: (payload: {
-        commentId: string;
-        active: boolean;
-      }) => void;
-      onEditComment?: (payload: { commentId: string; newText: string }) => void;
-      onDeleteComment?: (payload: { commentId: string }) => void;
-      currentUserName?: string;
-      currentUserInitials?: string;
-    }
-  ): Promise<void> {
-    // console.log('[PostDetailModal] Opening with data:', postData);
-    // console.log('[PostDetailModal] options.onSubmitComment =', options?.onSubmitComment);
-
-    const modal = await this.createModal(
-      DsMobilePostDetailModalComponent,
-      {
-        postData: postData,
-        loading: options?.loading ?? false,
-        error: options?.error,
-        onTogglePostLike: options?.onTogglePostLike,
-        onSubmitComment: options?.onSubmitComment,
-        onToggleCommentLike: options?.onToggleCommentLike,
-        currentUserName: options?.currentUserName ?? '',
-        currentUserInitialsInput: options?.currentUserInitials ?? '',
-      },
-      {
-        keyboardClose: true, // Keep keyboard close behavior for this modal
-      }
-    );
-
-    // console.log('[PostDetailModal] Modal created, presenting...');
-    await modal.present();
-    // console.log('[PostDetailModal] Modal presented');
-  }
-}