aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/menu
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-11-12 15:28:54 +0100
committerChocobozzz <chocobozzz@cpy.re>2020-11-13 12:02:21 +0100
commit17119e4a546522468878cf115558b17949ab50d0 (patch)
tree3f130cfd7fdccf5aeeac9beee941750590239047 /client/src/app/menu
parentb4bc269e5517849b5b89052f0c1a2c01b6f65089 (diff)
downloadPeerTube-17119e4a546522468878cf115558b17949ab50d0.tar.gz
PeerTube-17119e4a546522468878cf115558b17949ab50d0.tar.zst
PeerTube-17119e4a546522468878cf115558b17949ab50d0.zip
Reorganize left menu and account menu
Add my-settings and my-library in left menu Move administration below my-library Split account menu: my-setting and my library
Diffstat (limited to 'client/src/app/menu')
-rw-r--r--client/src/app/menu/menu.component.html179
-rw-r--r--client/src/app/menu/menu.component.scss296
-rw-r--r--client/src/app/menu/menu.component.ts42
3 files changed, 294 insertions, 223 deletions
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 2011899d3..a4b4f26d0 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -1,98 +1,106 @@
1<div class="menu-wrapper"> 1<div class="menu-wrapper">
2 <menu [ngClass]="{ 'logged-in': isLoggedIn }"> 2 <menu [ngClass]="{ 'is-logged-in': isLoggedIn }">
3 <div class="top-menu"> 3 <div class="top-menu">
4 <div *ngIf="isLoggedIn" class="logged-in-block"> 4 <div *ngIf="isLoggedIn" class="logged-in-block">
5 <my-avatar-notification [user]="user" (navigate)="onSameUrlRestoreScrollPosition($event)"></my-avatar-notification> 5 <div>
6 <my-avatar-notification [user]="user" (navigate)="onSameUrlRestoreScrollPosition($event)"></my-avatar-notification>
6 7
7 <div class="logged-in-info"> 8 <div class="logged-in-info">
8 <a *ngIf="user.account" [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="logged-in-display-name">{{ user.account?.displayName }}</a> 9 <a *ngIf="user.account" [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="logged-in-display-name">{{ user.account?.displayName }}</a>
9 <a *ngIf="!user.account" routerLink="/my-account/settings" class="logged-in-display-name">{{ user.account?.displayName }}</a> 10 <a *ngIf="!user.account" routerLink="/my-account/settings" class="logged-in-display-name">{{ user.account?.displayName }}</a>
10 11
11 <div class="logged-in-username">{{ user.username }}</div> 12 <div class="logged-in-username">@{{ user.username }}</div>
12 </div> 13 </div>
13
14 <div class="logged-in-more" ngbDropdown [placement]="placement" container="body" autoClose="outside">
15 <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button"></my-global-icon>
16
17 <div ngbDropdownMenu>
18 <a *ngIf="user.account" ngbDropdownItem ngbDropdownToggle class="dropdown-item" [routerLink]="[ '/accounts', user.account.nameWithHost ]">
19 <my-global-icon iconName="go" aria-hidden="true"></my-global-icon> <ng-container i18n>Public profile</ng-container>
20 </a>
21
22 <div class="dropdown-divider"></div>
23
24 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings"
25 #settingsLink (click)="onSameUrlRestoreScrollPosition(settingsLink)">
26 <my-global-icon iconName="user" aria-hidden="true"></my-global-icon> <ng-container i18n>Account settings</ng-container>
27 </a>
28
29 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/video-channels"
30 #channelsLink (click)="onSameUrlRestoreScrollPosition(channelsLink)">
31 <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon> <ng-container i18n>Channels settings</ng-container>
32 </a>
33
34 <div class="dropdown-divider"></div>
35
36 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" (click)="openLanguageChooser()">
37 <my-global-icon iconName="language" aria-hidden="true"></my-global-icon>
38 <span i18n>Interface:</span>
39 <span class="ml-auto text-muted">{{ language }}</span>
40 </a>
41
42 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-languages-subtitles"
43 #settingsLanguagesSubtitles (click)="onSameUrlRestoreScrollPosition(settingsLanguagesSubtitles)">
44 <my-global-icon iconName="video-lang" aria-hidden="true"></my-global-icon>
45 <span i18n>Videos:</span>
46 <span class="ml-auto text-muted">{{ videoLanguages.join(', ') }}</span>
47 </a>
48
49 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings"
50 fragment="video-sensitive-content-policy" #settingsSensitiveContentPolicy
51 (click)="onSameUrlRestoreScrollPosition(settingsSensitiveContentPolicy)">
52 <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy === 'display' }" iconName="sensitive" aria-hidden="true"></my-global-icon>
53 <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy !== 'display' }" iconName="unsensitive" aria-hidden="true"></my-global-icon>
54 <span i18n>Sensitive:</span>
55 <span class="ml-auto text-muted">{{ nsfwPolicy }}</span>
56 </a>
57
58 <a ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()">
59 <my-global-icon iconName="p2p" aria-hidden="true"></my-global-icon>
60 <ng-container i18n>Help share videos</ng-container>
61 <input type="checkbox" [checked]="user.webTorrentEnabled"/><label class="ml-auto" for="switch">Toggle p2p</label>
62 </a>
63
64 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings"
65 #settingsMoreLink (click)="onSameUrlRestoreScrollPosition(settingsMoreLink)">
66 <my-global-icon iconName="more-horizontal" aria-hidden="true"></my-global-icon> <ng-container i18n>More account settings</ng-container>
67 </a>
68
69 <div class="dropdown-divider"></div>
70
71 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" (click)="openHotkeysCheatSheet()">
72 <i class="icon icon-shortcuts" aria-hidden="true"></i> <ng-container i18n>Keyboard shortcuts</ng-container>
73 </a>
74 14
75 <a ngbDropdownItem ngbDropdownToggle (click)="logout($event)" class="dropdown-item" href="#"> 15 <div class="logged-in-more" ngbDropdown [placement]="placement" container="body" autoClose="outside">
76 <my-global-icon iconName="sign-out" aria-hidden="true"></my-global-icon> <ng-container i18n>Log out</ng-container> 16 <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button"></my-global-icon>
77 </a> 17
18 <div ngbDropdownMenu>
19 <a *ngIf="user.account" ngbDropdownItem ngbDropdownToggle class="dropdown-item" [routerLink]="[ '/accounts', user.account.nameWithHost ]">
20 <my-global-icon iconName="go" aria-hidden="true"></my-global-icon> <ng-container i18n>Public profile</ng-container>
21 </a>
22
23 <div class="dropdown-divider"></div>
24
25 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/notifications">
26 <my-global-icon iconName="inbox-full" aria-hidden="true"></my-global-icon> <ng-container i18n>My notifications</ng-container>
27 </a>
28
29 <div class="dropdown-divider"></div>
30
31 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" (click)="openLanguageChooser()">
32 <my-global-icon iconName="language" aria-hidden="true"></my-global-icon>
33 <span i18n>Interface:</span>
34 <span class="ml-auto text-muted">{{ language }}</span>
35 </a>
36
37 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-languages-subtitles"
38 #settingsLanguagesSubtitles (click)="onSameUrlRestoreScrollPosition(settingsLanguagesSubtitles)">
39 <my-global-icon iconName="video-lang" aria-hidden="true"></my-global-icon>
40 <span i18n>Videos:</span>
41 <span class="ml-auto text-muted">{{ videoLanguages.join(', ') }}</span>
42 </a>
43
44 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings"
45 fragment="video-sensitive-content-policy" #settingsSensitiveContentPolicy
46 (click)="onSameUrlRestoreScrollPosition(settingsSensitiveContentPolicy)">
47 <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy === 'display' }" iconName="sensitive" aria-hidden="true"></my-global-icon>
48 <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy !== 'display' }" iconName="unsensitive" aria-hidden="true"></my-global-icon>
49 <span i18n>Sensitive:</span>
50 <span class="ml-auto text-muted">{{ nsfwPolicy }}</span>
51 </a>
52
53 <a ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()">
54 <my-global-icon iconName="p2p" aria-hidden="true"></my-global-icon>
55 <ng-container i18n>Help share videos</ng-container>
56 <input type="checkbox" [checked]="user.webTorrentEnabled"/><label class="ml-auto" for="switch">Toggle p2p</label>
57 </a>
58
59 <div class="dropdown-divider"></div>
60
61 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" (click)="openHotkeysCheatSheet()">
62 <i class="icon icon-shortcuts" aria-hidden="true"></i> <ng-container i18n>Keyboard shortcuts</ng-container>
63 </a>
64
65 <a ngbDropdownItem ngbDropdownToggle (click)="logout($event)" class="dropdown-item" href="#">
66 <my-global-icon iconName="sign-out" aria-hidden="true"></my-global-icon> <ng-container i18n>Log out</ng-container>
67 </a>
68 </div>
78 </div> 69 </div>
79 </div> 70 </div>
71
72 <div class="logged-in-menu">
73 <a routerLink="/my-account" routerLinkActive="active" #settingsLink (click)="onSameUrlRestoreScrollPosition(settingsLink)">
74 <my-global-icon iconName="user" aria-hidden="true"></my-global-icon>
75 <ng-container i18n>My account</ng-container>
76 </a>
77
78 <a routerLink="/my-library" routerLinkActive="active" #libraryLink (click)="onSameUrlRestoreScrollPosition(libraryLink)">
79 <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
80 <ng-container i18n>My library</ng-container>
81 </a>
82
83 <a *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
84 <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
85 <ng-container i18n>Administration</ng-container>
86 </a>
87 </div>
80 </div> 88 </div>
81 89
82 <div *ngIf="!isLoggedIn" class="button-block"> 90 <div *ngIf="!isLoggedIn" class="login-buttons-block">
83 <a i18n routerLink="/login" class="login-button">Login</a> 91 <a i18n routerLink="/login" class="login-button">Login</a>
84 <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a> 92 <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a>
85 </div> 93 </div>
86 94
87 <div *ngIf="isLoggedIn" class="panel-block"> 95 <div *ngIf="isLoggedIn" class="in-my-account">
88 <div i18n class="block-title">MY LIBRARY</div> 96 <div i18n class="block-title">IN MY ACCOUNT</div>
89 97
90 <a *ngIf="user.canSeeVideosLink" routerLink="/my-account/videos" routerLinkActive="active"> 98 <a *ngIf="user.canSeeVideosLink" routerLink="/my-library/videos" routerLinkActive="active">
91 <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon> 99 <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
92 <ng-container i18n>Videos</ng-container> 100 <ng-container i18n>Videos</ng-container>
93 </a> 101 </a>
94 102
95 <a routerLink="/my-account/video-playlists" routerLinkActive="active"> 103 <a routerLink="/my-library/video-playlists" routerLinkActive="active">
96 <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon> 104 <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
97 <ng-container i18n>Playlists</ng-container> 105 <ng-container i18n>Playlists</ng-container>
98 </a> 106 </a>
@@ -102,15 +110,15 @@
102 <ng-container i18n>Subscriptions</ng-container> 110 <ng-container i18n>Subscriptions</ng-container>
103 </a> 111 </a>
104 112
105 <a routerLink="/my-account/history/videos" routerLinkActive="active"> 113 <a routerLink="/my-library/history/videos" routerLinkActive="active">
106 <my-global-icon iconName="history" aria-hidden="true"></my-global-icon> 114 <my-global-icon iconName="history" aria-hidden="true"></my-global-icon>
107 <ng-container i18n>History</ng-container> 115 <ng-container i18n>History</ng-container>
108 </a> 116 </a>
109 117
110 </div> 118 </div>
111 119
112 <div class="panel-block"> 120 <div class="on-instance">
113 <div i18n class="block-title">VIDEOS</div> 121 <div i18n class="block-title">ON {{instanceName}}</div>
114 122
115 <a routerLink="/videos/overview" routerLinkActive="active"> 123 <a routerLink="/videos/overview" routerLinkActive="active">
116 <my-global-icon iconName="globe" aria-hidden="true"></my-global-icon> 124 <my-global-icon iconName="globe" aria-hidden="true"></my-global-icon>
@@ -134,22 +142,19 @@
134 142
135 <a routerLink="/videos/local" routerLinkActive="active"> 143 <a routerLink="/videos/local" routerLinkActive="active">
136 <my-global-icon iconName="home" aria-hidden="true"></my-global-icon> 144 <my-global-icon iconName="home" aria-hidden="true"></my-global-icon>
137 <ng-container i18n>Local</ng-container> 145 <ng-container i18n>Local videos</ng-container>
138 </a> 146 </a>
139 </div> 147 </div>
140 </div> 148 </div>
141 149
142 <div class="footer"> 150 <div class="footer">
143 <div class="panel-block"> 151 <div class="footer-block">
144 <a *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
145 <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
146 <ng-container i18n>Administration</ng-container>
147 </a>
148 <a *ngIf="!isLoggedIn" (click)="openQuickSettings()"> 152 <a *ngIf="!isLoggedIn" (click)="openQuickSettings()">
149 <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon> 153 <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
150 <ng-container i18n>Settings</ng-container> 154 <ng-container i18n>Settings</ng-container>
151 </a> 155 </a>
152 <a routerLink="/about/instance"> 156
157 <a routerLink="/about" routerLinkActive="active">
153 <my-global-icon iconName="help" aria-hidden="true"></my-global-icon> 158 <my-global-icon iconName="help" aria-hidden="true"></my-global-icon>
154 <ng-container i18n>About</ng-container> 159 <ng-container i18n>About</ng-container>
155 </a> 160 </a>
@@ -168,7 +173,7 @@
168 <a i18n href="https://joinpeertube.org/faq" i18n-title title="Frequently asked questions about PeerTube" target="_blank" rel="noopener noreferrer">FAQ</a> 173 <a i18n href="https://joinpeertube.org/faq" i18n-title title="Frequently asked questions about PeerTube" target="_blank" rel="noopener noreferrer">FAQ</a>
169 <a i18n routerLink="/about/instance" fragment="statistics">Stats</a> 174 <a i18n routerLink="/about/instance" fragment="statistics">Stats</a>
170 <a i18n href="https://docs.joinpeertube.org/api-rest-reference.html" i18n-title title="API documentation" target="_blank" rel="noopener noreferrer">API</a> 175 <a i18n href="https://docs.joinpeertube.org/api-rest-reference.html" i18n-title title="API documentation" target="_blank" rel="noopener noreferrer">API</a>
171 <a (click)="openHotkeysCheatSheet()" class="c-hand" i18n>Shortcuts</a> 176 <a (click)="openHotkeysCheatSheet()" class="c-hand" i18n>Keyboard shortcuts</a>
172 </div> 177 </div>
173 </div> 178 </div>
174 179
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 975604055..a95a80af6 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -1,6 +1,39 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4$menu-link-icon-size: 22px;
5$menu-link-icon-margin-right: 18px;
6
7@mixin menu-link {
8 display: flex;
9 align-items: center;
10 padding-left: $menu-lateral-padding;
11 color: pvar(--menuForegroundColor);
12 cursor: pointer;
13 font-size: 16px;
14 white-space: normal;
15 word-break: break-word;
16 padding-right: 20px;
17 transition: background-color .1s ease-in-out;
18
19 &.active {
20 background-color: rgba(255, 255, 255, 0.15);
21 }
22
23 &:hover, &.focus-visible {
24 background-color: rgba(255, 255, 255, 0.10);
25 }
26
27 my-global-icon {
28 @include apply-svg-color(#808080);
29
30 display: flex;
31 width: $menu-link-icon-size;
32 height: $menu-link-icon-size;
33 margin-right: $menu-link-icon-margin-right;
34 }
35}
36
4.menu-wrapper { 37.menu-wrapper {
5 position: fixed; 38 position: fixed;
6 height: calc(100vh - #{$header-height}); 39 height: calc(100vh - #{$header-height});
@@ -14,14 +47,14 @@ menu {
14 @include ellipsis; 47 @include ellipsis;
15 48
16 background-color: pvar(--menuBackgroundColor); 49 background-color: pvar(--menuBackgroundColor);
17 margin: 0;
18 padding: 0;
19 height: 100%;
20 overflow-x: hidden;
21 color: pvar(--menuForegroundColor); 50 color: pvar(--menuForegroundColor);
51
22 display: flex; 52 display: flex;
23 flex-direction: column; 53 flex-direction: column;
54 height: 100%;
24 width: 100%; 55 width: 100%;
56 margin: 0;
57 padding: 0;
25 58
26 &:focus, &:hover { 59 &:focus, &:hover {
27 overflow-y: auto; 60 overflow-y: auto;
@@ -31,7 +64,7 @@ menu {
31 overflow-y: auto; 64 overflow-y: auto;
32 } 65 }
33 66
34 &.logged-in { 67 &.is-logged-in {
35 .panel-block { 68 .panel-block {
36 margin-bottom: 20px; 69 margin-bottom: 20px;
37 } 70 }
@@ -40,19 +73,22 @@ menu {
40 margin-bottom: 15px; 73 margin-bottom: 15px;
41 } 74 }
42 } 75 }
76}
43 77
44 .top-menu { 78.top-menu {
45 flex-grow: 1; 79 flex-grow: 1;
46 width: $menu-width; 80 width: $menu-width;
47 } 81}
48 82
49 .logged-in-block { 83.logged-in-block {
50 height: 100px; 84 margin-bottom: 20px;
51 background-color: rgba(255, 255, 255, 0.15); 85 background-color: rgba(255, 255, 255, 0.15);
86
87 > div:first-child {
88 height: 80px;
52 display: flex; 89 display: flex;
53 align-items: center; 90 align-items: center;
54 justify-content: center; 91 justify-content: center;
55 margin-bottom: 20px;
56 92
57 .logged-in-info { 93 .logged-in-info {
58 @include ellipsis; 94 @include ellipsis;
@@ -95,32 +131,88 @@ menu {
95 } 131 }
96 } 132 }
97 133
98 .button-block { 134 .logged-in-menu {
99 margin: 30px 25px 35px 25px; 135 display: flex;
136 flex-direction: column;
137 align-items: flex-start;
138 border-top: 1px solid var(--greyForegroundColor);
139
140 a {
141 @include menu-link;
142 @include disable-default-a-behaviour;
100 143
101 .login-button { 144 $icon-size: 13px;
102 @include peertube-button-link; 145 $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
103 @include orange-button;
104 146
105 display: block; 147 font-size: 14px;
106 width: 100%; 148 width: 100%;
107 margin-bottom: 10px; 149 min-height: 35px;
108 }
109 150
110 .create-account-button { 151 my-global-icon {
111 @include peertube-button-link; 152 width: $icon-size;
153 height: $icon-size;
112 154
113 display: block; 155 // Keep aligned with other icons
114 width: 100%; 156 margin-left: $additional-margin;
157
158 &[iconName="channel"] {
159 margin-top: -2px;
160 }
161 }
162
163 &.active,
164 &:hover,
165 &:focus-visible {
166 my-global-icon {
167 @include apply-svg-color(var(--mainBackgroundColor));
168 }
169 }
170
171 &.active {
172 $border-left-width: 4px;
115 173
116 color: #fff; 174 font-weight: $font-semibold;
117 background-color: rgba(255, 255, 255, 0.25); 175 border-left: $border-left-width solid var(--mainColor);
118 176
119 &:hover { 177 my-global-icon {
120 background-color: rgba(255, 255, 255, 0.28); 178 margin-left: $additional-margin - $border-left-width;
179 }
121 } 180 }
122 } 181 }
123 } 182 }
183}
184
185.login-buttons-block {
186 margin: 30px 25px 35px 25px;
187
188 .login-button {
189 @include peertube-button-link;
190 @include orange-button;
191
192 display: block;
193 width: 100%;
194 margin-bottom: 10px;
195 }
196
197 .create-account-button {
198 @include peertube-button-link;
199
200 display: block;
201 width: 100%;
202
203 color: #fff;
204 background-color: rgba(255, 255, 255, 0.25);
205
206 &:hover {
207 background-color: rgba(255, 255, 255, 0.28);
208 }
209 }
210}
211
212.in-my-account,
213.on-instance,
214.footer-block {
215 margin-bottom: 15px;
124 216
125 .block-title { 217 .block-title {
126 text-transform: uppercase; 218 text-transform: uppercase;
@@ -128,116 +220,86 @@ menu {
128 font-size: 13px; 220 font-size: 13px;
129 margin-bottom: 25px; 221 margin-bottom: 25px;
130 margin-left: 26px; 222 margin-left: 26px;
131 }
132 223
133 .panel-block { 224 @include ellipsis;
134 margin-bottom: 15px;
135 225
136 a { 226 margin-right: 30px;
137 @include disable-default-a-behaviour; 227 }
138
139 display: flex;
140 align-items: center;
141 padding-left: $menu-lateral-padding;
142 color: pvar(--menuForegroundColor);
143 cursor: pointer;
144 min-height: 40px;
145 font-size: 16px;
146 transition: background-color .1s ease-in-out;
147 white-space: normal;
148 word-break: break-word;
149 padding-right: 20px;
150
151 &.active {
152 background-color: rgba(255, 255, 255, 0.15);
153 }
154
155 &:hover, &.focus-visible {
156 background-color: rgba(255, 255, 255, 0.10);
157 }
158
159 my-global-icon {
160 @include apply-svg-color(#808080);
161 228
162 display: flex; 229 a {
163 width: 22px; 230 @include menu-link;
164 height: 22px; 231 @include disable-default-a-behaviour;
165 margin-right: 18px;
166 232
167 &[iconName="playlists"] { 233 min-height: 40px;
168 height: 24px;
169 width: 24px;
170 234
171 margin-right: 16px; 235 my-global-icon {
172 } 236 &[iconName="playlists"] {
237 height: 24px;
238 width: 24px;
173 239
174 &[iconName="videos"] { 240 margin-right: 16px;
175 position: relative;
176 right: -1px;
177 }
178 } 241 }
179 242
180 .icon { 243 &[iconName="videos"] {
181 @include icon(22px); 244 position: relative;
182 245 right: -1px;
183 margin-right: 18px;
184 } 246 }
185 } 247 }
186 } 248 }
249}
250
251.footer {
252 width: $menu-width;
253 padding-bottom: 15px;
254
255 .bottom-links {
256 display: flex;
257 flex-direction: column;
258 padding: 0 $menu-lateral-padding;
259 }
187 260
188 .footer { 261 $footer-links-base-opacity: .8;
189 width: $menu-width;
190 padding-bottom: 15px;
191 262
192 .bottom-links { 263 .footer-links {
264 &, > div {
193 display: flex; 265 display: flex;
194 flex-direction: column; 266 flex-wrap: wrap;
195 padding: 0 $menu-lateral-padding;
196 } 267 }
197 268
198 $footer-links-base-opacity: .8; 269 a, span[role=button] {
270 display: inline-block;
271 text-decoration: none;
272 color: pvar(--mainBackgroundColor);
273 opacity: $footer-links-base-opacity;
274 white-space: nowrap;
275 font-size: 90%;
276 font-weight: 500;
277 line-height: 1.4rem;
278 margin-right: 8px;
279
280 &.inline-global-icon {
281 display: inline-flex;
282 align-items: center;
283 white-space: nowrap;
284 height: 1.4rem;
199 285
200 .footer-links { 286 my-global-icon {
201 &, > div { 287 @include apply-svg-color(pvar(--mainBackgroundColor));
202 display: flex;
203 flex-wrap: wrap;
204 }
205 288
206 a, span[role=button] { 289 display: flex;
207 display: inline-block; 290 width: auto;
208 text-decoration: none; 291 height: 90%;
209 color: pvar(--mainBackgroundColor); 292 margin-right: .2rem;
210 opacity: $footer-links-base-opacity;
211 white-space: nowrap;
212 font-size: 90%;
213 font-weight: 500;
214 line-height: 1.4rem;
215 margin-right: 8px;
216
217 &.inline-global-icon {
218 display: inline-flex;
219 align-items: center;
220 white-space: nowrap;
221 height: 1.4rem;
222
223 my-global-icon {
224 @include apply-svg-color(pvar(--mainBackgroundColor));
225
226 display: flex;
227 width: auto;
228 height: 90%;
229 margin-right: .2rem;
230 }
231 } 293 }
232 } 294 }
233 } 295 }
296 }
234 297
235 .footer-copyleft small a { 298 .footer-copyleft small a {
236 @include disable-default-a-behaviour; 299 @include disable-default-a-behaviour;
237 300
238 color: pvar(--mainBackgroundColor); 301 color: pvar(--mainBackgroundColor);
239 opacity: $footer-links-base-opacity - .2; 302 opacity: $footer-links-base-opacity - .2;
240 }
241 } 303 }
242} 304}
243 305
@@ -292,7 +354,7 @@ menu {
292 354
293.icon { 355.icon {
294 @include disable-outline; 356 @include disable-outline;
295 @include icon(22px); 357 @include icon($menu-link-icon-size);
296 opacity: 0.8; 358 opacity: 0.8;
297 359
298 &.icon-shortcuts { 360 &.icon-shortcuts {
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index f9a0a9f57..48ed91973 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -61,6 +61,29 @@ export class MenuComponent implements OnInit {
61 } 61 }
62 } 62 }
63 63
64 get language () {
65 return this.languageChooserModal.getCurrentLanguage()
66 }
67
68 get nsfwPolicy () {
69 if (!this.user) return
70
71 switch (this.user.nsfwPolicy) {
72 case 'do_not_list':
73 return $localize`hide`
74
75 case 'blur':
76 return $localize`blur`
77
78 case 'display':
79 return $localize`display`
80 }
81 }
82
83 get instanceName () {
84 return this.serverConfig.instance.name
85 }
86
64 ngOnInit () { 87 ngOnInit () {
65 this.serverConfig = this.serverService.getTmpConfig() 88 this.serverConfig = this.serverService.getTmpConfig()
66 this.serverService.getConfig() 89 this.serverService.getConfig()
@@ -109,25 +132,6 @@ export class MenuComponent implements OnInit {
109 }) 132 })
110 } 133 }
111 134
112 get language () {
113 return this.languageChooserModal.getCurrentLanguage()
114 }
115
116 get nsfwPolicy () {
117 if (!this.user) return
118
119 switch (this.user.nsfwPolicy) {
120 case 'do_not_list':
121 return $localize`hide`
122
123 case 'blur':
124 return $localize`blur`
125
126 case 'display':
127 return $localize`display`
128 }
129 }
130
131 isRegistrationAllowed () { 135 isRegistrationAllowed () {
132 return this.serverConfig.signup.allowed && 136 return this.serverConfig.signup.allowed &&
133 this.serverConfig.signup.allowedForCurrentIP 137 this.serverConfig.signup.allowedForCurrentIP
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-17 23:39:44 +0000