Skip to content

Commit 24fbaab

Browse files
joepavittjoepavitt
authored
Merge pull request #450 from FlowFuse/398-ui-page-icon
UI Page - Allow for definition of icons
2 parents 1e0a227 + 03a458b commit 24fbaab

6 files changed

Lines changed: 83 additions & 8 deletions

File tree

‎docs/nodes/config/ui-page.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
props:
33
UI: The UI (<code>ui-base</code>) that this page will be added to.
44
Path: Extending the parent UI path, defines where this page renders
5+
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.
6+
Theme: Which Dashboard 2.0 theme to use for this page. You can customise your own too.
57
Layout: Which Layout Manager to render the widgets with
68
---
79

‎nodes/config/locales/en-US/ui_group.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<script type="text/html" data-help-name="ui_group">
1+
<script type="text/html" data-help-name="ui-group">
22
<p>Group</p>
33
<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>
44
</script>

‎nodes/config/locales/en-US/ui_page.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<script type="text/html" data-help-name="ui-page">
2+
<p>UI Page</p>
3+
<p>A single screen of content within your Dashboard.</p>
4+
<h3>Properties</h3>
5+
<dl class="message-properties">
6+
<dt>
7+
Name
8+
<span class="property-type">string</span>
9+
</dt>
10+
<dd>
11+
Description of "Name"
12+
</dd>
13+
<dt>
14+
UI
15+
<span class="property-type">ui-base</span>
16+
</dt>
17+
<dd>
18+
Description of "Name"
19+
</dd>
20+
<dt>
21+
Path
22+
<span class="property-type">string</span>
23+
</dt>
24+
<dd>
25+
Description of "Name"
26+
</dd>
27+
<dt>
28+
Icon
29+
<span class="property-type">string</span>
30+
</dt>
31+
<dd>
32+
The icon to render alongside the page's name in the sidebar of the UI.
33+
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>.
34+
You do not need to include the `mdi-` prefix, just the name of the icon.
35+
</dd>
36+
<dt>
37+
Theme
38+
<span class="property-type">ui-theme</span>
39+
</dt>
40+
<dd>
41+
Choose from one of the available themes for the page.
42+
You can also create and customise your own themes.
43+
</dd>
44+
<dt>
45+
Layout
46+
<span class="property-type">grid | fixed | notebook</span>
47+
</dt>
48+
<dd>
49+
Choose form one of the available Dashboard Layouts.
50+
You can read more about our layouts <a href="https://dashboard.flowfuse.com/layouts/grid.html">here</a>.
51+
</dd>
52+
<dt>
53+
Class
54+
<span class="property-type">string</span>
55+
</dt>
56+
<dd>
57+
Any custom CSS classes you want to append to the page's styling when rendered.
58+
</dd>
59+
</dl>
60+
</script>

‎nodes/config/ui_base.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@
1515
margin: 0;
1616
width: auto;
1717
}
18+
.w-16 {
19+
width: 16px;
20+
}
1821
#ff-node-red-dashboard {
1922
--ff-grey-50: #F9FAFB;
2023
--ff-grey-100: #F3F4F6;

‎nodes/config/ui_page.html‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515
value: '/',
1616
required: false
1717
},
18+
icon: {
19+
value: 'home',
20+
required: false
21+
},
1822
layout: {
1923
value: '',
2024
required: true
@@ -54,31 +58,36 @@
5458

5559
<script type="text/html" data-template-name="ui-page">
5660
<div class="form-row">
57-
<label for="node-config-input-name"><i class="fa fa-bookmark"></i> Name</label>
61+
<label for="node-config-input-name"><i class="w-16 fa fa-bookmark"></i> Name</label>
5862
<input type="text" id="node-config-input-name">
5963
</div>
6064
<div class="form-row">
61-
<label for="node-config-input-ui"><i class="fa fa-bookmark"></i> UI</label>
65+
<label for="node-config-input-ui"><i class="w-16 fa fa-sitemap"></i> UI</label>
6266
<input type="text" id="node-config-input-ui">
6367
</div>
6468
<div class="form-row">
65-
<label for="node-config-input-path"><i class="fa fa-bookmark"></i> Path</label>
69+
<label for="node-config-input-path"><i class="w-16 fa fa-link"></i> Path</label>
6670
<input type="text" id="node-config-input-path">
6771
</div>
6872
<div class="form-row">
69-
<label for="node-config-input-theme"><i class="fa fa-bookmark"></i> Theme</label>
73+
<label for="node-config-input-icon"><i class="w-16 fa fa-home"></i> Icon</label>
74+
<input type="text" id="node-config-input-icon">
75+
</div>
76+
<div class="form-row">
77+
<label for="node-config-input-theme"><i class="w-16 fa fa-paint-brush"></i> Theme</label>
7078
<input type="text" id="node-config-input-theme">
7179
</div>
7280
<div class="form-row">
73-
<label for="node-config-input-layout"><i class="fa fa-bookmark"></i> Layout</label>
81+
<label for="node-config-input-layout"><i class="w-16 fa fa-th"></i> Layout</label>
7482
<input type="text" id="node-config-input-layout">
7583
<input type="hidden" id="node-config-input-layoutType">
7684
</div>
7785
<div class="form-row" id="text-row-class">
78-
<label for="node-config-input-className"><i class="fa fa-code"></i> Class</label>
86+
<label for="node-config-input-className"><i class="w-16 fa fa-code"></i> Class</label>
7987
<input type="text" id="node-config-input-className" placeholder="Optional CSS class name(s) for page"/>
8088
</div>
8189
<div class="form-row">
8290
<button onclick="RED.sidebar.show('dashboard-2.0')" class="editor-button editor-button-small">Open Dashboard 2.0 Sidebar</button>
8391
</div>
92+
8493
</script>

‎ui/src/layouts/Baseline.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
<v-list-item
2525
v-for="page in orderedPages" :key="page.id" active-class="v-list-item--active"
2626
:disabled="page.disabled"
27-
prepend-icon="mdi-home" :title="`${page.name} (${page.route.path})`"
27+
:prepend-icon="`mdi-${page.icon || 'home'}`"
28+
:title="`${page.name} (${page.route.path})`"
2829
:to="{name: page.route.name}" link
2930
/>
3031
</v-list>

0 commit comments

Comments
 (0)