support rendering notification badge without the value #175

* so the badge doesn't change the size when the value gets bigger than 9 (1=>2 digits) and then bigger than 99 (2=>3 digits)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "electron-mail",
   "description": "Unofficial ProtonMail Desktop App",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "author": "Vladimir Yakovlev <desktop-app@protonmail.ch>",
   "license": "MIT",
   "homepage": "https://github.com/vladimiry/ElectronMail",

src/shared/model/options.ts

@@ -40,6 +40,7 @@ export interface Config extends BaseConfig, Partial<StoreModel.StoreEntity> {
     localDbMailsListViewMode: "plain" | "conversation";
     // base
     checkUpdateAndNotify: boolean;
+    doNotRenderNotificationBadgeValue: boolean;
     hideOnClose: boolean;
     layoutMode: (typeof import("src/shared/constants").LAYOUT_MODES)[number]["value"];
     customTrayIconColor: string;
@@ -58,6 +59,7 @@ export interface Config extends BaseConfig, Partial<StoreModel.StoreEntity> {
 }
 
 export type BaseConfig = Pick<Config,
+    | "doNotRenderNotificationBadgeValue"
     | "checkUpdateAndNotify"
     | "hideOnClose"
     | "layoutMode"

src/shared/util.ts

@@ -61,6 +61,7 @@ export function initialConfig(): Config {
             ],
             localDbMailsListViewMode: "plain",
             // base
+            doNotRenderNotificationBadgeValue: false,
             checkUpdateAndNotify: false,
             hideOnClose: true,
             layoutMode: "top",
@@ -83,6 +84,7 @@ export function initialConfig(): Config {
 
 export function pickBaseConfigProperties(
     {
+        doNotRenderNotificationBadgeValue,
         checkUpdateAndNotify,
         hideOnClose,
         layoutMode,
@@ -102,6 +104,7 @@ export function pickBaseConfigProperties(
     }: Config,
 ): Required<BaseConfig> {
     return {
+        doNotRenderNotificationBadgeValue,
         checkUpdateAndNotify,
         hideOnClose,
         layoutMode,

src/web/browser-window/app/_accounts/accounts.component.html

@@ -44,6 +44,7 @@
                 <electron-mail-unread-badge
                     *ngIf="unreadSummary && accounts.length > 1"
                     [value]="unreadSummary"
+                    [alwaysRenderTheValue]="true"
                 ></electron-mail-unread-badge>
             </div>
             <electron-mail-account-title

src/web/browser-window/app/_db-view/db-view-folder.component.html

@@ -5,6 +5,7 @@
 </div>
 <electron-mail-unread-badge
     *ngIf="folder.unread"
+    [alwaysRenderTheValue]="true"
     [value]="folder.unread"
     class="flex-grow-0 ml-1"
 ></electron-mail-unread-badge>

src/web/browser-window/app/_options/base-settings.component.html

@@ -29,6 +29,17 @@
                         <electron-mail-unread-badge
                             [value]="($unreadSummary | async) || 0"
                         ></electron-mail-unread-badge>
+                        <div class="custom-control custom-switch float-md-right">
+                            <input
+                                class="custom-control-input"
+                                formControlName="doNotRenderNotificationBadgeValue"
+                                id="doNotRenderNotificationBadgeValueCheckbox"
+                                type="checkbox"
+                            >
+                            <label class="custom-control-label" for="doNotRenderNotificationBadgeValueCheckbox">
+                                Don't render the value
+                            </label>
+                        </div>
                     </label>
                     <div class="row">
                         <div class="col-sm-6 pb-1">

src/web/browser-window/app/_options/base-settings.component.ts

@@ -43,6 +43,7 @@ export class BaseSettingsComponent implements OnInit, OnDestroy {
     readonly zoomFactors = ZOOM_FACTORS.map((zoomLevel) => ({value: zoomLevel, title: `${Math.round(zoomLevel * 100)}%`}));
 
     readonly controls: Record<keyof BaseConfig, AbstractControl> = {
+        doNotRenderNotificationBadgeValue: new FormControl(),
         checkUpdateAndNotify: new FormControl(),
         hideOnClose: new FormControl(),
         layoutMode: new FormControl(),

src/web/browser-window/app/_shared/unread-badge.component.html

@@ -1 +1,5 @@
-{{ value }}
+<ng-container *ngIf="!alwaysRenderTheValue && (doNotRenderNotificationBadgeValue$ | async); else renderTheValueTpl">
+    <span style="visibility: hidden;">0</span>
+</ng-container>
+
+<ng-template #renderTheValueTpl><span>{{ value }}</span></ng-template>

src/web/browser-window/app/_shared/unread-badge.component.scss

@@ -11,4 +11,8 @@
     text-align: center;
     white-space: nowrap;
     vertical-align: baseline;
+
+    &.do-not-render-value {
+        visibility: hidden;
+    }
 }

src/web/browser-window/app/_shared/unread-badge.component.ts

@@ -15,12 +15,17 @@ export class UnreadBadgeComponent implements OnInit, OnDestroy {
     @Input()
     value!: number;
 
-    subscription = new Subscription();
+    @Input()
+    alwaysRenderTheValue: boolean = false;
+
+    readonly doNotRenderNotificationBadgeValue$ = this.store.pipe(select(OptionsSelectors.CONFIG.doNotRenderNotificationBadgeValue));
+
+    private readonly subscription = new Subscription();
 
     constructor(
-        private store: Store<State>,
-        private elementRef: ElementRef,
-        private renderer: Renderer2,
+        private readonly store: Store<State>,
+        private readonly elementRef: ElementRef,
+        private readonly renderer: Renderer2,
     ) {}
 
     ngOnInit() {

src/web/browser-window/app/store/selectors/options.ts

@@ -28,6 +28,7 @@ export const CONFIG = {
     hideControls: createSelector(FEATURED.config, (config) => config.hideControls),
     timeouts: createSelector(FEATURED.config, (config) => config.timeouts),
     localDbMailsListViewMode: createSelector(FEATURED.config, (config) => config.localDbMailsListViewMode),
+    doNotRenderNotificationBadgeValue: createSelector(FEATURED.config, (config) => config.doNotRenderNotificationBadgeValue),
 };
 
 export const SETTINGS = (() => {