style(install): Improve formatting of buttons.

runbox · gtandersen · Jan 23, 2024 · Jan 31, 2024 · Mar 4, 2024 · Mar 9, 2024
commit da7a055d8442ed714da3a1e3109770e0cccd566e
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -181,7 +181,7 @@ <h3 class="noMessageSelectedNotification">No Message Selected</h3>
       <ng-container *ngIf="!hasChildRouterOutlet">
         <div id="offerLocalIndex" *ngIf="offerInitialLocalIndex; else searchBar">
           <p>
-            Runbox 7 can synchronize with your browser to give you an optimal webmail experience. The data can be deleted at any time using the buttons beneath the folder list.
+            Runbox 7 will synchronize with your device to give you an optimal webmail experience. The data can be deleted at any time using the buttons beneath the folder list.
           </p>
           <mat-list>
           <mat-list-item>

diff --git a/src/styles.scss b/src/styles.scss
@@ -925,6 +925,10 @@ app-saved-searches .mat-list-base[dense] .mat-list-item {
     white-space: normal;
     line-height: 1em;
 
+    mat-list-item {
+        flex-grow: 1;
+    }
+
     button {
         margin-right: 10px;
     }

diff --git a/src/app/account-app/account-receipt.component.html b/src/app/account-app/account-receipt.component.html
    </p>
  </table>

    <div *ngIf="receipt.status == 1 && receipt.method === 'offline'">
        <h3>
            Please follow the instructions for your selected payment method below.
        </h3>
diff --git a/src/app/account-app/account-renewals.component.ts b/src/app/account-app/account-renewals.component.ts
    close_to_quota = [];
    close_percentage = 90;
    
    ngOnInit() {
        this.close_to_quota = this.check_close_quota();
    }

diff --git a/src/app/account-app/account-transactions.component.html b/src/app/account-app/account-transactions.component.html
            <ng-container matColumnDef="expansionIndicator">
                <th mat-header-cell *matHeaderCellDef> </th>
                <td mat-cell *matCellDef="let t">
                    <mat-icon *ngIf="t == expandedTransaction; else notExpanded" svgIcon="chevron-down"></mat-icon>
                    <ng-template #notExpanded>
                        <mat-icon svgIcon="chevron-right"></mat-icon>
                    </ng-template>
            </ng-container>
            <ng-container matColumnDef="expandedDetails">
                <td mat-cell *matCellDef="let t" [attr.colspan]="displayedColumns.length">
                    <div class="expandedDetails" [@detailExpand]="t == expandedTransaction ? 'expanded' : 'collapsed'">
                        <!-- yo dawg, I heard you like tables -->
                        <table class="detailsTable">
                            <tr>
diff --git a/src/app/account-app/runbox-timer.ts b/src/app/account-app/runbox-timer.ts
    `],
    template: `
        <ng-container><span #ref><ng-content select="[custom_template]"></ng-content></span></ng-container>
        <ng-container *ngIf="ref.childNodes.length == 0">
            <span class="timeunit years" *ngIf="runningDuration.years() > 0">{{runningDuration.years()}} years,</span>
            <span class="timeunit months" *ngIf="runningDuration.months() > 0"> {{runningDuration.months()}} months,</span>
            <span class="timeunit days" *ngIf="runningDuration.days() > 0"> {{runningDuration.days()}} days,</span>
diff --git a/src/app/account-details/account-settings.component.ts b/src/app/account-details/account-settings.component.ts

    constructor(public app: RMM) {}

    async ngOnInit() {
        this.app.account_settings.load().subscribe((settings) => {
            Object.keys(settings.result).forEach((key) =>
                this.settingsArray.push({
diff --git a/src/app/account-details/personal-details.component.ts b/src/app/account-details/personal-details.component.ts
        this.loadTimezones();
    }

    ngOnInit() {
        if (!this.rmm.account_security.user_password) {
            this.show_modal_password();
        }
diff --git a/src/app/account-details/storage-data.component.ts b/src/app/account-details/storage-data.component.ts
    constructor(public app: RMM) {
    }

    ngOnInit() {
        this.app.account_storage.getUsage().subscribe(dataUsage => {
            const usageArray = [];
            Object.keys(dataUsage.result).forEach(key => usageArray.push(
diff --git a/src/app/account-security/sessions.component.ts b/src/app/account-security/sessions.component.ts
        this.rmm.me.load();
    }

    ngOnInit() {
        this.rmm.account_security.session.list();
    }
 }
diff --git a/src/app/actions/movemessage.action.ts b/src/app/actions/movemessage.action.ts
                <mat-list-item *ngFor="let fce of folderListEntries" (click)="moveMessages(fce.folderId)"
                    [style.paddingLeft.px]="fce.folderLevel*10"
                >
                <mat-icon *ngIf="fce.folderType=='inbox'" mat-list-icon class="folderIconStandard" svgIcon="inbox-arrow-down"></mat-icon>
                <mat-icon *ngIf="fce.folderType=='sent'" mat-list-icon class="folderIconStandard" svgIcon="send"></mat-icon>
                <mat-icon *ngIf="fce.folderType=='spam'" mat-list-icon class="folderIconStandard" svgIcon="cancel"></mat-icon>
                <mat-icon *ngIf="fce.folderType=='templates'" mat-list-icon class="folderIconStandard" svgIcon="file-document"></mat-icon>
	</p>
	</table>

	<div *ngIf="receipt.status == 1 && receipt.method === 'offline'">
Check warning on line 57 in src/app/account-app/account-receipt.component.html GitHub Actions / Run lint tests Expected `===` but received `==`
	<h3>
	Please follow the instructions for your selected payment method below.
	</h3>
	close_to_quota = [];
	close_percentage = 90;

	ngOnInit() {
Check warning on line 244 in src/app/account-app/account-renewals.component.ts GitHub Actions / Run lint tests `Lifecycle interface 'OnInit' should be implemented for method 'ngOnInit'. (https://angular.io/styleguide#style-09-01)`
	this.close_to_quota = this.check_close_quota();
	}
	<ng-container matColumnDef="expansionIndicator">
	<th mat-header-cell *matHeaderCellDef> </th>
	<td mat-cell *matCellDef="let t">
	<mat-icon *ngIf="t == expandedTransaction; else notExpanded" svgIcon="chevron-down"></mat-icon>
Check warning on line 43 in src/app/account-app/account-transactions.component.html GitHub Actions / Run lint tests Expected `===` but received `==`
	<ng-template #notExpanded>
	<mat-icon svgIcon="chevron-right"></mat-icon>
	</ng-template>
	</ng-container>
	<ng-container matColumnDef="expandedDetails">
	<td mat-cell *matCellDef="let t" [attr.colspan]="displayedColumns.length">
	<div class="expandedDetails" [@detailExpand]="t == expandedTransaction ? 'expanded' : 'collapsed'">
Check warning on line 59 in src/app/account-app/account-transactions.component.html GitHub Actions / Run lint tests Expected `===` but received `==`
	<!-- yo dawg, I heard you like tables -->
	<table class="detailsTable">
	<tr>
	`],
	template: `
	<ng-container><span #ref><ng-content select="[custom_template]"></ng-content></span></ng-container>
	<ng-container *ngIf="ref.childNodes.length == 0">
Check warning on line 37 in src/app/account-app/runbox-timer.ts GitHub Actions / Run lint tests Expected `===` but received `==`
	<span class="timeunit years" *ngIf="runningDuration.years() > 0">{{runningDuration.years()}} years,</span>
	<span class="timeunit months" *ngIf="runningDuration.months() > 0"> {{runningDuration.months()}} months,</span>
	<span class="timeunit days" *ngIf="runningDuration.days() > 0"> {{runningDuration.days()}} days,</span>

	constructor(public app: RMM) {}

	async ngOnInit() {
Check warning on line 46 in src/app/account-details/account-settings.component.ts GitHub Actions / Run lint tests `Lifecycle interface 'OnInit' should be implemented for method 'ngOnInit'. (https://angular.io/styleguide#style-09-01)`
	this.app.account_settings.load().subscribe((settings) => {
	Object.keys(settings.result).forEach((key) =>
	this.settingsArray.push({
	this.loadTimezones();
	}

	ngOnInit() {
Check warning on line 71 in src/app/account-details/personal-details.component.ts GitHub Actions / Run lint tests `Lifecycle interface 'OnInit' should be implemented for method 'ngOnInit'. (https://angular.io/styleguide#style-09-01)`
	if (!this.rmm.account_security.user_password) {
	this.show_modal_password();
	}
	constructor(public app: RMM) {
	}

	ngOnInit() {
Check warning on line 44 in src/app/account-details/storage-data.component.ts GitHub Actions / Run lint tests `Lifecycle interface 'OnInit' should be implemented for method 'ngOnInit'. (https://angular.io/styleguide#style-09-01)`
	this.app.account_storage.getUsage().subscribe(dataUsage => {
	const usageArray = [];
	Object.keys(dataUsage.result).forEach(key => usageArray.push(
	this.rmm.me.load();
	}

	ngOnInit() {
Check warning on line 41 in src/app/account-security/sessions.component.ts GitHub Actions / Run lint tests `Lifecycle interface 'OnInit' should be implemented for method 'ngOnInit'. (https://angular.io/styleguide#style-09-01)`
	this.rmm.account_security.session.list();
	}
	}
	<mat-list-item *ngFor="let fce of folderListEntries" (click)="moveMessages(fce.folderId)"
	[style.paddingLeft.px]="fce.folderLevel*10"
	>
	<mat-icon *ngIf="fce.folderType=='inbox'" mat-list-icon class="folderIconStandard" svgIcon="inbox-arrow-down"></mat-icon>
Check warning on line 33 in src/app/actions/movemessage.action.ts GitHub Actions / Run lint tests Expected `===` but received `==`
	<mat-icon *ngIf="fce.folderType=='sent'" mat-list-icon class="folderIconStandard" svgIcon="send"></mat-icon>
	<mat-icon *ngIf="fce.folderType=='spam'" mat-list-icon class="folderIconStandard" svgIcon="cancel"></mat-icon>
	<mat-icon *ngIf="fce.folderType=='templates'" mat-list-icon class="folderIconStandard" svgIcon="file-document"></mat-icon>