fix(console): horizontal toggle for users, projects, improve UI/UX (#4047)

* fix(console): horizontal toggle for users, projects * improve input contrast * toggles, profile UI fix * lint * fix safari styles * fix button placement redirects * style lint Co-authored-by: Livio Spring <[email protected]>
2026-10-30 19:12:16 +00:00 · 2022-07-29 09:14:45 +00:00
parent 9ed972f308
commit 5b284f8c9b
22 changed files with 358 additions and 159 deletions
@@ -0,0 +1,6 @@
+<button class="nav-toggle" [ngClass]="{active}" (click)="clicked.emit()">
+  <div class="c_label">
+    <span> {{ label }} </span>
+    <small *ngIf="count" class="count">({{ count }})</small>
+  </div>
+</button>
@@ -0,0 +1,71 @@
+@use '@angular/material' as mat;
+
+@mixin nav-toggle-theme($theme) {
+  $primary: map-get($theme, primary);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $accent: map-get($theme, accent);
+  $primary-color: mat.get-color-from-palette($primary, 500);
+
+  $warn-color: mat.get-color-from-palette($warn, 500);
+  $accent-color: mat.get-color-from-palette($accent, 500);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+  $back: map-get($background, background);
+
+  .nav-toggle {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    line-height: 14px;
+    padding: 0.4rem 12px;
+    color: mat.get-color-from-palette($foreground, text) !important;
+    transition: all 0.2s ease;
+    text-decoration: none;
+    border-radius: 50vw;
+    border: none;
+    font-weight: 400;
+    margin: 0.25rem 2px;
+    white-space: nowrap;
+    position: relative;
+    background: none;
+    cursor: pointer;
+    font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
+
+    .c_label {
+      display: flex;
+      align-items: center;
+      text-align: center;
+
+      .count {
+        display: none;
+        margin-left: 6px;
+      }
+    }
+
+    &.external-link {
+      padding-right: 2rem;
+
+      i {
+        position: absolute;
+        right: 8px;
+        font-size: 1.2rem;
+      }
+    }
+
+    &:hover {
+      background: if($is-dark-theme, #ffffff40, #00000010);
+    }
+
+    &.active {
+      background-color: $primary-color;
+      color: mat.get-color-from-palette($foreground, toolbar-items) !important;
+
+      .c_label {
+        .count {
+          display: inline-block;
+        }
+      }
+    }
+  }
+}
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavToggleComponent } from './nav-toggle.component';
+
+describe('NavToggleComponent', () => {
+  let component: NavToggleComponent;
+  let fixture: ComponentFixture<NavToggleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NavToggleComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NavToggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,14 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'cnsl-nav-toggle',
+  templateUrl: './nav-toggle.component.html',
+  styleUrls: ['./nav-toggle.component.scss'],
+})
+export class NavToggleComponent {
+  @Input() public label: string = '';
+  @Input() public count: number | null = 0;
+  @Input() public active: boolean = false;
+  @Output() public clicked: EventEmitter<void> = new EventEmitter<void>();
+  constructor() {}
+}
@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { NavToggleComponent } from './nav-toggle.component';
+
+@NgModule({
+  declarations: [NavToggleComponent],
+  imports: [CommonModule, RouterModule],
+  exports: [NavToggleComponent],
+})
+export class NavToggleModule {}