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 16:26:12 +01:00
parent b4a389e5bd
commit 37aff33b11
44 changed files with 283 additions and 281 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ogWebconsole/src/app/components/admin/admin.component.css
View File

@ -14,16 +14,6 @@
margin: 0 10px;
}
/* Estilos de los botones */
button {
height: 150px;
width: 150px;
margin: 5px;
padding: 5px;
cursor: pointer;
transition: all 0.3s;
}
/* Estilos del texto debajo de los botones */
span{
margin: 0;

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

@ -1,9 +1,9 @@
<div class="container">
<button mat-fab color="primary" class="fab-button" routerLink="/users">
<button class="action-button" routerLink="/users">
<mat-icon>group</mat-icon>
<span>{{ 'labelUsers' | translate }}</span>
</button>
<button mat-fab color="primary" class="fab-button" routerLink="/user-groups">
<button class="action-button" routerLink="/user-groups">
<mat-icon>admin_panel_settings</mat-icon>
<span>{{ 'labelRoles' | translate }}</span>
</button>

9
ogWebconsole/src/app/components/admin/admin.component.spec.ts
View File

@ -45,13 +45,4 @@ describe('AdminComponent', () => {
expect(button).toBeTruthy();
expect(button.querySelector('mat-icon').textContent.trim()).toBe('group');
});
it('debería aplicar la clase "fab-button" a ambos botones', () => {
const buttons = fixture.nativeElement.querySelectorAll('button');
buttons.forEach((button: HTMLElement) => {
expect(button.classList).toContain('fab-button');
});
});
});

4
ogWebconsole/src/app/components/admin/env-vars/env-vars.component.css
View File

@ -15,10 +15,6 @@
gap: 16px;
justify-content: flex-end;
margin-top: 16px;
button {
min-width: 120px;
}
}
}

4
ogWebconsole/src/app/components/admin/env-vars/env-vars.component.html
View File

@ -27,7 +27,7 @@
</mat-table>
<div class="actions">
<button mat-raised-button color="primary" (click)="saveEnvVars()">Guardar Cambios</button>
<button mat-raised-button color="accent" (click)="loadEnvVars()">Recargar</button>
<button class="action-button" (click)="loadEnvVars()">Recargar</button>
<button class="submit-button" (click)="saveEnvVars()">Guardar Cambios</button>
</div>
</div>

14
ogWebconsole/src/app/components/admin/roles/roles/add-role-modal/add-role-modal.component.css
View File

