added "info and support" button and adjusted speech-bubble colors

fquirin · fquirin · commit e05a339c2ca0 · 2018-12-16T18:58:18.000+01:00
diff --git a/www/css/sepiaFW-skin-9to5.css b/www/css/sepiaFW-skin-9to5.css
@@ -35,6 +35,11 @@ html {
 	border-color: #4B6688;
 }
 
+#sepiaFW-chat-controls-speech-box > div {
+	background: #4B6688;
+	color: #fff;
+}
+
 .sepiaFW-menu {
 	background: #684744;
 	color: #fff;
diff --git a/www/css/sepiaFW-skin-autum.css b/www/css/sepiaFW-skin-autum.css
@@ -35,6 +35,11 @@ html {
 	border-color: #44451F;
 }
 
+#sepiaFW-chat-controls-speech-box > div {
+	background: #44451F;
+	color: #fff;
+}
+
 .sepiaFW-menu {
 	background: #CD6859;
 	color: #fff;
diff --git a/www/css/sepiaFW-skin-bytemind.css b/www/css/sepiaFW-skin-bytemind.css
@@ -54,6 +54,11 @@ html {
 	background: #44c8be !important;
 }
 
+#sepiaFW-chat-controls-speech-box > div {
+	background: #262629;
+	color: #fff;
+}
+
 .sepiaFW-menu {
 	/*background: rgba(206, 255, 26, 0.95);*/
 	background: rgb(83, 143, 195);
diff --git a/www/css/sepiaFW-skin-canny.css b/www/css/sepiaFW-skin-canny.css
@@ -56,6 +56,11 @@ html {
 	background: #FE5652 !important;
 }
 
+#sepiaFW-chat-controls-speech-box > div {
+	background: #2f3035;
+	color: #f0f0f0;
+}
+
 .sepiaFW-menu {
 	/*background: rgba(206, 255, 26, 0.95);*/
 	background: #f0f0f0;
diff --git a/www/css/sepiaFW-skin-grid.css b/www/css/sepiaFW-skin-grid.css
@@ -96,8 +96,13 @@ html {
 	border-radius: 3px;
 }
 
+#sepiaFW-chat-controls-speech-box {
+	background: rgba(24, 40, 58, 0.92);
+	border: 1px solid #15abc3;
+    box-shadow: 0 0 5px #15abc3;
+}
 #sepiaFW-chat-controls-speech-box > div {
-	background: rgba(19, 38, 58, 0.92);
+	background: transparent;
 	color: #fff;
 }
 
diff --git a/www/css/sepiaFW-skin-malachite.css b/www/css/sepiaFW-skin-malachite.css
@@ -88,6 +88,11 @@ html {
 }
 */
 
+#sepiaFW-chat-controls-speech-box > div {
+	background: #000;
+	color: #fff;
+}
+
 .sepiaFW-menu {
 	background: #1499ae;
 	color: #fff;
diff --git a/www/css/sepiaFW-skin-minimal.css b/www/css/sepiaFW-skin-minimal.css
@@ -38,9 +38,6 @@ html {
 #sepiaFW-main-window h2 {
 	font-weight: 300;
 }
-#sepiaFW-main-window a {
-	color: #ceff1a;
-}
 #sepiaFW-main-window input, #sepiaFW-login-box input {
 	background: #000;
 	color: #fff;
@@ -110,6 +107,14 @@ html {
 	border-radius: 3px;
 }
 
+#sepiaFW-chat-controls-speech-box {
+	background: rgba(0, 0, 0, 0.8);
+}
+#sepiaFW-chat-controls-speech-box > div {
+	background: #19191b;
+	color: #e8e8e8;
+}
+
 .sepiaFW-menu {
 	background: #19191b;
 	color: #fff;
diff --git a/www/css/sepiaFW-skin-myMessage.css b/www/css/sepiaFW-skin-myMessage.css
@@ -57,6 +57,12 @@ html {
 	background: #fff;
 	color: #000;
 }
+
+#sepiaFW-chat-controls-speech-box > div {
+	background: #027BFF;
+	color: #fff;
+}
+
 #sepiaFW-main-window .chat-buttons-area button {
     color: #000;
     background: rgba(255, 255, 255, 0.75);
