From 6640039cdfd38be295fa886236a15f17f0b96093 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 11 Oct 2017 19:37:14 +0200 Subject: [PATCH] clean up tours + small fixes --- .../application/umbtour.directive.js | 16 +- .../src/views/components/umb-media-grid.html | 2 +- .../components/upload/umb-file-dropzone.html | 4 +- .../dashboard/dashboard.tabs.controller.js | 334 ++++++------------ .../default/StartupDashboardIntro.html | 30 +- 5 files changed, 133 insertions(+), 253 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js index 7c3407a219..e7371033ec 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js @@ -93,7 +93,7 @@ } - }, 100); + }, 50); } @@ -227,18 +227,24 @@ } function bindEvent() { + var eventName = scope.currentStep.event + ".step-" + scope.currentStepIndex; if(scope.currentStep.clickElement) { - $(scope.currentStep.clickElement).on(scope.currentStep.event, handleEvent); + $(scope.currentStep.clickElement).on(eventName, handleEvent); + console.log("bind", eventName); } else { - $(scope.currentStep.element).on(scope.currentStep.event, handleEvent); + $(scope.currentStep.element).on(eventName, handleEvent); + console.log("bind", eventName); } } function unbindEvent() { + var eventName = scope.currentStep.event + ".step-" + scope.currentStepIndex; if(scope.currentStep.clickElement) { - $(scope.currentStep.clickElement).off(scope.currentStep.event); + $(scope.currentStep.clickElement).off(eventName); + console.log("unbind", eventName); } else { - $(scope.currentStep.element).off(scope.currentStep.event); + $(scope.currentStep.element).off(eventName); + console.log("unbind", eventName); } } diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html index 2b945cdafb..9df33e7e0e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html b/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html index ab1de0bee0..0996f25a2d 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html @@ -23,7 +23,9 @@ -
Hover the document types tree and click the three small dots to open the context menu

", event: "click", clickElement: "#tree [data-element='tree-item-documentTypes'] [data-element='tree-item-options']" }, { element: "#dialog [data-element='action-documentType']", title: "Create document type", - content: "Click the option to create a document type with a template", - placement: "right", + content: "Click Document Type to create a new document type with a template", event: "click" }, { element: "[data-element='editor-name-field']", - title: "Enter a name for the document type", - content: "Enter a name for the document type", - placement: "bottom" - + title: "Enter a name", + content: "

Our document type needs a name. Enter Home in the field and click Next

" }, { element: "[data-element='editor-description']", - title: "Enter a description for the document type", - content: "Enter a description for the document type", - placement: "bottom" + title: "Enter a description", + content: "

A description helps the content editor pick the right document type when creating content:

The home to our website

" }, { element: "[data-element='group-add']", title: "Add tab", - content: "Add new tab", - event: "click", - placement: "bottom" + content: "Tabs help us organize the content on a content page. Click Add new tab to add a tab.", + event: "click" }, { element: "[data-element='group-name']", title: "Enter a name", - content: "Enter a name the tab", - placement: "bottom" + content: "Enter Content in the tab name" }, { element: "[data-element='property-add']", title: "Add a property", - content: "Add a property to the tab", - event: "click", - placement: "bottom" - }, - { - element: "[data-element~='overlay-property-settings']", - title: "Property dialog", - content: "Something something something about the dialog", - placement: "left" + content: "

Properties are the different types of data on our content page.

On our Home page we wan't to add a welcome text.

Click Add property to open the property dialog

", + event: "click" }, { element: "[data-element~='overlay-property-settings'] [data-element='property-name']", title: "Enter a name", - content: "Enter a name for the property editor", - placement: "left" + content: "Enter Welcome Text as name for the property" }, { element: "[data-element~='overlay-property-settings'] [data-element='property-description']", title: "Enter a description", - content: "Enter a description for the property editor", - placement: "left" + content: "Enter a description for the property editor:
Write a nice introduction text so the visitors feel welcome
" }, { element: "[data-element~='overlay-property-settings'] [data-element='editor-add']", title: "Add editor", - content: "Something something something", - event: "click", - placement: "left" + content: "The editor define what data type the property is. Click Add editor to open the editor picker dialog", + event: "click" }, { element: "[data-element~='overlay-editor-picker']", - title: "Editor picker dialog", - content: "Something something something about the editor picker dialog. This is here you select the type of property bla bla bla.", - placement: "left" + title: "Editor picker", + content: "

