Merge pull request #21 from leekelleher/dev/icons-tweaks1

Icon tweaks

Author: Mantus667

src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/icons/icons.controller.js

@@ -4,15 +4,18 @@
     function exampleSectionIconsController(exampleResource, iconHelper, overlayService) {
 
         var vm = this;
+
         vm.loading = true;
         vm.linkAway = exampleResource.linkAway;
+        vm.codeSnippet = `<umb-icon
+    icon="icon-{name}"
+    class="small | medium | large">
+</umb-icon>`;
 
         vm.openIconOverlay = openIconOverlay;
 
         function init() {
-
             if (iconHelper.getAllIcons !== undefined) {
-
                 iconHelper.getAllIcons().then(function (icons) {
                     vm.icons = icons;
                     vm.loading = false;
@@ -33,7 +36,6 @@
         /////////
 
         function openIconOverlay(icon) {
-
             var options = {
                 view: Umbraco.Sys.ServerVariables.umbracoSettings.appPluginsPath + '/uiexamples/icons/iconOverlay.html',
                 title: icon.name,
@@ -44,6 +46,7 @@
                     overlayService.close();
                 }
             }
+
             overlayService.open(options);
         }
 

src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/icons/icons.html

@@ -10,27 +10,22 @@
                         button-style="info">
             </umb-button>
         </umb-box-header>
-
         <umb-box-content>
-            <umb-code-snippet language="'html'">&lt;umb-icon
-    icon="icon-{name}"&gt;
-    class="small | medium | large"&gt;
-&lt;/umb-icon&gt;</umb-code-snippet>
+            <umb-code-snippet language="'html'">{{vm.codeSnippet}}</umb-code-snippet>
             <p><localize key="uiexamplesIcons_parameterIcon"></localize></p>
             <p><localize key="uiexamplesIcons_parameterClass"></localize></p>
             <ul>
-                <li><code>small </code> &nbsp; 14px <umb-icon icon="icon-alert" class="small"></umb-icon></li>
+                <li><code>small</code> &nbsp; 14px <umb-icon icon="icon-alert" class="small"></umb-icon></li>
                 <li><code>medium</code> &nbsp; 24px <umb-icon icon="icon-alert" class="medium"></umb-icon></li>
                 <li><code>large </code> &nbsp; 32px <umb-icon icon="icon-alert" class="large"></umb-icon></li>
             </ul>
-            <p><localize key="uiexamplesIcons_parameterClassNone"></localize></p></p>
+            <p><localize key="uiexamplesIcons_parameterClassNone"></localize></p>
         </umb-box-content>
     </umb-box>
 
     <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
 
-    <umb-box>
-
+    <umb-box ng-if="!vm.loading">
         <umb-box-header title-key="uiexamplesIcons_listTitle"
                         description-key="uiexamplesIcons_listDescription">
             <umb-search-filter input-id="uiexamples-icon-search"
@@ -41,7 +36,6 @@
                                auto-focus="true">
             </umb-search-filter>
         </umb-box-header>
-
         <umb-box-content>
             <div class="flex justify-between flex-wrap">
                 <div ng-repeat="icon in vm.icons | orderBy: 'name' | filter:vm.searchTerm"

src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/icons/lang/en.xml

@@ -1,12 +1,12 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <language alias="en" intName="English (UK)" localName="English (UK)" lcid="" culture="en-GB">
   <area alias="uiexamplesIcons">
-		<key alias="headerTitle">umb-icon</key>
-		<key alias="headerDescription">Use this directive to render a svg icon</key>
-    <key alias="parameterIcon">The 'icon' parameter determines which icon to show. All names are prefixed with icon-, for example 'icon-alert' and 'icon-checkbox'. See below for a list of all icons and their names.</key>
-    <key alias="parameterClass">The 'class' parameter can be used to render the icon with a fixed size:</key>
+    <key alias="headerTitle">umb-icon</key>
+    <key alias="headerDescription">Use this directive to render a SVG icon</key>
+    <key alias="parameterIcon"><![CDATA[The <code>icon</code> parameter determines which icon to show. All names are prefixed with icon-, for example <code>icon-alert</code> and <code>icon-checkbox</code>. See below for a list of all icons and their names.]]></key>
+    <key alias="parameterClass"><![CDATA[The <code>class</code> parameter can be used to render the icon with a fixed size:]]></key>
     <key alias="parameterClassNone">Without a size class specified the icon will inherit the font-size of their parent container.</key>
-		<key alias="listTitle">Available Icons</key>
-		<key alias="listDescription">The core Umbraco backoffice svg icons</key>
+    <key alias="listTitle">Available Icons</key>
+    <key alias="listDescription">The core Umbraco backoffice SVG icons</key>
   </area>
 </language>