opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refs #1477 Refactor Command component for improved layout and styling
testing/ogGui-multibranch/pipeline/head This commit looks good Details

pull/16/head
Lucas Lara García 2025-02-10 12:52:26 +01:00
parent ecd3980f61
commit 7490456b71
9 changed files with 49 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.css
View File

@ -1,11 +1,12 @@
.title {
font-size: 24px;
.header-container-title {
flex-grow: 1;
text-align: left;
margin-left: 1em;
}
.calendar-button-row {
.command-groups-button-row {
display: flex;
justify-content: flex-start;
margin-top: 16px;
gap: 15px;
}
.divider {
@ -27,16 +28,15 @@
table {
width: 100%;
margin-top: 50px;
}
.search-container {
.search-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
margin: 1.5rem 0rem 1.5rem 0rem;
}
.search-string {
@ -53,11 +53,12 @@ table {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
padding: 10px 10px;
border-bottom: 1px solid #ddd;
}
.mat-elevation-z8 {
box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
}
.paginator-container {
@ -74,5 +75,4 @@ table {
.mat-chip-readonly-false {
background-color: #F44336 !important;
color: white !important;
}
}

8
ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.html
View File

@ -2,7 +2,9 @@
<button mat-icon-button color="primary" (click)="iniciarTour()">
<mat-icon>help</mat-icon>
</button>
<h2 class="title" joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'adminCommandGroupsTitle' | translate }}</h2>
<div class="header-container-title">
<h2 joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'adminCommandGroupsTitle' | translate }}</h2>
</div>
<div class="command-groups-button-row">
<button mat-flat-button color="primary" (click)="openCreateCommandGroupModal()" joyrideStep="addCommandGroupStep" text="{{ 'addCommandGroupStepText' | translate }}">
{{ 'addCommandGroup' | translate }}
@ -10,8 +12,6 @@
</div>
</div>
<mat-divider class="divider"></mat-divider>
<div class="search-container" joyrideStep="searchStep" text="{{ 'searchStepText' | translate }}">
<mat-form-field appearance="fill" class="search-string">
<mat-label>{{ 'searchGroupNameLabel' | translate }}</mat-label>
@ -22,7 +22,7 @@
</div>
<div *ngIf="loading" class="loading-container" joyrideStep="loadingStep" text="{{ 'loadingStepText' | translate }}">
<mat-spinner></mat-spinner>
<app-loading [isLoading]="loading"></app-loading>
</div>
<div *ngIf="!loading">

17
ogWebconsole/src/app/components/commands/commands-task/commands-task.component.css
View File

@ -1,11 +1,12 @@
.title {
font-size: 24px;
.header-container-title {
flex-grow: 1;
text-align: left;
margin-left: 1em;
}
.calendar-button-row {
.task-button-row {
display: flex;
justify-content: flex-start;
margin-top: 16px;
gap: 15px;
}
.divider {
@ -27,7 +28,6 @@
table {
width: 100%;
margin-top: 50px;
}
.search-container {
@ -35,7 +35,7 @@ table {
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 5px;
margin: 1.5rem 0rem 1.5rem 0rem;
box-sizing: border-box;
}
@ -53,7 +53,8 @@ table {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
padding: 10px 10px;
border-bottom: 1px solid #ddd;
}
.mat-elevation-z8 {

6
ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html
View File

@ -2,7 +2,9 @@
<button mat-icon-button color="primary" (click)="iniciarTour()">
<mat-icon>help</mat-icon>
</button>
<h2 class="title" joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'manageTasksTitle' | translate }}</h2>
<div class="header-container-title">
<h2 class="title" joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'manageTasksTitle' | translate }}</h2>
</div>
<div class="task-button-row">
<button mat-flat-button color="primary" (click)="openCreateTaskModal()" joyrideStep="addTaskStep" text="{{ 'addTaskStepText' | translate }}">
{{ 'addTask' | translate }}
@ -10,8 +12,6 @@
</div>
</div>
<mat-divider class="divider"></mat-divider>
<div class="search-container" joyrideStep="searchStep" text="{{ 'searchStepText' | translate }}">
<mat-form-field appearance="fill" class="search-string">
<mat-label>{{ 'searchTaskLabel' | translate }}</mat-label>

7
ogWebconsole/src/app/components/commands/commands-task/commands-task.component.spec.ts
View File

@ -7,10 +7,11 @@ import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatPaginatorModule } from '@angular/material/paginator';
import { FormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TranslateModule } from '@ngx-translate/core';
import { LoadingComponent } from '../../../shared/loading/loading.component';
import { JoyrideModule, JoyrideService, JoyrideStepService } from 'ngx-joyride';
describe('CommandsTaskComponent', () => {
let component: CommandsTaskComponent;
@ -31,7 +32,7 @@ describe('CommandsTaskComponent', () => {
TranslateModule.forRoot(),
JoyrideModule.forRoot(),
],
declarations: [CommandsTaskComponent],
declarations: [CommandsTaskComponent, LoadingComponent],
schemas: [NO_ERRORS_SCHEMA]
}).compileComponents();
});

