aboutsummaryrefslogtreecommitdiffstats
path: root/view/tpl
diff options
context:
space:
mode:
authorMario <mario@mariovavti.com>2021-08-03 07:12:35 +0000
committerMario <mario@mariovavti.com>2021-08-03 07:12:35 +0000
commitcddc0217724f1a7661014d50e4c940e623a0c2dc (patch)
treef24595d659adbb7d1e5d2e8e6dcd829b093887bb /view/tpl
parent571bae9d1c07bb08270163a314c91c138b42e62f (diff)
downloadvolse-hubzilla-cddc0217724f1a7661014d50e4c940e623a0c2dc.tar.gz
volse-hubzilla-cddc0217724f1a7661014d50e4c940e623a0c2dc.tar.bz2
volse-hubzilla-cddc0217724f1a7661014d50e4c940e623a0c2dc.zip
Apps drag and drop feature
Diffstat (limited to 'view/tpl')
-rw-r--r--view/tpl/app.tpl2
-rw-r--r--view/tpl/item_categories.tpl2
-rw-r--r--view/tpl/item_filer.tpl2
-rw-r--r--view/tpl/navbar_default.tpl173
4 files changed, 174 insertions, 5 deletions
diff --git a/view/tpl/app.tpl b/view/tpl/app.tpl
index 774b75b31..597e38637 100644
--- a/view/tpl/app.tpl
+++ b/view/tpl/app.tpl
@@ -1,7 +1,7 @@
{{if ! ($navapps || $order)}}
<div class="app-container">
<div class="app-detail{{if $deleted}} app-deleted{{/if}}">
- <a href="{{$app.url}}"{{if $app.target}} target="{{$app.target}}"{{/if}}{{if $app.desc}} title="{{$app.desc}}{{if $app.price}} ({{$app.price}}){{/if}}"{{else}}title="{{$app.name}}"{{/if}}>{{if $icon}}<i class="app-icon fa fa-fw fa-{{$icon}}"></i>{{else}}<img src="{{$app.photo}}" width="80" height="80" />{{/if}}
+ <a class="app-link" href="{{$app.url}}"{{if $app.target}} target="{{$app.target}}"{{/if}}{{if $app.desc}} title="{{$app.desc}}{{if $app.price}} ({{$app.price}}){{/if}}"{{else}}title="{{$app.name}}"{{/if}}{{if $installed}} data-papp="{{$app.papp}}" data-icon="{{$icon}}" data-url="{{$app.url}}"{{/if}}>{{if $icon}}<i class="app-icon fa fa-fw fa-{{$icon}}"></i>{{else}}<img src="{{$app.photo}}" width="80" height="80" />{{/if}}
<div class="app-name" style="text-align:center;">{{$app.name}}</div>
</a>
</div>
diff --git a/view/tpl/item_categories.tpl b/view/tpl/item_categories.tpl
index fa07fa39f..68f8944bc 100644
--- a/view/tpl/item_categories.tpl
+++ b/view/tpl/item_categories.tpl
@@ -1,7 +1,7 @@
{{if $categories}}
<!--div class="categorytags"-->
{{foreach $categories as $cat}}
-<span class="item-category badge badge-pill badge-warning"><i class="fa fa-asterisk"></i>&nbsp;{{if $cat.url}}<a class="text-dark" href="{{$cat.url}}">{{$cat.term}}</a>{{else}}{{$cat.term}}{{/if}}</span>
+<span class="item-category badge rounded-pill bg-warning text-dark"><i class="fa fa-asterisk"></i>&nbsp;{{if $cat.url}}<a class="text-dark" href="{{$cat.url}}">{{$cat.term}}</a>{{else}}{{$cat.term}}{{/if}}</span>
{{/foreach}}
<!--/div-->
{{/if}}
diff --git a/view/tpl/item_filer.tpl b/view/tpl/item_filer.tpl
index f814b374c..3ecf9aa41 100644
--- a/view/tpl/item_filer.tpl
+++ b/view/tpl/item_filer.tpl
@@ -1,7 +1,7 @@
{{if $categories}}
<!--div class="filesavetags"-->
{{foreach $categories as $cat}}
-<span class="item-category badge badge-pill badge-danger"><i class="fa fa-folder-o"></i>&nbsp;{{$cat.term}}&nbsp;<a href="{{$cat.removelink}}" class="text-white" title="{{$remove}}" onClick="itemFilerRm({{$cat.id}}, '{{$cat.term}}'); return false;"><i class="fa fa-close"></i></a></span>
+<span class="item-category badge rounded-pill bg-danger"><i class="fa fa-folder-o"></i>&nbsp;{{$cat.term}}&nbsp;<a href="{{$cat.removelink}}" class="text-white" title="{{$remove}}" onClick="itemFilerRm({{$cat.id}}, '{{$cat.term}}'); return false;"><i class="fa fa-close"></i></a></span>
{{/foreach}}
<!--/div-->
{{/if}}
diff --git a/view/tpl/navbar_default.tpl b/view/tpl/navbar_default.tpl
index 6c3cf3ff5..5e46c2263 100644
--- a/view/tpl/navbar_default.tpl
+++ b/view/tpl/navbar_default.tpl
@@ -168,7 +168,7 @@
{{/if**}}
{{if $navbar_apps}}
{{foreach $navbar_apps as $navbar_app}}
- <li>
+ <li class="nav-app-sortable">
{{$navbar_app}}
</li>
{{/foreach}}
@@ -262,13 +262,182 @@
{{$sysapps}}
</div>
{{/if}}
+ <div id="nav-app-bin-container" class="d-lg-none">
+ {{foreach $navbar_apps as $navbar_app}}
+ {{$navbar_app|replace:'navbar-app nav-link':'dropdown-item nav-app-sortable'|replace:'fa':'generic-icons-nav fa'}}
+ {{/foreach}}
+ <div class="dropdown-divider"></div>
+ </div>
+ {{if $is_owner}}
+ <div id="app-bin-container" data-token="{{$form_security_token}}">
+ {{/if}}
{{foreach $nav_apps as $nav_app}}
{{$nav_app}}
{{/foreach}}
{{if $is_owner}}
+ </div>
+ {{/if}}
+ {{if $is_owner}}
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/apps"><i class="generic-icons-nav fa fa-fw fa-plus-circle"></i>{{$addapps}}</a>
- <a class="dropdown-item" href="/apporder"><i class="generic-icons-nav fa fa-fw fa-sort"></i>{{$orderapps}}</a>
{{/if}}
</div>
</div>
+{{if $is_owner}}
+<script>
+ var app_bin = document.getElementById('app-bin-container');
+ new Sortable(app_bin, {
+ animation: 150,
+ delay: 200,
+ delayOnTouchOnly: true,
+ onEnd: function (e) {
+ let app_str = '';
+ $('#app-bin-container a').each(function () {
+ if(app_str.length) {
+ app_str = app_str.concat(',', $(this).text());
+ }
+ else {
+ app_str = app_str.concat($(this).text());
+ }
+ });
+ $.post(
+ 'pconfig',
+ {
+ 'aj' : 1,
+ 'cat' : 'system',
+ 'k' : 'app_order',
+ 'v' : app_str,
+ 'form_security_token' : $('#app-bin-container').data('token')
+ }
+ );
+
+ }
+ });
+
+ var nav_app_bin = document.getElementById('nav-right');
+ new Sortable(nav_app_bin, {
+ animation: 150,
+ delay: 200,
+ delayOnTouchOnly: true,
+ draggable: '.nav-app-sortable',
+ onEnd: function (e) {
+ let nav_app_str = '';
+ $('#nav-right .nav-app-sortable').each(function () {
+ if(nav_app_str.length) {
+ nav_app_str = nav_app_str.concat(',', $(this).text());
+ }
+ else {
+ nav_app_str = nav_app_str.concat($(this).text());
+ }
+ });
+ $.post(
+ 'pconfig',
+ {
+ 'aj' : 1,
+ 'cat' : 'system',
+ 'k' : 'app_pin_order',
+ 'v' : nav_app_str,
+ 'form_security_token' : $('#app-bin-container').data('token')
+ }
+ );
+
+ }
+ });
+
+ var nav_app_bin_container = document.getElementById('nav-app-bin-container');
+ new Sortable(nav_app_bin_container, {
+ animation: 150,
+ delay: 200,
+ delayOnTouchOnly: true,
+ onEnd: function (e) {
+ let nav_app_str = '';
+ $('#nav-app-bin-container a').each(function () {
+ if(nav_app_str.length) {
+ nav_app_str = nav_app_str.concat(',', $(this).text());
+ }
+ else {
+ nav_app_str = nav_app_str.concat($(this).text());
+ }
+ });
+ $.post(
+ 'pconfig',
+ {
+ 'aj' : 1,
+ 'cat' : 'system',
+ 'k' : 'app_pin_order',
+ 'v' : nav_app_str,
+ 'form_security_token' : $('#app-bin-container').data('token')
+ }
+ );
+
+ }
+ });
+
+ $('#nav-right').on('dragover', function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ $(this).css('box-shadow', '0px 0px 3px red inset');
+ });
+ $('#nav-right').on('dragleave', function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ $(this).css('box-shadow', '');
+
+ });
+ $('#nav-right').on('drop', function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ $(this).css('box-shadow', '');
+
+ if (papp === null)
+ return;
+
+ $.post(
+ 'appman',
+ {
+ 'aj' : 1,
+ 'feature' : 'nav_pinned_app',
+ 'papp' : papp
+ }
+ );
+
+ $('<li><a class="navbar-app nav-link" href="' + app_url + '"><i class="fa fa-fw fa-' + app_icon + '"></i></li>').insertBefore('#app-menu');
+ });
+
+ $('#app-menu').on('dragover', function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ $(this).css('box-shadow', '0px 0px 1px red inset');
+ });
+ $('#app-menu').on('dragleave', function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ $(this).css('box-shadow', '');
+
+ });
+ $('#app-menu').on('drop', function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ $(this).css('box-shadow', '');
+
+ if (papp === null)
+ return;
+
+ $.post(
+ 'appman',
+ {
+ 'aj' : 1,
+ 'feature' : 'nav_featured_app',
+ 'papp' : papp
+ }
+ );
+ });
+
+ var papp, app_icon, app_url;
+ $(document).on('dragstart', function (e) {
+ papp = e.target.dataset.papp || null;
+ app_icon = e.target.dataset.icon || null;
+ app_url = e.target.dataset.url || null;
+ });
+</script>
+{{/if}}