From: Marcin Haba <marcin.haba@bacula.pl>
Date: Mon, 27 Nov 2017 20:06:50 +0000 (+0100)
Subject: baculum: Wizards view improvements
X-Git-Tag: Release-9.0.7~26
X-Git-Url: https://git.sur5r.net/?p=bacula%2Fbacula;a=commitdiff_plain;h=d53f8f0cf02d0d1980873ab32e10dde51e40feae

baculum: Wizards view improvements
---

diff --git a/gui/baculum/protected/API/Pages/Panel/APIInstallWizard.page b/gui/baculum/protected/API/Pages/Panel/APIInstallWizard.page
index bc0e7f4f9d..92d43f394a 100644
--- a/gui/baculum/protected/API/Pages/Panel/APIInstallWizard.page
+++ b/gui/baculum/protected/API/Pages/Panel/APIInstallWizard.page
@@ -68,10 +68,10 @@
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step2" Title="<%[ Step 2 - share the Bacula Catalog Database ]%>" StepType="Auto">
 			<p><%[ Do you want to setup and to share the Bacula Catalog Database access for this API instance? ]%></p>
-			<div class="line">
+			<div class="line left">
 				<com:TRadioButton ID="DatabaseNo" GroupName="SelectDatabase" Attributes.onclick="$('#configure_database').hide();" /> <com:TLabel ForControl="DatabaseNo" Text="<%[ No ]%>" />
 			</div>
-			<div class="line">
+			<div class="line left">
 				<com:TRadioButton ID="DatabaseYes" GroupName="SelectDatabase" Attributes.onclick="$('#configure_database').show();" /> <com:TLabel ForControl="DatabaseYes" Text="<%[ Yes ]%>" />
 			</div>
 			<div id="configure_database" style="display: <%=($this->DatabaseYes->Checked === true) ? '' : 'none';%>">
@@ -233,10 +233,10 @@
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step3" Title="<%[ Step 3 - share the Bacula Bconsole commands interface ]%>" StepType="Auto">
 			<p><%[ Do you want to setup and share the Bacula Bconsole interface to execute commands in this API instance? ]%></p>
-			<div class="line">
+			<div class="line left">
 				<com:TRadioButton ID="ConsoleNo" GroupName="SelectConsole" Attributes.onclick="$('#configure_console').hide();" /> <com:TLabel ForControl="ConsoleNo" Text="<%[ No ]%>" />
 			</div>
-			<div class="line">
+			<div class="line left">
 				<com:TRadioButton ID="ConsoleYes" GroupName="SelectConsole" Attributes.onclick="$('#configure_console').show();" /> <com:TLabel ForControl="ConsoleYes" Text="<%[ Yes ]%>" />
 			</div>
 			<div id="configure_console" style="display: <%=($this->ConsoleYes->Checked === true) ? '' : 'none';%>">
@@ -286,25 +286,25 @@
 						</table>
 					</div>
 				</div>
-				<div class="line">
+				<div class="line left">
 					<span><b><%[ NOTE! ]%></b><br /><em><%[ Baculum needs access to bconsole by the web server. ]%></em></span>
 				</div>
 			</div>
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step4" Title="<%[ Step 4 - share the Bacula configuration interface ]%>" StepType="Auto">
 			<p><%[ Do you want to setup and share the Bacula configuration interface to configure Bacula components via this API instance? ]%></p>
-			<div class="line">
+			<div class="line left">
 				<com:TRadioButton ID="ConfigNo" GroupName="SelectConfig" Attributes.onclick="$('#configure_config').hide();" /> <com:TLabel ForControl="ConfigNo" Text="<%[ No ]%>" />
 			</div>
-			<div class="line">
+			<div class="line left">
 				<com:TRadioButton ID="ConfigYes" GroupName="SelectConfig" Attributes.onclick="$('#configure_config').show();" /> <com:TLabel ForControl="ConfigYes" Text="<%[ Yes ]%>" />
 			</div>
-			<div id="configure_config" style="display: <%=($this->ConfigYes->Checked === true) ? '' : 'none';%>">
+			<div id="configure_config" style="display: <%=($this->ConfigYes->Checked === true) ? 'block' : 'none';%>">
 				<div id="config_fields">
 					<fieldset class="config_field">
 						<legend><%[ General configuration ]%></legend>
 						<div class="config_lines">
-							<div class="line">
+							<div class="line left">
 								<div class="text"><com:TLabel ForControl="BConfigDir" Text="<%[ Directory path for new config files: ]%>" /></div>
 								<div class="field">
 									<com:TRequiredFieldValidator ValidationGroup="ConfigGroup" ControlToValidate="BConfigDir" Display="Dynamic" Text="<%[ Directory path field is required. ]%>" />
