From 457bb213b273a9b206cc5654eb085cede4e916ad Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 16 Jan 2019 16:05:40 +0100 Subject: [PATCH] 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/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 +- .../menu/avatar-notification.component.scss | 2 +- .../app/menu/language-chooser.component.html | 2 +- client/src/app/search/search.component.scss | 4 +- client/src/app/shared/actor/actor.model.ts | 2 +- .../buttons/action-dropdown.component.html | 2 +- .../buttons/action-dropdown.component.scss | 9 +- .../app/shared/buttons/button.component.html | 2 +- .../app/shared/buttons/button.component.scss | 34 +--- .../app/shared/buttons/button.component.ts | 3 +- .../buttons/delete-button.component.html | 2 +- .../shared/buttons/edit-button.component.html | 2 +- .../confirm/confirm.component.html | 3 +- .../confirm/confirm.component.scss | 0 .../confirm/confirm.component.ts | 2 +- .../shared/icons/global-icon.component.html | 0 .../shared/icons/global-icon.component.scss | 4 + .../app/shared/icons/global-icon.component.ts | 47 +++++ .../src/app/shared/misc/help.component.html | 4 +- .../src/app/shared/misc/help.component.scss | 19 +- .../moderation/user-ban-modal.component.html | 7 +- .../moderation/user-ban-modal.component.ts | 4 +- client/src/app/shared/shared.module.ts | 8 +- .../shared/users/user-notification.model.ts | 37 ++-- .../shared/users/user-notification.service.ts | 2 - .../users/user-notifications.component.html | 82 ++++++--- .../users/user-notifications.component.scss | 46 +++-- .../users/user-notifications.component.ts | 14 +- .../src/app/shared/video/feed.component.html | 9 +- .../src/app/shared/video/feed.component.scss | 17 +- .../video/video-miniature.component.scss | 4 +- client/src/app/shared/video/video.model.ts | 4 +- .../video-caption-add-modal.component.html | 2 +- .../shared/video-edit.component.html | 2 +- .../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.ts | 2 +- ...ort-url.component.scss => video-send.scss} | 29 ++- .../video-upload.component.html | 6 +- .../video-upload.component.scss | 44 +---- .../video-upload.component.ts | 3 +- .../+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 +- .../modal/video-report.component.html | 2 +- .../modal/video-share.component.html | 2 +- .../modal/video-support.component.html | 2 +- .../+video-watch/video-watch.component.html | 24 +-- .../+video-watch/video-watch.component.scss | 80 ++------ .../images/global/{add.svg => add.html} | 6 +- .../{video/alert.svg => global/alert.html} | 9 +- .../src/assets/images/global/circle-tick.html | 12 ++ .../assets/images/global/cloud-download.html | 11 ++ .../src/assets/images/global/cloud-error.html | 11 ++ client/src/assets/images/global/cog.html | 9 + .../images/global/{cross.svg => cross.html} | 6 +- .../src/assets/images/global/delete-black.svg | 14 -- .../src/assets/images/global/delete-white.svg | 14 -- .../global/{delete-grey.svg => delete.html} | 14 +- .../download.html} | 9 +- client/src/assets/images/global/edit-grey.svg | 15 -- .../global/{edit-black.svg => edit.html} | 9 +- .../images/global/{help.svg => help.html} | 8 +- .../{im-with-her.svg => im-with-her.html} | 13 +- client/src/assets/images/global/no.html | 10 + client/src/assets/images/global/sparkle.html | 11 ++ .../{syndication.svg => syndication.html} | 4 +- .../images/global/{tick.svg => tick.html} | 6 +- 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 ++ .../global/{validate.svg => validate.html} | 6 +- client/src/assets/images/video/blacklist.svg | 15 -- .../src/assets/images/video/dislike-white.svg | 14 -- .../video/{dislike-grey.svg => dislike.html} | 6 +- .../src/assets/images/video/download-grey.svg | 16 -- .../assets/images/video/download-white.svg | 16 -- .../images/video/{heart.svg => heart.html} | 8 +- client/src/assets/images/video/like-white.svg | 15 -- .../images/video/{like-grey.svg => like.html} | 9 +- .../images/video/{more.svg => more.html} | 6 +- .../images/video/{share.svg => share.html} | 9 +- .../upload-white.svg => video/upload.html} | 9 +- 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 +- .../models/users/user-notification.model.ts | 30 ++- shared/models/videos/video.model.ts | 4 +- 116 files changed, 667 insertions(+), 891 deletions(-) rename client/src/app/{core => shared}/confirm/confirm.component.html (87%) rename client/src/app/{core => shared}/confirm/confirm.component.scss (100%) rename client/src/app/{core => shared}/confirm/confirm.component.ts (96%) 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 rename client/src/app/videos/+video-edit/video-add-components/{video-import-url.component.scss => video-send.scss} (57%) rename client/src/assets/images/global/{add.svg => add.html} (72%) rename client/src/assets/images/{video/alert.svg => global/alert.html} (71%) 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 rename client/src/assets/images/global/{cross.svg => cross.html} (63%) delete mode 100644 client/src/assets/images/global/delete-black.svg delete mode 100644 client/src/assets/images/global/delete-white.svg rename client/src/assets/images/global/{delete-grey.svg => delete.html} (71%) rename client/src/assets/images/{video/download-black.svg => global/download.html} (64%) delete mode 100644 client/src/assets/images/global/edit-grey.svg rename client/src/assets/images/global/{edit-black.svg => edit.html} (62%) rename client/src/assets/images/global/{help.svg => help.html} (84%) rename client/src/assets/images/global/{im-with-her.svg => im-with-her.html} (70%) create mode 100644 client/src/assets/images/global/no.html create mode 100644 client/src/assets/images/global/sparkle.html rename client/src/assets/images/global/{syndication.svg => syndication.html} (88%) rename client/src/assets/images/global/{tick.svg => tick.html} (63%) 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 rename client/src/assets/images/global/{validate.svg => validate.html} (69%) delete mode 100644 client/src/assets/images/video/blacklist.svg delete mode 100644 client/src/assets/images/video/dislike-white.svg rename client/src/assets/images/video/{dislike-grey.svg => dislike.html} (77%) delete mode 100644 client/src/assets/images/video/download-grey.svg delete mode 100644 client/src/assets/images/video/download-white.svg rename client/src/assets/images/video/{heart.svg => heart.html} (66%) delete mode 100644 client/src/assets/images/video/like-white.svg rename client/src/assets/images/video/{like-grey.svg => like.html} (61%) rename client/src/assets/images/video/{more.svg => more.html} (76%) rename client/src/assets/images/video/{share.svg => share.html} (62%) rename client/src/assets/images/{header/upload-white.svg => video/upload.html} (69%) 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 @@ @@ -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 @@ + +
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 @@ 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/core/confirm/confirm.component.html b/client/src/app/shared/confirm/confirm.component.html similarity index 87% rename from client/src/app/core/confirm/confirm.component.html rename to client/src/app/shared/confirm/confirm.component.html index 43f0c6190..65df1cd4d 100644 --- a/client/src/app/core/confirm/confirm.component.html +++ b/client/src/app/shared/confirm/confirm.component.html @@ -2,7 +2,8 @@