[
https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=15386626#comment-15386626
]
Colin Bowdery commented on NIFI-1323:
-------------------------------------
Hi Rob/All,
Is there any developer docs for the NiFi UI available? Specifically,
1. How is the current UI implemented? (not look and feel but code
implementation)
2. How do we implement a new design?
3. What technologies are supported (HTML5, JS, FLASH, etc..)?
4. Can we integrate 3rd party components (i.e. for graphs, buttons, drop-downs)
I would like to skill up and start contributing to the UI/UX aspects but am not
sure where to start.
If nothing exists, with the groups help, perhaps I can start by generating some
"HOW TO" documentation for the UI. I note this aspect is very much ignored on
the NiFi webpage.
Many thanks,
Colin.
> UI visual design enhancement
> ----------------------------
>
> Key: NIFI-1323
> URL: https://issues.apache.org/jira/browse/NIFI-1323
> Project: Apache NiFi
> Issue Type: Improvement
> Components: Core UI
> Affects Versions: 1.0.0
> Reporter: Rob Moran
> Priority: Trivial
> Attachments: flowfont.zip, nifi-add-processor-dialog.png,
> nifi-component-samples.png,
> nifi-configure-processor-properties-set-value.png,
> nifi-configure-processor-properties.png,
> nifi-configure-processor-scheduling.png,
> nifi-configure-processor-settings.png, [email protected],
> [email protected], [email protected],
> nifi-global-menu.png, nifi-interaction-and-menu-samples.png,
> [email protected], [email protected],
> nifi-sample-flow.png, [email protected], [email protected]
>
>
> (I will attach mockups and supporting files as they become available)
> I am starting to work on a design to modernize the look and feel of the NiFi
> UI. The initial focus of the design is to freshen the UI (flat design, SVG
> icons, etc.). Additionally, the new design will propose usability
> improvements such as exposing more flow-related actions into collapsible
> panes, improving hierarchy of information, etc.
> Going forward, the design plan is to help lay the foundation for other UI/UX
> related issues such as those documented in NIFI-951.
> ---
> *flowfont.zip*
> Contains icon font and supporting files
> *nifi-add-processor-dialog.png*
> Dialog sample. This sample shows the 'Add Processor' dialog.
> *nifi-component-samples.png*
> To show styling for all components, as well as those components when a user
> is unauthorized to access.
> *nifi-configure-processor-properties*
> *nifi-configure-processor-properties-set-value*
> *nifi-configure-processor-scheduling*
> *nifi-configure-processor-settings*
> Configure Processor dialog. See related Comments below (in Activity section).
> *nifi-dialog-sample-@800px*
> Dialog sample in 800px wide viewport. This sample shows the the 'Details' tab
> of a provenance event.
> *nifi-drag-drop-component@2x*
> To show updated component toolbar button style and user interaction
> improvements
> *nifi-drop.svg*
> NiFi logo without 'nifi
> *nifi-global-menu*
> To show global menu
> *nifi-global-menu-pending-user@2x*
> Demonstrates a generic notification with an aggregate count that appears on
> the global menu icon. When the menu is displayed, the same notification (and
> individual count) appears in line with the corresponding item.
> *nifi-interaction-and-menu-samples.png*
> To demonstrate user interactions - hover states, tooltips, menus, etc.
> *nifi-lineage-graph-@800px*
> To show lineage graph with explicit action to get back to data provenance
> event list.
> *nifi-sample-flow-@800px*
> Shows a very useable UI down to around 800px in width. The thinking here is
> that at anything lower than this, the NiFi user experience will change to
> more of a monitoring and/or administrative type workflow. Future mockups will
> be created to illustrate this.
> *nifi-logo.svg*
> NiFi logo complete
> *nifi-sample-flow.png*
> Mockup of sample flow. Updated to show revised tool and status bars.
> Management related actions will move to a menu via mouseover (see
> _nifi-global-menu_). Added benefits here include reducing clutter and more
> user-friendly menu with text labels to reduce time spent scanning only a
> large set of icons. This also helps gain valuable viewport width in a browser
> (see _nifi-sample-flow-@800px_)
> *[email protected]*
> Search results example
> *nifi-shell-sample-@800px*
> Shell sample in 800px wide viewport. This sample shows the 'Data Provenance'
> table.
--
This message was sent by Atlassian JIRA
(v6.3.4#6332)
