From 457bb213b273a9b206cc5654eb085cede4e916ad Mon Sep 17 00:00:00 2001 From: Chocobozzz 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 --- client/package.json | 1 - .../contact-admin-modal.component.html | 2 +- .../moderation-comment-modal.component.html | 5 +- .../moderation-comment-modal.component.ts | 4 +- .../users/user-list/user-list.component.html | 2 +- .../users/user-list/user-list.component.scss | 4 +- .../my-account-history.component.scss | 4 +- .../my-account-notifications.component.html | 10 +- .../my-account-notifications.component.scss | 4 +- .../my-account-accept-ownership.component.html | 3 +- .../my-account-video-channels.component.html | 2 +- .../my-account-video-channels.component.scss | 2 +- .../my-account-videos.component.html | 6 +- .../my-account-videos.component.scss | 11 +- .../video-change-ownership.component.html | 3 +- client/src/app/app.component.html | 2 + client/src/app/core/confirm/confirm.component.html | 25 --- client/src/app/core/confirm/confirm.component.scss | 17 -- client/src/app/core/confirm/confirm.component.ts | 68 -------- client/src/app/core/confirm/index.ts | 1 - client/src/app/core/core.module.ts | 4 +- client/src/app/header/header.component.html | 2 +- client/src/app/header/header.component.scss | 10 +- client/src/app/login/login.component.html | 3 +- .../app/menu/avatar-notification.component.scss | 2 +- .../src/app/menu/language-chooser.component.html | 2 +- client/src/app/search/search.component.scss | 4 +- client/src/app/shared/actor/actor.model.ts | 2 +- .../shared/buttons/action-dropdown.component.html | 2 +- .../shared/buttons/action-dropdown.component.scss | 9 +- .../src/app/shared/buttons/button.component.html | 2 +- .../src/app/shared/buttons/button.component.scss | 34 +--- client/src/app/shared/buttons/button.component.ts | 3 +- .../shared/buttons/delete-button.component.html | 2 +- .../app/shared/buttons/edit-button.component.html | 2 +- .../src/app/shared/confirm/confirm.component.html | 26 ++++ .../src/app/shared/confirm/confirm.component.scss | 17 ++ client/src/app/shared/confirm/confirm.component.ts | 68 ++++++++ .../app/shared/icons/global-icon.component.html | 0 .../app/shared/icons/global-icon.component.scss | 4 + .../src/app/shared/icons/global-icon.component.ts | 47 ++++++ client/src/app/shared/misc/help.component.html | 4 +- client/src/app/shared/misc/help.component.scss | 19 ++- .../moderation/user-ban-modal.component.html | 7 +- .../shared/moderation/user-ban-modal.component.ts | 4 +- client/src/app/shared/shared.module.ts | 8 +- .../app/shared/users/user-notification.model.ts | 37 ++--- .../app/shared/users/user-notification.service.ts | 2 - .../shared/users/user-notifications.component.html | 82 +++++++--- .../shared/users/user-notifications.component.scss | 46 ++++-- .../shared/users/user-notifications.component.ts | 14 +- client/src/app/shared/video/feed.component.html | 9 +- client/src/app/shared/video/feed.component.scss | 17 +- .../shared/video/video-miniature.component.scss | 4 +- client/src/app/shared/video/video.model.ts | 4 +- .../shared/video-caption-add-modal.component.html | 2 +- .../+video-edit/shared/video-edit.component.html | 2 +- .../+video-edit/shared/video-edit.component.scss | 17 +- .../video-import-torrent.component.html | 6 +- .../video-import-torrent.component.scss | 53 +------ .../video-import-torrent.component.ts | 3 +- .../video-import-url.component.html | 6 +- .../video-import-url.component.scss | 45 ------ .../video-import-url.component.ts | 2 +- .../video-add-components/video-send.scss | 54 +++++++ .../video-upload.component.html | 6 +- .../video-upload.component.scss | 44 +----- .../video-add-components/video-upload.component.ts | 3 +- .../videos/+video-edit/video-update.component.html | 2 +- .../comment/video-comment.component.scss | 6 +- .../modal/video-blacklist.component.html | 2 +- .../modal/video-download.component.html | 2 +- .../+video-watch/modal/video-report.component.html | 2 +- .../+video-watch/modal/video-share.component.html | 2 +- .../modal/video-support.component.html | 2 +- .../videos/+video-watch/video-watch.component.html | 24 +-- .../videos/+video-watch/video-watch.component.scss | 80 ++-------- client/src/assets/images/global/add.html | 11 ++ client/src/assets/images/global/add.svg | 13 -- client/src/assets/images/global/alert.html | 11 ++ client/src/assets/images/global/circle-tick.html | 12 ++ .../src/assets/images/global/cloud-download.html | 11 ++ client/src/assets/images/global/cloud-error.html | 11 ++ client/src/assets/images/global/cog.html | 9 ++ client/src/assets/images/global/cross.html | 10 ++ client/src/assets/images/global/cross.svg | 12 -- client/src/assets/images/global/delete-black.svg | 14 -- client/src/assets/images/global/delete-grey.svg | 14 -- client/src/assets/images/global/delete-white.svg | 14 -- client/src/assets/images/global/delete.html | 12 ++ client/src/assets/images/global/download.html | 11 ++ client/src/assets/images/global/edit-black.svg | 15 -- client/src/assets/images/global/edit-grey.svg | 15 -- client/src/assets/images/global/edit.html | 10 ++ client/src/assets/images/global/help.html | 10 ++ client/src/assets/images/global/help.svg | 12 -- client/src/assets/images/global/im-with-her.html | 10 ++ client/src/assets/images/global/im-with-her.svg | 15 -- client/src/assets/images/global/no.html | 10 ++ client/src/assets/images/global/sparkle.html | 11 ++ client/src/assets/images/global/syndication.html | 56 +++++++ client/src/assets/images/global/syndication.svg | 58 ------- client/src/assets/images/global/tick.html | 10 ++ client/src/assets/images/global/tick.svg | 12 -- client/src/assets/images/global/undo.html | 9 ++ client/src/assets/images/global/undo.svg | 11 -- client/src/assets/images/global/user-add.html | 11 ++ client/src/assets/images/global/validate.html | 12 ++ client/src/assets/images/global/validate.svg | 14 -- client/src/assets/images/header/upload-white.svg | 16 -- client/src/assets/images/video/alert.svg | 16 -- client/src/assets/images/video/blacklist.svg | 15 -- client/src/assets/images/video/dislike-grey.svg | 14 -- client/src/assets/images/video/dislike-white.svg | 14 -- client/src/assets/images/video/dislike.html | 12 ++ client/src/assets/images/video/download-black.svg | 16 -- client/src/assets/images/video/download-grey.svg | 16 -- client/src/assets/images/video/download-white.svg | 16 -- client/src/assets/images/video/heart.html | 11 ++ client/src/assets/images/video/heart.svg | 13 -- client/src/assets/images/video/like-grey.svg | 15 -- client/src/assets/images/video/like-white.svg | 15 -- client/src/assets/images/video/like.html | 10 ++ client/src/assets/images/video/more.html | 9 ++ client/src/assets/images/video/more.svg | 11 -- client/src/assets/images/video/share.html | 11 ++ client/src/assets/images/video/share.svg | 16 -- client/src/assets/images/video/upload.html | 11 ++ client/src/assets/images/video/upload.svg | 16 -- client/src/sass/application.scss | 9 +- client/src/sass/include/_mixins.scss | 49 ++++-- client/src/sass/include/_variables.scss | 9 +- client/yarn.lock | 173 --------------------- server/models/account/user-notification.ts | 158 ++++++++++++++----- shared/models/actors/actor.model.ts | 2 +- shared/models/users/user-notification.model.ts | 30 ++-- shared/models/videos/video.model.ts | 4 +- 137 files changed, 996 insertions(+), 1220 deletions(-) delete mode 100644 client/src/app/core/confirm/confirm.component.html delete mode 100644 client/src/app/core/confirm/confirm.component.scss delete mode 100644 client/src/app/core/confirm/confirm.component.ts create mode 100644 client/src/app/shared/confirm/confirm.component.html create mode 100644 client/src/app/shared/confirm/confirm.component.scss create mode 100644 client/src/app/shared/confirm/confirm.component.ts create mode 100644 client/src/app/shared/icons/global-icon.component.html create mode 100644 client/src/app/shared/icons/global-icon.component.scss create mode 100644 client/src/app/shared/icons/global-icon.component.ts delete mode 100644 client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss create mode 100644 client/src/app/videos/+video-edit/video-add-components/video-send.scss create mode 100644 client/src/assets/images/global/add.html delete mode 100644 client/src/assets/images/global/add.svg create mode 100644 client/src/assets/images/global/alert.html create mode 100644 client/src/assets/images/global/circle-tick.html create mode 100644 client/src/assets/images/global/cloud-download.html create mode 100644 client/src/assets/images/global/cloud-error.html create mode 100644 client/src/assets/images/global/cog.html create mode 100644 client/src/assets/images/global/cross.html delete mode 100644 client/src/assets/images/global/cross.svg delete mode 100644 client/src/assets/images/global/delete-black.svg delete mode 100644 client/src/assets/images/global/delete-grey.svg delete mode 100644 client/src/assets/images/global/delete-white.svg create mode 100644 client/src/assets/images/global/delete.html create mode 100644 client/src/assets/images/global/download.html delete mode 100644 client/src/assets/images/global/edit-black.svg delete mode 100644 client/src/assets/images/global/edit-grey.svg create mode 100644 client/src/assets/images/global/edit.html create mode 100644 client/src/assets/images/global/help.html delete mode 100644 client/src/assets/images/global/help.svg create mode 100644 client/src/assets/images/global/im-with-her.html delete mode 100644 client/src/assets/images/global/im-with-her.svg create mode 100644 client/src/assets/images/global/no.html create mode 100644 client/src/assets/images/global/sparkle.html create mode 100644 client/src/assets/images/global/syndication.html delete mode 100644 client/src/assets/images/global/syndication.svg create mode 100644 client/src/assets/images/global/tick.html delete mode 100644 client/src/assets/images/global/tick.svg create mode 100644 client/src/assets/images/global/undo.html delete mode 100644 client/src/assets/images/global/undo.svg create mode 100644 client/src/assets/images/global/user-add.html create mode 100644 client/src/assets/images/global/validate.html delete mode 100644 client/src/assets/images/global/validate.svg delete mode 100644 client/src/assets/images/header/upload-white.svg delete mode 100644 client/src/assets/images/video/alert.svg delete mode 100644 client/src/assets/images/video/blacklist.svg delete mode 100644 client/src/assets/images/video/dislike-grey.svg delete mode 100644 client/src/assets/images/video/dislike-white.svg create mode 100644 client/src/assets/images/video/dislike.html delete mode 100644 client/src/assets/images/video/download-black.svg delete mode 100644 client/src/assets/images/video/download-grey.svg delete mode 100644 client/src/assets/images/video/download-white.svg create mode 100644 client/src/assets/images/video/heart.html delete mode 100644 client/src/assets/images/video/heart.svg delete mode 100644 client/src/assets/images/video/like-grey.svg delete mode 100644 client/src/assets/images/video/like-white.svg create mode 100644 client/src/assets/images/video/like.html create mode 100644 client/src/assets/images/video/more.html delete mode 100644 client/src/assets/images/video/more.svg create mode 100644 client/src/assets/images/video/share.html delete mode 100644 client/src/assets/images/video/share.svg create mode 100644 client/src/assets/images/video/upload.html delete mode 100644 client/src/assets/images/video/upload.svg diff --git a/client/package.json b/client/package.json index 5fe1f3d5f..248c390fc 100644 --- a/client/package.json +++ b/client/package.json @@ -154,7 +154,6 @@ "videojs-contextmenu-ui": "^5.0.0", "videojs-dock": "^2.0.2", "videojs-hotkeys": "^0.2.21", - "webpack": "^4.17.1", "webpack-bundle-analyzer": "^3.0.2", "webpack-cli": "^3.0.8", "webtorrent": "https://github.com/webtorrent/webtorrent#e9b209c7970816fc29e0cc871157a4918d66001d", 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 2b3fb32f3..b2cbd0873 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 @@ -1,7 +1,7 @@

Contact {{ instanceName }} administrator

- +
diff --git a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html index 952235c55..303a788d2 100644 --- a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html +++ b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html @@ -1,7 +1,8 @@

