mirror of https://github.com/Chocobozzz/PeerTube
Add manage buttons for own channels and account, video counts (#2421)
* Add manage buttons for own channels and account, video counts * Change manage button color and introduce secondary color
This commit is contained in:
parent
a56053a2a4
commit
aa0f19635a
|
@ -25,15 +25,17 @@
|
||||||
<my-user-moderation-dropdown
|
<my-user-moderation-dropdown
|
||||||
buttonSize="small" [account]="account" [user]="user" placement="bottom-right auto"
|
buttonSize="small" [account]="account" [user]="user" placement="bottom-right auto"
|
||||||
(userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()"
|
(userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()"
|
||||||
>
|
></my-user-moderation-dropdown>
|
||||||
</my-user-moderation-dropdown>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="actor-followers" i18n-title [title]="subscribersDisplayFor(account.followersCount) + ' to the account actor'">
|
<div class="actor-followers" i18n-title [title]="subscribersDisplayFor(account.followersCount) + ' to the account actor'">
|
||||||
{{ subscribersDisplayFor(naiveAggregatedSubscribers) }}
|
{{ subscribersDisplayFor(naiveAggregatedSubscribers) }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<my-subscribe-button *ngIf="videoChannels" [account]="account" [videoChannels]="videoChannels"></my-subscribe-button>
|
<div class="right-buttons">
|
||||||
|
<a *ngIf="isManageable" routerLink="/my-account" class="btn btn-outline-tertiary mr-2" i18n>Manage</a>
|
||||||
|
<my-subscribe-button *ngIf="videoChannels" [account]="account" [videoChannels]="videoChannels"></my-subscribe-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="links">
|
<div class="links">
|
||||||
|
|
|
@ -9,10 +9,21 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
my-subscribe-button {
|
.right-buttons {
|
||||||
|
display: flex;
|
||||||
height: max-content;
|
height: max-content;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
@include peertube-button-outline;
|
||||||
|
height: auto;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
my-subscribe-button {
|
||||||
|
height: min-content;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
my-user-moderation-dropdown,
|
my-user-moderation-dropdown,
|
||||||
|
|
|
@ -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 () {
|
onUserChanged () {
|
||||||
this.getUserIfNeeded(this.account)
|
this.getUserIfNeeded(this.account)
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,7 @@
|
||||||
|
<div>
|
||||||
|
<h4 i18n>Playlists <span class="badge badge-secondary">{{ pagination.totalItems }}</span></h4>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="video-playlists-header">
|
<div class="video-playlists-header">
|
||||||
<input type="text" placeholder="Search your playlists" i18n-placeholder [(ngModel)]="videoPlaylistsSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" />
|
<input type="text" placeholder="Search your playlists" i18n-placeholder [(ngModel)]="videoPlaylistsSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" />
|
||||||
|
|
||||||
|
|
|
@ -1,3 +1,7 @@
|
||||||
|
<div>
|
||||||
|
<h4 i18n>Videos <span class="badge badge-secondary">{{ pagination.totalItems }}</span></h4>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="videos-header">
|
<div class="videos-header">
|
||||||
<input type="text" placeholder="Search your videos" i18n-placeholder [(ngModel)]="videosSearch" (ngModelChange)="onVideosSearchChanged()" />
|
<input type="text" placeholder="Search your videos" i18n-placeholder [(ngModel)]="videosSearch" (ngModelChange)="onVideosSearchChanged()" />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -86,6 +86,9 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook {
|
||||||
const newPagination = immutableAssign(this.pagination, { currentPage: page })
|
const newPagination = immutableAssign(this.pagination, { currentPage: page })
|
||||||
|
|
||||||
return this.videoService.getMyVideos(newPagination, sort, this.videosSearch)
|
return this.videoService.getMyVideos(newPagination, sort, this.videosSearch)
|
||||||
|
.pipe(
|
||||||
|
tap(res => this.pagination.totalItems = res.total)
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
async deleteSelectedVideos () {
|
async deleteSelectedVideos () {
|
||||||
|
|
|
@ -15,7 +15,10 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
|
<div class="right-buttons">
|
||||||
|
<a *ngIf="isManageable" [routerLink]="[ '/my-account/video-channels/update', videoChannel.nameWithHost ]" class="btn btn-outline-tertiary mr-2" i18n>Manage</a>
|
||||||
|
<my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div i18n class="actor-followers">{{ videoChannel.followersCount }} subscribers</div>
|
<div i18n class="actor-followers">{{ videoChannel.followersCount }} subscribers</div>
|
||||||
|
|
||||||
|
|
|
@ -17,4 +17,20 @@
|
||||||
margin-top: -2px;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -64,6 +64,11 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
|
||||||
return this.authService.isLoggedIn()
|
return this.authService.isLoggedIn()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get isManageable () {
|
||||||
|
if (!this.isUserLoggedIn()) return false
|
||||||
|
return this.videoChannel.ownerAccount.userId === this.authService.getUser().id
|
||||||
|
}
|
||||||
|
|
||||||
activateCopiedMessage () {
|
activateCopiedMessage () {
|
||||||
this.notifier.success(this.i18n('Username copied'))
|
this.notifier.success(this.i18n('Username copied'))
|
||||||
}
|
}
|
||||||
|
|
|
@ -26,6 +26,7 @@ body {
|
||||||
--mainHoverColor: #{$orange-hover-color};
|
--mainHoverColor: #{$orange-hover-color};
|
||||||
--mainBackgroundColor: #{$bg-color};
|
--mainBackgroundColor: #{$bg-color};
|
||||||
--mainForegroundColor: #{$fg-color};
|
--mainForegroundColor: #{$fg-color};
|
||||||
|
--secondaryColor: #{$cyan-color};
|
||||||
|
|
||||||
--menuBackgroundColor: #{$menu-background};
|
--menuBackgroundColor: #{$menu-background};
|
||||||
--menuForegroundColor: #{$menu-color};
|
--menuForegroundColor: #{$menu-color};
|
||||||
|
|
|
@ -170,3 +170,13 @@ ngb-tabset.bootstrap {
|
||||||
ngb-modal-backdrop {
|
ngb-modal-backdrop {
|
||||||
z-index: 10000 !important;
|
z-index: 10000 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-outline-tertiary {
|
||||||
|
color: var(--secondaryColor);
|
||||||
|
border-color: var(--secondaryColor);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--mainBackgroundColor);
|
||||||
|
background-color: var(--secondaryColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -179,6 +179,15 @@
|
||||||
@include peertube-button;
|
@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) {
|
@mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
|
||||||
my-global-icon {
|
my-global-icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -453,7 +462,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin sub-menu-with-actor {
|
@mixin sub-menu-with-actor {
|
||||||
height: 160px;
|
height: max-content;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
|
@ -14,6 +14,8 @@ $grey-foreground-hover-color: #303030;
|
||||||
$orange-color: #F1680D;
|
$orange-color: #F1680D;
|
||||||
$orange-hover-color: #F97D46;
|
$orange-hover-color: #F97D46;
|
||||||
|
|
||||||
|
$cyan-color: hsl(187, 77%, 34%);
|
||||||
|
|
||||||
$support-button: inherit;
|
$support-button: inherit;
|
||||||
$support-button-heart: #e83e8c;
|
$support-button-heart: #e83e8c;
|
||||||
|
|
||||||
|
@ -73,6 +75,7 @@ $variables: (
|
||||||
--mainHoverColor: var(--mainHoverColor),
|
--mainHoverColor: var(--mainHoverColor),
|
||||||
--mainBackgroundColor: var(--mainBackgroundColor),
|
--mainBackgroundColor: var(--mainBackgroundColor),
|
||||||
--mainForegroundColor: var(--mainForegroundColor),
|
--mainForegroundColor: var(--mainForegroundColor),
|
||||||
|
--secondaryColor: var(--secondaryColor),
|
||||||
|
|
||||||
--menuBackgroundColor: var(--menuBackgroundColor),
|
--menuBackgroundColor: var(--menuBackgroundColor),
|
||||||
--menuForegroundColor: var(--menuForegroundColor),
|
--menuForegroundColor: var(--menuForegroundColor),
|
||||||
|
|
Loading…
Reference in New Issue