From dd788d1af511a525e34208e8d868ec89e2e43e25 Mon Sep 17 00:00:00 2001 From: Pop John Date: Tue, 13 Aug 2024 16:30:13 +0300 Subject: [PATCH] bug fixes and add ui/ux for admin page --- frontend/src/app/app.routes.ts | 4 ++ .../app/modules/admin/admin-routing.module.ts | 32 ++++++++++++ .../src/app/modules/admin/admin.module.ts | 41 +++++++++++++++ .../components/admin/admin.component.html | 51 +++++++++++++++++++ .../components/admin/admin.component.scss | 32 ++++++++++++ .../admin/components/admin/admin.component.ts | 26 ++++++++++ .../core/models/enums/routes-list.enum.ts | 3 ++ .../models/constants/sidenav.constants.ts | 2 +- .../src/app/modules/wizard/wizard.module.ts | 4 +- .../app/styles/theme/_ms-theme-common.scss | 1 + .../styles/theme/components/_ms-buttons.scss | 5 ++ .../styles/theme/components/_ms-cards.scss | 1 - 12 files changed, 199 insertions(+), 3 deletions(-) create mode 100644 frontend/src/app/modules/admin/admin-routing.module.ts create mode 100644 frontend/src/app/modules/admin/admin.module.ts create mode 100644 frontend/src/app/modules/admin/components/admin/admin.component.html create mode 100644 frontend/src/app/modules/admin/components/admin/admin.component.scss create mode 100644 frontend/src/app/modules/admin/components/admin/admin.component.ts diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index b12f5a4b..b4783982 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -91,6 +91,10 @@ export const routes: Routes = [ { path: RoutesList.MULTI_MODAL.ROOT, loadChildren: () => import('./modules/multi-modal/multi-modal.module').then((m) => m.MultiModalModule) + }, + { + path: RoutesList.ADMIN.ROOT, + loadChildren: () => import('./modules/admin/admin.module').then((m) => m.AdminModule) } ] } diff --git a/frontend/src/app/modules/admin/admin-routing.module.ts b/frontend/src/app/modules/admin/admin-routing.module.ts new file mode 100644 index 00000000..7909a1fc --- /dev/null +++ b/frontend/src/app/modules/admin/admin-routing.module.ts @@ -0,0 +1,32 @@ +// Copyright 2024 Cisco Systems, Inc. and its affiliates + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +// SPDX-License-Identifier: Apache-2.0 + +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { AdminComponent } from './components/admin/admin.component'; + +const ADMIN_ROUTES: Routes = [ + { + path: '', + component: AdminComponent + } +]; + +@NgModule({ + imports: [RouterModule.forChild(ADMIN_ROUTES)], + exports: [RouterModule] +}) +export class AdminRoutingModule {} diff --git a/frontend/src/app/modules/admin/admin.module.ts b/frontend/src/app/modules/admin/admin.module.ts new file mode 100644 index 00000000..cb81369b --- /dev/null +++ b/frontend/src/app/modules/admin/admin.module.ts @@ -0,0 +1,41 @@ +// Copyright 2024 Cisco Systems, Inc. and its affiliates + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +// SPDX-License-Identifier: Apache-2.0 + +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { ReactiveFormsModule } from '@angular/forms'; +import { MatButtonToggleModule } from '@angular/material/button-toggle'; +import { MatCardModule } from '@angular/material/card'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatIconModule } from '@angular/material/icon'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { AdminRoutingModule } from './admin-routing.module'; +import { AdminComponent } from './components/admin/admin.component'; + +@NgModule({ + declarations: [AdminComponent], + imports: [ + CommonModule, + AdminRoutingModule, + MatDividerModule, + MatIconModule, + MatTooltipModule, + MatButtonToggleModule, + ReactiveFormsModule, + MatCardModule + ] +}) +export class AdminModule {} diff --git a/frontend/src/app/modules/admin/components/admin/admin.component.html b/frontend/src/app/modules/admin/components/admin/admin.component.html new file mode 100644 index 00000000..57894128 --- /dev/null +++ b/frontend/src/app/modules/admin/components/admin/admin.component.html @@ -0,0 +1,51 @@ + + +
+

Admin

+ +

+ The Global Settings Admin Page allows administrators to manage and customize key app configurations, all from one + central location. +