Moderation comment

- + +
@@ -19,7 +20,7 @@
- Cancel + Cancel this.notifier.error(err.message) diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html index 8c03a924b..69a4616a3 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.html +++ b/client/src/app/+admin/users/user-list/user-list.component.html @@ -2,7 +2,7 @@
Users list
- + Create user
diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss index f235769f0..5274be01c 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.scss +++ b/client/src/app/+admin/users/user-list/user-list.component.scss @@ -2,7 +2,7 @@ @import '_mixins'; .add-button { - @include create-button('../../../../assets/images/global/add.svg'); + @include create-button; } tr.banned { @@ -23,4 +23,4 @@ tr.banned { input { @include peertube-input-text(250px); } -} \ No newline at end of file +} diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.scss b/client/src/app/+my-account/my-account-history/my-account-history.component.scss index 82150cbe3..e7c6863f1 100644 --- a/client/src/app/+my-account/my-account-history/my-account-history.component.scss +++ b/client/src/app/+my-account/my-account-history/my-account-history.component.scss @@ -65,10 +65,10 @@ text-overflow: ellipsis; white-space: nowrap; font-size: 14px; - color: #585858; + color: $grey-foreground-color; &:hover { - color: #303030; + color: $grey-foreground-hover-color; } } } 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 @@
- Notification preferences + + + Notification preferences + - +
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); } } diff --git a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html index fd7d7d23b..674a4e8a2 100644 --- a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html +++ b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html @@ -1,7 +1,8 @@

Accept ownership