@@ -312,7 +312,7 @@
 									<com:TTextBox ID="BConfigDir" CssClass="textbox" />
 								</div>
 							</div>
-							<div class="line">
+							<div class="line left">
 								<div class="text"><com:TLabel ForControl="BJSONUseSudo" Text="<%[ Use sudo: ]%>" /></div>
 								<div class="field">
 									<com:TCheckBox ID="BJSONUseSudo" />
@@ -326,14 +326,14 @@
 					<fieldset class="config_field">
 						<legend>Director</legend>
 						<div class="config_lines">
-							<div class="line">
+							<div class="line left">
 								<div class="text"><com:TLabel ForControl="BDirJSONPath" Text="<%[ bdirjson binary file path: ]%>" /></div>
 								<div class="field">
 									<com:TCustomValidator ValidationGroup="ConfigGroup" ControlToValidate="BDirJSONPath" ClientValidationFunction="bjsontools_validator" Display="Dynamic" Text="<%[ There is required to provide both binary file and config file paths. ]%>" />
 									<com:TTextBox ID="BDirJSONPath" CssClass="textbox" />
 								</div>
 							</div>
-							<div class="line">
+							<div class="line left">
 								<div class="text"><com:TLabel ForControl="DirCfgPath" Text="<%[ Main Director config file path (usually bacula-dir.conf): ]%>" /></div>
 								<div class="field">
 									<com:TCustomValidator ValidationGroup="ConfigGroup" ControlToValidate="DirCfgPath" ClientValidationFunction="bjsontools_validator" Display="Dynamic" Text="<%[ There is required to provide both binary file and config file paths. ]%>" />
@@ -348,14 +348,14 @@
 					<fieldset class="config_field">
 						<legend>Storage Daemon</legend>
 						<div class="config_lines">
-							<div class="line">
+							<div class="line left">
 								<div class="text"><com:TLabel ForControl="BSdJSONPath" Text="<%[ bsdjson binary file path: ]%>" /></div>
 								<div class="field">
 									<com:TCustomValidator ValidationGroup="ConfigGroup" ControlToValidate="BSdJSONPath" ClientValidationFunction="bjsontools_validator" Display="Dynamic" Text="<%[ There is required to provide both binary file and config file paths. ]%>" />
 									<com:TTextBox ID="BSdJSONPath" CssClass="textbox" />
 								</div>
 							</div>
-							<div class="line">
+							<div class="line left">
 								<div class="text"><com:TLabel ForControl="SdCfgPath" Text="<%[ Main Storage Daemon config file path (usually bacula-sd.conf): ]%>" /></div>
 								<div class="field">
 									<com:TCustomValidator ValidationGroup="ConfigGroup" ControlToValidate="SdCfgPath" ClientValidationFunction="bjsontools_validator" Display="Dynamic" Text="<%[ There is required to provide both binary file and config file paths. ]%>" />
@@ -370,14 +370,14 @@
 					<fieldset class="config_field">
 						<legend>File Daemon/Client</legend>
 						<div class="config_lines">
-							<div class="line">
+							<div class="line left">
 								<div class="text"><com:TLabel ForControl="BFdJSONPath" Text="<%[ bfdjson binary file path: ]%>" /></div>
 								<div class="field">
 									<com:TCustomValidator ValidationGroup="ConfigGroup" ControlToValidate="BFdJSONPath" ClientValidationFunction="bjsontools_validator" Display="Dynamic" Text="<%[ There is required to provide both binary file and config file paths. ]%>" />
 									<com:TTextBox ID="BFdJSONPath" CssClass="textbox" />
 								</div>
 							</div>
-							<div class="line">
+							<div class="line left">
 								<div class="text"><com:TLabel ForControl="FdCfgPath" Text="<%[ Main File Daemon config file path (usually bacula-fd.conf): ]%>" /></div>
 								<div class="field">
 									<com:TCustomValidator ValidationGroup="ConfigGroup" ControlToValidate="FdCfgPath" ClientValidationFunction="bjsontools_validator" Display="Dynamic" Text="<%[ There is required to provide both binary file and config file paths. ]%>" />
@@ -392,14 +392,14 @@
 					<fieldset class="config_field">
 						<legend>Bconsole</legend>
 						<div class="config_lines">
