Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

added more css updates

Browse Source
This commit is contained in:
Valentin 2021-08-14 02:23:31 +03:00
parent 2fad0d6e83
commit 23c298b6f6
6 changed files with 22 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/components/base-screen/base-screen.component.html
View File

@ -1,5 +1,5 @@
<!--Disabled HelpMode for release-->
<!--<redaction-help-mode></redaction-help-mode>-->
<redaction-help-mode></redaction-help-mode>
<div class="red-top-bar">
<div class="top-bar-row">

8
apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.html
View File

@ -1,6 +1,8 @@
<section class="dialog">
<p class="welcome-to-help-mode pre" [innerHTML]="'help-mode.welcome-to-help-mode' | translate"></p>
<img src="assets/illustrations/illustration.gif" alt="" width="335" />
<p class="clicking-anywhere-on pre" [innerHTML]="'help-mode.clicking-anywhere-on' | translate"></p>
<div class="content">
<p class="heading-l pre" [innerHTML]="'help-mode.welcome-to-help-mode' | translate"></p>
<img src="assets/illustrations/illustration.gif" alt="" width="335" />
<p class="pre" [innerHTML]="'help-mode.clicking-anywhere-on' | translate"></p>
</div>
<iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
</section>

23
apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.scss
View File

@ -1,31 +1,18 @@
@import '../../../assets/styles/variables';
section {
height: 90%;
background: $grey-11;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.welcome-to-help-mode {
height: 78px;
.content {
width: 440px;
font-size: 20px;
font-weight: 600;
letter-spacing: 0;
line-height: 26px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-top: 20px;
}
.clicking-anywhere-on {
height: 54px;
width: 440px;
font-size: 13px;
letter-spacing: 0;
line-height: 18px;
text-align: center;
padding-bottom: 30px;
line-height: 18px;
}

2
apps/red-ui/src/app/components/help-mode/help-mode.component.html
View File

@ -4,7 +4,7 @@
</div>
<div class="help-mode-border" *ngIf="helpModeService.isHelpModeActive">
<div class="bottom">
<h3>{{ 'help-mode.text' | translate }}</h3>
<p class="heading">{{ 'help-mode.text' | translate }}</p>
<a class="instructions" (click)="helpModeService.openHelpModeDialog()" *ngIf="!helpModeService.helpModeDialogIsOpened">
{{ 'help-mode.instructions' | translate }}
</a>

1
apps/red-ui/src/app/components/help-mode/help-mode.component.scss
View File

@ -14,6 +14,7 @@
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s;
}
.help-button:hover {

10
apps/red-ui/src/app/components/help-mode/help-mode.component.ts
View File

@ -14,9 +14,17 @@ export class HelpModeComponent {
this.helpModeService.openHelpModeDialog();
}
@HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) {
@HostListener('document:keydown.escape') onEscKeydownHandler() {
if (!this.helpModeService.helpModeDialogIsOpened) {
this.helpModeService.isHelpModeActive = false;
}
}
@HostListener('document:keydown.h', ['$event']) onHKeydownHandler(event) {
const node = event?.target?.nodeName?.toLocaleLowerCase();
console.log(node);
if (!this.helpModeService.isHelpModeActive && node !== 'input' && node !== 'textarea') {
this.activateHelpMode();
}
}
}