In the editor picker dialog we can pick one of the many build in editor.

" }, { - element: "[data-element~='overlay-editor-picker'] [data-element='editor-Umbraco.MediaPicker2']", - title: "Select the Date editor", - content: "Something something something about the editor settings dialog", - event: "click", - placement: "left" + element: "[data-element~='overlay-editor-picker'] [data-element='editor-Umbraco.TextboxMultiple']", + title: "Select editor", + content: "Select the Textarea editor which allows the content editor to enter long texts", + event: "click" }, { element: "[data-element~='overlay-editor-settings']", - title: "Editor settings dialog", - content: "A loong story about the editor settings dialog...bla bla bla bla bla", - placement: "left" + title: "Editor settings", + content: "Each editor can have individual settings. We don't need to change any of these now." }, { element: "[data-element~='overlay-editor-settings'] [data-element='overlay-submit']", - title: "Submit the editor settings dialog", - content: "Click submit to save your changes", - event: "click", - placement: "top" + title: "Save editor", + content: "Click Submit to save the editor and any changes you may have made to the editor settings.", + event: "click" }, { element: "[data-element~='overlay-property-settings'] [data-element='overlay-submit']", - title: "Submit the property settings dialog", - content: "Click submit to save your changes", - event: "click", - placement: "top" + title: "Save property", + content: "Click Submit to add the property", + event: "click" }, { element: "[data-element='button-group-primary']", - title: "Submit the property settings dialog", - content: "Click submit to save your changes", - event: "click", - placement: "top" + title: "Save the document type", + content: "Click Save to create your document type", + event: "click" } ] }; @@ -175,55 +150,31 @@ function startUpDynamicContentController(dashboardResource, assetsService, tourS "steps": [ { element: "[data-element='tree-root']", - title: "Open the content context menu", - content: "Bla bla bla bla bla", - event: "click" + title: "Open context menu", + content: "

Open the context menu by hovering the root of the content section.

Now click the three small dots to the right

", + event: "click", + clickElement: "[data-element='tree-root'] [data-element='tree-item-options']" }, { element: "[data-element='action-create-home']", - title: "Navigate to the settings sections", - content: "Select the document type Home we have created", + title: "Create Home page", + content: "

Click on Home to create a new page of type Home

", event: "click" }, { element: "[data-element='editor-content'] [data-element='editor-name-field']", - title: "Add name", - content: "Enter name of new document type" + title: "Give your new page a name", + content: "

Our new page needs a name. Enter Home in the field and click Next

" + }, + { + element: "[data-element='editor-content'] [data-element='property-welcomeText']", + title: "Add a welcome text", + content: "

Add content to the Welcome Text field

If you don't have any ideas here is a start:

I am learning Umbraco. High Five I Rock #H5IR

" }, { element: "[data-element='editor-content'] [data-element='button-group-primary']", title: "Save and publish", - content: "Save and publish your new page", - event: "click" - }, - { - element: "[data-element='editor-content'] [data-element='button-group-toggle']", - title: "Unpublish", - content: "First open the publish menu", - event: "click" - }, - { - element: "[data-element='editor-content'] [data-element='button-group-secondary-1']", - title: "Unpublish", - content: "Then click the unpublish button", - event: "click" - }, - { - element: "[data-element='editor-content'] [data-element='button-group-toggle']", - title: "Save", - content: "Open the publish menu again", - event: "click" - }, - { - element: "[data-element='editor-content'] [data-element='button-group-secondary-0']", - title: "Save", - content: "click the save button", - event: "click" - }, - { - element: "[data-element='editor-content'] [data-element='button-group-primary']", - title: "Save", - content: "click the save button", + content: "

Now click the Save and publish button to save and publish your changes

", event: "click" } ] @@ -242,130 +193,67 @@ function startUpDynamicContentController(dashboardResource, assetsService, tourS "steps": [ { element: "#applications [data-element='section-settings']", - title: "Navigate to the settings sections", - content: "In the settings section we will find the templates", + title: "Navigate to the settings section", + content: "In the Settings section you will find the templates for all your document types", event: "click" }, { element: "#tree [data-element='tree-item-templates']", - title: "Template tree item", - content: "Hover the templates tree item and click the three small dots", + title: "Expand the Templates node", + content: "

