Update button editor

Added functionality for custom website button. Made button editor optional to use.

Author: JulianPrieber

.env

@@ -2,15 +2,15 @@
 #=REGISTER_AUTH either auth or verified. If auth is selected, no verification is required. Default is verified.
 REGISTER_AUTH=verified
 
-#Internal notifications=Changes if certain messages should be displayed or not
+#Internal notifications=Changes if certain messages should be displayed or not.
 #=NOTIFY_EVENTS notifies admins if an important event is happening, such as polls about the future of this project or security vulnerabilities.
 NOTIFY_EVENTS=true
 #=NOTIFY_UPDATES either all, major or false. All notifies about all updates, major only notifies about major or important updates, false does not notify about any updates.
 NOTIFY_UPDATES=major
 DISPLAY_FOOTER=true
 DISPLAY_CREDIT=true
 
-#Home URL=Changes if a user profile should be displayed as the homepage
+#Home URL=Changes if a user profile should be displayed as the homepage.
 #=Leave empty to use the default homepage. To set your profile as the homepage, enter a LittleLink name. You can find this on the user panel under the page setting, the name is what comes after the '@'.
 #=(e.g. 'admin' without the '@')
 HOME_URL=
@@ -22,18 +22,22 @@ APP_KEY=
 #=The APP_URL should be left empty under most circumstances. This setting is not required for LittleLink Custom, and you should only change this if required for your setup.
 APP_URL=
 
-#Debug Settings=Changes if your page should display a full error description instead of a generic error 500
+#ENABLE_BUTTON_EDITOR=Determines if the custom button editor should be enabled or not, default is true.
+#=ENABLE_BUTTON_EDITOR either true or false.
+ENABLE_BUTTON_EDITOR=true
+
+#Debug Settings=Changes if your page should display a full error description instead of a generic error 500.
 #=App_debug either true or false. You might want to change this to false after you're done installing, but it's very useful for troubleshooting.
 APP_DEBUG=true
-#=App_env either local or production. Change this to production if you set the value above to false
+#=App_env either local or production. Change this to production if you set the value above to false.
 APP_ENV=local
 LOG_CHANNEL=stack
 LOG_LEVEL=debug
 
 #Database Settings=Should be left alone. If you wish to use mysql you'd have to seed the database again.
 DB_CONNECTION=sqlite
 
-#Mail Settings=LittleLink Custom comes with a free to use built-in SMTP server for sending mail. You can leave this setting as is, if you wish to use this service please read our terms and conditions at llc-mail.tru.io. If you do not wish to use the built-in SMTP server, change the setting below
+#Mail Settings=LittleLink Custom comes with a free to use built-in SMTP server for sending mail. You can leave this setting as is, if you wish to use this service please read our terms and conditions at llc-mail.tru.io. If you do not wish to use the built-in SMTP server, change the setting below.
 #=MAIL_MAILER either smtp or built-in. Make sure to change this setting if you want to add a custom SMTP server.
 MAIL_MAILER=built-in
 MAIL_HOST=
@@ -44,7 +48,7 @@ MAIL_ENCRYPTION=
 MAIL_FROM_ADDRESS=
 MAIL_FROM_NAME="${APP_NAME}"
 
-#Cache Settings=Completely optional
+#Cache Settings=Completely optional.
 MEMCACHED_HOST=127.0.0.1
 REDIS_HOST=127.0.0.1
 REDIS_PASSWORD=null

resources/views/studio/button-editor.blade.php

@@ -1,3 +1,4 @@
+@if(env('ENABLE_BUTTON_EDITOR') === true)
 @extends('layouts.sidebar')
 
 @section('content')
@@ -208,7 +209,11 @@
 </aside>
 
 <section id="preview">
