Merge pull request trungvose#48 from trungk18/phase1-bugs-fixing

Update README for ng-zorro, add popover for about

Author: trungvose

README.md

@@ -45,7 +45,7 @@ This piece of work is also part of our technical series [angular-vietnam/100-day
 - UI modules:
   - [TailwindCSS][tailwind]
   - Angular CDK [drag and drop][cdkdrag]
-  - [ng-zorro][ng-zorro] UI component: `tooltip`, `dropdown`, `select`, `icon`
+  - [ng-zorro][ng-zorro] UI component: `tooltip`, `modal`, `select`, `icon` and more.
   - [ngx-quill][quill]
 - [Netlify][netlify]
 - [Heroku][heroku]

backend/src/project/projects.ts

@@ -156,7 +156,7 @@ export const Project = {
       id: '9584',
       title: 'What is Angular Jira clone application?',
       description:
-        "<p>There have been a handful of cool Jira-cloned apps written in React/VueJS, which makes me wonder <strong>Why not Angular</strong>? And here you go.</p><p><br></p><p>This is <u>not only</u> a simplified Jira clone built with Angular 9, but also an example of a <u>modern, real-world</u> Angular codebase.</p><p><br></p><p><strong>Tech stack</strong></p><p><br></p><p><a href='https://raw.githubusercontent.com/trungk18/jira-clone-angular/master/frontend/src/assets/img/jira-clone-tech-stack.png' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214); background-color: rgb(255, 255, 255);'><img src='https://github.com/trungk18/jira-clone-angular/raw/master/frontend/src/assets/img/jira-clone-tech-stack.png' alt='Tech logos'></a></p><p><br></p><ul><li><a href='https://cli.angular.io/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>Angular CLI</a></li><li><a href='https://datorama.github.io/akita/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>Akita</a>&nbsp;state management</li><li><a href='https://nestjs.com/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>NestJS</a></li><li>UI modules:</li><li class='ql-indent-1'><a href='https://tailwindcss.com/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>TailwindCSS</a></li><li class='ql-indent-1'>Angular CDK&nbsp;<a href='https://material.angular.io/cdk/drag-drop/overview' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>drag and drop</a></li><li class='ql-indent-1'><a href='https://ng.ant.design/docs/introduce/en' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>ng-zorro</a>&nbsp;UI component:&nbsp;<code style='background-color: rgba(27, 31, 35, 0.05);'>tooltip</code>,&nbsp;<code style='background-color: rgba(27, 31, 35, 0.05);'>dropdown</code>,&nbsp;<code style='background-color: rgba(27, 31, 35, 0.05);'>select</code>,&nbsp;<code style='background-color: rgba(27, 31, 35, 0.05);'>icon</code></li><li class='ql-indent-1'><a href='https://github.com/KillerCodeMonkey/ngx-quill' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>ngx-quill</a></li><li><a href='https://www.netlify.com/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>Netlify</a></li><li><a href='https://www.heroku.com/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>Heroku</a></li></ul>",
+        "<p>There have been a handful of cool Jira-cloned apps written in React/VueJS, which makes me wonder <strong>Why not Angular</strong>? And here you go.</p><p><br></p><p>This is <u>not only</u> a simplified Jira clone built with Angular 9, but also an example of a <u>modern, real-world</u> Angular codebase.</p><p><br></p><p><strong>Tech stack</strong></p><p><br></p><p><a href='https://raw.githubusercontent.com/trungk18/jira-clone-angular/master/frontend/src/assets/img/jira-clone-tech-stack.png' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214); background-color: rgb(255, 255, 255);'><img src='https://github.com/trungk18/jira-clone-angular/raw/master/frontend/src/assets/img/jira-clone-tech-stack.png' alt='Tech logos'></a></p><p><br></p><ul><li><a href='https://cli.angular.io/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>Angular CLI</a></li><li><a href='https://datorama.github.io/akita/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>Akita</a>&nbsp;state management</li><li><a href='https://nestjs.com/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>NestJS</a></li><li>UI modules:</li><li class='ql-indent-1'><a href='https://tailwindcss.com/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>TailwindCSS</a></li><li class='ql-indent-1'>Angular CDK&nbsp;<a href='https://material.angular.io/cdk/drag-drop/overview' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>drag and drop</a></li><li class='ql-indent-1'><a href='https://ng.ant.design/docs/introduce/en' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>ng-zorro</a>&nbsp;UI component:&nbsp;<code style='background-color: rgba(27, 31, 35, 0.05);'>tooltip</code>,&nbsp;<code style='background-color: rgba(27, 31, 35, 0.05);'>modal</code>,&nbsp;<code style='background-color: rgba(27, 31, 35, 0.05);'>select</code>,&nbsp;<code style='background-color: rgba(27, 31, 35, 0.05);'>icon</code> and more.</li><li class='ql-indent-1'><a href='https://github.com/KillerCodeMonkey/ngx-quill' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>ngx-quill</a></li><li><a href='https://www.netlify.com/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>Netlify</a></li><li><a href='https://www.heroku.com/' rel='noopener noreferrer' target='_blank' style='color: rgb(3, 102, 214);'>Heroku</a></li></ul>",
       type: 'Task',
       status: 'Backlog',
       priority: 'Medium',

frontend/README.md

@@ -9,7 +9,7 @@ The front end part of [Angular Jira clone][github] application built with.
 - UI modules:
   - [TailwindCSS][tailwind]
   - Angular CDK [drag and drop][cdkdrag]
-  - [ng-zorro][ng-zorro] UI component: `tooltip`, `dropdown`, `select`, `icon`
+  - [ng-zorro][ng-zorro] UI component: `tooltip`, `modal`, `select`, `icon` and more.
   - [ngx-quill][quill]
 
 [cli]: https://cli.angular.io/

frontend/src/app/project/components/navigation/navbar-left/navbar-left.component.html

@@ -68,8 +68,10 @@
             </div>
         </div>
         <div class="item">
-            <a target="_blank"
-               href="https://github.com/trungk18/jira-clone-angular">
+            <a nz-popover
+               nzPopoverPlacement="rightBottom"
+               [nzPopoverContent]="aboutPopoverTmpl"
+               nzPopoverTrigger="click">
                 <div nz-tooltip
                      nzTooltipTitle="About"
                      nzTooltipPlacement="right"
@@ -83,4 +85,17 @@
             </a>
         </div>
     </div>
-</aside>
+</aside>
+
+<ng-template #aboutPopoverTmpl>
+    <div class="about-popover">
+        <p class="mb-2">This is a <strong>simplified</strong> Jira clone built with Angular 9, Akita and ng-zorro</p>
+        <p class="mb-2">Thanks a bunch for stopping by and supporting me!</p>
+        <p class="mb-3">Reach out to me via <a class="font-semibold"
+               href="email:[email protected]">[email protected]</a></p>
+        <a href="https://trungk18.com/"
+           target="_blank">
+            <j-button className="btn-primary">Visit My Blog</j-button>
+        </a>
+    </div>
+</ng-template>

frontend/src/app/project/components/navigation/navbar-left/navbar-left.component.scss

@@ -11,14 +11,20 @@ $light-blue: rgb(28, 99, 206);
 .item {
   @apply relative w-full flex items-center justify-center;
   min-height: 42px;
-  
+
   .user-profile-photo {
     width: 26px;
   }
 }
+
 .itemIcon {
   @apply w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 select-none transition-colors duration-100 cursor-pointer;
 }
+
 .itemIcon:hover {
   background: $light-blue;
 }
+
+.about-popover {
+  max-width: 270px;
+}

frontend/src/app/project/project.module.ts

@@ -4,19 +4,26 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ContentLoaderModule } from '@ngneat/content-loader';
+import { AutofocusDirective } from '@trungk18/core/directives/autofocus.directive';
 import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzModalModule } from 'ng-zorro-antd/modal';
 import { NzNotificationModule } from 'ng-zorro-antd/notification';
