From 7b272fd73f1ea67e83c1924f2cc33503b8759811 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 7 Dec 2017 10:02:01 +0100 Subject: [PATCH] Fix dropdown menu in video watch --- .../account-change-password.component.scss | 2 + .../account-details.component.scss | 1 + .../account-videos.component.scss | 2 +- client/src/app/header/header.component.scss | 5 +- client/src/app/login/login.component.scss | 1 + client/src/app/signup/signup.component.scss | 1 + .../+video-watch/video-watch.component.html | 34 ++----- .../+video-watch/video-watch.component.scss | 92 +++++++++++++------ .../images/{account => global}/edit.svg | 0 client/src/assets/images/video/alert.svg | 16 ++++ .../video/{dislike.svg => dislike-grey.svg} | 0 .../src/assets/images/video/dislike-white.svg | 14 +++ client/src/assets/images/video/download.svg | 16 ++++ client/src/assets/images/video/eye-closed.svg | 18 ++++ .../images/video/{like.svg => like-grey.svg} | 0 client/src/assets/images/video/like-white.svg | 15 +++ client/src/sass/_mixins.scss | 24 +++-- client/src/sass/_variables.scss | 12 +-- client/src/sass/application.scss | 14 +++ 19 files changed, 194 insertions(+), 73 deletions(-) rename client/src/assets/images/{account => global}/edit.svg (100%) create mode 100644 client/src/assets/images/video/alert.svg rename client/src/assets/images/video/{dislike.svg => dislike-grey.svg} (100%) create mode 100644 client/src/assets/images/video/dislike-white.svg create mode 100644 client/src/assets/images/video/download.svg create mode 100644 client/src/assets/images/video/eye-closed.svg rename client/src/assets/images/video/{like.svg => like-grey.svg} (100%) create mode 100644 client/src/assets/images/video/like-white.svg diff --git a/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss b/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss index 75827abbf..7a4fdb34d 100644 --- a/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss +++ b/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss @@ -9,6 +9,8 @@ input[type=password] { input[type=submit] { @include peertube-button; + @include orange-button; + margin-top: 15px; } diff --git a/client/src/app/account/account-settings/account-details/account-details.component.scss b/client/src/app/account/account-settings/account-details/account-details.component.scss index 687166d9e..5c369f968 100644 --- a/client/src/app/account/account-settings/account-details/account-details.component.scss +++ b/client/src/app/account/account-settings/account-details/account-details.component.scss @@ -6,6 +6,7 @@ label { input[type=submit] { @include peertube-button; + @include orange-button; display: block; margin-top: 15px; diff --git a/client/src/app/account/account-videos/account-videos.component.scss b/client/src/app/account/account-videos/account-videos.component.scss index e76e3f4e5..04aaa8e89 100644 --- a/client/src/app/account/account-videos/account-videos.component.scss +++ b/client/src/app/account/account-videos/account-videos.component.scss @@ -42,7 +42,7 @@ top: -2px; &.icon-edit { - background-image: url('../../../assets/images/account/edit.svg'); + background-image: url('../../../assets/images/global/edit.svg'); } &.icon-delete-grey { diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss index 7ba8ef26c..e7761a9df 100644 --- a/client/src/app/header/header.component.scss +++ b/client/src/app/header/header.component.scss @@ -10,7 +10,7 @@ .icon.icon-search { display: inline-block; - background: url('../../../assets/images/header/search.svg') no-repeat; + background: url('../../assets/images/header/search.svg') no-repeat; background-size: contain; width: 25px; height: 21px; @@ -24,12 +24,13 @@ .upload-button { @include peertube-button-link; + @include orange-button; margin-right: 25px; .icon.icon-upload { display: inline-block; - background: url('../../../assets/images/header/upload.svg') no-repeat; + background: url('../../assets/images/header/upload.svg') no-repeat; background-size: contain; width: 22px; height: 24px; diff --git a/client/src/app/login/login.component.scss b/client/src/app/login/login.component.scss index fd6981c59..3b4326de4 100644 --- a/client/src/app/login/login.component.scss +++ b/client/src/app/login/login.component.scss @@ -5,4 +5,5 @@ input:not([type=submit]) { input[type=submit] { @include peertube-button; + @include orange-button; } diff --git a/client/src/app/signup/signup.component.scss b/client/src/app/signup/signup.component.scss index fd6981c59..3b4326de4 100644 --- a/client/src/app/signup/signup.component.scss +++ b/client/src/app/signup/signup.component.scss @@ -5,4 +5,5 @@ input:not([type=submit]) { input[type=submit] { @include peertube-button; + @include orange-button; } 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 88d89f9e4..583da4685 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -14,18 +14,12 @@
{{ video.name }}
-
- +
+
-
- +
+
@@ -39,33 +33,21 @@
@@ -78,7 +60,7 @@ {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
-
+
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 d7f47ed75..3f36410f4 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -6,6 +6,11 @@ #video-element { width: 888px; height: 500px; + + // VideoJS create an inner video player + video { + outline: 0; + } } } @@ -38,47 +43,78 @@ .video-info-actions { .action-button { @include peertube-button; + @include grey-button; font-size: 15px; font-weight: $font-semibold; - color: #585858; - background-color: #E5E5E5; display: inline-block; padding: 0 10px 0 10px; - &:hover { - background-color: #EFEFEF; + .icon { + display: inline-block; + background-repeat: no-repeat; + background-size: contain; + width: 21px; + height: 21px; + vertical-align: middle; + 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-share { + background-image: url('../../../assets/images/video/share.svg'); + } + + &.icon-more { + background-image: url('../../../assets/images/video/more.svg'); + } } - } - .action-more { - display: inline-block; - } + &.activated { + @include orange-button; - .icon { - display: inline-block; - background-repeat: no-repeat; - background-size: contain; - width: 21px; - height: 21px; - vertical-align: middle; - position: relative; - top: -2px; - - &.icon-like { - background-image: url('../../../assets/images/video/like.svg'); - } + .icon-like { + background-image: url('../../../assets/images/video/like-white.svg'); + } - &.icon-dislike { - background-image: url('../../../assets/images/video/dislike.svg'); + .icon-dislike { + background-image: url('../../../assets/images/video/dislike-white.svg'); + } } + } - &.icon-share { - background-image: url('../../../assets/images/video/share.svg'); - } + .action-more { + display: inline-block; - &.icon-more { - background-image: url('../../../assets/images/video/more.svg'); + .dropdown-menu .icon { + display: inline-block; + background-repeat: no-repeat; + background-size: contain; + width: 21px; + height: 21px; + vertical-align: middle; + margin-right: 5px; + position: relative; + top: -1px; + + &.icon-download { + background-image: url('../../../assets/images/video/download.svg'); + } + + &.icon-alert { + background-image: url('../../../assets/images/video/alert.svg'); + } + + &.icon-blacklist { + background-image: url('../../../assets/images/video/eye-closed.svg'); + } } } } diff --git a/client/src/assets/images/account/edit.svg b/client/src/assets/images/global/edit.svg similarity index 100% rename from client/src/assets/images/account/edit.svg rename to client/src/assets/images/global/edit.svg diff --git a/client/src/assets/images/video/alert.svg b/client/src/assets/images/video/alert.svg new file mode 100644 index 000000000..6d3af029f --- /dev/null +++ b/client/src/assets/images/video/alert.svg @@ -0,0 +1,16 @@ + + + + alert + Created with Sketch. + + + + + + + + + + + diff --git a/client/src/assets/images/video/dislike.svg b/client/src/assets/images/video/dislike-grey.svg similarity index 100% rename from client/src/assets/images/video/dislike.svg rename to client/src/assets/images/video/dislike-grey.svg diff --git a/client/src/assets/images/video/dislike-white.svg b/client/src/assets/images/video/dislike-white.svg new file mode 100644 index 000000000..cfc6eaa1f --- /dev/null +++ b/client/src/assets/images/video/dislike-white.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/client/src/assets/images/video/download.svg b/client/src/assets/images/video/download.svg new file mode 100644 index 000000000..5b0cca5ef --- /dev/null +++ b/client/src/assets/images/video/download.svg @@ -0,0 +1,16 @@ + + + + download + Created with Sketch. + + + + + + + + + + + diff --git a/client/src/assets/images/video/eye-closed.svg b/client/src/assets/images/video/eye-closed.svg new file mode 100644 index 000000000..c5b739659 --- /dev/null +++ b/client/src/assets/images/video/eye-closed.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/client/src/assets/images/video/like.svg b/client/src/assets/images/video/like-grey.svg similarity index 100% rename from client/src/assets/images/video/like.svg rename to client/src/assets/images/video/like-grey.svg diff --git a/client/src/assets/images/video/like-white.svg b/client/src/assets/images/video/like-white.svg new file mode 100644 index 000000000..88e5f6a9a --- /dev/null +++ b/client/src/assets/images/video/like-white.svg @@ -0,0 +1,15 @@ + + + + thumbs-up + Created with Sketch. + + + + + + + + + + diff --git a/client/src/sass/_mixins.scss b/client/src/sass/_mixins.scss index 6a18f7a76..ddc9c6766 100644 --- a/client/src/sass/_mixins.scss +++ b/client/src/sass/_mixins.scss @@ -19,22 +19,34 @@ } } +@mixin orange-button { + color: #fff; + background-color: $orange-color; + + &:hover { + background-color: $orange-hoover-color; + } +} + +@mixin grey-button { + background-color: $grey-color; + color: #585858; + + &:hover { + background-color: $grey-hoover-color; + } +} + @mixin peertube-button { border: none; - color: #fff; font-weight: $font-semibold; font-size: 15px; height: $button-height; line-height: $button-height; border-radius: 3px; text-align: center; - background-color: $orange-color; padding: 0 17px 0 13px; cursor: pointer; - - &:hover { - background-color: $orange-hoover-color; - } } @mixin peertube-button-link { diff --git a/client/src/sass/_variables.scss b/client/src/sass/_variables.scss index cc1cee75b..0d310409b 100644 --- a/client/src/sass/_variables.scss +++ b/client/src/sass/_variables.scss @@ -2,7 +2,8 @@ $font-regular: 400; $font-semibold: 600; $font-bold: 700; -$grey-color: #555; +$grey-color: #E5E5E5; +$grey-hoover-color: #EFEFEF;; $orange-color: #F1680D; $orange-hoover-color: #F97D46; @@ -17,7 +18,6 @@ $button-height: 30px; $header-height: 50px; $header-border-color: #e9eff6; - $search-input-width: 375px; $menu-color: #fff; @@ -27,11 +27,3 @@ $footer-height: 30px; $footer-margin: 30px; $footer-border-color: $header-border-color; - -$video-miniature-other-infos: #686767; - -$video-watch-border-color: #eceef4; -$video-watch-title-height: 90px; -$video-watch-info-color: #9da0ae; -$video-watch-info-height: 120px; -$video-watch-info-padding-left: 40px; diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index b860e1bf2..c81031021 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -138,3 +138,17 @@ p-datatable { } } } + +.dropdown-menu { + border-radius: 3px; + box-shadow: 0 3px 6px; + font-size: 15px; + + .dropdown-item { + padding: 3px 15px; + } + + a { + color: #000 !important; + } +} -- 2.41.0