Support center: Prepare new sidebar section.

baraja-core · Dec 29, 2021 · 326cdd9 · 326cdd9
1 parent 646722f
commit 326cdd9
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 0 deletions.
diff --git a/src/MiddleWare/Application.php b/src/MiddleWare/Application.php
@@ -14,6 +14,7 @@
 use Baraja\Cms\Proxy\Proxy;
 use Baraja\Cms\Search\SearchAdminBarPlugin;
 use Baraja\Cms\Session;
+use Baraja\Cms\Support\SupportAdminBarPlugin;
 use Baraja\Plugin\CmsPluginPanel;
 use Baraja\Plugin\Exception\PluginRedirectException;
 use Baraja\Plugin\Exception\PluginTerminateException;
@@ -58,6 +59,7 @@ public function run(string $plugin, string $view, string $locale, string $path):
 		$this->processLoginPage($path, $locale);
 		AdminBar::enable(AdminBar::MODE_ENABLED);
 		AdminBar::getBar()->setEnableVue();
+		AdminBar::getBar()->addPlugin(new SupportAdminBarPlugin);
 		if (class_exists(Search::class)) {
 			AdminBar::getBar()->addPlugin(new SearchAdminBarPlugin);
 		}

diff --git a/src/Support/SupportAdminBarPlugin.php b/src/Support/SupportAdminBarPlugin.php
@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Baraja\Cms\Support;
+
+
+use Baraja\AdminBar\Plugin\Plugin;
+
+final class SupportAdminBarPlugin implements Plugin
+{
+	public function render(): string
+	{
+		return '<div id="cmsSupportPanel">
+	<cms-support-admin-panel></cms-support-admin-panel>
+</div>';
+	}
+}
diff --git a/template/@layout.phtml b/template/@layout.phtml
@@ -83,6 +83,7 @@ use Baraja\Cms\Proxy\Proxy;
 	</div>
 	<support-chat></support-chat>
 	<cms-settings></cms-settings>
+	<cms-support-sidebar></cms-support-sidebar>
 	<cms-footer :year="<?=date('Y')?>" version="<?=htmlspecialchars($currentVersion)?>"></cms-footer>
 </div>
 <script src="<?= $isDebug ? 'https://unpkg.com/[email protected]/dist/vue.js' : 'https://unpkg.com/[email protected]/dist/vue.min.js' ?>"></script>

diff --git a/template/assets/core.css b/template/assets/core.css
@@ -67,6 +67,10 @@
 	background: #eee;
 }
 
+.cms-support-sidebar .b-sidebar-header {
+	margin-top: 2em;
+}
+
 .modal-dialog {
 	margin-top: 4em !important;
 }

diff --git a/template/assets/core.js b/template/assets/core.js
@@ -243,6 +243,46 @@ Vue.component('cms-search', {
 	}
 });
 
+Vue.component('cms-support-admin-panel', {
+	template: `<div>
+	<table style="max-width:95px !important" @click="handleSupportCenter">
+		<tr>
+			<td style="width:40px;text-align:right">
+				<cms-support-admin-panel-help-icon></cms-support-admin-panel-help-icon>
+			</td>
+		</tr>
+	</table>
+</div>`,
+	methods: {
+		handleSupportCenter() {
+			eventBus.$emit('cms-support-center-open');
+		}
+	}
+});
+
+Vue.component('cms-support-admin-panel-help-icon', {
+	template: `<svg viewBox="0 0 12.7 12.7"><defs/><g transform="translate(0,-284.29998)"><circle cx="6.3500376" cy="290.64993" id="path4504" r="3.8805983" style="opacity:1;vector-effect:none;fill:none;fill-opacity:0.58506224;stroke:#fff;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/><path d="m 5.2916669,289.94443 c 0,-0.70557 0.3527779,-1.05835 1.0583334,-1.05835 0.7055555,0 1.0583337,0.35278 1.0583334,1.05835 3e-7,0.70555 -1.0583334,0 -1.0583334,1.41109" id="path4506" style="fill:none;fill-rule:evenodd;stroke:#fff;stroke-width:0.705px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/><rect height="0.70555556" style="opacity:1;vector-effect:none;fill:#fff;fill-opacity:1;stroke:none;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" width="0.70555556" x="5.9972234" y="292.06107"/></g></svg>`
+});
+
+Vue.component('cms-support-sidebar', {
+	template: `<div class="cms-support-sidebar">
+	<b-sidebar id="cms-support-center" title="Support center" backdrop-variant="dark" backdrop right shadow>
+		<div class="px-3 py-2">
+			<p>Welcome to the Technical Support Center!</p>
+			<p>
+				This section of the CMS will be used in the future to display help for the page you are currently on.
+				You will also be able to create a support ticket here for technical support.
+			</p>
+		</div>
+	</b-sidebar>
+</div>`,
+	mounted() {
+		eventBus.$on('cms-support-center-open', () => {
+			this.$root.$emit('bv::toggle::collapse', 'cms-support-center');
+		});
+	}
+});
+
 Vue.component('cms-default', {
 	props: ['card', 'title', 'subtitle', 'buttons', 'breadcrumb', 'contextMenu'],
 	template: `<div>