From 8d00aaa6863e9d12d18834c81714a262831c5417 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ba=CC=81lint=20Szekeres?= <balint.szekeres@feat.agency>
Date: Mon, 14 Oct 2019 00:37:33 +0200
Subject: [PATCH] global config navigation

---
 public/index.html                  |  2 +-
 public/partials/config-global.html | 52 +++++++++++------------------
 resources/js/app.js                | 53 ++++++++++++++++++++++++++++--
 resources/scss/layout/_do.scss     |  7 ++++
 4 files changed, 78 insertions(+), 36 deletions(-)

diff --git a/public/index.html b/public/index.html
index 8bee4e5..067750b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -63,7 +63,7 @@
 							<div ng-include="'partials/config-global.html'"></div>
 						</div>
 					</div>
-					<div ng-if="layout !== 'do'" class="col-lg-3" ng-cloak>
+					<div ng-if="layout === 'default'" class="col-lg-3" ng-cloak>
 						<aside class="sidebar">
 							<div class="github">
 								<div class="github-cover">
diff --git a/public/partials/config-global.html b/public/partials/config-global.html
index 15ad78a..6256b0b 100644
--- a/public/partials/config-global.html
+++ b/public/partials/config-global.html
@@ -1,34 +1,18 @@
-<ul class="nav nav-tabs nav-common" role="tablist">
+<ul ng-if="layout === 'default'" class="nav nav-tabs nav-common" role="tablist">
 	<li class="nav-item disabled">
 		<a class="nav-link">Global:</a>
 	</li>
-	<li class="nav-item">
-		<a class="nav-link" ng-click="setTabCommon('https')" ng-class="{ 'active': tab_common === 'https', 'changed': commonChanges['https'] }">HTTPS<small ng-cloak>({{ commonChanges['https'] }})</small></a>
-	</li>
-	<li class="nav-item">
-		<a class="nav-link" ng-click="setTabCommon('security')" ng-class="{ 'active': tab_common === 'security', 'changed': commonChanges['security'] }">Security<small ng-cloak>({{ commonChanges['security'] }})</small></a>
-	</li>
-	<li class="nav-item">
-		<a class="nav-link" ng-click="setTabCommon('php')" ng-class="{ 'active': tab_common === 'php', 'changed': commonChanges['php'] }">PHP<small ng-cloak>({{ commonChanges['php'] }})</small></a>
-	</li>
-	<li class="nav-item">
-		<a class="nav-link" ng-click="setTabCommon('python')" ng-class="{ 'active': tab_common === 'python', 'changed': commonChanges['python'] }">Python<small ng-cloak>({{ commonChanges['python'] }})</small></a>
-	</li>
-	<li class="nav-item">
-		<a class="nav-link" ng-click="setTabCommon('performance')" ng-class="{ 'active': tab_common === 'performance', 'changed': commonChanges['performance'] }">Performance<small ng-cloak>({{ commonChanges['performance'] }})</small></a>
-	</li>
-	<li class="nav-item">
-		<a class="nav-link" ng-click="setTabCommon('logging')" ng-class="{ 'active': tab_common === 'logging', 'changed': commonChanges['logging'] }">Logging<small ng-cloak>({{ commonChanges['logging'] }})</small></a>
-	</li>
-	<li class="nav-item">
-		<a class="nav-link" ng-click="setTabCommon('nginx')" ng-class="{ 'active': tab_common === 'nginx', 'changed': commonChanges['nginx'] }">NGINX<small ng-cloak>({{ commonChanges['nginx'] }})</small></a>
-	</li>
-	<li class="nav-item">
-		<a class="nav-link text-muted" ng-click="setTabCommon('tools')" ng-class="{ 'active': tab_common === 'tools', 'changed': commonChanges['tools'] }">Tools<small ng-cloak>({{ commonChanges['tools'] }})</small></a>
+	<li ng-repeat="(key, tab) in tabs_common" class="nav-item">
+		<a class="nav-link" ng-click="setTabCommon(key)" ng-class="{ 'active': tab_common === key, 'changed': getSiteTabChanges(tab.slug) }">{{ tab.name }}<small ng-cloak>({{ commonChanges[tab.slug] }})</small></a>
 	</li>
 </ul>
 <div class="tab-content common-content">
-	<div class="tab-pane tab-https" ng-class="{ 'active': tab_common === 'https' }">
+	<ul ng-if="layout === 'do'" class="nav nav-pills nav-fill" role="tablist">
+		<li ng-repeat="(key, tab) in tabs_common" class="nav-item">
+			<a class="nav-link" ng-click="setTabCommon(key)" ng-class="{ 'active': tab_common === key, 'changed': getSiteTabChanges(tab.slug), 'visited': key < tab_common }">{{ tab.name }}<small ng-cloak>({{ commonChanges[tab.slug] }})</small></a>
+		</li>
+	</ul>
+	<div class="tab-pane tab-https" ng-class="{ 'active': tabs_common[tab_common].slug === 'https' }">
 		<fieldset class="form-group" ng-class="{ disabled: !hasHTTPS() }">
 			<div class="row">
 				<legend class="col-sm-3 col-form-label col-form-label-sm">SSL profile</legend>
@@ -85,7 +69,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="tab-pane tab-security" ng-class="{ 'active': tab_common === 'security' }">
+	<div class="tab-pane tab-security" ng-class="{ 'active': tabs_common[tab_common].slug === 'security' }">
 		<div class="form-group row">
 			<label class="col-sm-3 col-form-label col-form-label-sm">
 				<code tooltips tooltip-template="Referrer Policy is a new header that allows a site to control how much information the browser includes with navigations away from a document and should be set by all sites.">Referrer-Policy</code>
