From 070aabfc88e498f8a0d41e355cf401ba9b127838 Mon Sep 17 00:00:00 2001
From: Deon George <deon@dege.au>
Date: Tue, 4 Mar 2025 23:03:42 +1100
Subject: [PATCH] Switch to using icons when rendering a DN, and move the
 server icons to the topmenu

---
 public/css/custom.css                         |  45 ++++++++
 public/css/fixes.css                          |   6 --
 .../layouts/partials/contentfooter.blade.php  |  18 ----
 .../layouts/partials/contentheader.blade.php  |  92 ++++++++--------
 .../layouts/partials/sidebarmenu.blade.php    |  54 +---------
 .../views/layouts/partials/topmenu.blade.php  | 101 ++++++++++++++++--
 .../components/attribute/password.blade.php   |   2 +-
 resources/views/frames/create.blade.php       |   4 +-
 resources/views/frames/dn.blade.php           |  13 +--
 resources/views/home.blade.php                |  20 +---
 resources/views/layouts/dn.blade.php          |   7 +-
 11 files changed, 199 insertions(+), 163 deletions(-)

diff --git a/public/css/custom.css b/public/css/custom.css
index 76c5a7b0..96a84336 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -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;
 }
\ No newline at end of file
diff --git a/public/css/fixes.css b/public/css/fixes.css
index 0a3dbb8b..3fc5e4a2 100644
--- a/public/css/fixes.css
+++ b/public/css/fixes.css
@@ -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;
diff --git a/resources/themes/architect/views/layouts/partials/contentfooter.blade.php b/resources/themes/architect/views/layouts/partials/contentfooter.blade.php
index 96af3d4c..cde2bcd5 100644
--- a/resources/themes/architect/views/layouts/partials/contentfooter.blade.php
+++ b/resources/themes/architect/views/layouts/partials/contentfooter.blade.php
@@ -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>
diff --git a/resources/themes/architect/views/layouts/partials/contentheader.blade.php b/resources/themes/architect/views/layouts/partials/contentheader.blade.php
index 636927bf..72893e2b 100644
--- a/resources/themes/architect/views/layouts/partials/contentheader.blade.php
+++ b/resources/themes/architect/views/layouts/partials/contentheader.blade.php
@@ -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>
\ No newline at end of file
+</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
\ No newline at end of file
diff --git a/resources/themes/architect/views/layouts/partials/sidebarmenu.blade.php b/resources/themes/architect/views/layouts/partials/sidebarmenu.blade.php
index 8a7ed3c9..a2ec3de7 100644
--- a/resources/themes/architect/views/layouts/partials/sidebarmenu.blade.php
+++ b/resources/themes/architect/views/layouts/partials/sidebarmenu.blade.php
@@ -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>
\ No newline at end of file
diff --git a/resources/themes/architect/views/layouts/partials/topmenu.blade.php b/resources/themes/architect/views/layouts/partials/topmenu.blade.php
index d6292889..45c455d7 100644
--- a/resources/themes/architect/views/layouts/partials/topmenu.blade.php
+++ b/resources/themes/architect/views/layouts/partials/topmenu.blade.php
@@ -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
\ No newline at end of file
diff --git a/resources/views/components/attribute/password.blade.php b/resources/views/components/attribute/password.blade.php
index d03ee55b..e2bab04b 100644
--- a/resources/views/components/attribute/password.blade.php
+++ b/resources/views/components/attribute/password.blade.php
@@ -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>
diff --git a/resources/views/frames/create.blade.php b/resources/views/frames/create.blade.php
index 0063e0c6..79193bae 100644
--- a/resources/views/frames/create.blade.php
+++ b/resources/views/frames/create.blade.php
@@ -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>
diff --git a/resources/views/frames/dn.blade.php b/resources/views/frames/dn.blade.php
index cdf8b5b9..6e06bebc 100644
--- a/resources/views/frames/dn.blade.php
+++ b/resources/views/frames/dn.blade.php
@@ -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();
 
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 9ce12227..57a3b7bd 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -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>
diff --git a/resources/views/layouts/dn.blade.php b/resources/views/layouts/dn.blade.php
index a908cbe4..85ca43ff 100644
--- a/resources/views/layouts/dn.blade.php
+++ b/resources/views/layouts/dn.blade.php
@@ -12,4 +12,9 @@
 
 @yield('page-modals')
 @yield('page-scripts')
-@yield('page-styles')
\ No newline at end of file
+@yield('page-styles')
+
+<!-- Initialise any ajax tool tip attributes -->
+<script type="text/javascript">
+	$('[data-bs-toggle="tooltip"]').tooltip();
+</script>
\ No newline at end of file