Merge branch 'main' of github.com:fleetbase/ember-ui into feature/chat

fleetbase · Apr 3, 2024 · e28b758 · e28b758
2 parents 5b8cb16 + 700a229
commit e28b758
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 18 deletions.
diff --git a/addon/components/content-panel.hbs b/addon/components/content-panel.hbs
@@ -69,7 +69,7 @@
                             <Button @type={{button.type}} @text={{button.text}} @icon={{button.icon}} @size={{button.size}} @iconPrefix={{button.iconPrefix}} @onClick={{button.onClick}} />
                         {{/each}}
                         {{#if @dropdownButton}}
-                            <DropdownButton @icon={{or @dropdownButtonIcon "ellipsis"}} @iconPrefix={{@dropdownButtonIconPrefix}} @text={{@dropdownButtonText}} @size="xs" @horizontalPosition="left" @calculatePosition={{@dropdownButtonCalculatePosition}} @renderInPlace={{or @dropdownButtonRenderInPlace true}} as |dd|>
+                            <DropdownButton @icon={{or @dropdownButtonIcon "ellipsis"}} @iconPrefix={{@dropdownButtonIconPrefix}} @text={{@dropdownButtonText}} @size="xs" @horizontalPosition="left" @calculatePosition={{@dropdownButtonCalculatePosition}} @renderInPlace={{this.dropdownButtonRenderInPlace}} as |dd|>
                                 <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                                     {{#if @dropdownButtonMenuLabel}}
                                         <div class="px-1">

diff --git a/addon/components/content-panel.js b/addon/components/content-panel.js
@@ -27,6 +27,15 @@ export default class ContentPanelComponent extends Component {
      */
     @tracked toggleOnCaretOnly = false;
 
+    /**
+     * Determines if the dropdown button should render in place.
+     *
+     * @property {boolean} dropdownButtonRenderInPlace - Whether the dropdown button should render in place..
+     * @default false
+     * @public
+     */
+    @tracked dropdownButtonRenderInPlace = false;
+
     /**
      * Array of icon containers used for checking if the user clicked on or within a caret.
      *
@@ -42,14 +51,15 @@ export default class ContentPanelComponent extends Component {
      * @constructor
      * @public
      */
-    constructor() {
+    constructor(owner, { open = false, toggleOnCaretOnly = false, dropdownButtonRenderInPlace = true, onInsert }) {
         super(...arguments);
 
-        this.isOpen = this.args.open === true;
-        this.toggleOnCaretOnly = this.args.toggleOnCaretOnly === true;
+        this.isOpen = open === true;
+        this.toggleOnCaretOnly = toggleOnCaretOnly === true;
+        this.dropdownButtonRenderInPlace = dropdownButtonRenderInPlace === true;
 
-        if (typeof this.args.onInsert === 'function') {
-            this.args.onInsert(...arguments);
+        if (typeof onInsert === 'function') {
+            onInsert(...arguments);
         }
     }
 

diff --git a/addon/components/layout/header.hbs b/addon/components/layout/header.hbs
@@ -18,14 +18,6 @@
                         </div>
                     </LinkToExternal>
                 {{/each}}
-                <LinkToExternal @route="console.extensions" id="console-extensions-header-button" class="next-view-header-item truncate" role="menuitem">
-                    <div class="w-6">
-                        <FaIcon @icon="shapes" @size="sm" />
-                    </div>
-                    <div>
-                        <span>Extensions</span>
-                    </div>
-                </LinkToExternal>
             </div>
         {{/unless}}
         <div id="view-header-left-content-a">

diff --git a/addon/components/layout/sidebar/panel.js b/addon/components/layout/sidebar/panel.js
@@ -1,3 +1,11 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 
-export default class LayoutSidebarPanelComponent extends Component {}
+export default class LayoutSidebarPanelComponent extends Component {
+    @tracked dropdownButtonRenderInPlace = true;
+
+    constructor(owner, { dropdownButtonRenderInPlace = true }) {
+        super(...arguments);
+        this.dropdownButtonRenderInPlace = dropdownButtonRenderInPlace;
+    }
+}
diff --git a/addon/components/modals/create-or-join-org.hbs b/addon/components/modals/create-or-join-org.hbs
@@ -2,15 +2,15 @@
     <div class="modal-body-container">
         <InputGroup>
             <div class="space-x-4 flex">
-                <button type="button" class="outline-none flex-1 rounded-lg bg-white dark:bg-gray-900 border-2 border-transparent px-4 py-2 flex items-center justify-center {{if (eq @options.action "join") 'border-blue-500'}}" {{on "click" (fn @options.changeAction "join")}}>
+                <button type="button" class="outline-none flex-1 rounded-lg bg-white dark:bg-gray-900 border-2 px-4 py-2 flex items-center justify-center {{if (eq @options.action "join") 'border-blue-500' 'border-transparent'}}" {{on "click" (fn @options.changeAction "join")}}>
                     <div class="mr-2.5">
                         <FaIcon @icon="handshake" @size="xl" class="text-blue-500" />
                     </div>
                     <div>
                         <span class="text-gray-900 dark:text-gray-100 text-lg">Join an Organization</span>
                     </div>
                 </button>
-                <button type="button" class="outline-none flex-1 rounded-lg bg-white dark:bg-gray-900 border-2 border-transparent px-4 py-2 flex items-center justify-center {{if (eq @options.action "create") 'border-blue-500'}}" {{on "click" (fn @options.changeAction "create")}}>
+                <button type="button" class="outline-none flex-1 rounded-lg bg-white dark:bg-gray-900 border-2 px-4 py-2 flex items-center justify-center {{if (eq @options.action "create") 'border-blue-500' 'border-transparent'}}" {{on "click" (fn @options.changeAction "create")}}>
                     <div class="mr-2.5">
                         <FaIcon @icon="building" @size="xl" class="text-blue-500" />
                     </div>

diff --git a/addon/styles/components/badge.css b/addon/styles/components/badge.css
@@ -16,6 +16,7 @@
 }
 
 .status-badge[class*='2'] > span,
+.status-badge.published-status-badge > span,
 .status-badge.live-status-badge > span,
 .status-badge.online-status-badge > span,
 .status-badge.created-status-badge > span,
@@ -30,6 +31,7 @@
 }
 
 .status-badge[class*='2'] > span svg,
+.status-badge.published-status-badge > span svg,
 .status-badge.live-status-badge > span svg,
 .status-badge.online-status-badge > span svg,
 .status-badge.created-status-badge > span svg,
@@ -44,6 +46,7 @@
 }
 
 .status-badge[class*='5'] > span,
+.status-badge.rejected-status-badge > span,
 .status-badge.critical-status-badge > span,
 .status-badge.disabled-status-badge > span,
 .status-badge.inactive-status-badge > span,
@@ -53,6 +56,8 @@
 }
 
 .status-badge[class*='5'] > span svg,
+.status-badge.rejected-status-badge > span svg,
+.status-badge.critical-status-badge > span svg,
 .status-badge.urgent-status-badge > span svg,
 .status-badge.high-status-badge > span svg,
 .status-badge.disabled-status-badge > span svg,
@@ -70,6 +75,8 @@
 }
 
 .status-badge[class*='4'] > span,
+.status-badge.pending-review-badge > span,
+.status-badge.awaiting-review-badge > span,
 .status-badge.scheduled-maintenance-badge > span,
 .status-badge.test-status-badge > span,
 .status-badge.warning-status-badge > span,
@@ -82,6 +89,9 @@
 }
 
 .status-badge[class*='4'] > span svg,
+.status-badge.pending-review-badge > span svg,
+.status-badge.awaiting-review-badge > span svg,
+.status-badge.scheduled-maintenance-badge > span svg,
 .status-badge.test-status-badge > span svg,
 .status-badge.warning-status-badge > span svg,
 .status-badge.preparing-status-badge > span svg,
@@ -112,20 +122,24 @@
 }
 
 .status-badge.driver-enroute-badge > span,
