aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+admin/follows/followers-list/followers-list.component.html2
-rw-r--r--client/src/app/+admin/follows/following-list/following-list.component.html2
-rw-r--r--client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html2
-rw-r--r--client/src/app/+my-library/my-follows/my-followers.component.html2
-rw-r--r--client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html6
-rw-r--r--client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss6
-rw-r--r--client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html4
-rw-r--r--client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss12
-rw-r--r--client/src/app/menu/menu.component.html2
-rw-r--r--client/src/app/menu/menu.component.scss25
-rw-r--r--client/src/app/shared/shared-icons/global-icon.component.ts1
-rw-r--r--client/src/app/shared/shared-main/misc/list-overflow.component.html4
-rw-r--r--client/src/app/shared/shared-moderation/server-blocklist.component.html2
-rw-r--r--client/src/assets/images/feather/external-link.svg1
-rw-r--r--client/src/sass/application.scss19
-rw-r--r--client/src/sass/include/_mixins.scss15
16 files changed, 57 insertions, 48 deletions
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 @@
41 <td> 41 <td>
42 <a [href]="follow.follower.url" i18n-title title="Open actor page in a new tab" target="_blank" rel="noopener noreferrer"> 42 <a [href]="follow.follower.url" i18n-title title="Open actor page in a new tab" target="_blank" rel="noopener noreferrer">
43 {{ follow.follower.name + '@' + follow.follower.host }} 43 {{ follow.follower.name + '@' + follow.follower.host }}
44 <span class="glyphicon glyphicon-new-window"></span> 44 <my-global-icon iconName="external-link"></my-global-icon>
45 </a> 45 </a>
46 </td> 46 </td>
47 47
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 @@
43 <td> 43 <td>
44 <a [href]="follow.following.url" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer"> 44 <a [href]="follow.following.url" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
45 {{ follow.following.name + '@' + follow.following.host }} 45 {{ follow.following.name + '@' + follow.following.host }}
46 <span class="glyphicon glyphicon-new-window"></span> 46 <my-global-icon iconName="external-link"></my-global-icon>
47 </a> 47 </a>
48 </td> 48 </td>
49 49
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 @@
46 <td> 46 <td>
47 <a [href]="redundancy.url" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer"> 47 <a [href]="redundancy.url" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
48 {{ redundancy.name }} 48 {{ redundancy.name }}
49 <span class="glyphicon glyphicon-new-window"></span> 49 <my-global-icon iconName="external-link"></my-global-icon>
50 </a> 50 </a>
51 </td> 51 </td>
52 52
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 @@
19 <div class="actor-info"> 19 <div class="actor-info">
20 <a [href]="follow.follower.url" class="actor-names" rel="noopener noreferrer" target="_blank" i18n-title title="Follower page"> 20 <a [href]="follow.follower.url" class="actor-names" rel="noopener noreferrer" target="_blank" i18n-title title="Follower page">
21 <div class="actor-display-name">{{ follow.follower.name + '@' + follow.follower.host }}</div> 21 <div class="actor-display-name">{{ follow.follower.name + '@' + follow.follower.host }}</div>
22 <span class="glyphicon glyphicon-new-window"></span> 22 <my-global-icon iconName="external-link"></my-global-icon>
23 </a> 23 </a>
24 24
25 <div class="muted"> 25 <div class="muted">
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 @@
11 >{{ video.originInstanceHost }}</a> 11 >{{ video.originInstanceHost }}</a>
12 12
13 <a 13 <a
14 i18n-title title="Open the video on the origin instance" class="glyphicon glyphicon-new-window" 14 i18n-title title="Open the video on the origin instance"
15 target="_blank" rel="noopener noreferrer" [href]="video.url" 15 target="_blank" rel="noopener noreferrer" [href]="video.url"
16 ></a> 16 >
17 <my-global-icon iconName="external-link"></my-global-icon>
18 </a>
17</div> 19</div>
18 20
19<div *ngIf="!!video.originallyPublishedAt" class="attribute attribute-originally-published-at"> 21<div *ngIf="!!video.originallyPublishedAt" class="attribute attribute-originally-published-at">
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 {
33 } 33 }
34} 34}
35 35
36.glyphicon-new-window {
37 color: pvar(--inputPlaceholderColor);
38 margin-left: 5px;
39 font-size: 12px;
40}
41
42@media screen and (max-width: 1600px) { 36@media screen and (max-width: 1600px) {
43 .attributes .attribute { 37 .attributes .attribute {
44 margin-bottom: 5px; 38 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 @@
8 8
9 <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()"> 9 <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
10 <ng-container i18n>Show more</ng-container> 10 <ng-container i18n>Show more</ng-container>
11 <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span> 11 <span *ngIf="descriptionLoading === false" class="chevron-down"></span>
12 <my-loader size="sm" class="description-loading" [loading]="descriptionLoading"></my-loader> 12 <my-loader size="sm" class="description-loading" [loading]="descriptionLoading"></my-loader>
13 </div> 13 </div>
14 14
15 <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more"> 15 <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
16 <ng-container i18n>Show less</ng-container> 16 <ng-container i18n>Show less</ng-container>
17 <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span> 17 <span *ngIf="descriptionLoading === false" class="chevron-up"></span>
18 </div> 18 </div>
19</div> 19</div>
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 @@
17 } 17 }
18 } 18 }
19 19
20 .glyphicon,
21 .description-loading { 20 .description-loading {
22 @include margin-left(3px); 21 @include margin-left(5px);
23 }
24
25 .description-loading {
26 display: inline-block;
27 } 22 }
28 23
29 .video-info-description-more { 24 .video-info-description-more {
@@ -31,11 +26,6 @@
31 font-weight: $font-semibold; 26 font-weight: $font-semibold;
32 color: pvar(--greyForegroundColor); 27 color: pvar(--greyForegroundColor);
33 font-size: 14px; 28 font-size: 14px;
34
35 .glyphicon {
36 position: relative;
37 top: 2px;
38 }
39 } 29 }
40} 30}
41 31
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 @@
16 </div> 16 </div>
17 17
18 <div class="dropdown-toggle-indicator"> 18 <div class="dropdown-toggle-indicator">
19 <span class="glyphicon glyphicon-chevron-down"></span> 19 <span class="chevron-down"></span>
20 </div> 20 </div>
21 </div> 21 </div>
22 22
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 {
106} 106}
107 107
108.logged-in-more { 108.logged-in-more {
109
109 @mixin display-hints($is-mobile: false) { 110 @mixin display-hints($is-mobile: false) {
110 background-color: rgba(255, 255, 255, 0.15); 111 background-color: rgba(255, 255, 255, 0.15);
111 112
@@ -114,18 +115,16 @@ my-notification {
114 display: inherit !important; 115 display: inherit !important;
115 } 116 }
116 117
117 .dropdown-toggle { 118 > .dropdown-toggle {
118 max-width: 88% !important; 119 max-width: 88% !important;
119 } 120 }
120 } 121 }
121 } 122 }
122 123
123 $main-radius: 25px;
124
125 @include margin-left(13px); 124 @include margin-left(13px);
126 125
127 flex: 1; 126 flex: 1;
128 border-radius: $main-radius; 127 border-radius: 25px;
129 transition: all .1s ease-in-out; 128 transition: all .1s ease-in-out;
130 cursor: pointer; 129 cursor: pointer;
131 line-height: 1; 130 line-height: 1;
@@ -157,7 +156,6 @@ my-notification {
157 156
158 .dropdown-toggle-indicator { 157 .dropdown-toggle-indicator {
159 position: relative; 158 position: relative;
160 width: 0;
161 display: none; 159 display: none;
162 160
163 span { 161 span {
@@ -165,21 +163,17 @@ my-notification {
165 right: -35px; 163 right: -35px;
166 top: -8px; 164 top: -8px;
167 color: #808080; 165 color: #808080;
168 width: $main-radius;
169 } 166 }
170 } 167 }
171 168
172 .dropdown-toggle { 169 .dropdown-toggle::after {
173 &::after { 170 border: 0;
174 border: 0;
175 }
176 } 171 }
177 172
178 .dropdown-toggle:first-child { 173 > .dropdown-toggle:first-child {
179 display: flex; 174 display: flex;
180 align-items: center; 175 align-items: center;
181 padding: 5px 7px; 176 padding: 5px 7px;
182 border-radius: $main-radius;
183 } 177 }
184} 178}
185 179
@@ -396,13 +390,6 @@ my-actor-avatar {
396 .dropdown-menu { 390 .dropdown-menu {
397 width: calc(100vw - 30px); 391 width: calc(100vw - 30px);
398 } 392 }
399
400 .dropdown-item:hover,
401 .dropdown-item:active {
402 &.settings-sensitive my-global-icon ::ng-deep svg {
403 margin-top: 0 !important;
404 }
405 }
406} 393}
407 394
408my-global-icon { 395my-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 = {
63 'exit-fullscreen': require('!!raw-loader?!../../../assets/images/feather/minimize.svg').default, 63 'exit-fullscreen': require('!!raw-loader?!../../../assets/images/feather/minimize.svg').default,
64 film: require('!!raw-loader?!../../../assets/images/feather/film.svg').default, 64 film: require('!!raw-loader?!../../../assets/images/feather/film.svg').default,
65 edit: require('!!raw-loader?!../../../assets/images/feather/edit-2.svg').default, 65 edit: require('!!raw-loader?!../../../assets/images/feather/edit-2.svg').default,
66 'external-link': require('!!raw-loader?!../../../assets/images/feather/external-link.svg').default,
66 sensitive: require('!!raw-loader?!../../../assets/images/feather/eye.svg').default, 67 sensitive: require('!!raw-loader?!../../../assets/images/feather/eye.svg').default,
67 unsensitive: require('!!raw-loader?!../../../assets/images/feather/eye-off.svg').default, 68 unsensitive: require('!!raw-loader?!../../../assets/images/feather/eye-off.svg').default,
68 refresh: require('!!raw-loader?!../../../assets/images/feather/refresh-cw.svg').default, 69 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 @@
5 5
6 <ng-container *ngIf="isMenuDisplayed()"> 6 <ng-container *ngIf="isMenuDisplayed()">
7 <button *ngIf="isInMobileView" class="btn btn-outline-secondary btn-sm list-overflow-menu" (click)="toggleModal()"> 7 <button *ngIf="isInMobileView" class="btn btn-outline-secondary btn-sm list-overflow-menu" (click)="toggleModal()">
8 <span class="glyphicon glyphicon-chevron-down"></span> 8 <span class="chevron-down"></span>
9 </button> 9 </button>
10 10
11 <div 11 <div
@@ -16,7 +16,7 @@
16 <button class="btn btn-outline-secondary btn-sm" [ngClass]="{ 'route-active': active }" 16 <button class="btn btn-outline-secondary btn-sm" [ngClass]="{ 'route-active': active }"
17 ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button" 17 ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button"
18 > 18 >
19 <span class="glyphicon glyphicon-chevron-down"></span> 19 <span class="chevron-down"></span>
20 </button> 20 </button>
21 21
22 <div ngbDropdownMenu> 22 <div ngbDropdownMenu>
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 @@
41 <td> 41 <td>
42 <a [href]="'https://' + serverBlock.blockedServer.host" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer"> 42 <a [href]="'https://' + serverBlock.blockedServer.host" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
43 {{ serverBlock.blockedServer.host }} 43 {{ serverBlock.blockedServer.host }}
44 <span class="glyphicon glyphicon-new-window"></span> 44 <my-global-icon iconName="external-link"></my-global-icon>
45 </a> 45 </a>
46 </td> 46 </td>
47 <td>{{ serverBlock.createdAt | date: 'short' }}</td> 47 <td>{{ serverBlock.createdAt | date: 'short' }}</td>
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 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg> \ 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 {
308 } 308 }
309} 309}
310 310
311my-global-icon[iconName=external-link] {
312 margin: 0 3px;
313 width: 13px;
314 vertical-align: text-bottom;
315 color: pvar(--inputPlaceholderColor);
316}
317
318.chevron-down {
319 @include chevron-down(0.55rem, 0.20em);
320
321 margin: 0 5px;
322}
323
324.chevron-up {
325 @include chevron-up(0.55rem, 0.20em);
326
327 margin: 0 5px;
328}
329
311/* offsetTop for scrollToAnchor */ 330/* offsetTop for scrollToAnchor */
312 331
313.anchor { 332.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 @@
570 transform: rotate(-45deg); 570 transform: rotate(-45deg);
571 height: $size; 571 height: $size;
572 width: $size; 572 width: $size;
573 position: relative;
573} 574}
574 575
575@mixin chevron-right ($size, $border-width) { 576@mixin chevron-right ($size, $border-width) {
@@ -579,6 +580,20 @@
579 transform: rotate(45deg); 580 transform: rotate(45deg);
580} 581}
581 582
583@mixin chevron-down ($size, $border-width) {
584 @include chevron($size, $border-width);
585
586 bottom: 0.15em;
587 transform: rotate(135deg);
588}
589
590@mixin chevron-up ($size, $border-width) {
591 @include chevron($size, $border-width);
592
593 top: 0.15em;
594 transform: rotate(-45deg);
595}
596
582@mixin chevron-left ($size, $border-width) { 597@mixin chevron-left ($size, $border-width) {
583 @include chevron($size, $border-width); 598 @include chevron($size, $border-width);
584 599