aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-06-13 10:14:03 +0200
committerChocobozzz <me@florianbigard.com>2022-06-13 11:23:36 +0200
commit93c728a25a87cf6dae5fc49d42d6af52ff7f7ff2 (patch)
treed9c658b4ac3467109a7f58b141d64a190f30cbaf /client/src/app
parentc2faa073d113f410275021ed4de4b60fef118c13 (diff)
downloadPeerTube-93c728a25a87cf6dae5fc49d42d6af52ff7f7ff2.tar.gz
PeerTube-93c728a25a87cf6dae5fc49d42d6af52ff7f7ff2.tar.zst
PeerTube-93c728a25a87cf6dae5fc49d42d6af52ff7f7ff2.zip
Replace all glyphicon icons
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+admin/overview/users/user-list/user-list.component.scss7
-rw-r--r--client/src/app/+admin/system/jobs/jobs.component.scss4
-rw-r--r--client/src/app/+my-library/my-follows/my-followers.component.scss6
-rw-r--r--client/src/app/+my-library/my-ownership/my-ownership.component.scss7
-rw-r--r--client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html4
-rw-r--r--client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss8
-rw-r--r--client/src/app/header/search-typeahead.component.html2
-rw-r--r--client/src/app/header/search-typeahead.component.scss4
-rw-r--r--client/src/app/menu/menu.component.scss4
-rw-r--r--client/src/app/menu/notification.component.html13
-rw-r--r--client/src/app/menu/notification.component.scss4
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-details.component.html6
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-details.component.scss4
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-list-table.component.html8
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss11
-rw-r--r--client/src/app/shared/shared-forms/advanced-input-filter.component.html2
-rw-r--r--client/src/app/shared/shared-forms/input-text.component.html5
-rw-r--r--client/src/app/shared/shared-forms/input-text.component.scss4
-rw-r--r--client/src/app/shared/shared-forms/input-text.component.ts7
-rw-r--r--client/src/app/shared/shared-icons/global-icon.component.ts5
-rw-r--r--client/src/app/shared/shared-instance/feature-boolean.component.html5
-rw-r--r--client/src/app/shared/shared-instance/feature-boolean.component.scss4
-rw-r--r--client/src/app/shared/shared-instance/instance-statistics.component.html18
-rw-r--r--client/src/app/shared/shared-instance/instance-statistics.component.scss29
-rw-r--r--client/src/app/shared/shared-instance/shared-instance.module.ts2
-rw-r--r--client/src/app/shared/shared-main/loaders/loader.component.ts2
-rw-r--r--client/src/app/shared/shared-main/misc/simple-search-input.component.html2
-rw-r--r--client/src/app/shared/shared-main/misc/simple-search-input.component.scss6
-rw-r--r--client/src/app/shared/shared-share-modal/video-share.component.html4
-rw-r--r--client/src/app/shared/shared-share-modal/video-share.component.scss4
-rw-r--r--client/src/app/shared/shared-tables/table-expander-icon.component.ts2
-rw-r--r--client/src/app/shared/shared-tables/video-cell.component.scss7
-rw-r--r--client/src/app/shared/shared-video-miniature/video-download.component.html4
-rw-r--r--client/src/app/shared/shared-video-miniature/video-download.component.scss4
34 files changed, 92 insertions, 116 deletions
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.scss b/client/src/app/+admin/overview/users/user-list/user-list.component.scss
index 6449f5064..3c775cac5 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.scss
@@ -28,13 +28,6 @@ tr.banned > td {
28 @include margin-left(15px); 28 @include margin-left(15px);
29} 29}
30 30
31.user-table-primary-text .glyphicon {
32 @include margin-left(0.1rem);
33
34 font-size: 80%;
35 color: #808080;
36}
37
38p-tableCheckbox { 31p-tableCheckbox {
39 position: relative; 32 position: relative;
40 top: -2.5px; 33 top: -2.5px;
diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss
index eadaf7904..4a76f1783 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.scss
+++ b/client/src/app/+admin/system/jobs/jobs.component.scss
@@ -44,10 +44,6 @@
44 } 44 }
45} 45}
46 46
47td .glyphicon {
48 @include margin-right(10px);
49}
50
51pre { 47pre {
52 font-size: 11px; 48 font-size: 11px;
53} 49}
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.scss b/client/src/app/+my-library/my-follows/my-followers.component.scss
index fae4cd972..d8c5f9cff 100644
--- a/client/src/app/+my-library/my-follows/my-followers.component.scss
+++ b/client/src/app/+my-library/my-follows/my-followers.component.scss
@@ -16,11 +16,5 @@ input[type=text] {
16 16
17 .actor-display-name { 17 .actor-display-name {
18 font-size: 16px; 18 font-size: 16px;
19
20 + .glyphicon {
21 @include margin-left(5px);
22
23 font-size: 12px;
24 }
25 } 19 }
26} 20}
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.scss b/client/src/app/+my-library/my-ownership/my-ownership.component.scss
index d32477270..a8450ff1b 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.scss
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.scss
@@ -55,13 +55,6 @@
55 color: pvar(--mainForegroundColor); 55 color: pvar(--mainForegroundColor);
56 line-height: 1rem; 56 line-height: 1rem;
57 57
58 div .glyphicon {
59 @include margin-left(0.1rem);
60
61 font-size: 80%;
62 color: #808080;
63 }
64
65 div + div { 58 div + div {
66 font-size: 80%; 59 font-size: 80%;
67 } 60 }
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
index eca821370..a54df97cd 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
@@ -65,7 +65,7 @@
65 [redraftValue]="commentReplyRedraftValue" 65 [redraftValue]="commentReplyRedraftValue"
66 > 66 >
67 <div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies mb-2"> 67 <div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies mb-2">
68 <span class="glyphicon glyphicon-menu-down"></span> 68 <span class="chevron-down"></span>
69 69
70 <ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container> 70 <ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container>
71 71
@@ -80,7 +80,7 @@
80 80
81 <ng-template i18n #noAuthorComments>View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}}</ng-template> 81 <ng-template i18n #noAuthorComments>View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}}</ng-template>
82 82
83 <my-loader size="sm" class="comment-thread-loading ms-1" [loading]="threadLoading[comment.id]"></my-loader> 83 <my-loader size="sm" class="ms-1" [loading]="threadLoading[comment.id]"></my-loader>
84 </div> 84 </div>
85 </my-video-comment> 85 </my-video-comment>
86 86
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
index 31aa73937..4b00683ab 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
@@ -11,14 +11,6 @@
11 cursor: pointer; 11 cursor: pointer;
12} 12}
13 13
14.glyphicon,
15.comment-thread-loading {
16 @include margin-right(5px);
17
18 display: inline-block;
19 font-size: 13px;
20}
21
22.title-block { 14.title-block {
23 .title-page { 15 .title-page {
24 @include margin-right(0); 16 @include margin-right(0);
diff --git a/client/src/app/header/search-typeahead.component.html b/client/src/app/header/search-typeahead.component.html
index d08e2f0fb..783b4b53b 100644
--- a/client/src/app/header/search-typeahead.component.html
+++ b/client/src/app/header/search-typeahead.component.html
@@ -26,7 +26,6 @@
26 <label class="small-title" i18n>GLOBAL SEARCH</label> 26 <label class="small-title" i18n>GLOBAL SEARCH</label>
27 <div class="advanced-search-status muted"> 27 <div class="advanced-search-status muted">
28 <span *ngIf="serverConfig" class="me-1" i18n>using {{ serverConfig.search.searchIndex.url }}</span> 28 <span *ngIf="serverConfig" class="me-1" i18n>using {{ serverConfig.search.searchIndex.url }}</span>
29 <i class="glyphicon glyphicon-globe"></i>
30 </div> 29 </div>
31 </div> 30 </div>
32 <div class="muted" i18n>Results will be augmented with those of a third-party index. Only data necessary to make the query will be sent.</div> 31 <div class="muted" i18n>Results will be augmented with those of a third-party index. Only data necessary to make the query will be sent.</div>
@@ -41,7 +40,6 @@
41 <span [ngClass]="canSearchAnyURI ? 'text-success' : 'muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows."> 40 <span [ngClass]="canSearchAnyURI ? 'text-success' : 'muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows.">
42 <span *ngIf="canSearchAnyURI()" class="me-1" i18n>any instance</span> 41 <span *ngIf="canSearchAnyURI()" class="me-1" i18n>any instance</span>
43 <span *ngIf="!canSearchAnyURI()" class="me-1" i18n>only followed instances</span> 42 <span *ngIf="!canSearchAnyURI()" class="me-1" i18n>only followed instances</span>
44 <i [ngClass]="canSearchAnyURI() ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i>
45 </span> 43 </span>
46 </div> 44 </div>
47 </div> 45 </div>
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index 5114ec3a7..e4c9c602c 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -129,10 +129,6 @@ li.suggestion {
129 } 129 }
130} 130}
131 131
132.glyphicon {
133 top: 3px;
134}
135
136.advanced-search-status { 132.advanced-search-status {
137 height: max-content; 133 height: max-content;
138 cursor: default; 134 cursor: default;
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index c52af6c80..352682bfc 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -352,10 +352,6 @@ my-actor-avatar {
352 display: flex; 352 display: flex;
353 align-items: center; 353 align-items: center;
354 354
355 i.glyphicon-menu-right {
356 opacity: .4;
357 }
358
359 &:hover { 355 &:hover {
360 .hover-display-toggle { 356 .hover-display-toggle {
361 display: none; 357 display: none;
diff --git a/client/src/app/menu/notification.component.html b/client/src/app/menu/notification.component.html
index 5aa834f36..890b086f1 100644
--- a/client/src/app/menu/notification.component.html
+++ b/client/src/app/menu/notification.component.html
@@ -24,14 +24,19 @@
24 <div> 24 <div>
25 <button 25 <button
26 *ngIf="unreadNotifications" 26 *ngIf="unreadNotifications"
27 i18n-title title="Mark all as read" class="glyphicon glyphicon-ok me-2" 27 i18n-title title="Mark all as read" class="me-2"
28 (click)="markAllAsRead()" 28 (click)="markAllAsRead()"
29 ></button> 29 >
30 <my-global-icon iconName="tick"></my-global-icon>
31 </button>
32
30 <a 33 <a
31 i18n-title title="Update your notification preferences" class="glyphicon glyphicon-cog" 34 i18n-title title="Update your notification preferences"
32 routerLink="/my-account/settings" fragment="notifications" 35 routerLink="/my-account/settings" fragment="notifications"
33 #settingsNotifications (click)="onNavigate(settingsNotifications)" 36 #settingsNotifications (click)="onNavigate(settingsNotifications)"
34 ></a> 37 >
38 <my-global-icon iconName="cog"></my-global-icon>
39 </a>
35 </div> 40 </div>
36 </div> 41 </div>
37 42
diff --git a/client/src/app/menu/notification.component.scss b/client/src/app/menu/notification.component.scss
index 3515c3e19..7f72c98d1 100644
--- a/client/src/app/menu/notification.component.scss
+++ b/client/src/app/menu/notification.component.scss
@@ -119,6 +119,10 @@
119 color: rgba(20, 20, 20, 0.8); 119 color: rgba(20, 20, 20, 0.8);
120 } 120 }
121 } 121 }
122
123 my-global-icon {
124 width: 20px;
125 }
122 } 126 }
123 127
124 .all-notifications { 128 .all-notifications {
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.html b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
index bb87279d7..b04d46e32 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
@@ -19,7 +19,8 @@
19 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }" 19 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
20 class="ms-auto muted abuse-details-links" i18n 20 class="ms-auto muted abuse-details-links" i18n
21 > 21 >
22 {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}<span class="ms-1 glyphicon glyphicon-flag"></span> 22 {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}
23 <my-global-icon iconName="flag"></my-global-icon>
23 </a> 24 </a>
24 </span> 25 </span>
25 </div> 26 </div>
@@ -39,7 +40,8 @@
39 <a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }" 40 <a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
40 class="ms-auto muted abuse-details-links" i18n 41 class="ms-auto muted abuse-details-links" i18n
41 > 42 >
42 {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}<span class="ms-1 glyphicon glyphicon-flag"></span> 43 {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}
44 <my-global-icon iconName="flag"></my-global-icon>
43 </a> 45 </a>
44 </span> 46 </span>
45 </div> 47 </div>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
index 37bf4cc56..bd43ed459 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
@@ -15,3 +15,7 @@
15.abuse-details-links { 15.abuse-details-links {
16 @include disable-default-a-behaviour; 16 @include disable-default-a-behaviour;
17} 17}
18
19my-global-icon[iconName=flag] {
20 width: 15px;
21}
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
index 6d1de808d..f79054d03 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@@ -70,7 +70,7 @@
70 </span> 70 </span>
71 71
72 <span name> 72 <span name>
73 <span *ngIf="abuse.video.blacklisted" i18n-title title="The video was blocked" class="glyphicon glyphicon-ban-circle"></span> 73 <my-global-icon *ngIf="abuse.video.blacklisted" iconName="no" i18n-title title="The video was blocked"></my-global-icon>
74 </span> 74 </span>
75 </my-video-cell> 75 </my-video-cell>
76 </td> 76 </td>
@@ -80,7 +80,7 @@
80 <div class="table-video-text"> 80 <div class="table-video-text">
81 <div> 81 <div>
82 {{ abuse.video.name }} 82 {{ abuse.video.name }}
83 <span class="glyphicon glyphicon-trash"></span> 83 <my-global-icon iconName="delete"></my-global-icon>
84 </div> 84 </div>
85 <div i18n>by {{ abuse.video.channel?.displayName }} on {{ abuse.video.channel?.host }} </div> 85 <div i18n>by {{ abuse.video.channel?.displayName }} on {{ abuse.video.channel?.host }} </div>
86 </div> 86 </div>
@@ -116,8 +116,8 @@
116 <td class="c-hand" [pRowToggler]="abuse">{{ abuse.createdAt | date: 'short' }}</td> 116 <td class="c-hand" [pRowToggler]="abuse">{{ abuse.createdAt | date: 'short' }}</td>
117 117
118 <td class="c-hand abuse-states" [pRowToggler]="abuse"> 118 <td class="c-hand abuse-states" [pRowToggler]="abuse">
119 <span *ngIf="isAbuseAccepted(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-ok"></span> 119 <my-global-icon *ngIf="isAbuseAccepted(abuse)" [title]="abuse.state.label" iconName="tick"></my-global-icon>
120 <span *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-remove"></span> 120 <my-global-icon *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" iconName="cross"></my-global-icon>
121 </td> 121 </td>
122 122
123 <td class="c-hand abuse-messages" (click)="openAbuseMessagesModal(abuse)"> 123 <td class="c-hand abuse-messages" (click)="openAbuseMessagesModal(abuse)">
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
index 2d8acae58..4852f2e8b 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
@@ -7,10 +7,6 @@
7 color: var(--greyForegroundColor); 7 color: var(--greyForegroundColor);
8} 8}
9 9
10.abuse-states .glyphicon-comment {
11 @include margin-left(0.5rem);
12}
13
14.abuse-messages { 10.abuse-messages {
15 my-global-icon { 11 my-global-icon {
16 @include margin-left(3px); 12 @include margin-left(3px);
@@ -20,3 +16,10 @@
20 top: -2px; 16 top: -2px;
21 } 17 }
22} 18}
19
20.table-video-text my-global-icon,
21my-video-cell my-global-icon {
22 width: 15px;
23 position: relative;
24 top: -2px;
25}
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.html b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
index 1d6b3df7e..e4f318385 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.html
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
@@ -25,5 +25,5 @@
25 (keyup)="onInputSearch($event)" 25 (keyup)="onInputSearch($event)"
26 > 26 >
27 27
28 <a class="glyphicon glyphicon-remove-sign form-control-clear" title="Clear filter" i18n-title (click)="onResetTableFilter()"></a> 28 <my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetTableFilter()"></my-global-icon>
29</div> 29</div>
diff --git a/client/src/app/shared/shared-forms/input-text.component.html b/client/src/app/shared/shared-forms/input-text.component.html
index f7f9ce403..669b5f32e 100644
--- a/client/src/app/shared/shared-forms/input-text.component.html
+++ b/client/src/app/shared/shared-forms/input-text.component.html
@@ -5,8 +5,9 @@
5 #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control" 5 #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control"
6 /> 6 />
7 7
8 <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary eye-button" [title]="toggleTitle"> 8 <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary" [title]="toggleTitle">
9 <span class="glyphicon glyphicon-eye-{{ show ? 'open' : 'close' }}"></span> 9 <my-global-icon *ngIf="show" iconName="sensitive"></my-global-icon>
10 <my-global-icon *ngIf="!show" iconName="unsensitive"></my-global-icon>
10 </button> 11 </button>
11 12
12 <button 13 <button
diff --git a/client/src/app/shared/shared-forms/input-text.component.scss b/client/src/app/shared/shared-forms/input-text.component.scss
index cc1646a69..253793196 100644
--- a/client/src/app/shared/shared-forms/input-text.component.scss
+++ b/client/src/app/shared/shared-forms/input-text.component.scss
@@ -9,10 +9,8 @@ input {
9 9
10.btn { 10.btn {
11 font-size: 15px; 11 font-size: 15px;
12}
13 12
14my-global-icon { 13 @include button-with-icon(18px);
15 width: 18px;
16} 14}
17 15
18.copy-text { 16.copy-text {
diff --git a/client/src/app/shared/shared-forms/input-text.component.ts b/client/src/app/shared/shared-forms/input-text.component.ts
index ed4637c17..d9722e6c6 100644
--- a/client/src/app/shared/shared-forms/input-text.component.ts
+++ b/client/src/app/shared/shared-forms/input-text.component.ts
@@ -1,6 +1,7 @@
1import { Component, forwardRef, Input } from '@angular/core' 1import { Component, forwardRef, Input } from '@angular/core'
2import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' 2import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
3import { Notifier } from '@app/core' 3import { Notifier } from '@app/core'
4import { GlobalIconName } from '../shared-icons'
4 5
5@Component({ 6@Component({
6 selector: 'my-input-text', 7 selector: 'my-input-text',
@@ -47,6 +48,12 @@ export class InputTextComponent implements ControlValueAccessor {
47 this.notifier.success($localize`Copied`) 48 this.notifier.success($localize`Copied`)
48 } 49 }
49 50
51 getEyeIcon (): GlobalIconName {
52 if (this.show) return 'sensitive'
53
54 return 'unsensitive'
55 }
56
50 propagateChange = (_: any) => { /* empty */ } 57 propagateChange = (_: any) => { /* empty */ }
51 58
52 writeValue (value: string) { 59 writeValue (value: string) {
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 43c407743..8b864fd5f 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.ts
+++ b/client/src/app/shared/shared-icons/global-icon.component.ts
@@ -91,6 +91,7 @@ export type GlobalIconName = keyof typeof icons
91}) 91})
92export class GlobalIconComponent implements OnInit { 92export class GlobalIconComponent implements OnInit {
93 @Input() iconName: GlobalIconName 93 @Input() iconName: GlobalIconName
94 @Input() width: string
94 95
95 constructor ( 96 constructor (
96 private el: ElementRef, 97 private el: ElementRef,
@@ -106,6 +107,10 @@ export class GlobalIconComponent implements OnInit {
106 'filter:internal.common.svg-icons.get-content.params', 107 'filter:internal.common.svg-icons.get-content.params',
107 'filter:internal.common.svg-icons.get-content.result' 108 'filter:internal.common.svg-icons.get-content.result'
108 ) 109 )
110
111 if (this.width) {
112 nativeElement.style.width = this.width
113 }
109 } 114 }
110 115
111 private getSVGContent (options: { name: string }) { 116 private getSVGContent (options: { name: string }) {
diff --git a/client/src/app/shared/shared-instance/feature-boolean.component.html b/client/src/app/shared/shared-instance/feature-boolean.component.html
index ccb8a30cc..6de5d2075 100644
--- a/client/src/app/shared/shared-instance/feature-boolean.component.html
+++ b/client/src/app/shared/shared-instance/feature-boolean.component.html
@@ -1,3 +1,2 @@
1<span *ngIf="value === true" class="glyphicon glyphicon-ok" i18n-aria-label aria-label="yes"></span> 1<my-global-icon *ngIf="value === true" iconName="tick" i18n-aria-label aria-label="yes"></my-global-icon>
2<span *ngIf="value === false" class="glyphicon glyphicon-remove" i18n-aria-label aria-label="no"></span> 2<my-global-icon *ngIf="value === false" iconName="cross" i18n-aria-label aria-label="no"></my-global-icon>
3
diff --git a/client/src/app/shared/shared-instance/feature-boolean.component.scss b/client/src/app/shared/shared-instance/feature-boolean.component.scss
index 8683ecc55..29b8c3e02 100644
--- a/client/src/app/shared/shared-instance/feature-boolean.component.scss
+++ b/client/src/app/shared/shared-instance/feature-boolean.component.scss
@@ -1,10 +1,10 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4.glyphicon-ok { 4my-global-icon[iconName=tick] {
5 color: $green; 5 color: $green;
6} 6}
7 7
8.glyphicon-remove { 8my-global-icon[iconName=cross] {
9 color: $red; 9 color: $red;
10} 10}
diff --git a/client/src/app/shared/shared-instance/instance-statistics.component.html b/client/src/app/shared/shared-instance/instance-statistics.component.html
index 2ca61fd94..960520680 100644
--- a/client/src/app/shared/shared-instance/instance-statistics.component.html
+++ b/client/src/app/shared/shared-instance/instance-statistics.component.html
@@ -10,7 +10,7 @@
10 <p class="stat-value">{{ serverStats.totalUsers | number }}</p> 10 <p class="stat-value">{{ serverStats.totalUsers | number }}</p>
11 <p class="stat-label" i18n>users</p> 11 <p class="stat-label" i18n>users</p>
12 </div> 12 </div>
13 <i class="glyphicon glyphicon-user icon-bottom"></i> 13 <my-global-icon iconName="user"></my-global-icon>
14 </div> 14 </div>
15 </div> 15 </div>
16 16
@@ -20,7 +20,7 @@
20 <p class="stat-value">{{ serverStats.totalLocalVideos | number }}</p> 20 <p class="stat-value">{{ serverStats.totalLocalVideos | number }}</p>
21 <p class="stat-label" i18n>videos</p> 21 <p class="stat-label" i18n>videos</p>
22 </div> 22 </div>
23 <i class="glyphicon glyphicon-facetime-video"></i> 23 <my-global-icon iconName="film"></my-global-icon>
24 </div> 24 </div>
25 </div> 25 </div>
26 26
@@ -30,7 +30,7 @@
30 <p class="stat-value">{{ serverStats.totalLocalVideoViews | number }}</p> 30 <p class="stat-value">{{ serverStats.totalLocalVideoViews | number }}</p>
31 <p class="stat-label" i18n>views</p> 31 <p class="stat-label" i18n>views</p>
32 </div> 32 </div>
33 <i class="glyphicon glyphicon-eye-open"></i> 33 <my-global-icon iconName="sensitive"></my-global-icon>
34 </div> 34 </div>
35 </div> 35 </div>
36 36
@@ -40,7 +40,7 @@
40 <p class="stat-value">{{ serverStats.totalLocalVideoComments | number }}</p> 40 <p class="stat-value">{{ serverStats.totalLocalVideoComments | number }}</p>
41 <p class="stat-label" i18n>comments</p> 41 <p class="stat-label" i18n>comments</p>
42 </div> 42 </div>
43 <i class="glyphicon glyphicon-comment"></i> 43 <my-global-icon iconName="message-circle"></my-global-icon>
44 </div> 44 </div>
45 </div> 45 </div>
46 46
@@ -50,7 +50,7 @@
50 <p class="stat-value">{{ serverStats.totalLocalVideoFilesSize | bytes:1 }}</p> 50 <p class="stat-value">{{ serverStats.totalLocalVideoFilesSize | bytes:1 }}</p>
51 <p class="stat-label" i18n>hosted video</p> 51 <p class="stat-label" i18n>hosted video</p>
52 </div> 52 </div>
53 <i class="glyphicon glyphicon-hdd"></i> 53 <my-global-icon iconName="home"></my-global-icon>
54 </div> 54 </div>
55 </div> 55 </div>
56 </div> 56 </div>
@@ -64,7 +64,7 @@
64 <p class="stat-value">{{ serverStats.totalVideos | number }}</p> 64 <p class="stat-value">{{ serverStats.totalVideos | number }}</p>
65 <p class="stat-label" i18n>videos</p> 65 <p class="stat-label" i18n>videos</p>
66 </div> 66 </div>
67 <i class="glyphicon glyphicon-facetime-video"></i> 67 <my-global-icon iconName="film"></my-global-icon>
68 </div> 68 </div>
69 </div> 69 </div>
70 70
@@ -74,7 +74,7 @@
74 <p class="stat-value">{{ serverStats.totalVideoComments | number }}</p> 74 <p class="stat-value">{{ serverStats.totalVideoComments | number }}</p>
75 <p class="stat-label" i18n>comments</p> 75 <p class="stat-label" i18n>comments</p>
76 </div> 76 </div>
77 <i class="glyphicon glyphicon-comment"></i> 77 <my-global-icon iconName="message-circle"></my-global-icon>
78 </div> 78 </div>
79 </div> 79 </div>
80 80
@@ -84,7 +84,7 @@
84 <p class="stat-value">{{ serverStats.totalInstanceFollowers | number }}</p> 84 <p class="stat-value">{{ serverStats.totalInstanceFollowers | number }}</p>
85 <p class="stat-label" i18n>followers</p> 85 <p class="stat-label" i18n>followers</p>
86 </div> 86 </div>
87 <i class="glyphicon glyphicon-retweet"></i> 87 <my-global-icon iconName="share"></my-global-icon>
88 </div> 88 </div>
89 </div> 89 </div>
90 90
@@ -94,7 +94,7 @@
94 <p class="stat-value">{{ serverStats.totalInstanceFollowing | number }}</p> 94 <p class="stat-value">{{ serverStats.totalInstanceFollowing | number }}</p>
95 <p class="stat-label" i18n>following</p> 95 <p class="stat-label" i18n>following</p>
96 </div> 96 </div>
97 <i class="glyphicon glyphicon-retweet"></i> 97 <my-global-icon iconName="globe"></my-global-icon>
98 </div> 98 </div>
99 </div> 99 </div>
100 </div> 100 </div>
diff --git a/client/src/app/shared/shared-instance/instance-statistics.component.scss b/client/src/app/shared/shared-instance/instance-statistics.component.scss
index 5286ab03a..e1d489d28 100644
--- a/client/src/app/shared/shared-instance/instance-statistics.component.scss
+++ b/client/src/app/shared/shared-instance/instance-statistics.component.scss
@@ -1,3 +1,5 @@
1@use '_variables' as *;
2@use '_mixins' as *;
1 3
2h3 { 4h3 {
3 font-size: 1.25rem; 5 font-size: 1.25rem;
@@ -19,22 +21,19 @@ h3 {
19 margin: 0; 21 margin: 0;
20 } 22 }
21 23
22 .glyphicon {
23 opacity: 0.12;
24 position: absolute;
25 left: 16px;
26 top: -24px;
27
28 &.icon-bottom {
29 top: 4px;
30 }
31
32 &::before {
33 font-size: 8em;
34 }
35 }
36
37 .card-body { 24 .card-body {
38 z-index: 2; 25 z-index: 2;
39 } 26 }
40} 27}
28
29my-global-icon {
30 opacity: 0.12;
31 position: absolute;
32 left: 16px;
33 top: -24px;
34 width: 110px;
35
36 &.icon-bottom {
37 top: 4px;
38 }
39}
diff --git a/client/src/app/shared/shared-instance/shared-instance.module.ts b/client/src/app/shared/shared-instance/shared-instance.module.ts
index 13c681ab8..dfce88e11 100644
--- a/client/src/app/shared/shared-instance/shared-instance.module.ts
+++ b/client/src/app/shared/shared-instance/shared-instance.module.ts
@@ -1,6 +1,7 @@
1 1
2import { NgModule } from '@angular/core' 2import { NgModule } from '@angular/core'
3import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap' 3import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
4import { SharedGlobalIconModule } from '../shared-icons'
4import { SharedMainModule } from '../shared-main/shared-main.module' 5import { SharedMainModule } from '../shared-main/shared-main.module'
5import { FeatureBooleanComponent } from './feature-boolean.component' 6import { FeatureBooleanComponent } from './feature-boolean.component'
6import { InstanceAboutAccordionComponent } from './instance-about-accordion.component' 7import { InstanceAboutAccordionComponent } from './instance-about-accordion.component'
@@ -12,6 +13,7 @@ import { InstanceService } from './instance.service'
12@NgModule({ 13@NgModule({
13 imports: [ 14 imports: [
14 SharedMainModule, 15 SharedMainModule,
16 SharedGlobalIconModule,
15 NgbAccordionModule 17 NgbAccordionModule
16 ], 18 ],
17 19
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.ts b/client/src/app/shared/shared-main/loaders/loader.component.ts
index ce8685a09..bd038f8b5 100644
--- a/client/src/app/shared/shared-main/loaders/loader.component.ts
+++ b/client/src/app/shared/shared-main/loaders/loader.component.ts
@@ -12,7 +12,7 @@ export class LoaderComponent {
12 sm: { 12 sm: {
13 width: '1rem', 13 width: '1rem',
14 height: '1rem', 14 height: '1rem',
15 'border-width': '.2em' 15 'border-width': '0.15rem'
16 }, 16 },
17 xl: { 17 xl: {
18 width: '3rem', 18 width: '3rem',
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.html b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
index 11f5a1ab0..ae57ca5b7 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.html
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
@@ -10,7 +10,7 @@
10 [placeholder]="placeholder" 10 [placeholder]="placeholder"
11 > 11 >
12 12
13 <a class="glyphicon glyphicon-remove-sign form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></a> 13 <my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></my-global-icon>
14 </div> 14 </div>
15 15
16 <my-global-icon iconName="search" aria-label="Search" role="button" (click)="onIconClick()" [title]="iconTitle"></my-global-icon> 16 <my-global-icon iconName="search" aria-label="Search" role="button" (click)="onIconClick()" [title]="iconTitle"></my-global-icon>
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
index d5fcff760..ee0f7a8d2 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
@@ -5,7 +5,7 @@
5 display: flex; 5 display: flex;
6} 6}
7 7
8my-global-icon { 8.root > my-global-icon {
9 @include margin-left(10px); 9 @include margin-left(10px);
10 10
11 height: 28px; 11 height: 28px;
@@ -25,3 +25,7 @@ input {
25 box-shadow: 0 0 5px 0 #a5a5a5; 25 box-shadow: 0 0 5px 0 #a5a5a5;
26 } 26 }
27} 27}
28
29.input-group > my-global-icon {
30 width: 20px;
31}
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html
index 0658ae962..1b99a6c1e 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.html
+++ b/client/src/app/shared/shared-share-modal/video-share.component.html
@@ -266,7 +266,7 @@
266 [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"> 266 [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
267 267
268 <ng-container *ngIf="isAdvancedCustomizationCollapsed"> 268 <ng-container *ngIf="isAdvancedCustomizationCollapsed">
269 <span class="glyphicon glyphicon-menu-down"></span> 269 <span class="chevron-down"></span>
270 270
271 <ng-container i18n> 271 <ng-container i18n>
272 More customization 272 More customization
@@ -274,7 +274,7 @@
274 </ng-container> 274 </ng-container>
275 275
276 <ng-container *ngIf="!isAdvancedCustomizationCollapsed"> 276 <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
277 <span class="glyphicon glyphicon-menu-up"></span> 277 <span class="chevron-up"></span>
278 278
279 <ng-container i18n> 279 <ng-container i18n>
280 Less customization 280 Less customization
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.scss b/client/src/app/shared/shared-share-modal/video-share.component.scss
index 6123bc517..611291981 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.scss
+++ b/client/src/app/shared/shared-share-modal/video-share.component.scss
@@ -49,10 +49,6 @@ my-input-text {
49 font-size: 16px; 49 font-size: 16px;
50 font-weight: $font-semibold; 50 font-weight: $font-semibold;
51 cursor: pointer; 51 cursor: pointer;
52
53 .glyphicon {
54 @include margin-right(5px);
55 }
56 } 52 }
57 53
58 .video-caption-block { 54 .video-caption-block {
diff --git a/client/src/app/shared/shared-tables/table-expander-icon.component.ts b/client/src/app/shared/shared-tables/table-expander-icon.component.ts
index 3756b475a..66bbfe6fb 100644
--- a/client/src/app/shared/shared-tables/table-expander-icon.component.ts
+++ b/client/src/app/shared/shared-tables/table-expander-icon.component.ts
@@ -4,7 +4,7 @@ import { Component, Input } from '@angular/core'
4 selector: 'my-table-expander-icon', 4 selector: 'my-table-expander-icon',
5 template: ` 5 template: `
6<span class="expander"> 6<span class="expander">
7 <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i> 7 <i [ngClass]="expanded ? 'chevron-down' : 'chevron-right'"></i>
8</span>` 8</span>`
9}) 9})
10export class TableExpanderIconComponent { 10export class TableExpanderIconComponent {
diff --git a/client/src/app/shared/shared-tables/video-cell.component.scss b/client/src/app/shared/shared-tables/video-cell.component.scss
index 7efb61502..5d26b02ef 100644
--- a/client/src/app/shared/shared-tables/video-cell.component.scss
+++ b/client/src/app/shared/shared-tables/video-cell.component.scss
@@ -59,13 +59,6 @@
59 color: pvar(--mainForegroundColor); 59 color: pvar(--mainForegroundColor);
60 line-height: 1rem; 60 line-height: 1rem;
61 61
62 div .glyphicon {
63 @include margin-left(0.1rem);
64
65 font-size: 80%;
66 color: #808080;
67 }
68
69 div + div { 62 div + div {
70 color: var(--greyForegroundColor); 63 color: var(--greyForegroundColor);
71 font-size: 11px; 64 font-size: 11px;
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html
index e8990747a..1c7458b4b 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.html
@@ -120,7 +120,7 @@
120 [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic" 120 [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"
121 > 121 >
122 <ng-container *ngIf="isAdvancedCustomizationCollapsed"> 122 <ng-container *ngIf="isAdvancedCustomizationCollapsed">
123 <span class="glyphicon glyphicon-menu-down"></span> 123 <span class="chevron-down"></span>
124 124
125 <ng-container i18n> 125 <ng-container i18n>
126 Advanced 126 Advanced
@@ -128,7 +128,7 @@
128 </ng-container> 128 </ng-container>
129 129
130 <ng-container *ngIf="!isAdvancedCustomizationCollapsed"> 130 <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
131 <span class="glyphicon glyphicon-menu-up"></span> 131 <span class="chevron-up"></span>
132 132
133 <ng-container i18n> 133 <ng-container i18n>
134 Simple 134 Simple
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.scss b/client/src/app/shared/shared-video-miniature/video-download.component.scss
index bd42f4813..eb9c57b2f 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.scss
@@ -17,10 +17,6 @@
17 .nav-tabs { 17 .nav-tabs {
18 margin-top: 10x; 18 margin-top: 10x;
19 } 19 }
20
21 .glyphicon {
22 @include margin-right(5px);
23 }
24} 20}
25 21
26.peertube-select-container.title-select { 22.peertube-select-container.title-select {