+.status-badge.enroute-status-badge > span,
 .status-badge.driver-enroute-status-badge > span {
     @apply text-orange-900 bg-orange-100;
 }
 
 .status-badge.driver-enroute-badge > span svg,
+.status-badge.enroute-status-badge > span svg,
 .status-badge.driver-enroute-status-badge > span svg {
     @apply text-orange-400;
 }
 
+.status-badge.approved-status-badge > span,
 .status-badge.info-status-badge > span,
 .status-badge.in-progress-status-badge > span {
     @apply text-blue-900 bg-blue-300;
 }
 
+.status-badge.approved-status-badge > span svg,
 .status-badge.info-status-badge > span svg,
 .status-badge.in-progress-status-badge > span svg {
     @apply text-blue-900;
@@ -147,6 +161,7 @@ body[data-theme='dark'] .status-badge:not(.shadow-none) {
     @apply text-orange-900 bg-orange-100;
 }
 
+.status-element.published-status-element,
 .status-element.live-status-element,
 .status-element.created-status-element,
 .status-element.enabled-status-element,
@@ -187,6 +202,7 @@ body[data-theme='dark'] .status-badge:not(.shadow-none) {
     @apply border-blue-300;
 }
 
+.status-element.published-status-element,
 .status-element.live-status-element,
 .status-element.created-status-element,
 .status-element.enabled-status-element,
@@ -199,6 +215,7 @@ body[data-theme='dark'] .status-badge:not(.shadow-none) {
     @apply text-green-800 bg-green-100;
 }
 
+.status-element.rejected-status-element,
 .status-element.disabled-status-element,
 .status-element.failed-status-element,
 .status-element.canceled-status-element {
@@ -222,6 +239,7 @@ body[data-theme='dark'] .status-badge:not(.shadow-none) {
     @apply text-orange-900 bg-orange-100;
 }
 
+.status-element.approved-status-element,
 .status-element.info-status-element,
 .status-element.in-progress-status-element {
     @apply text-blue-900 bg-blue-300;

diff --git a/addon/styles/components/table.css b/addon/styles/components/table.css
@@ -297,3 +297,32 @@ body[data-theme='dark'] .table-wrapper.table-fluid > .next-table-wrapper > table
 .next-table-wrapper table.is-expandable > tbody > tr.expandable-row.is-expanded > td a.next-dd-item {
     @apply text-white;
 }
+
+body[data-theme='light'] .next-table-wrapper.auto-height,
+body[data-theme='dark'] .next-table-wrapper.auto-height,
+.next-table-wrapper.auto-height {
+    height: auto;
+}
+
+body[data-theme='light'] .next-table-wrapper.auto-height > table,
+body[data-theme='dark'] .next-table-wrapper.auto-height > table,
+.next-table-wrapper.auto-height > table {
+    height: auto;
+}
+body[data-theme='light'] .next-table-wrapper.auto-height > table > tbody:after,
+body[data-theme='dark'] .next-table-wrapper.auto-height > table > tbody:after,
+.next-table-wrapper.auto-height > table > tbody:after {
+    height: 0;
+}
+
+body[data-theme='light'] .next-table-wrapper.rounded-b > table > tbody > tr:last-child > td:first-child,
+body[data-theme='dark'] .next-table-wrapper.rounded-b > table > tbody > tr:last-child > td:first-child,
+.next-table-wrapper.auto-height > table > tbody > tr:last-child > td:first-child {
+    border-bottom-left-radius: .25rem;
+}
+
+body[data-theme='light'] .next-table-wrapper.rounded-b > table > tbody > tr:last-child > td:last-child,
+body[data-theme='dark'] .next-table-wrapper.rounded-b > table > tbody > tr:last-child > td:last-child,
+.next-table-wrapper.auto-height > table > tbody > tr:last-child > td:last-child {
+    border-bottom-right-radius: .25rem;
+}
diff --git a/addon/styles/components/tabs.css b/addon/styles/components/tabs.css
@@ -156,3 +156,37 @@ body[data-theme='dark'] .ui-tabs > nav .ui-tab.active {
 .tab-pane.active {
     @apply block;
 }
+
+.fleetbase-pill-tabs > nav {
+    display: flex;
+    flex-direction: row;
+}
+
+.fleetbase-pill-tabs > nav > a.ui-tab {
+    border-radius: 1rem;
+    border: 1px solid #374151;
+    background-color: #1f2937;
+    margin-right: 0.75rem;
+    padding: 0.15rem 1rem;
+    font-size: 0.85rem;
+}
+
+.fleetbase-pill-tabs > nav > a.ui-tab.active {
+    background-color: #3b82f6;
+    border: 1px solid #2563eb;
+}
+
+.fleetbase-pill-tabs > nav > a.ui-tab:hover {
+    opacity: 0.75;
+}
+
+body[data-theme='light'] .fleetbase-pill-tabs > nav > a.ui-tab {
+    background-color: #e5e7eb;
+    border: 1px solid #d1d5db;
+}
+
+body[data-theme='light'] .fleetbase-pill-tabs > nav > a.ui-tab.active {
+    background-color: #3b82f6;
+    border: 1px solid #2563eb;
+    color: #fff;
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.2.11",
+    "version": "0.2.12",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",