Added icon on user pages to report page

 - Not shown for admins or VIPs
 - Has to be turned on in the config to be active

Author: JulianPrieber

.env

@@ -130,3 +130,5 @@ ALLOW_USER_EXPORT=true
 ALLOW_USER_IMPORT=true
 
 MANUAL_USER_VERIFICATION=true
+
+ENABLE_REPORT_ICON=false

resources/lang/de/messages.php

@@ -734,6 +734,8 @@
     'ADMIN_EMAIL.description' => 'Wird zum Versenden von Benachrichtigungs-E-Mails verwendet.',
     'HIDE_VERIFICATION_CHECKMARK.title' => 'Verifizierungshäkchen ausblenden',
     'HIDE_VERIFICATION_CHECKMARK.description' => 'Versteckt das Verifizierungsabzeichen, das auf Admin- und VIP-Seiten angezeigt wird.',
+    'ENABLE_REPORT_ICON.title' => 'Report-Icon aktivieren',
+    'ENABLE_REPORT_ICON.description' => 'Zeigt ein Symbol auf Benutzerseiten an, das es Benutzern ermöglicht, Seiten zu melden.',
     'LOCALE.title' => 'App Lokalisierung',
     'LOCALE.description' => 'Ändern Sie die Sprache Ihrer Anwendung.',
 
@@ -1090,7 +1092,7 @@
     'report_error' => 'Profil konnte nicht gemeldet werden',
     'report_success' => 'Profil wurde erfolgreich gemeldet',
 
-    
+
     #=============================================================================#
     # Laravel internal translations                                               #
     #=============================================================================#

resources/lang/en/messages.php

@@ -731,6 +731,8 @@
     'ADMIN_EMAIL.description' => 'Used to send notification emails.',
     'HIDE_VERIFICATION_CHECKMARK.title' => 'Hide verification checkmark',
     'HIDE_VERIFICATION_CHECKMARK.description' => 'Hides verification badge displayed on admin and VIP pages.',
+    'ENABLE_REPORT_ICON.title' => 'Enable report icon',
+    'ENABLE_REPORT_ICON.description' => 'Displays an icon on user pages that allows users to report pages.',
     'LOCALE.title' => 'App locale',
     'LOCALE.description' => 'Change the language of your application',
 

resources/views/components/config/config.blade.php

@@ -274,6 +274,9 @@ function text($key){
 {{toggle('HIDE_VERIFICATION_CHECKMARK')}}
 
 
+{{toggle('ENABLE_REPORT_ICON')}}
+
+
 <a name="Panel-settings"><h2 class="ch2">{{__('messages.Panel settings')}}</h2></a>
 
 {{toggle('NOTIFY_EVENTS')}}

resources/views/components/finishing.blade.php

@@ -60,6 +60,9 @@
             if(EnvEditor::keyExists('LOCALE')){ /* Do nothing if key already exists */ 
             } else {EnvEditor::addKey('LOCALE', 'en');}
 
+            if(EnvEditor::keyExists('ENABLE_REPORT_ICON')){ /* Do nothing if key already exists */ 
+            } else {EnvEditor::addKey('ENABLE_REPORT_ICON', false);}
+
             if(EnvEditor::keyExists('ADMIN_EMAIL')){} else 
             {if(Auth::user()->id == 1){EnvEditor::addKey('ADMIN_EMAIL', App\Models\User::find(1)->email);}
             else{EnvEditor::addKey('ADMIN_EMAIL', '');}}

resources/views/components/report-icon.blade.php

@@ -0,0 +1,89 @@
+@if($userinfo->role == 'user' and env('ENABLE_REPORT_ICON') == true)
+<style>
+    .report-pill-container {
+      position: fixed;
+      bottom: 60px;
+      left: 30px;
+      z-index: 5;
+    }
+
+    .report-icon {
+      font-size: 36px;
+      z-index: 5;
+      position: absolute;
+      top: 7px;
+      left: 7px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .report-expanding-pill {
+      background-color: #58595b;
+      position: absolute;
+      width: 0px;
+      height: 30px;
+      border-radius: 50px;
+      overflow: hidden;
+      padding-right: 30px;
+      /* box-shadow: 0px 0px 15px #777;   */
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    }
+
+    .report-text {
+      opacity: 0;
+      font-size: 14px;
+      transition: opacity 0.3s ease-out;
+      font-family: Arial, Helvetica, sans-serif;
+      color: white;
+      text-decoration: none;
+    }
+
+    .report-text:hover {
+      text-decoration: underline;
+      color: white;
+    }
+
+
+    .report-show {
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      width: 130px;
+    }
+
+    .report-show-text {
+      transition: opacity 3s ease-out;
+      opacity: 1;
+    }
+
+    .report-hide {
+      opacity: 0;
+      transition: opacity 0.3s ease-out;
+    }
+  </style>
+  <div class="report-pill-container">
+    <div class="report-icon-container">
+      <div class="report-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-info-circle" viewBox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+  <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
+</svg></div>
+    </div>
+    <div class="report-expanding-pill">
+      <a href="{{url('report?'.$userinfo->id)}}" target="_blank" class="report-text">Report abuse</a>
+    </div>
+  </div>
+
+  <script>
+    let icon = document.querySelector('.report-icon-container')
+    let expandingPill = document.querySelector('.report-expanding-pill')
+    let text = document.querySelector('.report-text')
+
+    icon.addEventListener('click', function() {
+      expandingPill.classList.toggle('report-show');
+      text.classList.toggle('report-show-text');
+      notification.classList.add('report-hide')
+    });
+  </script>
+@endif

resources/views/littlelink.blade.php

@@ -252,6 +252,8 @@ function themeAsset($path){
 
 <?php ////end share button//// ?>
 
+@include('components.report-icon')
+
   <div class="container">
     <div class="row">
       <div class="column" style="margin-top: 5%">