Merge pull request #450 from FlowFuse/398-ui-page-icon

UI Page - Allow for definition of icons
FlowFuse · Dec 22, 2023 · 24fbaab · 24fbaab
2 parents 1e0a227 + 03a458b
commit 24fbaab
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 8 deletions.
diff --git a/docs/nodes/config/ui-page.md b/docs/nodes/config/ui-page.md
@@ -2,6 +2,8 @@
 props:
     UI: The UI (<code>ui-base</code>) that this page will be added to. 
     Path: Extending the parent UI path, defines where this page renders
+    Icon: Which <a href="https://pictogrammers.com/library/mdi/">Material Designs Icon</a> to use for the page. No need to include the <code>mdi-</code> prefix.
+    Theme: Which Dashboard 2.0 theme to use for this page. You can customise your own too.
     Layout: Which Layout Manager to render the widgets with
 ---
 

diff --git a/nodes/config/locales/en-US/ui_group.html b/nodes/config/locales/en-US/ui_group.html
@@ -1,4 +1,4 @@
-<script type="text/html" data-help-name="ui_group">
+<script type="text/html" data-help-name="ui-group">
     <p>Group</p>
     <p>If a <b>Class</b> is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a <code>msg.className</code> string property.</p>
 </script>
diff --git a/nodes/config/locales/en-US/ui_page.html b/nodes/config/locales/en-US/ui_page.html
@@ -0,0 +1,60 @@
+<script type="text/html" data-help-name="ui-page">
+    <p>UI Page</p>
+    <p>A single screen of content within your Dashboard.</p>
+    <h3>Properties</h3>
+    <dl class="message-properties">
+        <dt>
+            Name
+            <span class="property-type">string</span>
+        </dt>
+        <dd>
+            Description of "Name"
+        </dd>
+        <dt>
+            UI
+            <span class="property-type">ui-base</span>
+        </dt>
+        <dd>
+            Description of "Name"
+        </dd>
+        <dt>
+            Path
+            <span class="property-type">string</span>
+        </dt>
+        <dd>
+            Description of "Name"
+        </dd>
+        <dt>
+            Icon
+            <span class="property-type">string</span>
+        </dt>
+        <dd>
+            The icon to render alongside the page's name in the sidebar of the UI.
+            We use the Material Design Icons, you can see a full list of the available icons <a href="https://pictogrammers.com/library/mdi/">here</a>.
+            You do not need to include the `mdi-` prefix, just the name of the icon.
+        </dd>
+        <dt>
+            Theme
+            <span class="property-type">ui-theme</span>
+        </dt>
+        <dd>
+            Choose from one of the available themes for the page.
+            You can also create and customise your own themes.
+        </dd>
+        <dt>
+            Layout
+            <span class="property-type">grid | fixed | notebook</span>
+        </dt>
+        <dd>
+            Choose form one of the available Dashboard Layouts.
+            You can read more about our layouts <a href="https://dashboard.flowfuse.com/layouts/grid.html">here</a>.
+        </dd>
+        <dt>
+            Class
+            <span class="property-type">string</span>
+        </dt>
+        <dd>
+            Any custom CSS classes you want to append to the page's styling when rendered.
+        </dd>
+    </dl>
+</script>
diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
@@ -15,6 +15,9 @@
         margin: 0;
         width: auto;
     }
+    .w-16 {
+        width: 16px;
+    }
     #ff-node-red-dashboard {
         --ff-grey-50: #F9FAFB;
         --ff-grey-100: #F3F4F6;

diff --git a/nodes/config/ui_page.html b/nodes/config/ui_page.html
@@ -15,6 +15,10 @@
                 value: '/',
                 required: false
             },
+            icon: {
+                value: 'home',
+                required: false
+            },
             layout: {
                 value: '',
                 required: true
@@ -54,31 +58,36 @@
 
 <script type="text/html" data-template-name="ui-page">
     <div class="form-row">
-        <label for="node-config-input-name"><i class="fa fa-bookmark"></i> Name</label>
+        <label for="node-config-input-name"><i class="w-16 fa fa-bookmark"></i> Name</label>
         <input type="text" id="node-config-input-name">
     </div>
     <div class="form-row">
-        <label for="node-config-input-ui"><i class="fa fa-bookmark"></i> UI</label>
+        <label for="node-config-input-ui"><i class="w-16 fa fa-sitemap"></i> UI</label>
         <input type="text" id="node-config-input-ui">
     </div>
     <div class="form-row">
-        <label for="node-config-input-path"><i class="fa fa-bookmark"></i> Path</label>
+        <label for="node-config-input-path"><i class="w-16 fa fa-link"></i> Path</label>
         <input type="text" id="node-config-input-path">
     </div>
     <div class="form-row">
-        <label for="node-config-input-theme"><i class="fa fa-bookmark"></i> Theme</label>
+        <label for="node-config-input-icon"><i class="w-16 fa fa-home"></i> Icon</label>
+        <input type="text" id="node-config-input-icon">
+    </div>
+    <div class="form-row">
+        <label for="node-config-input-theme"><i class="w-16 fa fa-paint-brush"></i> Theme</label>
         <input type="text" id="node-config-input-theme">
     </div>
     <div class="form-row">
-        <label for="node-config-input-layout"><i class="fa fa-bookmark"></i> Layout</label>
+        <label for="node-config-input-layout"><i class="w-16 fa fa-th"></i> Layout</label>
         <input type="text" id="node-config-input-layout">
         <input type="hidden" id="node-config-input-layoutType">
     </div>
     <div class="form-row" id="text-row-class">
-        <label for="node-config-input-className"><i class="fa fa-code"></i> Class</label>
+        <label for="node-config-input-className"><i class="w-16 fa fa-code"></i> Class</label>
         <input type="text" id="node-config-input-className" placeholder="Optional CSS class name(s) for page"/>
     </div>
     <div class="form-row">
         <button onclick="RED.sidebar.show('dashboard-2.0')" class="editor-button editor-button-small">Open Dashboard 2.0 Sidebar</button>
     </div>
+
 </script>
diff --git a/ui/src/layouts/Baseline.vue b/ui/src/layouts/Baseline.vue
@@ -24,7 +24,8 @@
                     <v-list-item
                         v-for="page in orderedPages" :key="page.id" active-class="v-list-item--active"
                         :disabled="page.disabled"
-                        prepend-icon="mdi-home" :title="`${page.name} (${page.route.path})`"
+                        :prepend-icon="`mdi-${page.icon || 'home'}`"
+                        :title="`${page.name} (${page.route.path})`"
                         :to="{name: page.route.name}" link
                     />
                 </v-list>