inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-07-31 17:38:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-7452] - Small screen notification banner [ACS-7418] About page (#3760)

Browse Source 
* [ACS-7452] - Small screen notification banner

* [ACS-7452] - Small screen notification banner [ACS-7418] About page
This commit is contained in:
jacekpluta
2024-04-05 13:17:52 +02:00
committed by MichalKinas
parent 573a3099fc
commit 4dfd87d3fc
5 changed files with 76 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
projects/aca-shared/src/lib/components/open-in-app/open-in-app.component.html
View File

@@ -1,18 +1,22 @@
<div class="aca-mobile-application-container">
<span>{{ 'APP.DIALOGS.MOBILE_APP.OPEN_ALFRESCO_MOBILE_APP' | translate }}</span>
<button mat-button class="aca-cross-button" (click)="onCloseDialog()">
<mat-icon class="aca-cross-button-icon">close</mat-icon>
</button>
</div>
<div class="aca-open-in-app">
<div class="aca-mobile-application-container">
<span>{{ 'APP.DIALOGS.MOBILE_APP.OPEN_ALFRESCO_MOBILE_APP' | translate }}</span>
<button mat-icon-button mat-dialog-close class="aca-cross-button">
<mat-icon (click)="onCloseDialog()" class="aca-cross-button-icon">close</mat-icon>
</button>
</div>
<div class="aca-open-in-app-container">
<button mat-button (click)="openInApp()" data-automation-id="open-in-app-button" class="aca-open-in-app-container-button" cdkFocusInitial>
<span>{{ 'APP.DIALOGS.MOBILE_APP.MOBILE_APP_BUTTON_LABEL' | translate }}</span>
</button>
</div>
<div class="aca-open-in-app-button-container">
<button mat-button (click)="openInApp()"
data-automation-id="open-in-app-button"
class="aca-open-in-app-button-container" cdkFocusInitial>
<span>{{ 'APP.DIALOGS.MOBILE_APP.MOBILE_APP_BUTTON_LABEL' | translate }}</span>
</button>
</div>
<div class="aca-download-app-container" *ngIf="appStoreUrl">
<button mat-button data-automation-id="download-app-button" class="aca-download-app-container-button" (click)="downloadIosApp()">
<span>{{ 'APP.DIALOGS.MOBILE_APP.DOWNLOAD_APP_BUTTON_LABEL' | translate }}</span>
</button>
<div class="aca-download-app-container" *ngIf="appStoreUrl">
<button mat-button data-automation-id="download-app-button" class="aca-download-app-container-button" (click)="downloadIosApp()">
<span>{{ 'APP.DIALOGS.MOBILE_APP.DOWNLOAD_APP_BUTTON_LABEL' | translate }}</span>
</button>
</div>
</div>

84
projects/aca-shared/src/lib/components/open-in-app/open-in-app.component.scss
View File

@@ -1,60 +1,58 @@
aca-open-in-app {
.aca-open-in-app-container {
display: flex;
place-content: center;
padding: 0;
border-radius: 8px;
background-color: var(--theme-primary-color);
color: var(--theme-about-panel-background-color);
margin-top: 12px;
&-button {
.aca-open-in-app {
.aca-open-in-app-button-container {
display: flex;
place-content: center;
padding: 0;
border-radius: 8px;
background-color: var(--theme-primary-color);
height: 48px;
overflow-x: hidden;
font-size: 16px;
width: 100%;
padding: 0;
height: 48px;
color: white;
font-weight: 600;
&:focus-visible {
outline: none;
border-radius: unset;
}
}
}
.aca-download-app-container {
display: flex;
place-content: center;
margin-top: 12px;
.aca-download-app-container {
display: flex;
place-content: center;
margin-top: 12px;
margin-bottom: 16px;
&-button {
background: var(--theme-dialog-background-color);
color: var(--theme-primary-color);
&-button {
background: var(--theme-dialog-background-color);
color: var(--theme-primary-color);
font-size: 14px;
}
}
.aca-mobile-application-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 14px;
}
}
.aca-mobile-application-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 14px;
padding: 6px 0;
}
.aca-cross-button {
padding-right: 0;
&:focus-visible {
outline: none;
border-radius: unset;
padding: 6px 0;
margin-bottom: 12px;
}
&-icon {
font-weight: bold;
font-size: 21px;
height: 21px;
.aca-cross-button {
padding-right: 0;
&:focus-visible {
outline: none;
border-radius: unset;
}
&-icon {
font-weight: bold;
font-size: 20px;
}
}
}
}

4
projects/aca-shared/src/lib/components/open-in-app/open-in-app.component.ts
View File

@@ -23,7 +23,7 @@
*/
import { Component, Inject, ViewEncapsulation } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { MatButtonModule } from '@angular/material/button';
@@ -36,7 +36,7 @@ export interface OpenInAppDialogOptions {
}
@Component({
standalone: true,
imports: [CommonModule, TranslateModule, MatButtonModule, MatIconModule, A11yModule],
imports: [CommonModule, TranslateModule, MatButtonModule, MatIconModule, A11yModule, MatDialogModule],
selector: 'aca-open-in-app',
templateUrl: './open-in-app.component.html',
styleUrls: ['./open-in-app.component.scss'],