From c2faa073d113f410275021ed4de4b60fef118c13 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 10 Jun 2022 17:05:55 +0200 Subject: Replace glyphicon chevron --- .../followers-list/followers-list.component.html | 2 +- .../following-list/following-list.component.html | 2 +- .../video-redundancies-list.component.html | 2 +- .../my-follows/my-followers.component.html | 2 +- .../metadata/video-attributes.component.html | 6 ++++-- .../metadata/video-attributes.component.scss | 6 ------ .../metadata/video-description.component.html | 4 ++-- .../metadata/video-description.component.scss | 12 +---------- client/src/app/menu/menu.component.html | 2 +- client/src/app/menu/menu.component.scss | 25 ++++++---------------- .../shared/shared-icons/global-icon.component.ts | 1 + .../shared-main/misc/list-overflow.component.html | 4 ++-- .../server-blocklist.component.html | 2 +- client/src/assets/images/feather/external-link.svg | 1 + client/src/sass/application.scss | 19 ++++++++++++++++ client/src/sass/include/_mixins.scss | 15 +++++++++++++ 16 files changed, 57 insertions(+), 48 deletions(-) create mode 100644 client/src/assets/images/feather/external-link.svg diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html index 38def2fbb..a7d95e4a4 100644 --- a/client/src/app/+admin/follows/followers-list/followers-list.component.html +++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html @@ -41,7 +41,7 @@ {{ follow.follower.name + '@' + follow.follower.host }} - + diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html index 207ca81a4..106e1805e 100644 --- a/client/src/app/+admin/follows/following-list/following-list.component.html +++ b/client/src/app/+admin/follows/following-list/following-list.component.html @@ -43,7 +43,7 @@ {{ follow.following.name + '@' + follow.following.host }} - + diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html index f13a0c378..12b07da11 100644 --- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html +++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html @@ -46,7 +46,7 @@ {{ redundancy.name }} - + diff --git a/client/src/app/+my-library/my-follows/my-followers.component.html b/client/src/app/+my-library/my-follows/my-followers.component.html index 2827f8c41..6f4d1a9b7 100644 --- a/client/src/app/+my-library/my-follows/my-followers.component.html +++ b/client/src/app/+my-library/my-follows/my-followers.component.html @@ -19,7 +19,7 @@
{{ follow.follower.name + '@' + follow.follower.host }}
- +
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html index 10ff46595..52ad1999d 100644 --- a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html +++ b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html @@ -11,9 +11,11 @@ >{{ video.originInstanceHost }} + > + +
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss index 26bead124..1470a9f6d 100644 --- a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss +++ b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss @@ -33,12 +33,6 @@ a.attribute-value { } } -.glyphicon-new-window { - color: pvar(--inputPlaceholderColor); - margin-left: 5px; - font-size: 12px; -} - @media screen and (max-width: 1600px) { .attributes .attribute { margin-bottom: 5px; diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html index 835d0e89f..fa4dbb3ca 100644 --- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html +++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html @@ -8,12 +8,12 @@
Show more - +
Show less - +
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss index fc8b4574c..147bc4d7f 100644 --- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss +++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss @@ -17,13 +17,8 @@ } } - .glyphicon, .description-loading { - @include margin-left(3px); - } - - .description-loading { - display: inline-block; + @include margin-left(5px); } .video-info-description-more { @@ -31,11 +26,6 @@ font-weight: $font-semibold; color: pvar(--greyForegroundColor); font-size: 14px; - - .glyphicon { - position: relative; - top: 2px; - } } } diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index 2961daaa3..3f00cac04 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html @@ -16,7 +16,7 @@
- +
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 808a33a4a..c52af6c80 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -106,6 +106,7 @@ my-notification { } .logged-in-more { + @mixin display-hints($is-mobile: false) { background-color: rgba(255, 255, 255, 0.15); @@ -114,18 +115,16 @@ my-notification { display: inherit !important; } - .dropdown-toggle { + > .dropdown-toggle { max-width: 88% !important; } } } - $main-radius: 25px; - @include margin-left(13px); flex: 1; - border-radius: $main-radius; + border-radius: 25px; transition: all .1s ease-in-out; cursor: pointer; line-height: 1; @@ -157,7 +156,6 @@ my-notification { .dropdown-toggle-indicator { position: relative; - width: 0; display: none; span { @@ -165,21 +163,17 @@ my-notification { right: -35px; top: -8px; color: #808080; - width: $main-radius; } } - .dropdown-toggle { - &::after { - border: 0; - } + .dropdown-toggle::after { + border: 0; } - .dropdown-toggle:first-child { + > .dropdown-toggle:first-child { display: flex; align-items: center; padding: 5px 7px; - border-radius: $main-radius; } } @@ -396,13 +390,6 @@ my-actor-avatar { .dropdown-menu { width: calc(100vw - 30px); } - - .dropdown-item:hover, - .dropdown-item:active { - &.settings-sensitive my-global-icon ::ng-deep svg { - margin-top: 0 !important; - } - } } my-global-icon { diff --git a/client/src/app/shared/shared-icons/global-icon.component.ts b/client/src/app/shared/shared-icons/global-icon.component.ts index 3a0d57691..43c407743 100644 --- a/client/src/app/shared/shared-icons/global-icon.component.ts +++ b/client/src/app/shared/shared-icons/global-icon.component.ts @@ -63,6 +63,7 @@ const icons = { 'exit-fullscreen': require('!!raw-loader?!../../../assets/images/feather/minimize.svg').default, film: require('!!raw-loader?!../../../assets/images/feather/film.svg').default, edit: require('!!raw-loader?!../../../assets/images/feather/edit-2.svg').default, + 'external-link': require('!!raw-loader?!../../../assets/images/feather/external-link.svg').default, sensitive: require('!!raw-loader?!../../../assets/images/feather/eye.svg').default, unsensitive: require('!!raw-loader?!../../../assets/images/feather/eye-off.svg').default, refresh: require('!!raw-loader?!../../../assets/images/feather/refresh-cw.svg').default, diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.html b/client/src/app/shared/shared-main/misc/list-overflow.component.html index ea22a3445..6f29eaefa 100644 --- a/client/src/app/shared/shared-main/misc/list-overflow.component.html +++ b/client/src/app/shared/shared-main/misc/list-overflow.component.html @@ -5,7 +5,7 @@
- +
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.html b/client/src/app/shared/shared-moderation/server-blocklist.component.html index ba4336e2e..cabf0e9dd 100644 --- a/client/src/app/shared/shared-moderation/server-blocklist.component.html +++ b/client/src/app/shared/shared-moderation/server-blocklist.component.html @@ -41,7 +41,7 @@ {{ serverBlock.blockedServer.host }} - + {{ serverBlock.createdAt | date: 'short' }} diff --git a/client/src/assets/images/feather/external-link.svg b/client/src/assets/images/feather/external-link.svg new file mode 100644 index 000000000..6236df3e0 --- /dev/null +++ b/client/src/assets/images/feather/external-link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index d288d2a21..2ad1af23a 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -308,6 +308,25 @@ table { } } +my-global-icon[iconName=external-link] { + margin: 0 3px; + width: 13px; + vertical-align: text-bottom; + color: pvar(--inputPlaceholderColor); +} + +.chevron-down { + @include chevron-down(0.55rem, 0.20em); + + margin: 0 5px; +} + +.chevron-up { + @include chevron-up(0.55rem, 0.20em); + + margin: 0 5px; +} + /* offsetTop for scrollToAnchor */ .anchor { diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index e18173130..da216b00f 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -570,6 +570,7 @@ transform: rotate(-45deg); height: $size; width: $size; + position: relative; } @mixin chevron-right ($size, $border-width) { @@ -579,6 +580,20 @@ transform: rotate(45deg); } +@mixin chevron-down ($size, $border-width) { + @include chevron($size, $border-width); + + bottom: 0.15em; + transform: rotate(135deg); +} + +@mixin chevron-up ($size, $border-width) { + @include chevron($size, $border-width); + + top: 0.15em; + transform: rotate(-45deg); +} + @mixin chevron-left ($size, $border-width) { @include chevron($size, $border-width); -- cgit v1.2.3