17
ogWebconsole/src/app/components/commands/main-commands/commands.component.css
View File

@ -1,11 +1,12 @@
.title {
font-size: 24px;
.header-container-title {
flex-grow: 1;
text-align: left;
margin-left: 1em;
}
.calendar-button-row {
.command-button-row {
display: flex;
justify-content: flex-start;
margin-top: 16px;
gap: 15px;
}
.divider {
@ -27,7 +28,6 @@
table {
width: 100%;
margin-top: 50px;
}
.search-container {
@ -35,8 +35,8 @@ table {
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
margin: 1.5rem 0rem 1.5rem 0rem;
}
.search-string {
@ -53,7 +53,8 @@ table {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
padding: 10px 10px;
border-bottom: 1px solid #ddd;
}
.mat-elevation-z8 {

8
ogWebconsole/src/app/components/commands/main-commands/commands.component.html
View File

@ -2,14 +2,14 @@
<button mat-icon-button color="primary" (click)="iniciarTour()">
<mat-icon>help</mat-icon>
</button>
<h2 class="title" joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'CommandsTitle' | translate }}</h2>
<div class="header-container-title">
<h2 joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'CommandsTitle' | translate }}</h2>
</div>
<div class="command-button-row" joyrideStep="addCommandStep" text="{{ 'addCommandStepText' | translate }}">
<button mat-flat-button color="primary" (click)="openCreateCommandModal()">{{ 'addCommand' | translate }}</button>
</div>
</div>
<mat-divider class="divider"></mat-divider>
<div class="search-container" joyrideStep="searchStep" text="{{ 'searchStepText' | translate }}">
<mat-form-field appearance="fill" class="search-string">
<mat-label>{{ 'searchCommandLabel' | translate }}</mat-label>
@ -20,7 +20,7 @@
</div>
<div *ngIf="loading" class="loading-container" joyrideStep="loadingStep" text="{{ 'loadingStepText' | translate }}">
<mat-spinner></mat-spinner>
<app-loading [isLoading]="loading"></app-loading>
</div>
<div *ngIf="!loading">

3
ogWebconsole/src/app/components/commands/main-commands/commands.component.spec.ts
View File

@ -19,6 +19,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { TranslateModule } from '@ngx-translate/core';
import { JoyrideModule } from 'ngx-joyride';
import { LoadingComponent } from '../../../shared/loading/loading.component';
describe('CommandsComponent', () => {
let component: CommandsComponent;
@ -26,7 +27,7 @@ describe('CommandsComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [CommandsComponent],
declarations: [CommandsComponent, LoadingComponent],
imports: [
HttpClientTestingModule,
ToastrModule.forRoot(),

4
ogWebconsole/src/app/components/groups/groups.component.spec.ts
View File

@ -25,7 +25,7 @@ import { JoyrideModule } from 'ngx-joyride';
import { MatMenuModule } from '@angular/material/menu';
import { MatTreeModule } from '@angular/material/tree';
import { TreeNode } from './model/model';
import { LoadingComponent } from '../../shared/loading/loading.component'; // Importa el componente LoadingComponent
import { LoadingComponent } from '../../shared/loading/loading.component';
import { ExecuteCommandComponent } from '../commands/main-commands/execute-command/execute-command.component';
describe('GroupsComponent', () => {
@ -34,7 +34,7 @@ describe('GroupsComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [GroupsComponent, ExecuteCommandComponent, LoadingComponent], // Declara LoadingComponent
declarations: [GroupsComponent, ExecuteCommandComponent, LoadingComponent],
imports: [
HttpClientTestingModule,
ToastrModule.forRoot(),