@ -1,7 +1,9 @@
.full-width {
width: 100%;
}
.form-container {
margin-top: 2em;
padding: 40px;
}
@ -15,16 +17,24 @@
margin-bottom: 16px;
}
.checkbox-group {
.checkbox-group {
margin: 15px 0;
align-items: flex-start;
}
.time-fields {
display: flex;
gap: 15px; /* Espacio entre los campos */
gap: 15px;
/* Espacio entre los campos */
}
.time-field {
flex: 1;
}
.action-container {
display: flex;
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}

6
ogWebconsole/src/app/components/admin/roles/roles/add-role-modal/add-role-modal.component.html
View File

@ -16,7 +16,7 @@
</section>
</form>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
<button mat-button (click)="onSubmit()">{{ 'buttonAdd' | translate }}</button>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
<button class="submit-button" (click)="onSubmit()">{{ 'buttonAdd' | translate }}</button>
</mat-dialog-actions>

2
ogWebconsole/src/app/components/admin/roles/roles/roles.component.html
View File

@ -3,7 +3,7 @@
<h2>{{ 'adminRolesTitle' | translate }}</h2>
</div>
<div class="images-button-row">
<button mat-flat-button color="primary" (click)="addUser()">
<button class="action-button" (click)="addUser()">
{{ 'addRole' | translate }}
</button>
</div>

36
ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.css
View File

@ -1,30 +1,12 @@
.full-width {
width: 100%;
}
.form-container {
padding: 40px;
}
.form-group {
margin-top: 20px;
margin-bottom: 26px;
}
.full-width {
width: 100%;
margin-bottom: 16px;
}
.checkbox-group {
margin: 15px 0;
align-items: flex-start;
}
.time-fields {
.user-form {
display: flex;
gap: 15px; /* Espacio entre los campos */
flex-direction: column;
margin-top: 2rem;
}
.time-field {
flex: 1;
}
.action-container {
display: flex;
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}

6
ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.html
View File

@ -29,7 +29,7 @@
</mat-form-field>
</form>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
<button mat-button (click)="onSubmit()">{{ 'buttonAdd' | translate }}</button>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
<button class="submit-button" (click)="onSubmit()">{{ 'buttonAdd' | translate }}</button>
</mat-dialog-actions>

11
ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.css
View File

@ -1,6 +1,6 @@
.user-form .form-field {
display: block;
margin-bottom: 10px;
display: block;
margin-bottom: 10px;
}
.checkbox-group label {
@ -17,3 +17,10 @@ mat-spinner {
margin: 0 auto;
align-self: center;
}
.action-container {
display: flex;
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}

8
ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.html
View File

@ -23,7 +23,7 @@
</div>
</form>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
<button mat-button (click)="onSubmit()" [disabled]="loading">{{ 'buttonEdit' | translate }}</button>
</mat-dialog-actions>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
<button class="submit-button" (click)="onSubmit()" [disabled]="loading">{{ 'buttonEdit' | translate }}</button>
</mat-dialog-actions>

2
ogWebconsole/src/app/components/admin/users/users/users.component.html
View File

@ -3,7 +3,7 @@
<h2>{{ 'adminUsersTitle' | translate }}</h2>
</div>
<div class="images-button-row">
<button mat-flat-button color="primary" (click)="addUser()">
<button class="action-button" (click)="addUser()">
{{ 'addUser' | translate }}
</button>
</div>

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

@ -6,8 +6,8 @@
<h2 joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'adminCalendarsTitle' | translate }}</h2>
</div>
<div class="calendar-button-row">
<button joyrideStep="addButtonStep" text="{{ 'addButtonStepText' | translate }}" mat-flat-button color="primary"
(click)="addImage()">
<button joyrideStep="addButtonStep" text="{{ 'addButtonStepText' | translate }}" class="action-button"
(click)="addCalendar()">
{{ 'addCalendar' | translate }}
</button>
</div>

2
ogWebconsole/src/app/components/calendar/calendar.component.ts
View File

@ -66,7 +66,7 @@ export class CalendarComponent implements OnInit {
this.search();
}
addImage(): void {
addCalendar(): void {
const dialogRef = this.dialog.open(CreateCalendarComponent, {
width: '400px'
});

7
ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.css
View File

@ -28,3 +28,10 @@
.time-field {
flex: 1;
}
.action-container {
display: flex;
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}

6
ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.html
View File

@ -56,10 +56,10 @@
</div>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
<button
mat-button
class="submit-button"
(click)="submitRule()"
cdkFocusInitial
[disabled]="(!isRemoteAvailable && (!busyFromHour || !busyToHour)) || (isRemoteAvailable && (!availableReason || !availableFromDate || !availableToDate))">

11
ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.css
View File

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

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

@ -9,7 +9,7 @@
<div style="display: flex; justify-content: space-between; align-items: center;">
<div *ngIf="isEditMode" mat-subheader>{{ 'rulesHeader' | translate }}</div>
<button mat-flat-button color="primary" *ngIf="isEditMode" (click)="createRule()" style="padding: 10px;">
<button class="action-button" *ngIf="isEditMode" (click)="createRule()" style="padding: 10px;">
{{ 'addRule' | translate }}
</button>
</div>
@ -41,9 +41,9 @@
</mat-list>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
<button mat-button (click)="submitForm()" [disabled]="!name || name === ''" cdkFocusInitial>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
<button class="submit-button" (click)="submitForm()" [disabled]="!name || name === ''" cdkFocusInitial>
{{ 'buttonSave' | translate }}
</button>
</mat-dialog-actions>

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

@ -6,7 +6,7 @@
<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 }}">
<button class="action-button" (click)="openCreateCommandGroupModal()" joyrideStep="addCommandGroupStep" text="{{ 'addCommandGroupStepText' | translate }}">
{{ 'addCommandGroup' | translate }}
</button>
</div>
@ -35,7 +35,7 @@
</ng-container>
<ng-container *ngIf="column.columnDef === 'commands'" joyrideStep="viewCommandsStep" text="{{ 'viewCommandsStepText' | translate }}">
<button mat-button [matMenuTriggerFor]="menu">{{ 'viewCommands' | translate }}</button>
<button class="action-button" [matMenuTriggerFor]="menu">{{ 'viewCommands' | translate }}</button>
<mat-menu #menu="matMenu">
<button mat-menu-item *ngFor="let command of commandGroup.commands">
{{ command.name }}

7
ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.css
View File

@ -98,3 +98,10 @@
margin-bottom: 20px;
}
}
.action-container {
display: flex;
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}

