@propbinder/mobile-design 0.2.48 → 0.2.50

package/src/examples/post-create.page.ts

@@ -0,0 +1,311 @@
+import { Component, signal, ViewChild, ElementRef, AfterViewInit, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  DsAvatarComponent,
+  DsIconComponent,
+  DsButtonComponent
+} from '@propbinder/design-system';
+import { DsMobilePageDetailsComponent } from '../components/page-details';
+import { UserService } from '../services/user.service';
+
+/**
+ * PostCreatePageComponent
+ * 
+ * Full-screen detail page for creating new posts in the community feed.
+ * Features Threads-inspired interface with rich text editing capabilities.
+ */
+@Component({
+  selector: 'app-post-create-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    DsAvatarComponent,
+    DsIconComponent,
+    DsButtonComponent,
+    DsMobilePageDetailsComponent
+  ],
+  styles: [`
+    .post-create-container {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      max-width: 640px;
+    }
+    
+    /* ============================================
+       CONTENT AREA
+       ============================================ */
+    
+    .content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+    }
+    
+    .post-composer {
+      display: flex;
+      gap: 12px;
+      margin-bottom: 24px;
+      align-items: flex-start;
+    }
+    
+    .post-composer__avatar {
+      flex-shrink: 0;
+      padding-top: 2px;
+    }
+    
+    .post-composer__main {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    
+    .post-composer__header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      height: 32px;
+    }
+    
+    .post-composer__username {
+      font-family: 'Brockmann', sans-serif;
+      font-size: 15px;
+      font-weight: 600;
+      line-height: 20px;
+      letter-spacing: -0.3px;
+      color: var(--color-text-primary, #1a1a1a);
+    }
+    
+    .post-composer__textarea {
+      width: 100%;
+      min-height: 120px;
+      border: none;
+      outline: none;
+      resize: none;
+      font-family: 'Brockmann', sans-serif;
+      font-size: 15px;
+      font-weight: 400;
+      line-height: 22px;
+      letter-spacing: -0.3px;
+      color: var(--color-text-primary, #1a1a1a);
+      background: transparent;
+      padding: 0;
+    }
+    
+    .post-composer__textarea::placeholder {
+      color: var(--color-text-tertiary, #999999);
+    }
+    
+    .post-composer__actions {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+    }
+    
+    .post-composer__action-btns {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+    
+    .post-composer__action-btn {
+      background: none;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-text-secondary, #737373);
+      transition: color 0.2s ease;
+    }
+    
+    .post-composer__action-btn:hover {
+      color: var(--color-text-primary, #1a1a1a);
+    }
+    
+    /* Thread connector line */
+    .thread-line {
+      position: absolute;
+      left: 35px;
+      top: 60px;
+      bottom: 0;
+      width: 2px;
+      background: var(--border-color-default);
+    }
+    
+    /* ============================================
+       MOBILE OPTIMIZATIONS
+       ============================================ */
+    
+    @media (max-width: 768px) {
+      .content {
+        padding: 12px 16px;
+      }
+    }
+  `],
+  template: `
+    <ds-mobile-page-details
+      [title]="pageTitle()"
+      [backRoute]="'/mobile-tabs-example/announcements'"
+      (back)="handleCancel()">
+      
+      <div class="post-create-container">
+        <div class="post-composer">
+          <div class="post-composer__avatar">
+            <ds-avatar 
+              [initials]="userService.avatarInitials()"
+              [type]="userService.avatarType()"
+              [src]="userService.avatarSrc()"
+              size="md" />
+          </div>
+          
+          <div class="post-composer__main">
+            <div class="post-composer__header">
+              <span class="post-composer__username">{{ username() }}</span>
+            </div>
+            
+            <textarea
+              #textareaInput
+              class="post-composer__textarea"
+              [(ngModel)]="postContent"
+              [placeholder]="placeholder()"
+              (input)="handleInput()">
+            </textarea>
+            
+            <div class="post-composer__actions">
+              <div class="post-composer__action-btns">
+                <button class="post-composer__action-btn" (click)="handleAddImage()">
+                  <ds-icon name="remixImageLine" size="22px" />
+                </button>
+                <button class="post-composer__action-btn" (click)="handleAddEmoji()">
+                  <ds-icon name="remixEmotionLine" size="22px" />
+                </button>
+              </div>
+              
+              <ds-button
+                variant="primary"
+                size="md"
+                [disabled]="!canPost()"
+                (clicked)="handlePost()">
+                {{ submitButtonLabel() }}
+              </ds-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ds-mobile-page-details>
+  `
+})
+export class PostCreatePageComponent implements AfterViewInit, OnInit {
+  @ViewChild('textareaInput') textareaInput?: ElementRef<HTMLTextAreaElement>;
+  
+  postContent = '';
+  username = signal('Lars Mikkelsen');
+  placeholder = signal("What's new?");
+  
+  // Edit mode state
+  isEditMode = signal(false);
+  postId = signal<string | null>(null);
+  pageTitle = signal('New post');
+  submitButtonLabel = signal('Post');
+  
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    public userService: UserService
+  ) {}
+  
+  ngOnInit(): void {
+    // Check for edit mode via query parameters
+    this.route.queryParams.subscribe(params => {
+      const editMode = params['edit'] === 'true';
+      const postId = params['id'];
+      const content = params['content'];
+      
+      if (editMode && postId) {
+        this.isEditMode.set(true);
+        this.postId.set(postId);
+        this.pageTitle.set('Edit post');
+        this.submitButtonLabel.set('Save');
+        
+        // Prefill content if provided
+        if (content) {
+          this.postContent = decodeURIComponent(content);
+        }
+      } else {
+        // Reset to create mode
+        this.isEditMode.set(false);
+        this.postId.set(null);
+        this.pageTitle.set('New post');
+        this.submitButtonLabel.set('Post');
+        this.postContent = '';
+      }
+    });
+  }
+  
+  ngAfterViewInit(): void {
+    // Focus the textarea after view initialization to trigger keyboard on mobile
+    setTimeout(() => {
+      this.textareaInput?.nativeElement.focus();
+    }, 300);
+  }
+  
+  handleInput(): void {
+    // Handle text input changes
+  }
+  
+  canPost(): boolean {
+    return this.postContent.trim().length > 0;
+  }
+  
+  handleCancel(): void {
+    if (this.postContent.trim().length > 0) {
+      // Show confirmation dialog
+      const confirmed = confirm('Discard this post?');
+      if (confirmed) {
+        this.router.navigate(['/mobile-tabs-example/community']);
+      }
+    } else {
+      this.router.navigate(['/mobile-tabs-example/community']);
+    }
+  }
+  
+  handlePost(): void {
+    if (!this.canPost()) return;
+    
+    if (this.isEditMode()) {
+      console.log('Updating post:', this.postId(), this.postContent);
+      // TODO: Implement post update logic
+      // this.postService.updatePost(this.postId(), this.postContent).subscribe(() => {
+      //   this.router.navigate(['/mobile-tabs-example/community']);
+      // });
+    } else {
+      console.log('Creating post:', this.postContent);
+      // TODO: Implement post creation logic
+      // this.postService.createPost(this.postContent).subscribe(() => {
+      //   this.router.navigate(['/mobile-tabs-example/community']);
+      // });
+    }
+    
+    // For now, just navigate back
+    this.router.navigate(['/mobile-tabs-example/community']);
+  }
+  
+  handleAddImage(): void {
+    console.log('Add image');
+    // TODO: Open image picker
+  }
+  
+  handleAddEmoji(): void {
+    console.log('Add emoji');
+    // TODO: Open emoji picker
+  }
+}
+

