diff --git a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/buttons/buttons.html b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/buttons/buttons.html index 281276d..1c1fa7d 100644 --- a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/buttons/buttons.html +++ b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/buttons/buttons.html @@ -21,11 +21,13 @@ - - +
+ + +
umb-button Render a styled button - - + button-style, you can see the options in the example above and see them rendered down below.]]> + umb-grouped-button Render a grouped button This is an example of a button group, you can see a few examples rendered down below. diff --git a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/dialogs/lang/en.xml b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/dialogs/lang/en.xml index c9f938b..c9cb518 100644 --- a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/dialogs/lang/en.xml +++ b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/dialogs/lang/en.xml @@ -1,23 +1,23 @@ - - Overlay Dialogs - Overlays give you a 'modal' dialog across the whole screen + + Overlay Dialogs + Overlays give you a 'modal' dialog across the whole screen - - The overlay service has a confirm option built, in with this you can quickly create a confirm + + The overlay service has a confirm option built, in with this you can quickly create a confirm dialog, to present your users with a simple option.

]]> - + - Custom overlay - Custom overlays give you more control + Custom overlay + Custom overlays give you more control - - For more custom options you need to provide a view and a custom controller to manage what + + For more custom options you need to provide a view and a custom controller to manage what happens inside the overlay.

With this method you can control the submit and close process so you can (with a little fangling) have muilt-step processes inside the overlay window.

]]> - - + + \ No newline at end of file diff --git a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/editorPanels/lang/en.xml b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/editorPanels/lang/en.xml index 443d089..d088d07 100644 --- a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/editorPanels/lang/en.xml +++ b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/editorPanels/lang/en.xml @@ -4,15 +4,15 @@ The umb-editor-footer element The umb-editor-footer element (outlined in red) is used as a container to display a footer on the current editor screen in Umbraco. It contains a left (outlined in blue) and right element (outlined in green). For example, these are used in Umbraco to display a breadcrumb and the save/publish buttons while editing content. - ]]> +

The umb-editor-footer element (outlined in red) is used as a container to display a footer on the current editor screen in Umbraco. It contains a left (outlined in blue) and right element (outlined in green). For example, these are used in Umbraco to display a breadcrumb and the save/publish buttons while editing content. + ]]> The umb-editor-header element The umbEditorHeader directive is used to display the header if things like DocumentTypes, MemberTypes and so on are edited. It has input boxes for icon, name, description and alias. -

Directive attributes:

