From 0a72731885e2534967c292e04ed36913d672faae Mon Sep 17 00:00:00 2001 From: insanity Date: Fri, 27 Apr 2018 13:22:46 +0900 Subject: [PATCH] notification badge error fix --- .../app.notification.component.html | 5 +- .../app.notification.component.ts | 3 + .../badge/notification.component.html | 53 ------ .../badge/notification.component.scss | 168 ------------------ .../component/badge/notification.component.ts | 1 - 5 files changed, 5 insertions(+), 225 deletions(-) delete mode 100644 src/packages/notification/component/badge/notification.component.scss diff --git a/src/app/commons/component/layout/notification/app.notification.component.html b/src/app/commons/component/layout/notification/app.notification.component.html index 5a79d6f..617982b 100644 --- a/src/app/commons/component/layout/notification/app.notification.component.html +++ b/src/app/commons/component/layout/notification/app.notification.component.html @@ -1,6 +1,5 @@ -
+

Notifications

-
  • {{noti.createDate | date: 'short'}}
    @@ -13,4 +12,4 @@ View All
    • -
    +
    \ No newline at end of file diff --git a/src/app/commons/component/layout/notification/app.notification.component.ts b/src/app/commons/component/layout/notification/app.notification.component.ts index b1dfde4..f19120d 100644 --- a/src/app/commons/component/layout/notification/app.notification.component.ts +++ b/src/app/commons/component/layout/notification/app.notification.component.ts @@ -63,6 +63,9 @@ export class AppNotificationComponent implements OnInit, AfterContentInit { } getUnconfirmedCount() { + if (this.notifications === null || this.notifications.length === 0) { + return; + } let totalCnt = 0; for (let i = 0; i < 5; i ++) { if (!this.notifications[i].confirmDate) { diff --git a/src/packages/notification/component/badge/notification.component.html b/src/packages/notification/component/badge/notification.component.html index d103511..e69de29 100644 --- a/src/packages/notification/component/badge/notification.component.html +++ b/src/packages/notification/component/badge/notification.component.html @@ -1,53 +0,0 @@ - - \ No newline at end of file diff --git a/src/packages/notification/component/badge/notification.component.scss b/src/packages/notification/component/badge/notification.component.scss deleted file mode 100644 index d4bd28f..0000000 --- a/src/packages/notification/component/badge/notification.component.scss +++ /dev/null @@ -1,168 +0,0 @@ -$prefix: 'notification'; - -.highlight { - background: #039be5 -} - -.badge { - position: absolute; - top: 0; - left: 50%; - font-weight: 700; - line-height: 13px; - height: 13px; - padding: 5px; - border-radius: 26%; - width: 30%; - background-color: #f44336; - color: #fff; - border-color:#f44336 -} - -.#{$prefix} { - &-container { - position: relative; - display: flex; - align-items: center; - } - - &-btn { - display: flex; - justify-content: center; - margin-right: 10px; - } -} -.dropdown { - background: white; - position: absolute; - top: 42px; - right: 28px; - min-width: 350px; - z-index: 2; - transform: translateY(0) scale(0); - transform-origin: top right; - visibility: hidden; - transition: transform .4s cubic-bezier(.25, .8, .25, 1), visibility .4s cubic-bezier(.25, .8, .25, 1); - - @media screen and (max-width: 599px) { - min-width: 50vw; - right: 5px; - transform: translateY(0); - visibility: hidden; - transition: transform .4s cubic-bezier(.25,.8,.25,1), visibility .4s cubic-bezier(.25,.8,.25,1); - } - - &.open { - transform: translateY(0) scale(1); - visibility: visible; - } - .card { - - .header { - background: #EEEEEE; - min-height: 54px; - padding-left: 16px; - padding-right: 8px; - color: #555; - display: flex; - justify-content: flex-start; - align-items: center; - align-content: center; - border-bottom: 1px solid #e0e0e0; - - .extra { - font-size: 12px; - color: #888; - } - } - } - .content { - overflow: hidden; - max-height: 256px; - - .notification { - min-height: 64px; - padding: 0 16px 0 14px; - position: relative; - color: #666; - cursor: pointer; - - .icon { - height: 28px; - width: 28px; - line-height: 28px; - font-size: 18px; - margin-right: 13px; - text-align: center; - border-radius: 50%; - background: #FFF; - color: #888; - border: 1px solid #EEE; - } - - .title { - font-weight: 500; - font-size: 14px; - } - - .time { - font-size: 12px; - } - - .close { - font-size: 18px; - width: 18px; - height: 18px; - line-height: 18px; - } - - &.primary { - .icon { - background: #ccc; - color: #ddd; - } - } - - &.accent { - .icon { - background: #aaa; - color: #bbb; - } - } - - &.warn { - .icon { - background: #eee; - color: #ddd; - } - } - - &.read { - color: #999; - - .name { - font-weight: normal; - } - } - } - } - - .footer { - min-height: 42px; - border-top: 1px solid #EEE; - - .action { - cursor: pointer; - color: #AAA; - text-align: center; - font-size: 13px; - } - } - - .divider { - width: calc(100% - 30px); - height: 1px; - background: #EEE; - margin: 0 16px 0 14px; - } -} \ No newline at end of file diff --git a/src/packages/notification/component/badge/notification.component.ts b/src/packages/notification/component/badge/notification.component.ts index 1ff240d..6801796 100644 --- a/src/packages/notification/component/badge/notification.component.ts +++ b/src/packages/notification/component/badge/notification.component.ts @@ -14,7 +14,6 @@ import { MarkAsRead } from '../../store/detail'; @Component({ selector: 'of-notification-badge', templateUrl: './notification.component.html', - styleUrls: ['./notification.component.scss'] }) export class NotificationBadgeComponent implements OnInit, AfterContentInit { notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page')));