package/src/examples/post-detail.page.ts

@@ -0,0 +1,296 @@
+import { Component } from '@angular/core';
+import { DsMobilePageDetailsComponent } from '../components/page-details';
+import { 
+  DsMobileInteractiveListItemPostComponent,
+  PostContentComponent,
+  PostTextComponent,
+  PostMediaComponent,
+  PostActionsComponent,
+  ActionLikeComponent,
+  ActionCommentComponent
+} from '../components/interactive-list-item-post';
+import { DsMobileCommentComponent } from '../components/comment';
+import { DsMobileLightboxService, LightboxAuthor } from '../components/lightbox';
+import { DsMobileBottomSheetService } from '../components/bottom-sheet/ds-mobile-bottom-sheet.service';
+import { DsMobileCommentActionsBottomSheetComponent, CommentActionResult } from '../components/bottom-sheet';
+
+@Component({
+  selector: 'app-mobile-post-detail-page',
+  standalone: true,
+  imports: [
+    DsMobilePageDetailsComponent,
+    DsMobileInteractiveListItemPostComponent,
+    PostContentComponent,
+    PostTextComponent,
+    PostMediaComponent,
+    PostActionsComponent,
+    ActionLikeComponent,
+    ActionCommentComponent,
+    DsMobileCommentComponent
+  ],
+  styles: [`
+    .post-detail-container {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      max-width: 640px;
+    }
+    
+    .post-section {
+      border-bottom: 1px solid var(--border-color-default);
+      padding-bottom: 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;
+      object-fit: cover;
+    }
+    
+    .clickable-image:active {
+      transform: scale(0.98);
+      opacity: 0.9;
+    }
+    
+    .comments-section {
+      display: flex;
+      flex-direction: column;
+      /* Negative margin to pull comments out by 8px on each side */
+      /* Page has 20px padding, this makes comments effectively 12px from edge */
+      margin-left: -8px;
+      margin-right: -8px;
+    }
+    
+    .comments-header {
+      font-family: 'Brockmann', sans-serif;
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 24px;
+      color: var(--color-text-primary, #1a1a1a);
+      margin-bottom: 16px;
+      /* Add padding to keep header at 20px from edge (8px to offset negative margin) */
+      padding-left: 8px;
+      padding-right: 8px;
+    }
+    
+    .comments-list {
+      display: flex;
+      flex-direction: column;
+    }
+  `],
+  template: `
+    <ds-mobile-page-details title="Opslag">
+      <div class="post-detail-container">
+        <!-- Post Section -->
+        <div class="post-section">
+          <ds-mobile-interactive-list-item-post
+            [authorName]="'Sophie Andersen'"
+            [authorRole]="'Lejer'"
+            [timestamp]="'4t siden'"
+            [avatarInitials]="'SA'"
+            [clickable]="false">
+            
+            <post-content>
+              <post-text>Se denne smukke udsigt fra min altan! Morgenkaffe har aldrig smagt så godt ☕️</post-text>
+              <post-media>
+                <img 
+                  src="/Assets/Dummy-photos/balcony-view.jpg" 
+                  alt="Altanudsigt" 
+                  class="clickable-image"
+                  (click)="openImageLightbox('/Assets/Dummy-photos/balcony-view.jpg', 'Altanudsigt', 'Morgenkaffe har aldrig smagt så godt ☕️')"
+                />
+              </post-media>
+            </post-content>
+            
+            <post-actions>
+              <action-like [active]="true" [count]="156" />
+              <action-comment [count]="34" />
+            </post-actions>
+          </ds-mobile-interactive-list-item-post>
+        </div>
+        
+        <!-- Comments Section -->
+        <div class="comments-section">
+          <h2 class="comments-header">{{ repliesCount }} svar</h2>
+          
+          <div class="comments-list">
+            <ds-mobile-comment
+              [authorName]="'Anders Jensen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'3t siden'"
+              [avatarInitials]="'AJ'"
+              [content]="'Wow, den udsigt er fantastisk! Hvilken etage er du på?'"
+              [likeCount]="12"
+              [clickable]="true"
+              [isOwnComment]="false"
+              (longPress)="handleCommentLongPress('Anders Jensen', 'Wow, den udsigt er fantastisk! Hvilken etage er du på?', false)" />
+            
+            <ds-mobile-comment
+              [authorName]="'Thomas Hansen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'3t siden'"
+              [avatarInitials]="'TH'"
+              [content]="'Smuk! Jeg kan også se byens silhuet fra min lejlighed 🌆'"
+              [isLiked]="true"
+              [likeCount]="8"
+              [clickable]="true"
+              [isOwnComment]="true"
+              (longPress)="handleCommentLongPress('Thomas Hansen', 'Smuk! Jeg kan også se byens silhuet fra min lejlighed 🌆', true)" />
+            
+            <ds-mobile-comment
+              [authorName]="'Emma Petersen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'2t siden'"
+              [avatarInitials]="'EP'"
+              [content]="'Dette er præcis derfor jeg elsker at bo her. Godt billede!'"
+              [likeCount]="15"
+              [clickable]="true"
+              [isOwnComment]="false"
+              (longPress)="handleCommentLongPress('Emma Petersen', 'Dette er præcis derfor jeg elsker at bo her. Godt billede!', false)" />
+            
+            <ds-mobile-comment
+              [authorName]="'Nikolaj Sørensen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'2t siden'"
+              [avatarInitials]="'NS'"
+              [content]="'Solnedgangene fra den vinkel må være utrolige'"
+              [likeCount]="6"
+              [clickable]="true"
+              [isOwnComment]="false"
+              (longPress)="handleCommentLongPress('Nikolaj Sørensen', 'Solnedgangene fra den vinkel må være utrolige', false)" />
+            
+            <ds-mobile-comment
+              [authorName]="'Mette Larsen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'1t siden'"
+              [avatarInitials]="'ML'"
+              [content]="'Giver mig lyst til at få min morgenkaffe på altanen også! ☕'"
+              [likeCount]="9"
+              [clickable]="true"
+              [isOwnComment]="false"
+              (longPress)="handleCommentLongPress('Mette Larsen', 'Giver mig lyst til at få min morgenkaffe på altanen også! ☕', false)" />
+            
+            <ds-mobile-comment
+              [authorName]="'Frederik Nielsen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'1t siden'"
+              [avatarInitials]="'FN'"
+              [content]="'Heldig! Min altan vender den anden vej, men stadig pæn'"
+              [likeCount]="4"
+              [clickable]="true"
+              [isOwnComment]="false"
+              (longPress)="handleCommentLongPress('Frederik Nielsen', 'Heldig! Min altan vender den anden vej, men stadig pæn', false)" />
+            
+            <ds-mobile-comment
+              [authorName]="'Caroline Jensen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'45m siden'"
+              [avatarInitials]="'CJ'"
+              [content]="'Denne bygning har den bedste udsigt i byen, uden tvivl'"
+              [likeCount]="11"
+              [clickable]="true"
+              [isOwnComment]="false"
+              (longPress)="handleCommentLongPress('Caroline Jensen', 'Denne bygning har den bedste udsigt i byen, uden tvivl', false)" />
+            
+            <ds-mobile-comment
+              [authorName]="'Anna Hansen'"
+              [authorRole]="'Lejer'"
+              [timestamp]="'30m siden'"
+              [avatarInitials]="'AH'"
+              [content]="'Jeg skal se din altan en dag! 😍'"
+              [clickable]="true"
+              [isOwnComment]="false"
+              (longPress)="handleCommentLongPress('Anna Hansen', 'Jeg skal se din altan en dag! 😍', false)" />
+          </div>
+        </div>
+      </div>
+    </ds-mobile-page-details>
+  `
+})
+export class MobilePostDetailPageComponent {
+  repliesCount = 6;
+  
+  constructor(
+    private lightbox: DsMobileLightboxService,
+    private bottomSheet: DsMobileBottomSheetService
+  ) {}
+  
+  /**
+   * Open an image in the lightbox viewer
+   */
+  openImageLightbox(imageSrc: string, title: string, description: string): void {
+    const authorMeta: LightboxAuthor = {
+      name: 'Sophie Andersen',
+      role: 'Lejer',
+      avatarInitials: 'SA',
+      timestamp: '4t siden'
+    };
+    
+    this.lightbox.open({
+      showActions: true, // Show like & comment actions
+      images: [
+        {
+          type: 'image',
+          src: imageSrc,
+          alt: title,
+          title: title,
+          description: description,
+          isLiked: true,
+          likeCount: 156,
+          commentCount: 34
+        }
+      ],
+      author: authorMeta,
+      enableZoom: true,
+      showControls: false, // Single image, no need for controls
+      showInfo: true
+    });
+  }
+  
+  /**
+   * Handle long press on a comment to show action sheet
+   */
+  async handleCommentLongPress(authorName: string, content: string, isOwnComment: boolean): Promise<void> {
+    const sheet = await this.bottomSheet.create({
+      component: DsMobileCommentActionsBottomSheetComponent,
+      componentProps: {
+        isOwnContent: isOwnComment
+      },
+      breakpoints: [0, 1],
+      initialBreakpoint: 1,
+      handle: true,
+      backdropDismiss: true,
+      cssClass: 'auto-height'
+    });
+    
+    const result = await sheet.onWillDismiss();
+    
+    if (result.role === 'select' && result.data) {
+      const action = (result.data as CommentActionResult).action;
+      
+      switch (action) {
+        case 'like':
+          console.log('Like comment by', authorName);
+          // Implement like logic
+          break;
+        case 'reply':
+          console.log('Reply to comment by', authorName);
+          // Implement reply logic
+          break;
+        case 'edit':
+          console.log('Edit comment by', authorName);
+          // Implement edit logic
+          break;
+        case 'delete':
+          console.log('Delete comment by', authorName);
+          // Implement delete logic (with confirmation)
+          break;
+      }
+    }
+  }
+}
+