+
+
-
- ![Avatar]()
+
+ ![Avatar]()
-
-
-
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 40c6b6493..c1cf53f3a 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -1,49 +1,26 @@
-// Bootstrap grid utilities require functions, variables and mixins
-@import 'node_modules/bootstrap/scss/functions';
-@import 'node_modules/bootstrap/scss/variables';
-@import 'node_modules/bootstrap/scss/mixins';
-@import 'node_modules/bootstrap/scss/grid';
-
@import '_variables';
@import '_mixins';
+@import '_actor';
+@import '_miniature';
-.sub-menu {
- @include sub-menu-with-actor;
-
- .actor {
- width: 100%;
- }
+.root {
+ --myGlobalPadding: 60px;
+ --myImgMargin: 30px;
+ --myFontSize: 16px;
+ --myGreyFontSize: 16px;
}
-.margin-content {
- // margin-content is required, but child views have their own margins
- // that match views outside the scope of accounts, so we only align
- // them with the margins of .sub-menu when required.
- margin: 0;
+.section-label {
+ @include section-label-responsive;
}
-.right-buttons {
+.links {
+ @include fluid-videos-miniature-layout;
+
display: flex;
- height: max-content;
- margin-left: auto;
- margin-top: 10px;
-
- @include media-breakpoint-down(lg) {
- flex-flow: column-reverse;
-
- a {
- margin-top: 0.25rem;
- margin-right: 0 !important;
- }
- }
-
- a {
- @include peertube-button-outline;
- }
-
- my-subscribe-button {
- min-height: 30px;
- }
+ justify-content: space-between;
+ align-items: center;
+ max-width: 800px;
}
my-user-moderation-dropdown,
@@ -60,39 +37,98 @@ my-user-moderation-dropdown,
.copy-button {
border: none;
- padding: 5px;
- margin-top: -2px;
+}
+
+.account-info {
+ display: grid;
+ grid-template-columns: 1fr min-content;
+ grid-template-rows: auto auto;
+
+ background-color: pvar(--submenuColor);
+ margin-bottom: 45px;
+ padding: var(--myGlobalPadding) var(--myGlobalPadding) 0 var(--myGlobalPadding);
+ font-size: var(--myFontSize);
+}
+
+.account-avatar-row {
+ @include avatar-row-responsive(var(--myImgMargin), var(--myGreyFontSize));
+}
+
+.description {
+ grid-column: 1 / 3;
+}
+
+.created-at {
+ margin-top: 15px;
+ color: pvar(--greyForegroundColor);
+ padding-bottom: 60px;
+}
+
+.show-more {
+ @include show-more-description;
+
+ display: none;
+ text-align: center;
+}
+
+.buttons {
+ grid-column: 2;
+ grid-row: 1;
+
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ align-content: flex-start;
+
+ > *:not(:last-child) {
+ margin-bottom: 15px;
+ }
+}
+
+@media screen and (max-width: $small-view) {
+ .root {
+ --myGlobalPadding: 45px;
+ --myChannelImgMargin: 15px;
+ }
+
+ .account-info {
+ display: block;
+ padding-bottom: 60px;
+ }
+
+ .description:not(.expanded) {
+ max-height: 70px;
+
+ @include fade-text(30px, pvar(--submenuColor));
+ }
+
+ .show-more {
+ display: block;
+ }
+
+ .buttons {
+ justify-content: center;
+ }
}
@media screen and (max-width: $mobile-view) {
- .sub-menu {
- .actor {
- flex-direction: column;
- align-items: center;
+ .root {
+ --myGlobalPadding: 15px;
+ --myFontSize: 14px;
+ --myGreyFontSize: 13px;
+ }
- img,
- .actor-info .actor-names .actor-display-name {
- margin-right: 0;
- }
+ .account-info {
+ display: block;
+ padding-bottom: 30px;
+ }
- .actor-info {
- .actor-names {
- flex-direction: column;
- align-items: center;
- }
+ .links {
+ margin: auto !important;
+ width: min-content;
+ }
- my-user-moderation-dropdown {
- margin-left: 0;
- }
-
- .actor-followers {
- text-align: center;
- }
- }
-
- .right-buttons {
- margin-left: 0;
- }
- }
+ .show-more {
+ margin-bottom: 30px;
}
}
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts
index e6a5a5d5e..a00063129 100644
--- a/client/src/app/+accounts/accounts.component.ts
+++ b/client/src/app/+accounts/accounts.component.ts
@@ -2,11 +2,19 @@ import { Subscription } from 'rxjs'
import { catchError, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators'
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
-import { AuthService, Notifier, RedirectService, RestExtractor, ScreenService, UserService } from '@app/core'
-import { Account, AccountService, DropdownAction, ListOverflowItem, VideoChannel, VideoChannelService } from '@app/shared/shared-main'
+import { AuthService, MarkdownService, Notifier, RedirectService, RestExtractor, ScreenService, UserService } from '@app/core'
+import {
+ Account,
+ AccountService,
+ DropdownAction,
+ ListOverflowItem,
+ VideoChannel,
+ VideoChannelService,
+ VideoService
+} from '@app/shared/shared-main'
import { AccountReportComponent } from '@app/shared/shared-moderation'
-import { User, UserRight } from '@shared/models'
import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
+import { User, UserRight } from '@shared/models'
import { AccountSearchComponent } from './account-search/account-search.component'
@Component({
@@ -15,16 +23,23 @@ import { AccountSearchComponent } from './account-search/account-search.componen
})
export class AccountsComponent implements OnInit, OnDestroy {
@ViewChild('accountReportModal') accountReportModal: AccountReportComponent
+
accountSearch: AccountSearchComponent
account: Account
accountUser: User
- videoChannels: VideoChannel[] = []
- links: ListOverflowItem[] = []
- isAccountManageable = false
+ videoChannels: VideoChannel[] = []
+
+ links: ListOverflowItem[] = []
+ hideMenu = false
+
accountFollowerTitle = ''
+ accountVideosCount: number
+ accountDescriptionHTML = ''
+ accountDescriptionExpanded = false
+
prependModerationActions: DropdownAction[]
private routeSub: Subscription
@@ -38,6 +53,8 @@ export class AccountsComponent implements OnInit, OnDestroy {
private restExtractor: RestExtractor,
private redirectService: RedirectService,
private authService: AuthService,
+ private videoService: VideoService,
+ private markdown: MarkdownService,
private screenService: ScreenService
) {
}
@@ -63,8 +80,7 @@ export class AccountsComponent implements OnInit, OnDestroy {
this.links = [
{ label: $localize`VIDEO CHANNELS`, routerLink: 'video-channels' },
- { label: $localize`VIDEOS`, routerLink: 'videos' },
- { label: $localize`ABOUT`, routerLink: 'about' }
+ { label: $localize`VIDEOS`, routerLink: 'videos' }
]
}
@@ -72,19 +88,29 @@ export class AccountsComponent implements OnInit, OnDestroy {
if (this.routeSub) this.routeSub.unsubscribe()
}
- get naiveAggregatedSubscribers () {
+ naiveAggregatedSubscribers () {
return this.videoChannels.reduce(
(acc, val) => acc + val.followersCount,
this.account.followersCount // accumulator starts with the base number of subscribers the account has
)
}
- get isInSmallView () {
+ isUserLoggedIn () {
+ return this.authService.isLoggedIn()
+ }
+
+ isInSmallView () {
return this.screenService.isInSmallView()
}
+ isManageable () {
+ if (!this.isUserLoggedIn()) return false
+
+ return this.account?.userId === this.authService.getUser().id
+ }
+
onUserChanged () {
- this.getUserIfNeeded(this.account)
+ this.loadUserIfNeeded(this.account)
}
onUserDeleted () {
@@ -113,40 +139,30 @@ export class AccountsComponent implements OnInit, OnDestroy {
if (this.accountSearch) this.accountSearch.updateSearch(search)
}
- private onAccount (account: Account) {
+ onSearchInputDisplayChanged (displayed: boolean) {
+ this.hideMenu = this.isInSmallView() && displayed
+ }
+
+ private async onAccount (account: Account) {
+ this.accountFollowerTitle = $localize`${account.followersCount} direct account followers`
+
this.prependModerationActions = undefined
+ this.accountDescriptionHTML = await this.markdown.textMarkdownToHTML(account.description)
+
+ // After the markdown renderer to avoid layout changes
this.account = account
- if (this.authService.isLoggedIn()) {
- this.authService.userInformationLoaded.subscribe(
- () => {
- this.isAccountManageable = this.account.userId && this.account.userId === this.authService.getUser().id
-
- const followers = this.subscribersDisplayFor(account.followersCount)
- this.accountFollowerTitle = $localize`${followers} direct account followers`
-
- // It's not our account, we can report it
- if (!this.isAccountManageable) {
- this.prependModerationActions = [
- {
- label: $localize`Report this account`,
- handler: () => this.showReportModal()
- }
- ]
- }
- }
- )
- }
-
- this.getUserIfNeeded(account)
+ this.updateModerationActions()
+ this.loadUserIfNeeded(account)
+ this.loadAccountVideosCount()
}
private showReportModal () {
this.accountReportModal.show()
}
- private getUserIfNeeded (account: Account) {
+ private loadUserIfNeeded (account: Account) {
if (!account.userId || !this.authService.isLoggedIn()) return
const user = this.authService.getUser()
@@ -158,4 +174,33 @@ export class AccountsComponent implements OnInit, OnDestroy {
)
}
}
+
+ private updateModerationActions () {
+ if (!this.authService.isLoggedIn()) return
+
+ this.authService.userInformationLoaded.subscribe(
+ () => {
+ if (this.isManageable()) return
+
+ // It's not our account, we can report it
+ this.prependModerationActions = [
+ {
+ label: $localize`Report this account`,
+ handler: () => this.showReportModal()
+ }
+ ]
+ }
+ )
+ }
+
+ private loadAccountVideosCount () {
+ this.videoService.getAccountVideos({
+ account: this.account,
+ videoPagination: {
+ currentPage: 1,
+ itemsPerPage: 0
+ },
+ sort: '-publishedAt'
+ }).subscribe(res => this.accountVideosCount = res.total)
+ }
}
diff --git a/client/src/app/+accounts/accounts.module.ts b/client/src/app/+accounts/accounts.module.ts
index 6da65cbc1..3354b4189 100644
--- a/client/src/app/+accounts/accounts.module.ts
+++ b/client/src/app/+accounts/accounts.module.ts
@@ -5,10 +5,9 @@ import { SharedMainModule } from '@app/shared/shared-main'
import { SharedModerationModule } from '@app/shared/shared-moderation'
import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription'
import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
-import { AccountAboutComponent } from './account-about/account-about.component'
+import { AccountSearchComponent } from './account-search/account-search.component'
import { AccountVideoChannelsComponent } from './account-video-channels/account-video-channels.component'
import { AccountVideosComponent } from './account-videos/account-videos.component'
-import { AccountSearchComponent } from './account-search/account-search.component'
import { AccountsRoutingModule } from './accounts-routing.module'
import { AccountsComponent } from './accounts.component'
@@ -28,7 +27,6 @@ import { AccountsComponent } from './accounts.component'
AccountsComponent,
AccountVideosComponent,
AccountVideoChannelsComponent,
- AccountAboutComponent,
AccountSearchComponent
],
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index f63110bf5..d1eb15dff 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -12,7 +12,7 @@
{{ account.displayName }}
-
- {{ account.nameWithHost }}
-
+
-
+
-
-
PEERTUBE ACCOUNT
+
+
+
-
+
- Banned
- Muted
- Instance muted
- Muted by your instance
- Instance muted by your instance
-
-
+
+
+ {{ account.displayName }}
+ +
+ @{{ account.nameWithHost }}
+
+
+
+
+ {naiveAggregatedSubscribers(), plural, =1 {1 subscriber} other {{{ naiveAggregatedSubscribers() }} subscribers}}
+
+
+ {accountVideosCount, plural, =1 {1 videos} other {{{ accountVideosCount }} videos}}
+
+
- {{ subscribersDisplayFor(naiveAggregatedSubscribers) }}
-
-
-
- {{ item.label }}
-
+
-
+
-
- Account created on {{ account.createdAt | date }}
+
+ Show more...
+
+
+
- ![Owner account avatar]()
+ ![Owner account avatar]()
()
+ @Output() inputDisplayChanged = new EventEmitter()
value = ''
- shown: boolean
+ inputShown: boolean
private searchSubject = new Subject()
@@ -35,20 +38,51 @@ export class SimpleSearchInputComponent implements OnInit {
.subscribe(value => this.searchChanged.emit(value))
this.searchSubject.next(this.value)
+
+ if (this.isInputShown()) this.showInput(false)
}
- showInput () {
- this.shown = true
- setTimeout(() => this.input.nativeElement.focus())
+ isInputShown () {
+ if (this.alwaysShow) return true
+
+ return this.inputShown
+ }
+
+ onIconClick () {
+ if (!this.isInputShown()) {
+ this.showInput()
+ return
+ }
+
+ this.searchChange()
+ }
+
+ showInput (focus = true) {
+ this.inputShown = true
+ this.inputDisplayChanged.emit(this.inputShown)
+
+ if (focus) {
+ setTimeout(() => this.input.nativeElement.focus())
+ }
+ }
+
+ hideInput () {
+ this.inputShown = false
+
+ if (this.isInputShown() === false) {
+ this.inputDisplayChanged.emit(this.inputShown)
+ }
}
focusLost () {
- if (this.value !== '') return
- this.shown = false
+ if (this.value) return
+
+ this.hideInput()
}
searchChange () {
- this.router.navigate(['./search'], { relativeTo: this.route })
+ this.router.navigate([ './search' ], { relativeTo: this.route })
+
this.searchSubject.next(this.value)
}
}
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
new file mode 100644
index 000000000..5e9607318
--- /dev/null
+++ b/client/src/sass/include/_actor.scss
@@ -0,0 +1,86 @@
+@import '_variables';
+
+@mixin section-label-responsive {
+ color: pvar(--mainColor);
+ font-size: 12px;
+ margin-bottom: 15px;
+ font-weight: $font-bold;
+ letter-spacing: 2.5px;
+
+ @media screen and (max-width: $mobile-view) {
+ font-size: 10px;
+ letter-spacing: 2.1px;
+ margin-bottom: 5px;
+ }
+}
+
+@mixin show-more-description {
+ color: pvar(--mainColor);
+ cursor: pointer;
+ margin: 10px auto 45px auto;
+}
+
+@mixin avatar-row-responsive ($img-margin, $grey-font-size) {
+ display: flex;
+ grid-column: 1;
+ margin-bottom: 30px;
+
+ .channel-avatar {
+ @include channel-avatar(120px);
+ }
+
+ .account-avatar {
+ @include avatar(120px);
+ }
+
+ > div {
+ margin-left: $img-margin;
+ }
+
+ .actor-info {
+ display: flex;
+
+ > div:first-child {
+ flex-grow: 1;
+ }
+ }
+
+ .actor-display-name {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ h1 {
+ font-size: 28px;
+ font-weight: $font-bold;
+ margin: 0;
+ }
+
+ .actor-handle,
+ .actor-counters {
+ color: pvar(--greyForegroundColor);
+ font-size: $grey-font-size;
+ }
+
+ .actor-counters > *:not(:last-child)::after {
+ content: '•';
+ margin: 0 10px;
+ color: pvar(--mainColor);
+ }
+
+ @media screen and (max-width: $mobile-view) {
+ margin-bottom: 15px;
+
+ h1 {
+ font-size: 22px;
+ }
+
+ .channel-avatar {
+ @include channel-avatar(80px);
+ }
+
+ .account-avatar {
+ @include avatar(120px);
+ }
+ }
+}
{{ videoChannel.ownerAccount.displayName }}
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index 16e13c578..f5547b4e9 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss @@ -1,5 +1,6 @@ @import '_variables'; @import '_mixins'; +@import '_actor'; @import '_miniature'; .root { @@ -11,11 +12,7 @@ } .section-label { - color: pvar(--mainColor); - font-size: 12px; - margin-bottom: 15px; - font-weight: $font-bold; - letter-spacing: 2.5px; + @include section-label-responsive; } .links { @@ -34,48 +31,7 @@ } .channel-avatar-row { - display: flex; - grid-column: 1; - margin-bottom: 30px; - - img { - @include channel-avatar(120px); - } - - > div { - margin-left: var(--myChannelImgMargin); - } - - .actor-info { - display: flex; - - > div:first-child { - flex-grow: 1; - } - } - - .actor-display-name { - display: flex; - flex-wrap: wrap; - } - - h1 { - font-size: 28px; - font-weight: $font-bold; - margin: 0; - } - - .actor-handle, - .actor-counters { - color: pvar(--greyForegroundColor); - font-size: var(--myGreyChannelFontSize); - } - - .actor-counters > *:not(:last-child)::after { - content: '•'; - margin: 0 10px; - color: pvar(--mainColor); - } + @include avatar-row-responsive(var(--myChannelImgMargin), var(--myGreyChannelFontSize)); } .channel-description { @@ -83,12 +39,10 @@ } .show-more { - display: none; - color: pvar(--mainColor); - cursor: pointer; - margin: 10px auto 45px auto; -} + @include show-more-description; + display: none; +} .channel-buttons { display: flex; @@ -280,24 +234,6 @@ width: min-content; } - .section-label { - font-size: 10px; - letter-spacing: 2.1px; - margin-bottom: 5px; - } - - .channel-avatar-row { - margin-bottom: 15px; - - h1 { - font-size: 22px; - } - - img { - @include channel-avatar(80px); - } - } - .show-more { margin-bottom: 30px; } diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts index 037c108f2..4fcc42103 100644 --- a/client/src/app/+video-channels/video-channels.component.ts +++ b/client/src/app/+video-channels/video-channels.component.ts @@ -94,7 +94,7 @@ export class VideoChannelsComponent implements OnInit, OnDestroy { isManageable () { if (!this.isUserLoggedIn()) return false - return this.videoChannel.ownerAccount.userId === this.authService.getUser().id + return this.videoChannel?.ownerAccount.userId === this.authService.getUser().id } activateCopiedMessage () { diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.html b/client/src/app/shared/shared-main/misc/simple-search-input.component.html index fb0d97122..c20c02e23 100644 --- a/client/src/app/shared/shared-main/misc/simple-search-input.component.html +++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.html @@ -1,14 +1,15 @@ - -
-
+
+
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
index 591b04fb2..037937f80 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
@@ -1,29 +1,29 @@
@import '_variables';
@import '_mixins';
-span {
- opacity: .6;
-
- &:focus-within {
- opacity: 1;
- }
+.root {
+ display: flex;
}
my-global-icon {
- height: 18px;
- position: relative;
- top: -2px;
+ height: 26px;
+ width: 26px;
+ margin-left: 10px;
+ cursor: pointer;
+
+ &:hover {
+ color: pvar(--mainHoverColor);
+ }
+
+ &[iconName=search] {
+ color: pvar(--mainColor);
+ }
+
+ &[iconName=cross] {
+ color: pvar(--mainForegroundColor);
+ }
}
input {
- @include peertube-input-text(150px);
-
- height: 22px; // maximum height for the account/video-channels links
- padding-left: 10px;
- background-color: transparent;
- border: none;
-
- &::placeholder {
- font-size: 15px;
- }
+ @include peertube-input-text(200px);
}
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.ts b/client/src/app/shared/shared-main/misc/simple-search-input.component.ts
index 86ae9ab42..224d71134 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.ts
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.ts
@@ -1,7 +1,7 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
@Component({
selector: 'simple-search-input',
@@ -13,11 +13,14 @@ export class SimpleSearchInputComponent implements OnInit {
@Input() name = 'search'
@Input() placeholder = $localize`Search`
+ @Input() iconTitle = $localize`Search`
+ @Input() alwaysShow = true
@Output() searchChanged = new EventEmitter