Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the UI theme #424

Merged
merged 8 commits into from
Jul 7, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 2 additions & 9 deletions static/skywire-manager-src/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -93,17 +93,15 @@ import { InitialSetupComponent } from './components/pages/login/initial-setup/in
import { SelectLanguageComponent } from './components/layout/select-language/select-language.component';
import { LangButtonComponent } from './components/layout/lang-button/lang-button.component';
import { TruncatedTextComponent } from './components/layout/truncated-text/truncated-text.component';
import { SelectTabComponent } from './components/layout/tab-bar/select-tab/select-tab.component';
import { NodeInfoContentComponent } from './components/pages/node/node-info/node-info-content/node-info-content.component';
import { NodeInfoComponent } from './components/pages/node/node-info/node-info.component';
import { SelectColumnComponent } from './components/layout/select-column/select-column.component';
import { SelectOptionComponent } from './components/layout/select-option/select-option.component';
import { SelectPageComponent } from './components/layout/paginator/select-page/select-page.component';
import { TerminalComponent } from './components/pages/node/actions/terminal/terminal.component';
import { SkysocksSettingsComponent } from './components/pages/node/apps/node-apps/skysocks-settings/skysocks-settings.component';
import {
SkysocksClientSettingsComponent
} from './components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component';
import { MenuButtonComponent } from './components/layout/sidenav/menu-button/menu-button.component';

