[FEATURE] Contextual help messages: nav, misc elements

This is the last commit for **Contextual help messages** series. All
Node Types are covered.

Resolves #50

Configuration/NodeTypes.Abstracts.yaml

@@ -9,15 +9,15 @@
     title:
       type: string
       ui:
-        label: 'Node name'
+        label: 'Change name'
         help:
           message: |
-            Rename current content element, so it is easier to find it in the _Structure Tree_ panel.
+            Override content element's name, so it is easier to find it in the _Structure Tree_ panel.
             
             Setting this field can be also useful if you reference to it (e.g. from _Insert content references_ element) or search for it.
         inspector:
           group: 'type'
-          position: 10
+          position: 200
 
 #
 # Mixin with custom id / css class / inline css
@@ -243,6 +243,19 @@
       type: string
       ui:
         label: 'Section ID'
+        help:
+          message: |
+            _Section ID_ is a marker printed in the HTML code. It does **not** have any visual effect on the page, it's just an empty tag rendered as:  
+            `<a name="section-id-here"></a>`
+            
+            When to use? Couple of cases, most common are listed below.
+            
+            1. **Reference to it from URL address**  
+            Let's say you have set _Section ID_ with value `mySectionX` for some element on a very long page. Now you want the visitor to visit directly that part of the page. To do that, add `#mySectionX` to URL address. The visitor will be scrolled to that element with _Section ID_ set.  
+            Hint: you can set it using _URL #fragment ID_ page setting.
+            
+            2. **Use with Magellan Sticky Menu**  
+            See help message for _Section in Magellan Sticky Menu_ checkbox below (available only for some content elements).
         reloadIfChanged: TRUE
         inspector:
           group: 'devCode'
@@ -284,6 +297,24 @@
       type: boolean
       ui:
         label: 'Section in Magellan Sticky Menu'
+        help:
+          message: |
+            _Magellan Sticky Menu_ is especially useful on a long pages with lots of content. It's a fixed-position navigation which helps users **keep track of where they are on a page without scrolling** (see demo [here](http://foundation.zurb.com/docs/components/magellan.html)). The menu will stay fixed at the top of the page as users scroll and the current sections of the page will be highlighted in the menu.
+            
+            ##### How to set up Magellan Sticky Menu
+            
+            1. Add a menu element to your page:
+                * We recommend to use one of _Top Bar_, _Sub Nav_ or _Side Nav_ menu.
+                * Set _Menu behavior_ set to _Magellan Sticky Menu_.
+            2. Fill a single page with lots of content.
+            3. Identify elements on the page which are your sections and fill _Section ID_ for them. Tick the _Section in Magellan Sticky Menu_ checkox as well.
+            4. Add needed menu items for these sections. The menu is built automatically from the page structure so you need to build that structure:
+                * Add a new page, choose _Shortcut_ type on the dialog screen.
+                * Set _Target mode_ to _Selected target_
+                * Set the _Target_ to the prepared page.
+                * Set _URL #fragment ID_ to match the _Section ID_ on the related content element.
+            
+            Done! Now when you scroll to the section on the page, a corresponsing menu item should be highlighted.
         reloadIfChanged: TRUE
         inspector:
           group: 'navOptions'
@@ -300,6 +331,18 @@
       type: 'string'
       ui:
         label: 'Menu behavior (e.g. sticky)'
