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

refs #1551 Apply global button styles to all components

deb-pkg
Lucas Lara García 2025-02-19 20:25:03 +01:00
parent 37aff33b11
commit 0350e0110c
60 changed files with 578 additions and 544 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
ogWebconsole/src/app/app.module.ts
View File

@ -25,6 +25,7 @@ import { MatListModule } from '@angular/material/list';
import { UsersComponent } from './components/admin/users/users/users.component';
import { RolesComponent } from './components/admin/roles/roles/roles.component';
import { MatTableModule } from '@angular/material/table';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatDialogModule } from '@angular/material/dialog';
import { AddUserModalComponent } from './components/admin/users/users/add-user-modal/add-user-modal.component';
import { MatSelectModule } from '@angular/material/select';
@ -41,7 +42,7 @@ import { ClassroomViewComponent } from './components/groups/shared/classroom-vie
import { MatProgressSpinner } from "@angular/material/progress-spinner";
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatMenu, MatMenuItem, MatMenuTrigger } from "@angular/material/menu";
import {MatAutocomplete, MatAutocompleteTrigger} from "@angular/material/autocomplete";
import { MatAutocomplete, MatAutocompleteTrigger } from "@angular/material/autocomplete";
import { MatChip, MatChipListbox, MatChipOption, MatChipSet, MatChipsModule } from "@angular/material/chips";
import { ClientViewComponent } from './components/groups/shared/client-view/client-view.component';
import { MatTab, MatTabGroup } from "@angular/material/tabs";
@ -85,7 +86,7 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { CalendarComponent } from './components/calendar/calendar.component';
import { CreateCalendarComponent } from './components/calendar/create-calendar/create-calendar.component';
import {MatRadioButton, MatRadioGroup} from "@angular/material/radio";
import { MatRadioButton, MatRadioGroup } from "@angular/material/radio";
import { CreateCalendarRuleComponent } from './components/calendar/create-calendar-rule/create-calendar-rule.component';
import { CommandsGroupsComponent } from './components/commands/commands-groups/commands-groups.component';
import { CommandsTaskComponent } from './components/commands/commands-task/commands-task.component';
@ -96,11 +97,11 @@ import { DetailTaskComponent } from './components/commands/commands-task/detail-
import { TaskLogsComponent } from './components/commands/commands-task/task-logs/task-logs.component';
import { ServerInfoDialogComponent } from './components/ogdhcp/og-dhcp-subnets/server-info-dialog/server-info-dialog.component';
import { StatusComponent } from './components/ogdhcp/og-dhcp-subnets/status/status.component';
import {MatSliderModule} from '@angular/material/slider';
import { MatSliderModule } from '@angular/material/slider';
import { ClientMainViewComponent } from './components/groups/components/client-main-view/client-main-view.component';
import { ImagesComponent } from './components/images/images.component';
import { CreateImageComponent } from './components/images/create-image/create-image.component';
import { CreateClientImageComponent} from './components/groups/components/client-main-view/create-image/create-image.component';
import { CreateClientImageComponent } from './components/groups/components/client-main-view/create-image/create-image.component';
import { PartitionAssistantComponent } from './components/groups/components/client-main-view/partition-assistant/partition-assistant.component';
import { SoftwareComponent } from './components/software/software.component';
import { CreateSoftwareComponent } from './components/software/create-software/create-software.component';
@ -124,7 +125,7 @@ import { MenusComponent } from './components/menus/menus.component';
import { CreateMenuComponent } from './components/menus/create-menu/create-menu.component';
import { CreateMultipleClientComponent } from './components/groups/shared/clients/create-multiple-client/create-multiple-client.component';
import { ExportImageComponent } from './components/images/export-image/export-image.component';
import {ImportImageComponent} from "./components/repositories/import-image/import-image.component";
import { ImportImageComponent } from "./components/repositories/import-image/import-image.component";
import { LoadingComponent } from './shared/loading/loading.component';
import { RepositoryImagesComponent } from './components/repositories/repository-images/repository-images.component';
import { InputDialogComponent } from './components/commands/commands-task/task-logs/input-dialog/input-dialog.component';
@ -217,53 +218,54 @@ export function HttpLoaderFactory(http: HttpClient) {
ManageOrganizationalUnitComponent,
],
bootstrap: [AppComponent],
imports: [BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
MatToolbarModule,
MatIconModule,
MatButtonModule,
MatSidenavModule,
NoopAnimationsModule,
MatCardModule,
MatCheckboxModule,
MatFormFieldModule,
MatInputModule,
MatListModule,
MatTableModule,
MatDialogModule,
MatSelectModule,
MatDividerModule,
MatProgressBarModule,
MatStepperModule,
DragDropModule,
MatSlideToggleModule, MatMenu, MatMenuTrigger, MatMenuItem, MatAutocomplete, MatChipListbox, MatChipOption, MatChipSet, MatChipsModule, MatChip, MatProgressSpinner, MatTabGroup, MatTab, MatTooltip,
MatExpansionModule,
NgxChartsModule,
MatDatepickerModule,
MatNativeDateModule,
MatSliderModule,
MatSortModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
JoyrideModule.forRoot(),
ToastrModule.forRoot(
{
timeOut: 5000,
positionClass: 'toast-bottom-right',
preventDuplicates: true,
progressBar: true,
progressAnimation: 'increasing',
closeButton: true
}
), MatGridList, MatTree, MatTreeNode, MatNestedTreeNode, MatTreeNodeToggle, MatTreeNodeDef, MatTreeNodePadding, MatTreeNodeOutlet, MatPaginator, MatGridTile, MatExpansionPanel, MatExpansionPanelTitle, MatExpansionPanelDescription, MatRadioGroup, MatRadioButton, MatAutocompleteTrigger
],
imports: [BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
MatToolbarModule,
MatIconModule,
MatButtonToggleModule,
MatButtonModule,
MatSidenavModule,
NoopAnimationsModule,
MatCardModule,
MatCheckboxModule,
MatFormFieldModule,
MatInputModule,
MatListModule,
MatTableModule,
MatDialogModule,
MatSelectModule,
MatDividerModule,
MatProgressBarModule,
MatStepperModule,
DragDropModule,
MatSlideToggleModule, MatMenu, MatMenuTrigger, MatMenuItem, MatAutocomplete, MatChipListbox, MatChipOption, MatChipSet, MatChipsModule, MatChip, MatProgressSpinner, MatTabGroup, MatTab, MatTooltip,
MatExpansionModule,
NgxChartsModule,
MatDatepickerModule,
MatNativeDateModule,
MatSliderModule,
MatSortModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
JoyrideModule.forRoot(),
ToastrModule.forRoot(
{
timeOut: 5000,
positionClass: 'toast-bottom-right',
preventDuplicates: true,
progressBar: true,
progressAnimation: 'increasing',
closeButton: true
}
), MatGridList, MatTree, MatTreeNode, MatNestedTreeNode, MatTreeNodeToggle, MatTreeNodeDef, MatTreeNodePadding, MatTreeNodeOutlet, MatPaginator, MatGridTile, MatExpansionPanel, MatExpansionPanelTitle, MatExpansionPanelDescription, MatRadioGroup, MatRadioButton, MatAutocompleteTrigger
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
],

66
ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.css
View File

