Skip to content

Commit

Permalink
few styling fixes and improvement to toggle component
Browse files Browse the repository at this point in the history
  • Loading branch information
roncodes committed May 15, 2024
1 parent 4492a9c commit 8babd4e
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 8 deletions.
2 changes: 1 addition & 1 deletion addon/components/toggle.hbs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="flex items-center {{@wrapperClass}}">
<div class="flex items-center {{@wrapperClass}}" {{did-update this.onChange @isToggled}}>
<span role="checkbox" tabindex="0" aria-checked="false" class="relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 cursor-pointer group focus:outline-none {{if @disabled 'opacity-50'}}" ...attributes {{on "click" (fn this.toggle this.isToggled)}}>
<span aria-hidden="true" class="{{if this.isToggled this.activeColorClass " bg-gray-200"}} absolute h-4 w-9 mx-auto
rounded-full transition-colors ease-in-out duration-200"></span>
Expand Down
21 changes: 14 additions & 7 deletions addon/components/toggle.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,11 @@ export default class ToggleComponent extends Component {
*
* @memberof ToggleComponent
*/
constructor() {
constructor(owner, { isToggled, activeColor }) {
super(...arguments);

this.isToggled = this.args.isToggled === true;

if (typeof this.args.activeColor === 'string' && this.args.activeColor.length) {
this.activeColor = this.args.activeColor;
}
this.isToggled = isToggled === true;
this.activeColor = typeof activeColor === 'string' ? activeColor : 'green';
}

/**
Expand All @@ -50,7 +47,6 @@ export default class ToggleComponent extends Component {
*/
@action toggle(isToggled) {
const { disabled, onToggle } = this.args;

if (disabled) {
return;
}
Expand All @@ -61,4 +57,15 @@ export default class ToggleComponent extends Component {
onToggle(this.isToggled);
}
}

/**
* Handle toggle argument change.
*
* @param {HTMLElement} el
* @param {Array} [isToggled]
* @memberof ToggleComponent
*/
@action onChange(el, [isToggled]) {
this.isToggled = isToggled === true;
}
}
2 changes: 2 additions & 0 deletions addon/styles/components/badge.css
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@
}

.status-badge[class*='5'] > span,
.status-badge.high-status-badge > span,
.status-badge.rejected-status-badge > span,
.status-badge.critical-status-badge > span,
.status-badge.disabled-status-badge > span,
Expand All @@ -66,6 +67,7 @@
}

.status-badge[class*='5'] > span svg,
.status-badge.high-status-badge > span svg,
.status-badge.rejected-status-badge > span svg,
.status-badge.critical-status-badge > span svg,
.status-badge.urgent-status-badge > span svg,
Expand Down
21 changes: 21 additions & 0 deletions addon/styles/layout/next.css
Original file line number Diff line number Diff line change
Expand Up @@ -1235,6 +1235,18 @@ body[data-theme='dark'] .next-sidebar .next-sidebar-panel-container > .next-side
@apply pl-8;
}

.next-sidebar .next-sidebar-panel-container > .next-sidebar-panel > .next-content-panel > .next-content-panel-body .next-nav-item.next-nav-item-with-dropdown:hover .ember-basic-dropdown-trigger > span.btn-wrapper > button.btn:hover {
background-color: #ffffff;
}

.next-sidebar .next-sidebar-panel-container > .next-sidebar-panel > .next-content-panel > .next-content-panel-body .next-nav-item.next-nav-item-with-dropdown:hover .ember-basic-dropdown-trigger > span.btn-wrapper > button.btn {
color: #000000;
}

body[data-theme="dark"] .next-sidebar .next-sidebar-panel-container > .next-sidebar-panel > .next-content-panel > .next-content-panel-body .next-nav-item.next-nav-item-with-dropdown:hover .ember-basic-dropdown-trigger > span.btn-wrapper > button.btn {
color: #ffffff;
}

.next-org-button-trigger {
@apply flex flex-row items-center px-3 py-1.5 rounded-md cursor-default truncate;
max-height: 31px;
Expand Down Expand Up @@ -1756,12 +1768,21 @@ body[data-theme='light'] .next-dd-menu-seperator {
height: 57px;
}

body[data-theme="light"] .text-danger,
body[data-theme="light"] span.text-danger,
body[data-theme="light"] a.text-danger,
.text-danger,
span.text-danger,
a.text-danger {
@apply text-red-500;
}

body[data-theme="light"] .text-danger:active,
body[data-theme="light"] .text-danger:hover,
body[data-theme="light"] span.text-danger:active,
body[data-theme="light"] span.text-danger:hover,
body[data-theme="light"] a.text-danger:active,
body[data-theme="light"] a.text-danger:hover,
.text-danger:active,
.text-danger:hover,
span.text-danger:active,
Expand Down

0 comments on commit 8babd4e

Please sign in to comment.