Skip to content

Bits and bobs #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 30, 2021
Merged

Bits and bobs #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1cc3b8a
Buttons - added margin bottom to block button
leekelleher Oct 30, 2021
b8f07cf
Language files - whitespace normalization
leekelleher Oct 30, 2021
97a4fce
UmbBox - changed casing
leekelleher Oct 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/buttons/buttons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,13 @@
</umb-box-content>

<umb-box-content>
<umb-button action="vm.doStuff()"
label="block"
type="button"
button-style="block">
</umb-button>
<div class="mb3">
<umb-button action="vm.doStuff()"
label="block"
type="button"
button-style="block">
</umb-button>
</div>
<umb-button action="vm.doStuff()"
label="action"
type="button"
Expand Down
6 changes: 2 additions & 4 deletions src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/buttons/lang/en.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,8 @@
<key alias="buttonTitle">umb-button</key>
<key alias="buttonDescription">Render a styled button</key>
<key alias="buttonNote">
<![CDATA[
This is an example of using a button. The type of button depends on the "button-style", you can see the options in the example above and see them rendered down below.
]]>
</key>
<![CDATA[This is an example of using a button. The type of button depends on the <code>button-style</code>, you can see the options in the example above and see them rendered down below.]]>
</key>
<key alias="groupedButtonTitle">umb-grouped-button</key>
<key alias="groupedButtonDescription">Render a grouped button</key>
<key alias="groupedButtonNote">This is an example of a button group, you can see a few examples rendered down below.</key>
Expand Down
24 changes: 12 additions & 12 deletions src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/dialogs/lang/en.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
<?xml version="1.0" encoding="utf-8" ?>
<language alias="en" intName="English (UK)" localName="English (UK)" lcid="" culture="en-GB">
<area alias="exdialog">
<key alias="overlayTitle">Overlay Dialogs</key>
<key alias="overlayDescription">Overlays give you a 'modal' dialog across the whole screen</key>
<area alias="exdialog">
<key alias="overlayTitle">Overlay Dialogs</key>
<key alias="overlayDescription">Overlays give you a 'modal' dialog across the whole screen</key>

<key alias="overlayConfirmIntro">
<![CDATA[<p>The overlay service has a confirm option built, in with this you can quickly create a confirm
<key alias="overlayConfirmIntro">
<![CDATA[<p>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.
</p>]]>
</key>
</key>

<key alias="overlayCustom">Custom overlay</key>
<key alias="overlayCustomDescription">Custom overlays give you more control</key>
<key alias="overlayCustom">Custom overlay</key>
<key alias="overlayCustomDescription">Custom overlays give you more control</key>

<key alias="overlayCustomIntro">
<![CDATA[<p>For more custom options you need to provide a view and a custom controller to manage what
<key alias="overlayCustomIntro">
<![CDATA[<p>For more custom options you need to provide a view and a custom controller to manage what
happens inside the overlay.</p>
<p>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.</p>]]>
</key>
</area>
</key>
</area>
</language>
12 changes: 6 additions & 6 deletions src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/editorPanels/lang/en.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@
<key alias="editorFooterTitle">The umb-editor-footer element</key>
<key alias="editorFooterDescription">
<![CDATA[
<p>The <span style="color:red";>umb-editor-footer</span> element (outlined in red) is used as a container to display a footer on the current editor screen in Umbraco. It contains a <span style="color:blue";>left</span> (outlined in blue) and <span style="color:green";>right</span> element (outlined in green). For example, these are used in Umbraco to display a breadcrumb and the save/publish buttons while editing content.
]]>
<p>The <span style="color:red";>umb-editor-footer</span> element (outlined in red) is used as a container to display a footer on the current editor screen in Umbraco. It contains a <span style="color:blue";>left</span> (outlined in blue) and <span style="color:green";>right</span> element (outlined in green). For example, these are used in Umbraco to display a breadcrumb and the save/publish buttons while editing content.
]]>
</key>
<key alias="editorHeaderTitle">The umb-editor-header element</key>
<key alias="editorHeaderDescription">
<![CDATA[
<p>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.</pre>
<h4>Directive attributes:</h2>
<ul>
<p>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.</pre>
<h4>Directive attributes:</h2>
<ul>
<li>name</li>
<li>nameLocked</li>
<li>nameRequired</li>
Expand All @@ -34,7 +34,7 @@
<li>editorfor</li>
<li>setpagetitle</li>
</ul>
]]>
]]>
</key>
</area>
</language>
34 changes: 17 additions & 17 deletions src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/lang/en.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
<?xml version="1.0" encoding="utf-8" ?>
<language alias="en" intName="English (UK)" localName="English (UK)" lcid="" culture="en-GB">
<area alias="example">
<key alias="apiDocumentation">API Documentation</key>
</area>
<area alias="sections">
<key alias="uiExamples">UIExamples</key>
</area>
<area alias="info">
<key alias="heading">UI Examples</key>
<key alias="description">A backoffice component library as a package</key>
<key alias="intro">
<![CDATA[
<p>This package is developed and maintained by the Umbraco Package Team.</p>
<p>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.</p>
<p>Everything in this package is frontend only (except for a bit of code that automatically adds this section to all user groups).</p>
]]>
</key>
</area>
<area alias="example">
<key alias="apiDocumentation">API Documentation</key>
</area>
<area alias="sections">
<key alias="uiExamples">UI Examples</key>
</area>
<area alias="info">
<key alias="heading">UI Examples</key>
<key alias="description">A backoffice component library as a package</key>
<key alias="intro">
<![CDATA[
<p>This package is developed and maintained by the Umbraco Package Team.</p>
<p>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.</p>
<p>Everything in this package is frontend only (except for a bit of code that automatically adds this section to all user groups).</p>
]]>
</key>
</area>
</language>
62 changes: 32 additions & 30 deletions src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/layout/lang/en.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,38 @@
<?xml version="1.0" encoding="utf-8" ?>
<language alias="en" intName="English (UK)" localName="English (UK)" lcid="" culture="en-GB">
<area alias="layout">
<area alias="layout">