@ -32,20 +32,24 @@
.charts-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* Distribuye el espacio entre los gráficos */
gap: 20px; /* Añade espacio entre los gráficos */
justify-content: space-between;
/* Distribuye el espacio entre los gráficos */
gap: 20px;
/* Añade espacio entre los gráficos */
}
.disk-usage {
text-align: center;
flex: 1;
min-width: 200px; /* Ajusta este valor según el tamaño mínimo deseado para cada gráfico */
min-width: 200px;
/* Ajusta este valor según el tamaño mínimo deseado para cada gráfico */
}
.circular-chart {
max-width: 150px;
max-height: 150px;
margin: 0 auto; /* Centra el gráfico dentro del contenedor */
margin: 0 auto;
/* Centra el gráfico dentro del contenedor */
}
.chart {
@ -86,7 +90,7 @@
}
.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);
}
.table-row {
@ -134,8 +138,10 @@
.client-button-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* Distribuye el espacio entre los gráficos */
gap: 20px; /* Añade espacio entre los gráficos */
justify-content: space-between;
/* Distribuye el espacio entre los gráficos */
gap: 20px;
/* Añade espacio entre los gráficos */
}
.buttons-row {
@ -221,10 +227,26 @@
}
/* Define colores distintos para cada partición */
.partition-0 { stroke: #00bfa5; } /* Ejemplo: verde */
.partition-1 { stroke: #ff6f61; } /* Ejemplo: rojo */
.partition-2 { stroke: #ffb400; } /* Ejemplo: amarillo */
.partition-3 { stroke: #3498db; } /* Ejemplo: azul */
.partition-0 {
stroke: #00bfa5;
}
/* Ejemplo: verde */
.partition-1 {
stroke: #ff6f61;
}
/* Ejemplo: rojo */
.partition-2 {
stroke: #ffb400;
}
/* Ejemplo: amarillo */
.partition-3 {
stroke: #3498db;
}
/* Ejemplo: azul */
/* Texto en el centro del gráfico */
.percentage {
@ -258,6 +280,26 @@
}
.back-button {
margin-left: 10px;
display: flex;
align-items: center;
gap: 5px;
margin-left: 0.5em;
background-color: #3f51b5;
color: white;
padding: 8px 18px 8px 8px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: transform 0.3s ease;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.back-button:hover:not(:disabled) {
background-color: #485ac0d7;
}
.back-button:disabled {
background-color: #ced0df;
cursor: not-allowed;
}

6
ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html
View File

@ -2,9 +2,9 @@
<h2 class="title">{{ 'clientDetailsTitle' | translate }}</h2>
<div class="client-button-row">
<button mat-flat-button color="primary" (click)="onEditClick($event, clientData.uuid)"
<button class="action-button" (click)="onEditClick($event, clientData.uuid)"
i18n="@@editImage">Editar</button>
<button mat-flat-button color="primary" [matMenuTriggerFor]="commandMenu">{{ 'commandsButton' | translate
<button class="action-button" [matMenuTriggerFor]="commandMenu">{{ 'commandsButton' | translate
}}</button>
</div>
<mat-menu #commandMenu="matMenu">
@ -14,7 +14,7 @@
</mat-menu>
</div>
<button mat-raised-button color="primary" (click)="navigateToGroups()" class="back-button">
<button class="back-button" (click)="navigateToGroups()">
<mat-icon>arrow_back</mat-icon>
{{ 'Back' | translate }}
</button>

2
ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.html
View File

@ -7,7 +7,7 @@
</h2>
</div>
<div class="subnets-button-row">
<button mat-flat-button color="primary" (click)="save()">Ejecutar</button>
<button class="action-button" (click)="save()">Ejecutar</button>
</div>
</div>
<mat-divider></mat-divider>

2
ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html
View File

@ -7,7 +7,7 @@
</h2>
</div>
<div class="subnets-button-row">
<button mat-flat-button color="primary" (click)="save()">Ejecutar</button>
<button class="action-button" (click)="save()">Ejecutar</button>
</div>
</div>
<mat-divider></mat-divider>

4
ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css
View File

@ -9,8 +9,8 @@
display: flex;
justify-content: space-between;
align-items: center;
height: 100px;
padding: 10px;
padding: 10px 10px;
border-bottom: 1px solid #ddd;
}
.disk-size {

116
ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html
View File

@ -7,10 +7,9 @@
</h2>
</div>
<div class="subnets-button-row">
<button mat-flat-button color="primary" [disabled]="data.status === 'busy'" (click)="save()">Ejecutar</button>
<button class="action-button" [disabled]="data.status === 'busy'" (click)="save()">Ejecutar</button>
</div>
</div>
<mat-divider></mat-divider>
<div class="select-container">
<mat-expansion-panel hideToggle>
@ -19,13 +18,10 @@
<mat-panel-description> Listado de clientes donde se realizará el particionado </mat-panel-description>
</mat-expansion-panel-header>
<div class="clients-grid" >
<div class="clients-grid">
<div *ngFor="let client of clientData" class="client-item">
<div class="client-card">
<img
[src]="'assets/images/ordenador_' + client.status + '.png'"
alt="Client Icon"
class="client-image" />
<img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon" class="client-image" />
<div class="client-details">
<span class="client-name">{{ client.name }}</span>
@ -54,86 +50,74 @@
<div class="partition-assistant" *ngIf="selectedDisk">
<div class="partition-bar">
<div
*ngFor="let partition of activePartitions(selectedDisk.diskNumber)"
<div *ngFor="let partition of activePartitions(selectedDisk.diskNumber)"
[ngStyle]="{'width': partition.percentage + '%', 'background-color': partition.color}"
class="partition-segment"
>
class="partition-segment">
{{ partition.partitionCode }} ({{ (partition.size / 1024).toFixed(2) }} GB)
</div>
</div>
<div class="row">
<button mat-flat-button color="primary" (click)="addPartition(selectedDisk.diskNumber)">Añadir partición</button>
<button class="action-button" (click)="addPartition(selectedDisk.diskNumber)">Añadir partición</button>
</div>
<div class="row">
<div class="form-container">
<table class="partition-table">
<thead>
<tr>
<th>Partición</th>
<th>Tipo partición</th>
<th>S. ficheros</th>
<th>Tamaño (MB)</th>
<th>Tamaño (%)</th>
<th>Formatear</th>
<th>Eliminar</th>
</tr>
<tr>
<th>Partición</th>
<th>Tipo partición</th>
<th>S. ficheros</th>
<th>Tamaño (MB)</th>
<th>Tamaño (%)</th>
<th>Formatear</th>
<th>Eliminar</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let partition of selectedDisk.partitions; let j = index">
<tr *ngIf="!partition.removed">
<td>{{ partition.partitionNumber }}</td>
<td>
<select [(ngModel)]="partition.partitionCode" required>
<option *ngFor="let type of partitionTypes" [value]="type.name">
{{ type.name }}
</option>
</select>
</td>
<td>
<select [(ngModel)]="partition.filesystem" required>
<option *ngFor="let type of filesystemTypes" [value]="type.name">
{{ type.name }}
</option>
</select>
</td>
<td>
<input
type="number"
[(ngModel)]="partition.size" required
(input)="updatePartitionSize(selectedDisk.diskNumber, j, partition.size)"
/>
</td>
<td>
<input
type="number"
[(ngModel)]="partition.percentage"
(input)="updatePartitionSizeFromPercentage(selectedDisk.diskNumber, j, partition.percentage)"
/>
</td>
<td>
<input type="checkbox" [(ngModel)]="partition.format" />
</td>
<td>
<button (click)="removePartition(selectedDisk.diskNumber, partition)" class="remove-btn">X</button>
</td>
</tr>
</ng-container>
<ng-container *ngFor="let partition of selectedDisk.partitions; let j = index">
<tr *ngIf="!partition.removed">
<td>{{ partition.partitionNumber }}</td>
<td>
<select [(ngModel)]="partition.partitionCode" required>
<option *ngFor="let type of partitionTypes" [value]="type.name">
{{ type.name }}
</option>
</select>
</td>
<td>
<select [(ngModel)]="partition.filesystem" required>
<option *ngFor="let type of filesystemTypes" [value]="type.name">
{{ type.name }}
</option>
</select>
</td>
<td>
<input type="number" [(ngModel)]="partition.size" required
(input)="updatePartitionSize(selectedDisk.diskNumber, j, partition.size)" />
</td>
<td>
<input type="number" [(ngModel)]="partition.percentage"
(input)="updatePartitionSizeFromPercentage(selectedDisk.diskNumber, j, partition.percentage)" />
</td>
<td>
<input type="checkbox" [(ngModel)]="partition.format" />
</td>
<td>
<button (click)="removePartition(selectedDisk.diskNumber, partition)" class="remove-btn">X</button>
</td>
</tr>
</ng-container>
</tbody>
</table>
</div>
<div class="chart-container">
<ngx-charts-pie-chart
[view]="view"
[results]="selectedDisk.chartData"
[doughnut]="true"
>
<ngx-charts-pie-chart [view]="view" [results]="selectedDisk.chartData" [doughnut]="true">
</ngx-charts-pie-chart>
</div>
</div>
</div>
</mat-dialog-content>
<div *ngIf="errorMessage" class="error-message">{{ errorMessage }}</div>
<div *ngIf="errorMessage" class="error-message">{{ errorMessage }}</div>

62
ogWebconsole/src/app/components/groups/groups.component.css
View File

@ -488,9 +488,19 @@ mat-tree mat-tree-node.disabled:hover {
.clients-view-header {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 1rem;
align-items: center;
padding-right: 1rem;
}
@media (max-width: 1560px) {
.clients-view-header {
display: flex;
flex-direction: column;
}
}
.clients-title-name {
@ -506,4 +516,56 @@ mat-tree mat-tree-node.disabled:hover {
gap: 10px;
margin-top: 1.5rem;
margin-left: 1.6rem;
}
.view-type-container {
display: flex;
justify-content: flex-end;
gap: 2rem;
align-items: center;
}
mat-button-toggle-group {
border: none;
}
.mat-button-toggle-group .mat-button-toggle {
height: 36px;
background-color: #3f51b5;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
transition: transform 0.3s ease;
font-family: Roboto, "Helvetica Neue", sans-serif;
display: flex;
align-items: center;
justify-content: center;
padding: 0 6px;
}
.mat-button-toggle-group .mat-button-toggle:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.mat-button-toggle-group .mat-button-toggle:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.mat-button-toggle-group .mat-button-toggle:not(:first-child):not(:last-child) {
border-radius: 0;
}
.mat-button-toggle-group .mat-button-toggle:hover {
background-color: #303f9f;
}
.mat-button-toggle-group .mat-button-toggle.mat-button-toggle-checked {
background-color: #303f9f;
}
.mat-button-toggle-group .mat-button-toggle.mat-button-toggle-disabled {
background-color: #c7c7c7;
}

29
ogWebconsole/src/app/components/groups/groups.component.html
View File

@ -9,8 +9,8 @@
</h2>
</div>
<div class="groups-button-row" joyrideStep="addStep" text="{{ 'groupsAddStepText' | translate }}">
<button class="action-button" (click)="addOU($event)"
matTooltip="{{ 'newOrganizationalUnitTooltip' | translate }}" matTooltipShowDelay="1000">
<button class="action-button" (click)="addOU($event)" matTooltip="{{ 'newOrganizationalUnitTooltip' | translate }}"
matTooltipShowDelay="1000">
{{ 'newOrganizationalUnitButton' | translate }}
</button>
<button class="action-button" [matMenuTriggerFor]="menuClients">{{ 'newClientButton' | translate }}</button>
@ -164,19 +164,24 @@
<!-- Clients view -->
<div class="clients-container">
<div class="clients-view-header">
<span [ngStyle]="{ visibility: isLoadingClients ? 'hidden' : 'visible' }" class="clients-title-name">
{{ 'clients' | translate }}
<strong>{{ selectedNode?.name }}</strong>
</span>
<div>
<span [ngStyle]="{ visibility: isLoadingClients ? 'hidden' : 'visible' }" class="clients-title-name">
{{ 'clients' | translate }}
<strong>{{ selectedNode?.name }}</strong>
</span>
</div>
<div class="view-type-container">
<app-execute-command [clientData]="arrayClients" [buttonType]="'text'"
[buttonText]="'Ejecutar comandos'"></app-execute-command>
<button mat-button color="primary" (click)="toggleView('card')" [disabled]="currentView === 'card'">
<mat-icon>grid_view</mat-icon> {{ 'Vista Tarjeta' | translate }}
</button>
<button mat-button color="primary" (click)="toggleView('list')" [disabled]="currentView === 'list'">
<mat-icon>list</mat-icon> {{ 'Vista Lista' | translate }}
</button>
<mat-button-toggle-group name="viewType" aria-label="View Type" [hideSingleSelectionIndicator]="true"
(change)="toggleView($event.value)">
<mat-button-toggle value="list" [disabled]="currentView === 'list'">
<mat-icon>list</mat-icon> {{ 'Vista Lista' | translate }}
</mat-button-toggle>
<mat-button-toggle value="card" [disabled]="currentView === 'card'">
<mat-icon>grid_view</mat-icon> {{ 'Vista Tarjeta' | translate }}
</mat-button-toggle>
</mat-button-toggle-group>
</div>
</div>

6
ogWebconsole/src/app/components/groups/shared/classroom-view/classroom-view.component.css
View File

@ -129,6 +129,6 @@ mat-dialog-content {
margin-bottom: 25px;
}
.saveDisposition-btn{
margin-top: 10px;
}
.submit-button {
margin: 1rem;
}

2
ogWebconsole/src/app/components/groups/shared/classroom-view/classroom-view.component.html
View File

@ -21,5 +21,5 @@
</div>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-raised-button color="primary" class="saveDisposition-btn" (click)="saveDisposition()">{{ 'saveDispositionButton' | translate }}</button>
<button class="submit-button" (click)="saveDisposition()">{{ 'saveDispositionButton' | translate }}</button>
</mat-dialog-actions>

13
ogWebconsole/src/app/components/groups/shared/clients/create-client/create-client.component.css
View File

@ -15,12 +15,6 @@ h1 {
padding: 15px 50px 15px 50px;
}
button {
text-transform: none;
font-size: 16px;
font-weight: 500;
}
mat-option .unit-name {
display: block;
}
@ -47,4 +41,11 @@ mat-option .unit-path {
grid-template-columns: repeat(2, 1fr);
column-gap: 20px;
row-gap: 20px;
}
.action-container {
display: flex;
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}

9
ogWebconsole/src/app/components/groups/shared/clients/create-client/create-client.component.html
View File

@ -9,7 +9,7 @@
<mat-select-trigger>
{{ getSelectedParentName() }}
</mat-select-trigger>
<mat-option *ngFor="let unit of parentUnitsWithPaths" [value]="unit.id" >
<mat-option *ngFor="let unit of parentUnitsWithPaths" [value]="unit.id">
<div class="unit-name">{{ unit.name }}</div>
<div style="font-size: smaller; color: gray;">{{ unit.path }}</div>
</mat-option>
@ -107,8 +107,9 @@
</form>
</div>
<div mat-dialog-actions align="end">
<div mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onNoClick()" i18n="@@cancel-button">Cancelar</button>
<button class="submit-button" [disabled]="!clientForm.valid" (click)="onSubmit()" i18n="@@add-button">Añadir</button>
<button class="submit-button" [disabled]="!clientForm.valid" (click)="onSubmit()"
i18n="@@add-button">Añadir</button>
</div>
</div>
</div>

27
ogWebconsole/src/app/components/groups/shared/clients/create-multiple-client/create-multiple-client.component.css
View File

@ -1,10 +1,12 @@
.create-client-container {
display: flex;
flex-direction: column;
padding: 16px;
padding: 16px 16px 0px 16px;
}
h1, h3, h4 {
h1,
h3,
h4 {
margin: 0 0 16px;
color: #333;
font-weight: 600;
@ -75,7 +77,8 @@ table {
border-collapse: collapse;
}
th, td {
th,
td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
@ -90,14 +93,6 @@ tr:hover {
background-color: #f9f9f9;
}
button {
margin-right: 8px;
}
button:last-child {
margin-right: 0;
}
.mat-dialog-actions {
margin-top: 16px;
display: flex;
@ -148,7 +143,8 @@ input[type="file"] {
gap: 16px;
}
.mat-dialog-content, .create-multiple-client-container {
.mat-dialog-content,
.create-multiple-client-container {
padding: 12px;
}
@ -156,3 +152,10 @@ input[type="file"] {
max-height: 150px;
}
}
.action-container {
display: flex;
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}

18
ogWebconsole/src/app/components/groups/shared/clients/create-multiple-client/create-multiple-client.component.html
View File

@ -20,12 +20,15 @@
<div>
<div class="upload-container">
<button mat-raised-button color="primary" (click)="fileInput.click()">Subir fichero</button>
<button class="action-button" (click)="fileInput.click()">Subir fichero</button>
<input #fileInput type="file" (change)="onFileUpload($event)" accept="*" hidden>
<p>o añadelos manualmente:</p>
<div *ngIf="showTextarea">
<textarea #textarea matInput placeholder="Ejemplo: host bbaa-it1-11 { hardware ethernet a0:48:1c:8a:f1:5b; fixed-address 172.17.69.11; };" rows="20" cols="100"></textarea>
<button mat-raised-button color="primary" (click)="onTextarea(textarea.value)">Previsualizar</button>
<textarea #textarea matInput
placeholder="Ejemplo: host bbaa-it1-11 { hardware ethernet a0:48:1c:8a:f1:5b; fixed-address 172.17.69.11; };"
rows="20" cols="100"></textarea>
<button class="action-button" style="margin-top: 0.5em;"
(click)="onTextarea(textarea.value)">Previsualizar</button>
</div>
</div>
@ -55,8 +58,9 @@
</div>
</div>
<div mat-dialog-actions align="end">
<button mat-button color="warn" (click)="onNoClick()">{{ 'cancelButton' | translate }}</button>
<button mat-button color="primary" [disabled]="!organizationalUnit" (click)="onSubmit()">{{ 'saveButton' | translate }}</button>
<div mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onNoClick()">{{ 'cancelButton' | translate }}</button>
<button class="submit-button" [disabled]="!organizationalUnit" (click)="onSubmit()">{{ 'saveButton' | translate
}}</button>
</div>
</div>
</div>

49
ogWebconsole/src/app/components/groups/shared/clients/edit-client/edit-client.component.css
View File

@ -4,31 +4,25 @@ h1 {
font-weight: 400;
color: #3f51b5;
margin-bottom: 20px;
}
.network-form {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 20px;
}
.form-field {
width: 100%;
margin-top: 10px;
}
.mat-dialog-content {
padding: 50px;
padding: 15px 50px 15px 50px;
}
button {
text-transform: none;
font-size: 16px;
font-weight: 500;
mat-option .unit-name {
display: block;
}
.mat-slide-toggle {
margin-top: 20px;
mat-option .unit-path {
display: block;
font-size: 0.8em;
color: gray;
}
.loading-spinner {
@ -38,27 +32,20 @@ button {
justify-content: center;
}
.mat-dialog-content.loading {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.client-form {
width: 100%;
}
.form-field {
width: 100%;
.create-client-container {
position: relative;
}
.grid-form {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
column-gap: 20px;
row-gap: 20px;
}
.form-field {
width: 100%;
}
.action-container {
display: flex;
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}

6
ogWebconsole/src/app/components/groups/shared/clients/edit-client/edit-client.component.html
View File

@ -104,9 +104,9 @@
</form>
</div>
<div mat-dialog-actions align="end">
<button mat-button (click)="onNoClick()">{{ 'cancelButton' | translate }}</button>
<button mat-button [disabled]="!clientForm.valid" (click)="onSubmit()">
<div mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onNoClick()">{{ 'cancelButton' | translate }}</button>
<button class="submit-button" [disabled]="!clientForm.valid" (click)="onSubmit()">
{{ !isEditMode ? ('addButton' | translate) : ('saveButton' | translate) }}
</button>
</div>

110
ogWebconsole/src/app/components/groups/shared/execute-command-ou/execute-command-ou.component.css
View File

@ -1,57 +1,55 @@
.form-container {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
}
.command-form {
width: 100%;
}
.full-width {
width: 100%;
}
.checkbox-group {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 8px;
}
.checkbox-group label {
font-weight: bold;
margin-bottom: 8px;
}
.mat-checkbox {
margin-left: 8px;
}
.mat-dialog-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
}
.mat-dialog-content {
max-height: 60vh;
overflow-y: auto;
}
.mat-dialog-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 16px;
}
button[mat-button] {
font-weight: 500;
}
button[mat-button]:disabled {
color: rgba(0, 0, 0, 0.38);
}
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
}
.command-form {
width: 100%;
}
.full-width {
width: 100%;
}
.checkbox-group {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 8px;
}
.checkbox-group label {
font-weight: bold;
margin-bottom: 8px;
}
.mat-checkbox {
margin-left: 8px;
}
.mat-dialog-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
}
.mat-dialog-content {
max-height: 60vh;
overflow-y: auto;
}
.mat-dialog-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 16px;
}
.action-container {
display: flex;
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}

15
ogWebconsole/src/app/components/groups/shared/execute-command-ou/execute-command-ou.component.html
View File

@ -20,9 +20,8 @@
<div class="checkbox-group">
<label>{{ 'clientsLabel' | translate }}</label>
<div *ngIf="clients.length > 0">
<mat-checkbox *ngFor="let client of clients"
(change)="toggleClientSelection(client.uuid)"
[checked]="form.get('clientSelection')?.value.includes(client.uuid)">
<mat-checkbox *ngFor="let client of clients" (change)="toggleClientSelection(client.uuid)"
[checked]="form.get('clientSelection')?.value.includes(client.uuid)">
{{ client.name }}
</mat-checkbox>
</div>
@ -34,12 +33,10 @@
</form>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button (click)="closeModal()">{{ 'cancelButton' | translate }}</button>
<button mat-button
(click)="executeCommand()"
[disabled]="!form.get('clientSelection')?.value.length ||
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="closeModal()">{{ 'cancelButton' | translate }}</button>
<button class="submit-button" (click)="executeCommand()" [disabled]="!form.get('clientSelection')?.value.length ||
(!form.get('selectedCommand')?.value && !form.get('selectedCommandGroup')?.value)">
{{ 'executeButton' | translate }}
</button>
</mat-dialog-actions>
</mat-dialog-actions>

20
ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html
View File

@ -34,7 +34,7 @@
</mat-form-field>
<mat-checkbox formControlName="excludeParentChanges">
{{ 'excludeParentChanges' | translate }}
{{ 'excludeParentChanges' | translate }}
</mat-checkbox>
</form>
@ -137,14 +137,14 @@
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Menu</mat-label>
<mat-select formControlName="menu">
<mat-option *ngFor="let menu of menus" [value]="menu['@id']">
{{ menu.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Menu</mat-label>
<mat-select formControlName="menu">
<mat-option *ngFor="let menu of menus" [value]="menu['@id']">
{{ menu.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Perfil de Hardware</mat-label>
<mat-select formControlName="hardwareProfile">
@ -169,4 +169,4 @@
<button class="submit-button" (click)="onSubmit()"
[disabled]="!generalFormGroup.valid || !additionalInfoFormGroup.valid || !networkSettingsFormGroup.valid">{{
isEditMode ? 'Editar' : 'Crear' }}</button>
</div>
</div>

2
ogWebconsole/src/app/components/groups/shared/organizational-units/show-organizational-unit/show-organizational-unit.component.html
View File

@ -46,5 +46,5 @@
</mat-tab-group>
</div>
<div mat-dialog-actions align="end">
<button mat-button (click)="onNoClick()">{{ 'cancelButton' | translate }}</button>
<button class="ordinary-button" style="margin: 1em;" (click)="onNoClick()">{{ 'cancelButton' | translate }}</button>
</div>

31
ogWebconsole/src/app/components/images/create-image/create-image.component.css
View File

@ -1,13 +1,15 @@
.dialog-content {
display: flex;
flex-direction: column;
gap: 16px; /* Espacio entre los elementos del formulario */
gap: 16px;
/* Espacio entre los elementos del formulario */
}
.image-form {
width: 100%;
display: flex;
flex-direction: column;
margin-top: 1rem;
}
.form-field {
@ -16,27 +18,19 @@
}
.partition-info-container {
background-color: #f0f8ff; /* Un color de fondo suave */
background-color: #f0f8ff;
/* Un color de fondo suave */
padding: 10px;
border: 1px solid #ccc;
margin-top: 10px;
border-radius: 5px;
}
/* Botones alineados al final, con margen superior */
.dialog-actions {
display: flex;
justify-content: flex-end;
margin-top: 24px;
}
button {
margin-left: 8px; /* Espacio entre los botones */
}
.warning-card {
background-color: #ffebee; /* Rojo claro */
color: #d32f2f; /* Rojo oscuro */
background-color: #ffebee;
/* Rojo claro */
color: #d32f2f;
/* Rojo oscuro */
padding: 16px;
border-left: 5px solid #d32f2f;
display: flex;
@ -68,3 +62,10 @@ button {
margin-bottom: 8px;
}
}
.action-container {
display: flex;
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}

23
ogWebconsole/src/app/components/images/create-image/create-image.component.html
View File

@ -5,7 +5,8 @@
<mat-card *ngIf="showWarning" class="warning-card">
<mat-card-content>
<mat-icon color="warn">warning</mat-icon>
Ha marcado la casilla <strong>"Imagen Global"</strong>. Se transferirá la imagen al resto de repositorios en el caso de que no exista previamente.
Ha marcado la casilla <strong>"Imagen Global"</strong>. Se transferirá la imagen al resto de repositorios en el
caso de que no exista previamente.
</mat-card-content>
</mat-card>
<mat-form-field appearance="fill" class="form-field">
@ -16,7 +17,8 @@
<mat-form-field appearance="fill" class="form-field">
<mat-label>{{ 'repositoryLabel' | translate }}</mat-label>
<mat-select formControlName="imageRepositories" required multiple>
<mat-option *ngFor="let imageRepository of repositories" [value]="imageRepository['@id']" [disabled]="imageId !== null">
<mat-option *ngFor="let imageRepository of repositories" [value]="imageRepository['@id']"
[disabled]="imageId !== null">
{{ imageRepository.name }}
</mat-option>
</mat-select>
@ -41,16 +43,11 @@
</mat-select>
</mat-form-field>
<mat-checkbox
formControlName="remotePc"
>
<mat-checkbox formControlName="remotePc">
{{ 'remotePcLabel' | translate }}
</mat-checkbox>
<mat-checkbox
formControlName="isGlobal"
(click)="changeIsGlobal()"
>
<mat-checkbox formControlName="isGlobal" (click)="changeIsGlobal()">
{{ 'globalImageLabel' | translate }}
</mat-checkbox>
@ -68,7 +65,7 @@
</mat-dialog-content>
<mat-dialog-actions align="end" class="dialog-actions">
<button mat-button (click)="close()">{{ 'cancelButton' | translate }}</button>
<button mat-button color="primary" (click)="saveImage()">{{ 'saveButton' | translate }}</button>
</mat-dialog-actions>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="close()">{{ 'cancelButton' | translate }}</button>
<button class="submit-button" (click)="saveImage()">{{ 'saveButton' | translate }}</button>
</mat-dialog-actions>

4
ogWebconsole/src/app/components/images/export-image/export-image.component.html
View File

@ -12,6 +12,6 @@
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button (click)="close()">Cancelar</button>
<button mat-button (click)="save()">Continuar</button>
<button class="ordinary-button" (click)="close()">Cancelar</button>
<button class="action-button" (click)="save()">Continuar</button>
</mat-dialog-actions>

4
ogWebconsole/src/app/components/images/images.component.html
View File

@ -10,7 +10,7 @@
</h2>
</div>
<div class="images-button-row">
<button mat-flat-button color="primary" (click)="addImage()">
<button class="action-button" (click)="addImage()">
{{ 'addImageButton' | translate }}
</button>
</div>
@ -38,7 +38,7 @@
</mat-icon>
</ng-container>
<ng-container *ngIf="column.columnDef === 'imageRepositories'">
<button mat-button [matMenuTriggerFor]="menu">Ver repositorios</button>
<button class="action-button" [matMenuTriggerFor]="menu">Ver repositorios</button>
<mat-menu #menu="matMenu">
<button mat-menu-item *ngFor="let repository of image.imageRepositories">
{{ repository.imageRepository.name }}

2
ogWebconsole/src/app/components/login/login.component.html
View File

@ -16,7 +16,7 @@
</button>
</mat-form-field>
<div class="button-row">
<button mat-flat-button color="primary" type="submit" [disabled]="!loginObj.username || !loginObj.password">
<button class="action-button" type="submit" [disabled]="!loginObj.username || !loginObj.password">
{{ 'buttonLogin' | translate }}
</button>
</div>

20
ogWebconsole/src/app/components/menus/create-menu/create-menu.component.css
View File

@ -1,20 +1,19 @@
.dialog-content {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
margin-top: 2rem;
}
.form-container {
display: flex;
flex-direction: row; /* Alinear elementos horizontalmente */
flex-direction: row;
justify-content: space-between;
gap: 24px;
align-items: flex-start; /* Para alinear superiormente */
align-items: flex-start;
}
.menu-form {
flex: 1; /* El formulario ocupa el espacio restante */
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
@ -25,11 +24,11 @@
}
.iframe-container {
flex: 1; /* El iframe ocupa la otra mitad del espacio */
flex: 1;
display: flex;
justify-content: center;
align-items: flex-start;
max-width: 50%; /* Limitar ancho máximo */
max-width: 50%;
}
.iframe {
@ -39,3 +38,10 @@
border-radius: 8px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.action-container {
display: flex;
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}

13
ogWebconsole/src/app/components/menus/create-menu/create-menu.component.html
View File

@ -25,10 +25,7 @@
<input matInput formControlName="comments" name="comments">
</mat-form-field>
<mat-checkbox
formControlName="isDefault"
name="isDefault"
>
<mat-checkbox formControlName="isDefault" name="isDefault">
{{ 'defaultMenuLabel' | translate }}
</mat-checkbox>
</form>
@ -40,7 +37,7 @@
</div>
</mat-dialog-content>
<mat-dialog-actions align="end" class="dialog-actions">
<button mat-button (click)="close()">Cancelar</button>
<button mat-button color="primary" (click)="save()">Guardar</button>
</mat-dialog-actions>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="close()">Cancelar</button>
<button class="submit-button" (click)="save()">Guardar</button>
</mat-dialog-actions>

2
ogWebconsole/src/app/components/menus/menus.component.html
View File

@ -7,7 +7,7 @@
Administrar menús</h2>
</div>
<div class="images-button-row">
<button mat-flat-button color="primary" (click)="addMenu()" joyrideStep="addStep"
<button class="action-button" (click)="addMenu()" joyrideStep="addStep"
text="Utiliza este botón para añadir un nuevo menu.">Añadir menú</button>
</div>
</div>

4
ogWebconsole/src/app/components/ogboot/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.html
View File

@ -11,8 +11,8 @@
</mat-form-field>
</div>
<div class="mat-dialog-actions">
<button mat-button (click)="onCancel()">{{ 'cancelButton' | translate }}</button>
<button mat-button color="primary" (click)="onSave()">
<button class="ordinary-button" (click)="onCancel()">{{ 'cancelButton' | translate }}</button>
<button class="submit-button" (click)="onSave()">
{{ isEditMode ? ('saveButton' | translate) : ('addButton' | translate) }}
</button>
</div>

2
ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.html
View File

@ -31,7 +31,7 @@
</mat-select>
</mat-form-field>
<button mat-flat-button color="primary" [disabled]="units.length === 0" (click)="saveOgLiveTemplates()"
<button class="action-button" [disabled]="units.length === 0" (click)="saveOgLiveTemplates()"
joyrideStep="saveButtonStep" text="{{ 'saveButtonDescription' | translate }}">
{{ 'saveButtonLabel' | translate }}
</button>

7
ogWebconsole/src/app/components/ogboot/pxe-images/create-image/create-image/create-image.component.css
View File

@ -7,3 +7,10 @@
display: block;
justify-content: center;
}
.action-container {
display: flex;
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}

6
ogWebconsole/src/app/components/ogboot/pxe-images/create-image/create-image/create-image.component.html
View File

@ -11,7 +11,7 @@
</mat-select>
</mat-form-field>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button (click)="onNoClick()">Cancelar</button>
<button mat-button (click)="submitForm()" cdkFocusInitial>{{ isEditMode ? 'Guardar' : 'Añadir' }}</button>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onNoClick()">Cancelar</button>
<button class="submit-button" (click)="submitForm()" cdkFocusInitial>{{ isEditMode ? 'Guardar' : 'Añadir' }}</button>
</mat-dialog-actions>

2
ogWebconsole/src/app/components/ogboot/pxe-images/info-image/info-image/info-image.component.html
View File

@ -3,5 +3,5 @@
<pre>{{ data | json }}</pre>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button (click)="onNoClick()">Cancel</button>
<button class="ordinary-button" (click)="onNoClick()">Cancel</button>
</mat-dialog-actions>

4
ogWebconsole/src/app/components/ogboot/pxe-images/pxe-images.component.html
View File

@ -8,8 +8,8 @@
</h2>
</div>
<div class="images-button-row">
<button mat-flat-button color="accent" (click)="openSubnetInfoDialog()">{{ 'viewInfoButton' | translate }}</button>
<button mat-flat-button color="primary" (click)="addImage()" joyrideStep="addImageStep"
<button class="action-button" (click)="openSubnetInfoDialog()">{{ 'viewInfoButton' | translate }}</button>
<button class="action-button" (click)="addImage()" joyrideStep="addImageStep"
[text]="'addImageButtonDescription' | translate">
{{ 'addImageButton' | translate }}
</button>

5
ogWebconsole/src/app/components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component.css
View File

@ -1,6 +1,5 @@
mat-form-field {
width: 100%;
margin-bottom: 20px;
}
pre {
@ -77,7 +76,9 @@ h3 {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
align-items: center;
margin-bottom: 1rem;
padding-right: 1rem;
}
.action-buttons {

11
ogWebconsole/src/app/components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component.html
View File

@ -13,7 +13,8 @@
<mat-form-field appearance="fill">
<mat-label>{{ 'templateContentLabel' | translate }}</mat-label>
<textarea matInput formControlName="templateContent" rows="20" [placeholder]="'templateContentPlaceholder' | translate"></textarea>
<textarea matInput formControlName="templateContent" rows="20"
[placeholder]="'templateContentPlaceholder' | translate"></textarea>
<mat-error *ngIf="templateForm.get('templateContent')?.hasError('required')">
{{ 'templateContentError' | translate }}
</mat-error>
@ -24,7 +25,7 @@
<mat-dialog-actions>
<div class="actions-container">
<button mat-flat-button color="accent" [matMenuTriggerFor]="templateMenu">
<button class="action-button" [matMenuTriggerFor]="templateMenu">
{{ 'loadTemplateModelButton' | translate }}
</button>
<mat-menu #templateMenu="matMenu">
@ -33,10 +34,10 @@
</mat-menu>
<div class="action-buttons">
<button mat-button type="button" (click)="onCancel()">{{ 'cancelButton' | translate }}</button>
<button mat-raised-button color="primary" type="submit" (click)="onSave()" [disabled]="!templateForm.valid">
<button class="ordinary-button" (click)="onCancel()">{{ 'cancelButton' | translate }}</button>
<button class="submit-button" (click)="onSave()" [disabled]="!templateForm.valid">
{{ isEditMode ? ('updateButton' | translate) : ('createButton' | translate) }}
</button>
</div>
</div>
</mat-dialog-actions>
</mat-dialog-actions>

4
ogWebconsole/src/app/components/ogboot/pxe/pxe.component.html
View File

@ -7,8 +7,8 @@
translate }}</h2>
</div>
<div class="template-button-row">
<button mat-flat-button color="accent" (click)="openInfoDialog()">{{ 'viewInfoButton' | translate }}</button>
<button mat-flat-button color="primary" (click)="addPxeTemplate()" joyrideStep="addTemplateStep"
<button class="action-button" (click)="openInfoDialog()">{{ 'viewInfoButton' | translate }}</button>
<button class="action-button" (click)="addPxeTemplate()" joyrideStep="addTemplateStep"
text="{{ 'addTemplateButtonDescription' | translate }}">{{ 'addTemplateButton' | translate }}</button>
</div>
</div>

7
ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/add-clients-to-subnet/add-clients-to-subnet.component.css
View File

@ -20,3 +20,10 @@ mat-dialog-actions {
flex-direction: column;
gap: 10px;
}
.action-container {
display: flex;
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}

6
ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/add-clients-to-subnet/add-clients-to-subnet.component.html
View File

@ -23,7 +23,7 @@
</div>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button (click)="close()">Cancelar</button>
<button mat-button (click)="save()">Añadir</button>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="close()">Cancelar</button>
<button class="submit-button" (click)="save()">Añadir</button>
</mat-dialog-actions>

9
ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet.component.css
View File

@ -2,7 +2,7 @@
width: 100%;
}
form{
form {
padding: 20px;
}
@ -33,3 +33,10 @@ form{
margin-left: 8px;
cursor: pointer;
}
.action-container {
display: flex;
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}

8
ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet.component.html
View File

@ -62,7 +62,7 @@
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button (click)="onNoClick()">Cancelar</button>
<button mat-button (click)="save()" cdkFocusInitial>Guardar</button>
</mat-dialog-actions>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onNoClick()">Cancelar</button>
<button class="submit-button" (click)="save()" cdkFocusInitial>Guardar</button>
</mat-dialog-actions>

6
ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.html
View File

@ -7,9 +7,9 @@
text="Desde aquí puedes gestionar las subredes configuradas en el servidor OgDHCP.">Administrar Subredes</h2>
</div>
<div class="subnets-button-row">
<button mat-flat-button color="accent" (click)="openSubnetInfoDialog()" joyrideStep="viewInfoStep"
<button class="action-button" (click)="openSubnetInfoDialog()" joyrideStep="viewInfoStep"
text="Haz clic para ver información detallada de las subredes en el servidor.">Ver Información</button>
<button mat-flat-button color="primary" (click)="addSubnet()" joyrideStep="addSubnetStep"
<button class="action-button" (click)="addSubnet()" joyrideStep="addSubnetStep"
text="Haz clic para añadir una nueva subred.">Añadir Subred</button>
</div>
</div>
@ -58,7 +58,7 @@
</ng-container>
<ng-container *ngIf="column.columnDef === 'clients'">
<button mat-button [matMenuTriggerFor]="menu">Ver clientes</button>
<button class="action-button" [matMenuTriggerFor]="menu">Ver clientes</button>
<mat-menu #menu="matMenu">
<button mat-menu-item *ngFor="let client of subnet.clients">
{{ client.name }}

2
ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/server-info-dialog/server-info-dialog.component.html
View File

@ -3,5 +3,5 @@
<pre>{{ data | json }}</pre>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button mat-dialog-close>Cerrar</button>
<button class="ordinary-button" mat-dialog-close>Cerrar</button>
</mat-dialog-actions>

59
ogWebconsole/src/app/components/operative-system/create-operative-system/create-operative-system.component.css
View File

@ -1,60 +1,15 @@
.full-width {
width: 100%;
}
.form-container {
padding: 40px;
}
.form-group {
margin-top: 20px;
margin-bottom: 26px;
padding: 20px;
}
.full-width {
width: 100%;
margin-bottom: 16px;
margin-top: 16px;
}
.additional-form {
margin-top: 20px;
}
.checkbox-group {
.action-container {
display: flex;
flex-direction: column;
margin: 15px 0;
align-items: flex-start;
}
.time-fields {
display: flex;
gap: 15px; /* Espacio entre los campos */
}
.time-field {
flex: 1;
}
.list-item-content {
display: flex;
align-items: flex-start; /* Alinea el contenido al inicio */
justify-content: space-between; /* Espacio entre los textos y los íconos */
width: 100%; /* Asegúrate de que el contenido ocupe todo el ancho */
}
.text-content {
flex-grow: 1; /* Permite que este contenedor ocupe el espacio disponible */
margin-right: 16px; /* Espaciado a la derecha para separar de los íconos */
margin-left: 10px;
}
.icon-container {
display: flex;
align-items: center; /* Alinea los íconos verticalmente */
}
.right-icon {
margin-left: 8px; /* Espaciado entre los íconos */
cursor: pointer;
}
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}

9
ogWebconsole/src/app/components/operative-system/create-operative-system/create-operative-system.component.html
View File

@ -8,8 +8,7 @@
</form>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button (click)="onCancel($event)">Cancelar</button>
<button mat-button (click)="onSubmit()" cdkFocusInitial> Guardar </button>
</mat-dialog-actions>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onCancel($event)">Cancelar</button>
<button class="submit-button" (click)="onSubmit()" cdkFocusInitial> Guardar </button>
</mat-dialog-actions>

2
ogWebconsole/src/app/components/operative-system/operative-system.component.html
View File

@ -9,7 +9,7 @@
</h2>
</div>
<div class="calendar-button-row">
<button mat-flat-button color="primary" (click)="addSoftware()" joyrideStep="addOsButton"
<button class="action-button" (click)="addSoftware()" joyrideStep="addOsButton"
text="Añade un nuevo sistema operativo a la lista.">Añadir sistema operativo</button>
</div>
</div>

14
ogWebconsole/src/app/components/repositories/create-repository/create-repository.component.css
View File

@ -1,7 +1,6 @@
.dialog-content {
display: flex;
flex-direction: column;
gap: 16px;
}
.repository-form {
@ -12,17 +11,14 @@
.form-field {
width: 100%;
margin-bottom: 16px;
margin-top: 16px;
}
.dialog-actions {
.action-container {
display: flex;
justify-content: flex-end;
margin-top: 24px;
}
button {
margin-left: 8px;
gap: 1em;
padding: 1.5em;
}
@media (max-width: 600px) {
@ -40,4 +36,4 @@ button {
margin-left: 0;
margin-bottom: 8px;
}
}
}

8
ogWebconsole/src/app/components/repositories/create-repository/create-repository.component.html
View File

@ -19,7 +19,7 @@
</form>
</mat-dialog-content>
<mat-dialog-actions align="end" class="dialog-actions">
<button mat-button (click)="close()">Cancelar</button>
<button mat-button color="primary" (click)="save()">Guardar</button>
</mat-dialog-actions>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="close()">Cancelar</button>
<button class="submit-button" (click)="save()">Guardar</button>
</mat-dialog-actions>

4
ogWebconsole/src/app/components/repositories/import-image/import-image.component.html
View File

@ -23,6 +23,6 @@
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button (click)="close()">Cancelar</button>
<button mat-button (click)="save()">Continuar</button>
<button class="ordinary-button" (click)="close()">Cancelar</button>
<button class="submit-button" (click)="save()">Continuar</button>
</mat-dialog-actions>

6
ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.html
View File

@ -83,8 +83,8 @@
<h2>Editar datos repositorio</h2>
</div>
<div class="header-button-container">
<button mat-flat-button color="primary" (click)="syncRepository()">Sincronizar base de datos</button>
<button mat-flat-button color="accent" (click)="openImageInfoDialog()">Ver Información</button>
<button class="action-button" (click)="syncRepository()">Sincronizar base de datos</button>
<button class="action-button" (click)="openImageInfoDialog()">Ver Información</button>
</div>
</div>
@ -108,7 +108,7 @@
<input matInput formControlName="comments" name="comments">
</mat-form-field>
<button mat-flat-button color="primary" class="save-button" (click)="save()">Guardar</button>
<button class="submit-button" class="save-button" (click)="save()">Guardar</button>
</form>
</div>
</div>

2
ogWebconsole/src/app/components/repositories/repositories.component.html
View File

@ -10,7 +10,7 @@
</h2>
</div>
<div class="images-button-row">
<button mat-flat-button color="primary" (click)="addImage()" joyrideStep="addStep"
<button class="action-button" (click)="addImage()" joyrideStep="addStep"
text="Utiliza este botón para añadir un nuevo repositorio.">Añadir repositorio</button>
</div>
</div>

10
ogWebconsole/src/app/components/software-profile/create-software-profile/create-software-profile.component.css
View File

@ -1,18 +1,18 @@
.full-width {
width: 100%;
}
.form-container {
padding: 40px;
}
.form-group {
margin-top: 20px;
margin-bottom: 26px;
}
.full-width {
width: 100%;
margin-bottom: 16px;
margin-top: 16px;
}
.additional-form {
@ -58,3 +58,9 @@
cursor: pointer;
}
.action-container {
display: flex;
justify-content: flex-end;
gap: 1em;
padding: 0em 1.5em 1.5em 1.5em;
}

22
ogWebconsole/src/app/components/software-profile/create-software-profile/create-software-profile.component.html
View File

@ -4,7 +4,7 @@
<mat-tab-group>
<mat-tab label="Formulario">
<form [formGroup]="formGroup" (ngSubmit)="onSubmit()" class="form-group">
<mat-form-field appearance="fill" class="full-width" >
<mat-form-field appearance="fill" class="full-width">
<mat-label>Descripción</mat-label>
<input matInput formControlName="description" placeholder="Descripción del comando" required>
</mat-form-field>
@ -22,7 +22,7 @@
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Seleccionar sistema operativo</mat-label>
<mat-select formControlName="operativeSystem" >
<mat-select formControlName="operativeSystem">
<mat-option *ngFor="let op of operativeSystems" [value]="op['@id']">
{{ op.name }}
</mat-option>
@ -34,16 +34,10 @@
<mat-tab label="Seleccionar Software">
<div class="form-group">
<mat-form-field appearance="fill" class="full-width">
<input
type="text"
matInput
[formControl]="softwareControl"
[matAutocomplete]="clientAuto"
<input type="text" matInput [formControl]="softwareControl" [matAutocomplete]="clientAuto"
placeholder="Seleccione software para añadir">
<mat-autocomplete
#clientAuto="matAutocomplete"
[displayWith]="displayFnClient"
<mat-autocomplete #clientAuto="matAutocomplete" [displayWith]="displayFnClient"
(optionSelected)="onOptionClientSelected($event.option.value)">
<mat-option *ngFor="let software of filteredSoftware | async" [value]="software">
@ -67,7 +61,7 @@
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button (click)="onCancel($event)">Cancelar</button>
<button mat-button (click)="onSubmit()" cdkFocusInitial>Guardar</button>
</mat-dialog-actions>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onCancel($event)">Cancelar</button>
<button class="submit-button" (click)="onSubmit()" cdkFocusInitial>Guardar</button>
</mat-dialog-actions>

2
ogWebconsole/src/app/components/software-profile/software-profile.component.html
View File

@ -7,7 +7,7 @@
text="En esta pantalla podrás administrar los diferentes perfiles de software">Administrar perfiles software</h2>
</div>
<div class="calendar-button-row">
<button mat-flat-button color="primary" (click)="addSoftware()" joyrideStep="addStep"
<button class="action-button" (click)="addSoftware()" joyrideStep="addStep"
text="Crea nuevos perfiles de software.">Añadir perfil software</button>
</div>
</div>

48
ogWebconsole/src/app/components/software/create-software/create-software.component.css
View File

@ -1,6 +1,7 @@
.full-width {
width: 100%;
}
.form-container {
padding: 40px;
}
@ -12,49 +13,12 @@
.full-width {
width: 100%;
margin-bottom: 16px;
margin-top: 16px;
}
.additional-form {
margin-top: 20px;
}
.checkbox-group {
.action-container {
display: flex;
flex-direction: column;
margin: 15px 0;
align-items: flex-start;
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}
.time-fields {
display: flex;
gap: 15px; /* Espacio entre los campos */
}
.time-field {
flex: 1;
}
.list-item-content {
display: flex;
align-items: flex-start; /* Alinea el contenido al inicio */
justify-content: space-between; /* Espacio entre los textos y los íconos */
width: 100%; /* Asegúrate de que el contenido ocupe todo el ancho */
}
.text-content {
flex-grow: 1; /* Permite que este contenedor ocupe el espacio disponible */
margin-right: 16px; /* Espaciado a la derecha para separar de los íconos */
margin-left: 10px;
}
.icon-container {
display: flex;
align-items: center; /* Alinea los íconos verticalmente */
}
.right-icon {
margin-left: 8px; /* Espaciado entre los íconos */
cursor: pointer;
}

9
ogWebconsole/src/app/components/software/create-software/create-software.component.html
View File

@ -22,8 +22,7 @@
</form>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button (click)="onCancel($event)">Cancelar</button>
<button mat-button (click)="onSubmit()" cdkFocusInitial> Guardar </button>
</mat-dialog-actions>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onCancel($event)">Cancelar</button>
<button class="submit-button" (click)="onSubmit()" cdkFocusInitial>Guardar</button>
</mat-dialog-actions>

2
ogWebconsole/src/app/components/software/software.component.html
View File

@ -7,7 +7,7 @@
text="Administra el software deisponible desde este componente.">Administrar Software</h2>
</div>
<div class="calendar-button-row">
<button mat-flat-button color="primary" (click)="addSoftware()" joyrideStep="addSoftwareStep"
<button class="action-button" (click)="addSoftware()" joyrideStep="addSoftwareStep"
text="Utiliza este botón par añadir software nuevo.">Añadir software</button>
</div>
</div>

67
ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.css
View File

@ -1,29 +1,40 @@
mat-dialog-content {
font-size: 16px;
margin-bottom: 20px;
color: #555; /* Color de texto más suave */
}
mat-dialog-actions {
margin-top: 20px;
display: flex;
justify-content: flex-end; /* Alineación a la derecha */
}
button[mat-button] {
margin-left: 8px; /* Espacio entre los botones */
}
button[mat-button]:first-child {
color: #757575; /* Color para el botón de cancelar */
}
button[mat-raised-button] {
box-shadow: none;
}
strong {
font-weight: bold;
color: #000; /* Color de texto más fuerte para el nombre del elemento */
}
font-size: 16px;
margin-bottom: 20px;
color: #555;
/* Color de texto más suave */
}
.action-container {
display: flex;
justify-content: flex-end;
gap: 1em;
padding: 0.5em 1.5em 1.5em 1.5em;
}
strong {
font-weight: bold;
color: #000;
/* Color de texto más fuerte para el nombre del elemento */
}
.delete-button {
background-color: #f00e0e;
color: white;
padding: 8px 18px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: transform 0.3s ease;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.delete-button:hover:not(:disabled) {
background-color: #f00e0edc;
}
.delete-button:disabled {
background-color: #ced0df;
cursor: not-allowed;
}

6
ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.html
View File

@ -4,7 +4,7 @@
¿Estás seguro que deseas eliminar <strong>{{ data.name }}</strong>?
</p>
</div>
<div mat-dialog-actions align="end">
<button mat-button (click)="onNoClick()" i18n="@@cancelButton">Cancelar</button>
<button mat-raised-button color="warn" (click)="onYesClick()" i18n="@@confirmButton">Eliminar</button>
<div mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onNoClick()" i18n="@@cancelButton">Cancelar</button>
<button class="delete-button" (click)="onYesClick()" i18n="@@confirmButton">Eliminar</button>
</div>