From 5a7617b577798a2bc8ed815073ad6ac1b26c2560 Mon Sep 17 00:00:00 2001 From: Sefat Anam Date: Sun, 4 Feb 2024 16:12:32 +0600 Subject: [PATCH] chore(UI): user interactive issue fixed --- .../components/header/header.component.html | 116 +++++++++--------- .../components/header/header.component.scss | 8 +- .../mobile-menus/mobile-menus.component.html | 90 +++++++++----- .../mobile-menus/mobile-menus.component.scss | 22 ++-- .../pages/personal/personal.component.html | 2 +- .../pages/personal/personal.component.scss | 27 ++++ src/app/pages/personal/personal.component.ts | 20 ++- src/app/pages/public/public.component.html | 2 +- src/app/pages/public/public.component.ts | 17 ++- src/services/menu.service.ts | 8 +- 10 files changed, 201 insertions(+), 111 deletions(-) diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html index bcf5eb1..07ae04e 100644 --- a/src/app/components/header/header.component.html +++ b/src/app/components/header/header.component.html @@ -19,17 +19,17 @@ @for (routeMenu of routeMenus;track $index) { - @if (routeMenu.isAvailable) { -
  • - - {{ routeMenu.name }} - -
    • - } + @if (routeMenu.isAvailable) { +
  • + + {{ routeMenu.name }} + +
    • + } } @empty { -
  • - {{ emptyMessage }} -
    • +
  • + {{ emptyMessage }} +
    • } @@ -37,9 +37,9 @@ @@ -47,40 +47,40 @@ @for (routeButton of routeButtons;track $index) { - @if (routeButton.isAvailable) { -
  • - {{ routeButton.name }} -
    • - } + @if (routeButton.isAvailable) { +
  • + {{ + routeButton.name }} +
    • + } } @empty { -
  • - {{ emptyMessage }} -
    • +
  • + {{ emptyMessage }} +
    • }
  • @if (isDarkThemeEnable) { - - - + + + } @else { - - - + + + }
    • @@ -88,19 +88,19 @@ - + viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" data-slot="icon" class="w-6 h-6 dark:text-white"> +
  • - - + + + d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z" /> @@ -108,25 +108,25 @@
  • @if (isDarkThemeEnable) { - - - + + + } @else { - - - + + + }
  • - - + +
    • @@ -135,10 +135,10 @@ @if(authService.authUser(); as authUser){ -
  • - - Personal - -
    • +
  • + + Personal Playlist + +
    • } -     +     \ No newline at end of file diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss index cc263eb..0ddecd3 100644 --- a/src/app/components/header/header.component.scss +++ b/src/app/components/header/header.component.scss @@ -1,7 +1,7 @@ @import "../../../styles/media.scss"; @mixin header-common { - @apply border-b border-b-gray p-4; + @apply p-4; .header { &__options { &--icon { @@ -66,11 +66,11 @@ } } -.logout-button{ - @include for-phone{ +.logout-button { + @include for-phone { @apply hidden; } - @include for-web{ + @include for-web { @apply block; } } diff --git a/src/app/components/mobile-menus/mobile-menus.component.html b/src/app/components/mobile-menus/mobile-menus.component.html index 264a522..fbb473a 100644 --- a/src/app/components/mobile-menus/mobile-menus.component.html +++ b/src/app/components/mobile-menus/mobile-menus.component.html @@ -1,44 +1,74 @@
    -
    + \ No newline at end of file diff --git a/src/app/components/mobile-menus/mobile-menus.component.scss b/src/app/components/mobile-menus/mobile-menus.component.scss index e120205..c913106 100644 --- a/src/app/components/mobile-menus/mobile-menus.component.scss +++ b/src/app/components/mobile-menus/mobile-menus.component.scss @@ -1,9 +1,17 @@ -.menus-wrapper{ - @apply h-dvh flex flex-col justify-between; +.menus-wrapper { + @apply h-dvh flex flex-col justify-between py-8; } -.mobile__menus{ - @apply flex flex-col; - &--item{ - @apply flex items-center p-2; - } +.mobile__menus { + @apply flex flex-col; + &--item { + @apply flex items-center p-2; + } +} + +.title { + overflow-wrap: break-word; + font-size: 1.875rem; + line-height: 2.25rem; + font-weight: 700; + --tw-text-opacity: 1; } diff --git a/src/app/pages/personal/personal.component.html b/src/app/pages/personal/personal.component.html index 6da36e3..05b3ac5 100644 --- a/src/app/pages/personal/personal.component.html +++ b/src/app/pages/personal/personal.component.html @@ -3,7 +3,7 @@ - +

    @if (!authUser()) { diff --git a/src/app/pages/personal/personal.component.scss b/src/app/pages/personal/personal.component.scss index e69de29..6d17c9b 100644 --- a/src/app/pages/personal/personal.component.scss +++ b/src/app/pages/personal/personal.component.scss @@ -0,0 +1,27 @@ +@import "../../../styles/media.scss"; + +// Temporary + +.player-limited { + @apply grid gap-4 row-start-2 mt-10; + &-text { + @apply text-xs italic; + } + &-title { + @apply font-semibold; + } + form { + @apply grid gap-2; + } +} + +@include for-web { + .player-limited { + @apply bg-greenish dark:bg-black rounded-xl p-4 w-2/3; + form { + button { + @apply w-1/5; + } + } + } +} diff --git a/src/app/pages/personal/personal.component.ts b/src/app/pages/personal/personal.component.ts index c9ba534..e0231dd 100644 --- a/src/app/pages/personal/personal.component.ts +++ b/src/app/pages/personal/personal.component.ts @@ -1,7 +1,8 @@ import { AsyncPipe, NgTemplateOutlet } from '@angular/common'; -import { Component, OnInit, inject } from '@angular/core'; +import { Component, HostListener, OnInit, ViewChild, inject } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; -import { MatExpansionModule } from '@angular/material/expansion'; +import { MatButtonModule } from '@angular/material/button'; +import { MatExpansionModule, MatExpansionPanel } from '@angular/material/expansion'; import { InputComponent } from '@components/input/input.component'; import { PlayerComponent } from '@components/player/player.component'; import { VideoInfo, VideoInfoResponse } from '@interface/video-info.interface'; @@ -15,12 +16,12 @@ import { Observable } from 'rxjs'; @Component({ selector: 'app-personal', standalone: true, - imports: [PlayerComponent, InputComponent, ReactiveFormsModule, MatExpansionModule, NgTemplateOutlet, AsyncPipe], + imports: [PlayerComponent, InputComponent, ReactiveFormsModule, MatExpansionModule, NgTemplateOutlet, AsyncPipe, MatButtonModule], templateUrl: './personal.component.html', styleUrl: './personal.component.scss' }) export class PersonalComponent implements OnInit { - + @ViewChild('panel') panel!: MatExpansionPanel; youtubeService = inject(YoutubeService); youtubeUtil = inject(YoutubeUtil); @@ -63,4 +64,15 @@ export class PersonalComponent implements OnInit { this.toastService.success('Added to private playlist'); } } + + @HostListener('document:click', ['$event']) + onDocumentClick(event: MouseEvent): void { + // @ts-ignore + if (!this.panel._body.nativeElement.contains(event.target)) { + // Close the expansion panel if it's open + if (this.panel.expanded) { + this.panel.close(); + } + } + } } diff --git a/src/app/pages/public/public.component.html b/src/app/pages/public/public.component.html index bd07cdc..8128489 100644 --- a/src/app/pages/public/public.component.html +++ b/src/app/pages/public/public.component.html @@ -3,7 +3,7 @@ - +

    @if (!authUser()) { diff --git a/src/app/pages/public/public.component.ts b/src/app/pages/public/public.component.ts index 42a018e..75cb647 100644 --- a/src/app/pages/public/public.component.ts +++ b/src/app/pages/public/public.component.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, ChangeDetectionStrategy, Component, inject, OnInit, ViewEncapsulation } from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, Component, HostListener, inject, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { PlayerComponent } from "@components/player/player.component"; import { YoutubeService } from "@services/youtube.service"; import { YoutubeUtil } from "@utils/youtube.util"; @@ -10,7 +10,7 @@ import { FormBuilder, FormControl, FormsModule, ReactiveFormsModule, Validators import { AsyncPipe, NgTemplateOutlet } from "@angular/common"; import { InputComponent } from "@components/input/input.component"; import { MatButtonModule } from "@angular/material/button"; -import { MatExpansionModule } from "@angular/material/expansion"; +import { MatExpansionModule, MatExpansionPanel } from "@angular/material/expansion"; import { youtubeUrlValidator } from '@validators/youtube.validators'; @Component({ @@ -32,6 +32,7 @@ import { youtubeUrlValidator } from '@validators/youtube.validators'; changeDetection: ChangeDetectionStrategy.OnPush }) export class PublicComponent implements OnInit, AfterViewInit { + @ViewChild('panel') panel!: MatExpansionPanel; youtubeService = inject(YoutubeService); youtubeUtil = inject(YoutubeUtil); @@ -47,6 +48,7 @@ export class PublicComponent implements OnInit, AfterViewInit { title: new FormControl('', [Validators.required, Validators.minLength(3)]), videoId: new FormControl('', [Validators.required, youtubeUrlValidator()]), }) + shouldExpand: unknown; ngOnInit(): void { try { @@ -78,4 +80,15 @@ export class PublicComponent implements OnInit, AfterViewInit { async ngAfterViewInit() { await this.youtubeService.videosRealtimeUpdateInit() } + + @HostListener('document:click', ['$event']) + onDocumentClick(event: MouseEvent): void { + // @ts-ignore + if (!this.panel._body.nativeElement.contains(event.target)) { + // Close the expansion panel if it's open + if (this.panel.expanded) { + this.panel.close(); + } + } + } } diff --git a/src/services/menu.service.ts b/src/services/menu.service.ts index 4e3bfdf..620376a 100644 --- a/src/services/menu.service.ts +++ b/src/services/menu.service.ts @@ -1,6 +1,6 @@ -import {inject, Injectable} from '@angular/core'; -import {Menu} from '@typings/menu.type'; -import {AuthService} from "@services/auth.service"; +import { inject, Injectable } from '@angular/core'; +import { Menu } from '@typings/menu.type'; +import { AuthService } from "@services/auth.service"; @Injectable({ @@ -32,7 +32,7 @@ export class MenuService { isAvailable: !this.authService.authUser() }, { - name: 'Public', + name: 'Public Playlist', route: '/public', isAvailable: true },