SAK-29166: tutorial re-styling, re-wording, and re-configuration for …

…Morpheus to fix visual changes and new feature positions

help/help-component/src/bundle/TutorialMessages.properties

@@ -10,75 +10,68 @@
 #  		{prefix}.body=(body) 
 #
 
-#Generic Text:
+#Button Navigation text:
 next=Next
-previous=Previous
+previous=Back
 
 
 
-#Welcome Page
-introToSakai_p1.title=Welcome
-introToSakai_p1.body=This very brief tutorial presents basic information about the features and layout of Sakai.   It will run once when you first log into Sakai.  You can access this tutorial again by clicking on "Tutorial" under your login name in the upper right corner.   Detailed information about each feature can be accessed by clicking on the <img src='/library/image/silk/help.png'/> icon found throughout Sakai.\
-<br/><br/>\
-Sakai is a very flexible framework for organizing sites that represent courses or projects.  Sites contain tools or specific features that site managers have selected.\
+#Welcome panel
+introToSakai_p1.title=Welcome to {0}
+introToSakai_p1.body={0} is a flexible learning management system for hosting sites that support learning, teaching, research, and collaboration.\
  <br/><br/>\
-Click on "Next" below to continue through this brief introduction to Sakai.
+Let&#39;s introduce you to the basics of navigating the system.
 
-#Site Navigation Page
+#Site Navigation panel
 introToSakai_sitenav.title=Site Navigation
-introToSakai_sitenav.body=All sites in which you have any involvement are displayed as tabs starting with My Workspace on the left, a special site that is private to you.    Each time you log into Sakai, you will start on the Home page of your My Workspace site.\
-<br/><br/>\
-My Workspace usually contains several tools displayed in blocks on the home page that summarize activities in all of the courses in which you are a member.\
+introToSakai_sitenav.body=Your sites are displayed as links across the top, starting with your own private My Workspace <span class="no-wrap">( <i class="fa fa-home tut-icon-home"></i> ).</span>\
 <br/><br/>\
-If you are a member of any other sites (courses, projects, etc.), these tabs will be listed across the top as well.   You can control how many tabs appear in this display.  If there are many sites, some may be listed under "More Sites" in a drop down list.\
- <br/><br/>\
-You can also click on a tab to go directly to the home page of that site.  Click on the down arrow to the right of each tab to display a list of tools in the site and navigate directly to that tool within that site.\
- <br/><br/>\
-Click on "Next" to continue.
+My Workspace gives you an overview of the activity in your sites and allows you to personalize your {0} experience.
 
-#More Sites Dropdown Page
-introToSakai_moreButton.title=More Sites
-introToSakai_moreButton.body=Click on the 'More Sites' tab to display a list of all sites you have access to.\
- <br/><br/>\
-Click on "Next" to continue.
+#Sites panel (narrow view only)
+introToSakai_allsites.title=Sites
+introToSakai_allsites.body=The <span class="no-wrap"><i class="fa fa-th tut-icon-sites"></i> Sites</span> button opens your sites drawer, which displays links to all of your visible sites organized by term or category.\
+<br/><br/>\
+From the sites drawer, you can star your most-used sites and access your own private site called My Workspace.
 
-#Tool Menu Page
-introToSakai_toolMenu.title=Tool Menu
-introToSakai_toolMenu.body=The left-hand navigation menu lists all the tools that you can access in the site you have selected.   The Home page is usually the top-most tool.   Clicking on Home will take you back to the starting or home page of that site.  Each tool serves a different function. You can mouse over a tool name to reveal a short description of the tool.\
- <br/><br/><br/>\
-If you are the site owner (usually the instructor), you may be able to add or remove tools from the tool menu or change the order of tools in the menu by clicking on the Site Info tool.\
-<br/><br/><br/>\
-Click on "Next" to continue.
+#Sites panel
+introToSakai_moreButton.title=Sites
+introToSakai_moreButton.body=The <span class="no-wrap"><i class="fa fa-th tut-icon-sites"></i> Sites</span> button opens your sites drawer, which displays links to all of your visible sites.\
+<br /><br />\
+In the sites drawer, sites are organized by term or category, and can be pinned to the top navigation. 
 
-#Toggle Menu page
-introToSakai_toggleMenu.title=Toggle Menu
-introToSakai_toggleMenu.body=Clicking on this icon will retract the left-hand menu to provide more space on the screen for the content presented in the site.   Clicking on the icon a second time will restore the menu.\
+#Tool Menu panel
+introToSakai_toolMenu.title=Tools Menu
+introToSakai_toolMenu.body=Tools for the current site appear in the left menu. Each tool serves a different function, such as delivering content, providing assessments, or facilitating collaboration.\
 <br/><br/>\
