From 9e36ca899f566f897a0d0d0e9707c93828d258fd Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 26 Apr 2016 17:55:54 -0700 Subject: [PATCH 1/2] [Config] New tour content open #858 - New tour content - Using target as CSS selection strings instead of document.querySelector(). This is important to allow tour to work as user clicks and mods the DOM --- demo/src/DemoInitializer.js | 160 +++++++++++++++++++++++++++--------- 1 file changed, 122 insertions(+), 38 deletions(-) diff --git a/demo/src/DemoInitializer.js b/demo/src/DemoInitializer.js index 994086efae..39cffcda9a 100644 --- a/demo/src/DemoInitializer.js +++ b/demo/src/DemoInitializer.js @@ -26,23 +26,23 @@ define( "../lib/hopscotch/hopscotch.min", "zepto" ], - function (ConductorRepresenter, hopscotch, $){ + function (ConductorRepresenter, hopscotch, $) { "use strict"; function DemoInitializer($timeout, representers, objectService, $location) { function indexOf(array, callback) { - return array.reduce(function(previous, element, index) { - if (previous=== -1 && callback(element)) { - return index; - } else { - return previous; - } + return array.reduce(function (previous, element, index) { + if (previous === -1 && callback(element)) { + return index; + } else { + return previous; + } }, -1); } - function removeRepresenter(type){ - var index = indexOf(representers, function(representer) { + function removeRepresenter(type) { + var index = indexOf(representers, function (representer) { return representer.implementation === type; }); if (index !== -1) { @@ -63,56 +63,140 @@ define( "b171cc31-2cc5-4ae9-ba40-baf1163f22c4" ]; }) - }).then(function() { + }).then(function () { //For default route, redirect user to layout if ($location.path().length == 0 || $location.path() === "/") { $location.url("/browse/mct:demo/88a26104-8bd5-445d-8b57-10b567d2823d"); } }); - $timeout(function() { + $timeout(function () { var tour = { id: "hello-hopscotch", steps: [ { - title: "The Object Tree", - content: "The object tree contains telemetry and" + - " view objects", - target: document.querySelector("mct-tree ul.tree"), + title: "Welcome to Open MCT", + content: "This brief tour will introduce you to the main elements and concepts of the application. To cancel at any time, click the 'X' in the top right of this box, or click 'Next' to continue.", + target: ".user-environ", + placement: "top", + xOffset: "center", + yOffset: "center", + arrowOffset: "100000px" + }, + { + title: "Object Tree", + content: "This contains all the objects you have access to, both telemetry objects and user-created objects. ", + target: "mct-tree ul.tree", placement: "right" }, { - title: "Viewing objects", - content: "Objects selected in the tree" + - " are shown in the view", - target: document.querySelector(".object-holder-main"), - placement: "left", - xOffset: "200px;" + title: "View Area", + content: "This area shows the contents of a selected item. Different types of items provide different views of their contents.", + target: ".object-holder-main", + placement: "top", + xOffset: "center", + yOffset: "200px", + arrowOffset: "center" }, { - title: "Creating objects", - content: "New objects can be created under" + - " the My Items folder using the " + - " Create button", - target: document.querySelector(".create-btn"), + title: "Create Button", + content: "Many objects in the application are created via this button. Click it to view the Create menu, and rollover each item in the menu to see more information about it. Click 'Next' when ready to continue.", + target: ".create-btn", + placement: "right", + width: "700px", + yOffset: "-10px" + }, + { + title: "Search", + content: "Search filters items in the Object Tree by their name. You can also filter by object type by clicking the 'down' arrow in the right side of the input.", + target: ".search-bar", + placement: "right", + yOffset: "-20px" + }, + { + title: "Inspection Pane", + content: "This pane shows useful information about the currently selected item. You can hide this pane by clicking its 'X' icon to the right.", + target: ".split-pane-component.t-inspect", + placement: "left" + }, + { + title: "Editing", + content: "This part of the tour will step you through editing an object. Anything you change won’t be persisted, so don’t refresh your browser. Click 'Next' to continue.", + target: ".user-environ", + placement: "top", + xOffset: "center", + yOffset: "center", + arrowOffset: "100000px" + }, + { + title: "Select Object to Edit", + content: "Expand the 'Examples' folder and click on the 'Layout Edit Example' object.", + target: "mct-tree ul.tree", + placement: "right", + yOffset: "20px" + }, + { + title: "Edit Button", + content: "Click this button now to begin editing the current object, then click 'Next' to continue.", + target: ".object-browse-bar .btn-bar", + placement: "bottom", + width: "200px", + xOffset: "-20px" + }, + { + title: "Editing", + content: "Each type of object can be edited in different ways. This Display Layout allows you to add, position, size and remove many different types of objects. ", + target: ".user-environ", + placement: "top", + xOffset: "center", + yOffset: "center", + arrowOffset: "100000px" + }, + { + title: "Adding an Object", + content: "Let’s add a telemetry element into our layout. Expand 'Mars Science Laboratory', then its folder 'rems', then drag 'Max Air Temperature' into the empty spot in the layout area. Click 'Next' to continue.", + target: "mct-tree ul.tree", + placement: "right" + }, + { + title: "Positioning and Resizing", + content: "Any object in a layout can be positioned and resized. Mouse over the object, and grab a corner and drag it to make it fit in the empty spot. When you’re done, click 'Next' to continue.", + target: ".user-environ", + placement: "left", + xOffset: "center", + yOffset: "200px" + }, + { + title: "Elements Pool", + content: "This area lists all objects in the current object. To remove an object, right-click it and choose 'Remove' from the context menu.", + target: ".holder-elements", + placement: "left" + }, + { + title: "Saving", + content: "When you are done editing, click 'Save' to save and exit editing. To exit without saving any changes, click the 'X' button.", + target: ".t-save", + width: "200px", placement: "bottom" }, - /* { - title: "Composing objects", - content: "Objects can be composed by dragging" + - " them from the tree...", - target: document.querySelector("mct-tree" + - " ul.tree"), - placement: "right" + title: "Object Types", + content: "Try experimenting creating different object types, and adding other objects to them by dragging them from the tree. Only certain types of objects can be dragged into a given object type - if a type of object can’t be added, it simply won’t. ", + target: ".user-environ", + placement: "top", + xOffset: "center", + yOffset: "center", + arrowOffset: "100000px" }, { - title: "Composing objects (cont.)", - content: "...into the current view", - target: document.querySelector(".object-holder-main"), + title: "Thank You", + content: "That’s the end of the tour. Thanks for your time, and we hope you enjoy using and contributing to Open MCT!", + target: ".user-environ", placement: "top", - yOffset: "100px;" - }*/ + xOffset: "center", + yOffset: "center", + arrowOffset: "100000px" + } ] }; hopscotch.endTour(true); From 4e3edb85b31cfc4f32ed8b858f5d4d0df04b829b Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 26 Apr 2016 21:18:21 -0700 Subject: [PATCH 2/2] [Config] Finessed content, bubble styling open #858 - That's all for now folks. --- demo/res/css/hopscotch.css | 14 ++++++++------ demo/src/DemoInitializer.js | 25 +++++++++++++------------ 2 files changed, 21 insertions(+), 18 deletions(-) diff --git a/demo/res/css/hopscotch.css b/demo/res/css/hopscotch.css index bf8e6971c5..47e9ae006d 100755 --- a/demo/res/css/hopscotch.css +++ b/demo/res/css/hopscotch.css @@ -322,11 +322,12 @@ div.hopscotch-bubble .hopscotch-nav-button.prev:hover { div.hopscotch-bubble { background-color: #ffffff; border: 5px solid #000000; + border-radius: 10px; /* default */ - border: 5px solid rgba(0, 0, 0, 0.5); + border: 5px solid rgba(0, 0, 0, 0.3); /* transparent, if supported */ color: #333; - font-family: Helvetica, Arial; + font-family: 'Helvetica Neue', Helvetica, Arial; font-size: 13px; position: absolute; z-index: 999999; @@ -387,14 +388,14 @@ div.hopscotch-bubble .hopscotch-bubble-container { /* to fix text flickering */ } div.hopscotch-bubble .hopscotch-content { - font-family: Helvetica, Arial; + font-family: 'Helvetica Neue', Helvetica, Arial; font-weight: normal; line-height: 17px; margin: -5px 0 11px; padding-top: 8px; } div.hopscotch-bubble .hopscotch-bubble-content { - margin: 0 0 0 40px; + margin: 0; } div.hopscotch-bubble.no-number .hopscotch-bubble-content { margin: 0; @@ -421,7 +422,8 @@ div.hopscotch-bubble .hopscotch-bubble-close.hide-all { display: none; } div.hopscotch-bubble .hopscotch-bubble-number { - background: transparent url(../img/sprite-green.png) 0 0 no-repeat; + display: none; +/* background: transparent url(../img/sprite-green.png) 0 0 no-repeat; color: #fff; display: block; float: left; @@ -431,7 +433,7 @@ div.hopscotch-bubble .hopscotch-bubble-number { padding: 0 10px 0 0; text-align: center; width: 30px; - height: 30px; + height: 30px; */ } div.hopscotch-bubble .hopscotch-bubble-arrow-container { position: absolute; diff --git a/demo/src/DemoInitializer.js b/demo/src/DemoInitializer.js index 39cffcda9a..1f583ab4ef 100644 --- a/demo/src/DemoInitializer.js +++ b/demo/src/DemoInitializer.js @@ -100,11 +100,17 @@ define( }, { title: "Create Button", - content: "Many objects in the application are created via this button. Click it to view the Create menu, and rollover each item in the menu to see more information about it. Click 'Next' when ready to continue.", + content: "Many objects in the application are created via this button. Click it now to view the Create menu, and rollover each item in the menu to see more information about it. Or, click 'Next' to continue.", target: ".create-btn", placement: "right", - width: "700px", - yOffset: "-10px" + yOffset: "-10px", + nextOnTargetClick: true + }, + { + title: "Inspection Pane", + content: "This pane shows useful information about the currently selected item. You can hide this pane by clicking its 'X' icon to the right.", + target: ".split-pane-component.t-inspect", + placement: "left" }, { title: "Search", @@ -113,12 +119,6 @@ define( placement: "right", yOffset: "-20px" }, - { - title: "Inspection Pane", - content: "This pane shows useful information about the currently selected item. You can hide this pane by clicking its 'X' icon to the right.", - target: ".split-pane-component.t-inspect", - placement: "left" - }, { title: "Editing", content: "This part of the tour will step you through editing an object. Anything you change won’t be persisted, so don’t refresh your browser. Click 'Next' to continue.", @@ -137,11 +137,12 @@ define( }, { title: "Edit Button", - content: "Click this button now to begin editing the current object, then click 'Next' to continue.", + content: "Click this button now to begin editing the current object, or click 'Next' to continue.", target: ".object-browse-bar .btn-bar", placement: "bottom", width: "200px", - xOffset: "-20px" + xOffset: "-20px", + nextOnTargetClick: true }, { title: "Editing", @@ -181,7 +182,7 @@ define( }, { title: "Object Types", - content: "Try experimenting creating different object types, and adding other objects to them by dragging them from the tree. Only certain types of objects can be dragged into a given object type - if a type of object can’t be added, it simply won’t. ", + content: "Try experimenting creating different object types, and adding objects to them by dragging them from the tree. Only certain types of objects can be dragged into a given object type - if a type of object can’t be added, it simply won’t. ", target: ".user-environ", placement: "top", xOffset: "center",