-
    +

    The umbEditorHeader directive is used to display the header if things like DocumentTypes, MemberTypes and so on are edited. It has input boxes for icon, name, description and alias. +

    Directive attributes:

    +
    • name
    • nameLocked
    • nameRequired
      • @@ -34,7 +34,7 @@
    • editorfor
    • setpagetitle
    - ]]> + ]]> \ No newline at end of file diff --git a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/lang/en.xml b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/lang/en.xml index b6ba465..018ff2b 100644 --- a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/lang/en.xml +++ b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/lang/en.xml @@ -1,20 +1,20 @@ - - API Documentation - - - UIExamples - - - UI Examples - A backoffice component library as a package - - This package is developed and maintained by the Umbraco Package Team.

    -

    It contains a quick overview of several backoffice elements and shows you how to use them. The package is also great reference material, if you see something within this section that isn't covered on one of the tabs you can go to your App_Plugins folder and check the source.

    -

    Everything in this package is frontend only (except for a bit of code that automatically adds this section to all user groups).

    - ]]> -     - + + API Documentation + + + UI Examples + + + UI Examples + A backoffice component library as a package + + This package is developed and maintained by the Umbraco Package Team.

    +

    It contains a quick overview of several backoffice elements and shows you how to use them. The package is also great reference material, if you see something within this section that isn't covered on one of the tabs you can go to your App_Plugins folder and check the source.

    +

    Everything in this package is frontend only (except for a bit of code that automatically adds this section to all user groups).

    + ]]> +     +     \ No newline at end of file diff --git a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/layout/lang/en.xml b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/layout/lang/en.xml index ac7fb14..ef850d7 100644 --- a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/layout/lang/en.xml +++ b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/layout/lang/en.xml @@ -1,36 +1,38 @@ - + - - Loading indicator - Display a loading indicator while things setup - The umbraco load indicator allows you to show the three progress 'bubbles' while your page initializes or you do work that will take some time.

    -

    Click the button below for an example, or try it yourself using this sample code:

    - ]]>     - Start loading - Stop loading + + Loading indicator + Display a loading indicator while things setup + + The umbraco load indicator allows you to show the three progress 'bubbles' while your page initializes or you do work that will take some time.

    +

    Click the button below for an example, or try it yourself using this sample code:

    + ]]> +     + Start loading + Stop loading - - Layout - Classes to aid page layout - - - Umbraco contains many helper methods for controlling how a flexbox and its child items are rendered.

    -

    For a complete rundown of flexbox behaviour see a guide to flexbox.

    - ]]>     - Jusfiy content within a flex layout - good for spacing your content across the page. - Align items within the flex layout, good for aligning text and image boxes of different sizes. - Align content within a flex layout, good for controlling how boxes flow across the page. + + Layout + Classes to aid page layout - - - Margins - Classes to help with the margins between items - - Umbraco's spacing styles]]> - - + + Umbraco contains many helper methods for controlling how a flexbox and its child items are rendered.

    +

    For a complete rundown of flexbox behaviour see a guide to flexbox.

    + ]]> +     + Jusfiy content within a flex layout - good for spacing your content across the page. + Align items within the flex layout, good for aligning text and image boxes of different sizes. + Align content within a flex layout, good for controlling how boxes flow across the page. + + + Margins + Classes to help with the margins between items + + Umbraco's spacing styles]]> + +     \ No newline at end of file diff --git a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/tabs/lang/en.xml b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/tabs/lang/en.xml index a812f23..730194f 100644 --- a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/tabs/lang/en.xml +++ b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/tabs/lang/en.xml @@ -1,9 +1,9 @@ - - Tabs + + Tabs This shows how you can use tabs API Documentation umbTabsNav API Documentation umbTabContent - + diff --git a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/uiexamples.section.controller.js b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/uiexamples.section.controller.js index dda2809..ec4eba4 100644 --- a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/uiexamples.section.controller.js +++ b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/uiexamples.section.controller.js @@ -18,7 +18,7 @@ 'active': true }, { - 'name': 'Umbbox', + 'name': 'UmbBox', 'alias': 'umbbox', 'icon': 'icon-box', 'view': Umbraco.Sys.ServerVariables.umbracoSettings.appPluginsPath + '/uiexamples/umbbox/umbbox.html' diff --git a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/umbbox/lang/en.xml b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/umbbox/lang/en.xml index 8037427..89a50e4 100644 --- a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/umbbox/lang/en.xml +++ b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/umbbox/lang/en.xml @@ -1,22 +1,22 @@  - - The umb-box element - - The umb-box element (outlined in red) is used as a wrapper for boxes in Umbraco. It contains a header (outlined in blue) and content element (outlined in green) that are described below in more detail. - ]]> - - The umb-box-header element - - The umb-box-header element is the top part of a box, above the horizontal line. It can contain a title and description or their language keys.

    -

    Adding a button

    -

    Anything inside the umb-box-header element will be right aligned, just like the "API Documentation" button at the top of this current box. See the example below:

    - ]]> -     - The vm.linkAway method is a method in the angular controller, not a standard Umbraco thing. It calls window.open(url) on the passed in url. - The umb-box-content element - The umb-box-content element is anything within the box and under the header. It is a simple wrapper for whatever you wish to put inside, and comes with no special config options. - + + The umb-box element + + The umb-box element (outlined in red) is used as a wrapper for boxes in Umbraco. It contains a header (outlined in blue) and content element (outlined in green) that are described below in more detail. + ]]> + + The umb-box-header element + + The umb-box-header element is the top part of a box, above the horizontal line. It can contain a title and description or their language keys.

    +

    Adding a button

    +

    Anything inside the umb-box-header element will be right aligned, just like the "API Documentation" button at the top of this current box. See the example below:

    + ]]> +     + The vm.linkAway method is a method in the angular controller, not a standard Umbraco thing. It calls window.open(url) on the passed in url. + The umb-box-content element + The umb-box-content element is anything within the box and under the header. It is a simple wrapper for whatever you wish to put inside, and comes with no special config options. +