-Click on "Next" to continue.
+Each site maintainer, such as the instructor, controls which tools appear in the site and how they appear.
 
-#Refresh Tool page
-introToSakai_refreshTool.title=Refresh Tool
-introToSakai_refreshTool.body=Clicking on this icon will reset the current tool.  You will be returned to the landing page of the tool.  Content which you may be entering into the page will be discarded if you reset the tool.\
- <br/><br/>\
-Click on "Next" to continue.
+#Tool Menu panel (for narrow view)
+introToSakai_toolMenuNarrowView.title=Tools Menu
+introToSakai_toolMenuNarrowView.body=Tools for the current site appear in the Tools menu. Each tool serves a different function, such as delivering content, providing assessments, or facilitating collaboration.\
+<br/><br/>\
+Each site maintainer, such as the instructor, controls which tools appear in the site and how they appear.
 
-#Help Icon Page
-introToSakai_helpIcon.title=Help Tool
-introToSakai_helpIcon.body=Detailed information about each feature can be accessed by clicking on the <img src='/library/image/silk/help.png'/> icon found throughout Sakai.  This tool is context sensitive and will give you instructions based on the tool you are currently viewing.  You can also search for additional tools and help pages.\
- <br/><br/>\
-Click on "Next" to continue.
+#Breadcrumbs panal
+#formerly the Refresh Tool panel
+introToSakai_refreshTool.title=Breadcrumbs
+introToSakai_refreshTool.body=The breadcrumbs across the top indicate which site you are in and which tool you are using.\
+<br /><br />\
+Click or tap the tool name to return to the main page of that tool. To return to the site&#39;s home page, click or tap the site name.
 
-#Profile Tool Page
-introToSakai_profileTool.title=Profile tool
-introToSakai_profileTool.body=The Profile tool can be accessed here and in the left-hand menu of My Workspace.   In the Profile tool, you can enter personal information, control the privacy settings over that information, find and connect with others in your Sakai instance and integrate with social media.\
- <br/><br/>\
-Click on "Next" to continue.
+#Help Icon panel
+introToSakai_helpIcon.title=Help
+introToSakai_helpIcon.body={0} provides help information about each feature.\
+<br /><br />\
+Each tool&#39;s Help button <span class="no-wrap">( <i class="fa fa-question tut-icon-help"></i> )</span> is context-sensitive and provides information specific to that tool.
 
-#Logout Page
-introToSakai_logout.title=Logout
-introToSakai_logout.body=When you are finished, click here to log out.
+#Account Menu panel
+#formerly the Profile Tool panel
+introToSakai_profileTool.title=Account Menu
+introToSakai_profileTool.body=The Account Menu contains quick links to personal tasks, such as managing your account, creating new sites, and logging out of {0}.\
+<br/><br/>\
+That&#39;s it! If you&#39;d like to review this tutorial, you can restart it by choosing it from the Account Menu.
 
-#Return to Tutorial Page
+#Return to Tutorial panel
 introToSakai_pTutorialLocation.title=Tutorial
-introToSakai_pTutorialLocation.body=You can go back to this tutorial by clicking the tutorial link in this dropdown. 
-
+introToSakai_pTutorialLocation.body=You can restart this tutorial by choosing it from the Account Menu. 

help/help-component/src/java/org/sakaiproject/component/app/help/TutorialEntityProviderImpl.java

@@ -11,6 +11,7 @@
 import org.apache.commons.logging.Log;
 import org.apache.commons.logging.LogFactory;
 import org.sakaiproject.api.app.help.TutorialEntityProvider;
+import org.sakaiproject.component.cover.ServerConfigurationService;
 import org.sakaiproject.entitybroker.EntityReference;
 import org.sakaiproject.entitybroker.entityprovider.capabilities.AutoRegisterEntityProvider;
 import org.sakaiproject.entitybroker.entityprovider.capabilities.RESTful;
@@ -72,26 +73,30 @@ public Object getEntity(EntityReference ref) {
 		}
 		String previousUrl = tutorialProps.getString(ref.getId() + ".previousUrl");
 		String nextUrl = tutorialProps.getString(ref.getId() + ".nextUrl");
+                String sakaiInstanceName = ServerConfigurationService.getString("ui.service", "Sakai");
+
 		Map valuesMap = new HashMap<String, String>();
 		valuesMap.put("selection", tutorialProps.getString(ref.getId() + ".selection"));