diff --git a/www/css/sepiaFW-skin-neo-sepia-dark.css b/www/css/sepiaFW-skin-neo-sepia-dark.css
@@ -99,7 +99,7 @@ html {
 */
 
 #sepiaFW-chat-controls-speech-box > div {
-	background: #08a0c8;
+	background: #101418;
 	color: #fff;
 }
 
diff --git a/www/css/sepiaFW-skin-neo-sepia.css b/www/css/sepiaFW-skin-neo-sepia.css
@@ -67,7 +67,7 @@ html {
 }
 
 #sepiaFW-chat-controls-speech-box > div {
-	background: #16abc3;
+	background: #000;
 	color: #fff;
 }
 
diff --git a/www/css/sepiaFW-skin-nippon.css b/www/css/sepiaFW-skin-nippon.css
@@ -35,6 +35,11 @@ html {
 	border-color: #000;
 }
 
+#sepiaFW-chat-controls-speech-box > div {
+	background: #000;
+	color: #F3D713;
+}
+
 .sepiaFW-menu {
 	background: #f3c923;
 	color: #000;
diff --git a/www/css/sepiaFW-skin-odyssey1.css b/www/css/sepiaFW-skin-odyssey1.css
@@ -91,6 +91,11 @@ html {
 }
 */
 
+#sepiaFW-chat-controls-speech-box > div {
+	background: #172735;
+	color: #fff;
+}
+
 .sepiaFW-menu {
 	background: #172735;
 	color: #ECEBE7;
diff --git a/www/css/sepiaFW-skin-odyssey2.css b/www/css/sepiaFW-skin-odyssey2.css
@@ -91,6 +91,11 @@ html {
 }
 */
 
+#sepiaFW-chat-controls-speech-box > div {
+	background: #13202a;
+	color: #fff;
+}
+
 .sepiaFW-menu {
 	background: #13202a;
 	color: #ECEBE7;
diff --git a/www/css/sepiaFW-skin-os1.css b/www/css/sepiaFW-skin-os1.css
@@ -73,6 +73,11 @@ html {
 	background-color: #fcf9ee;
 }
 
+#sepiaFW-chat-controls-speech-box > div {
+	background: #232323;
+	color: #fcf9ee;
+}
+
 .sepiaFW-menu {
 	background: rgba(82, 67, 53, 1.0);
 	color: #fcf9ee;
diff --git a/www/css/sepiaFW-skin-pizza.css b/www/css/sepiaFW-skin-pizza.css
@@ -38,6 +38,11 @@ html {
 	border-color: #B84648;
 }
 
+#sepiaFW-chat-controls-speech-box > div {
+	background: #59372E;
+	color: #fff;
+}
+
 .sepiaFW-menu {
 	background: #019829; /*#B84648;*/
 	color: #fff;
diff --git a/www/css/sepiaFW-skin-poppy.css b/www/css/sepiaFW-skin-poppy.css
@@ -45,6 +45,11 @@ html {
 	border-color: #8E88BE;
 }
 
+#sepiaFW-chat-controls-speech-box > div {
+	background: #8E88BE;
+	color: #fff;
+}
+
 .sepiaFW-menu {
 	background: #4b89c3;
 	color: #fff;
diff --git a/www/css/sepiaFW-skin-professional.css b/www/css/sepiaFW-skin-professional.css
@@ -95,6 +95,15 @@ html {
 }
 */
 
+#sepiaFW-chat-controls-speech-box {
+	border-radius: 0;
+}
+#sepiaFW-chat-controls-speech-box > div {
+	background: #1b1e20;
+	color: #fff;
+	border-radius: 0;
+}
+
 .sepiaFW-menu {
 	background: #1b1e20;
 	color: #fff;
diff --git a/www/css/sepiaFW-skin-sakura.css b/www/css/sepiaFW-skin-sakura.css
@@ -35,6 +35,11 @@ html {
 	border-color: #503040;
 }
 
+#sepiaFW-chat-controls-speech-box > div {
+	background: #503040;
+	color: #fff;
+}
+
 .sepiaFW-menu {
 	background: rgba(160, 145, 153, 1.00);
 	color: #fff;
diff --git a/www/css/sepiaFW-skin-street.css b/www/css/sepiaFW-skin-street.css
@@ -40,6 +40,11 @@ html {
 	background: rgba(255, 255, 255, 0.25);
 }
 
+#sepiaFW-chat-controls-speech-box > div {
+	background: #000;
+	color: #ceff1a;
+}
+
 .sepiaFW-menu {
 	/*background: rgba(206, 255, 26, 0.95);*/
 	background: rgba(222, 222, 240, 0.95);
diff --git a/www/css/sepiaFW-skin-study.css b/www/css/sepiaFW-skin-study.css
@@ -88,6 +88,11 @@ html {
 }
 */
 
+#sepiaFW-chat-controls-speech-box > div {
+	background: #1F252A;
+	color: #fff;
+}
+
 .sepiaFW-menu {
 	background: #1F252A;
 	color: #fff;
diff --git a/www/css/sepiaFW-skin-uplink.css b/www/css/sepiaFW-skin-uplink.css
@@ -51,6 +51,11 @@ html {
 	/*border-color: rgba(255, 255, 255, 0.67);*/
 }
 
+#sepiaFW-chat-controls-speech-box > div {
+	background: #283059;
+	color: #1BFFE6;
+}
+
 .sepiaFW-menu {
 	/*background: rgba(206, 255, 26, 0.95);*/
 	background: #283059;
diff --git a/www/css/sepiaFW-style.css b/www/css/sepiaFW-style.css
@@ -1361,7 +1361,7 @@ body {
 #sepiaFW-chat-controls-speech-box {
     display: flex;
 	position: absolute;
-	background: rgba(155, 155, 155, 0.50);
+	background: rgba(189, 189, 189, 0.66);
 	border-radius: 3px;
 	bottom: 57px;
 	z-index: 6;
diff --git a/www/scripts/sepiaFW.local.js b/www/scripts/sepiaFW.local.js
@@ -22,6 +22,7 @@ function sepiaFW_build_strings(){
 	StringsDE.addresses = 'Adressen';
 	StringsDE.logout = 'Logout';
 	StringsDE.closeLogin = 'Weiter ohne Login';
+	StringsDE.info_and_help = 'Infos und Support';
 	//StringsDE.chatInputPlaceholder = 'Deine Nachricht ...';
 	StringsDE.chatInputPlaceholder = '';
 	StringsDE.loginFailedPlain = 'Login fehlgeschlagen!';
@@ -112,6 +113,7 @@ function sepiaFW_build_strings(){
 	StringsEN.addresses = 'Addresses';
 	StringsEN.logout = 'Logout';
 	StringsEN.closeLogin = 'Continue without login';
+	StringsEN.info_and_help = 'Info and support';
 	//StringsEN.chatInputPlaceholder = 'Your message ...';
 	StringsEN.chatInputPlaceholder = '';
 	StringsEN.loginFailedPlain = 'Login failed!';
diff --git a/www/scripts/sepiaFW.ui.build.js b/www/scripts/sepiaFW.ui.build.js
@@ -428,6 +428,7 @@ function sepiaFW_build_ui_build(){
 					+ "<li class='button' id='sepiaFW-menu-btn-account'><span>" + SepiaFW.local.g('account') + "</span><i class='material-icons md-mnu'>&#xE038;</i></li>"
 					+ "<li class='button' id='sepiaFW-menu-btn-addresses'><span>" + SepiaFW.local.g('addresses') + "</span><i class='material-icons md-mnu'>&#xE038;</i></li>"
 					+ "<li class='button' id='sepiaFW-menu-btn-tutorial'><span>" + SepiaFW.local.g('tutorial') + "</span><i class='material-icons md-mnu'>school</i></li>"
+					+ "<li class='button' id='sepiaFW-menu-btn-info'><span>" + SepiaFW.local.g('info_and_help') + "</span><i class='material-icons md-mnu'>help_outline</i></li>"
 					+ "<li class='button' id='sepiaFW-menu-btn-logout'><span>" + SepiaFW.local.g('sign_out') + "</span><i class='material-icons md-mnu'>person_outline</i></li>"
 				+ "</ul>";
 			centerCarouselPane.appendChild(centerPage1);
@@ -540,6 +541,11 @@ function sepiaFW_build_ui_build(){
 			logoutBtn.addEventListener("click", function(){
 				SepiaFW.account.logoutAction();
 			});
+			//Help button
+			var helpBtn = document.getElementById("sepiaFW-menu-btn-info");
+			helpBtn.addEventListener("click", function(){
+				SepiaFW.ui.actions.openUrlAutoTarget("https://github.com/SEPIA-Framework/sepia-docs", true);
+			});
 			//Tutorial button
 			var tutorialBtn = document.getElementById("sepiaFW-menu-btn-tutorial");
 			tutorialBtn.addEventListener("click", function(){
diff --git a/www/tutorial.html b/www/tutorial.html
@@ -107,7 +107,7 @@ <h3>Tutorial - Page 5 of 5</h3>
 				<span style="border:1px solid; padding:4px;">Settings menu &#8594; Page 2 &#8594; Hostname</span>
 			</p>
 			<p>
-			If you want to learn how to install <b>your own, private, local S.E.P.I.A. server</b> please visit the <a href="https://github.com/SEPIA-Framework/sepia-installation-and-setup" target="_blank">online help</a>.
+			If you have any questions or want to learn how to install <b>your own, private, local S.E.P.I.A. server</b> please visit the <a href="https://github.com/SEPIA-Framework/sepia-docs" target="_blank">online help</a>.
 			</p>
 		</div>
 	</div>

Original file line number	Diff line number	Diff line change
`@@ -96,8 +96,13 @@ html {`
`96`	`96`	`border-radius: 3px;`
`97`	`97`	`}`
`98`	`98`
	`99`	`+#sepiaFW-chat-controls-speech-box {`
	`100`	`+ background: rgba(24, 40, 58, 0.92);`
	`101`	`+ border: 1px solid #15abc3;`
	`102`	`+ box-shadow: 0 0 5px #15abc3;`
	`103`	`+}`
`99`	`104`	`#sepiaFW-chat-controls-speech-box > div {`
`100`		`- background: rgba(19, 38, 58, 0.92);`
	`105`	`+ background: transparent;`
`101`	`106`	`color: #fff;`
`102`	`107`	`}`
`103`	`108`
Original file line number	Diff line number	Diff line change
`@@ -99,7 +99,7 @@ html {`
`99`	`99`	`*/`
`100`	`100`
`101`	`101`	`#sepiaFW-chat-controls-speech-box > div {`
`102`		`- background: #08a0c8;`
	`102`	`+ background: #101418;`
`103`	`103`	`color: #fff;`
`104`	`104`	`}`
`105`	`105`
Original file line number	Diff line number	Diff line change
`@@ -67,7 +67,7 @@ html {`
`67`	`67`	`}`
`68`	`68`
`69`	`69`	`#sepiaFW-chat-controls-speech-box > div {`
`70`		`- background: #16abc3;`
	`70`	`+ background: #000;`
`71`	`71`	`color: #fff;`
`72`	`72`	`}`
`73`	`73`