6
ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.html
View File

@ -53,7 +53,7 @@
</form>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button (click)="close()">{{ 'buttonCancel' | translate }}</button>
<button mat-button (click)="onSubmit()" cdkFocusInitial>{{ 'buttonSave' | translate }}</button>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="close()">{{ 'buttonCancel' | translate }}</button>
<button class="submit-button" (click)="onSubmit()" cdkFocusInitial>{{ 'buttonSave' | translate }}</button>
</mat-dialog-actions>

29
ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.css
View File

@ -58,19 +58,6 @@
padding: 10px 20px;
}
button {
background-color: #3f51b5; /* Color primario */
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #2c387e; /* Color primario oscuro */
}
@media (max-width: 600px) {
.mat-card {
margin: 10px 0;
@ -86,15 +73,6 @@
}
}
.cancel-button {
background-color: #dc3545;
color: white;
border-radius: 5px;
}
.cancel-button:hover {
opacity: 0.9;
}
.create-command-group-container {
padding: 20px;
}
@ -146,8 +124,9 @@
color: #666;
}
.command-group-actions {
margin-top: 20px;
.action-container {
display: flex;
justify-content: space-between;
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}

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

@ -49,10 +49,10 @@
</form>
</div>
<div class="command-group-actions" *ngIf="!loading">
<button mat-flat-button color="primary" (click)="toggleClientSelect()">
<div class="action-container" *ngIf="!loading">
<button class="ordinary-button" (click)="close()">{{ 'buttonCancel' | translate }}</button>
<button [ngClass]="showClientSelect ? 'submit-button' : 'action-button'" (click)="toggleClientSelect()">
{{ showClientSelect ? ('execute' | translate) : ('scheduleExecution' | translate) }}
</button>
<button mat-flat-button color="warn" (click)="close()">{{ 'buttonCancel' | translate }}</button>
</div>
</div>
</div>

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

@ -6,7 +6,7 @@
<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 }}">
<button class="action-button" (click)="openCreateTaskModal()" joyrideStep="addTaskStep" text="{{ 'addTaskStepText' | translate }}">
{{ 'addTask' | translate }}
</button>
</div>

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

@ -14,6 +14,7 @@
display: flex;
justify-content: flex-end;
margin-top: 20px;
padding: 1.5rem;
}
mat-form-field {

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

@ -87,10 +87,6 @@
</mat-select>
</mat-form-field>
<div class="button-container">
<button mat-raised-button color="primary" (click)="saveTask()">{{ 'buttonSave' | translate }}</button>
</div>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Selecciona Clientes</mat-label>
<mat-select formControlName="selectedClients" multiple>
@ -102,10 +98,9 @@
</mat-option>
</mat-select>
</mat-form-field>
<div class="button-container">
<button mat-raised-button color="primary" (click)="saveTask()">Guardar</button>
</div>
</mat-dialog-content>
</form>
<div class="button-container">
<button class="submit-button" (click)="saveTask()">{{ 'buttonSave' | translate }}</button>
</div>

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

@ -57,26 +57,4 @@
justify-content: flex-end;
padding: 10px 20px;
}
button {
background-color: #3f51b5;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #2c387e;
}
.cancel-button {
background-color: #dc3545;
color: white;
}
.cancel-button:hover {
opacity: 0.9;
}

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

@ -50,6 +50,6 @@
</mat-card>
<div class="task-actions">
<button mat-flat-button class="cancel-button" (click)="closeDialog()">{{ 'buttonClose' | translate }}</button>
<button class="ordinary-button" (click)="closeDialog()">Cancel</button>
</div>
</div>

2
ogWebconsole/src/app/components/commands/commands-task/task-logs/input-dialog/input-dialog.component.html
View File

@ -3,5 +3,5 @@
<pre>{{ data.input | json }}</pre>
</div>
<div mat-dialog-actions align="end">
<button mat-button (click)="close()">{{ 'closeButton' | translate }}</button>
<button class="ordinary-button" (click)="close()">{{ 'closeButton' | translate }}</button>
</div>

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

