linuxserver/Heimdall
1
0
Fork 0
mirror of https://github.com/linuxserver/Heimdall.git synced 2026-02-21 12:10:34 +09:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

added order saving, dragging and pinning

Browse Source
This commit is contained in:
KodeStar
2018-02-03 00:22:42 +00:00
parent 7c859b629e
commit 25bbf6f99a
18 changed files with 283 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
resources/assets/js/app.js vendored
View File

@@ -1,4 +1,23 @@
$.when( $.ready ).then(function() {
$( "#sortable" ).sortable({
stop: function (event, ui) {
var idsInOrder = $("#sortable").sortable('toArray', {
attribute: 'data-id'
});
$.post(
'/order',
{ order:idsInOrder }
);
}
});
$("#sortable").sortable("disable");
$('.color-picker').each( function( i, elem ) {
var hueb = new Huebee( elem, {
// options
@@ -12,7 +31,9 @@ $.when( $.ready ).then(function() {
if(active) {
$('.add-item').hide();
$('#app').removeClass('sidebar');
$("#sortable").sortable("disable")
} else {
$("#sortable").sortable("enable")
setTimeout(
function()
{
@@ -27,4 +48,15 @@ $.when( $.ready ).then(function() {
app.toggleClass('sidebar');
});
$('#pinlist').on('click', 'a', function(e) {
e.preventDefault();
var current = $(this);
var id = current.data('id');
$.get('items/pintoggle/'+id+'/true', function(data) {
var inner = $(data).filter('#sortable').html();
$('#sortable').html(inner);
current.toggleClass('active');
});
});
});

7
resources/assets/js/jquery-ui.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

47
resources/assets/sass/_app.scss vendored
View File

@@ -66,7 +66,7 @@ body {
}
}
main {
main, #sortable {
padding: 10px;
display: flex;
justify-content: center;
@@ -75,6 +75,8 @@ body {
position: relative;
flex-wrap: wrap;
align-content: center;
list-style: none;
margin: 0;
.config {
position: absolute;
bottom: 0;
@@ -89,8 +91,8 @@ body {
}
}
.item-container {
width: 340px;
transition: all .35s ease-in-out;
//width: 340px;
//transition: width .35s ease-in-out;
}
.message-container {
width: 100%;
@@ -105,11 +107,12 @@ body {
top: 0;
}
.item-container {
width: 280px;
//width: 240px;
}
.item, .add-item {
transform: scale(0.8);
opacity: 0.7;
margin: 20px 0;
}
}
&.sidebar {
@@ -132,6 +135,9 @@ body {
position: relative;
display: none;
outline: 1px solid transparent;
&.active {
display: block;
}
a {
display: block;
width: 100%;
@@ -158,7 +164,7 @@ body {
transition: all .35s ease-in-out;
outline: 1px solid transparent;
display: flex;
align-items: flex-start;
align-items: center;
&:after {
content: "";
position: absolute;
@@ -194,7 +200,7 @@ body {
max-width: 1000px;
width: 100%;
margin: 0 40px;
header {
header, footer {
display: flex;
justify-content: space-between;
align-items: center;
@@ -210,6 +216,9 @@ body {
margin-left: 25px;
}
}
footer {
border-top: 1px solid #dbdce3;
}
.table {
width: 100%;
margin:0;
@@ -329,5 +338,29 @@ div.create {
}
.app-icon {
max-width: 50px;
max-width: 60px;
margin-right: 10px;
}
.sidenav {
h2 {
font-weight: 300;
padding: 20px;
}
ul {
list-style: none;
margin: 0;
padding: 20px;
li {
display: flex;
justify-content: space-between;
padding: 5px;
a {
color: #2b3542;
&.active {
color: #46b0e6;
}
}
}
}
}

3
resources/views/add.blade.php
View File

@@ -1,3 +1,4 @@
<section class="add-item">
<?php $addclass = (isset($ajax)) ? ' active' : ''; ?>
<section class="add-item{{ $addclass }}">
<a id="add-item" href="">Pin item to dash</a>
</section>

19
resources/views/app.blade.php
View File

@@ -12,12 +12,19 @@
</head>
<body>
<div id="app">
<nav>
<ul>
<li><a href=""><i class="fa fa-dash"></i></a></li>
<li><a href=""><i class="fa fa-dash"></i></a></li>
<li><a href=""><i class="fa fa-dash"></i></a></li>
<nav class="sidenav">
@if(isset($all_apps))
<h2>Pinned Items</h2>
<ul id="pinlist">
@foreach($all_apps as $app)
<?php
$active = ((bool)$app->pinned === true) ? 'active' : '';
?>
<li>{{ $app->title }}<a class="{{ $active }}" data-id="{{ $app->id }}" href="{{ route('items.pintoggle', $app->id) }}"><i class="fas fa-thumbtack"></i></a></li>
@endforeach
</ul>
@endif
</nav>
<div class="content">
<header class="appheader">
@@ -54,6 +61,8 @@
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="/js/jquery-3.3.1.min.js"><\/script>')</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>

4
resources/views/item.blade.php
View File

@@ -1,4 +1,4 @@
<section class="item-container">
<section class="item-container" data-id="{{ $app->id }}">
<div class="item" style="background-color: {{ $app->colour }}">
@if($app->icon)
<img class="app-icon" src="{{ asset('storage/'.$app->icon) }}" />
@@ -6,7 +6,7 @@
<i class="fas fa-app-store-ios"></i>
@endif
{{ $app->title }}
Item
<a class="link" href="{{ $app->url }}"><i class="fas fa-arrow-alt-to-right"></i></a>
</div>
</section>

9
resources/views/items/form.blade.php
View File

@@ -2,8 +2,8 @@
<header>
<div class="section-title">Add application</div>
<div class="module-actions">
<a href="{{ route('items.index') }}" class="button"><i class="fa fa-ban"></i><span>Cancel</span></a>
<button type="submit"class="button"><i class="fa fa-save"></i><span>Save</span></button>
<a href="{{ route('items.index') }}" class="button"><i class="fa fa-ban"></i><span>Cancel</span></a>
</div>
</header>
<div class="create">
@@ -49,5 +49,12 @@
</div>
<footer>
<div class="section-title">&nbsp;</div>
<div class="module-actions">
<button type="submit"class="button"><i class="fa fa-save"></i><span>Save</span></button>
<a href="{{ route('items.index') }}" class="button"><i class="fa fa-ban"></i><span>Cancel</span></a>
</div>
</footer>
</section>

6
resources/views/sortable.blade.php Normal file
View File

@@ -0,0 +1,6 @@
<div id="sortable">
@foreach($apps as $app)
@include('item')
@endforeach
@include('add')
</div>

5
resources/views/welcome.blade.php
View File

@@ -2,10 +2,7 @@
@section('content')
@if($apps->first())
@foreach($apps as $app)
@include('item')
@endforeach
@include('add')
@include('sortable')
@else
There are currently no Applications, <a href="{{ route('items.create') }}">add one here</a>
@include('add')