const globalRippleConfig: RippleGlobalOptions = {
disabled: true,
Expand Down Expand Up @@ -176,15 +174,13 @@ const globalRippleConfig: RippleGlobalOptions = {
SelectLanguageComponent,
LangButtonComponent,
TruncatedTextComponent,
SelectTabComponent,
NodeInfoContentComponent,
NodeInfoComponent,
SelectColumnComponent,
SelectOptionComponent,
SelectPageComponent,
TerminalComponent,
SkysocksSettingsComponent,
SkysocksClientSettingsComponent,
MenuButtonComponent,
],
entryComponents: [
ConfigurationComponent,
Expand All @@ -208,10 +204,7 @@ const globalRippleConfig: RippleGlobalOptions = {
SnackbarComponent,
InitialSetupComponent,
SelectLanguageComponent,
SelectTabComponent,
SelectColumnComponent,
SelectOptionComponent,
SelectPageComponent,
TerminalComponent,
SkysocksSettingsComponent,
SkysocksClientSettingsComponent,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
<mat-spinner *ngIf="state === buttonStates.Loading" [diameter]="loadingSize"></mat-spinner>
<mat-icon *ngIf="state === buttonStates.Success">done</mat-icon>
<mat-icon *ngIf="state === buttonStates.Error">error_outline</mat-icon>
<mat-icon *ngIf="state === buttonStates.Normal && icon">{{ icon }}</mat-icon>
<ng-content></ng-content>
<i *ngIf="notification" class="dot-red sm"></i>
</ng-template>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@ button {
}
}

::ng-deep .mat-raised-button[disabled] {
background-color: $blue-medium !important;
color: $white !important;
opacity: 0.5;
}

mat-icon, mat-spinner {
display: inline-block;
margin-right: 20px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ export class ButtonComponent implements OnDestroy {
// Should be be 'mat-button' or 'mat-raised-button'.
@Input() type = 'mat-button';
@Input() disabled = false;
@Input() icon: string;
// Must be one of the colors defined on the default theme.
@Input() color = '';
@Input() loadingSize = 24;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,14 @@
<div class="text-container">
{{ (state !== confirmationStates.Done ? data.text : doneText) | translate }}
</div>
<div *ngIf="(data.list && state !== confirmationStates.Done) || (doneList && state === confirmationStates.Done)" class="list-container">
<div *ngFor="let element of (state !== confirmationStates.Done ? data.list : doneList)">
- {{ element | translate }}
</div>
</div>
<div *ngIf="data.lowerText && state !== confirmationStates.Done" class="text-container">
{{ data.lowerText | translate }}
</div>

<div class="buttons">
<app-button
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
@import 'variables';

.text-container {
margin-top: 5px;
word-break: break-word;
}

.list-container {
font-size: 14px;
margin: 10px;
color: $blue-medium;
word-break: break-word;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,14 @@ export interface ConfirmationData {
* Confirmation text to show.
*/
text: string;
/**
* Optional list with elements to show after the text.
*/
list?: string[];
/**
* Optional text to show below the main text and the list.
*/
lowerText?: string;
/**
* Title of the modal window.
*/
Expand Down Expand Up @@ -65,6 +73,7 @@ export class ConfirmationComponent implements AfterViewInit, OnDestroy {
// Texts for the Done state.
doneTitle: string;
doneText: string;
doneList: string[];

// Event for when the user confirms.
@Output() operationAccepted = new EventEmitter();
Expand Down Expand Up @@ -130,14 +139,16 @@ export class ConfirmationComponent implements AfterViewInit, OnDestroy {
* Use only after the operation is done or receiving an error.
* @param newTitle New title for the modal window.
* @param newText New main text for the modal window.
* @param newList New optional list to show below the main text.
*/
showDone(newTitle: string | null, newText: string) {
showDone(newTitle: string | null, newText: string, newList: string[] = null) {
if (newTitle) {
this.doneTitle = newTitle;
} else {
this.doneTitle = this.data.headerText;
}
this.doneText = newText;
this.doneList = newList;

this.confirmButton.reset();
setTimeout(() => this.confirmButton.focus());
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,12 @@
</button>
</div>

<mat-dialog-content *ngIf="includeScrollableArea">
<div class="header-separator"></div>

<mat-dialog-content [ngClass]="{'content-margin': includeVerticalMargins}" *ngIf="includeScrollableArea">
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
</mat-dialog-content>
<ng-container *ngIf="!includeScrollableArea">
<div [ngClass]="{'content-margin': includeVerticalMargins}" *ngIf="!includeScrollableArea">
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
</ng-container>
</div>
<ng-template #contentTemplate><ng-content></ng-content></ng-template>
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,20 @@
@import 'utilities/utilities';
@import 'text';

:host {
color: $black;
}

.header {
margin-top: -$mat-dialog-padding;
margin-left: -$mat-dialog-padding;
margin-right: -$mat-dialog-padding;
margin-bottom: 0;
color: $blue-dark;
color: $blue-medium;
padding: 0px ($mat-dialog-padding - 10) 0px $mat-dialog-padding;
font-size: $font-size-base;
text-transform: uppercase;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
Expand All @@ -29,7 +34,7 @@
span {
@extend .reactivate-mouse;
line-height: $font-size-base;
margin: 17px 0;
margin: 18px 0;
}

.mat-icon-button {
Expand All @@ -48,3 +53,15 @@
}
}
}

.header-separator {
height: 1px;
background-color: $modal-separator;
margin-left: -12px;
margin-right: -12px;
}

.content-margin {
padding-top: 18px;
padding-bottom: $mat-dialog-padding !important;
}
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,8 @@ export class DialogComponent {
* If false, the contents must include its own scrollable container.
*/
@Input() includeScrollableArea = true;
/**
* If true, vertical margins will be added to the content.
*/
@Input() includeVerticalMargins = true;
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<button
mat-button
class="lang-button grey-button-background"
class="lang-button subtle-transparent-button"
(click)="openLanguageWindow()"
[matTooltip]="'language.title' | translate"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
.lang-button {
height: $header-buttons-height;
border-radius: $mat-dialog-radius;
background-color: $white;
border-radius: 100%;
padding: 0;
line-height: normal;

.flag {
width: 20px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ export class LineChartComponent implements AfterViewInit, DoCheck {
labels: Array.from(Array(this.data.length).keys()),
datasets: [{
data: this.data,
backgroundColor: ['#0B6DB0'],
borderColor: ['#0B6DB0'],
backgroundColor: ['rgba(10, 15, 22, 0.4)'],
borderColor: ['rgba(10, 15, 22, 0.4)'],
borderWidth: 1,
}],
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="main-container">
<div class="d-inline-block container-elevated-translucid p-0 mt-3">
<div class="d-inline-block small-rounded-elevated-box mt-3">
<div class="d-flex">
<!-- Invisible element that makes the paginator to be tall on small window sizes. -->
<div class="responsive-height d-md-none">&nbsp;<br/>&nbsp;</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
border-left: $separator solid 1px;
min-width: 40px;
text-align: center;
color: $white;
color: scale-color($white, $alpha: -50%);
text-decoration: none;
display: flex;
align-items: center;
Expand All @@ -39,14 +39,13 @@
}

.selected {
color: $black;
background: theme-color(translucid-hover);
font-weight: bold;
color: $white;
background: scale-color(theme-color(translucid-hover), $alpha: 20%);
padding: $elements-padding ($elements-padding * 2);
cursor: pointer;

&:hover {
background: adjust-color(theme-color(translucid-hover), $alpha: 0.2);
background: scale-color(theme-color(translucid-hover), $alpha: 50%);
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';

import { SelectPageComponent } from './select-page/select-page.component';
import { SelectableOption, SelectOptionComponent } from '../select-option/select-option.component';

/**
* Generic paginator for the long lists of the app.
Expand Down Expand Up @@ -31,9 +31,16 @@ export class PaginatorComponent {
) { }

openSelectionDialog() {
SelectPageComponent.openDialog(this.dialog, this.numberOfPages).afterClosed().subscribe((selectedPage: number) => {
if (selectedPage) {
this.router.navigate(this.linkParts.concat([selectedPage.toString()]));
// Create an option for every page.
const options: SelectableOption[] = [];
for (let i = 1; i <= this.numberOfPages; i++) {
options.push({ label: i.toString() });
}

// Open the option selection modal window.
SelectOptionComponent.openDialog(this.dialog, options, 'paginator.select-page-title').afterClosed().subscribe((result: number) => {
if (result) {
this.router.navigate(this.linkParts.concat([result.toString()]));
}
});
}
Expand Down

This file was deleted.

This file was deleted.

This file was deleted.

Loading