+import { NzPopoverModule } from 'ng-zorro-antd/popover';
 import { NzSelectModule } from 'ng-zorro-antd/select';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 import { QuillModule } from 'ngx-quill';
 import { JiraControlModule } from '../jira-control/jira-control.module';
 import { AddIssueModalComponent } from './components/add-issue-modal/add-issue-modal.component';
+import { IssueAssigneesSelectComponent } from './components/add-issue-modal/issue-assignees-select/issue-assignees-select.component';
+import { IssuePrioritySelectComponent } from './components/add-issue-modal/issue-priority-select/issue-priority-select.component';
+import { IssueReporterSelectComponent } from './components/add-issue-modal/issue-reporter-select/issue-reporter-select.component';
+import { IssueTypeSelectComponent } from './components/add-issue-modal/issue-type-select/issue-type-select.component';
 import { BoardPageComponents } from './components/board';
 import { IssueUtilComponents } from './components/issues';
 import { NavigationComponents } from './components/navigation';
+import { ResizerComponent } from './components/navigation/resizer/resizer.component';
 import { IssueResultComponent } from './components/search/issue-result/issue-result.component';
 import { SearchDrawerComponent } from './components/search/search-drawer/search-drawer.component';
 import { UserComponent } from './components/user/user.component';
@@ -26,12 +33,6 @@ import { FullIssueDetailComponent } from './pages/full-issue-detail/full-issue-d
 import { SettingsComponent } from './pages/settings/settings.component';
 import { ProjectRoutingModule } from './project-routing.module';
 import { ProjectComponent } from './project.component';
-import { IssueTypeSelectComponent } from './components/add-issue-modal/issue-type-select/issue-type-select.component';
-import { IssuePrioritySelectComponent } from './components/add-issue-modal/issue-priority-select/issue-priority-select.component';
-import { IssueReporterSelectComponent } from './components/add-issue-modal/issue-reporter-select/issue-reporter-select.component';
-import { IssueAssigneesSelectComponent } from './components/add-issue-modal/issue-assignees-select/issue-assignees-select.component';
-import { ResizerComponent } from './components/navigation/resizer/resizer.component';
-import { AutofocusDirective } from '@trungk18/core/directives/autofocus.directive';
 
 @NgModule({
   declarations: [
@@ -63,6 +64,7 @@ import { AutofocusDirective } from '@trungk18/core/directives/autofocus.directiv
     NzSelectModule,
     NzNotificationModule,
     NzDrawerModule,
+    NzPopoverModule,
     DragDropModule,
     TextFieldModule,
     FormsModule,

frontend/src/styles.scss

@@ -6,6 +6,7 @@
 @import 'ng-zorro-antd/select/style/index.min.css';
 @import 'ng-zorro-antd/drawer/style/index.min.css';
 @import 'ng-zorro-antd/notification/style/index.min.css';
+@import 'ng-zorro-antd/popover/style/index.min.css';
 
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';