Merge pull request #6 from gtandersen/castaway/1509_index_sync_modal

style(install): Adjust indexing prompt for mobile screens.
gtandersen · Apr 3, 2024 · 0989d38 · 0989d38
2 parents 4318dde + 68d64b6
commit 0989d38
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/e2e/cypress/integration/login.ts b/e2e/cypress/integration/login.ts
@@ -3,7 +3,7 @@
 describe('Login', () => {
     function expectLoginPage() {
         cy.visit('/');
-        cy.get('#loginHeader h1').should('contain', 'Runbox 7');
+        cy.get('#loginHeader h1').should('contain', 'Runbox');
     }
 
     function enterCredentials() {
@@ -18,7 +18,7 @@ describe('Login', () => {
 
     function expectWebmail() {
         cy.get('#sidenavGreeting').should('contain', '[email protected]');
-        cy.get('#offerLocalIndex').should('contain', 'Runbox 7');
+        cy.get('#offerLocalIndex').should('contain', 'Runbox');
         cy.get('#offerLocalIndex mat-list-item button[data-cy="cancel-button"]').click().should(() => {
           expect(JSON.parse(localStorage.getItem('221:Desktop:localSearchPromptDisplayed'))).to.equal('true');
         });

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -180,17 +180,16 @@ <h3 class="noMessageSelectedNotification">No Message Selected</h3>
 
       <ng-container *ngIf="!hasChildRouterOutlet">
         <div id="offerLocalIndex" *ngIf="offerInitialLocalIndex; else searchBar">
-          <p>
-            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 *ngIf="!mobileQuery.matches">
+            Runbox will now 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. <a href="https://help.runbox.com/runbox-7-webmail-new-features/#Synchronized_account_index" target="help">What's this?</a>
+          </p>
+          <p *ngIf="mobileQuery.matches">
+            Runbox will now synchronize with your device. <a href="https://help.runbox.com/runbox-7-webmail-new-features/#Synchronized_account_index" target="help">What's this?</a>
           </p>
           <mat-list>
           <mat-list-item>
-            <button mat-raised-button (click)="downloadIndexFromServer()" matTooltip="Synchronize index with your device" color="primary" [disabled]="searchService.indexDownloadingInProgress">
-              OK!
-            </button>
-            <button mat-raised-button (click)="cancelOrRefuseLocalIndex()" matTooltip="{{ searchService.indexDownloadingInProgress ? 'Cancel Download' : 'Do not synchronize index'}}" data-cy="cancel-button" color="warn">
-              Later
-            </button>
+            <button mat-raised-button (click)="downloadIndexFromServer()" matTooltip="Synchronize index with your device" color="primary" [disabled]="searchService.indexDownloadingInProgress">OK!</button>
+            <button mat-raised-button (click)="cancelOrRefuseLocalIndex()" matTooltip="{{ searchService.indexDownloadingInProgress ? 'Cancel Download' : 'Do not synchronize index'}}" data-cy="cancel-button" color="warn">Later</button>
           </mat-list-item>
           </mat-list>
         </div>

diff --git a/src/styles.scss b/src/styles.scss
@@ -944,14 +944,24 @@ app-saved-searches .mat-list-base[dense] .mat-list-item {
     line-height: 1em;
 
     mat-list-item {
-        flex-grow: 1;
+        padding: 5px 0;
     }
 
     button {
         margin-right: 10px;
+
+        @media(max-width: 540px) {
+            margin-right: 2px;
+            height: 30px;
+            line-height: 20px;
+        }
     }
 }
 
+#offerLocalIndex .mat-list-item-content {
+    padding: 0 5px;
+}    
+
 #searchField {
     flex-grow: 10;
     margin: 0px 10px 0 10px;