-							<div class="line">
+							<div class="line left">
 								<div class="text"><com:TLabel ForControl="BBconsJSONPath" Text="<%[ bbconsjson binary file path: ]%>" /></div>
 								<div class="field">
 									<com:TCustomValidator ValidationGroup="ConfigGroup" ControlToValidate="BBconsJSONPath" ClientValidationFunction="bjsontools_validator" Display="Dynamic" Text="<%[ There is required to provide both binary file and config file paths. ]%>" />
 									<com:TTextBox ID="BBconsJSONPath" CssClass="textbox" />
 								</div>
 							</div>
-							<div class="line">
+							<div class="line left">
 								<div class="text"><com:TLabel ForControl="BconsCfgPath" Text="<%[ Admin Bconsole config file path (usually bconsole.conf): ]%>" /></div>
 								<div class="field">
 									<com:TCustomValidator ValidationGroup="ConfigGroup" ControlToValidate="BconsCfgPath" ClientValidationFunction="bjsontools_validator" Display="Dynamic" Text="<%[ There is required to provide both binary file and config file paths. ]%>" />
@@ -426,7 +426,7 @@
 			</div>
 		</com:TWizardStep>
 		<com:TWizardStep ID="Step5" Title="<%[ Step 5 - authorization to API ]%>" StepType="Auto">
-			<div class="line">
+			<div class="line left" style="width:500px; margin: 0 auto">
 				<com:TActiveRadioButton
 					ID="AuthOAuth2"
 					GroupName="SelectAuth"
@@ -438,7 +438,7 @@
 					Text="<%[ Use OAuth2 for authorization and authentication ]%>"
 				/>
 			</div>
-			<div class="line">
+			<div class="line left" style="width:500px; margin: 0 auto">
 				<com:TActiveRadioButton
 					ID="AuthBasic"
 					GroupName="SelectAuth"
diff --git a/gui/baculum/protected/Web/Layouts/Wizard.tpl b/gui/baculum/protected/Web/Layouts/Wizard.tpl
index 2111b93e76..b3b0ca9d27 100644
--- a/gui/baculum/protected/Web/Layouts/Wizard.tpl
+++ b/gui/baculum/protected/Web/Layouts/Wizard.tpl
@@ -3,7 +3,11 @@
 	<com:THead Title="Baculum - Bacula Web Interface" ShortcutIcon="<%=$this->getPage()->getTheme()->getBaseUrl()%>/favicon.ico" />
 	<body>
 		<com:TForm>
+				<com:TClientScript PradoScripts="prado" />
+				<com:TClientScript ScriptUrl=<%~ ../JavaScript/opentip.js %> />
+				<com:TClientScript ScriptUrl=<%~ ../JavaScript/tooltip.js %> />
 				<com:TClientScript ScriptUrl=<%~ ../JavaScript/misc.js %> />
+				<com:TClientScript ScriptUrl=<%~ ../JavaScript/slide-window.js %> />
 				<com:TContentPlaceHolder ID="Wizard" />
 		</com:TForm>
 	</body>
diff --git a/gui/baculum/protected/Web/Pages/WebConfigWizard.page b/gui/baculum/protected/Web/Pages/WebConfigWizard.page
index eed2fbea3f..9195849259 100644
--- a/gui/baculum/protected/Web/Pages/WebConfigWizard.page
+++ b/gui/baculum/protected/Web/Pages/WebConfigWizard.page
@@ -3,7 +3,7 @@
 	<com:TWizard ID="InstallWizard"
 		CssClass="wizard"
 		StepStyle.CssClass="steps"
-		HeaderStyle.CssClass="header"
+		HeaderStyle.CssClass="wizard-body"
 		NavigationStyle.CssClass="navigation"
 		UseDefaultLayout="false"
 		ShowSideBar="false"
@@ -11,7 +11,7 @@
 		OnCompleteButtonClick="wizardCompleted"
 		>
 		<prop:HeaderTemplate>
-			<div class="steps-bar">
+			<div>
 				<div class="step step-<%=($this->Parent->ActiveStepIndex === 0) ? 'first-active' : (($this->Parent->ActiveStepIndex === 1) ? 'first-next-active' : 'first')%>">
 					<div><com:TTranslate Text="Language" /></div>
 				</div>
