Skip to content

Commit

Permalink
style(install): Widen sync buttons on mobile and center sync message.
Browse files Browse the repository at this point in the history
  • Loading branch information
@gtandersen
gtandersen committed Jun 17, 2024
1 parent f671b8e commit c5898f8
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 69 deletions.
136 changes: 68 additions & 68 deletions src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,12 +187,15 @@ <h3 class="noMessageSelectedNotification">No Message Selected</h3>
Runbox will now synchronize with your device. <a href="https://help.runbox.com/runbox-7-webmail-new-features/#Synchronized_account_index" target="help" matTooltip="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">Cancel</button>
</mat-list-item>
<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">Cancel</button>
</mat-list-item>
</mat-list>
</div>
<div *ngIf="searchService.downloadProgress!==null" id="syncMessage">
Synchronizing account index
</div>
<ng-template #searchBar>
<mat-form-field id="searchField" floatLabel="auto"
*ngIf="searchService.downloadProgress===null">
Expand Down Expand Up @@ -310,72 +313,69 @@ <h3 class="noMessageSelectedNotification">No Message Selected</h3>
<span>Report as spam</span>
</button>
<button *ngIf="morelistbuttonindex<8 && selectedFolder===messagelistservice.spamFolderName" mat-menu-item (click)="trainSpam({is_spam:0})">
<mat-icon svgIcon="alert-octagon-outline"></mat-icon>
<span>Report as not spam</span>
</button>
</mat-menu>
</div>

<mat-menu #tableViewOptionsMenu="matMenu">
<mat-list>
<mat-list-item>
<mat-checkbox
*ngIf="canvastable"
[(ngModel)]="canvastable.showContentTextPreview"
matLine
(change)="saveContentPreviewSetting()"
(click)="$event.stopPropagation()"
class="tableViewOptionsMenuElement"
>
<mat-icon svgIcon="view-list" class="tableViewOptionsMenuElement" matTooltip="Inline message previews"></mat-icon>
Inline previews
</mat-checkbox>
</mat-list-item>
<!-- currently only supporting threading for local index -->
<mat-list-item>
<mat-checkbox [(ngModel)]="conversationGroupingCheckbox"
matLine
(change)="updateViewMode($event.source.checked ? 'conversations' : 'messages')"
(click)="$event.stopPropagation()"
[disabled]="unreadMessagesOnlyCheckbox || !showingSearchResults"
class="tableViewOptionsMenuElement"
>
<mat-icon svgIcon="format-align-right" class="tableViewOptionsMenuElement" [matTooltip]="conversationGroupingToolTip"></mat-icon>
Threaded view
</mat-checkbox>
</mat-list-item>
<mat-list-item>
<mat-checkbox [(ngModel)]="unreadMessagesOnlyCheckbox"
matLine
(change)="updateSearch(true)"
(click)="$event.stopPropagation()"
[disabled]="viewmode==='conversations'"
class="tableViewOptionsMenuElement"
>
<mat-icon svgIcon="email-open" class="tableViewOptionsMenuElement" [matTooltip]="unreadOnlyToolTip"></mat-icon>
Unread only
</mat-checkbox>
</mat-list-item>
<mat-icon svgIcon="alert-octagon-outline"></mat-icon>
<span>Report as not spam</span>
</button>
</mat-menu>
</div>

<mat-list-item *ngIf="!mobileQuery.matches">
<mat-checkbox [(ngModel)]="keepMessagePaneOpen"
matLine
(change)="saveMessagePaneSetting()"
(click)="$event.stopPropagation()"
>
<mat-icon svgIcon="book-open" class="tableViewOptionsMenuElement" matTooltip="Keep preview pane open"></mat-icon>
Keep preview pane open
</mat-checkbox>
</mat-list-item>
</mat-list>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="tableViewOptionsMenu" matTooltip="Show view options">
<mat-icon svgIcon="view-dashboard"></mat-icon>
</button>
<mat-menu #tableViewOptionsMenu="matMenu">
<mat-list>
<mat-list-item>
<mat-checkbox
*ngIf="canvastable"
[(ngModel)]="canvastable.showContentTextPreview"
matLine
(change)="saveContentPreviewSetting()"
(click)="$event.stopPropagation()"
class="tableViewOptionsMenuElement"
>
<mat-icon svgIcon="view-list" class="tableViewOptionsMenuElement" matTooltip="Inline message previews"></mat-icon>
Inline previews
</mat-checkbox>
</mat-list-item>
<!-- currently only supporting threading for local index -->
<mat-list-item>
<mat-checkbox [(ngModel)]="conversationGroupingCheckbox"
matLine
(change)="updateViewMode($event.source.checked ? 'conversations' : 'messages')"
(click)="$event.stopPropagation()"
[disabled]="unreadMessagesOnlyCheckbox || !showingSearchResults"
class="tableViewOptionsMenuElement"
>
<mat-icon svgIcon="format-align-right" class="tableViewOptionsMenuElement" [matTooltip]="conversationGroupingToolTip"></mat-icon>
Threaded view
</mat-checkbox>
</mat-list-item>
<mat-list-item>
<mat-checkbox [(ngModel)]="unreadMessagesOnlyCheckbox"
matLine
(change)="updateSearch(true)"
(click)="$event.stopPropagation()"
[disabled]="viewmode==='conversations'"
class="tableViewOptionsMenuElement"
>
<mat-icon svgIcon="email-open" class="tableViewOptionsMenuElement" [matTooltip]="unreadOnlyToolTip"></mat-icon>
Unread only
</mat-checkbox>
</mat-list-item>

<mat-list-item *ngIf="!mobileQuery.matches">
<mat-checkbox [(ngModel)]="keepMessagePaneOpen"
matLine
(change)="saveMessagePaneSetting()"
(click)="$event.stopPropagation()"
>
<mat-icon svgIcon="book-open" class="tableViewOptionsMenuElement" matTooltip="Keep preview pane open"></mat-icon>
Keep preview pane open
</mat-checkbox>
</mat-list-item>
</mat-list>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="tableViewOptionsMenu" matTooltip="Show view options">
<mat-icon svgIcon="view-dashboard"></mat-icon>
</button>
</ng-container>
<div *ngIf="searchService.downloadProgress!==null" id="syncMessage">
Synchronizing account index
</div>
</mat-toolbar>
<mat-progress-bar *ngIf="searchService.downloadProgress!==null"
[mode]="searchService.downloadProgress===0 ? 'indeterminate' : 'determinate'"
Expand Down
3 changes: 2 additions & 1 deletion src/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -960,7 +960,7 @@ app-saved-searches .mat-list-base[dense] .mat-list-item {
height: 30px;
line-height: 20px;
width: 40px;
min-width: 40px;
min-width: 55px;
padding: 0;
}
}
Expand Down Expand Up @@ -1054,6 +1054,7 @@ app-saved-searches .mat-list-base[dense] .mat-list-item {
}

#syncMessage {
width: 100%;
margin-top: 20px;
flex-grow: 1;
text-align: center;
Expand Down

0 comments on commit c5898f8

Please sign in to comment.