shaba/openuds-gui
1
0
Fork 0
mirror of https://github.com/dkmstr/openuds-gui.git synced 2024-10-26 08:55:23 +03:00
Code Releases Activity

services much more better

Browse Source
This commit is contained in:
Adolfo Gómez García 2018-09-11 09:01:25 +02:00
parent afa9118a17
commit 30a5d8113d
20 changed files with 191 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -25,10 +25,8 @@
"@angular/platform-browser": "^6.1.6",
"@angular/platform-browser-dynamic": "^6.1.6",
"@angular/router": "^6.1.6",
"bootstrap": "^4.1.1",
"cookieconsent": "^3.0.6",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"rxjs": "^6.2.2",
"zone.js": "^0.8.19"
},

26
src/app/app.component.css
View File

@ -0,0 +1,26 @@
.page {
display: flex;
flex-direction: column;
height: 100%;
}
.footer {
flex-shrink: 0;
margin: 1em 1em 1em 1em;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.content {
flex: 1 0 auto;
width: 80%;
margin: 4rem auto 0 auto;
}
/* responsive part */
@media only screen and (max-width: 744px) {
.content {
width: 100%;
}
}

9
src/app/app.component.html
View File

@ -1,2 +1,9 @@
<uds-navbar></uds-navbar>
<router-outlet></router-outlet>
<div class="page">
<div class="content">
<router-outlet></router-outlet>
</div>
<div class="footer">
<uds-footer></uds-footer>
</div>
</div>

2
src/app/app.module.ts
View File

@ -28,6 +28,7 @@ import { ServicesGroupComponent } from './gui/components/services-group/services
// Service providers
import { UDSApiService } from './uds-api.service';
import { UDSGuiService } from './gui/uds-gui.service';
import { FooterComponent } from './gui/footer/footer.component';
@NgModule({
declarations: [
@ -41,6 +42,7 @@ import { UDSGuiService } from './gui/uds-gui.service';
ServicesGroupComponent,
ModalComponent,
SafeHtmlPipe,
FooterComponent,
],
imports: [
BrowserModule,

47
src/app/gui/components/service/service.component.css
View File

@ -1,33 +1,46 @@
.service {
width: 8rem;
height: auto;
width: 10rem;
margin: 0 1rem 2rem 0;
padding: 0.5rem 1rem 1rem 1rem;
padding: 0.5rem 0 1rem 0;
/*border-radius: 1rem;*/
box-shadow: 0 12px 18px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
border: 1px;
border-style: solid;
border-color: rgb(0, 0, 0, 0.22);
display: flex;
flex: 1;
align-items: center;
justify-content: start;
flex-flow: column wrap;
position: relative;
}
.service:hover {
cursor: pointer;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.icon {
display: flex;
justify-content: center;
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
width: 6rem;
height: 6rem;
margin: 0.5rem;
}
.service:hover .icon {
cursor: pointer;
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
width: 7rem;
height: 7rem;
margin: 0;
}
.icon img {
width: 100%;
height: 100%;
max-height: 96px;
/*max-height: 96px;*/
overflow: hidden;
}
@ -38,12 +51,28 @@
flex: 1 0 auto;
flex-flow: row auto;
align-items: center;
justify-content: space-between;
justify-content: center;
height: 2.5rem;
}
.name button {
justify-self: flex-end;
.menu {
position: absolute;
top: 2px;
right: 2px;
}
.menu .mat-icon-button {
cursor: pointer;
border-radius: 1px;
background-color: rgb(255, 255, 255, 0.80);
/*line-height: 0px;
width: auto;
height: auto;*/
}
.menu .mat-icon-button:hover {
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.transport-item {
@ -54,4 +83,4 @@
.transport-item img {
width: 2em;
margin-right: 0.4em;
}
}

64
src/app/gui/components/service/service.component.html
View File

@ -1,36 +1,42 @@
<div *ngIf="service.transports.length > 0">
<mat-menu #transports>
<button mat-menu-item *ngFor="let trans of service.transports">
<div class="transport-item">
<img [src]="getTransportIcon(trans.id)">
{{ trans.name }}
</div>
</button>
</mat-menu>
<mat-menu #actions>
<button mat-menu-item *ngIf="service.allow_users_remove">
<i class="fa fa-trash"></i> <uds-translate> Release service</uds-translate>
</button>
<button mat-menu-item *ngIf="service.allow_users_reset">
<i class="fa fa-refresh"></i> <uds-translate> Reset service</uds-translate>
<mat-menu #transports>
<button mat-menu-item *ngFor="let trans of service.transports">
<div class="transport-item">
<img [src]="getTransportIcon(trans.id)">
{{ trans.name }}
</div>
</button>
</mat-menu>
<mat-menu #menu>
<button mat-menu-item [matMenuTriggerFor]="transports" *ngIf="hasManyTransports()"><uds-translate>Transports</uds-translate></button>
<button mat-menu-item [matMenuTriggerFor]="actions" *ngIf="hasActions()"><uds-translate>Actions</uds-translate></button>
</mat-menu>
<mat-menu #actions>
<button mat-menu-item *ngIf="service.allow_users_remove">
<i class="material-icons">delete</i>
<uds-translate> Release service</uds-translate>
</button>
<button mat-menu-item *ngIf="service.allow_users_reset">
<i class="material-icons">refresh</i>
<uds-translate> Reset service</uds-translate>
</button>
</mat-menu>
<div class="service">
<div class="icon" (click)="launch()">
<img [src]="serviceImage">
</div>
<div class="name">
<div>{{ serviceName }}</div>
<div>
<button mat-icon-button [matMenuTriggerFor]="menu" *ngIf="hasMenu()"><i class="fa fa-gears"></i></button>
</div>
<mat-menu #menu>
<button mat-menu-item [matMenuTriggerFor]="transports" *ngIf="hasManyTransports()">
<uds-translate>Transports</uds-translate>
</button>
<button mat-menu-item [matMenuTriggerFor]="actions" *ngIf="hasActions()">
<uds-translate>Actions</uds-translate>
</button>
</mat-menu>
<div class="service">
<div class="icon" (click)="launch()">
<img [src]="serviceImage">
</div>
<div class="name">
{{ serviceName }}
</div>
<div class="menu">
<button mat-icon-button [matMenuTriggerFor]="menu" *ngIf="hasMenu()"><i class="material-icons">menu</i></button>
</div>
</div>
</div>
</div>

17
src/app/gui/components/services-group/services-group.component.css
View File

@ -12,10 +12,9 @@
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.services-group-title img {
width: 2rem;
width: 2em; /* By using em, will also inherit font size & font size animations */
margin: 0 9px 0 0;
flex-flow: 0 0 auto;
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
/* .mat-expansion-panel-header-description */
@ -33,15 +32,13 @@
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.mat-expanded img {
width: 4rem;
margin: 0 16px 0 0;
.mat-expanded .services-group-title {
font-size: 2em;
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.mat-expanded .services-group-title {
font-size: 2em;
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
@media only screen and (max-width: 744px) {
.services-group {
justify-content: center;
}
}

6
src/app/gui/components/services-group/services-group.component.html
View File

@ -1,5 +1,5 @@
<mat-expansion-panel [expanded]="expanded">
<mat-expansion-panel-header [collapsedHeight]="'5rem'" [expandedHeight]="'8rem'">
<mat-expansion-panel [expanded]="expanded" *ngIf="hasVisibleServices">
<mat-expansion-panel-header [collapsedHeight]="'3rem'" [expandedHeight]="'5rem'">
<mat-panel-title>
<div class="services-group-title"><img [src]="groupImage"> {{group.name}}</div>
</mat-panel-title>
@ -9,7 +9,7 @@
</mat-expansion-panel-header>
<div class="services-group">
<uds-service *ngFor="let s of services" [service]="s"></uds-service>
<uds-service *ngFor="let s of sortedServices" [service]="s"></uds-service>
</div>
</mat-expansion-panel>

16
src/app/gui/components/services-group/services-group.component.ts
View File

@ -1,6 +1,7 @@
import { Component, OnInit, Input } from '@angular/core';
import { JSONGroup, JSONService } from '../../../types/services';
import { UDSApiService } from '../../../uds-api.service';
import { THROW_IF_NOT_FOUND } from '@angular/core/src/di/injector';
@Component({
selector: 'uds-services-group',
@ -22,4 +23,19 @@ export class ServicesGroupComponent implements OnInit {
return this.api.galleryImageURL(this.group.imageUuid);
}
get hasVisibleServices(): boolean {
return this.services.length > 0;
}
get sortedServices() {
return this.services.sort((a, b) => {
if (a.name > b.name) {
return 1;
} else if (a.name < b.name ) {
return -1;
}
return 0;
});
}
}

0
src/app/gui/footer/footer.component.css Normal file
View File

1
src/app/gui/footer/footer.component.html Normal file
View File

@ -0,0 +1 @@
<div>Copyright &copy; 2012-2018 <a href="https://www.udsenterprise.com">Virtual Cable S.L.U.</a></div>

15
src/app/gui/footer/footer.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'uds-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

4
src/app/gui/navbar/navbar.component.css
View File

@ -9,9 +9,9 @@
flex: 1 1 auto;
}
.fa {
.material-icons {
margin-right: 0.3rem;
margin-left: 0.3rem;
/*margin-left: 0.3rem;*/
}
.udsicon {

16
src/app/gui/navbar/navbar.component.html
View File

@ -11,9 +11,9 @@
<!-- user menu -->
<mat-menu #userMenu="matMenu">
<button mat-menu-item routerLink="/"><i class="fa fa-gear"></i><uds-translate>Preferences</uds-translate></button>
<button mat-menu-item *ngIf="api.user.isStaff" (click)="admin()"><i class="fa fa-dashboard"></i><uds-translate>Dashboard</uds-translate></button>
<button mat-menu-item routerLink="/downloads"><i class="fa fa-download"></i><uds-translate>Downloads</uds-translate></button>
<button mat-menu-item *ngIf="api.user.isStaff" (click)="admin()"><i class="material-icons">dashboard</i><uds-translate>Dashboard</uds-translate></button>
<button mat-menu-item routerLink="/"><i class="material-icons">settings</i><uds-translate>Preferences</uds-translate></button>
<button mat-menu-item routerLink="/downloads"><i class="material-icons">file_download</i><uds-translate>Downloads</uds-translate></button>
</mat-menu>
<!-- shriked menu -->
@ -35,15 +35,15 @@
<!-- elements only visible when expanded -->
<div fxLayout="row" fxShow="false" fxShow.gt-sm>
<button mat-button routerLink="/client-download"><i class="fa fa-download"></i>UDS Plugin</button>
<button mat-button routerLink="/about"><i class="fa fa-info"></i><uds-translate>About</uds-translate></button>
<button mat-button [matMenuTriggerFor]="appMenu">{{ lang.name }} <i class="fa fa-caret-down"></i></button>
<button mat-button *ngIf="api.user.isLogged" [matMenuTriggerFor]="userMenu">{{api.user.user}} <i class="fa fa-caret-down"></i></button>
<button mat-button routerLink="/client-download"><i class="material-icons">file_download</i>UDS Plugin</button>
<button mat-button routerLink="/about"><i class="material-icons">info</i><uds-translate>About</uds-translate></button>
<button mat-button [matMenuTriggerFor]="appMenu">{{ lang.name }} <i class="material-icons">arrow_drop_down</i></button>
<button mat-button *ngIf="api.user.isLogged" [matMenuTriggerFor]="userMenu">{{api.user.user}} <i class="material-icons">arrow_drop_down</i></button>
</div>
<!-- button visible only when shrinked -->
<button mat-button [matMenuTriggerFor]="shrink" fxHide="false" fxHide.gt-sm>
<i class="fa fa-bars fa-2x"></i>
<i class="material-icons">menu</i>
</button>
</mat-toolbar>

2
src/app/pages/client-download/client-download.component.css
View File

@ -1,5 +1,5 @@
.plugins-container {
margin: 0 10%;
margin: 0 2%;
}
.banner {

3
src/app/pages/login/login.component.css
View File

@ -36,9 +36,6 @@
margin: 2rem;
}
.login-footer {
}
.mat-form-field {
width: 100%;

82
src/app/pages/login/login.component.html
View File

@ -5,13 +5,13 @@
<div class="login-container">
<div class="login-brand">
<div class="login-brand">
<img src="/static/modern/img/login-img.png">
</div>
<div class="login-info">
{{ title }}
</div>
{{ title }}
</div>
<div class="login-form">
@ -35,80 +35,22 @@
<div class="login-field" *ngIf="auths.length > 1">
<mat-form-field appaerance="standard">
<mat-label>
<uds-translate>Authenticator</uds-translate>
</mat-label>
<mat-select [value]="auths[0].id" (selectionChange)="changeAuth($event.value)">
<mat-option *ngFor="let a of auths" [value]="a.id">
{{ a.name }}
</mat-option>
<mat-label>
<uds-translate>Authenticator</uds-translate>
</mat-label>
<mat-select [value]="auths[0].id" (selectionChange)="changeAuth($event.value)">
<mat-option *ngFor="let a of auths" [value]="a.id">
{{ a.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="login-button">
<button mat-stroked-button color="primary" type="submit">
<button mat-stroked-button color="primary" type="submit">
<uds-translate>Login</uds-translate>
</button>
</div>
</div>
<div class="login-footer">
Copyright &copy; 2012-2018
<a href="https://www.udsenterprise.com">Virtual Cable S.L.U.</a>
</div>
</div>
</div>
</form>
<!--
<div class="container">
<div class="row justify-content-md-center h-100">
<div class="card-wrapper" [hidden]="!visible">
<div class="brand">
<img src="/static/modern/img/login-img.png">
</div>
<div class="card fat" >
<div class="card-body">
<h4 class="card-title text-center">UDS Enterprise</h4>
<form id="loginform2" method="post">
<input name="" id="token" value="" type="hidden">
<input name="logouturl" id="id_logouturl" value="" type="hidden">
<div class="form-group">
<label for="user">
<uds-translate>Username</uds-translate>
</label>
<input id="id_user" type="user" class="form-control" name="user" value="" required autofocus>
</div>
<div class="form-group">
<label for="password">
<uds-translate>Password</uds-translate>
</label>
<input id="id_password" type="password" class="form-control" name="password" data-eye>
</div>
<div class="form-group" *ngIf="auths.length > 1">
<label>
<uds-translate>Authenticator</uds-translate>
</label>
<select name="authenticator" class="custom-select" (change)="changeAuth($event.target.value)">
<option *ngFor="let a of auths" value="{{ a.id }}">{{ a.name }}</option>
</select>
</div>
<div class="form-group no-margin">
<button type="submit" class="btn btn-primary btn-block">
Login
</button>
</div>
</form>
</div>
</div>
<div class="footer">
</div>
</div>
</div>
</div>
-->

3
src/app/pages/services/services.component.css
View File

@ -1,4 +1,3 @@
.services-groups {
margin: 0 10%;
padding-top: 2rem;
padding-top: 1rem;
}

10
src/index.html
View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<meta charset="utf-8">
<title>Uds</title>
@ -11,6 +11,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- just in case translations cannot be loaded, provide a fallback -->
<script type="text/javascript">
django = {
gettext: function(s) {
return s;
}
}
</script>
<!-- DYNAMIC_DATA -->
<script type="text/javascript" src="server/es.js"></script>
<script type="text/javascript" src="/js"></script>

19
src/styles.css
View File

@ -2,22 +2,17 @@
/* Materials */
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
/* Font awasome */
@import "~font-awesome/css/font-awesome.css";
/* Cookie consent */
@import "~cookieconsent/build/cookieconsent.min.css";
/*html, body { height: 100%; }*/
body {
margin: 4rem 0 0 0; /* leaves space for toolbar on top */
html, body {
margin: 0;
font-family: 'Roboto', sans-serif;
height: 100%;
}
/*.content {
width: 100%;
margin-right: auto;
margin-left: auto;
background-color: aqua;
}*/
/* Fix for vertical align on material icons */
i.material-icons {
vertical-align: middle !important;
}