@@ -137,7 +121,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="tab-pane tab-php" ng-class="{ 'active': tab_common === 'php' }">
+	<div class="tab-pane tab-php" ng-class="{ 'active': tabs_common[tab_common].slug === 'php' }">
 		<div class="form-group row" ng-class="{ disabled: !hasPHP() }">
 			<label class="col-sm-3 col-form-label col-form-label-sm">
 				PHP server
@@ -174,7 +158,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="tab-pane tab-python" ng-class="{ 'active': tab_common === 'python' }">
+	<div class="tab-pane tab-python" ng-class="{ 'active': tabs_common[tab_common].slug === 'python' }">
 		<div class="form-group row" ng-class="{ disabled: !hasPython() }">
 			<label class="col-sm-3 col-form-label col-form-label-sm">
 				Python server
@@ -187,7 +171,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="tab-pane tab-performance" ng-class="{ 'active': tab_common === 'performance' }">
+	<div class="tab-pane tab-performance" ng-class="{ 'active': tabs_common[tab_common].slug === 'performance' }">
 		<div class="form-group row">
 			<label class="col-sm-3 col-form-label col-form-label-sm">
 				gzip compression
@@ -255,7 +239,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="tab-pane tab-logging" ng-class="{ 'active': tab_common === 'logging' }">
+	<div class="tab-pane tab-logging" ng-class="{ 'active': tabs_common[tab_common].slug === 'logging' }">
 		<div class="form-group row">
 			<label class="col-sm-3 col-form-label col-form-label-sm">
 				<code tooltips tooltip-template="Sets the path, format, and configuration for a buffered log write.">access_log</code>
@@ -290,7 +274,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="tab-pane tab-nginx" ng-class="{ 'active': tab_common === 'nginx' }">
+	<div class="tab-pane tab-nginx" ng-class="{ 'active': tabs_common[tab_common].slug === 'nginx' }">
 		<div class="form-group row">
 			<label class="col-sm-3 col-form-label col-form-label-sm">
 				NGINX config directory
@@ -369,7 +353,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="tab-pane tab-tools" ng-class="{ 'active': tab_common === 'tools' }">
+	<div class="tab-pane tab-tools" ng-class="{ 'active': tabs_common[tab_common].slug === 'tools' }">
 		<div class="form-group row">
 			<label class="col-sm-3 col-form-label col-form-label-sm">
 				<span tooltips tooltip-template="Multiple configuration files<br><br><i>(ideal for multi-domain environment)</i>">Modularized structure</span>
@@ -408,4 +392,8 @@
 			</div>
 		</div>
 	</div>
+	<div class="tab-navigation-buttons" ng-if="layout === 'do'">
+		<button class="btn btn-outline-secondary" ng-click="setTabCommonBack()">Back</button>
+		<button class="btn btn-primary" ng-click="setTabCommonNext()">Next</button>
+	</div>
 </div>
diff --git a/resources/js/app.js b/resources/js/app.js
index a82c289..e97e58c 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -390,7 +390,7 @@
 
 		$scope.site			= 0;
 		$scope.tab_site		= 0;
-		$scope.tab_common	= 'https';
+		$scope.tab_common	= 0;
 
 		$scope.tabs_site = [
 			{
@@ -423,6 +423,41 @@
 			},
 		];
 
+		$scope.tabs_common = [
+			{
+				name: 'HTTPS',
+				slug: 'https',
+			},
+			{
+				name: 'Security',
+				slug: 'security',
+			},
+			{
+				name: 'PHP',
+				slug: 'php',
+			},
+			{
+				name: 'Python',
+				slug: 'python',
+			},
+			{
+				name: 'Performance',
+				slug: 'performance',
+			},
+			{
+				name: 'Logging',
+				slug: 'logging',
+			},
+			{
+				name: 'NGINX',
+				slug: 'nginx',
+			},
+			{
+				name: 'Tools',
+				slug: 'tools',
+			},
+		];
+
 		$scope.siteChanges		= {};
 		$scope.commonChanges	= {};
 
@@ -590,10 +625,22 @@
 			}
 		}
 
-		$scope.setTabCommon = function(tab) {
-			$scope.tab_common = tab;
+		$scope.setTabCommon = function(key) {
+			$scope.tab_common = key;
 		};
 
+		$scope.setTabCommonBack = function() {
+			if ($scope.tab_common > 0) {
+				$scope.tab_common--;
+			}
+		};
+
+		$scope.setTabCommonNext = function() {
+			if ($scope.tab_common < $scope.tabs_common.length - 1) {
+				$scope.tab_common++;
+			}
+		}
+
 		$scope.setPreset = function(preset) {
 			$scope.data.sites[$scope.site].php				= $scope.defaultData.sites[0].php;
 			$scope.data.sites[$scope.site].wordpress		= $scope.defaultData.sites[0].wordpress;
diff --git a/resources/scss/layout/_do.scss b/resources/scss/layout/_do.scss
index 360d2b0..230aa7b 100644
--- a/resources/scss/layout/_do.scss
+++ b/resources/scss/layout/_do.scss
@@ -158,9 +158,16 @@ body.layout-do {
 
 		.tab-content {
 			background-color: #fafafa;
+			border-color: #e5e5e5;
 			padding-left: 40px;
 			padding-right: 40px;
 
+			&.common-content {
+				border-top: 1px solid #e5e5e5;
+				border-top-left-radius: 5px;
+				border-top-right-radius: 5px;
+			}
+
 			.nav-pills {
 				margin: 25px 0;
 				background-color: #ffffff;