Add icons

frontend/src/app/features/in-app-notifications/center/menu/menu.component.ts

@@ -23,19 +23,38 @@ export const ianMenuSelector = 'op-ian-menu';
 })
 export class IanMenuComponent implements OnInit {
   baseMenuItems = [
-    { title: 'Inbox', href: this.getHrefForFilters({}) },
-    { title: 'Flagged', href: this.getHrefForFilters({}) },
-    { title: 'My Comments', href: this.getHrefForFilters({}) },
+    {
+      title: 'Inbox',
+      icon: 'inbox',
+      href: this.getHrefForFilters({}),
+    },
   ];
 
   reasonMenuItems = [
-    { key: 'mentioned', title: '@mentioned', href: this.getHrefForFilters({ filter: 'reason', name: 'mentioned' }) },
-    { key: 'involved', title: 'Involved', href: this.getHrefForFilters({ filter: 'reason', name: 'involved'  }) },
-    { key: 'watched', title: 'Watched', href: this.getHrefForFilters({ filter: 'reason', name: 'watched'  }) },
-    { key: 'created', title: 'Created', href: this.getHrefForFilters({ filter: 'reason', name: 'created'  }) },
-    { key: 'assigned', title: 'Assigned', href: this.getHrefForFilters({ filter: 'reason', name: 'assigned'  }) },
-    { key: 'accountable', title: 'Accountable', href: this.getHrefForFilters({ filter: 'reason', name: 'accountable'  }) },
-    { key: 'commented', title: 'Commented', href: this.getHrefForFilters({ filter: 'reason', name: 'commented'  }) },
+    {
+      key: 'mentioned',
+      title: '@mentioned',
+      icon: 'mention',
+      href: this.getHrefForFilters({ filter: 'reason', name: 'mentioned' }),
+    },
+    {
+      key: 'assigned',
+      title: 'Assigned',
+      icon: 'assigned',
+      href: this.getHrefForFilters({ filter: 'reason', name: 'assigned'  }),
+    },
+    {
+      key: 'accountable',
+      title: 'Accountable',
+      icon: 'accountable',
+      href: this.getHrefForFilters({ filter: 'reason', name: 'accountable'  }),
+    },
+    {
+      key: 'watched',
+      title: 'Watching',
+      icon: 'watching',
+      href: this.getHrefForFilters({ filter: 'reason', name: 'watched'  }),
+    },
   ];
 
   notificationsByProject$ = this.ianMenuService.query.notificationsByProject$.pipe(

frontend/src/app/features/in-app-notifications/center/menu/state/ian-menu.query.ts

@@ -1,5 +1,4 @@
 import { Query } from '@datorama/akita';
-import { combineLatestWith } from 'rxjs/operators';
 import { InAppNotificationsResourceService } from 'core-app/core/state/in-app-notifications/in-app-notifications.service';
 import { ProjectsResourceService } from 'core-app/core/state/projects/projects.service';
 import { InAppNotification } from 'core-app/core/state/in-app-notifications/in-app-notification.model';

frontend/src/app/features/in-app-notifications/center/menu/state/ian-menu.service.ts

@@ -13,7 +13,7 @@ import {
 } from 'core-app/core/state/effects/effect-handler.decorator';
 import { ActionsService } from 'core-app/core/state/actions/actions.service';
 import { APIV3Service } from 'core-app/core/apiv3/api-v3.service';
-import idFromLink from 'core-app/features/hal/helpers/id-from-link';
+// import idFromLink from 'core-app/features/hal/helpers/id-from-link';
 import { InAppNotificationsResourceService } from 'core-app/core/state/in-app-notifications/in-app-notifications.service';
 import { ProjectsResourceService } from 'core-app/core/state/projects/projects.service';
 import { IanMenuQuery } from './ian-menu.query';
@@ -53,10 +53,12 @@ export class IanMenuService {
     this.ianResourceService.fetchNotifications(IAN_MENU_PROJECT_FILTERS)
       .subscribe((data) => {
         this.store.update({ notificationsByProject: data.groups });
+        /*
         this.projectsResourceService.fetchProjects({
           pageSize: 100,
           filters: [['id', '=', data.groups!.map(group => idFromLink(group._links.valueLink[0].href))]],
         }).subscribe();
+        */
       });
     this.ianResourceService.fetchNotifications(IAN_MENU_REASON_FILTERS)
       .subscribe((data) => this.store.update({ notificationsByReason: data.groups }));

frontend/src/app/shared/components/sidemenu/sidemenu.component.html

@@ -25,6 +25,7 @@
       <span
         *ngIf="item.icon"
         class="op-sidemenu--item-icon"
+        [class]="'icon-' + item.icon"
       ></span>
       <span class="op-sidemenu--item-title">{{ item.title }}</span>
       <span class="op-bubble" *ngIf="item.count">{{ item.count }}</span>

frontend/src/app/shared/components/sidemenu/sidemenu.component.sass

@@ -43,4 +43,8 @@
     line-height: 30px
     text-decoration: none
 
+  &--item-icon
+    font-size: 24px
+    margin-right: 8px
+
   &_collapsed

frontend/src/global_styles/fonts/_openproject_icon_font.lsg

@@ -4,6 +4,7 @@
 
 <ul class="icon-list">
 <li><span class="icon icon-accessibility"></span>accessibility</li>
+<li><span class="icon icon-accountable"></span>accountable</li>
 <li><span class="icon icon-add"></span>add</li>
 <li><span class="icon icon-align-center"></span>align-center</li>
 <li><span class="icon icon-align-justify"></span>align-justify</li>
@@ -26,6 +27,7 @@
 <li><span class="icon icon-arrow-up1"></span>arrow-up1</li>
 <li><span class="icon icon-arrow-up2"></span>arrow-up2</li>
 <li><span class="icon icon-assigned-to-me"></span>assigned-to-me</li>
+<li><span class="icon icon-assigned"></span>assigned</li>
 <li><span class="icon icon-attachment"></span>attachment</li>
 <li><span class="icon icon-attention"></span>attention</li>
 <li><span class="icon icon-back-up"></span>back-up</li>
@@ -124,6 +126,7 @@
 <li><span class="icon icon-image1"></span>image1</li>
 <li><span class="icon icon-image2"></span>image2</li>
 <li><span class="icon icon-import"></span>import</li>
+<li><span class="icon icon-inbox"></span>inbox</li>
 <li><span class="icon icon-info1"></span>info1</li>
 <li><span class="icon icon-info2"></span>info2</li>
 <li><span class="icon icon-input-disabled"></span>input-disabled</li>
@@ -142,6 +145,7 @@
 <li><span class="icon icon-mark-all-read"></span>mark-all-read</li>
 <li><span class="icon icon-mark-read"></span>mark-read</li>
 <li><span class="icon icon-meetings"></span>meetings</li>
+<li><span class="icon icon-mention"></span>mention</li>
 <li><span class="icon icon-menu"></span>menu</li>
 <li><span class="icon icon-merge-branch"></span>merge-branch</li>
 <li><span class="icon icon-microphone"></span>microphone</li>
@@ -255,6 +259,7 @@
 <li><span class="icon icon-view-timeline"></span>view-timeline</li>
 <li><span class="icon icon-warning"></span>warning</li>
 <li><span class="icon icon-watched"></span>watched</li>
+<li><span class="icon icon-watching"></span>watching</li>
 <li><span class="icon icon-wiki-edit"></span>wiki-edit</li>
 <li><span class="icon icon-wiki"></span>wiki</li>
 <li><span class="icon icon-wiki2"></span>wiki2</li>

nix/shell.nix

@@ -24,6 +24,7 @@ in
       gems
 
       op-get-test-failures
+      nodePackages.webfonts-generator
     ];
 
     CHROME_BINARY = "${google-chrome}/bin/google-chrome";

package.json

@@ -12,5 +12,8 @@
   "engines": {
     "node": "~14.17.0",
     "npm": "~6.14.13"
+  },
+  "devDependencies": {
+    "webfonts-generator": "^0.4.0"
   }
 }

vendor/openproject-icon-font/src/accountable.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2 9.0625C11.2 10.4113 10.128 11.5 8.8 11.5C7.472 11.5 6.4 10.4113 6.4 9.0625C6.4 7.71375 7.472 6.625 8.8 6.625C10.128 6.625 11.2 7.71375 11.2 9.0625ZM13.6 18H4V16.375C4 14.5794 6.152 13.125 8.8 13.125C11.448 13.125 13.6 14.5794 13.6 16.375V18ZM20 11.5V13.125H12.8V11.5H20ZM20 8.25V9.875H12.8V8.25H20ZM20 5V6.625H12.8V5H20Z" fill="black"/>
+</svg>

vendor/openproject-icon-font/src/assigned.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.1724 11.0138C13.0018 11.0138 14.4848 9.44374 14.4848 7.50692C14.4848 5.5701 13.0018 4 11.1724 4C9.34304 4 7.86005 5.5701 7.86005 7.50692C7.86005 9.44374 9.34304 11.0138 11.1724 11.0138Z" fill="black"/>
+<path d="M8.25889 15.8957C8.26899 15.6108 8.35866 15.3354 8.51656 15.1045C8.67446 14.8735 8.89349 14.6972 9.14597 14.598C9.39845 14.4988 9.67305 14.4811 9.93504 14.5471C10.197 14.6131 10.4347 14.7598 10.6179 14.9688L12.4954 17.1059L15.8224 13.1767C14.4481 12.2071 12.8286 11.7008 11.1773 11.7245C10.0317 11.6938 8.89378 11.9292 7.84338 12.4141C6.79298 12.899 5.85566 13.6215 5.0973 14.5311C5.03315 14.6216 4.99896 14.732 5.00002 14.8452V17.6209C4.99991 17.8887 5.09838 18.1461 5.27455 18.3384C5.45072 18.5307 5.69072 18.6428 5.94363 18.6508H10.1121L8.61882 16.9514C8.49544 16.8097 8.40005 16.6433 8.33824 16.462C8.27644 16.2807 8.24945 16.0882 8.25889 15.8957Z" fill="black"/>
+<path d="M16.4109 18.6508C16.6638 18.6428 16.9038 18.5307 17.08 18.3384C17.2562 18.1461 17.3546 17.8887 17.3545 17.6209V15.6846L14.8593 18.6508H16.4109Z" fill="black"/>
+<path d="M18.8478 11.7605C18.8 11.7149 18.7442 11.6797 18.6835 11.657C18.6229 11.6343 18.5585 11.6246 18.4943 11.6285C18.4301 11.6323 18.3672 11.6496 18.3093 11.6793C18.2514 11.7091 18.1997 11.7507 18.1571 11.8017L12.5051 18.4963L9.97587 15.6176C9.93436 15.5662 9.88369 15.524 9.82675 15.4933C9.76981 15.4627 9.70773 15.4442 9.64405 15.4389C9.58036 15.4337 9.51632 15.4417 9.45558 15.4627C9.39484 15.4836 9.3386 15.517 9.29005 15.561C9.24447 15.6089 9.20828 15.6658 9.18359 15.7286C9.15889 15.7913 9.14618 15.8586 9.14618 15.9266C9.14618 15.9946 9.15889 16.0619 9.18359 16.1247C9.20828 16.1874 9.24447 16.2444 9.29005 16.2922L12.5392 20L18.8818 12.4712C18.9636 12.3709 19.0057 12.241 18.9994 12.1086C18.993 11.9763 18.9387 11.8516 18.8478 11.7605Z" fill="black"/>
+</svg>

vendor/openproject-icon-font/src/inbox.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 7.42857C4 6.51926 4.36122 5.64719 5.00421 5.00421C5.64719 4.36122 6.51926 4 7.42857 4H16.5714C17.4807 4 18.3528 4.36122 18.9958 5.00421C19.6388 5.64719 20 6.51926 20 7.42857V16.5714C20 17.4807 19.6388 18.3528 18.9958 18.9958C18.3528 19.6388 17.4807 20 16.5714 20H7.42857C6.51926 20 5.64719 19.6388 5.00421 18.9958C4.36122 18.3528 4 17.4807 4 16.5714V7.42857ZM5.14286 12H9.14286C9.29441 12 9.43975 12.0602 9.54692 12.1674C9.65408 12.2745 9.71429 12.4199 9.71429 12.5714V12.584L9.71886 12.6526C9.74488 13.0319 9.84424 13.4025 10.0114 13.744C10.1554 14.0343 10.3634 14.3063 10.6651 14.5063C10.9623 14.7051 11.3851 14.8571 12 14.8571C12.6137 14.8571 13.0366 14.7051 13.3349 14.5063C13.6366 14.3063 13.8446 14.0343 13.9886 13.744C14.1662 13.3818 14.2674 12.987 14.2857 12.584V12.5691C14.2863 12.418 14.3468 12.2732 14.4539 12.1666C14.561 12.0599 14.706 12 14.8571 12H18.8571V7.42857C18.8571 6.82236 18.6163 6.24098 18.1877 5.81233C17.759 5.38367 17.1776 5.14286 16.5714 5.14286H7.42857C6.82236 5.14286 6.24098 5.38367 5.81233 5.81233C5.38367 6.24098 5.14286 6.82236 5.14286 7.42857V12Z" fill="black"/>
+</svg>

vendor/openproject-icon-font/src/mention.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10.0444C10.92 10.0444 10.0444 10.92 10.0444 12C10.0444 13.08 10.92 13.9556 12 13.9556C13.08 13.9556 13.9556 13.08 13.9556 12C13.9556 10.92 13.08 10.0444 12 10.0444ZM8.26666 12C8.26666 9.93814 9.93813 8.26667 12 8.26667C14.0619 8.26667 15.7333 9.93814 15.7333 12C15.7333 14.0619 14.0619 15.7333 12 15.7333C9.93813 15.7333 8.26666 14.0619 8.26666 12Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 12C4 7.58161 7.58161 4 12 4C16.4184 4 20 7.58161 20 12C20 12.4909 19.602 12.8889 19.1111 12.8889C18.6202 12.8889 18.2222 12.4909 18.2222 12C18.2222 8.56345 15.4365 5.77778 12 5.77778C8.56345 5.77778 5.77778 8.56345 5.77778 12C5.77778 15.4365 8.56345 18.2222 12 18.2222C13.4024 18.2222 14.6938 17.7596 15.7333 16.9783C16.1257 16.6834 16.683 16.7624 16.9779 17.1548C17.2729 17.5472 17.1939 18.1045 16.8015 18.3994C15.4644 19.4045 13.8005 20 12 20C7.58161 20 4 16.4184 4 12Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8445 8.26667C15.3354 8.26667 15.7333 8.66464 15.7333 9.15556V12C15.7333 12.2133 15.8047 12.5531 15.9925 12.814C16.1477 13.0295 16.4142 13.2444 16.9778 13.2444C17.5414 13.2444 17.8079 13.0295 17.9631 12.814C18.1509 12.5531 18.2222 12.2133 18.2222 12C18.2222 11.5091 18.6202 11.1111 19.1111 11.1111C19.602 11.1111 20 11.5091 20 12C20 12.4978 19.858 13.2247 19.4058 13.8527C18.921 14.526 18.1208 15.0222 16.9778 15.0222C15.8347 15.0222 15.0346 14.526 14.5498 13.8527C14.0976 13.2247 13.9556 12.4978 13.9556 12V9.15556C13.9556 8.66464 14.3535 8.26667 14.8445 8.26667Z" fill="black"/>
+</svg>

vendor/openproject-icon-font/src/watching.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 7C6.7512 7 4 10.8829 4 11.5C4 12.1155 6.7512 16 12 16C17.248 16 20 12.1155 20 11.5C20 10.8829 17.248 7 12 7ZM12 14.961C10.036 14.961 8.444 13.4117 8.444 11.5C8.444 9.5883 10.036 8.03741 12 8.03741C13.964 8.03741 15.5552 9.5883 15.5552 11.5C15.5552 13.4117 13.964 14.961 12 14.961ZM12 11.5C11.6744 11.1408 12.5304 9.76911 12 9.76911C11.0176 9.76911 10.2216 10.5446 10.2216 11.5C10.2216 12.4554 11.0176 13.2309 12 13.2309C12.9816 13.2309 13.7784 12.4554 13.7784 11.5C13.7784 11.0604 12.2768 11.8046 12 11.5Z" fill="black"/>
+</svg>