@propbinder/mobile-design 0.2.47 → 0.2.50

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

@@ -0,0 +1,390 @@
+/**
+ * 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

@@ -0,0 +1,108 @@
+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');
+  }
+}