<!-- loading -->
<key alias="loadingTitle">Loading indicator</key>
<key alias="loadingDescription">Display a loading indicator while things setup</key>
<key alias="loadingMessage"><![CDATA[
<p>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.</p>
<p>Click the button below for an example, or try it yourself using this sample code:</p>
]]></key>
<key alias="loading">Start loading</key>
<key alias="stopLoading">Stop loading</key>
<!-- loading -->
<key alias="loadingTitle">Loading indicator</key>
<key alias="loadingDescription">Display a loading indicator while things setup</key>
<key alias="loadingMessage">
<![CDATA[
<p>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.</p>
<p>Click the button below for an example, or try it yourself using this sample code:</p>
]]>
</key>
<key alias="loading">Start loading</key>
<key alias="stopLoading">Stop loading</key>

<!-- layout (flex) -->
<key alias="layoutTitle">Layout</key>
<key alias="layoutDescription">Classes to aid page layout</key>

<key alias="flex">
<![CDATA[
<p>Umbraco contains many helper methods for controlling how a flexbox and its child items are rendered.</p>
<p>For a complete rundown of flexbox behaviour see <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">a guide to flexbox</a>.</p>
]]></key>
<key alias="flexJustify">Jusfiy content within a flex layout - good for spacing your content across the page.</key>
<key alias="flexItems">Align items within the flex layout, good for aligning text and image boxes of different sizes.</key>
<key alias="flexContent">Align content within a flex layout, good for controlling how boxes flow across the page.</key>
<!-- layout (flex) -->
<key alias="layoutTitle">Layout</key>
<key alias="layoutDescription">Classes to aid page layout</key>


<!-- margins -->
<key alias="marginTitle">Margins</key>
<key alias="marginDescription">Classes to help with the margins between items</key>
<key alias="margins">
<![CDATA[<a href="https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/less/utilities/_spacing.less">Umbraco's spacing styles</a>]]>
</key>
</area>
<key alias="flex">
<![CDATA[
<p>Umbraco contains many helper methods for controlling how a flexbox and its child items are rendered.</p>
<p>For a complete rundown of flexbox behaviour see <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">a guide to flexbox</a>.</p>
]]>
</key>
<key alias="flexJustify">Jusfiy content within a flex layout - good for spacing your content across the page.</key>
<key alias="flexItems">Align items within the flex layout, good for aligning text and image boxes of different sizes.</key>
<key alias="flexContent">Align content within a flex layout, good for controlling how boxes flow across the page.</key>

<!-- margins -->
<key alias="marginTitle">Margins</key>
<key alias="marginDescription">Classes to help with the margins between items</key>
<key alias="margins">
<![CDATA[<a href="https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/less/utilities/_spacing.less">Umbraco's spacing styles</a>]]>
</key>
</area>
</language>
6 changes: 3 additions & 3 deletions src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/tabs/lang/en.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<?xml version="1.0" encoding="utf-8" ?>
<language alias="en" intName="English (UK)" localName="English (UK)" lcid="" culture="en-GB">
<area alias="tabs">
<key alias="tabsTitle">Tabs</key>
<area alias="tabs">
<key alias="tabsTitle">Tabs</key>
<key alias="tabsDescription">This shows how you can use tabs</key>
<key alias="tabsNavDocumentation">API Documentation umbTabsNav</key>
<key alias="tabContentDocumentation">API Documentation umbTabContent</key>
</area>
</area>
</language>
2 changes: 1 addition & 1 deletion src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/uiexamples.section.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
38 changes: 19 additions & 19 deletions src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/umbbox/lang/en.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
<?xml version="1.0" encoding="utf-8" ?>
<language alias="en" intName="English (UK)" localName="English (UK)" lcid="" culture="en-GB">
<area alias="umbbox">
<key alias="boxTitle">The umb-box element</key>
<key alias="boxDescription">
<![CDATA[
<p>The <span style="color:red";>umb-box</span> element (outlined in red) is used as a wrapper for boxes in Umbraco. It contains a <span style="color:blue";>header</span> (outlined in blue) and <span style="color:green";>content</span> element (outlined in green) that are described below in more detail.
]]>
</key>
<key alias="headerTitle">The umb-box-header element</key>
<key alias="headerDescription">
<![CDATA[
<p>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.</p>
<h4>Adding a button</h2>
<p>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:</p>
]]>
</key>
<key alias="headerButtonNote">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.</key>
<key alias="contentTitle">The umb-box-content element</key>
<key alias="contentDescription">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.</key>
</area>
<area alias="umbbox">
<key alias="boxTitle">The umb-box element</key>
<key alias="boxDescription">
<![CDATA[
<p>The <span style="color:red";>umb-box</span> element (outlined in red) is used as a wrapper for boxes in Umbraco. It contains a <span style="color:blue";>header</span> (outlined in blue) and <span style="color:green";>content</span> element (outlined in green) that are described below in more detail.
]]>
</key>
<key alias="headerTitle">The umb-box-header element</key>
<key alias="headerDescription">
<![CDATA[
<p>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.</p>
<h4>Adding a button</h2>
<p>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:</p>
]]>
</key>
<key alias="headerButtonNote">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.</key>
<key alias="contentTitle">The umb-box-content element</key>
<key alias="contentDescription">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.</key>
</area>
</language>