@ -9,7 +9,7 @@
</div>
<div class="images-button-row">
<button mat-flat-button color="primary" (click)="resetFilters()" joyrideStep="resetFiltersStep"
<button class="action-button" (click)="resetFilters()" joyrideStep="resetFiltersStep"
text="{{ 'resetFiltersStepText' | translate }}">
{{ 'resetFilters' | translate }}
</button>

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

@ -6,7 +6,7 @@
<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>
<button class="action-button" (click)="openCreateCommandModal()">{{ 'addCommand' | translate }}</button>
</div>
</div>

12
ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.css
View File

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

6
ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.html
View File

@ -23,7 +23,7 @@
</form>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button (click)="onCancel($event)">{{ 'buttonCancel' | translate }}</button>
<button mat-button (click)="onSubmit()" cdkFocusInitial>{{ 'buttonSave' | translate }}</button>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onCancel($event)">{{ 'buttonCancel' | translate }}</button>
<button class="submit-button" (click)="onSubmit()" cdkFocusInitial>{{ 'buttonSave' | translate }}</button>
</mat-dialog-actions>

2
ogWebconsole/src/app/components/commands/main-commands/execute-command/execute-command.component.html
View File

@ -3,7 +3,7 @@
<mat-icon>{{ icon }}</mat-icon>
</button>
<button mat-flat-button [disabled]="clientData.length === 0" *ngSwitchCase="'text'" mat-button color="primary" [matMenuTriggerFor]="commandMenu">
<button class="action-button" [disabled]="clientData.length === 0" *ngSwitchCase="'text'" [matMenuTriggerFor]="commandMenu">
{{ buttonText }}
</button>
</ng-container>

6
ogWebconsole/src/app/components/commands/main-commands/execute-command/execute-command.component.ts
View File