diff --git a/gui/baculum/themes/Baculum-v1/step-head.png b/gui/baculum/themes/Baculum-v1/step-head.png
new file mode 100644
index 0000000000..e7c0902814
Binary files /dev/null and b/gui/baculum/themes/Baculum-v1/step-head.png differ
diff --git a/gui/baculum/themes/Baculum-v1/step-last-1.png b/gui/baculum/themes/Baculum-v1/step-last-1.png
new file mode 100644
index 0000000000..c8dde10ba0
Binary files /dev/null and b/gui/baculum/themes/Baculum-v1/step-last-1.png differ
diff --git a/gui/baculum/themes/Baculum-v1/step-last-active-1.png b/gui/baculum/themes/Baculum-v1/step-last-active-1.png
new file mode 100644
index 0000000000..ad409c2f48
Binary files /dev/null and b/gui/baculum/themes/Baculum-v1/step-last-active-1.png differ
diff --git a/gui/baculum/themes/Baculum-v1/step-last-active.png b/gui/baculum/themes/Baculum-v1/step-last-active.png
deleted file mode 100644
index b6f2882cb0..0000000000
Binary files a/gui/baculum/themes/Baculum-v1/step-last-active.png and /dev/null differ
diff --git a/gui/baculum/themes/Baculum-v1/step-last.png b/gui/baculum/themes/Baculum-v1/step-last.png
deleted file mode 100644
index 9fbc6b65a1..0000000000
Binary files a/gui/baculum/themes/Baculum-v1/step-last.png and /dev/null differ
diff --git a/gui/baculum/themes/Baculum-v1/style.css b/gui/baculum/themes/Baculum-v1/style.css
index 49badceabc..7f6234296f 100644
--- a/gui/baculum/themes/Baculum-v1/style.css
+++ b/gui/baculum/themes/Baculum-v1/style.css
@@ -174,7 +174,7 @@ a.big {
 
 div.configuration {
 	width: 45%;
-	height: 575px;
+	height: 100%;
 	margin: 12px;
 	float: right;
 	background-color: #898889;
@@ -187,6 +187,7 @@ div.configuration {
 #configuration {
 	position: absolute;
 	width: 100%;
+	height: 99%;
 }
 
 #configuration div.field select {
@@ -200,7 +201,7 @@ div.configuration {
 div.configuration-progress {
 	background: rgba(182,182,182,0.7) url('progress.gif') no-repeat center center;
 	width: 45%;
-	height: 575px;
+	height: 100%;
 	z-index: 10;
 	position: absolute;
 	top: 12px;
@@ -542,31 +543,21 @@ tr.file-browser-element {
 
 tr.file-browser-element td {
 	font-style: italic;
-	padding: 3px 0;
+	min-height: 36px;
 	vertical-align: middle;
 }
 
-tr.file-browser-element:hover {
+tr.file-browser-element td:hover {
 	cursor: move;
 }
 
-tr.file-browser-element:hover td{
+tr.file-browser-element td:hover {
 	background-color: #aeb2b6;
 }
 
-tr.file-browser-header {
-	height: 25px;
-	text-align: left;
-	font-family: monospace;
-	font-size: 9px
-}
-
-tr.file-browser-header th {
-	padding-left: 9px;
-}
-
 .draggable {
 	cursor: move;
+	min-height: 30px;
 }
 
 div.slide-window-bar {
@@ -1065,13 +1056,18 @@ span.tab_active {
 }
 
 .config_lines {
-	width: 533px;
+	width: 590px;
 	float: left;
 }
 
+
+.config_lines div.field {
+	width: 280px !important;
+}
+
 #config_fields {
 	width: 732px;
-	margin-left: 8px;
+	margin: 0 auto;
 	padding-top: 7px;
 }
 
@@ -1246,3 +1242,10 @@ label.normal {
 .error {
 	color: red;
 }
+
+/* START Overwrite opentip styles */
+.ot-header h1 {
+	font-size: 16px;
+	word-wrap: break-word;
+}
+/* END Overwrite opentip styles */
diff --git a/gui/baculum/themes/Baculum-v1/wizard-bottom-1.png b/gui/baculum/themes/Baculum-v1/wizard-bottom-1.png
new file mode 100644
index 0000000000..c8f9e11c38
Binary files /dev/null and b/gui/baculum/themes/Baculum-v1/wizard-bottom-1.png differ
diff --git a/gui/baculum/themes/Baculum-v1/wizard-bottom.png b/gui/baculum/themes/Baculum-v1/wizard-bottom.png
deleted file mode 100644
index e3b991fab0..0000000000
Binary files a/gui/baculum/themes/Baculum-v1/wizard-bottom.png and /dev/null differ
diff --git a/gui/baculum/themes/Baculum-v1/wizard-content.png b/gui/baculum/themes/Baculum-v1/wizard-content.png
deleted file mode 100644
index 01bdfb58ef..0000000000
Binary files a/gui/baculum/themes/Baculum-v1/wizard-content.png and /dev/null differ
diff --git a/gui/baculum/themes/Baculum-v1/wizard-header-1.png b/gui/baculum/themes/Baculum-v1/wizard-header-1.png
new file mode 100644
index 0000000000..9101fa17ae
Binary files /dev/null and b/gui/baculum/themes/Baculum-v1/wizard-header-1.png differ
diff --git a/gui/baculum/themes/Baculum-v1/wizard-header.png b/gui/baculum/themes/Baculum-v1/wizard-header.png
deleted file mode 100644
index 0bfda5fc90..0000000000
Binary files a/gui/baculum/themes/Baculum-v1/wizard-header.png and /dev/null differ
diff --git a/gui/baculum/themes/Baculum-v1/wizard.css b/gui/baculum/themes/Baculum-v1/wizard.css
index 98a99d9daf..dd0ea6f68f 100644
--- a/gui/baculum/themes/Baculum-v1/wizard.css
+++ b/gui/baculum/themes/Baculum-v1/wizard.css
@@ -1,28 +1,40 @@
 .wizard {
+	min-height: 547px;
+	width: 1024px;
 	margin: 50px auto;
-	height: 547px;
-	width: 752px;
 	font-family: Arial;
 	color: white;
- }
- 
+	background-color: #585756;
+	background-image: url('step-head.png');
+	background-repeat: repeat-x;
+	border: 1px solid black;
+	border-radius: 15px;
+}
+
 .steps {
 	padding: 8px 20px;
-	min-height: 435px;
-	background-image: url('wizard-content.png');
-	background-repeat: repeat-y;
- }
+}
 
-.steps-bar {
-	background-image: url('step-bar.png');
-	background-repeat: no-repeat;
- }
+.steps div.line {
+	text-align: center;
+}
  
+.steps div.text, .steps div.field {
+	display: inline-block;
+	text-align: left;
+}
+
+.steps div.field {
+	width: 420px;
+}
+
 .navigation {
 	text-align: center;
 	padding: 5px 0;
-	background-image: url('wizard-bottom.png');
-	background-repeat: no-repeat;
+	background-image: url('wizard-bottom-1.png');
+	background-repeat: repeat-x;
+	border-bottom-left-radius: 14px;
+	border-bottom-right-radius: 14px;
  }
  
 .step {
@@ -59,12 +71,12 @@
 
 .step-last {
 	width: 130px;
-	background-image: url('step-last.png');
+	background-image: url('step-last-1.png');
  }
 
  .step-last-active {
 	width: 130px;
-	background-image: url('step-last-active.png');
+	background-image: url('step-last-active-1.png');
  }
  
  .step-last-next-active{
@@ -84,78 +96,13 @@
 	background-image: url('step-prev-active.png');
  }
  
-#licence {
-	width: 650px;
-	height: 300px;
-	overflow: auto;
-	border: 1px solid gray;
-	margin: auto;
-	padding: 5px;
-}
- 
 #title {
 	clear: left;
 	font-size: 14px;
 	font-weight: bold;
-	background-image: url('wizard-header.png');
-	background-repeat: no-repeat;
-	padding: 4px;
-}
- 
-#licence-agree {
-	width: 670px;
-	margin: 10px auto;
-}
-
-#restore-browser {
-	width: 100%;
-	height: 100%;
-}
-
-#restore-browser-files {
-	width: 315px;
-	height: 434px;
-}
-
-#restore-browser-files, #restore-browser-versions, #restore-browser-selected {
-	overflow: auto;
-	width: 339px;
-	background-color: white;
-	-webkit-border-radius: 4px;
-	-moz-border-radius: 4px;
-	border-radius: 4px;
+	background-image: url('wizard-header-1.png');
+	background-repeat: repeat-x;
 	padding: 4px;
-	-moz-user-select: -moz-none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-}
-
-#restore-browser-files {
-	height: 430px;
-}
-
-#restore-browser-versions {
-	height: 206px;
-}
-
-#restore-browser-selected {
-	height: 206px;
-}
-
-#restore-browser-files-loading {
-	position: absolute;
-	z-index: 10;
-	width: 347px;
-	height: 438px;
-	border-radius: 4px;
-	background: rgba(182,182,182,0.7) url('progress.gif') no-repeat center center;
-}
-
-.file-browser-watermark {
-	padding: 64px 10px;
-	text-align: center;
-	font-size: 21px;
-	color: rgb(185, 184, 184);
 }
 
 div.button-cancel {