From 2f1548fda32c3ba9e53913270394eedfacd55986 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Tue, 8 Jan 2019 11:26:41 +0100
Subject: Add notifications in the client

---
 .../my-account-notifications.component.html        |  7 +++++++
 .../my-account-notifications.component.scss        | 23 ++++++++++++++++++++++
 .../my-account-notifications.component.ts          | 14 +++++++++++++
 3 files changed, 44 insertions(+)
 create mode 100644 client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
 create mode 100644 client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
 create mode 100644 client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts

(limited to 'client/src/app/+my-account/my-account-notifications')

diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
new file mode 100644
index 000000000..d2810c343
--- /dev/null
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
@@ -0,0 +1,7 @@
+<div class="header">
+  <a routerLink="/my-account/settings" i18n>Notification preferences</a>
+
+  <button (click)="markAllAsRead()" i18n>Mark all as read</button>
+</div>
+
+<my-user-notifications #userNotification></my-user-notifications>
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
new file mode 100644
index 000000000..86ac094c5
--- /dev/null
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
@@ -0,0 +1,23 @@
+@import '_variables';
+@import '_mixins';
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  font-size: 15px;
+  margin-bottom: 10px;
+
+  a {
+    @include peertube-button-link;
+    @include grey-button;
+  }
+
+  button {
+    @include peertube-button;
+    @include grey-button;
+  }
+}
+
+my-user-notifications {
+  font-size: 15px;
+}
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
new file mode 100644
index 000000000..3e197088d
--- /dev/null
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
@@ -0,0 +1,14 @@
+import { Component, ViewChild } from '@angular/core'
+import { UserNotificationsComponent } from '@app/shared'
+
+@Component({
+  templateUrl: './my-account-notifications.component.html',
+  styleUrls: [ './my-account-notifications.component.scss' ]
+})
+export class MyAccountNotificationsComponent {
+  @ViewChild('userNotification') userNotification: UserNotificationsComponent
+
+  markAllAsRead () {
+    this.userNotification.markAllAsRead()
+  }
+}
-- 
cgit v1.2.3


From 07a982363fcc6f838dd3f5c2039a2affaea3b0b2 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Tue, 8 Jan 2019 15:06:58 +0100
Subject: Correctly scroll in notification preferences

---
 .../my-account-notifications/my-account-notifications.component.html    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'client/src/app/+my-account/my-account-notifications')

diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
index d2810c343..b98a1087e 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
@@ -1,5 +1,5 @@
 <div class="header">
-  <a routerLink="/my-account/settings" i18n>Notification preferences</a>
+  <a routerLink="/my-account/settings" fragment="notifications" i18n>Notification preferences</a>
 
   <button (click)="markAllAsRead()" i18n>Mark all as read</button>
 </div>
-- 
cgit v1.2.3


From 457bb213b273a9b206cc5654eb085cede4e916ad Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 16 Jan 2019 16:05:40 +0100
Subject: Refactor how we use icons

Inject them in an angular component so we can easily change their color
---
 .../my-account-notifications.component.html                    | 10 ++++++++--
 .../my-account-notifications.component.scss                    |  4 +++-
 2 files changed, 11 insertions(+), 3 deletions(-)

(limited to 'client/src/app/+my-account/my-account-notifications')

diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
index b98a1087e..d518b22ec 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
@@ -1,7 +1,13 @@
 <div class="header">
-  <a routerLink="/my-account/settings" fragment="notifications" i18n>Notification preferences</a>
+  <a routerLink="/my-account/settings" fragment="notifications" i18n>
+    <my-global-icon iconName="cog"></my-global-icon>
+    Notification preferences
+  </a>
 
-  <button (click)="markAllAsRead()" i18n>Mark all as read</button>
+  <button (click)="markAllAsRead()" i18n>
+    <my-global-icon iconName="circle-tick"></my-global-icon>
+    Mark all as read
+  </button>
 </div>
 
 <my-user-notifications #userNotification></my-user-notifications>
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
index 86ac094c5..43d1f82ab 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
@@ -5,16 +5,18 @@
   display: flex;
   justify-content: space-between;
   font-size: 15px;
-  margin-bottom: 10px;
+  margin-bottom: 20px;
 
   a {
     @include peertube-button-link;
     @include grey-button;
+    @include button-with-icon(18px, 3px, -1px);
   }
 
   button {
     @include peertube-button;
     @include grey-button;
+    @include button-with-icon(20px, 3px, -1px);
   }
 }
 
-- 
cgit v1.2.3