From 94773e18f181ed044b46ac5de488c7671d7168c7 Mon Sep 17 00:00:00 2001 From: Patricio de Villa Date: Mon, 25 Apr 2022 20:52:52 -0500 Subject: [PATCH 1/4] add notification event component --- .../addon/components/eui-accordion/index.hbs | 4 +- .../eui-notification-event-messages/index.hbs | 49 ++++++ .../eui-notification-event-meta/index.hbs | 83 ++++++++++ .../index.hbs | 13 ++ .../index.hbs | 21 +++ .../eui-notification-event/index.hbs | 88 +++++++++++ .../eui-notification-event-messages/index.js | 1 + .../eui-notification-event-meta/index.js | 1 + .../index.js | 1 + .../eui-notification-event-read-icon/index.js | 1 + .../eui-notification-event/index.js | 1 + .../display/notification-event/demo/demo1.md | 143 ++++++++++++++++++ .../docs/display/notification-event/index.md | 6 + .../tests/dummy/app/templates/application.hbs | 3 - 14 files changed, 410 insertions(+), 5 deletions(-) create mode 100644 packages/core/addon/components/eui-notification-event-messages/index.hbs create mode 100644 packages/core/addon/components/eui-notification-event-meta/index.hbs create mode 100644 packages/core/addon/components/eui-notification-event-read-button/index.hbs create mode 100644 packages/core/addon/components/eui-notification-event-read-icon/index.hbs create mode 100644 packages/core/addon/components/eui-notification-event/index.hbs create mode 100644 packages/core/app/components/eui-notification-event-messages/index.js create mode 100644 packages/core/app/components/eui-notification-event-meta/index.js create mode 100644 packages/core/app/components/eui-notification-event-read-button/index.js create mode 100644 packages/core/app/components/eui-notification-event-read-icon/index.js create mode 100644 packages/core/app/components/eui-notification-event/index.js create mode 100644 packages/core/docs/display/notification-event/demo/demo1.md create mode 100644 packages/core/docs/display/notification-event/index.md diff --git a/packages/core/addon/components/eui-accordion/index.hbs b/packages/core/addon/components/eui-accordion/index.hbs index eafaf4154..6b72906ec 100644 --- a/packages/core/addon/components/eui-accordion/index.hbs +++ b/packages/core/addon/components/eui-accordion/index.hbs @@ -40,12 +40,12 @@ {{on "click" this.onToggle}} > - {{yield to="buttonContent"}} + {{yield this.isOpen to="buttonContent"}} {{#if (and @extraAction (not this.isLoading))}}
- {{yield to="extraAction"}} + {{yield this.isOpen to="extraAction"}}
{{else if this.isLoading}}
diff --git a/packages/core/addon/components/eui-notification-event-messages/index.hbs b/packages/core/addon/components/eui-notification-event-messages/index.hbs new file mode 100644 index 000000000..328748b5b --- /dev/null +++ b/packages/core/addon/components/eui-notification-event-messages/index.hbs @@ -0,0 +1,49 @@ +
+ {{#let + @messages.firstObject + (without @messages.firstObject @messages) + as |first rest|}} + + {{#if first}} + +

{{first}}

+ + {{/if}} + + {{#if rest}} + + + <:buttonContent as |isOpen|> + {{@accordionButtonText}} + {{#unless isOpen}} + ({{@accordionHideText}}) + {{/unless}} + + + <:content> +
+ {{#each rest as |msg|}} + +

{{msg}}

+ + {{/each}} +
+ + + + {{/if}} + + {{/let}} +
\ No newline at end of file diff --git a/packages/core/addon/components/eui-notification-event-meta/index.hbs b/packages/core/addon/components/eui-notification-event-meta/index.hbs new file mode 100644 index 000000000..a55501fbf --- /dev/null +++ b/packages/core/addon/components/eui-notification-event-meta/index.hbs @@ -0,0 +1,83 @@ +
+
+ + {{#if @iconType}} + + {{/if}} + + {{#if @type}} + + {{#if @severity}} + {{@type}}: {{@severity}} + {{else}} + {{@type}} + {{/if}} + + {{/if}} + +
+ +
+ {{@time}} +
+ + {{#if @onOpenContextMenu}} + {{#let (unique-id) (use-state false) as |randomPopoverId isPopoverOpen|}} +
+ + + <:button> + + + + {{!-- The EuiContextMenu is wrapped with a div so it closes after an item is clicked --}} + <:content> +
+ {{yield}} +
+ + + +
+ {{/let}} + {{/if}} + +
\ No newline at end of file diff --git a/packages/core/addon/components/eui-notification-event-read-button/index.hbs b/packages/core/addon/components/eui-notification-event-read-button/index.hbs new file mode 100644 index 000000000..e8e22a155 --- /dev/null +++ b/packages/core/addon/components/eui-notification-event-read-button/index.hbs @@ -0,0 +1,13 @@ +{{!-- ToDo: title and aria-label translations --}} + \ No newline at end of file diff --git a/packages/core/addon/components/eui-notification-event-read-icon/index.hbs b/packages/core/addon/components/eui-notification-event-read-icon/index.hbs new file mode 100644 index 000000000..52bd14e09 --- /dev/null +++ b/packages/core/addon/components/eui-notification-event-read-icon/index.hbs @@ -0,0 +1,21 @@ +{{!-- ToDo: title and aria-label translations --}} +
+ +
\ No newline at end of file diff --git a/packages/core/addon/components/eui-notification-event/index.hbs b/packages/core/addon/components/eui-notification-event/index.hbs new file mode 100644 index 000000000..df0cf61b5 --- /dev/null +++ b/packages/core/addon/components/eui-notification-event/index.hbs @@ -0,0 +1,88 @@ +{{#let (unique-id) as |id|}} +
+ + {{#if (eq (type-of @isRead) "boolean")}} +
+ {{#if @onRead}} + + {{else}} + + {{/if}} +
+ {{/if}} + +
+ + {{yield to='contextMenu'}} + + + {{#let + (class-names + 'euiNotificationEvent__title' + (if @isRead 'euiNotificationEvent__title--isRead') + ) + (arg-or-default + @headingLevel + 'h2' + ) + as |classNames headingLevel|}} + {{#if @onClickTitle}} + + + {{@title}} + + + {{else if @title}} + + {{@title}} + + {{/if}} + {{/let}} + + + + {{#if (has-block 'primaryAction')}} +
+ {{yield to='primaryAction'}} +
+ {{/if}} + +
+ +
+{{/let}} \ No newline at end of file diff --git a/packages/core/app/components/eui-notification-event-messages/index.js b/packages/core/app/components/eui-notification-event-messages/index.js new file mode 100644 index 000000000..e573578dc --- /dev/null +++ b/packages/core/app/components/eui-notification-event-messages/index.js @@ -0,0 +1 @@ +export { default } from '@ember-eui/core/components/eui-notification-event-messages'; \ No newline at end of file diff --git a/packages/core/app/components/eui-notification-event-meta/index.js b/packages/core/app/components/eui-notification-event-meta/index.js new file mode 100644 index 000000000..e043793ad --- /dev/null +++ b/packages/core/app/components/eui-notification-event-meta/index.js @@ -0,0 +1 @@ +export { default } from '@ember-eui/core/components/eui-notification-event-meta'; \ No newline at end of file diff --git a/packages/core/app/components/eui-notification-event-read-button/index.js b/packages/core/app/components/eui-notification-event-read-button/index.js new file mode 100644 index 000000000..1cd02fc16 --- /dev/null +++ b/packages/core/app/components/eui-notification-event-read-button/index.js @@ -0,0 +1 @@ +export { default } from '@ember-eui/core/components/eui-notification-event-read-button'; \ No newline at end of file diff --git a/packages/core/app/components/eui-notification-event-read-icon/index.js b/packages/core/app/components/eui-notification-event-read-icon/index.js new file mode 100644 index 000000000..3500ff191 --- /dev/null +++ b/packages/core/app/components/eui-notification-event-read-icon/index.js @@ -0,0 +1 @@ +export { default } from '@ember-eui/core/components/eui-notification-event-read-icon'; \ No newline at end of file diff --git a/packages/core/app/components/eui-notification-event/index.js b/packages/core/app/components/eui-notification-event/index.js new file mode 100644 index 000000000..52b25879f --- /dev/null +++ b/packages/core/app/components/eui-notification-event/index.js @@ -0,0 +1 @@ +export { default } from '@ember-eui/core/components/eui-notification-event'; \ No newline at end of file diff --git a/packages/core/docs/display/notification-event/demo/demo1.md b/packages/core/docs/display/notification-event/demo/demo1.md new file mode 100644 index 000000000..86a5278a0 --- /dev/null +++ b/packages/core/docs/display/notification-event/demo/demo1.md @@ -0,0 +1,143 @@ +--- +order: 1 +--- + +# Notification event + +```hbs template + + + {{#each this.tabs as |tab|}} + + + {{tab.name}} + + {{/each}} + + + + +{{#let (slice + 0 this.messagesCount this.messages +) as |msgs|}} + + + <:contextMenu> + + + + + + + + + +{{/let}} + + + +Messages count: + + +``` + +```js component +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; + +export default class DemoCardComponent extends Component { + @tracked selectedTab; + @tracked isRead; + @tracked messagesCount; + + messages = [ + 'This is a message', + "Wait, there's more", + 'hmmm...' + ] + + tabs = [ + { + id: 'basic', + name: 'Basic', + isRead: null + }, + { + id: 'icon', + name: 'Icon', + isRead: false + }, + { + id: 'button', + name: 'Button', + isRead: false, + onRead: this.onRead + } + ]; + + constructor() { + super(...arguments); + this.messagesCount = 1; + this.selectedTab = this.tabs[0]; + this.isRead = null; + } + + @action + onRead() { + this.isRead = !this.isRead + } + + @action + onTabSelection(obj) { + this.isRead = obj.isRead; + this.selectedTab = obj + } + + @action + onOpenContextMenu(){ + } + + @action + setMessagesCount(e){ + this.messagesCount = e.target.value; + } +} +``` \ No newline at end of file diff --git a/packages/core/docs/display/notification-event/index.md b/packages/core/docs/display/notification-event/index.md new file mode 100644 index 000000000..5eac710db --- /dev/null +++ b/packages/core/docs/display/notification-event/index.md @@ -0,0 +1,6 @@ +--- +order: 1 +title: Notification Event +--- + + \ No newline at end of file diff --git a/packages/core/tests/dummy/app/templates/application.hbs b/packages/core/tests/dummy/app/templates/application.hbs index d83a06d53..e69de29bb 100644 --- a/packages/core/tests/dummy/app/templates/application.hbs +++ b/packages/core/tests/dummy/app/templates/application.hbs @@ -1,3 +0,0 @@ - - hdhahs - \ No newline at end of file From f9b6eee1ab8b9b3b657f1656beb7cfea112f9c34 Mon Sep 17 00:00:00 2001 From: Patricio de Villa Date: Mon, 25 Apr 2022 20:58:07 -0500 Subject: [PATCH 2/4] fix className in multiple components --- .../addon/components/eui-code-block/controls/index.hbs | 2 +- packages/core/addon/components/eui-loading-logo/index.hbs | 2 +- packages/core/addon/components/eui-tab/index.hbs | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/core/addon/components/eui-code-block/controls/index.hbs b/packages/core/addon/components/eui-code-block/controls/index.hbs index 1f309e5a8..1bd251e82 100644 --- a/packages/core/addon/components/eui-code-block/controls/index.hbs +++ b/packages/core/addon/components/eui-code-block/controls/index.hbs @@ -11,7 +11,7 @@ {{/if}} {{#if @showCopyButton}} -
+
- + \ No newline at end of file diff --git a/packages/core/addon/components/eui-tab/index.hbs b/packages/core/addon/components/eui-tab/index.hbs index 8d1ed3ab1..9078f9ff6 100644 --- a/packages/core/addon/components/eui-tab/index.hbs +++ b/packages/core/addon/components/eui-tab/index.hbs @@ -14,7 +14,7 @@ ...attributes > {{#if (has-block "prepend")}} - + {{yield to="prepend"}} {{/if}} @@ -24,7 +24,7 @@ {{#if (has-block "append")}} - + {{yield to="append"}} {{/if}} @@ -44,7 +44,7 @@ ...attributes > {{#if (has-block "prepend")}} - + {{yield to="prepend"}} {{/if}} @@ -54,7 +54,7 @@ {{#if (has-block "append")}} - + {{yield to="append"}} {{/if}} From 2f00346567ea0679c9005a31db68c0f32bc817fe Mon Sep 17 00:00:00 2001 From: Patricio de Villa Date: Mon, 25 Apr 2022 22:32:15 -0500 Subject: [PATCH 3/4] fix tabs-demo/demo4 improve notification-event compatibility --- .../components/eui-notification-event-messages/index.hbs | 4 ++-- packages/core/docs/navigation/tabs-demo/demo4.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/addon/components/eui-notification-event-messages/index.hbs b/packages/core/addon/components/eui-notification-event-messages/index.hbs index 328748b5b..00c7a1b7a 100644 --- a/packages/core/addon/components/eui-notification-event-messages/index.hbs +++ b/packages/core/addon/components/eui-notification-event-messages/index.hbs @@ -3,8 +3,8 @@ ...attributes > {{#let - @messages.firstObject - (without @messages.firstObject @messages) + (object-at 0 @messages) + (without (object-at 0 @messages) @messages) as |first rest|}} {{#if first}} diff --git a/packages/core/docs/navigation/tabs-demo/demo4.md b/packages/core/docs/navigation/tabs-demo/demo4.md index 82bbee4c3..c246d0a12 100644 --- a/packages/core/docs/navigation/tabs-demo/demo4.md +++ b/packages/core/docs/navigation/tabs-demo/demo4.md @@ -11,7 +11,7 @@ order: 4 ```hbs template From 4aa8da92e598c72a4434acd9b032c3c7d2480b45 Mon Sep 17 00:00:00 2001 From: Patricio de Villa Date: Tue, 26 Apr 2022 00:13:12 -0500 Subject: [PATCH 4/4] better notification event demos --- .../eui-notification-event-meta/index.hbs | 8 +- .../eui-notification-event/index.hbs | 1 + .../display/notification-event/demo/demo1.md | 86 ++--------- .../display/notification-event/demo/demo2.md | 141 ++++++++++++++++++ .../display/notification-event/demo/demo3.md | 112 ++++++++++++++ 5 files changed, 271 insertions(+), 77 deletions(-) create mode 100644 packages/core/docs/display/notification-event/demo/demo2.md create mode 100644 packages/core/docs/display/notification-event/demo/demo3.md diff --git a/packages/core/addon/components/eui-notification-event-meta/index.hbs b/packages/core/addon/components/eui-notification-event-meta/index.hbs index a55501fbf..14e42b2b2 100644 --- a/packages/core/addon/components/eui-notification-event-meta/index.hbs +++ b/packages/core/addon/components/eui-notification-event-meta/index.hbs @@ -1,7 +1,7 @@ -
@@ -36,7 +36,7 @@ {{@time}}
- {{#if @onOpenContextMenu}} + {{#if @hasContextMenu}} {{#let (unique-id) (use-state false) as |randomPopoverId isPopoverOpen|}}
{{yield to='contextMenu'}} diff --git a/packages/core/docs/display/notification-event/demo/demo1.md b/packages/core/docs/display/notification-event/demo/demo1.md index 86a5278a0..292827cb7 100644 --- a/packages/core/docs/display/notification-event/demo/demo1.md +++ b/packages/core/docs/display/notification-event/demo/demo1.md @@ -2,34 +2,16 @@ order: 1 --- -# Notification event +# Basic ```hbs template - - - {{#each this.tabs as |tab|}} - - - {{tab.name}} - - {{/each}} - - - - {{#let (slice 0 this.messagesCount this.messages ) as |msgs|}} - <:contextMenu> - - - - - + @@ -76,6 +46,11 @@ Messages count: @showLabels={{true}} /> + ``` ```js component @@ -83,10 +58,9 @@ import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; -export default class DemoCardComponent extends Component { - @tracked selectedTab; - @tracked isRead; +export default class NotificationEvent1Component extends Component { @tracked messagesCount; + @tracked showPrimaryAction; messages = [ 'This is a message', @@ -94,50 +68,16 @@ export default class DemoCardComponent extends Component { 'hmmm...' ] - tabs = [ - { - id: 'basic', - name: 'Basic', - isRead: null - }, - { - id: 'icon', - name: 'Icon', - isRead: false - }, - { - id: 'button', - name: 'Button', - isRead: false, - onRead: this.onRead - } - ]; - constructor() { super(...arguments); this.messagesCount = 1; - this.selectedTab = this.tabs[0]; - this.isRead = null; - } - - @action - onRead() { - this.isRead = !this.isRead - } - - @action - onTabSelection(obj) { - this.isRead = obj.isRead; - this.selectedTab = obj - } - - @action - onOpenContextMenu(){ + this.showPrimaryAction = false; } @action setMessagesCount(e){ this.messagesCount = e.target.value; } + } ``` \ No newline at end of file diff --git a/packages/core/docs/display/notification-event/demo/demo2.md b/packages/core/docs/display/notification-event/demo/demo2.md new file mode 100644 index 000000000..20dfe4b3e --- /dev/null +++ b/packages/core/docs/display/notification-event/demo/demo2.md @@ -0,0 +1,141 @@ +--- +order: 2 +--- + +# Read state + +```hbs template + + {{#each this.tabs as |tab|}} + + {{tab.name}} + + {{/each}} + + + + +{{#let (slice + 0 this.messagesCount this.messages +) as |msgs|}} + + + <:contextMenu> + + + + + <:primaryAction> + + Do something! + + + + + +{{/let}} + + + +Messages count: + + + +``` + +```js component +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; + +export default class NotificationEvent2Component extends Component { + @tracked selectedTab; + @tracked isRead; + @tracked messagesCount; + @tracked showPrimaryAction; + + messages = [ + 'This is a message', + "Wait, there's more", + 'hmmm...' + ] + + tabs = [ + { + id: 'icon', + name: 'Icon', + isRead: false + }, + { + id: 'button', + name: 'Button', + isRead: false, + onRead: this.onRead + } + ]; + + constructor() { + super(...arguments); + this.messagesCount = 1; + this.selectedTab = this.tabs[0]; + this.isRead = this.selectedTab.isRead; + this.showPrimaryAction = false; + } + + @action + onRead() { + this.isRead = !this.isRead + } + + @action + onTabSelection(obj) { + this.isRead = obj.isRead; + this.selectedTab = obj + } + + @action + setMessagesCount(e){ + this.messagesCount = e.target.value; + } + +} +``` \ No newline at end of file diff --git a/packages/core/docs/display/notification-event/demo/demo3.md b/packages/core/docs/display/notification-event/demo/demo3.md new file mode 100644 index 000000000..823117d8a --- /dev/null +++ b/packages/core/docs/display/notification-event/demo/demo3.md @@ -0,0 +1,112 @@ +--- +order: 3 +--- + +# Feed + +```hbs template +
+ {{#each this.items as |item|}} + {{#let (slice + 0 this.messagesCount (shuffle item.messages) + ) as |msgs|}} + + + <:primaryAction> + + Do something! + + + + + {{/let}} + {{/each}} +
+ + + +Messages count: + + + +``` + +```js component +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; + +export default class NotificationEvent3Component extends Component { + @tracked messagesCount; + @tracked showPrimaryAction; + + messages = [ + 'This is a message', + "Wait, there's more", + 'hmmm...' + ] + + items = [ + { + messages: this.messages, + iconType: 'email', + badgeColor: 'primary', + type: 'Hey', + time: '1 min', + title: 'Welcome' + }, + { + messages: this.messages, + iconType: 'tag', + badgeColor: 'accent', + type: 'News', + time: '3 min', + title: 'Someone tagged you' + }, + { + messages: this.messages, + iconType: 'bug', + badgeColor: 'warning', + type: 'Alert', + time: '10 min', + title: 'Found a bug' + } + ] + + constructor() { + super(...arguments); + this.messagesCount = 1; + this.showPrimaryAction = false; + } + + @action + setMessagesCount(e){ + this.messagesCount = e.target.value; + } + +} +``` \ No newline at end of file