diff --git a/client/e2e/src/po/admin-config.po.ts b/client/e2e/src/po/admin-config.po.ts index 8e3d90f45..778959c80 100644 --- a/client/e2e/src/po/admin-config.po.ts +++ b/client/e2e/src/po/admin-config.po.ts @@ -8,7 +8,7 @@ export class AdminConfigPage { 'basic-configuration': 'APPEARANCE', 'instance-information': 'INSTANCE' } - await go('/admin/config/edit-custom#' + tab) + await go('/admin/settings/config/edit-custom#' + tab) await $('h2=' + waitTitles[tab]).waitForDisplayed() } diff --git a/client/e2e/src/po/admin-plugin.po.ts b/client/e2e/src/po/admin-plugin.po.ts index 0259f34d6..0d6aca7f4 100644 --- a/client/e2e/src/po/admin-plugin.po.ts +++ b/client/e2e/src/po/admin-plugin.po.ts @@ -3,7 +3,7 @@ import { browserSleep, go } from '../utils' export class AdminPluginPage { async navigateToPluginSearch () { - await go('/admin/plugins/search') + await go('/admin/settings/plugins/search') await $('my-plugin-search').waitForDisplayed() } diff --git a/client/e2e/src/po/my-account.po.ts b/client/e2e/src/po/my-account.po.ts index cc1555e9b..1054c117b 100644 --- a/client/e2e/src/po/my-account.po.ts +++ b/client/e2e/src/po/my-account.po.ts @@ -77,7 +77,7 @@ export class MyAccountPage { async countVideos (names: string[]) { const elements = await $$('.video').filter(async e => { - const t = await e.$('.video-miniature-name').getText() + const t = await e.$('.video-name').getText() return names.some(n => t.includes(n)) }) @@ -140,7 +140,7 @@ export class MyAccountPage { private async getVideoElement (name: string) { const video = async () => { const videos = await $$('.video').filter(async e => { - const t = await e.$('.video-miniature-name').getText() + const t = await e.$('.video-name').getText() return t.includes(name) }) diff --git a/client/e2e/src/po/video-list.po.ts b/client/e2e/src/po/video-list.po.ts index 81afbd992..c2dad8571 100644 --- a/client/e2e/src/po/video-list.po.ts +++ b/client/e2e/src/po/video-list.po.ts @@ -66,25 +66,25 @@ export class VideoListPage { } async getVideosListName () { - const elems = await $$('.videos .video-miniature .video-miniature-name') + const elems = await $$('.videos .video-miniature .video-name') const texts = await elems.map(e => e.getText()) return texts.map(t => t.trim()) } videoExists (name: string) { - return $('.video-miniature-name=' + name).isDisplayed() + return $('.video-name=' + name).isDisplayed() } async videoIsBlurred (name: string) { - const filter = await $('.video-miniature-name=' + name).getCSSProperty('filter') + const filter = await $('.video-name=' + name).getCSSProperty('filter') return filter.value !== 'none' } async clickOnVideo (videoName: string) { const video = async () => { - const videos = await $$('.videos .video-miniature .video-miniature-name').filter(async e => { + const videos = await $$('.videos .video-miniature .video-name').filter(async e => { const t = await e.getText() return t === videoName @@ -106,7 +106,7 @@ export class VideoListPage { async clickOnFirstVideo () { const video = () => $('.videos .video-miniature .video-thumbnail') - const videoName = () => $('.videos .video-miniature .video-miniature-name') + const videoName = () => $('.videos .video-miniature .video-name') await video().waitForClickable() @@ -119,7 +119,7 @@ export class VideoListPage { } private waitForList () { - return $('.videos .video-miniature .video-miniature-name').waitForDisplayed() + return $('.videos .video-miniature .video-name').waitForDisplayed() } private waitForTitle (title: string) { diff --git a/client/e2e/src/po/video-watch.po.ts b/client/e2e/src/po/video-watch.po.ts index 544930c6c..699a0b635 100644 --- a/client/e2e/src/po/video-watch.po.ts +++ b/client/e2e/src/po/video-watch.po.ts @@ -199,7 +199,7 @@ export class VideoWatchPage { await textarea.setValue(comment) - const confirmButton = await $('.comment-buttons .orange-button') + const confirmButton = await $('.comment-buttons .primary-button') await confirmButton.waitForClickable() await confirmButton.click() @@ -218,7 +218,7 @@ export class VideoWatchPage { await textarea.waitForClickable() await textarea.setValue(comment) - const confirmButton = await $('my-video-comment .comment-buttons .orange-button') + const confirmButton = await $('my-video-comment .comment-buttons .primary-button') await confirmButton.waitForClickable() await confirmButton.click() diff --git a/client/package.json b/client/package.json index a211ac541..42d3ad03e 100644 --- a/client/package.json +++ b/client/package.json @@ -89,6 +89,7 @@ "buffer": "^6.0.3", "chart.js": "^4.3.0", "chartjs-plugin-zoom": "~2.0.1", + "color-bits": "^1.0.4", "core-js": "^3.22.8", "debug": "^4.3.1", "dompurify": "^3.1.6", diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html index 34427452c..c4bda1944 100644 --- a/client/src/app/+about/about-follows/about-follows.component.html +++ b/client/src/app/+about/about-follows/about-follows.component.html @@ -11,7 +11,7 @@ {{ follower.name }} - +
@@ -23,7 +23,7 @@ {{ following.name }} - +
diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html index 876f29821..5754aa7dc 100644 --- a/client/src/app/+about/about-instance/about-instance.component.html +++ b/client/src/app/+about/about-instance/about-instance.component.html @@ -1,15 +1,15 @@ - -
+ +

About {{ instanceName }}

- Contact us + Contact us
diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss index ffb8ce307..cb7324f06 100644 --- a/client/src/app/+about/about-instance/about-instance.component.scss +++ b/client/src/app/+about/about-instance/about-instance.component.scss @@ -15,8 +15,11 @@ .middle-title { margin-top: 0; + text-transform: uppercase; + color: pvar(--fg); + font-weight: $font-bold; - @include in-content-small-title; + @include font-size(22px); @include margin-bottom(1.5rem); } @@ -42,9 +45,6 @@ .middle-title, .section-title { display: inline-block; - } - - .section-title { - color: var(--mainForegroundColor); + color: pvar(--fg-400); } } diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.html b/client/src/app/+about/about-instance/contact-admin-modal.component.html index 0a2c30b30..8f414d168 100644 --- a/client/src/app/+about/about-instance/contact-admin-modal.component.html +++ b/client/src/app/+about/about-instance/contact-admin-modal.component.html @@ -50,11 +50,11 @@
- +
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.scss b/client/src/app/+about/about-instance/contact-admin-modal.component.scss index 80b962a37..dc4010c8a 100644 --- a/client/src/app/+about/about-instance/contact-admin-modal.component.scss +++ b/client/src/app/+about/about-instance/contact-admin-modal.component.scss @@ -1,5 +1,6 @@ @use '_variables' as *; @use '_mixins' as *; +@use '_form-mixins' as *; .modal-subtitle { line-height: 1rem; diff --git a/client/src/app/+about/about-peertube/about-peertube.component.html b/client/src/app/+about/about-peertube/about-peertube.component.html index a066f0e46..73ea2bd75 100644 --- a/client/src/app/+about/about-peertube/about-peertube.component.html +++ b/client/src/app/+about/about-peertube/about-peertube.component.html @@ -11,12 +11,12 @@

- It is free and open-source software, under AGPLv3 + It is free and open-source software, under AGPLv3 licence.

- For more information, please visit joinpeertube.org. + For more information, please visit joinpeertube.org.

@@ -25,7 +25,7 @@
@@ -37,7 +37,7 @@
@@ -49,7 +49,7 @@
@@ -112,7 +112,7 @@ Web peers are not publicly accessible: because we use the websocket transport, the protocol is different from classic BitTorrent tracker. When you are in a web browser, you send a signal containing your IP address to the tracker that will randomly choose other peers to forward the information to. - See this document for more information + See this document for more information diff --git a/client/src/app/+about/about.component.html b/client/src/app/+about/about.component.html index 149a999fa..2241fe716 100644 --- a/client/src/app/+about/about.component.html +++ b/client/src/app/+about/about.component.html @@ -1,13 +1,7 @@
- diff --git a/client/src/app/+about/about.component.ts b/client/src/app/+about/about.component.ts index f0f26f902..01672ba6a 100644 --- a/client/src/app/+about/about.component.ts +++ b/client/src/app/+about/about.component.ts @@ -1,22 +1,30 @@ import { Component } from '@angular/core' -import { ScreenService } from '@app/core' -import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router' -import { PluginSelectorDirective } from '../shared/shared-main/plugins/plugin-selector.directive' -import { NgClass } from '@angular/common' +import { RouterOutlet } from '@angular/router' +import { HorizontalMenuComponent, HorizontalMenuEntry } from '@app/shared/shared-main/menu/horizontal-menu.component' @Component({ selector: 'my-about', templateUrl: './about.component.html', standalone: true, - imports: [ NgClass, PluginSelectorDirective, RouterLink, RouterLinkActive, RouterOutlet ] + imports: [ RouterOutlet, HorizontalMenuComponent ] }) export class AboutComponent { - constructor ( - private screenService: ScreenService - ) { } - - get isBroadcastMessageDisplayed () { - return this.screenService.isBroadcastMessageDisplayed - } + menuEntries: HorizontalMenuEntry[] = [ + { + label: $localize`Platform`, + routerLink: '/about/instance', + pluginSelectorId: 'about-menu-instance' + }, + { + label: $localize`PeerTube`, + routerLink: '/about/peertube', + pluginSelectorId: 'about-menu-peertube' + }, + { + label: $localize`Network`, + routerLink: '/about/follows', + pluginSelectorId: 'about-menu-network' + } + ] } diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html index e3b499773..644504cf3 100644 --- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html @@ -17,7 +17,7 @@ >

- + {{ videoChannel.displayName }}

@@ -35,7 +35,7 @@ - Show this channel + Show this channel
@@ -47,7 +47,7 @@ >
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss index 9a415a320..8842b5403 100644 --- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss @@ -9,7 +9,7 @@ .channel { max-width: $max-channels-width; - background-color: pvar(--channelBackgroundColor); + background-color: pvar(--bg-secondary-350); display: grid; grid-template-columns: 1fr auto; @@ -36,7 +36,7 @@ } a { - color: pvar(--mainForegroundColor); + color: pvar(--fg); @include peertube-word-wrap; } @@ -60,7 +60,7 @@ max-height: 80px; - @include fade-text(50px, pvar(--channelBackgroundColor)); + @include fade-text(50px, pvar(--bg-secondary-350)); } } @@ -95,14 +95,9 @@ my-subscribe-button { height: 100%; position: absolute; right: 0; - background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px); + background: linear-gradient(90deg, transparent 0, pvar(--bg-secondary-350) 45px); padding: (math.div($video-thumbnail-medium-height, 2) - 10px) 15px 0 60px; z-index: z(miniature) + 1; - - a { - color: pvar(--mainColor); - font-weight: $font-semibold; - } } .button-show-channel { @@ -130,11 +125,6 @@ my-subscribe-button { } } - .show-channel a { - @include peertube-button-link; - @include orange-button-inverted; - } - .videos { display: none; } diff --git a/client/src/app/+accounts/account-videos/account-videos.component.html b/client/src/app/+accounts/account-videos/account-videos.component.html index 86cfca3e1..887667ddf 100644 --- a/client/src/app/+accounts/account-videos/account-videos.component.html +++ b/client/src/app/+accounts/account-videos/account-videos.component.html @@ -1,11 +1,10 @@ +

Videos

+ -