Add checkbox focus shadows, and admin resolution descriptions

7 files changed, 20 insertions, 6 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 82f467e16..8d6c9ab5b 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -549,7 +549,11 @@
                 <my-peertube-checkbox
                   [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
                   i18n-labelText labelText="Resolution {{resolution.label}} enabled"
-                ></my-peertube-checkbox>
+                >
+                  <ng-template *ngIf="resolution.description" ptTemplate="help">
+                    <div i18n [innerHTML]="resolution.description"></div>
+                  </ng-template>
+                </my-peertube-checkbox>
               </div>
             </ng-container>
 
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index 25e06d8a1..ed9c3247c 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -18,7 +18,7 @@ import { ServerConfig } from '@shared/models'
 export class EditCustomConfigComponent extends FormReactive implements OnInit {
   customConfig: CustomConfig
 
-  resolutions: { id: string, label: string }[] = []
+  resolutions: { id: string, label: string, description?: string }[] = []
   transcodingThreadOptions: { label: string, value: number }[] = []
 
   languageItems: SelectItem[] = []
@@ -40,7 +40,8 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
     this.resolutions = [
       {
         id: '0p',
-        label: this.i18n('Audio-only')
+        label: this.i18n('Audio-only'),
+        description: `A <code>.mp4</code> that keeps the original audio track, with no video`
       },
       {
         id: '240p',
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 848f9949f..675fb597d 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -31,6 +31,10 @@
 
             <div class="dropdown-divider"></div>
 
+            <a class="dropdown-item" href="https://joinpeertube.org/help" target="_blank" rel="noopener noreferrer">
+              <my-global-icon iconName="help"></my-global-icon> <ng-container i18n>Help</ng-container>
+            </a>
+
             <a (click)="logout($event)" class="dropdown-item" href="#">
               <my-global-icon iconName="sign-out"></my-global-icon> <ng-container i18n>Log out</ng-container>
             </a>
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.scss b/client/src/app/shared/forms/peertube-checkbox.component.scss
index 51f98b0bc..3b467d49d 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/forms/peertube-checkbox.component.scss
@@ -6,6 +6,7 @@
 
   .form-group-checkbox {
     display: flex;
+    align-items: center;
 
     .label-text {
       font-weight: $font-regular;
@@ -23,6 +24,6 @@
 
   my-help {
     position: relative;
-    top: -2px;
+    top: 2px;
   }
 }
diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss
index 84e176b34..f55a516e4 100644
--- a/client/src/app/shared/misc/help.component.scss
+++ b/client/src/app/shared/misc/help.component.scss
@@ -26,7 +26,7 @@
       font-size: 13px;
       background-color: var(--mainBackgroundColor);
       color: var(--mainForegroundColor);
-      box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
+      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
 
       p {
         margin-bottom: 0;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 17217283e..88cbf3384 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -337,7 +337,7 @@
   position: absolute;
 
   &:focus + span {
-    outline: 1px solid #1e5180;
+    box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
   }
 
   & + span {
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 9398f0adc..9aa4d980c 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -330,6 +330,10 @@ p-calendar .ui-datepicker {
   }
 }
 
+p-tablecheckbox:hover div .ui-chkbox-box {
+  box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
+}
+
 .ui-chkbox {
 
   &, .ui-chkbox-box {