-		valuesMap.put("title", msgs.get(ref.getId() + ".title"));
+		valuesMap.put("title", msgs.getFormattedMessage(ref.getId() + ".title", sakaiInstanceName));
 		valuesMap.put("dialog", tutorialProps.getString(ref.getId() + ".dialog"));
 		valuesMap.put("positionTooltip", tutorialProps.getString(ref.getId() + ".positionTooltip"));
 		valuesMap.put("positionTarget", tutorialProps.getString(ref.getId() + ".positionTarget"));
 		valuesMap.put("fadeout", tutorialProps.getString(ref.getId() + ".fadeout"));
 		valuesMap.put("previousUrl", previousUrl);
 		valuesMap.put("nextUrl", nextUrl);
-		
+                	
 		//build the body html:
-		String body = msgs.getString(ref.getId() + ".body");
+		//String body = msgs.getString(ref.getId() + ".body");
+
+                String body = msgs.getFormattedMessage(ref.getId() + ".body", sakaiInstanceName);
 
 		//build footer html:
-		String footerHtml = "<br/><br/><div style='min-width: 120px; background: #ddd;'>";
+		String footerHtml = "<div class='tut-footer'>";
 		if(previousUrl != null && !"".equals(previousUrl)){
-			footerHtml += "<div style='float:left'><a href='#' class='qtipLinkButton' onclick='previousClicked=true;showTutorialPage(\"" + previousUrl + "\");'><img src='/library/image/silk/arrow_left-grey.png'>&nbsp;" + msgs.getString("previous") + "</a></div>";
+			footerHtml += "<div class='tut-previous'><a href='#' class='qtipLinkButton' onclick='previousClicked=true;showTutorialPage(\"" + previousUrl + "\");'><i class='fa fa-arrow-left'></i>&nbsp;" + msgs.getString("previous") + "</a></div>";
 		}
 		if(nextUrl != null && !"".equals(nextUrl)){
-			footerHtml += "<div style='float:right'><a href='#' class='qtipLinkButton' onclick='showTutorialPage(\"" + nextUrl + "\");'>" + msgs.getString("next") + "&nbsp;<img src='/library/image/silk/arrow_right-grey.png'></a></div>";
+			footerHtml += "<div class='tut-next'><a href='#' class='qtipLinkButton' onclick='showTutorialPage(\"" + nextUrl + "\");'>" + msgs.getString("next") + "&nbsp;<i class='fa fa-arrow-right'></i></a></div>";
 		}
 		footerHtml += "</div>";
 		body += footerHtml;

help/help-component/src/tutorial/Tutorial.config

@@ -7,108 +7,110 @@
 #		The only properties you should translate are the ones that are in TutorialMessages.properties.  Leave the rest of the properties alone.
 #                                                                                                       ---------------------------------------
 #
-#  For people creating new pages:
+#  For people creating new panels:
 #  
-#  		You can create new pages simply by adding a new set of properties.  For instance, to add a page, define a set of properties like:
+#  		You can create new panels simply by adding a new set of properties.  For instance, to add a panel, define a set of properties like:
 #
-#  		{prefix}.selection=(either a jquery selection query or leave it blank if this is a dialog and isn't pointing to a specific part in the page)
-#  		{prefix}.previousUrl=({prefix} of the previous page or leave blank if there isn't one)
-#  		{prefix}.nextUrl=({prefix} of the next page or leave blank if there isn't one)
+#  		{prefix}.selection=(either a jquery selection query or leave it blank if this is a dialog and isn't pointing to a specific part in the panel)
+#  		{prefix}.previousUrl=({prefix} of the previous panel or leave blank if there isn't one)
+#  		{prefix}.nextUrl=({prefix} of the next panel or leave blank if there isn't one)
 #  		{prefix}.dialog=(true or blank if it isn't a dialog)
 #  		{prefix}.positionTarget=(area of the target you want the tool tip to point to.  eg. bottomRight, rightMiddle, etc.  http://craigsworks.com/projects/qtip/docs/tutorials/#position)
 #  		{prefix}.positionTooltip=(area of the target you want to tip of the dialog to show up. eg. bottomRight, rightMiddle, etc http://craigsworks.com/projects/qtip/docs/tutorials/#position)
 #  		{prefix}.fadeout=(true if you want the dialog to fadeout otherwise blank)
 #
-#		When you have added the page's properties to this properties file, then you can add the .title and .body properties in TutorialMessages.properties
+#		When you have added the panel's properties to this properties file, then you can add the .title and .body properties in TutorialMessages.properties
 #
 #
 
 