- + +
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html index df74b19b6..51db2e75d 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html @@ -1,6 +1,6 @@
- + Create another video channel
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss index 472cbb723..77fce138b 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss @@ -2,7 +2,7 @@ @import '_mixins'; .create-button { - @include create-button('../../../assets/images/global/add.svg'); + @include create-button; } /deep/ .action-button { diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html index a6911e4bf..69748ef37 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html @@ -32,7 +32,7 @@ - + Delete
@@ -45,7 +45,7 @@
@@ -53,4 +53,4 @@ - \ No newline at end of file + diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss index a735562f8..39d0cf2f7 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss @@ -23,14 +23,11 @@ .action-button-delete-selection { @include peertube-button; @include orange-button; - } - - .icon.icon-delete-white { - @include icon(21px); + @include button-with-icon(21px); - position: relative; - top: -2px; - background-image: url('../../../assets/images/global/delete-white.svg'); + my-global-icon { + @include apply-svg-color(#fff); + } } } } diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html index 7c0df850d..22f127904 100644 --- a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html +++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html @@ -1,7 +1,8 @@

Change ownership

- + +
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html index 3a60139e1..dfda556f5 100644 --- a/client/src/app/app.component.html +++ b/client/src/app/app.component.html @@ -37,7 +37,9 @@
+ +
diff --git a/client/src/app/core/confirm/confirm.component.html b/client/src/app/core/confirm/confirm.component.html deleted file mode 100644 index 43f0c6190..000000000 --- a/client/src/app/core/confirm/confirm.component.html +++ /dev/null @@ -1,25 +0,0 @@ - - -
-

{{ title }}

- -
- -
-
- -
- - -
-
- -
- Cancel - - -
- diff --git a/client/src/app/core/confirm/confirm.component.scss b/client/src/app/core/confirm/confirm.component.scss deleted file mode 100644 index 93dd7926b..000000000 --- a/client/src/app/core/confirm/confirm.component.scss +++ /dev/null @@ -1,17 +0,0 @@ -@import '_variables'; -@import '_mixins'; - -.button { - padding: 0 13px; -} - -input[type=text] { - @include peertube-input-text(100%); - display: block; -} - -.form-group { - margin: 20px 0; -} - - diff --git a/client/src/app/core/confirm/confirm.component.ts b/client/src/app/core/confirm/confirm.component.ts deleted file mode 100644 index 5138b7848..000000000 --- a/client/src/app/core/confirm/confirm.component.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core' -import { ConfirmService } from './confirm.service' -import { I18n } from '@ngx-translate/i18n-polyfill' -import { NgbModal } from '@ng-bootstrap/ng-bootstrap' -import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' - -@Component({ - selector: 'my-confirm', - templateUrl: './confirm.component.html', - styleUrls: [ './confirm.component.scss' ] -}) -export class ConfirmComponent implements OnInit { - @ViewChild('confirmModal') confirmModal: ElementRef - - title = '' - message = '' - expectedInputValue = '' - inputLabel = '' - - inputValue = '' - confirmButtonText = '' - - private openedModal: NgbModalRef - - constructor ( - private modalService: NgbModal, - private confirmService: ConfirmService, - private i18n: I18n - ) { } - - ngOnInit () { - this.confirmService.showConfirm.subscribe( - ({ title, message, expectedInputValue, inputLabel, confirmButtonText }) => { - this.title = title - this.message = message - - this.inputLabel = inputLabel - this.expectedInputValue = expectedInputValue - - this.confirmButtonText = confirmButtonText || this.i18n('Confirm') - - this.showModal() - } - ) - } - - @HostListener('document:keydown.enter') - confirm () { - if (this.openedModal) this.openedModal.close() - } - - isConfirmationDisabled () { - // No input validation - if (!this.inputLabel || !this.expectedInputValue) return false - - return this.expectedInputValue !== this.inputValue - } - - showModal () { - this.inputValue = '' - - this.openedModal = this.modalService.open(this.confirmModal) - - this.openedModal.result - .then(() => this.confirmService.confirmResponse.next(true)) - .catch(() => this.confirmService.confirmResponse.next(false)) - } -} diff --git a/client/src/app/core/confirm/index.ts b/client/src/app/core/confirm/index.ts index 44aabfc13..aca591e1a 100644 --- a/client/src/app/core/confirm/index.ts +++ b/client/src/app/core/confirm/index.ts @@ -1,2 +1 @@ -export * from './confirm.component' export * from './confirm.service' diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts index 3bc0e2885..4ef3b1e73 100644 --- a/client/src/app/core/core.module.ts +++ b/client/src/app/core/core.module.ts @@ -8,7 +8,7 @@ import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client' import { LoadingBarRouterModule } from '@ngx-loading-bar/router' import { AuthService } from './auth' -import { ConfirmComponent, ConfirmService } from './confirm' +import { ConfirmService } from './confirm' import { throwIfAlreadyLoaded } from './module-import-guard' import { LoginGuard, RedirectService, UserRightGuard } from './routing' import { ServerService } from './server' @@ -38,7 +38,6 @@ import { UserNotificationSocket } from '@app/core/notification/user-notification ], declarations: [ - ConfirmComponent, CheatSheetComponent ], @@ -48,7 +47,6 @@ import { UserNotificationSocket } from '@app/core/notification/user-notification ToastModule, - ConfirmComponent, CheatSheetComponent ], diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html index c23e0c55d..46a87c79c 100644 --- a/client/src/app/header/header.component.html +++ b/client/src/app/header/header.component.html @@ -5,6 +5,6 @@ - + Upload diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss index 2f9820665..cdc457b96 100644 --- a/client/src/app/header/header.component.scss +++ b/client/src/app/header/header.component.scss @@ -40,6 +40,7 @@ .upload-button { @include peertube-button-link; @include orange-button; + @include button-with-icon(22px, 3px, -1px); margin-right: 25px; @@ -47,15 +48,6 @@ margin-right: 0; } - .icon.icon-upload { - @include icon(22px); - - background-image: url('../../assets/images/header/upload-white.svg'); - height: 24px; - vertical-align: middle; - margin-right: 6px; - } - @media screen and (max-width: 600px) { margin-right: 10px; padding: 0 10px; diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html index 9b8146624..4efe3fb22 100644 --- a/client/src/app/login/login.component.html +++ b/client/src/app/login/login.component.html @@ -55,7 +55,8 @@

Forgot your password

- + +
diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss index 807385022..f6242eeae 100644 --- a/client/src/app/menu/avatar-notification.component.scss +++ b/client/src/app/menu/avatar-notification.component.scss @@ -42,7 +42,7 @@ justify-content: center; font-weight: $font-semibold; color: var(--mainForegroundColor); - height: 30px; + padding: 7px 0; } } } diff --git a/client/src/app/menu/language-chooser.component.html b/client/src/app/menu/language-chooser.component.html index c79609898..a62b33dda 100644 --- a/client/src/app/menu/language-chooser.component.html +++ b/client/src/app/menu/language-chooser.component.html @@ -1,7 +1,7 @@

Change the language

- +
diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss index 3e074621b..6de13d276 100644 --- a/client/src/app/search/search.component.scss +++ b/client/src/app/search/search.component.scss @@ -87,10 +87,10 @@ text-overflow: ellipsis; white-space: nowrap; font-size: 14px; - color: #585858; + color: $grey-foreground-color; &:hover { - color: #303030; + color: $grey-foreground-hover-color; } } } diff --git a/client/src/app/shared/actor/actor.model.ts b/client/src/app/shared/actor/actor.model.ts index 811afb449..adecec1fc 100644 --- a/client/src/app/shared/actor/actor.model.ts +++ b/client/src/app/shared/actor/actor.model.ts @@ -16,7 +16,7 @@ export abstract class Actor implements ActorServer { avatarUrl: string - static GET_ACTOR_AVATAR_URL (actor: { avatar: Avatar }) { + static GET_ACTOR_AVATAR_URL (actor: { avatar?: { path: string } }) { const absoluteAPIUrl = getAbsoluteAPIUrl() if (actor && actor.avatar) return absoluteAPIUrl + actor.avatar.path diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html index 90651f217..114b1d71f 100644 --- a/client/src/app/shared/buttons/action-dropdown.component.html +++ b/client/src/app/shared/buttons/action-dropdown.component.html @@ -3,7 +3,7 @@ class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange' }" ngbDropdownToggle role="button" > - + {{ label }}
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss index a4fcceeee..985b2ca88 100644 --- a/client/src/app/shared/buttons/action-dropdown.component.scss +++ b/client/src/app/shared/buttons/action-dropdown.component.scss @@ -24,14 +24,11 @@ } &:hover, &:active, &:focus { - background-color: $grey-color; + background-color: $grey-background-color; } - .icon-action { - @include icon(21px); - - background-image: url('../../../assets/images/video/more.svg'); - top: -1px; + .more-icon { + width: 21px; } &.small { diff --git a/client/src/app/shared/buttons/button.component.html b/client/src/app/shared/buttons/button.component.html index 87a8daccf..b6df67102 100644 --- a/client/src/app/shared/buttons/button.component.html +++ b/client/src/app/shared/buttons/button.component.html @@ -1,4 +1,4 @@ - + {{ label }} diff --git a/client/src/app/shared/buttons/button.component.scss b/client/src/app/shared/buttons/button.component.scss index 168102f09..be41669cd 100644 --- a/client/src/app/shared/buttons/button.component.scss +++ b/client/src/app/shared/buttons/button.component.scss @@ -3,41 +3,19 @@ .action-button { @include peertube-button-link; + @include button-with-icon(21px, 0, -2px); font-size: 15px; font-weight: $font-semibold; - color: #585858; - background-color: #E5E5E5; + color: $grey-foreground-color; + background-color: $grey-background-color; &:hover { - background-color: #EFEFEF; + background-color: $grey-background-hover-color; } - .icon { - @include icon(21px); - - position: relative; - top: -2px; - - &.icon-edit { - background-image: url('../../../assets/images/global/edit-grey.svg'); - } - - &.icon-delete-grey { - background-image: url('../../../assets/images/global/delete-grey.svg'); - } - - &.icon-im-with-her { - background-image: url('../../../assets/images/global/im-with-her.svg'); - } - - &.icon-tick { - background-image: url('../../../assets/images/global/tick.svg'); - } - - &.icon-cross { - background-image: url('../../../assets/images/global/cross.svg'); - } + my-global-icon { + @include apply-svg-color($grey-foreground-color); } } diff --git a/client/src/app/shared/buttons/button.component.ts b/client/src/app/shared/buttons/button.component.ts index 1a1162f09..a91e9c7eb 100644 --- a/client/src/app/shared/buttons/button.component.ts +++ b/client/src/app/shared/buttons/button.component.ts @@ -1,4 +1,5 @@ import { Component, Input } from '@angular/core' +import { GlobalIconName } from '@app/shared/icons/global-icon.component' @Component({ selector: 'my-button', @@ -9,7 +10,7 @@ import { Component, Input } from '@angular/core' export class ButtonComponent { @Input() label = '' @Input() className: string = undefined - @Input() icon: string = undefined + @Input() icon: GlobalIconName = undefined @Input() title: string = undefined getTitle () { diff --git a/client/src/app/shared/buttons/delete-button.component.html b/client/src/app/shared/buttons/delete-button.component.html index 6c55d8104..4d12a84c0 100644 --- a/client/src/app/shared/buttons/delete-button.component.html +++ b/client/src/app/shared/buttons/delete-button.component.html @@ -1,5 +1,5 @@ - + {{ label }} Delete diff --git a/client/src/app/shared/buttons/edit-button.component.html b/client/src/app/shared/buttons/edit-button.component.html index cecb780f3..da3addbae 100644 --- a/client/src/app/shared/buttons/edit-button.component.html +++ b/client/src/app/shared/buttons/edit-button.component.html @@ -1,5 +1,5 @@ - + {{ label }} Edit diff --git a/client/src/app/shared/confirm/confirm.component.html b/client/src/app/shared/confirm/confirm.component.html new file mode 100644 index 000000000..65df1cd4d --- /dev/null +++ b/client/src/app/shared/confirm/confirm.component.html @@ -0,0 +1,26 @@ + + +
+

{{ title }}

+ + +
+ +
+
+ +
+ + +
+
+ +
+ Cancel + + +
+ diff --git a/client/src/app/shared/confirm/confirm.component.scss b/client/src/app/shared/confirm/confirm.component.scss new file mode 100644 index 000000000..93dd7926b --- /dev/null +++ b/client/src/app/shared/confirm/confirm.component.scss @@ -0,0 +1,17 @@ +@import '_variables'; +@import '_mixins'; + +.button { + padding: 0 13px; +} + +input[type=text] { + @include peertube-input-text(100%); + display: block; +} + +.form-group { + margin: 20px 0; +} + + diff --git a/client/src/app/shared/confirm/confirm.component.ts b/client/src/app/shared/confirm/confirm.component.ts new file mode 100644 index 000000000..63c163da6 --- /dev/null +++ b/client/src/app/shared/confirm/confirm.component.ts @@ -0,0 +1,68 @@ +import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core' +import { ConfirmService } from '@app/core/confirm/confirm.service' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { NgbModal } from '@ng-bootstrap/ng-bootstrap' +import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' + +@Component({ + selector: 'my-confirm', + templateUrl: './confirm.component.html', + styleUrls: [ './confirm.component.scss' ] +}) +export class ConfirmComponent implements OnInit { + @ViewChild('confirmModal') confirmModal: ElementRef + + title = '' + message = '' + expectedInputValue = '' + inputLabel = '' + + inputValue = '' + confirmButtonText = '' + + private openedModal: NgbModalRef + + constructor ( + private modalService: NgbModal, + private confirmService: ConfirmService, + private i18n: I18n + ) { } + + ngOnInit () { + this.confirmService.showConfirm.subscribe( + ({ title, message, expectedInputValue, inputLabel, confirmButtonText }) => { + this.title = title + this.message = message + + this.inputLabel = inputLabel + this.expectedInputValue = expectedInputValue + + this.confirmButtonText = confirmButtonText || this.i18n('Confirm') + + this.showModal() + } + ) + } + + @HostListener('document:keydown.enter') + confirm () { + if (this.openedModal) this.openedModal.close() + } + + isConfirmationDisabled () { + // No input validation + if (!this.inputLabel || !this.expectedInputValue) return false + + return this.expectedInputValue !== this.inputValue + } + + showModal () { + this.inputValue = '' + + this.openedModal = this.modalService.open(this.confirmModal) + + this.openedModal.result + .then(() => this.confirmService.confirmResponse.next(true)) + .catch(() => this.confirmService.confirmResponse.next(false)) + } +} diff --git a/client/src/app/shared/icons/global-icon.component.html b/client/src/app/shared/icons/global-icon.component.html new file mode 100644 index 000000000..e69de29bb diff --git a/client/src/app/shared/icons/global-icon.component.scss b/client/src/app/shared/icons/global-icon.component.scss new file mode 100644 index 000000000..6805fb6f7 --- /dev/null +++ b/client/src/app/shared/icons/global-icon.component.scss @@ -0,0 +1,4 @@ +/deep/ svg { + width: inherit; + height: inherit; +} diff --git a/client/src/app/shared/icons/global-icon.component.ts b/client/src/app/shared/icons/global-icon.component.ts new file mode 100644 index 000000000..5b9377e3e --- /dev/null +++ b/client/src/app/shared/icons/global-icon.component.ts @@ -0,0 +1,47 @@ +import { Component, ElementRef, Input, OnInit } from '@angular/core' + +const icons = { + 'add': require('../../../assets/images/global/add.html'), + 'syndication': require('../../../assets/images/global/syndication.html'), + 'help': require('../../../assets/images/global/help.html'), + 'sparkle': require('../../../assets/images/global/sparkle.html'), + 'alert': require('../../../assets/images/global/alert.html'), + 'cloud-error': require('../../../assets/images/global/cloud-error.html'), + 'user-add': require('../../../assets/images/global/user-add.html'), + 'no': require('../../../assets/images/global/no.html'), + 'cloud-download': require('../../../assets/images/global/cloud-download.html'), + 'undo': require('../../../assets/images/global/undo.html'), + 'circle-tick': require('../../../assets/images/global/circle-tick.html'), + 'cog': require('../../../assets/images/global/cog.html'), + 'download': require('../../../assets/images/global/download.html'), + 'edit': require('../../../assets/images/global/edit.html'), + 'im-with-her': require('../../../assets/images/global/im-with-her.html'), + 'delete': require('../../../assets/images/global/delete.html'), + 'cross': require('../../../assets/images/global/cross.html'), + 'validate': require('../../../assets/images/global/validate.html'), + 'dislike': require('../../../assets/images/video/dislike.html'), + 'heart': require('../../../assets/images/video/heart.html'), + 'like': require('../../../assets/images/video/like.html'), + 'more': require('../../../assets/images/video/more.html'), + 'share': require('../../../assets/images/video/share.html'), + 'upload': require('../../../assets/images/video/upload.html') +} + +export type GlobalIconName = keyof typeof icons + +@Component({ + selector: 'my-global-icon', + template: '', + styleUrls: [ './global-icon.component.scss' ] +}) +export class GlobalIconComponent implements OnInit { + @Input() iconName: GlobalIconName + + constructor (private el: ElementRef) {} + + ngOnInit () { + const nativeElement = this.el.nativeElement + + nativeElement.innerHTML = icons[this.iconName] + } +} diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html index 08a2fc367..444425c9f 100644 --- a/client/src/app/shared/misc/help.component.html +++ b/client/src/app/shared/misc/help.component.html @@ -25,4 +25,6 @@ [autoClose]="true" (onHidden)="onPopoverHidden()" (onShown)="onPopoverShown()" -> +> + + diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss index 047e53fab..4565d457a 100644 --- a/client/src/app/shared/misc/help.component.scss +++ b/client/src/app/shared/misc/help.component.scss @@ -2,13 +2,15 @@ @import '_mixins'; .help-tooltip-button { - @include icon(17px); - - position: relative; - top: -2px; - background-image: url('../../../assets/images/global/help.svg'); + cursor: pointer; border: none; - margin: 5px; + + my-global-icon { + width: 17px; + position: relative; + top: -2px; + margin: 5px; + } } /deep/ { @@ -24,8 +26,13 @@ color: #000; box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); + p:last-child { + margin-bottom: 0; + } + ul { padding-left: 20px; + margin-bottom: 0; } } } diff --git a/client/src/app/shared/moderation/user-ban-modal.component.html b/client/src/app/shared/moderation/user-ban-modal.component.html index fa5cb7404..f38ea543d 100644 --- a/client/src/app/shared/moderation/user-ban-modal.component.html +++ b/client/src/app/shared/moderation/user-ban-modal.component.html @@ -1,7 +1,8 @@

Ban

- + +
@@ -19,7 +20,7 @@
- Cancel + Cancel
- \ No newline at end of file + diff --git a/client/src/app/shared/moderation/user-ban-modal.component.ts b/client/src/app/shared/moderation/user-ban-modal.component.ts index f755ba0e8..942765301 100644 --- a/client/src/app/shared/moderation/user-ban-modal.component.ts +++ b/client/src/app/shared/moderation/user-ban-modal.component.ts @@ -42,7 +42,7 @@ export class UserBanModalComponent extends FormReactive implements OnInit { this.openedModal = this.modalService.open(this.modal) } - hideBanUserModal () { + hide () { this.usersToBan = undefined this.openedModal.close() } @@ -60,7 +60,7 @@ export class UserBanModalComponent extends FormReactive implements OnInit { this.notifier.success(message) this.userBanned.emit(this.usersToBan) - this.hideBanUserModal() + this.hide() }, err => this.notifier.error(err.message) diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index 384f5d722..6f8625c7e 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -67,6 +67,8 @@ import { UserNotificationService } from '@app/shared/users/user-notification.ser import { UserNotificationsComponent } from '@app/shared/users/user-notifications.component' import { InstanceService } from '@app/shared/instance/instance.service' import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/shared/renderer' +import { ConfirmComponent } from '@app/shared/confirm/confirm.component' +import { GlobalIconComponent } from '@app/shared/icons/global-icon.component' @NgModule({ imports: [ @@ -110,7 +112,9 @@ import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/sha UserBanModalComponent, UserModerationDropdownComponent, TopMenuDropdownComponent, - UserNotificationsComponent + UserNotificationsComponent, + ConfirmComponent, + GlobalIconComponent ], exports: [ @@ -151,6 +155,8 @@ import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/sha UserModerationDropdownComponent, TopMenuDropdownComponent, UserNotificationsComponent, + ConfirmComponent, + GlobalIconComponent, NumberFormatterPipe, ObjectLengthPipe, diff --git a/client/src/app/shared/users/user-notification.model.ts b/client/src/app/shared/users/user-notification.model.ts index 5ff816fb8..c5996a8a1 100644 --- a/client/src/app/shared/users/user-notification.model.ts +++ b/client/src/app/shared/users/user-notification.model.ts @@ -1,4 +1,5 @@ -import { UserNotification as UserNotificationServer, UserNotificationType, VideoInfo } from '../../../../../shared' +import { UserNotification as UserNotificationServer, UserNotificationType, VideoInfo, ActorInfo } from '../../../../../shared' +import { Actor } from '@app/shared/actor/actor.model' export class UserNotification implements UserNotificationServer { id: number @@ -6,10 +7,7 @@ export class UserNotification implements UserNotificationServer { read: boolean video?: VideoInfo & { - channel: { - id: number - displayName: string - } + channel: ActorInfo & { avatarUrl?: string } } videoImport?: { @@ -23,10 +21,7 @@ export class UserNotification implements UserNotificationServer { comment?: { id: number threadId: number - account: { - id: number - displayName: string - } + account: ActorInfo & { avatarUrl?: string } video: VideoInfo } @@ -40,18 +35,11 @@ export class UserNotification implements UserNotificationServer { video: VideoInfo } - account?: { - id: number - displayName: string - name: string - } + account?: ActorInfo & { avatarUrl?: string } actorFollow?: { id: number - follower: { - name: string - displayName: string - } + follower: ActorInfo & { avatarUrl?: string } following: { type: 'account' | 'channel' name: string @@ -76,12 +64,22 @@ export class UserNotification implements UserNotificationServer { this.read = hash.read this.video = hash.video + if (this.video) this.setAvatarUrl(this.video.channel) + this.videoImport = hash.videoImport + this.comment = hash.comment + if (this.comment) this.setAvatarUrl(this.comment.account) + this.videoAbuse = hash.videoAbuse + this.videoBlacklist = hash.videoBlacklist + this.account = hash.account + if (this.account) this.setAvatarUrl(this.account) + this.actorFollow = hash.actorFollow + if (this.actorFollow) this.setAvatarUrl(this.actorFollow.follower) this.createdAt = hash.createdAt this.updatedAt = hash.updatedAt @@ -150,4 +148,7 @@ export class UserNotification implements UserNotificationServer { return videoImport.targetUrl || videoImport.magnetUri || videoImport.torrentName } + private setAvatarUrl (actor: { avatarUrl?: string, avatar?: { path: string } }) { + actor.avatarUrl = Actor.GET_ACTOR_AVATAR_URL(actor) + } } diff --git a/client/src/app/shared/users/user-notification.service.ts b/client/src/app/shared/users/user-notification.service.ts index 67ed8f74e..f8a30955d 100644 --- a/client/src/app/shared/users/user-notification.service.ts +++ b/client/src/app/shared/users/user-notification.service.ts @@ -15,8 +15,6 @@ export class UserNotificationService { static BASE_NOTIFICATIONS_URL = environment.apiUrl + '/api/v1/users/me/notifications' static BASE_NOTIFICATION_SETTINGS = environment.apiUrl + '/api/v1/users/me/notification-settings' - private socket: SocketIOClient.Socket - constructor ( private auth: AuthService, private authHttp: HttpClient, diff --git a/client/src/app/shared/users/user-notifications.component.html b/client/src/app/shared/users/user-notifications.component.html index 86379d941..caa518e7f 100644 --- a/client/src/app/shared/users/user-notifications.component.html +++ b/client/src/app/shared/users/user-notifications.component.html @@ -1,61 +1,101 @@
You don't have notifications.
-
+
-
+ - {{ notification.video.channel.displayName }} published a new video + + +
+ {{ notification.video.channel.displayName }} published a new video +
- Your video {{ notification.video.name }} has been unblacklisted + + +
+ Your video {{ notification.video.name }} has been unblacklisted +
- Your video {{ notification.videoBlacklist.video.name }} has been blacklisted + + +
+ Your video {{ notification.videoBlacklist.video.name }} has been blacklisted +
- A new video abuse has been created on video {{ notification.videoAbuse.video.name }} + + +
+ A new video abuse has been created on video {{ notification.videoAbuse.video.name }} +
- {{ notification.comment.account.displayName }} commented your video {{ notification.comment.video.name }} + + +
+ {{ notification.comment.account.displayName }} commented your video {{ notification.comment.video.name }} +
- Your video {{ notification.video.name }} has been published + + +
+ Your video {{ notification.video.name }} has been published +
- Your video import {{ notification.videoImportIdentifier }} succeeded + + +
+ Your video import {{ notification.videoImportIdentifier }} succeeded +
- Your video import {{ notification.videoImportIdentifier }} failed + + +
+ Your video import {{ notification.videoImportIdentifier }} failed +
- User {{ notification.account.name }} registered on your instance + + +
+ User {{ notification.account.name }} registered on your instance +
- {{ notification.actorFollow.follower.displayName }} is following + - - your channel {{ notification.actorFollow.following.displayName }} - - your account +
+ {{ notification.actorFollow.follower.displayName }} is following + + your channel {{ notification.actorFollow.following.displayName }} + your account +
- {{ notification.comment.account.displayName }} mentioned you on video {{ notification.comment.video.name }} + + +
+ {{ notification.comment.account.displayName }} mentioned you on video {{ notification.comment.video.name }} +
-
+ -
-
-
+
{{ notification.createdAt | myFromNow }}
diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss index 0ae26ea39..315d504c9 100644 --- a/client/src/app/shared/users/user-notifications.component.scss +++ b/client/src/app/shared/users/user-notifications.component.scss @@ -1,3 +1,6 @@ +@import '_variables'; +@import '_mixins'; + .no-notification { display: flex; justify-content: center; @@ -7,31 +10,42 @@ .notification { display: flex; - justify-content: space-between; align-items: center; font-size: inherit; - padding: 15px 10px; + padding: 15px 5px 15px 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.10); - .mark-as-read { - min-width: 35px; + &.unread { + background-color: rgba(0, 0, 0, 0.05); + } + + my-global-icon { + width: 24px; + margin-right: 11px; + margin-left: 3px; - .glyphicon { - display: none; - cursor: pointer; - color: rgba(20, 20, 20, 0.5) - } + @include apply-svg-color(#333); } - &.unread { - background-color: rgba(0, 0, 0, 0.05); + .avatar { + @include avatar(30px); + + margin-right: 10px; + } - &:hover .mark-as-read .glyphicon { - display: block; + .message { + flex-grow: 1; - &:hover { - color: rgba(20, 20, 20, 0.8); - } + a { + font-weight: $font-semibold; } } + + .from-date { + font-size: 0.85em; + color: $grey-foreground-color; + padding-left: 5px; + min-width: 70px; + text-align: right; + } } diff --git a/client/src/app/shared/users/user-notifications.component.ts b/client/src/app/shared/users/user-notifications.component.ts index e3913ba56..b5f9fd399 100644 --- a/client/src/app/shared/users/user-notifications.component.ts +++ b/client/src/app/shared/users/user-notifications.component.ts @@ -20,11 +20,7 @@ export class UserNotificationsComponent implements OnInit { // So we can access it in the template UserNotificationType = UserNotificationType - componentPagination: ComponentPagination = { - currentPage: 1, - itemsPerPage: this.itemsPerPage, - totalItems: null - } + componentPagination: ComponentPagination constructor ( private userNotificationService: UserNotificationService, @@ -32,6 +28,12 @@ export class UserNotificationsComponent implements OnInit { ) { } ngOnInit () { + this.componentPagination = { + currentPage: 1, + itemsPerPage: this.itemsPerPage, // Reset items per page, because of the @Input() variable + totalItems: null + } + this.loadMoreNotifications() } @@ -58,6 +60,8 @@ export class UserNotificationsComponent implements OnInit { } markAsRead (notification: UserNotification) { + if (notification.read) return + this.userNotificationService.markAsRead(notification) .subscribe( () => { diff --git a/client/src/app/shared/video/feed.component.html b/client/src/app/shared/video/feed.component.html index 16116ba88..f7624ec01 100644 --- a/client/src/app/shared/video/feed.component.html +++ b/client/src/app/shared/video/feed.component.html @@ -1,10 +1,11 @@
- + class="icon-syndication" role="button" iconName="syndication" + > + {{ item.label }} -
\ No newline at end of file +
diff --git a/client/src/app/shared/video/feed.component.scss b/client/src/app/shared/video/feed.component.scss index 385764be0..ed1dc17d3 100644 --- a/client/src/app/shared/video/feed.component.scss +++ b/client/src/app/shared/video/feed.component.scss @@ -1,3 +1,4 @@ +@import '_variables'; @import '_mixins'; .video-feed { @@ -6,14 +7,12 @@ display: block; } - .icon { - @include icon(12px); + my-global-icon { + cursor: pointer; + width: 12px; + position: relative; + top: -2px; - &.icon-syndication { - position: relative; - top: -2px; - background-color: var(--mainForegroundColor); - mask-image: url('../../../assets/images/global/syndication.svg'); - } + @include apply-svg-color(var(--mainForegroundColor)) } -} \ No newline at end of file +} diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss index 895879adc..f44bdf9a9 100644 --- a/client/src/app/shared/video/video-miniature.component.scss +++ b/client/src/app/shared/video/video-miniature.component.scss @@ -50,10 +50,10 @@ text-overflow: ellipsis; white-space: nowrap; font-size: 13px; - color: #585858; + color: $grey-foreground-color; &:hover { - color: #303030; + color: $grey-foreground-hover-color; } } } diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts index b92c96450..6ea83d13b 100644 --- a/client/src/app/shared/video/video.model.ts +++ b/client/src/app/shared/video/video.model.ts @@ -53,7 +53,7 @@ export class Video implements VideoServerModel { displayName: string url: string host: string - avatar: Avatar + avatar?: Avatar } channel: { @@ -63,7 +63,7 @@ export class Video implements VideoServerModel { displayName: string url: string host: string - avatar: Avatar + avatar?: Avatar } userHistory?: { diff --git a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html index 30aefdbfc..19043eee6 100644 --- a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html +++ b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html @@ -3,7 +3,7 @@

Add caption

- +
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html index bd52d686a..092c0e862 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.html +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html @@ -143,7 +143,7 @@
- + Add another caption
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss index 25db8e8ed..cc32fb254 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss @@ -42,7 +42,7 @@ my-peertube-checkbox { text-align: right; .create-caption { - @include create-button('../../../../assets/images/global/add.svg'); + @include create-button; } } @@ -100,13 +100,14 @@ my-peertube-checkbox { display: inline-block; margin-right: 25px; - color: #585858; + color: $grey-foreground-color; font-size: 15px; } .submit-button { @include peertube-button; @include orange-button; + @include button-with-icon(20px, 1px); display: inline-block; @@ -119,16 +120,6 @@ my-peertube-checkbox { color: inherit; font-weight: $font-semibold; } - - .icon.icon-validate { - @include icon(20px); - - cursor: inherit; - position: relative; - top: -1px; - margin-right: 4px; - background-image: url('../../../../assets/images/global/validate.svg'); - } } } @@ -202,7 +193,7 @@ p-calendar { top: -1px; height: auto !important; vertical-align: middle !important; - fill: #585858 !important; + fill: $grey-foreground-color !important; } &:hover { diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html index 11a81ad66..28eb143c9 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html +++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html @@ -1,6 +1,6 @@
-
-
+
+
Select the torrent to import @@ -66,7 +66,7 @@ (click)="updateSecondStep()" [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }" > - +
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss index 00626cd7b..6d59ed834 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss +++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss @@ -1,45 +1,7 @@ @import 'variables'; @import 'mixins'; -$width-size: 190px; - -.peertube-select-container { - @include peertube-select-container($width-size); -} - -.alert.alert-danger { - text-align: center; - - & > div { - font-weight: $font-semibold; - } -} - -.import-video-torrent { - display: flex; - flex-direction: column; - align-items: center; - - .icon.icon-upload { - @include icon(90px); - margin-bottom: 25px; - cursor: default; - - background-image: url('../../../../assets/images/video/upload.svg'); - } - - .button-file { - @include peertube-button-file(auto); - - min-width: 190px; - } - - .button-file-extension { - display: block; - font-size: 12px; - margin-top: 5px; - } - +.first-step-block { .torrent-or-magnet { margin: 10px 0; } @@ -47,19 +9,6 @@ $width-size: 190px; .form-group-magnet-uri { margin-bottom: 40px; } - - input[type=text] { - @include peertube-input-text($width-size); - display: block; - } - - input[type=button] { - @include peertube-button; - @include orange-button; - - width: $width-size; - margin-top: 30px; - } } diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts index 63db06919..307806bb9 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts +++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts @@ -18,7 +18,8 @@ import { scrollToTop } from '@app/shared/misc/utils' templateUrl: './video-import-torrent.component.html', styleUrls: [ '../shared/video-edit.component.scss', - './video-import-torrent.component.scss' + './video-import-torrent.component.scss', + './video-send.scss' ] }) export class VideoImportTorrentComponent extends VideoSend implements OnInit, CanComponentDeactivate { diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html index 533446672..3550c3585 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html +++ b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html @@ -1,6 +1,6 @@
-
-
+
+
@@ -59,7 +59,7 @@ (click)="updateSecondStep()" [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }" > - +
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss deleted file mode 100644 index e907edc70..000000000 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss +++ /dev/null @@ -1,45 +0,0 @@ -@import 'variables'; -@import 'mixins'; - -$width-size: 190px; - -.peertube-select-container { - @include peertube-select-container($width-size); -} - -.alert.alert-danger { - text-align: center; - - & > div { - font-weight: $font-semibold; - } -} - -.import-video-url { - display: flex; - flex-direction: column; - align-items: center; - - .icon.icon-upload { - @include icon(90px); - margin-bottom: 25px; - cursor: default; - - background-image: url('../../../../assets/images/video/upload.svg'); - } - - input[type=text] { - @include peertube-input-text($width-size); - display: block; - } - - input[type=button] { - @include peertube-button; - @include orange-button; - - width: $width-size; - margin-top: 30px; - } -} - - diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts index a1810b7a0..257c6e5db 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts +++ b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts @@ -18,7 +18,7 @@ import { scrollToTop } from '@app/shared/misc/utils' templateUrl: './video-import-url.component.html', styleUrls: [ '../shared/video-edit.component.scss', - './video-import-url.component.scss' + './video-send.scss' ] }) export class VideoImportUrlComponent extends VideoSend implements OnInit, CanComponentDeactivate { diff --git a/client/src/app/videos/+video-edit/video-add-components/video-send.scss b/client/src/app/videos/+video-edit/video-add-components/video-send.scss new file mode 100644 index 000000000..8769dd302 --- /dev/null +++ b/client/src/app/videos/+video-edit/video-add-components/video-send.scss @@ -0,0 +1,54 @@ +@import 'variables'; +@import 'mixins'; + +$width-size: 190px; + +.alert.alert-danger { + text-align: center; + + & > div { + font-weight: $font-semibold; + } +} + +.first-step-block { + display: flex; + flex-direction: column; + align-items: center; + + .upload-icon { + width: 90px; + margin-bottom: 25px; + + @include apply-svg-color(#C6C6C6); + } + + .peertube-select-container { + @include peertube-select-container($width-size); + } + + input[type=text] { + @include peertube-input-text($width-size); + display: block; + } + + input[type=button] { + @include peertube-button; + @include orange-button; + + width: $width-size; + margin-top: 30px; + } + + .button-file { + @include peertube-button-file(auto); + + min-width: 190px; + } + + .button-file-extension { + display: block; + font-size: 12px; + margin-top: 5px; + } +} diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html index 826e54d25..b252cd60a 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html +++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html @@ -1,6 +1,6 @@
-
-
+
+
Select the file to upload @@ -61,7 +61,7 @@ (click)="updateSecondStep()" [ngClass]="{ disabled: isPublishingButtonDisabled() }" > - +
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss index 4b2c86ae9..8adf8f169 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss +++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss @@ -1,47 +1,9 @@ @import 'variables'; @import 'mixins'; -.peertube-select-container { - @include peertube-select-container(190px); -} - -.alert.alert-danger { - text-align: center; - - & > div { - font-weight: $font-semibold; - } -} - -.upload-video { - display: flex; - flex-direction: column; - align-items: center; - - .form-group-channel { - margin-bottom: 20px; - margin-top: 35px; - } - - .icon.icon-upload { - @include icon(90px); - margin-bottom: 25px; - cursor: default; - - background-image: url('../../../../assets/images/video/upload.svg'); - } - - .button-file { - @include peertube-button-file(auto); - - min-width: 190px; - } - - .button-file-extension { - display: block; - font-size: 12px; - margin-top: 5px; - } +.first-step-block .form-group-channel { + margin-bottom: 20px; + margin-top: 35px; } .upload-progress-cancel { diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts index aa40f8781..e4d54b654 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts +++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts @@ -20,7 +20,8 @@ import { scrollToTop } from '@app/shared/misc/utils' templateUrl: './video-upload.component.html', styleUrls: [ '../shared/video-edit.component.scss', - './video-upload.component.scss' + './video-upload.component.scss', + './video-send.scss' ] }) export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate { diff --git a/client/src/app/videos/+video-edit/video-update.component.html b/client/src/app/videos/+video-edit/video-update.component.html index 0457778c0..4992bb369 100644 --- a/client/src/app/videos/+video-edit/video-update.component.html +++ b/client/src/app/videos/+video-edit/video-update.component.html @@ -13,7 +13,7 @@
- +
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss index 84da5727e..731ecbf8f 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss @@ -41,7 +41,7 @@ } .comment-date { - color: #585858; + color: $grey-foreground-color; margin-left: 10px; } } @@ -69,7 +69,7 @@ .comment-action-reply, .comment-action-delete { - color: #585858; + color: $grey-foreground-color; cursor: pointer; margin-right: 10px; @@ -108,4 +108,4 @@ .root-comment { font-size: 14px; } -} \ No newline at end of file +} diff --git a/client/src/app/videos/+video-watch/modal/video-blacklist.component.html b/client/src/app/videos/+video-watch/modal/video-blacklist.component.html index 83600fa81..1a87bdcd4 100644 --- a/client/src/app/videos/+video-watch/modal/video-blacklist.component.html +++ b/client/src/app/videos/+video-watch/modal/video-blacklist.component.html @@ -1,7 +1,7 @@

Blacklist video

- +
diff --git a/client/src/app/videos/+video-watch/modal/video-download.component.html b/client/src/app/videos/+video-watch/modal/video-download.component.html index f46f92a17..2bb5d6d37 100644 --- a/client/src/app/videos/+video-watch/modal/video-download.component.html +++ b/client/src/app/videos/+video-watch/modal/video-download.component.html @@ -1,7 +1,7 @@

Download video

- +
diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.html b/client/src/app/videos/+video-watch/modal/video-report.component.html index 733c01be0..b9434da26 100644 --- a/client/src/app/videos/+video-watch/modal/video-report.component.html +++ b/client/src/app/videos/+video-watch/modal/video-report.component.html @@ -1,7 +1,7 @@

Report video

- +
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html index 301f67f2d..9f3c37fe8 100644 --- a/client/src/app/videos/+video-watch/modal/video-share.component.html +++ b/client/src/app/videos/+video-watch/modal/video-share.component.html @@ -1,7 +1,7 @@

Share

- +
diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.html b/client/src/app/videos/+video-watch/modal/video-support.component.html index 00c304709..2a05224a8 100644 --- a/client/src/app/videos/+video-watch/modal/video-support.component.html +++ b/client/src/app/videos/+video-watch/modal/video-support.component.html @@ -1,7 +1,7 @@

Support

- +
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index 770785d02..709eb91a8 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -53,55 +53,57 @@
- +
- +
- + Support
- + Share
- +
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index 2586a2204..b03ed197d 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -183,6 +183,8 @@ $other-videos-width: 260px; .action-button { @include peertube-button; @include grey-button; + @include button-with-icon(21px, 0, -1px); + @include apply-svg-color($grey-foreground-color); font-size: 15px; font-weight: $font-semibold; @@ -194,53 +196,25 @@ $other-videos-width: 260px; display: none; } - .icon { - @include icon(21px); - - position: relative; - top: -2px; - - &.icon-like { - background-image: url('../../../assets/images/video/like-grey.svg'); - } - - &.icon-dislike { - background-image: url('../../../assets/images/video/dislike-grey.svg'); - } - - &.icon-support { - background-image: url('../../../assets/images/video/heart.svg'); - } - - &.icon-share { - background-image: url('../../../assets/images/video/share.svg'); - } - - &.icon-more { - background-image: url('../../../assets/images/video/more.svg'); - top: -1px; - } - } - - .icon-text { - margin-left: 3px; - } - &.action-button-like.activated { background-color: $green; - .icon-like { - background-image: url('../../../assets/images/video/like-white.svg'); + my-global-icon { + @include apply-svg-color(#fff); } } &.action-button-dislike.activated { background-color: $red; - .icon-dislike { - background-image: url('../../../assets/images/video/dislike-white.svg'); + my-global-icon { + @include apply-svg-color(#fff); } } + + .icon-text { + margin-left: 3px; + } } .action-more { @@ -249,36 +223,12 @@ $other-videos-width: 260px; .dropdown-menu .dropdown-item { padding: 6px 24px; - .icon { - @include icon(24px); + my-global-icon { + width: 24px; margin-right: 10px; position: relative; - top: -1px; - - &.icon-download { - background-image: url('../../../assets/images/video/download-black.svg'); - } - - &.icon-edit { - background-image: url('../../../assets/images/global/edit-black.svg'); - } - - &.icon-alert { - background-image: url('../../../assets/images/video/alert.svg'); - } - - &.icon-blacklist { - background-image: url('../../../assets/images/video/blacklist.svg'); - } - - &.icon-unblacklist { - background-image: url('../../../assets/images/global/undo.svg'); - } - - &.icon-delete { - background-image: url('../../../assets/images/global/delete-black.svg'); - } + top: -2px; } } } @@ -320,7 +270,7 @@ $other-videos-width: 260px; .video-info-description-more { cursor: pointer; font-weight: $font-semibold; - color: #585858; + color: $grey-foreground-color; font-size: 14px; .glyphicon { @@ -339,7 +289,7 @@ $other-videos-width: 260px; min-width: 91px; padding-right: 5px; display: inline-block; - color: #585858; + color: $grey-foreground-color; font-weight: $font-bold; } diff --git a/client/src/assets/images/global/add.html b/client/src/assets/images/global/add.html new file mode 100644 index 000000000..bfb0a52bc --- /dev/null +++ b/client/src/assets/images/global/add.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/client/src/assets/images/global/add.svg b/client/src/assets/images/global/add.svg deleted file mode 100644 index 42b269c43..000000000 --- a/client/src/assets/images/global/add.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/client/src/assets/images/global/alert.html b/client/src/assets/images/global/alert.html new file mode 100644 index 000000000..7c8c02074 --- /dev/null +++ b/client/src/assets/images/global/alert.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/client/src/assets/images/global/circle-tick.html b/client/src/assets/images/global/circle-tick.html new file mode 100644 index 000000000..2327de6be --- /dev/null +++ b/client/src/assets/images/global/circle-tick.html @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/client/src/assets/images/global/cloud-download.html b/client/src/assets/images/global/cloud-download.html new file mode 100644 index 000000000..b2634fd1f --- /dev/null +++ b/client/src/assets/images/global/cloud-download.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/client/src/assets/images/global/cloud-error.html b/client/src/assets/images/global/cloud-error.html new file mode 100644 index 000000000..1a3483805 --- /dev/null +++ b/client/src/assets/images/global/cloud-error.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/client/src/assets/images/global/cog.html b/client/src/assets/images/global/cog.html new file mode 100644 index 000000000..b74a180e7 --- /dev/null +++ b/client/src/assets/images/global/cog.html @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/client/src/assets/images/global/cross.html b/client/src/assets/images/global/cross.html new file mode 100644 index 000000000..962578487 --- /dev/null +++ b/client/src/assets/images/global/cross.html @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/client/src/assets/images/global/cross.svg b/client/src/assets/images/global/cross.svg deleted file mode 100644 index d47a75996..000000000 --- a/client/src/assets/images/global/cross.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/client/src/assets/images/global/delete-black.svg b/client/src/assets/images/global/delete-black.svg deleted file mode 100644 index 04ddc23aa..000000000 --- a/client/src/assets/images/global/delete-black.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/client/src/assets/images/global/delete-grey.svg b/client/src/assets/images/global/delete-grey.svg deleted file mode 100644 index 67e9e2ce7..000000000 --- a/client/src/assets/images/global/delete-grey.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/client/src/assets/images/global/delete-white.svg b/client/src/assets/images/global/delete-white.svg deleted file mode 100644 index 9c52de557..000000000 --- a/client/src/assets/images/global/delete-white.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/client/src/assets/images/global/delete.html b/client/src/assets/images/global/delete.html new file mode 100644 index 000000000..a0d9a0cac --- /dev/null +++ b/client/src/assets/images/global/delete.html @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/client/src/assets/images/global/download.html b/client/src/assets/images/global/download.html new file mode 100644 index 000000000..259506f31 --- /dev/null +++ b/client/src/assets/images/global/download.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/client/src/assets/images/global/edit-black.svg b/client/src/assets/images/global/edit-black.svg deleted file mode 100644 index 0176b0f37..000000000 --- a/client/src/assets/images/global/edit-black.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - edit - Created with Sketch. - - - - - - - - - - diff --git a/client/src/assets/images/global/edit-grey.svg b/client/src/assets/images/global/edit-grey.svg deleted file mode 100644 index 23ece68f1..000000000 --- a/client/src/assets/images/global/edit-grey.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - edit - Created with Sketch. - - - - - - - - - - diff --git a/client/src/assets/images/global/edit.html b/client/src/assets/images/global/edit.html new file mode 100644 index 000000000..f04183c2d --- /dev/null +++ b/client/src/assets/images/global/edit.html @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/client/src/assets/images/global/help.html b/client/src/assets/images/global/help.html new file mode 100644 index 000000000..27e9bee6f --- /dev/null +++ b/client/src/assets/images/global/help.html @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/client/src/assets/images/global/help.svg b/client/src/assets/images/global/help.svg deleted file mode 100644 index 48252febe..000000000 --- a/client/src/assets/images/global/help.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/client/src/assets/images/global/im-with-her.html b/client/src/assets/images/global/im-with-her.html new file mode 100644 index 000000000..de2c62e96 --- /dev/null +++ b/client/src/assets/images/global/im-with-her.html @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/client/src/assets/images/global/im-with-her.svg b/client/src/assets/images/global/im-with-her.svg deleted file mode 100644 index 31d4754fd..000000000 --- a/client/src/assets/images/global/im-with-her.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - im-with-her - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/client/src/assets/images/global/no.html b/client/src/assets/images/global/no.html new file mode 100644 index 000000000..bb7b28514 --- /dev/null +++ b/client/src/assets/images/global/no.html @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/client/src/assets/images/global/sparkle.html b/client/src/assets/images/global/sparkle.html new file mode 100644 index 000000000..3b29fefb9 --- /dev/null +++ b/client/src/assets/images/global/sparkle.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/client/src/assets/images/global/syndication.html b/client/src/assets/images/global/syndication.html new file mode 100644 index 000000000..e6c88a4db --- /dev/null +++ b/client/src/assets/images/global/syndication.html @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/assets/images/global/syndication.svg b/client/src/assets/images/global/syndication.svg deleted file mode 100644 index cb74cf81b..000000000 --- a/client/src/assets/images/global/syndication.svg +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/client/src/assets/images/global/tick.html b/client/src/assets/images/global/tick.html new file mode 100644 index 000000000..4784b4807 --- /dev/null +++ b/client/src/assets/images/global/tick.html @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/client/src/assets/images/global/tick.svg b/client/src/assets/images/global/tick.svg deleted file mode 100644 index 230caa111..000000000 --- a/client/src/assets/images/global/tick.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/client/src/assets/images/global/undo.html b/client/src/assets/images/global/undo.html new file mode 100644 index 000000000..228245c86 --- /dev/null +++ b/client/src/assets/images/global/undo.html @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/client/src/assets/images/global/undo.svg b/client/src/assets/images/global/undo.svg deleted file mode 100644 index f1cca03f7..000000000 --- a/client/src/assets/images/global/undo.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/client/src/assets/images/global/user-add.html b/client/src/assets/images/global/user-add.html new file mode 100644 index 000000000..57df23c74 --- /dev/null +++ b/client/src/assets/images/global/user-add.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/client/src/assets/images/global/validate.html b/client/src/assets/images/global/validate.html new file mode 100644 index 000000000..520624ff6 --- /dev/null +++ b/client/src/assets/images/global/validate.html @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/client/src/assets/images/global/validate.svg b/client/src/assets/images/global/validate.svg deleted file mode 100644 index 5c7ee9d14..000000000 --- a/client/src/assets/images/global/validate.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/client/src/assets/images/header/upload-white.svg b/client/src/assets/images/header/upload-white.svg deleted file mode 100644 index 2b07caf76..000000000 --- a/client/src/assets/images/header/upload-white.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - cloud-upload - Created with Sketch. - - - - - - - - - - - diff --git a/client/src/assets/images/video/alert.svg b/client/src/assets/images/video/alert.svg deleted file mode 100644 index 5b43534ad..000000000 --- a/client/src/assets/images/video/alert.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - alert - Created with Sketch. - - - - - - - - - - - diff --git a/client/src/assets/images/video/blacklist.svg b/client/src/assets/images/video/blacklist.svg deleted file mode 100644 index 431c73816..000000000 --- a/client/src/assets/images/video/blacklist.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - no - Created with Sketch. - - - - - - - - - - diff --git a/client/src/assets/images/video/dislike-grey.svg b/client/src/assets/images/video/dislike-grey.svg deleted file mode 100644 index 56a7908fb..000000000 --- a/client/src/assets/images/video/dislike-grey.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/client/src/assets/images/video/dislike-white.svg b/client/src/assets/images/video/dislike-white.svg deleted file mode 100644 index cfc6eaa1f..000000000 --- a/client/src/assets/images/video/dislike-white.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/client/src/assets/images/video/dislike.html b/client/src/assets/images/video/dislike.html new file mode 100644 index 000000000..acde951e2 --- /dev/null +++ b/client/src/assets/images/video/dislike.html @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/client/src/assets/images/video/download-black.svg b/client/src/assets/images/video/download-black.svg deleted file mode 100644 index 501836746..000000000 --- a/client/src/assets/images/video/download-black.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - download - Created with Sketch. - - - - - - - - - - - diff --git a/client/src/assets/images/video/download-grey.svg b/client/src/assets/images/video/download-grey.svg deleted file mode 100644 index 5b0cca5ef..000000000 --- a/client/src/assets/images/video/download-grey.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - download - Created with Sketch. - - - - - - - - - - - diff --git a/client/src/assets/images/video/download-white.svg b/client/src/assets/images/video/download-white.svg deleted file mode 100644 index 0e66e06e8..000000000 --- a/client/src/assets/images/video/download-white.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - download - Created with Sketch. - - - - - - - - - - - diff --git a/client/src/assets/images/video/heart.html b/client/src/assets/images/video/heart.html new file mode 100644 index 000000000..618f64f10 --- /dev/null +++ b/client/src/assets/images/video/heart.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/client/src/assets/images/video/heart.svg b/client/src/assets/images/video/heart.svg deleted file mode 100644 index 5d64aee0f..000000000 --- a/client/src/assets/images/video/heart.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/client/src/assets/images/video/like-grey.svg b/client/src/assets/images/video/like-grey.svg deleted file mode 100644 index 5ef6c7b31..000000000 --- a/client/src/assets/images/video/like-grey.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - thumbs-up - Created with Sketch. - - - - - - - - - - diff --git a/client/src/assets/images/video/like-white.svg b/client/src/assets/images/video/like-white.svg deleted file mode 100644 index 88e5f6a9a..000000000 --- a/client/src/assets/images/video/like-white.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - thumbs-up - Created with Sketch. - - - - - - - - - - diff --git a/client/src/assets/images/video/like.html b/client/src/assets/images/video/like.html new file mode 100644 index 000000000..d0e71763b --- /dev/null +++ b/client/src/assets/images/video/like.html @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/client/src/assets/images/video/more.html b/client/src/assets/images/video/more.html new file mode 100644 index 000000000..39dcad10e --- /dev/null +++ b/client/src/assets/images/video/more.html @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/client/src/assets/images/video/more.svg b/client/src/assets/images/video/more.svg deleted file mode 100644 index dea392136..000000000 --- a/client/src/assets/images/video/more.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/client/src/assets/images/video/share.html b/client/src/assets/images/video/share.html new file mode 100644 index 000000000..7759b37af --- /dev/null +++ b/client/src/assets/images/video/share.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/client/src/assets/images/video/share.svg b/client/src/assets/images/video/share.svg deleted file mode 100644 index da0f43e81..000000000 --- a/client/src/assets/images/video/share.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - share - Created with Sketch. - - - - - - - - - - - diff --git a/client/src/assets/images/video/upload.html b/client/src/assets/images/video/upload.html new file mode 100644 index 000000000..3bc0d3a8a --- /dev/null +++ b/client/src/assets/images/video/upload.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/client/src/assets/images/video/upload.svg b/client/src/assets/images/video/upload.svg deleted file mode 100644 index c5b7cb443..000000000 --- a/client/src/assets/images/video/upload.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - cloud-upload - Created with Sketch. - - - - - - - - - - - diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 2356f9837..37837bfc0 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -23,7 +23,7 @@ body { // now beware node-sass requires interpolation // for css custom properties #{$var} --mainColor: #{$orange-color}; - --mainHoverColor: #{$orange-hoover-color}; + --mainHoverColor: #{$orange-hover-color}; --mainBackgroundColor: #{$bg-color}; --mainForegroundColor: #{$fg-color}; --menuBackgroundColor: #{$menu-background}; @@ -229,13 +229,12 @@ label { font-weight: $font-semibold; } - .close { + my-global-icon { @include icon(24px); position: relative; top: 3px; float: right; - background-image: url('../assets/images/global/cross.svg'); margin: 0; padding: 0; @@ -324,7 +323,7 @@ ngb-tabset.bootstrap { table { .action-button-edit, .action-button-delete { &:hover, &:active, &:focus, &[disabled], &.disabled { - background-color: $grey-color !important; + background-color: $grey-background-color !important; } } } @@ -389,4 +388,4 @@ table { } } } -} \ No newline at end of file +} diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index d6f391a45..1da240db8 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -55,6 +55,18 @@ hyphens: auto; } +@mixin apply-svg-color ($color) { + /deep/ svg { + path[fill="#000000"], g[fill="#000000"], rect[fill="#000000"] { + fill: $color; + } + + path[stroke="#000000"], g[stroke="#000000"], rect[stroke="#000000"] { + stroke: $color; + } + } +} + @mixin peertube-input-text($width) { display: inline-block; height: $button-height; @@ -110,22 +122,30 @@ color: #fff; background-color: #C6C6C6; } + + my-global-icon { + @include apply-svg-color(#fff) + } } @mixin grey-button { &, &:active, &:focus { - background-color: $grey-color; - color: #585858; + background-color: $grey-background-color; + color: $grey-foreground-color; } &:hover, &:active, &:focus, &[disabled], &.disabled { - color: #585858; - background-color: $grey-hoover-color; + color: $grey-foreground-color; + background-color: $grey-background-hover-color; } &[disabled], &.disabled { cursor: default; } + + my-global-icon { + @include apply-svg-color($grey-foreground-color) + } } @mixin peertube-button { @@ -148,6 +168,15 @@ @include peertube-button; } +@mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) { + my-global-icon { + position: relative; + width: $width; + margin-right: $margin-right; + top: $top; + } +} + @mixin peertube-button-file ($width) { position: relative; overflow: hidden; @@ -455,18 +484,10 @@ } } -@mixin create-button ($imageUrl) { +@mixin create-button { @include peertube-button-link; @include orange-button; - - .icon.icon-add { - @include icon(20px); - - position: relative; - top: -1px; - margin-right: 5px; - background-image: url($imageUrl); - } + @include button-with-icon(20px, 5px, -1px); } @mixin row-blocks { diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index fdf33b12a..3780b7501 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -6,10 +6,13 @@ $font-regular: 400; $font-semibold: 600; $font-bold: 700; -$grey-color: #E5E5E5; -$grey-hoover-color: #EFEFEF;; +$grey-background-color: #E5E5E5; +$grey-background-hover-color: #EFEFEF; +$grey-foreground-color: #585858; +$grey-foreground-hover-color: #303030; + $orange-color: #F1680D; -$orange-hoover-color: #F97D46; +$orange-hover-color: #F97D46; $bg-color: #fff; $fg-color: #000; diff --git a/client/yarn.lock b/client/yarn.lock index 5ed43117a..dee67c414 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -552,45 +552,21 @@ "@webassemblyjs/helper-wasm-bytecode" "1.7.10" "@webassemblyjs/wast-parser" "1.7.10" -"@webassemblyjs/ast@1.7.11": - version "1.7.11" - resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.7.11.tgz#b988582cafbb2b095e8b556526f30c90d057cace" - integrity sha512-ZEzy4vjvTzScC+SH8RBssQUawpaInUdMTYwYYLh54/s8TuT0gBLuyUnppKsVyZEi876VmmStKsUs28UxPgdvrA== - dependencies: - "@webassemblyjs/helper-module-context" "1.7.11" - "@webassemblyjs/helper-wasm-bytecode" "1.7.11" - "@webassemblyjs/wast-parser" "1.7.11" - "@webassemblyjs/floating-point-hex-parser@1.7.10": version "1.7.10" resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.7.10.tgz#ee63d729c6311a85863e369a473f9983f984e4d9" integrity sha512-gMsGbI6I3p/P1xL2UxqhNh1ga2HCsx5VBB2i5VvJFAaqAjd2PBTRULc3BpTydabUQEGlaZCzEUQhLoLG7TvEYQ== -"@webassemblyjs/floating-point-hex-parser@1.7.11": - version "1.7.11" - resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.7.11.tgz#a69f0af6502eb9a3c045555b1a6129d3d3f2e313" - integrity sha512-zY8dSNyYcgzNRNT666/zOoAyImshm3ycKdoLsyDw/Bwo6+/uktb7p4xyApuef1dwEBo/U/SYQzbGBvV+nru2Xg== - "@webassemblyjs/helper-api-error@1.7.10": version "1.7.10" resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.7.10.tgz#bfcb3bbe59775357475790a2ad7b289f09b2f198" integrity sha512-DoYRlPWtuw3yd5BOr9XhtrmB6X1enYF0/54yNvQWGXZEPDF5PJVNI7zQ7gkcKfTESzp8bIBWailaFXEK/jjCsw== -"@webassemblyjs/helper-api-error@1.7.11": - version "1.7.11" - resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.7.11.tgz#c7b6bb8105f84039511a2b39ce494f193818a32a" - integrity sha512-7r1qXLmiglC+wPNkGuXCvkmalyEstKVwcueZRP2GNC2PAvxbLYwLLPr14rcdJaE4UtHxQKfFkuDFuv91ipqvXg== - "@webassemblyjs/helper-buffer@1.7.10": version "1.7.10" resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.7.10.tgz#0a8c624c67ad0b214d2e003859921a1988cb151b" integrity sha512-+RMU3dt/dPh4EpVX4u5jxsOlw22tp3zjqE0m3ftU2tsYxnPULb4cyHlgaNd2KoWuwasCQqn8Mhr+TTdbtj3LlA== -"@webassemblyjs/helper-buffer@1.7.11": - version "1.7.11" - resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.7.11.tgz#3122d48dcc6c9456ed982debe16c8f37101df39b" - integrity sha512-MynuervdylPPh3ix+mKZloTcL06P8tenNH3sx6s0qE8SLR6DdwnfgA7Hc9NSYeob2jrW5Vql6GVlsQzKQCa13w== - "@webassemblyjs/helper-code-frame@1.7.10": version "1.7.10" resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.7.10.tgz#0ab7e22fad0241a173178c73976fc0edf50832ce" @@ -598,43 +574,21 @@ dependencies: "@webassemblyjs/wast-printer" "1.7.10" -"@webassemblyjs/helper-code-frame@1.7.11": - version "1.7.11" - resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.7.11.tgz#cf8f106e746662a0da29bdef635fcd3d1248364b" - integrity sha512-T8ESC9KMXFTXA5urJcyor5cn6qWeZ4/zLPyWeEXZ03hj/x9weSokGNkVCdnhSabKGYWxElSdgJ+sFa9G/RdHNw== - dependencies: - "@webassemblyjs/wast-printer" "1.7.11" - "@webassemblyjs/helper-fsm@1.7.10": version "1.7.10" resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.7.10.tgz#0915e7713fbbb735620a9d3e4fa3d7951f97ac64" integrity sha512-w2vDtUK9xeSRtt5+RnnlRCI7wHEvLjF0XdnxJpgx+LJOvklTZPqWkuy/NhwHSLP19sm9H8dWxKeReMR7sCkGZA== -"@webassemblyjs/helper-fsm@1.7.11": - version "1.7.11" - resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.7.11.tgz#df38882a624080d03f7503f93e3f17ac5ac01181" - integrity sha512-nsAQWNP1+8Z6tkzdYlXT0kxfa2Z1tRTARd8wYnc/e3Zv3VydVVnaeePgqUzFrpkGUyhUUxOl5ML7f1NuT+gC0A== - "@webassemblyjs/helper-module-context@1.7.10": version "1.7.10" resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.7.10.tgz#9beb83f72740f5ac8075313b5cac5e796510f755" integrity sha512-yE5x/LzZ3XdPdREmJijxzfrf+BDRewvO0zl8kvORgSWmxpRrkqY39KZSq6TSgIWBxkK4SrzlS3BsMCv2s1FpsQ== -"@webassemblyjs/helper-module-context@1.7.11": - version "1.7.11" - resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.7.11.tgz#d874d722e51e62ac202476935d649c802fa0e209" - integrity sha512-JxfD5DX8Ygq4PvXDucq0M+sbUFA7BJAv/GGl9ITovqE+idGX+J3QSzJYz+LwQmL7fC3Rs+utvWoJxDb6pmC0qg== - "@webassemblyjs/helper-wasm-bytecode@1.7.10": version "1.7.10" resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.7.10.tgz#797b1e734bbcfdea8399669cdc58308ef1c7ffc0" integrity sha512-u5qy4SJ/OrxKxZqJ9N3qH4ZQgHaAzsopsYwLvoWJY6Q33r8PhT3VPyNMaJ7ZFoqzBnZlCcS/0f4Sp8WBxylXfg== -"@webassemblyjs/helper-wasm-bytecode@1.7.11": - version "1.7.11" - resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.7.11.tgz#dd9a1e817f1c2eb105b4cf1013093cb9f3c9cb06" - integrity sha512-cMXeVS9rhoXsI9LLL4tJxBgVD/KMOKXuFqYb5oCJ/opScWpkCMEz9EJtkonaNcnLv2R3K5jIeS4TRj/drde1JQ== - "@webassemblyjs/helper-wasm-section@1.7.10": version "1.7.10" resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.7.10.tgz#c0ea3703c615d7bc3e3507c3b7991c8767b2f20e" @@ -645,16 +599,6 @@ "@webassemblyjs/helper-wasm-bytecode" "1.7.10" "@webassemblyjs/wasm-gen" "1.7.10" -"@webassemblyjs/helper-wasm-section@1.7.11": - version "1.7.11" - resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.7.11.tgz#9c9ac41ecf9fbcfffc96f6d2675e2de33811e68a" - integrity sha512-8ZRY5iZbZdtNFE5UFunB8mmBEAbSI3guwbrsCl4fWdfRiAcvqQpeqd5KHhSWLL5wuxo53zcaGZDBU64qgn4I4Q== - dependencies: - "@webassemblyjs/ast" "1.7.11" - "@webassemblyjs/helper-buffer" "1.7.11" - "@webassemblyjs/helper-wasm-bytecode" "1.7.11" - "@webassemblyjs/wasm-gen" "1.7.11" - "@webassemblyjs/ieee754@1.7.10": version "1.7.10" resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.7.10.tgz#62c1728b7ef0f66ef8221e2966a0afd75db430df" @@ -662,13 +606,6 @@ dependencies: "@xtuc/ieee754" "^1.2.0" -"@webassemblyjs/ieee754@1.7.11": - version "1.7.11" - resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.7.11.tgz#c95839eb63757a31880aaec7b6512d4191ac640b" - integrity sha512-Mmqx/cS68K1tSrvRLtaV/Lp3NZWzXtOHUW2IvDvl2sihAwJh4ACE0eL6A8FvMyDG9abes3saB6dMimLOs+HMoQ== - dependencies: - "@xtuc/ieee754" "^1.2.0" - "@webassemblyjs/leb128@1.7.10": version "1.7.10" resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.7.10.tgz#167e0bb4b06d7701585772a73fba9f4df85439f6" @@ -676,23 +613,11 @@ dependencies: "@xtuc/long" "4.2.1" -"@webassemblyjs/leb128@1.7.11": - version "1.7.11" - resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.7.11.tgz#d7267a1ee9c4594fd3f7e37298818ec65687db63" - integrity sha512-vuGmgZjjp3zjcerQg+JA+tGOncOnJLWVkt8Aze5eWQLwTQGNgVLcyOTqgSCxWTR4J42ijHbBxnuRaL1Rv7XMdw== - dependencies: - "@xtuc/long" "4.2.1" - "@webassemblyjs/utf8@1.7.10": version "1.7.10" resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.7.10.tgz#b6728f5b6f50364abc155be029f9670e6685605a" integrity sha512-Ng6Pxv6siyZp635xCSnH3mKmIFgqWPCcGdoo0GBYgyGdxu7cUj4agV7Uu1a8REP66UYUFXJLudeGgd4RvuJAnQ== -"@webassemblyjs/utf8@1.7.11": - version "1.7.11" - resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.7.11.tgz#06d7218ea9fdc94a6793aa92208160db3d26ee82" - integrity sha512-C6GFkc7aErQIAH+BMrIdVSmW+6HSe20wg57HEC1uqJP8E/xpMjXqQUxkQw07MhNDSDcGpxI9G5JSNOQCqJk4sA== - "@webassemblyjs/wasm-edit@1.7.10": version "1.7.10" resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.7.10.tgz#83fe3140f5a58f5a30b914702be9f0e59a399092" @@ -707,20 +632,6 @@ "@webassemblyjs/wasm-parser" "1.7.10" "@webassemblyjs/wast-printer" "1.7.10" -"@webassemblyjs/wasm-edit@1.7.11": - version "1.7.11" - resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.7.11.tgz#8c74ca474d4f951d01dbae9bd70814ee22a82005" - integrity sha512-FUd97guNGsCZQgeTPKdgxJhBXkUbMTY6hFPf2Y4OedXd48H97J+sOY2Ltaq6WGVpIH8o/TGOVNiVz/SbpEMJGg== - dependencies: - "@webassemblyjs/ast" "1.7.11" - "@webassemblyjs/helper-buffer" "1.7.11" - "@webassemblyjs/helper-wasm-bytecode" "1.7.11" - "@webassemblyjs/helper-wasm-section" "1.7.11" - "@webassemblyjs/wasm-gen" "1.7.11" - "@webassemblyjs/wasm-opt" "1.7.11" - "@webassemblyjs/wasm-parser" "1.7.11" - "@webassemblyjs/wast-printer" "1.7.11" - "@webassemblyjs/wasm-gen@1.7.10": version "1.7.10" resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.7.10.tgz#4de003806ae29c97ab3707782469b53299570174" @@ -732,17 +643,6 @@ "@webassemblyjs/leb128" "1.7.10" "@webassemblyjs/utf8" "1.7.10" -"@webassemblyjs/wasm-gen@1.7.11": - version "1.7.11" - resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.7.11.tgz#9bbba942f22375686a6fb759afcd7ac9c45da1a8" - integrity sha512-U/KDYp7fgAZX5KPfq4NOupK/BmhDc5Kjy2GIqstMhvvdJRcER/kUsMThpWeRP8BMn4LXaKhSTggIJPOeYHwISA== - dependencies: - "@webassemblyjs/ast" "1.7.11" - "@webassemblyjs/helper-wasm-bytecode" "1.7.11" - "@webassemblyjs/ieee754" "1.7.11" - "@webassemblyjs/leb128" "1.7.11" - "@webassemblyjs/utf8" "1.7.11" - "@webassemblyjs/wasm-opt@1.7.10": version "1.7.10" resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.7.10.tgz#d151e31611934a556c82789fdeec41a814993c2a" @@ -753,16 +653,6 @@ "@webassemblyjs/wasm-gen" "1.7.10" "@webassemblyjs/wasm-parser" "1.7.10" -"@webassemblyjs/wasm-opt@1.7.11": - version "1.7.11" - resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.7.11.tgz#b331e8e7cef8f8e2f007d42c3a36a0580a7d6ca7" - integrity sha512-XynkOwQyiRidh0GLua7SkeHvAPXQV/RxsUeERILmAInZegApOUAIJfRuPYe2F7RcjOC9tW3Cb9juPvAC/sCqvg== - dependencies: - "@webassemblyjs/ast" "1.7.11" - "@webassemblyjs/helper-buffer" "1.7.11" - "@webassemblyjs/wasm-gen" "1.7.11" - "@webassemblyjs/wasm-parser" "1.7.11" - "@webassemblyjs/wasm-parser@1.7.10": version "1.7.10" resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.7.10.tgz#0367be7bf8f09e3e6abc95f8e483b9206487ec65" @@ -775,18 +665,6 @@ "@webassemblyjs/leb128" "1.7.10" "@webassemblyjs/utf8" "1.7.10" -"@webassemblyjs/wasm-parser@1.7.11": - version "1.7.11" - resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.7.11.tgz#6e3d20fa6a3519f6b084ef9391ad58211efb0a1a" - integrity sha512-6lmXRTrrZjYD8Ng8xRyvyXQJYUQKYSXhJqXOBLw24rdiXsHAOlvw5PhesjdcaMadU/pyPQOJ5dHreMjBxwnQKg== - dependencies: - "@webassemblyjs/ast" "1.7.11" - "@webassemblyjs/helper-api-error" "1.7.11" - "@webassemblyjs/helper-wasm-bytecode" "1.7.11" - "@webassemblyjs/ieee754" "1.7.11" - "@webassemblyjs/leb128" "1.7.11" - "@webassemblyjs/utf8" "1.7.11" - "@webassemblyjs/wast-parser@1.7.10": version "1.7.10" resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.7.10.tgz#058f598b52f730b23fc874d4775b6286b6247264" @@ -799,18 +677,6 @@ "@webassemblyjs/helper-fsm" "1.7.10" "@xtuc/long" "4.2.1" -"@webassemblyjs/wast-parser@1.7.11": - version "1.7.11" - resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.7.11.tgz#25bd117562ca8c002720ff8116ef9072d9ca869c" - integrity sha512-lEyVCg2np15tS+dm7+JJTNhNWq9yTZvi3qEhAIIOaofcYlUp0UR5/tVqOwa/gXYr3gjwSZqw+/lS9dscyLelbQ== - dependencies: - "@webassemblyjs/ast" "1.7.11" - "@webassemblyjs/floating-point-hex-parser" "1.7.11" - "@webassemblyjs/helper-api-error" "1.7.11" - "@webassemblyjs/helper-code-frame" "1.7.11" - "@webassemblyjs/helper-fsm" "1.7.11" - "@xtuc/long" "4.2.1" - "@webassemblyjs/wast-printer@1.7.10": version "1.7.10" resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.7.10.tgz#d817909d2450ae96c66b7607624d98a33b84223b" @@ -820,15 +686,6 @@ "@webassemblyjs/wast-parser" "1.7.10" "@xtuc/long" "4.2.1" -"@webassemblyjs/wast-printer@1.7.11": - version "1.7.11" - resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.7.11.tgz#c4245b6de242cb50a2cc950174fdbf65c78d7813" - integrity sha512-m5vkAsuJ32QpkdkDOUPGSltrg8Cuk3KBx4YrmAGQwCZPRdUHXxG4phIOuuycLemHFr74sWL9Wthqss4fzdzSwg== - dependencies: - "@webassemblyjs/ast" "1.7.11" - "@webassemblyjs/wast-parser" "1.7.11" - "@xtuc/long" "4.2.1" - "@xtuc/ieee754@^1.2.0": version "1.2.0" resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790" @@ -10524,36 +10381,6 @@ webpack@4.23.1: watchpack "^1.5.0" webpack-sources "^1.3.0" -webpack@^4.17.1: - version "4.26.1" - resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.26.1.tgz#ff3a9283d363c07b3494dfa702d08f4f2ef6cb39" - integrity sha512-i2oOvEvuvLLSuSCkdVrknaxAhtUZ9g+nLSoHCWV0gDzqGX2DXaCrMmMUpbRsTSSLrUqAI56PoEiyMUZIZ1msug== - dependencies: - "@webassemblyjs/ast" "1.7.11" - "@webassemblyjs/helper-module-context" "1.7.11" - "@webassemblyjs/wasm-edit" "1.7.11" - "@webassemblyjs/wasm-parser" "1.7.11" - acorn "^5.6.2" - acorn-dynamic-import "^3.0.0" - ajv "^6.1.0" - ajv-keywords "^3.1.0" - chrome-trace-event "^1.0.0" - enhanced-resolve "^4.1.0" - eslint-scope "^4.0.0" - json-parse-better-errors "^1.0.2" - loader-runner "^2.3.0" - loader-utils "^1.1.0" - memory-fs "~0.4.1" - micromatch "^3.1.8" - mkdirp "~0.5.0" - neo-async "^2.5.0" - node-libs-browser "^2.0.0" - schema-utils "^0.4.4" - tapable "^1.1.0" - terser-webpack-plugin "^1.1.0" - watchpack "^1.5.0" - webpack-sources "^1.3.0" - websocket-driver@>=0.5.1: version "0.7.0" resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.0.tgz#0caf9d2d755d93aee049d4bdd0d3fe2cca2a24eb" diff --git a/server/models/account/user-notification.ts b/server/models/account/user-notification.ts index 9e4f982a3..1094eec78 100644 --- a/server/models/account/user-notification.ts +++ b/server/models/account/user-notification.ts @@ -27,11 +27,27 @@ import { VideoBlacklistModel } from '../video/video-blacklist' import { VideoImportModel } from '../video/video-import' import { ActorModel } from '../activitypub/actor' import { ActorFollowModel } from '../activitypub/actor-follow' +import { AvatarModel } from '../avatar/avatar' enum ScopeNames { WITH_ALL = 'WITH_ALL' } +function buildActorWithAvatarInclude () { + return { + attributes: [ 'preferredUsername' ], + model: () => ActorModel.unscoped(), + required: true, + include: [ + { + attributes: [ 'filename' ], + model: () => AvatarModel.unscoped(), + required: false + } + ] + } +} + function buildVideoInclude (required: boolean) { return { attributes: [ 'id', 'uuid', 'name' ], @@ -40,19 +56,21 @@ function buildVideoInclude (required: boolean) { } } -function buildChannelInclude (required: boolean) { +function buildChannelInclude (required: boolean, withActor = false) { return { required, attributes: [ 'id', 'name' ], - model: () => VideoChannelModel.unscoped() + model: () => VideoChannelModel.unscoped(), + include: withActor === true ? [ buildActorWithAvatarInclude() ] : [] } } -function buildAccountInclude (required: boolean) { +function buildAccountInclude (required: boolean, withActor = false) { return { required, attributes: [ 'id', 'name' ], - model: () => AccountModel.unscoped() + model: () => AccountModel.unscoped(), + include: withActor === true ? [ buildActorWithAvatarInclude() ] : [] } } @@ -60,47 +78,40 @@ function buildAccountInclude (required: boolean) { [ScopeNames.WITH_ALL]: { include: [ Object.assign(buildVideoInclude(false), { - include: [ buildChannelInclude(true) ] + include: [ buildChannelInclude(true, true) ] }), + { attributes: [ 'id', 'originCommentId' ], model: () => VideoCommentModel.unscoped(), required: false, include: [ - buildAccountInclude(true), + buildAccountInclude(true, true), buildVideoInclude(true) ] }, + { attributes: [ 'id' ], model: () => VideoAbuseModel.unscoped(), required: false, include: [ buildVideoInclude(true) ] }, + { attributes: [ 'id' ], model: () => VideoBlacklistModel.unscoped(), required: false, include: [ buildVideoInclude(true) ] }, + { attributes: [ 'id', 'magnetUri', 'targetUrl', 'torrentName' ], model: () => VideoImportModel.unscoped(), required: false, include: [ buildVideoInclude(false) ] }, - { - attributes: [ 'id', 'name' ], - model: () => AccountModel.unscoped(), - required: false, - include: [ - { - attributes: [ 'id', 'preferredUsername' ], - model: () => ActorModel.unscoped(), - required: true - } - ] - }, + { attributes: [ 'id' ], model: () => ActorFollowModel.unscoped(), @@ -111,7 +122,18 @@ function buildAccountInclude (required: boolean) { model: () => ActorModel.unscoped(), required: true, as: 'ActorFollower', - include: [ buildAccountInclude(true) ] + include: [ + { + attributes: [ 'id', 'name' ], + model: () => AccountModel.unscoped(), + required: true + }, + { + attributes: [ 'filename' ], + model: () => AvatarModel.unscoped(), + required: false + } + ] }, { attributes: [ 'preferredUsername' ], @@ -124,7 +146,9 @@ function buildAccountInclude (required: boolean) { ] } ] - } + }, + + buildAccountInclude(false, true) ] } }) @@ -132,10 +156,63 @@ function buildAccountInclude (required: boolean) { tableName: 'userNotification', indexes: [ { - fields: [ 'videoId' ] + fields: [ 'userId' ] }, { - fields: [ 'commentId' ] + fields: [ 'videoId' ], + where: { + videoId: { + [Op.ne]: null + } + } + }, + { + fields: [ 'commentId' ], + where: { + commentId: { + [Op.ne]: null + } + } + }, + { + fields: [ 'videoAbuseId' ], + where: { + videoAbuseId: { + [Op.ne]: null + } + } + }, + { + fields: [ 'videoBlacklistId' ], + where: { + videoBlacklistId: { + [Op.ne]: null + } + } + }, + { + fields: [ 'videoImportId' ], + where: { + videoImportId: { + [Op.ne]: null + } + } + }, + { + fields: [ 'accountId' ], + where: { + accountId: { + [Op.ne]: null + } + } + }, + { + fields: [ 'actorFollowId' ], + where: { + actorFollowId: { + [Op.ne]: null + } + } } ] }) @@ -297,12 +374,9 @@ export class UserNotificationModel extends Model { } toFormattedJSON (): UserNotification { - const video = this.Video ? Object.assign(this.formatVideo(this.Video), { - channel: { - id: this.Video.VideoChannel.id, - displayName: this.Video.VideoChannel.getDisplayName() - } - }) : undefined + const video = this.Video + ? Object.assign(this.formatVideo(this.Video),{ channel: this.formatActor(this.Video.VideoChannel) }) + : undefined const videoImport = this.VideoImport ? { id: this.VideoImport.id, @@ -315,10 +389,7 @@ export class UserNotificationModel extends Model { const comment = this.Comment ? { id: this.Comment.id, threadId: this.Comment.getThreadId(), - account: { - id: this.Comment.Account.id, - displayName: this.Comment.Account.getDisplayName() - }, + account: this.formatActor(this.Comment.Account), video: this.formatVideo(this.Comment.Video) } : undefined @@ -332,17 +403,15 @@ export class UserNotificationModel extends Model { video: this.formatVideo(this.VideoBlacklist.Video) } : undefined - const account = this.Account ? { - id: this.Account.id, - displayName: this.Account.getDisplayName(), - name: this.Account.Actor.preferredUsername - } : undefined + const account = this.Account ? this.formatActor(this.Account) : undefined const actorFollow = this.ActorFollow ? { id: this.ActorFollow.id, follower: { + id: this.ActorFollow.ActorFollower.Account.id, displayName: this.ActorFollow.ActorFollower.Account.getDisplayName(), - name: this.ActorFollow.ActorFollower.preferredUsername + name: this.ActorFollow.ActorFollower.preferredUsername, + avatar: this.ActorFollow.ActorFollower.Avatar ? { path: this.ActorFollow.ActorFollower.Avatar.getWebserverPath() } : undefined }, following: { type: this.ActorFollow.ActorFollowing.VideoChannel ? 'channel' as 'channel' : 'account' as 'account', @@ -374,4 +443,17 @@ export class UserNotificationModel extends Model { name: video.name } } + + private formatActor (accountOrChannel: AccountModel | VideoChannelModel) { + const avatar = accountOrChannel.Actor.Avatar + ? { path: accountOrChannel.Actor.Avatar.getWebserverPath() } + : undefined + + return { + id: accountOrChannel.id, + displayName: accountOrChannel.getDisplayName(), + name: accountOrChannel.Actor.preferredUsername, + avatar + } + } } diff --git a/shared/models/actors/actor.model.ts b/shared/models/actors/actor.model.ts index 6b3b1b47c..a3953874d 100644 --- a/shared/models/actors/actor.model.ts +++ b/shared/models/actors/actor.model.ts @@ -10,5 +10,5 @@ export interface Actor { followersCount: number createdAt: Date | string updatedAt: Date | string - avatar: Avatar + avatar?: Avatar } diff --git a/shared/models/users/user-notification.model.ts b/shared/models/users/user-notification.model.ts index f41b6f534..eaeb422df 100644 --- a/shared/models/users/user-notification.model.ts +++ b/shared/models/users/user-notification.model.ts @@ -22,16 +22,22 @@ export interface VideoInfo { name: string } +export interface ActorInfo { + id: number + displayName: string + name: string + avatar?: { + path: string + } +} + export interface UserNotification { id: number type: UserNotificationType read: boolean video?: VideoInfo & { - channel: { - id: number - displayName: string - } + channel: ActorInfo } videoImport?: { @@ -45,10 +51,7 @@ export interface UserNotification { comment?: { id: number threadId: number - account: { - id: number - displayName: string - } + account: ActorInfo video: VideoInfo } @@ -62,18 +65,11 @@ export interface UserNotification { video: VideoInfo } - account?: { - id: number - displayName: string - name: string - } + account?: ActorInfo actorFollow?: { id: number - follower: { - name: string - displayName: string - } + follower: ActorInfo following: { type: 'account' | 'channel' name: string diff --git a/shared/models/videos/video.model.ts b/shared/models/videos/video.model.ts index 4a9fa58b1..022876a0b 100644 --- a/shared/models/videos/video.model.ts +++ b/shared/models/videos/video.model.ts @@ -24,7 +24,7 @@ export interface VideoChannelAttribute { displayName: string url: string host: string - avatar: Avatar + avatar?: Avatar } export interface AccountAttribute { @@ -34,7 +34,7 @@ export interface AccountAttribute { displayName: string url: string host: string - avatar: Avatar + avatar?: Avatar } export interface Video { -- cgit v1.2.3