@ -47,12 +47,6 @@ export class ExecuteCommandComponent implements OnInit {
this.clientData = this.clientData || [];
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['clientData']) {
console.log(this.clientData.length)
}
}
onCommandSelect(action: any): void {
if (action === 'partition') {
this.openPartitionAssistant();

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

@ -1,4 +1,3 @@
.header-container {
display: flex;
justify-content: space-between;
@ -24,14 +23,6 @@
margin: 20px 0;
}
button[mat-raised-button] {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
font-size: 16px;
}
.actions mat-icon {
color: #757575;
cursor: pointer;
@ -87,10 +78,6 @@ button[mat-raised-button] {
width: 100%;
}
button[mat-raised-button] {
align-self: flex-start;
}
@media (max-width: 1024px) {
.card-container {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
@ -391,14 +378,11 @@ mat-tree mat-tree-node.disabled:hover {
color: #666;
}
button[mat-raised-button] {
margin-top: 15px;
}
.clients-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 4px; /* Espaciado reducido entre cards */
gap: 4px;
/* Espaciado reducido entre cards */
}
.clients-list {
@ -423,8 +407,10 @@ button[mat-raised-button] {
.clients-grid {
display: grid;
grid-template-columns: repeat(6, 1fr); /* 6 columnas por fila */
gap: 16px; /* Espaciado entre tarjetas */
grid-template-columns: repeat(6, 1fr);
/* 6 columnas por fila */
gap: 16px;
/* Espaciado entre tarjetas */
padding: 20px;
}
@ -442,7 +428,8 @@ button[mat-raised-button] {
margin-top: 10px;
}
.client-card, .list-item-content {
.client-card,
.list-item-content {
border: 1px solid #ccc;
border-radius: 5px;
}
@ -453,12 +440,8 @@ button[mat-raised-button] {
margin-bottom: 0.5rem;
}
.back-button {
flex-shrink: 0;
}
.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);
}
.client-info {
@ -523,4 +506,4 @@ button[mat-raised-button] {
gap: 10px;
margin-top: 1.5rem;
margin-left: 1.6rem;
}
}

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

@ -9,19 +9,18 @@
</h2>
</div>
<div class="groups-button-row" joyrideStep="addStep" text="{{ 'groupsAddStepText' | translate }}">
<button mat-flat-button color="primary" (click)="addOU($event)"
<button class="action-button" (click)="addOU($event)"
matTooltip="{{ 'newOrganizationalUnitTooltip' | translate }}" matTooltipShowDelay="1000">
{{ 'newOrganizationalUnitButton' | translate }}
</button>
<button mat-flat-button color="primary" [matMenuTriggerFor]="menuClients">{{ 'newClientButton' | translate
}}</button>
<button class="action-button" [matMenuTriggerFor]="menuClients">{{ 'newClientButton' | translate }}</button>
<mat-menu #menuClients="matMenu">
<button mat-menu-item (click)="addClient($event)">{{ 'newSingleClientButton' | translate }}</button>
<button mat-menu-item (click)="addMultipleClients($event)">{{ 'newMultipleClientButton' | translate }}</button>
</mat-menu>
<button mat-flat-button (click)="openBottomSheet()" joyrideStep="keyStep" text="{{ 'keyStepText' | translate }}"
matTooltipShowDelay="1000">
<button class="ordinary-button" (click)="openBottomSheet()" joyrideStep="keyStep"
text="{{ 'keyStepText' | translate }}" matTooltipShowDelay="1000">
{{ 'legendButton' | translate }}
</button>
</div>
@ -347,4 +346,4 @@
</div>
</div>
</div>
</ng-template>
</ng-template>

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

@ -108,7 +108,7 @@
</div>
<div mat-dialog-actions align="end">
<button mat-button (click)="onNoClick()" i18n="@@cancel-button">Cancelar</button>
<button mat-button [disabled]="!clientForm.valid" (click)="onSubmit()" i18n="@@add-button">Añadir</button>
<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>
</div>
</div>

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

@ -28,12 +28,6 @@ h1 {
margin-right: 1em;
}
button {
text-transform: none;
font-size: 16px;
font-weight: 500;
}
.grid-form {
display: grid;
grid-template-columns: repeat(2, 1fr);

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

@ -165,8 +165,8 @@
</form>
</div>
<div class="mat-dialog-actions">
<button mat-button (click)="onNoClick()">Cancelar</button>
<button mat-button (click)="onSubmit()"
<button class="ordinary-button" (click)="onNoClick()">Cancelar</button>
<button class="submit-button" (click)="onSubmit()"
[disabled]="!generalFormGroup.valid || !additionalInfoFormGroup.valid || !networkSettingsFormGroup.valid">{{
isEditMode ? 'Editar' : 'Crear' }}</button>
</div>

53
ogWebconsole/src/app/layout/header/header.component.css
View File

@ -1,29 +1,46 @@
mat-toolbar {
height: 60px;
background-color: #3f51b5;
color: white;
}
.admin-button,
.user-button{
background-color: #e0e0e0;
height: 60px;
background-color: #3f51b5;
color: white;
}
.trace-button .mat-icon {
color: #f0f0f0;
color: #ffffff;
}
.navbar-button-row {
display: flex;
justify-content: end;
flex-grow: 1;
.navbar-actions-row {
display: flex;
justify-content: end;
align-items: center;
flex-grow: 1;
}
button[mat-flat-button] {
margin: 0 5px;
.navbar-buttons-row {
display: flex;
gap: 1rem;
}
.navbar-title{
cursor: pointer;
.navbar-title {
cursor: pointer;
}
.logout-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;
}
.logout-button:hover:not(:disabled) {
background-color: #f00e0edc;
}
.logout-button:disabled {
background-color: #ced0df;
cursor: not-allowed;
}

49
ogWebconsole/src/app/layout/header/header.component.html
View File

@ -1,39 +1,48 @@
<mat-toolbar>
<span class="navbar-title" i18n="@@webConsoleTitle" matTooltip="Consola web de administración de Opengnsys" matTooltipShowDelay="1000">
<span class="navbar-title" i18n="@@webConsoleTitle" matTooltip="Consola web de administración de Opengnsys"
matTooltipShowDelay="1000">
Opengnsys webconsole
</span>
<button mat-icon-button (click)="onToggleSidebar()" matTooltip="Abrir o cerrar la barra lateral" matTooltipShowDelay="1000">
<button mat-icon-button (click)="onToggleSidebar()" matTooltip="Abrir o cerrar la barra lateral"
matTooltipShowDelay="1000">
<mat-icon class="navbar-icon">menu</mat-icon>
</button>
<div class="navbar-button-row">
<button class="trace-button" routerLink="/commands-logs" mat-button i18n="@@admin"><mat-icon>notifications</mat-icon></button>
<div class="navbar-actions-row">
<button class="trace-button" routerLink="/commands-logs" mat-button
i18n="@@admin"><mat-icon>notifications</mat-icon></button>
<button class="admin-button" *ngIf="isSuperAdmin" mat-button [matMenuTriggerFor]="menu" i18n="@@admin"
matTooltip="Gestión de usuarios y roles de la aplicación" matTooltipShowDelay="1000">
Administración
</button>
<div class="navbar-buttons-row">
<button class="ordinary-button" *ngIf="isSuperAdmin" [matMenuTriggerFor]="menu" i18n="@@admin"
matTooltip="Gestión de usuarios y roles de la aplicación" matTooltipShowDelay="1000">
Administración
</button>
<button class="user-button" mat-button *ngIf="!isSuperAdmin" (click)="editUser()" i18n="@@editUser"
matTooltip="Editar tu información de usuario" matTooltipShowDelay="1000">
Editar usuario
</button>
<button class="ordinary-button" *ngIf="!isSuperAdmin" (click)="editUser()" i18n="@@editUser"
matTooltip="Editar tu información de usuario" matTooltipShowDelay="1000">
Editar usuario
</button>
<button class="logout-button" routerLink="/auth/login" i18n="@@logout"
matTooltip="Cerrar sesión y salir de la aplicación" matTooltipShowDelay="1000">
Salir
</button>
</div>
<mat-menu #menu="matMenu">
<button mat-menu-item routerLink="/users" i18n="@@usersMenuItem" matTooltip="Ver y gestionar todos los usuarios" matTooltipShowDelay="1000">
<button mat-menu-item routerLink="/users" i18n="@@usersMenuItem" matTooltip="Ver y gestionar todos los usuarios"
matTooltipShowDelay="1000">
Usuarios
</button>
<button mat-menu-item routerLink="/user-groups" i18n="@@rolesMenuItem" matTooltip="Gestionar roles de usuario" matTooltipShowDelay="1000">
<button mat-menu-item routerLink="/user-groups" i18n="@@rolesMenuItem" matTooltip="Gestionar roles de usuario"
matTooltipShowDelay="1000">
Roles
</button>
<button mat-menu-item routerLink="/env-vars" i18n="@@rolesMenuItem" matTooltip="Gestionar variables de entorno" matTooltipShowDelay="1000">
<button mat-menu-item routerLink="/env-vars" i18n="@@rolesMenuItem" matTooltip="Gestionar variables de entorno"
matTooltipShowDelay="1000">
Variables de entorno
</button>
</mat-menu>
<button mat-flat-button color="warn" routerLink="/auth/login" i18n="@@logout"
matTooltip="Cerrar sesión y salir de la aplicación" matTooltipShowDelay="1000">
Salir
</button>
</div>
</mat-toolbar>
</mat-toolbar>

120
ogWebconsole/src/styles.css
View File

@ -1,36 +1,96 @@
/* You can add global styles to this file, and also import other style files */
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
/* Clase general para el contenedor de carga */
.loading-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
background-color: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
width: 100vw;
height: 100vh;
}
/* Spinner de Angular Material */
.mat-spinner {
width: 100px;
height: 100px;
}
/* Texto que acompaña al spinner */
.loading-container p {
margin-top: 20px;
font-size: 1.2rem;
font-weight: bold;
color: #555;
}
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
background-color: rgba(255, 255, 255, 0.8);
/* Fondo semitransparente */
width: 100vw;
height: 100vh;
}
/* Spinner de Angular Material */
.mat-spinner {
width: 100px;
height: 100px;
}
/* Texto que acompaña al spinner */
.loading-container p {
margin-top: 20px;
font-size: 1.2rem;
font-weight: bold;
color: #555;
}
.submit-button {
background-color: #399b00;
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;
}
.ordinary-button {
background-color: #fafafa;
color: #5f5f5f;
padding: 8px 18px;
border: 1px solid #5f5f5f;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: transform 0.3s ease;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.action-button {
background-color: #3f51b5;
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;
}
.submit-button:hover:not(:disabled){
background-color: #399b00dc;
}
.ordinary-button:hover:not(:disabled){
background-color: #e6e6e6;
}
.action-button:hover:not(:disabled) {
background-color: #485ac0d7;
}
.submit-button:disabled,
.ordinary-button:disabled,
.action-button:disabled {
background-color: #ced0df;
cursor: not-allowed;
}