Merge branch 'feature/introjs' into dev

llaske · Jul 7, 2022 · 8e58af6 · 8e58af6
2 parents 6472f41 + 3a14645
commit 8e58af6
Show file tree

Hide file tree

Showing 9 changed files with 252 additions and 345 deletions.
diff --git a/css/bootstrap-tour-standalone.min.css b/css/bootstrap-tour-standalone.min.css
diff --git a/css/introjs.css b/css/introjs.css
diff --git a/css/styles.css b/css/styles.css
@@ -1992,118 +1992,121 @@ body {
 	margin-right: auto;
 }
 
-.tutorial-title {
-	background-color: #808080 !important;
-	color: #ffffff !important;
-}
-
-.tutorial-prev-icon {
-	display: inline-flex;
-	width: 90px;
+.introjs-overlay {
+	background-color: #000 !important;
+	opacity: .8 !important;
 }
 
-.tutorial-prev-icon.icon-button {
+.introjs-tooltip {
 	color: white;
+	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif!important;
+	border-radius: 6px !important;
+	padding: 2px 1px !important;
+	font-size: 14px !important;
 }
-
-.tutorial-prev-icon.icon-button.disabled {
+.introjs-helperLayer{
 	color: black;
+	background: inherit !important;
+	opacity: 0.6 !important;
 }
 
-.tutorial-prev-icon1 {
-	margin-left: 6px;
-	margin-top: 6px;
-}
-
-.tutorial-prev-icon2 {
-	background-image: url(../icons/go-left.svg);
-	width: 20px;
-	height: 20px;
-	background-size: 20px 20px;
-}
-
-.tutorial-prev-icon3 {
-	display: none;
-	width: 20px;
-	height: 20px;
-	background-size: 20px 20px;
-	background-color: white;
-	margin-top: -20px;
+.customTooltip .introjs-tooltip-header {
+	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+	color : #ffffff;
+	text-shadow: none;
+	background-color: #808080;
+	margin: 0;
+	padding: 0px 10px;
+	border-bottom: 1px solid #ebebeb;
+	border-radius: 5px 5px 0 0;
 }
 
-.tutorial-next-icon {
-	display: inline-flex;
-	width: 90px;
+.customTooltip .introjs-tooltip-title {
+	font-size: 14px;
+	padding: 0px 8px;
+	font-weight: 800;
 }
 
-.tutorial-next-icon.icon-button {
-	color: white;
+.customTooltip .introjs-tooltiptext {
+	color: #000000;
+	line-height: 1.42857143;
+	display: flex;
 }
 
-.tutorial-next-icon.icon-button.disabled {
-	color: black;
-}
-
-.tutorial-next-icon1 {
-	margin-left: 6px;
-	margin-top: 6px;
+.customTooltip .introjs-skipbutton {
+	float: right;
+	cursor: pointer;
+	background-image: url(../icons/dialog-cancel.svg);
+	width: 25px;
+	height: 25px;
+	background-size: 25px 25px;
+	margin-top: 2px;
+	padding: 0px;
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
 }
 
-.tutorial-next-icon2 {
+.customTooltip .introjs-nextbutton::before {
+	content: "";
+	margin-right: 6px;
 	background-image: url(../icons/go-right.svg);
 	width: 20px;
 	height: 20px;
 	background-size: 20px 20px;
 }
 
-.tutorial-next-icon3 {
-	display: none;
+.customTooltip .introjs-prevbutton::before {
+	content: "";
+	margin-right: 6px;
+	background-image: url(../icons/go-left.svg);
 	width: 20px;
 	height: 20px;
 	background-size: 20px 20px;
-	background-color: white;
-	margin-top: -20px;
-}
-
-.tutorial-end-icon {
-	display: inline-flex;
-	width: 90px;
 }
 
-.tutorial-end-icon.icon-button {
-	color: white;
-}
-
-.tutorial-end-icon.icon-button.disabled {
-	color: black;
+.customTooltip .introjs-tooltipbuttons {
+	display: flex;
+	flex-wrap:wrap;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+	border-top: 0px;
+	padding: 0px;
+	text-align: center;
+	white-space: normal;
 }
 
-.tutorial-end-icon1 {
-	margin-left: 6px;
-	margin-top: 6px;
+.customTooltip .introjs-button {
+	text-shadow: none;
+	border-radius: 22px;
+	margin: 5px 8px 8px 8px;
+	width: fit-content;
+	background-color: #808080 !important;
+	display: flex !important;
+	align-items: center !important;
+	color: white !important;
+	padding: 6px 20px 6px 10px;
+	border: 0px;
 }
 
-.tutorial-end-icon2 {
-	background-image: url(../icons/dialog-cancel.svg);
-	width: 20px;
-	height: 20px;
-	background-size: 20px 20px;
+.customTooltip .introjs-button:focus {
+	-webkit-box-shadow: 0 0 0 0rem rgba(158, 158, 158, .5);
+	box-shadow: 0 0 0 0rem rgba(158, 158, 158, .5);
+	border: 0px;
+	background-color: #808080 !important;
 }
 
-.tutorial-end-icon3 {
-	display: none;
-	width: 20px;
-	height: 20px;
-	background-size: 20px 20px;
-	background-color: white;
-	margin-top: -20px;
+.customTooltip .introjs-disabled {
+	color: black !important;
+	border: 0px;
+	opacity: .65;
 }
 
-.icon-tutorial-text {
-	margin-top: 7px;
-	padding-left: 38px;
-	padding-right: 38px;
-	display: inline-block;
+.customTooltip .introjs-disabled:focus {
+	-webkit-box-shadow: 0 0 0 0rem rgba(158, 158, 158, .5);
+	box-shadow: 0 0 0 0rem rgba(158, 158, 158, .5);
+	border: 0px;
 }
 
 /* Handle small screen resolution */

diff --git a/index.html b/index.html
@@ -15,11 +15,10 @@
 	href="lib/sugar-web/graphics/css/sugar-200dpi.css">
     <link rel="stylesheet" href="css/activity.css">
     <link rel="stylesheet" href="css/libnotify.css">
-    <link rel="stylesheet" href="css/bootstrap-tour-standalone.min.css">
+    <link rel="stylesheet" href="css/introjs.css">
 	<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
 	<script type="text/javascript" src="js/init.js"></script>
-    <script src="lib/jquery.min.js"></script>
-    <script src="lib/bootstrap-tour-standalone.min.js"></script>
+    <script src="lib/intro.js"></script>
 	<script src="lib/axios.min.js"></script>
     <script data-main="js/loader" src="lib/require.js"></script>
 

diff --git a/js/homeview.js b/js/homeview.js
@@ -355,6 +355,9 @@ enyo.kind({
 		if (this.noresize) {
 			return;
 		}
+		if (tutorial.isLaunched()) {
+			tutorial.stop();
+		}
 		this.redraw();
 	},
 

diff --git a/lib/bootstrap-tour-standalone.min.js b/lib/bootstrap-tour-standalone.min.js
diff --git a/lib/intro.js b/lib/intro.js
diff --git a/lib/jquery.min.js b/lib/jquery.min.js