-<center><div id="sample" style="--delay: 1s; border-radius:8px !important; max-width: 400px; width: 80%; class="button-entrance"><div class="button-demo button hvr-grow hvr-icon-wobble-vertical"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/') . 'custom' }}.svg">Example</div></div></center>
+@if($buttonId == 1)
+<center><div id="sample" style="--delay: 1s; border-radius:8px !important; max-width: 400px; width: 80%; class="button-entrance"><div class="button-demo button hvr-grow hvr-icon-wobble-vertical"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/') . 'custom' }}.svg">{{ $title }}</div></div></center>
+@else
+<center><div id="sample" style="--delay: 1s; border-radius:8px !important; max-width: 400px; width: 80%; class="button-entrance"><div class="button-demo button hvr-grow hvr-icon-wobble-vertical"><img class="wicon hvr-icon" src="http://www.google.com/s2/favicons?domain={{$link}}">{{ $title }}</div></div></center>
+@endif
 
 </section>
 </div>
@@ -245,14 +250,19 @@
 <br><br><div id="result" style="left: 1%; position: relative; background-color:#2c2d3a; border-radius: 25px; min-width:300px; max-width:950px; height:300px; box-shadow: 0 10px 20px -10px rgba(0,0,0, 0.6);">
   <div style="position: relative; top: 50%; transform: translateY(-50%);">
     <h2 align="center" style="color:white">Result:</h2>
-      @if($custom_css === "")
-        <center><div style="--delay: 1s" class="button-entrance"><div class="button-demo button-custom button hvr-grow hvr-icon-wobble-vertical" href=""><img class="icon hvr-icon fa {{$custom_icon}}">Example</div></div></center>
-      @elseif($custom_css != "")
-        <center><div style="--delay: 1s" class="button-entrance"><div style="{{ $custom_css }}" class="button-demo hvr-grow hvr-icon-wobble-vertical" href=""><i style="color: {{$custom_icon}}" class="icon hvr-icon fa {{$custom_icon}}"></i>Example</div></div></center>
+      @if($custom_css === "" and $buttonId == 1)
+        <center><div style="--delay: 1s" class="button-entrance"><div class="button-demo button-custom button hvr-grow hvr-icon-wobble-vertical"><img class="icon hvr-icon fa {{$custom_icon}}">{{ $title }}</div></div></center>
+        @elseif($custom_css === "" and $buttonId == 2)
+        <center><div style="--delay: 1s" class="button-entrance"><div class="button-custom_website button hvr-grow hvr-icon-wobble-vertical"><img class="wicon hvr-icon" src="http://www.google.com/s2/favicons?domain={{$link}}">{{ $title }}</div></div></center>
+        @elseif($custom_css != "" and $buttonId == 2)
+        <center><div style="--delay: 1s" class="button-entrance"><div style="{{ $custom_css }}" class="button-custom_website button hvr-grow hvr-icon-wobble-vertical"><img class="wicon hvr-icon" src="http://www.google.com/s2/favicons?domain={{$link}}">{{ $title }}</div></div></center>
+        @else
+        <center><div style="--delay: 1s" class="button-entrance"><div style="{{ $custom_css }}" class="button-demo hvr-grow hvr-icon-wobble-vertical"><i style="color: {{$custom_icon}}" class="icon hvr-icon fa {{$custom_icon}}"></i>{{ $title }}</div></div></center>
       @endif
       </div>
 </div>
         <br><br>
+        @if($buttonId == 1)
         <form action="{{ route('editCSS', $id) }}" method="post">
         @csrf
         <div class="form-group col-lg-8">
@@ -315,14 +325,14 @@
         </details>
 
         <div class="row">
-        <button type="submit" class="mt-3 ml-3 btn btn-info">Submit</button>
+        <button type="submit" class="mt-3 ml-3 btn btn-info">Update icon</button>
         <button class="mt-3 ml-3 btn btn-info"><a href="https://fontawesome.com/search?m=free" target="_blank">See all icons</a></button>
         </div>
       </form><br><br><br><br>
+      @endif
 
 </div>
 
 
 @endsection