To see all our templates click the small triangle to the left of the templates node

", event: "click", clickElement: "#tree [data-element='tree-item-templates'] [data-element='tree-item-expand']" }, { element: "#tree [data-element='tree-item-templates'] [data-element='tree-item-Home']", title: "Open Home template", - content: "Click the home template to edit it", + content: "

Click the Home template to open and edit it

", event: "click" }, - { - element: "[data-element='editor-templates'] [data-element='editor-name-field']", - title: "Give your template a name", - content: "Create a new template" - }, { element: "[data-element='editor-templates'] [data-element='code-editor']", - title: "Give your template a name", - content: "Create a new template" - + title: "Edit template", + content: '

Templates can be edited here or in your favorite code editor.

To render the value we entered on the Home page add the following to the template:

@Model.Content.GetPropertyValue("welcomeText")

' }, { element: "[data-element='editor-templates'] [data-element='button-save']", - title: "Give your template a name", - content: "Create a new template", + title: "Save the template", + content: "Click the save button and your template will be saved", event: "click" } ] }; - tourService.startTour(tour); - - } - - function startTourFive() { - - var tour = { - "options": { - "name": "Create a document type for a sub page", - "alias": "umbIntroCreateSubPageDocType" - }, - "steps": [ - { - element: "#applications [data-element='section-settings']", - title: "Navigate to the settings sections", - content: "In the settings section we will find the document types", - event: "click", - placement: "right" - }, - { - element: "#tree [data-element='tree-item-documentTypes']", - title: "Let's open the context menu", - content: "Hover the document types node and click the three small dots", - event: "click", - clickElement: "#tree [data-element='tree-item-documentTypes'] [data-element='tree-item-options']", - placement: "bottom" - }, - { - element: "#dialog [data-element='action-documentType']", - title: "Create document type", - content: "Click the option to create a document type with a template", - event: "click", - placement: "bottom" - }, - { - element: "[data-element='editor-document-types'] [data-element='editor-name-field']", - title: "Enter a name for the document type", - content: "Enter a name for the document type", - placement: "bottom" - }, - { - element: "[data-element='editor-document-types'] [data-element='sub-view-permissions']", - title: "Enter a name for the document type", - content: "Enter a name for the document type", - event: "click", - placement: "bottom" - } - ] - }; - tourService.startTour(tour); } - function startTourSix() { - + function startTourFour() { + var tour = { "options": { - "name": "Create a document type for a sub page", - "alias": "umbIntroCreateSubPageDocType" + "name": "View Home page", + "alias": "umbIntroViewHomePage" }, "steps": [ { - element: "#tree [data-element='tree-item-Test']", - title: "Navigate to the Test node", - content: "In the settings section we will find the document types", + element: "#tree [data-element='tree-item-Home']", + title: "Open the Home page", + content: "

Click the Home page to open it

", + event: "click" + }, + { + element: "[data-element='editor-content'] [data-element='tab-Generic properties']", + title: "Properties", + content: "

Under the properties tab you will find default information about the content item

", + event: "click" + }, + { + element: "[data-element='editor-content'] [data-element='property-_umb_urls']", + title: "Open page", + content: "

Click the Link to view your page.

Tip: Click the preview button in the bottom right corner to preview changes without publishing them

", event: "click", - placement: "bottom" - }, - { - element: "[data-element='editor-content'] [data-element='tab-Tab 2']", - title: "Navigate to tab 2", - content: "Bla bla bla bla bla", - event: "click", - placement: "bottom" - }, - { - element: "[data-element='editor-content'] [data-element='property-prop2']", - title: "This is the second date picker", - content: "We have a lot of those", - placement: "bottom" - }, - { - element: "[data-element='editor-content'] [data-element='property-andTheLastTextArea']", - title: "This is the second date picker", - content: "We have a lot of those", - placement: "bottom" + clickElement: "[data-element='editor-content'] [data-element='property-_umb_urls'] a[target='_blank']" } ] }; @@ -378,85 +266,79 @@ function startUpDynamicContentController(dashboardResource, assetsService, tourS var tour = { "options": { - "name": "Create a document type for a sub page", + "name": "The media library", "alias": "umbIntroMediaSection" }, "steps": [ { element: "#applications [data-element='section-media']", title: "Navigate to the media section", - content: "
Testing html