-#Welcome Page
+#Welcome panel
 introToSakai_p1.selection=
 introToSakai_p1.previousUrl=
 introToSakai_p1.nextUrl=/direct/tutorial/introToSakai_sitenav.json
 introToSakai_p1.dialog=true
 introToSakai_p1.positionTarget=
 introToSakai_p1.fadeout=
 
-#Site Navigation Page
-introToSakai_sitenav.selection=ul#topnav li:first
+#Site Navigation panel
+introToSakai_sitenav.selection=#linkNav:visible ul#topnav li:first i
 introToSakai_sitenav.previousUrl=/direct/tutorial/introToSakai_p1.json
-introToSakai_sitenav.nextUrl=/direct/tutorial/introToSakai_moreButton.json
+introToSakai_sitenav.nextUrl=/direct/tutorial/introToSakai_allsites.json
 introToSakai_sitenav.dialog=
 introToSakai_sitenav.positionTooltip=topLeft
-introToSakai_sitenav.positionTarget=bottom right
+introToSakai_sitenav.positionTarget=bottomMiddle
 introToSakai_sitenav.fadeout=
 
-#More Sites Dropdown Page
-introToSakai_moreButton.selection=ul#topnav li.more-tab:visible
-introToSakai_moreButton.previousUrl=/direct/tutorial/introToSakai_sitenav.json
+#Sites panel (narrow view only)
+introToSakai_allsites.selection=.Mrphs-skipNav__menu:visible .Mrphs-skipNav__menuitem--worksite a
+introToSakai_allsites.previousUrl=/direct/tutorial/introToSakai_sitenav.json
+introToSakai_allsites.nextUrl=/direct/tutorial/introToSakai_moreButton.json
+introToSakai_allsites.dialog=
+introToSakai_allsites.positionTooltip=topRight
+introToSakai_allsites.positionTarget=bottomMiddle
+introToSakai_allsites.fadeout=
+
+#Sites panel
+introToSakai_moreButton.selection=.view-all-sites-btn:visible i
+introToSakai_moreButton.previousUrl=/direct/tutorial/introToSakai_allsites.json
 introToSakai_moreButton.nextUrl=/direct/tutorial/introToSakai_toolMenu.json
 introToSakai_moreButton.dialog=
-introToSakai_moreButton.positionTooltip=top right
-introToSakai_moreButton.positionTarget=bottom left
+introToSakai_moreButton.positionTooltip=topRight
+introToSakai_moreButton.positionTarget=bottomMiddle
 introToSakai_moreButton.fadeout=
 
-#Tool Menu Page
-introToSakai_toolMenu.selection=div#toolMenu ul:first
+#Tool Menu panel
+introToSakai_toolMenu.selection=#toolMenu ul:first:has(li.js-toggle-nav:visible)
 introToSakai_toolMenu.previousUrl=/direct/tutorial/introToSakai_moreButton.json
-introToSakai_toolMenu.nextUrl=/direct/tutorial/introToSakai_toggleMenu.json
+introToSakai_toolMenu.nextUrl=/direct/tutorial/introToSakai_toolMenuNarrowView.json
 introToSakai_toolMenu.dialog=
-introToSakai_toolMenu.positionTooltip=left center
-introToSakai_toolMenu.positionTarget=right center
+introToSakai_toolMenu.positionTooltip=leftMiddle
+introToSakai_toolMenu.positionTarget=rightMiddle
 introToSakai_toolMenu.fadeout=
 
-#Toggle Menu page
-introToSakai_toggleMenu.selection=#togglebar #toggleToolMax
-introToSakai_toggleMenu.previousUrl=/direct/tutorial/introToSakai_toolMenu.json
-introToSakai_toggleMenu.nextUrl=/direct/tutorial/introToSakai_refreshTool.json
-introToSakai_toggleMenu.dialog=
-introToSakai_toggleMenu.positionTooltip=top left
-introToSakai_toggleMenu.positionTarget=right bottom
-introToSakai_toggleMenu.fadeout=
+#Tool Menu panel (for narrow view)
+introToSakai_toolMenuNarrowView.selection=.Mrphs-skipNav__menu:visible .Mrphs-skipNav__menuitem--tools a
+introToSakai_toolMenuNarrowView.previousUrl=/direct/tutorial/introToSakai_toolMenu.json
+introToSakai_toolMenuNarrowView.nextUrl=/direct/tutorial/introToSakai_refreshTool.json
+introToSakai_toolMenuNarrowView.dialog=
+introToSakai_toolMenuNarrowView.positionTooltip=topLeft
+introToSakai_toolMenuNarrowView.positionTarget=bottomMiddle
+introToSakai_toolMenuNarrowView.fadeout=
 