-
-
+@endif

resources/views/studio/links.blade.php

@@ -13,7 +13,7 @@
             <th scope="col">Order ⏶</th>
             <th scope="col">Pin Link ⏶</th>
             <th scope="col">Edit</th>
-            <th scope="col">Button Editor<span style="color:tomato">&nbsp; beta</span></th>
+            @if(env('ENABLE_BUTTON_EDITOR') === true)<th scope="col">Button Editor<span style="color:tomato">&nbsp; beta</span></th>@endif
             <th scope="col">Delete</th>
           </tr>
         </thead>
@@ -26,11 +26,13 @@
             <td class="text-right">{{ $link->order }}</td>
             <td><a href="{{ route('upLink', ['up' => $link->up_link, 'id' => $link->id]) }}" class="text-primary">{{ $link->up_link }}</a></td>
             <td><a href="{{ route('editLink', $link->id ) }}">Edit</a></td>
+            @if(env('ENABLE_BUTTON_EDITOR') === true)
             @if($link->button_id == 1 or $link->button_id == 2)
             <td><a href="{{ route('editCSS', $link->id ) }}" class="text-success">Customize Button</a></td>
             @else
             <td><a> - </a></td>
             @endif
+            @endif
             <td><a href="{{ route('deleteLink', $link->id ) }}" class="text-danger">Delete</a></td>
           </tr>
           @endforeach

storage/backups/default_settings

@@ -10,7 +10,7 @@ NOTIFY_UPDATES=major
 DISPLAY_FOOTER=true
 DISPLAY_CREDIT=true
 
-#Home URL=Changes if a user profile should be displayed as the homepage
+#Home URL=Changes if a user profile should be displayed as the homepage.
 #=Leave empty to use the default homepage. To set your profile as the homepage, enter a LittleLink name. You can find this on the user panel under the page setting, the name is what comes after the '@'.
 #=(e.g. 'admin' without the '@')
 HOME_URL=
@@ -22,6 +22,10 @@ APP_KEY=base64:YOU+MUST+CHANGE+THIS+YUFukELiN6Bk9gQ19+9zwk=
 #=The APP_URL should be left empty under most circumstances. This setting is not required for LittleLink Custom, and you should only change this if required for your setup.
 APP_URL=
 
+#ENABLE_BUTTON-EDITOR=Determines if the custom button editor should be enabled or not, default is true.
+#=ENABLE_BUTTON-EDITOR either true or false.
+ENABLE_BUTTON-EDITOR=true
+
 #Debug Settings=Changes if your page should display a full error description instead of a generic error 500
 #=App_debug either true or false. You might want to change this to false after you're done installing, but it's very useful for troubleshooting.
 APP_DEBUG=true

studio/button-editor/css/style.css

@@ -516,6 +516,12 @@ button-demo {
   width: 20px;
   height: 20px;
 }
+.wicon {
+	padding: 0px 6px 0px 0px;
+	vertical-align: middle;
+	width: 26px;
+	height: 20px;
+  }
 .button.button-custom {
   color: #FFFFFF;
   background-color: #FFFFFF;
@@ -524,6 +530,24 @@ button-demo {
 .button.button-custom:focus {
   filter: brightness(90%) }
 
+  .button.button-custom_website {
+	color: #ffffff;
+	background-color: #000000;
+	display: inline-block;
+	text-decoration: none;
+	height: 48px;
+	text-align: center;
+	vertical-align: middle;
+	font-size: 18px;
+	width: 300px;
+	font-weight: 700;
+	line-height: 48px;
+	letter-spacing: 0.1px;
+	white-space: wrap;
+	border-radius: 8px;
+	cursor: pointer;
+  }
+
   details {
   width: 64.7%;
   background: #282828;
@@ -579,4 +603,4 @@ details > ul {
   width: 80%; 
   top: 10%; 
   left: 10%; 
-}
+}