+        help:
+          message: |
+            Choose menu behavior.
+            
+            ##### Fixed position menu
+            Set this option to make the menu stay fixed at the top of the page as you scroll.
+            
+            ##### Sticky menu
+            Works similar to _Fixed position menu_ option, with the difference that you can put it anywhere on the site. When the menu reach the top visible area of the browser, it will act like the fixed menu and stick to the top area as users continue to scroll.
+            
+            ##### Magellan Sticky Menu
+            This fixed-position navigation helps users **keep track of where they are on a page without scrolling**. See demo and technical details [here](http://foundation.zurb.com/docs/components/magellan.html).
         reloadIfChanged: TRUE
         inspector:
           group: 'options'

Configuration/NodeTypes.Navigation.yaml

@@ -18,6 +18,18 @@
     icon: 'icon-rocket'
     group: 'navigation'
     position: 10
+    help:
+      message: |
+        _Top Bar_ is a great way to display a complex navigation bar on small, medium or large screens.
+        
+        It's a pretty complex piece of magical UI goodness:
+        * auto-switch to off-canvas menu on a small devices
+        * positioning options: fixed, sticky
+        * sub-menu rendered as a dropdown menu
+        * [Magellan Menu](http://foundation.zurb.com/docs/components/magellan.html) support
+        * ... and more
+        
+        **Note:** Top Bar navigation is built automatically based on information from pages structure in your project. Therefore you manage Top Bar links by managing the pages structure.
     inspector:
       groups:
         navOptions:
@@ -30,6 +42,16 @@
       defaultValue: 'Home'
       ui:
         label: 'Top Bar title'
+        help:
+          message: |
+            Set the title for the menu. It will be rendered as a link to your home page.
+            
+            **Hint:** this field supports raw HTML markup, so you can put here e.g. image with the site logo. For example:  
+            ```
+            <img src="https://domain.com/my-image.png" alt="" />
+            ```
+            
+            **Hint:** Make this field empty to skip rendering of this section at all.
         reloadIfChanged: TRUE
         inspector:
           group: 'navOptions'
@@ -39,6 +61,8 @@
       defaultValue: 'right'
       ui:
         label: 'Top Bar links align'
+        help:
+          message: "Align menu link to the right or left (default)."
         reloadIfChanged: TRUE
         inspector:
           group: 'navOptions'
@@ -56,15 +80,17 @@
       defaultValue: TRUE
       ui:
         label: 'Contain to grid'
+        help:
+          message: "Useful when you want Top Bar to be stretched to the full page width, but with its content contained to the grid."
         reloadIfChanged: TRUE
         inspector:
           group: 'navOptions'
     # Override default values from parent TYPO3.Neos.NodeTypes:Menu
     maximumLevels:
       defaultValue: 3
-    selection:
       ui:
-        label: 'Override / manually select pages'
+        help:
+          message: "How many menu levels should be included in the Top Bar. 2nd-level navigation (and deeper) will be rendered as drop-downs."
 
 
 #
@@ -78,6 +104,11 @@
     'M12.Foundation:AbstractSectionId': TRUE
   ui:
     label: 'Side Menu'
+    help:
+      message: |
+        Simple navigation in the form of **vertical links**. Ideal way to provide navigation for your entire site or for sections of an individual page.
+        
+        **Note:** _Side Menu_ is built automatically from pages structure in your project. Use _Side Menu (custom)_ to build your menu the "manual way".
     icon: 'icon-reorder'
     group: 'navigation'
     position: 20
@@ -94,6 +125,11 @@
     'M12.Foundation:AbstractSectionId': TRUE
   ui:
     label: 'Side Menu (custom)'
+    help:
+      message: |
+        Simple navigation in the form of **vertical links**. Ideal way to provide navigation for your entire site or for sections of an individual page.
+        
+        **Note:** _Side Menu (custom)_ is managed manually, i.e. you add links by inserting _Menu Item_ elements into it. If you prefer the menu being built automatically from your page structure, use _Side Menu_ element.
     icon: 'icon-reorder'
     group: 'navigation'
     position: 21
@@ -115,6 +151,11 @@
     'M12.Foundation:AbstractSectionId': TRUE
   ui:
     label: 'Sub Menu'
+    help:
+      message: |
+        Simple navigation in the form of **horizontal links**. Ideal way to provide navigation for your entire site or for sections of an individual page.
+        
+        **Note:** _Sub Menu_ is built automatically from page structure in your project. Use _Sub Menu (custom)_ to build your menu the "manual way".
     icon: 'icon-ellipsis-horizontal'
     group: 'navigation'
     position: 30
@@ -123,6 +164,8 @@
       type: string
       ui:
         label: 'Sub Menu title'
+        help:
+          message: "Menu title, rendered before all menu items."
         reloadIfChanged: TRUE
         inspector:
           group: 'options'
@@ -140,6 +183,11 @@
     'M12.Foundation:AbstractSectionId': TRUE
   ui:
     label: 'Sub Menu (custom)'
+    help:
+      message: |
+        Simple navigation in the form of **horizonal links**. Ideal way to provide navigation for your entire site or for sections of an individual page.
+        
+        **Note:** _Sub Menu (custom)_ is managed manually, i.e. you add links by inserting _Menu Item_ elements into it. If you prefer the menu being built automatically from your page structure, use _Sub Menu_ element.
     icon: 'icon-ellipsis-horizontal'
     group: 'navigation'
     position: 31
@@ -153,6 +201,8 @@
       type: string
       ui:
         label: 'Sub Menu title'
+        help:
+          message: "Menu title, rendered before all menu items."
         reloadIfChanged: TRUE
         inspector:
           group: 'options'
@@ -190,11 +240,20 @@
       type: string
       ui:
         label: 'Link / URL'
+        help:
+          message: |
+            You can specify link in two ways:
+            
+            ##### Link to internal page
+            Simply start typing the page title and it should appear on the list. Click to select and you're done.
+            
+            ##### Link to external page
+            Paste a full URL address starting with `http://` or `https://` to link to _external_ page.
         inspector:
           group: 'options'
           editor: 'TYPO3.Neos/Inspector/Editors/LinkEditor'
           editorOptions:
-            placeholder: 'Page name or URL...'
+            placeholder: 'Page name or external URL...'
     classActive:
       type: boolean
       ui:
@@ -206,6 +265,8 @@
       type: boolean
       ui:
         label: 'This is a divider'
+        help:
+          message: "Item will be rendered as a visual menu separator. Fields _Menu Item label_ and _Link / URL_ will be ignored."
         reloadIfChanged: TRUE
         inspector:
           group: 'options'

Configuration/NodeTypes.Neos.Content.yaml

@@ -21,6 +21,14 @@
     # Start level: default 1st level of the site
     startLevel:
       defaultValue: 1
+      ui:
+        help:
+          message: "Menu start level from which the menu will be rendered, based on pages structure."
+    selection:
+      ui:
+        label: 'Override / manually select pages'
+        help:
+          message: "When set, only these pages will be included in the menu."
 
 
 'TYPO3.Neos.NodeTypes:TwoColumn':

Configuration/NodeTypes.Neos.Documents.yaml

@@ -16,6 +16,19 @@
       type: string
       ui:
         label: 'URL #fragment ID'
+        help:
+          message: |
+            **Optional.** URL #fragment identifier. When provided, link to this page in the menu will be rendered with provided #fragment identifier at the end, i.e. `link/to/the/page#fragmentId`.
+            
+            ### Use cases
+            
+            ##### 1. Scroll to page section
+            You want the page to be scrolled directly to a particular section when user visits a link with #fragmentId in it.  
+            To mark the section on the page, use the _Section #name_ field on any content element. The _URL #fragment ID_ for the page and the _Section #name_ on the content element have to match.  
+            **Hint:** you can use _Shortcut_ page if you need to create many links to the same page. The only difference then would be the 'URL #fragment ID' part.
+            
+            ##### 2. Work with [Magellan Sticky Menu](http://foundation.zurb.com/docs/components/magellan.html)
+            See help message for _Section in Magellan Sticky Menu_ field on any content element to learn more.
         reloadIfChanged: TRUE
         inspector:
           group: 'document'

Configuration/NodeTypes.yaml

@@ -46,7 +46,7 @@
         label: 'Visually hide'
         help:
           message: |
-            Element will be rendered in HTML output, but will be visually hidden.
+            When set, element will be rendered in HTML output, but will be visually hidden.
             
             Developer info: it's achieved by adding `hide` CSS class to the element. Use it if you want programatically hide/show some element(s).
         reloadIfChanged: TRUE
@@ -56,6 +56,9 @@
       type: string
       ui:
         label: 'Float'
+        help:
+          message: |
+            The float option specifies that an element should be taken from the normal flow and placed along the `left` or `right` side of its container. It's called _float layouts_ where elements are floated to be stack horizontally. Text and other elements will then wrap around the floated one.
         reloadIfChanged: TRUE
         inspector:
           group: 'utilityClasses'
@@ -73,6 +76,12 @@
       type: boolean
       ui:
         label: 'Clear Float'
+        help:
+          message: |
+            There are two cases you might want to use this option:
+            
+            1. Set it together with _Float_ option to combat [the zero-height container problem](http://complexspiral.com/publications/containing-floats/). Read on the information there to learn more about the problem.
+            2. Set it on a content elements following that one with _Float_ option set. You do that to stop the wrapping behaviour around a floated element.
         reloadIfChanged: TRUE
         inspector:
           group: 'utilityClasses'
@@ -81,6 +90,8 @@
       type: string
       ui:
         label: 'Show by screen size'
+        help:
+          message: "Set the visibility of the content element for a particular device."
         reloadIfChanged: TRUE
         inspector:
           group: 'visibilityClasses'
@@ -110,6 +121,8 @@
       type: string
       ui:
         label: 'Hide by screen size'
+        help:
+          message: "Set the visibility of the content element for a particular device."
         reloadIfChanged: TRUE
         inspector:
           group: 'visibilityClasses'

Configuration/Settings.yaml

@@ -129,6 +129,7 @@ M12:
     genericHelpers:
       classTextAlign:
         label: 'Text align'
+        helpMessage: "Sets text aligning for this content element. You can set different aligning for a particular device, for example you can set text justify for large devices, but centered for a medium and small ones."
         cssClassSuffixes: [ '-text-left', '-text-center', '-text-right', '-text-justify' ] # e.g. small-text-left
         appliedPerColumn: false
         uiInspectorGroup: utilityClasses