From 6670ac2aa7d9268ef9e3730edfd8cc5b20cc0ce1 Mon Sep 17 00:00:00 2001 From: "Ronald A. Richardson" Date: Mon, 19 Aug 2024 15:23:40 +0800 Subject: [PATCH 1/2] adding visibility controls to interactive items --- addon/components/button.hbs | 86 ++++----- addon/components/button.js | 10 +- addon/components/dropdown-button.hbs | 152 +++++++-------- addon/components/dropdown-button.js | 4 +- addon/components/layout/header.js | 1 - .../layout/header/dropdown/item.hbs | 8 +- addon/components/layout/sidebar/item.hbs | 174 ++++++++++-------- addon/components/layout/sidebar/item.js | 4 +- .../table/cell/dropdown/action-item.hbs | 60 +++--- .../table/cell/dropdown/action-item.js | 2 + addon/styles/layout/next.css | 7 + package.json | 2 +- 12 files changed, 274 insertions(+), 236 deletions(-) diff --git a/addon/components/button.hbs b/addon/components/button.hbs index 7d0ef9a..1121bbb 100644 --- a/addon/components/button.hbs +++ b/addon/components/button.hbs @@ -1,43 +1,45 @@ - - + {{#if this.disabledByPermission}} + + + + {{else if @helpText}} + + + {{/if}} - {{#if this.showIcon}} - - - - {{/if}} - {{#if @text}} - - {{@text}} - - {{/if}} - {{yield}} - - {{#if this.disabledByPermission}} - - - - {{else if @helpText}} - - - - {{/if}} - \ No newline at end of file + +{{/if}} \ No newline at end of file diff --git a/addon/components/button.js b/addon/components/button.js index cd00a8f..1b5e1c7 100644 --- a/addon/components/button.js +++ b/addon/components/button.js @@ -55,15 +55,23 @@ export default class ButtonComponent extends Component { */ @tracked disabledByPermission = false; + /** + * Determines the visibility of the button + * + * @memberof ButtonComponent + */ + @tracked visible = true; + /** * Creates an instance of ButtonComponent. * @param {*} owner * @param {*} { permission = null } * @memberof ButtonComponent */ - constructor(owner, { permission = null, disabled = false }) { + constructor(owner, { permission = null, disabled = false, visible = true }) { super(...arguments); this.permissionRequired = permission; + this.visible = true; if (!disabled) { this.disabledByPermission = permission && this.abilities.cannot(permission); } diff --git a/addon/components/dropdown-button.hbs b/addon/components/dropdown-button.hbs index 614bb7d..3240f5b 100644 --- a/addon/components/dropdown-button.hbs +++ b/addon/components/dropdown-button.hbs @@ -1,75 +1,77 @@ - - - {{#if @buttonComponent}} - {{component - @buttonComponent - buttonComponentArgs=this.buttonComponentArgs - text=@text - class=(concat @buttonClass (if dd.isOpen " dd-is-open")) - wrapperClass=@buttonWrapperClass - type=this.type - active=@active - size=this.buttonSize - isLoading=@isLoading - disabled=this.disabled - textClass=@textClass - helpText=@helpText - tooltipPlacement=@tooltipPlacement - img=@img - imgClass=@imgClass - alt=@alt - }} - {{else}} - - {{/if}} - {{#if this.doesntHavePermissions}} - - - - {{/if}} - - - {{yield dd}} - - \ No newline at end of file +{{#if this.visible}} + + + {{#if @buttonComponent}} + {{component + @buttonComponent + buttonComponentArgs=this.buttonComponentArgs + text=@text + class=(concat @buttonClass (if dd.isOpen " dd-is-open")) + wrapperClass=@buttonWrapperClass + type=this.type + active=@active + size=this.buttonSize + isLoading=@isLoading + disabled=this.disabled + textClass=@textClass + helpText=@helpText + tooltipPlacement=@tooltipPlacement + img=@img + imgClass=@imgClass + alt=@alt + }} + {{else}} + + {{/if}} + {{#if this.doesntHavePermissions}} + + + + {{/if}} + + + {{yield dd}} + + +{{/if}} \ No newline at end of file diff --git a/addon/components/dropdown-button.js b/addon/components/dropdown-button.js index 3b591a5..ca8d693 100644 --- a/addon/components/dropdown-button.js +++ b/addon/components/dropdown-button.js @@ -12,6 +12,7 @@ export default class DropdownButtonComponent extends Component { @tracked _onTriggerInsertFired = false; @tracked _onButtonInsertFired = false; @tracked disabled = false; + @tracked visible = true; @tracked permissionRequired = false; @tracked doesntHavePermissions = false; @@ -21,7 +22,7 @@ export default class DropdownButtonComponent extends Component { * @param {Object} { type = 'default', size = 'md', buttonComponentArgs = {}} * @memberof DropdownButtonComponent */ - constructor(owner, { type = 'default', size = 'md', buttonComponentArgs = {}, permission = null, disabled = false }) { + constructor(owner, { type = 'default', size = 'md', buttonComponentArgs = {}, permission = null, disabled = false, visible = true }) { super(...arguments); this.type = type; @@ -29,6 +30,7 @@ export default class DropdownButtonComponent extends Component { this.buttonComponentArgs = buttonComponentArgs; this.permissionRequired = permission; this.disabled = disabled; + this.visible = true; // If no permissions disable if (!disabled) { this.disabled = this.doesntHavePermissions = permission && this.abilities.cannot(permission); diff --git a/addon/components/layout/header.js b/addon/components/layout/header.js index 1d14cb1..852c14a 100644 --- a/addon/components/layout/header.js +++ b/addon/components/layout/header.js @@ -157,7 +157,6 @@ export default class LayoutHeaderComponent extends Component { { href: 'javascript:;', text: 'Changelog', - disabled: true, action: 'viewChangelog', }, ]; diff --git a/addon/components/layout/header/dropdown/item.hbs b/addon/components/layout/header/dropdown/item.hbs index 76ecc2a..3c0d2de 100644 --- a/addon/components/layout/header/dropdown/item.hbs +++ b/addon/components/layout/header/dropdown/item.hbs @@ -1,5 +1,5 @@ {{#if this.isTextOnly}} -
+
{{#if @item.icon}} {{/if}} @@ -17,7 +17,7 @@ {{#if this.isLink}}
- + {{#if @item.icon}} {{/if}} @@ -30,7 +30,7 @@
- + {{#if @item.icon}} {{/if}} diff --git a/addon/components/layout/sidebar/item.hbs b/addon/components/layout/sidebar/item.hbs index 46b9e9b..e7f5162 100644 --- a/addon/components/layout/sidebar/item.hbs +++ b/addon/components/layout/sidebar/item.hbs @@ -1,87 +1,99 @@ - -
- {{#if @icon}} - - {{/if}} -
-
{{yield}}
-
- {{#if @rightSideComponent}} - {{component @rightSideComponent context=@rightSideComponentContext}} - {{else}} - {{#if @rightSideStatus}} - - {{#if @rightSideStatusText}} - - {{@rightSideStatusText}} - - {{else}} - - {{/if}} - +{{#if this.visible}} + +
+ {{#if @icon}} + {{/if}} - {{#if @dropdownButton}} - - +
{{yield}}
+
+ {{#if @rightSideComponent}} + {{component @rightSideComponent context=@rightSideComponentContext}} + {{else}} + {{#if @rightSideStatus}} + + {{#if @rightSideStatusText}} + + {{@rightSideStatusText}} + + {{else}} + {{/if}} - {{#each @dropdownButtonActions as |action|}} - {{#if action.separator}} -
- {{else}} - {{#if (is-dd-item-visible action.context action.isVisible)}} -
- {{! template-lint-disable no-nested-interactive }} - - {{#if action.icon}} - - - - {{/if}} - {{action.label}} - + + {{/if}} + {{#if @dropdownButton}} + + - + {{#each @dropdownButtonActions as |action|}} + {{#if action.separator}} +
+ {{else}} + {{#if (is-dd-item-visible action.context action.isVisible)}} +
+ {{! template-lint-disable no-nested-interactive }} + + {{#if action.icon}} + + + + {{/if}} + {{action.label}} + +
+ {{/if}} + {{/if}} + {{/each}} +
+ + {{/if}} {{/if}} +
+ {{#if this.doesntHavePermissions}} + + + + {{else if @helpText}} + + + {{/if}} -
- {{#if this.doesntHavePermissions}} - - - - {{else if @helpText}} - - - - {{/if}} - \ No newline at end of file + +{{/if}} \ No newline at end of file diff --git a/addon/components/layout/sidebar/item.js b/addon/components/layout/sidebar/item.js index 0ce0228..b61d734 100644 --- a/addon/components/layout/sidebar/item.js +++ b/addon/components/layout/sidebar/item.js @@ -15,14 +15,16 @@ export default class LayoutSidebarItemComponent extends Component { @tracked permissionRequired = null; @tracked disabled = false; @tracked doesntHavePermissions = false; + @tracked visible = true; - constructor(owner, { dropdownButtonRenderInPlace = true, permission = null, disabled = false }) { + constructor(owner, { dropdownButtonRenderInPlace = true, permission = null, disabled = false, visible = true }) { super(...arguments); this.active = this.checkIfActive(); this.dropdownButtonRenderInPlace = dropdownButtonRenderInPlace; this.permissionRequired = permission; this.disabled = disabled; + this.visible = visible; // If no permissions disable if (!disabled) { this.disabled = this.doesntHavePermissions = permission && this.abilities.cannot(permission); diff --git a/addon/components/table/cell/dropdown/action-item.hbs b/addon/components/table/cell/dropdown/action-item.hbs index cb3bff8..cad7df8 100644 --- a/addon/components/table/cell/dropdown/action-item.hbs +++ b/addon/components/table/cell/dropdown/action-item.hbs @@ -1,31 +1,33 @@ -{{#if @columnAction.separator}} -
-{{else}} - {{#if this.isVisible}} -
- - {{#if @columnAction.icon}} - - - - {{/if}} - {{@columnAction.label}} - {{#if this.doesntHavePermissions}} - - - - {{else if @columnAction.helpText}} - - - - {{/if}} - -
+{{#if this.visible}} + {{#if @columnAction.separator}} +
+ {{else}} + {{#if this.isVisible}} +
+ + {{#if @columnAction.icon}} + + + + {{/if}} + {{@columnAction.label}} + {{#if this.doesntHavePermissions}} + + + + {{else if @columnAction.helpText}} + + + + {{/if}} + +
+ {{/if}} {{/if}} {{/if}} \ No newline at end of file diff --git a/addon/components/table/cell/dropdown/action-item.js b/addon/components/table/cell/dropdown/action-item.js index 7483a7d..078eed2 100644 --- a/addon/components/table/cell/dropdown/action-item.js +++ b/addon/components/table/cell/dropdown/action-item.js @@ -10,12 +10,14 @@ export default class TableCellDropdownActionItemComponent extends Component { @tracked doesntHavePermissions = false; @tracked disabled = false; @tracked isVisible = true; + @tracked visible = true; constructor(owner, { columnAction = {}, row = {}, disabled = false, permission = null }) { super(...arguments); this.permissionRequired = columnAction.permission ?? permission; this.disabled = this.disabledCheck(columnAction, this.permissionRequired, disabled); this.isVisible = this.visibilityCheck(columnAction, row); + this.visible = columnAction.visible ?? true; } @action onClick(columnAction, row, dd) { diff --git a/addon/styles/layout/next.css b/addon/styles/layout/next.css index 91e0066..1d40dfc 100644 --- a/addon/styles/layout/next.css +++ b/addon/styles/layout/next.css @@ -1424,6 +1424,13 @@ body[data-theme='dark'] .next-dd-menu .next-dd-item:disabled, box-shadow: none; } +body[data-theme='dark'] .next-dd-menu .next-header-dd-menu-item.next-dd-item.disabled, +.next-dd-menu .next-header-dd-menu-item.next-dd-item.disabled, +body[data-theme='dark'] .next-dd-menu .next-header-dd-menu-item.next-dd-item:disabled, +.next-dd-menu .next-header-dd-menu-item.next-dd-item:disabled { + opacity: 1; +} + .next-dd-menu-seperator { @apply flex h-px my-2 bg-gray-700; } diff --git a/package.json b/package.json index a2123de..205d248 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@fleetbase/ember-ui", - "version": "0.2.22", + "version": "0.2.23", "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.", "keywords": [ "fleetbase-ui", From 7168625f213ad48595accd210ad5d82f151aa49b Mon Sep 17 00:00:00 2001 From: "Ronald A. Richardson" Date: Mon, 19 Aug 2024 15:44:32 +0800 Subject: [PATCH 2/2] patched `visible` arg --- addon/components/button.js | 2 +- addon/components/dropdown-button.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/addon/components/button.js b/addon/components/button.js index 1b5e1c7..9e04667 100644 --- a/addon/components/button.js +++ b/addon/components/button.js @@ -71,7 +71,7 @@ export default class ButtonComponent extends Component { constructor(owner, { permission = null, disabled = false, visible = true }) { super(...arguments); this.permissionRequired = permission; - this.visible = true; + this.visible = visible; if (!disabled) { this.disabledByPermission = permission && this.abilities.cannot(permission); } diff --git a/addon/components/dropdown-button.js b/addon/components/dropdown-button.js index ca8d693..f12474b 100644 --- a/addon/components/dropdown-button.js +++ b/addon/components/dropdown-button.js @@ -30,7 +30,7 @@ export default class DropdownButtonComponent extends Component { this.buttonComponentArgs = buttonComponentArgs; this.permissionRequired = permission; this.disabled = disabled; - this.visible = true; + this.visible = visible; // If no permissions disable if (!disabled) { this.disabled = this.doesntHavePermissions = permission && this.abilities.cannot(permission);