Switch to using icons when rendering a DN, and move the server icons to the topmenu

This commit is contained in:
Deon George 2025-03-04 23:03:42 +11:00
parent 57b6b8c1f1
commit 070aabfc88
11 changed files with 199 additions and 163 deletions

45
public/css/custom.css vendored
View File

@ -27,4 +27,49 @@ div#objectClass .input-group-end:not(input.form-control) {
input.form-control.input-group-end {
border-bottom-right-radius: 4px !important;
border-top-right-radius: 4px !important;
}
.custom-tooltip-warning {
--bs-tooltip-bg: var(--bs-warning);
--bs-tooltip-color: black;
}
.custom-tooltip-danger {
--bs-tooltip-bg: var(--bs-danger);
}
.tooltip {
font-size: 85%;
}
/*
.custom-tooltip-warning .tooltip-inner {
--bs-tooltip-bg: #ffffff;
--bs-tooltip-color: var(--bs-warning);
--bs-font-size: 85%;
border: 2px solid var(--bs-warning);
border-radius: 6px;
}
.custom-tooltip-warning .tooltip-arrow::before {
--bs-tooltip-bg: var(--bs-warning);
}
.custom-tooltip-danger .tooltip-inner {
--bs-tooltip-bg: #ffffff;
--bs-tooltip-color: var(--bs-danger);
--bs-font-size: 85%;
border: 2px solid var(--bs-danger);
border-radius: 6px;
}
.custom-tooltip-danger .tooltip-arrow::before {
--bs-tooltip-bg: var(--bs-danger);
}
*/
/* hide the site icons when the search is opened */
.search-wrapper.active + .header-menu.nav {
display: none;
}

View File

