devol
/
LinkStack
mirror of https://github.com/LinkStackOrg/LinkStack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update button editor 

Added functionality for custom website button. Made button editor optional to use.
This commit is contained in:
Julian Prieber 2022-05-04 10:12:01 +02:00
parent 845327a628
commit cb75a24e92
5 changed files with 61 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
.env
View File

@ -2,7 +2,7 @@
#=REGISTER_AUTH either auth or verified. If auth is selected, no verification is required. Default is verified. #=REGISTER_AUTH either auth or verified. If auth is selected, no verification is required. Default is verified.
REGISTER_AUTH=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 notifies admins if an important event is happening, such as polls about the future of this project or security vulnerabilities.
NOTIFY_EVENTS=true 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 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.
@ -10,7 +10,7 @@ NOTIFY_UPDATES=major
DISPLAY_FOOTER=true DISPLAY_FOOTER=true
DISPLAY_CREDIT=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 '@'. #=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 '@') #=(e.g. 'admin' without the '@')
HOME_URL= HOME_URL=
@ -22,10 +22,14 @@ 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. #=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= 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 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_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 APP_ENV=local
LOG_CHANNEL=stack LOG_CHANNEL=stack
LOG_LEVEL=debug LOG_LEVEL=debug
@ -33,7 +37,7 @@ LOG_LEVEL=debug
#Database Settings=Should be left alone. If you wish to use mysql you'd have to seed the database again. #Database Settings=Should be left alone. If you wish to use mysql you'd have to seed the database again.
DB_CONNECTION=sqlite 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 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_MAILER=built-in
MAIL_HOST= MAIL_HOST=
@ -44,7 +48,7 @@ MAIL_ENCRYPTION=
MAIL_FROM_ADDRESS= MAIL_FROM_ADDRESS=
MAIL_FROM_NAME="${APP_NAME}" MAIL_FROM_NAME="${APP_NAME}"
#Cache Settings=Completely optional #Cache Settings=Completely optional.
MEMCACHED_HOST=127.0.0.1 MEMCACHED_HOST=127.0.0.1
REDIS_HOST=127.0.0.1 REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null REDIS_PASSWORD=null

26
resources/views/studio/button-editor.blade.php
View File

@ -1,3 +1,4 @@
@if(env('ENABLE_BUTTON_EDITOR') === true)
@extends('layouts.sidebar') @extends('layouts.sidebar')
@section('content') @section('content')
@ -208,7 +209,11 @@ var button_css = {
</aside> </aside>
<section id="preview"> <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> </section>
</div> </div>
@ -245,14 +250,19 @@ background-image: linear-gradient(-135deg,#0f0c29,#302b63,#24243e)
<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);"> <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%);"> <div style="position: relative; top: 50%; transform: translateY(-50%);">
<h2 align="center" style="color:white">Result:</h2> <h2 align="center" style="color:white">Result:</h2>
@if($custom_css === "") @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" href=""><img class="icon hvr-icon fa {{$custom_icon}}">Example</div></div></center> <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 != "") @elseif($custom_css === "" and $buttonId == 2)
<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> <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 @endif
</div> </div>
</div> </div>
<br><br> <br><br>
@if($buttonId == 1)
<form action="{{ route('editCSS', $id) }}" method="post"> <form action="{{ route('editCSS', $id) }}" method="post">
@csrf @csrf
<div class="form-group col-lg-8"> <div class="form-group col-lg-8">
@ -315,14 +325,14 @@ background-image: linear-gradient(-135deg,#0f0c29,#302b63,#24243e)
</details> </details>
<div class="row"> <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> <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> </div>
</form><br><br><br><br> </form><br><br><br><br>
@endif
</div> </div>
@endsection @endsection
@endif

4
resources/views/studio/links.blade.php
View File

@ -13,7 +13,7 @@
<th scope="col">Order ⏶</th> <th scope="col">Order ⏶</th>
<th scope="col">Pin Link ⏶</th> <th scope="col">Pin Link ⏶</th>
<th scope="col">Edit</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> <th scope="col">Delete</th>
</tr> </tr>
</thead> </thead>
@ -26,11 +26,13 @@
<td class="text-right">{{ $link->order }}</td> <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('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> <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) @if($link->button_id == 1 or $link->button_id == 2)
<td><a href="{{ route('editCSS', $link->id ) }}" class="text-success">Customize Button</a></td> <td><a href="{{ route('editCSS', $link->id ) }}" class="text-success">Customize Button</a></td>
@else @else
<td><a> - </a></td> <td><a> - </a></td>
@endif @endif
@endif
<td><a href="{{ route('deleteLink', $link->id ) }}" class="text-danger">Delete</a></td> <td><a href="{{ route('deleteLink', $link->id ) }}" class="text-danger">Delete</a></td>
</tr> </tr>
@endforeach @endforeach

6
storage/backups/default_settings
View File

@ -10,7 +10,7 @@ NOTIFY_UPDATES=major
DISPLAY_FOOTER=true DISPLAY_FOOTER=true
DISPLAY_CREDIT=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 '@'. #=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 '@') #=(e.g. 'admin' without the '@')
HOME_URL= 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. #=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= 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 #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 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_DEBUG=true

24
studio/button-editor/css/style.css vendored
View File

@ -516,6 +516,12 @@ button-demo {
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
.wicon {
padding: 0px 6px 0px 0px;
vertical-align: middle;
width: 26px;
height: 20px;
}
.button.button-custom { .button.button-custom {
color: #FFFFFF; color: #FFFFFF;
background-color: #FFFFFF; background-color: #FFFFFF;
@ -524,6 +530,24 @@ button-demo {
.button.button-custom:focus { .button.button-custom:focus {
filter: brightness(90%) } 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 { details {
width: 64.7%; width: 64.7%;
background: #282828; background: #282828;