-#Refresh Tool page
-introToSakai_refreshTool.selection=.portletTitle .title a:visible:first
-introToSakai_refreshTool.previousUrl=/direct/tutorial/introToSakai_toggleMenu.json
+#Breadcrumbs panel
+#formerly the Refresh Tool panel
+introToSakai_refreshTool.selection=.Mrphs-hierarchy--toolName
+introToSakai_refreshTool.previousUrl=/direct/tutorial/introToSakai_toolMenuNarrowView.json
 introToSakai_refreshTool.nextUrl=/direct/tutorial/introToSakai_helpIcon.json
 introToSakai_refreshTool.dialog=
-introToSakai_refreshTool.positionTooltip=top left
-introToSakai_refreshTool.positionTarget=right bottom
+introToSakai_refreshTool.positionTooltip=topMiddle
+introToSakai_refreshTool.positionTarget=bottomMiddle
 introToSakai_refreshTool.fadeout=
 
-#Help Icon Page
-introToSakai_helpIcon.selection=.portletTitle .action a:visible:first
+#Help Icon panel
+introToSakai_helpIcon.selection=.Mrphs-toolTitleNav__link--help-popup
 introToSakai_helpIcon.previousUrl=/direct/tutorial/introToSakai_refreshTool.json
 introToSakai_helpIcon.nextUrl=/direct/tutorial/introToSakai_profileTool.json
 introToSakai_helpIcon.dialog=
-introToSakai_helpIcon.positionTooltip=top right
-introToSakai_helpIcon.positionTarget=bottom left
+introToSakai_helpIcon.positionTooltip=topRight
+introToSakai_helpIcon.positionTarget=bottomMiddle
 introToSakai_helpIcon.fadeout=
 
-#Profile Tool Page
-introToSakai_profileTool.selection=#mastLogin span.drop
+#Account Tool panel
+#formerly the Profile Tool panel
+introToSakai_profileTool.selection=#loginLinks
 introToSakai_profileTool.previousUrl=/direct/tutorial/introToSakai_helpIcon.json
-introToSakai_profileTool.nextUrl=/direct/tutorial/introToSakai_logout.json
+introToSakai_profileTool.nextUrl=
 introToSakai_profileTool.dialog=
-introToSakai_profileTool.positionTooltip=top right
-introToSakai_profileTool.positionTarget=bottom left
+introToSakai_profileTool.positionTooltip=topRight
+introToSakai_profileTool.positionTarget=bottomMiddle
 introToSakai_profileTool.fadeout=
 
-#Logout Page
-introToSakai_logout.selection=a#loginLink1
-introToSakai_logout.previousUrl=/direct/tutorial/introToSakai_profileTool.json
-introToSakai_logout.nextUrl=
-introToSakai_logout.dialog=
-introToSakai_logout.positionTooltip=top right
-introToSakai_logout.positionTarget=bottom left
-introToSakai_logout.fadeout=
-
-#Return to Tutorial Page
-introToSakai_pTutorialLocation.selection=#mastLogin span.drop
+#Return to Tutorial panel
+introToSakai_pTutorialLocation.selection=#mastLogin span.Mrphs-userNav__drop
 introToSakai_pTutorialLocation.previousUrl=
 introToSakai_pTutorialLocation.nextUrl=
 introToSakai_pTutorialLocation.dialog=
-introToSakai_pTutorialLocation.positionTooltip=top right
-introToSakai_pTutorialLocation.positionTarget=bottom left
+introToSakai_pTutorialLocation.positionTooltip=topRight
+introToSakai_pTutorialLocation.positionTarget=center
 introToSakai_pTutorialLocation.fadeout=true

help/help-component/src/webapp/WEB-INF/components.xml

@@ -131,5 +131,5 @@
 	</bean>
 	<bean id="org.sakaiproject.api.app.help.TutorialEntityProvider"
             class="org.sakaiproject.component.app.help.TutorialEntityProviderImpl">
-    </bean>
+        </bean>
 </beans>

reference/library/src/morpheus-master/sass/_defaults.scss

@@ -43,6 +43,7 @@ $toolBorderColor:			 #E0E0E0 !default;
 
 $primary-color:    			 #2a94c0 !default;
 $secondary-color:  			 #F00 !default;
+$alt-colour: 				 #d36f00 !default;
 
 $text-color:				 #212121 !default;