@ -155,12 +155,6 @@ ul.fancytree-container ul {
}
/** Server icons **/
.closed-sidebar .server-icon {
display: none;
}
.closed-sidebar .app-sidebar:hover .server-icon, .sidebar-mobile-open .server-icon {
display: flex;
}
.font-icon-wrapper {
text-align: center;
border: #e9ecef solid 1px;

View File

@ -6,24 +6,6 @@
<li class="nav-item">
<strong>{{ config('app.version') }}</strong>
</li>
@if(($x=Config::get('update_available')) && $x->action !== 'current')
<li class="nav-item ms-2">
@switch($x->action)
@case('unable')
<abbr title="Upstream Version Unavailable"><i class="fas fa-exclamation text-alternate"></i></abbr>
@break
@case('upgrade')
<abbr title="Update Available: {{ $x->version }}"><i class="fas fa-wrench text-danger"></i></abbr>
@break
@case('mismatch')
<abbr title="Version Issue - Upstream {{ $x->version }}"><i class="fas fa-exclamation text-danger"></i></abbr>
@break
@case('unknown')
<abbr title="Version Issue - Upstream {{ $x->version }}"><i class="fas fa-bolt text-alternate"></i></abbr>
@break
@endswitch
</li>
@endif
{{--
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link">Footer Link</a>

View File

@ -13,53 +13,53 @@
</div>
</div>
@if (isset($page_actions) || old())
<div class="page-title-actions">
<div class="page-title-actions">
<div class="d-inline-block dropdown">
<button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-primary">
<span class="btn-icon-wrapper pe-2 opacity-7">
<i class="fa fa-business-time fa-w-20"></i>
</span>
@lang('Entry Options')
</button>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
<ul class="nav flex-column">
@if ((isset($page_actions) && $page_actions->contains('edit')) || old())
<li class="nav-item">
<span class="nav-link pt-0 pb-1">
<button id="entry-edit" class="p-2 m-0 border-0 btn btn-transition btn-outline-dark w-100 text-start">
<i class="fas fa-fw fa-edit me-2"></i> @lang('Edit')
</button>
</span>
</li>
@endif
@if (isset($page_actions) && $page_actions->contains('export'))
<li class="nav-item">
<a class="nav-link pt-0 pb-1">
<button type="button" class="p-2 m-0 border-0 btn btn-transition btn-outline-dark w-100 text-start" data-bs-toggle="modal" data-bs-target="#entry_export-modal">
<i class="fas fa-fw fa-file-export me-2"></i> @lang('Export')
</button>
</a>
</li>
@endif
@if (isset($page_actions) && $page_actions->contains('copy'))
<li class="nav-item">
<a class="nav-link pt-0 pb-1">
<button class="p-2 m-0 border-0 btn btn-transition btn-outline-dark w-100 text-start">
<i class="fas fa-fw fa-truck-moving me-2"></i> @lang('Copy or Move')
</button>
</a>
</li>
@endif
</ul>
</div>
<div class="page-title-actions">
<div class="row">
<div class="col">
<div class="action-buttons float-end">
<ul class="nav">
@if(isset($page_actions) && $page_actions->contains('export'))
<li>
<span data-bs-toggle="modal" data-bs-target="#entry_export-modal">
<button class="btn btn-outline-dark p-1 m-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="@lang('Export')"><i class="fas fa-fw fa-download fs-5"></i></button>
</span>
</li>
@endif
@if(isset($page_actions) && $page_actions->contains('copy'))
<li>
<button class="btn btn-outline-dark p-1 m-1" id="entry-copy-move" data-bs-toggle="tooltip" data-bs-placement="bottom" title="@lang('Copy/Move')"><i class="fas fa-fw fa-copy fs-5"></i></button>
</li>
@endif
@if((isset($page_actions) && $page_actions->contains('edit')) || old())
<li>
<button class="btn btn-outline-dark p-1 m-1" id="entry-edit" data-bs-toggle="tooltip" data-bs-placement="bottom" title="@lang('Edit Entry')"><i class="fas fa-fw fa-edit fs-5"></i></button>
</li>
@endif
@if(isset($page_actions) && $page_actions->contains('delete'))
<li>
<button class="btn btn-outline-danger p-1 m-1" id="entry-delete" data-bs-custom-class="custom-tooltip-danger" data-bs-toggle="tooltip" data-bs-placement="bottom" title="@lang('Delete Entry')"><i class="fas fa-fw fa-trash-can fs-5"></i></button>
</li>
@endif
</ul>
</div>
</div>
</div>
@endif
</div>
</div>
</div>
</div>
@section('page-scripts')
<script type="text/javascript">
$(document).ready(function() {
console.log($('button[id=entry-edit]'));
$('button[id=entry-edit]').on('click',function(item) {
item.preventDefault();
if ($(this).hasClass('btn-dark'))
return;
editmode();
});
});
</script>
@append

View File

@ -33,23 +33,6 @@
<div class="app-sidebar__inner">
<ul class="vertical-nav-menu">
<li class="app-sidebar__heading">{{ config('server')->name }}</li>
<li>
<div class="font-icon-wrapper float-start me-1 server-icon">
<a class="p-0 m-0" href="{{ url('info') }}" onclick="return false;" style="display: contents;"><i class="fas fa-fw fa-info"></i></a>
</div>
<div class="font-icon-wrapper float-start ms-1 me-1 server-icon">
<a class="p-0 m-0" href="{{ url('schema') }}" onclick="return false;" style="display: contents;"><i class="fas fa-fw fa-fingerprint"></i></a>
</div>
<div class="font-icon-wrapper float-start ms-1 me-1 server-icon">
<a class="p-0 m-0" href="{{ url('import') }}" onclick="return false;" style="display: contents;"><i class="fas fa-fw fa-upload"></i></a>
</div>
@env(['local'])
<div class="font-icon-wrapper float-end ms-1 server-icon">
<a class="p-0 m-0" href="{{ url('debug') }}" onclick="return false;" style="display: contents;"><i class="fas fa-fw fa-toolbox"></i></a>
</div>
@endenv
<div class="clearfix"></div>
</li>
<li>
<i id="treeicon" class="metismenu-icon fa-fw fas fa-sitemap"></i>
<span class="f16" id="tree"></span>
@ -57,39 +40,4 @@
</ul>
</div>
</div>
</div>
@section('page-scripts')
<script type="text/javascript">
$(document).ready(function() {
$('.server-icon > a').on('click',function(item) {
var content;
$.ajax({
url: $(this).attr('href'),
method: 'GET',
dataType: 'html',
statusCode: {
404: function() {
$('.main-content').empty().append(content);
}
},
beforeSend: function() {
content = $('.main-content').contents();
$('.main-content').empty().append('<div class="fa-3x"><i class="fas fa-spinner fa-pulse"></i></div>');
}
}).done(function(html) {
$('.main-content').empty().append(html);
}).fail(function() {
alert('Well that didnt work?');
});
item.stopPropagation();
return false;
});
});
</script>
@append
</div>

View File

@ -39,21 +39,67 @@
<button class="btn-close"></button>
</div>
<ul class="header-menu nav">
{{--
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link">
<i class="nav-link-icon fas fa-database"></i> Link
</a>
<ul class="header-menu nav server-icon">
<li>
<button id="link-info" class="btn btn-light p-1 m-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="@lang('Server Info')" data-link="{{ url('info') }}">
<i class="fas fa-fw fa-info fs-5"></i>
</button>
</li>
<li>
<button id="link-schema" class="btn btn-light p-1 m-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="@lang('Schema Viewer')" data-link="{{ url('schema') }}">
<i class="fas fa-fw fa-fingerprint fs-5"></i>
</button>
</li>
<li>
<button id="link-import" class="btn btn-light p-1 m-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="@lang('Import')" data-link="{{ url('import') }}">
<i class="fas fa-fw fa-upload fs-5"></i>
</button>
</li>
<li>
<button id="link-debug" class="btn btn-light p-1 m-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="@lang('Debug')" data-link="{{ url('debug') }}">
<i class="fas fa-fw fa-toolbox fs-5"></i>
</button>
</li>
--}}
</ul>
</div>
<div class="app-header-right">
@if(! request()->isSecure())
<span class="badge bg-danger">WARNING - SESSION NOT SECURE</span>
@endif
<ul class="header-menu nav">
@if(! request()->isSecure())
<li>
<button class="btn btn-danger p-1 m-1" data-bs-custom-class="custom-tooltip-danger" data-bs-toggle="tooltip" data-bs-placement="bottom" title="WARNING - SESSION NOT SECURE">
<i class="fas fa-fw fa-unlock-keyhole fs-5"></i>
</button>
</li>
@endif
@if(($x=Config::get('update_available')) && $x->action !== 'current')
<li>
@switch($x->action)
@case('unable')
<button class="btn btn-light opacity-2 p-1 m-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Upstream Version Unavailable">
<i class="fas fa-fw fa-bolt fs-5"></i>
</button>
@break
@case('upgrade')
<button class="btn btn-warning p-1 m-1" data-bs-custom-class="custom-tooltip-warning" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" title="Update Available:<br>{{ $x->version }}">
<i class="fas fa-fw fa-wrench fs-5"></i>
</button>
@break
@case('mismatch')
<button class="btn btn-light opacity-2 p-1 m-1" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" title="Version Issue - Upstream<br>{{ $x->version }}">
<i class="fas fa-fw fa-exclamation fs-5"></i>
</button>
@break
@case('unknown')
<button class="btn btn-light opacity-2 p-1 m-1" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" title="Version Issue - Unknown<br>{{ $x->version }}">
<i class="fas fa-fw fa-question fs-5"></i>
</button>
@break
@endswitch
</li>
@endif
</ul>
<div class="header-btn-lg pe-0">
<div class="widget-content p-0">
@ -112,3 +158,38 @@
</div>
</div>
</div>
@section('page-scripts')
<script type="text/javascript">
$(document).ready(function() {
$('button[id^="link-"]').on('click',function(item) {
var content;
$.ajax({
url: $(this).data('link'),
method: 'GET',
dataType: 'html',
statusCode: {
404: function() {
$('.main-content').empty().append(content);
}
},
beforeSend: function() {
content = $('.main-content').contents();
$('.main-content').empty().append('<div class="fa-3x"><i class="fas fa-spinner fa-pulse"></i></div>');
}
}).done(function(html) {
$('.main-content').empty().append(html);
}).fail(function() {
alert('Well that didnt work?');
});
item.stopPropagation();
return false;
});
});
</script>
@append

View File

@ -22,7 +22,7 @@
<div class="row">
<div class="offset-1 col-4 p-2">
<span class="p-0 m-0">
<button type="button" class="btn btn-transition btn-sm btn-outline-dark mt-3" data-bs-toggle="modal" data-bs-target="#userpassword_check-modal"><i class="fas fa-user-check"></i> @lang('Check Password')</button>
<button type="button" class="btn btn-sm btn-outline-dark mt-3" data-bs-toggle="modal" data-bs-target="#userpassword_check-modal"><i class="fas fa-user-check"></i> @lang('Check Password')</button>
</span>
</div>
</div>

View File

@ -25,7 +25,7 @@
@switch($step)
@case(1)
<div class="row">
<div class="col-12 col-sm-6">
<div class="col-12 col-md-6">
<x-form.select
id="objectclass"
name="objectclass[]"
@ -54,7 +54,7 @@
</form>
<div class="row d-none pt-3">
<div class="col-12 {{ $step > 1 ? 'offset-sm-2' : '' }} col-sm-4 col-lg-2">
<div class="col-12 {{ $step > 1 ? 'offset-sm-2' : '' }} col-lg-10">
<x-form.reset form="dn-create"/>
<x-form.submit action="Next" form="dn-create"/>
</div>

View File

@ -149,7 +149,9 @@
function editmode() {
$('#dn-edit input[name="dn"]').val(dn);
$('button[id=entry-edit]').addClass('active').removeClass('btn-outline-dark').addClass('btn-outline-light');
$('button[id=entry-edit]')
.removeClass('btn-outline-dark')
.addClass('btn-dark');
// Find all input items and turn off readonly
$('input.form-control').each(function() {
@ -201,15 +203,6 @@
$('#newattr-select').remove();
});
$('button[id=entry-edit]').on('click',function(item) {
item.preventDefault();
if ($(this).hasClass('active'))
return;
editmode();
});
$('#entry_export-download').on('click',function(item) {
item.preventDefault();

View File

@ -48,23 +48,11 @@
var subpage = window.location.hash;
$(document).ready(function() {
// Enable navigating to a page via a URL fragment, and that fragment is defined with a server-icon
if (subpage) {
// Enable navigating to a page via a URL fragment, and that fragment is defined with a server-icon
var valid = Object.values($('.server-icon > a').map(function() {
return $(this).attr('id');
})).indexOf(subpage.substring(1));
if (valid !== -1) {
// @todo this condition can probably be removed
console.log('teleporting...:'+subpage.substring(1));
// The click() event wont have been registered yet, so we need to delay us clicking it
setTimeout(function() { $(subpage).click(); },250);
} else if (valid === -1) {
// Clear the hash
history.replaceState(null,null,' ');
getNode(subpage.substring(1));
}
// Clear the hash
history.replaceState(null,null,' ');
getNode(subpage.substring(1));
}
});
</script>

View File

@ -12,4 +12,9 @@
@yield('page-modals')
@yield('page-scripts')
@yield('page-styles')
@yield('page-styles')
<!-- Initialise any ajax tool tip attributes -->
<script type="text/javascript">
$('[data-bs-toggle="tooltip"]').tooltip();
</script>