diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 57498e98c..367258a06 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -25,15 +25,17 @@
-
+ >
{{ subscribersDisplayFor(naiveAggregatedSubscribers) }}
-
+
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index ab3aece54..a06f04055 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -9,10 +9,21 @@
}
}
-my-subscribe-button {
+.right-buttons {
+ display: flex;
height: max-content;
margin-left: auto;
margin-top: 20px;
+
+ a {
+ @include peertube-button-outline;
+ height: auto;
+ line-height: 32px;
+ }
+
+ my-subscribe-button {
+ height: min-content;
+ }
}
my-user-moderation-dropdown,
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts
index da4a0b28e..3d486f084 100644
--- a/client/src/app/+accounts/accounts.component.ts
+++ b/client/src/app/+accounts/accounts.component.ts
@@ -65,6 +65,11 @@ export class AccountsComponent implements OnInit, OnDestroy {
)
}
+ get isManageable () {
+ if (!this.authService.isLoggedIn()) return false
+ return this.user.id === this.authService.getUser().id
+ }
+
onUserChanged () {
this.getUserIfNeeded(this.account)
}
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
index 878772359..49bf834c4 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
@@ -1,3 +1,7 @@
+
+
Playlists {{ pagination.totalItems }}
+
+
-
+
{{ videoChannel.followersCount }} subscribers
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index d29575027..50b69e7ac 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -17,4 +17,20 @@
margin-top: -2px;
}
}
+}
+
+.right-buttons {
+ display: flex;
+ height: max-content;
+ margin-left: auto;
+ margin-top: 20px;
+
+ a {
+ @include peertube-button-outline;
+ line-height: 1.8;
+ }
+
+ my-subscribe-button {
+ height: min-content;
+ }
}
\ No newline at end of file
diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts
index 5ef46c58a..493a6d499 100644
--- a/client/src/app/+video-channels/video-channels.component.ts
+++ b/client/src/app/+video-channels/video-channels.component.ts
@@ -64,6 +64,11 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
return this.authService.isLoggedIn()
}
+ get isManageable () {
+ if (!this.isUserLoggedIn()) return false
+ return this.videoChannel.ownerAccount.userId === this.authService.getUser().id
+ }
+
activateCopiedMessage () {
this.notifier.success(this.i18n('Username copied'))
}
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 9877a07d5..5dacdd73b 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -26,6 +26,7 @@ body {
--mainHoverColor: #{$orange-hover-color};
--mainBackgroundColor: #{$bg-color};
--mainForegroundColor: #{$fg-color};
+ --secondaryColor: #{$cyan-color};
--menuBackgroundColor: #{$menu-background};
--menuForegroundColor: #{$menu-color};
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index dc0d075c9..fca116701 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -170,3 +170,13 @@ ngb-tabset.bootstrap {
ngb-modal-backdrop {
z-index: 10000 !important;
}
+
+.btn-outline-tertiary {
+ color: var(--secondaryColor);
+ border-color: var(--secondaryColor);
+
+ &:hover {
+ color: var(--mainBackgroundColor);
+ background-color: var(--secondaryColor);
+ }
+}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 099a909bb..136eddd3a 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -179,6 +179,15 @@
@include peertube-button;
}
+@mixin peertube-button-outline {
+ display: inline-block;
+
+ @include disable-default-a-behaviour;
+ @include peertube-button;
+
+ border: 1px solid;
+}
+
@mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
my-global-icon {
position: relative;
@@ -453,7 +462,7 @@
}
@mixin sub-menu-with-actor {
- height: 160px;
+ height: max-content;
display: flex;
flex-direction: column;
align-items: flex-start;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 6dededb0e..5b5ac9adc 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -14,6 +14,8 @@ $grey-foreground-hover-color: #303030;
$orange-color: #F1680D;
$orange-hover-color: #F97D46;
+$cyan-color: hsl(187, 77%, 34%);
+
$support-button: inherit;
$support-button-heart: #e83e8c;
@@ -73,6 +75,7 @@ $variables: (
--mainHoverColor: var(--mainHoverColor),
--mainBackgroundColor: var(--mainBackgroundColor),
--mainForegroundColor: var(--mainForegroundColor),
+ --secondaryColor: var(--secondaryColor),
--menuBackgroundColor: var(--menuBackgroundColor),
--menuForegroundColor: var(--menuForegroundColor),