This should be bold
We can also make code examples in here
", - event: "click", - placement: "right" + content: "The media section is where you will manage all your media items", + event: "click" }, { element: "#tree [data-element='tree-root']", - title: "Open context menu", - content: "Hover the media root and click the three small dots in the right side", + title: "Create a new folder", + content: "

Hover the media root and click the three small dots on the right side of the item

", event: "click", - clickElement: "#tree [data-element='tree-root'] [data-element='tree-item-options']", - view: "treeOptions", - placement: "bottom" + clickElement: "#tree [data-element='tree-root'] [data-element='tree-item-options']" }, { element: "#dialog [data-element='action-Folder']", - title: "Select create folder", - content: "Bla bla bla bla bla", - event: "click", - placement: "right" + title: "Create a new folder", + content: "

Select the Folder options to create a new folder

", + event: "click" }, { element: "[data-element='editor-media'] [data-element='editor-name-field']", - title: "Give your folder a name", - content: "Call it 'My Folder'", - placement: "bottom" + title: "Enter a name", + content: "

Enter 'My folder' in the field

" }, { element: "[data-element='editor-media'] [data-element='button-save']", - title: "Save the new folder", - content: "Bla bla bla bla bla", - event: "click", - placement: "top" + title: "Save the folder", + content: "

Click the Save button to create the new folder

", + event: "click" }, { element: "[data-element='editor-media'] [data-element='dropzone']", title: "Upload images", - content: "Bla bla bla bla bla", - placement: "left" + content: "

In the upload area you can upload your media items.

Click the Upload button and select some images on your computer and upload them.

", + event: "click", + clickElement: "[data-element='editor-media'] [data-element='button-upload-media']" }, { - element: "[data-element='editor-media'] [data-element='media-grid-item-3']", - title: "Select media item", - content: "Bla bla bla bla bla", + element: "[data-element='editor-media'] [data-element='media-grid-item-0']", + title: "View media item details", + content: "Hover the media item and Click the purple bar to view details about the media item", event: "click", - clickElement: "[data-element='editor-media'] [data-element='media-grid-item-3'] [data-element='media-grid-item-edit']", - placement: "left" + clickElement: "[data-element='editor-media'] [data-element='media-grid-item-0'] [data-element='media-grid-item-edit']" }, { element: "[data-element='editor-media'] [data-element='property-umbracoFile']", - title: "Something about the file", - content: "Bla bla bla bla bla" + title: "The uploaded image", + content: "

Here you can see the image you have uploaded.

Use the dot in the center of the image to set a focal point on the image.

" }, { element: "[data-element='editor-media'] [data-element='property-umbracoBytes']", - title: "Something about the size", - content: "Bla bla bla bla bla" + title: "Image size", + content: "

You will also find other details about the image, like the size

You can add extra properties to an image by creating or editing the Media types

" }, { element: "[data-element='editor-media'] [data-element='tab-Generic properties']", - title: "Go to the properties tab", - content: "Bla bla bla bla bla", + title: "Properties", + content: "Like the content section you can also find default properties about the media item. You will find these under the properties tab", event: "click" }, { element: "[data-element='editor-media'] [data-element='property-_umb_urls']", - title: "Something about the path", - content: "Bla bla bla bla bla" + title: "Link to media", + content: "The path to the media item..." }, { element: "[data-element='editor-media'] [data-element='property-_umb_updatedate']", - title: "Something about the when the image is last updated", - content: "Bla bla bla bla bla" + title: "Last edited", + content: "...and information about when the item has been created and edited." } ] }; diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/default/StartupDashboardIntro.html b/src/Umbraco.Web.UI.Client/src/views/dashboard/default/StartupDashboardIntro.html index 62aa2e0e9f..261b1aa1fb 100644 --- a/src/Umbraco.Web.UI.Client/src/views/dashboard/default/StartupDashboardIntro.html +++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/default/StartupDashboardIntro.html @@ -5,38 +5,28 @@
-
Create your first document type
- +
Create the first document type
+
-
Create content
- +
Create page
+
-
Render in template
- +
Render content in template
+
-
Preview website
- +
View Home page
+
-
Create a document type for a sub page
- -
- -
-
Testing scrolling and tabs
- -
- -
-
Testing media library
- +
The media library
+