[
https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Rob Moran updated NIFI-1323:
----------------------------
Attachment: [email protected]
Attached *nifi-search-results@2x*
Search results display as an extension of the search input field, spanning the
available vertical height between the flow status and breadcrumb containers. It
should be the same width as the search input field so that the left borders
align. A slight opacity set on the results container's background color.
At the top a count indicates the number of results. In the future, perhaps we
include a way to 'Customize' what results are returned.
Results are displayed in a consistent format – icon, name, processor/component
type. Below this appears what item the search has matched on, followed by the
value associated with the item. A property name and its value should always be
displayed together. If the match occurs in the name or processor/component
type, that is all that needs to be shown.
The matching search string is highlighted wherever a match occurs.
Overflow will scroll within the available container height.
When clicking on a result, the canvas will reposition so that component is
centered in view on the canvas and is selected. When this happens, the results
container should go away, but the search string entered by the user should
remain in the search input field. This way, if the user needs to search again,
they can start from where they left off.
> 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],
> nifi-drop.svg, [email protected], nifi-global-menu.png,
> nifi-interaction-and-menu-samples.png, [email protected],
> nifi-logo.svg, [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-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_)
> *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)