+ +
+ +
+ + +
+
+ + +
+ +
Default mode:
+
+ +
+ +
+ + + Guided + Expert + + +
diff --git a/frontend/src/app/modules/admin/components/admin/admin.component.scss b/frontend/src/app/modules/admin/components/admin/admin.component.scss new file mode 100644 index 00000000..d4e58aea --- /dev/null +++ b/frontend/src/app/modules/admin/components/admin/admin.component.scss @@ -0,0 +1,32 @@ +// Copyright 2024 Cisco Systems, Inc. and its affiliates + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +// SPDX-License-Identifier: Apache-2.0 + +.divider-container { + margin-bottom: 20px; +} + +.default-mode-card { + width: 300px; +} + +.default-mode-header { + display: flex; +} + +.mode-toggle-group { + display: flex; + justify-content: center; +} diff --git a/frontend/src/app/modules/admin/components/admin/admin.component.ts b/frontend/src/app/modules/admin/components/admin/admin.component.ts new file mode 100644 index 00000000..c861d4e1 --- /dev/null +++ b/frontend/src/app/modules/admin/components/admin/admin.component.ts @@ -0,0 +1,26 @@ +// Copyright 2024 Cisco Systems, Inc. and its affiliates + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +// SPDX-License-Identifier: Apache-2.0 + +import { Component } from '@angular/core'; + +@Component({ + selector: 'ms-admin', + templateUrl: './admin.component.html', + styleUrl: './admin.component.scss' +}) +export class AdminComponent { + defaultSelectedMode?: string; +} diff --git a/frontend/src/app/modules/core/models/enums/routes-list.enum.ts b/frontend/src/app/modules/core/models/enums/routes-list.enum.ts index 12fd8b86..7b1181b3 100644 --- a/frontend/src/app/modules/core/models/enums/routes-list.enum.ts +++ b/frontend/src/app/modules/core/models/enums/routes-list.enum.ts @@ -46,6 +46,9 @@ export const RoutesList = { AWQ: { ROOT: 'awq' }, + ADMIN: { + ROOT: 'admin' + }, DEMO: { ROOT: 'demo', BUTTONS: 'buttons', diff --git a/frontend/src/app/modules/shared/components/ms-sidenav/models/constants/sidenav.constants.ts b/frontend/src/app/modules/shared/components/ms-sidenav/models/constants/sidenav.constants.ts index 0f529dd6..65a09992 100644 --- a/frontend/src/app/modules/shared/components/ms-sidenav/models/constants/sidenav.constants.ts +++ b/frontend/src/app/modules/shared/components/ms-sidenav/models/constants/sidenav.constants.ts @@ -20,7 +20,7 @@ import { Sidenav, SidenavItem } from '../interfaces/sidenav.interface'; const common: SidenavItem[] = [ { - route: 'admin', + route: RoutesList.ADMIN.ROOT, label: 'Admin', icon: 'icon-Admin' } diff --git a/frontend/src/app/modules/wizard/wizard.module.ts b/frontend/src/app/modules/wizard/wizard.module.ts index 0a24de20..5f0e2ace 100644 --- a/frontend/src/app/modules/wizard/wizard.module.ts +++ b/frontend/src/app/modules/wizard/wizard.module.ts @@ -16,6 +16,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; import { MatChipsModule } from '@angular/material/chips'; import { MatIconModule } from '@angular/material/icon'; import { MsCardSelectorComponent } from '../shared/components/ms-card-selector/ms-card-selector.component'; @@ -56,7 +57,8 @@ import { WizardRoutingModule } from './wizard-routing.module'; MsTerminalComponent, MsCardSelectorComponent, MatIconModule, - MatChipsModule + MatChipsModule, + MatButtonModule ], providers: [WizardUtilsService] }) diff --git a/frontend/src/app/styles/theme/_ms-theme-common.scss b/frontend/src/app/styles/theme/_ms-theme-common.scss index 5369e1f7..8621ed35 100644 --- a/frontend/src/app/styles/theme/_ms-theme-common.scss +++ b/frontend/src/app/styles/theme/_ms-theme-common.scss @@ -112,6 +112,7 @@ $ms-typography: mat.m2-define-rem-typography-config( @mixin create-theme($theme) { @include mat.core-theme($theme); @include mat.button-theme($theme); + @include mat.button-toggle-theme($theme); @include mat.form-field-theme($theme); @include mat.input-theme($theme); @include mat.menu-theme($theme); diff --git a/frontend/src/app/styles/theme/components/_ms-buttons.scss b/frontend/src/app/styles/theme/components/_ms-buttons.scss index d7f831b6..fc8c06f6 100644 --- a/frontend/src/app/styles/theme/components/_ms-buttons.scss +++ b/frontend/src/app/styles/theme/components/_ms-buttons.scss @@ -50,3 +50,8 @@ button.ms-white-stroked-button { } } } + +.mat-button-toggle-group .mat-button-toggle { + margin: 0 5px; + font-size: 0.875rem; +} diff --git a/frontend/src/app/styles/theme/components/_ms-cards.scss b/frontend/src/app/styles/theme/components/_ms-cards.scss index 3c7d63c5..302e3886 100644 --- a/frontend/src/app/styles/theme/components/_ms-cards.scss +++ b/frontend/src/app/styles/theme/components/_ms-cards.scss @@ -28,7 +28,6 @@ mat-card.ms-card { cursor: pointer; &:hover { - transform: scale(1.02); box-shadow: 0px 5px 15px 0px #0000001f; background-color: var(--backgrounds-80); }