[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: nifi-drop.svg) > 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, nifi-dialog-samp...@800px.png, > nifi-drag-drop-compon...@2x.png, nifi-global-menu-pending-u...@2x.png, > nifi-global-menu.png, nifi-interaction-and-menu-samples.png, > nifi-lineage-gra...@800px.png, nifi-sample-fl...@800px.png, > nifi-sample-flow.png, nifi-search-resu...@2x.png, nifi-shell-samp...@800px.png > > > (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_) > *nifi-search-resu...@2x.png* > 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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: nifi-logo.svg) > 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, nifi-dialog-samp...@800px.png, > nifi-drag-drop-compon...@2x.png, nifi-global-menu-pending-u...@2x.png, > nifi-global-menu.png, nifi-interaction-and-menu-samples.png, > nifi-lineage-gra...@800px.png, nifi-sample-fl...@800px.png, > nifi-sample-flow.png, nifi-search-resu...@2x.png, nifi-shell-samp...@800px.png > > > (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_) > *nifi-search-resu...@2x.png* > 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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: flowfont.zip Attached updated *flowfont.zip* * Changed baseline to 14% > 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, nifi-dialog-samp...@800px.png, > nifi-drag-drop-compon...@2x.png, nifi-drop.svg, > nifi-global-menu-pending-u...@2x.png, nifi-global-menu.png, > nifi-interaction-and-menu-samples.png, nifi-lineage-gra...@800px.png, > nifi-logo.svg, nifi-sample-fl...@800px.png, nifi-sample-flow.png, > nifi-search-resu...@2x.png, nifi-shell-samp...@800px.png > > > (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_) > *nifi-search-resu...@2x.png* > 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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: flowfont.zip) > 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: 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, nifi-dialog-samp...@800px.png, > nifi-drag-drop-compon...@2x.png, nifi-drop.svg, > nifi-global-menu-pending-u...@2x.png, nifi-global-menu.png, > nifi-interaction-and-menu-samples.png, nifi-lineage-gra...@800px.png, > nifi-logo.svg, nifi-sample-fl...@800px.png, nifi-sample-flow.png, > nifi-search-resu...@2x.png, nifi-shell-samp...@800px.png > > > (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_) > *nifi-search-resu...@2x.png* > 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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: flowfont.zip Attached updated *flowfont.zip* * Added new _icon-lineage_ (0xe816) > 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, nifi-dialog-samp...@800px.png, > nifi-drag-drop-compon...@2x.png, nifi-drop.svg, > nifi-global-menu-pending-u...@2x.png, nifi-global-menu.png, > nifi-interaction-and-menu-samples.png, nifi-lineage-gra...@800px.png, > nifi-logo.svg, nifi-sample-fl...@800px.png, nifi-sample-flow.png, > nifi-search-resu...@2x.png, nifi-shell-samp...@800px.png > > > (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_) > *nifi-search-resu...@2x.png* > 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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: flowfont.zip) > 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: 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, nifi-dialog-samp...@800px.png, > nifi-drag-drop-compon...@2x.png, nifi-drop.svg, > nifi-global-menu-pending-u...@2x.png, nifi-global-menu.png, > nifi-interaction-and-menu-samples.png, nifi-lineage-gra...@800px.png, > nifi-logo.svg, nifi-sample-fl...@800px.png, nifi-sample-flow.png, > nifi-search-resu...@2x.png, nifi-shell-samp...@800px.png > > > (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_) > *nifi-search-resu...@2x.png* > 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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Description: (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_) *nifi-search-resu...@2x.png* Search results example *nifi-shell-sample-@800px* Shell sample in 800px wide viewport. This sample shows the 'Data Provenance' table. was: (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 As the user hovers over the button: * the background color changes * a box-shadow is added * the icon changes to a version with a plus sign (icon-processor-add [0xe80d]) * a textured grab handle appears at the bottom * the cursor changes to an open hand (cursor:grab; cursor:-webkit-grab; cursor:-moz-grab;) As the user clicks on, holds, and drags the component button: * the component button reverts back to a normal state * the cursor changes to a closed hand (cursor:grabbing; cursor:-webkit-grabbing; cursor:-moz-grabbing;) * the only element dragged onto the graph is the add processor icon (icon-processor-add [0xe80d]) *nifi-drop.svg* NiFi logo without 'nifi
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Description: (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 As the user hovers over the button: * the background color changes * a box-shadow is added * the icon changes to a version with a plus sign (icon-processor-add [0xe80d]) * a textured grab handle appears at the bottom * the cursor changes to an open hand (cursor:grab; cursor:-webkit-grab; cursor:-moz-grab;) As the user clicks on, holds, and drags the component button: * the component button reverts back to a normal state * the cursor changes to a closed hand (cursor:grabbing; cursor:-webkit-grabbing; cursor:-moz-grabbing;) * the only element dragged onto the graph is the add processor icon (icon-processor-add [0xe80d]) *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-search-resu...@2x.png* Search results example *nifi-shell-sample-@800px* Shell sample in 800px wide viewport. This sample shows the 'Data Provenance' table. was: (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* *nifi-drop.svg* NiFi logo without 'nifi *nifi-global-menu* To show global menu *nifi-global-menu-pending-user@2x* Demonstrates
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: nifi-drag-drop-compon...@2x.png Attached *nifi-drag-drop-component.png* This mockup demonstrates an updated component toolbar button style and user interaction improvements. As the user hovers over the button: * the background color changes * a box-shadow is added * the icon changes to a version with a plus sign (flowfont – icon-processor-add – 0xe80d) * a textured grab handle appears at the bottom * the cursor changes to an open hand (cursor:grab; cursor:-webkit-grab; cursor:-moz-grab) As the user clicks on, holds, and drags the component button: * the component button reverts back to a normal state * the cursor changes to a closed hand (cursor:grabbing; cursor:-webkit-grabbing; cursor:-moz-grabbing) * the only element dragged onto the graph is the add processor icon (flowfont – icon-processor-add – 0xe80d) > 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, nifi-dialog-samp...@800px.png, > nifi-drag-drop-compon...@2x.png, nifi-drop.svg, > nifi-global-menu-pending-u...@2x.png, nifi-global-menu.png, > nifi-interaction-and-menu-samples.png, nifi-lineage-gra...@800px.png, > nifi-logo.svg, nifi-sample-fl...@800px.png, nifi-sample-flow.png, > nifi-search-resu...@2x.png, nifi-shell-samp...@800px.png > > > (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-search-resu...@2x.png* > 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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Description: (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* *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-search-resu...@2x.png* Search results example *nifi-shell-sample-@800px* Shell sample in 800px wide viewport. This sample shows the 'Data Provenance' table. was: (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*
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: flowfont.zip Attached updated *flowfont.zip* New: * icon-processor-add (0xe815) * icon-port-in-add (0xe814) * icon-port-out-add (0xe813) * icon-group-add (0xe80f) * icon-group-remote-add (0xe812) * icon-funnel-add (0xe8 00) * icon-template-add (0xe80e) * icon-label-add (0xe80d) Updated: * icon-template-save _replaces_ icon-template-create (0xe811) > 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, nifi-dialog-samp...@800px.png, > nifi-drop.svg, nifi-global-menu-pending-u...@2x.png, nifi-global-menu.png, > nifi-interaction-and-menu-samples.png, nifi-lineage-gra...@800px.png, > nifi-logo.svg, nifi-sample-fl...@800px.png, nifi-sample-flow.png, > nifi-search-resu...@2x.png, nifi-shell-samp...@800px.png > > > (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-search-resu...@2x.png* > 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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: flowfont.zip) > 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: 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, nifi-dialog-samp...@800px.png, > nifi-drop.svg, nifi-global-menu-pending-u...@2x.png, nifi-global-menu.png, > nifi-interaction-and-menu-samples.png, nifi-lineage-gra...@800px.png, > nifi-logo.svg, nifi-sample-fl...@800px.png, nifi-sample-flow.png, > nifi-search-resu...@2x.png, nifi-shell-samp...@800px.png > > > (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-search-resu...@2x.png* > 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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: nifi-global-menu-pending-u...@2x.png > 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, nifi-dialog-samp...@800px.png, > nifi-drop.svg, nifi-global-menu-pending-u...@2x.png, nifi-global-menu.png, > nifi-interaction-and-menu-samples.png, nifi-lineage-gra...@800px.png, > nifi-logo.svg, nifi-sample-fl...@800px.png, nifi-sample-flow.png, > nifi-search-resu...@2x.png, nifi-shell-samp...@800px.png > > > (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-search-resu...@2x.png* > 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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Description: (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-search-resu...@2x.png* Search results example *nifi-shell-sample-@800px* Shell sample in 800px wide viewport. This sample shows the 'Data Provenance' table. was: (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
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: nifi-search-resu...@2x.png 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, nifi-dialog-samp...@800px.png, > nifi-drop.svg, nifi-global-menu-pending-u...@2x.png, nifi-global-menu.png, > nifi-interaction-and-menu-samples.png, nifi-lineage-gra...@800px.png, > nifi-logo.svg, nifi-sample-fl...@800px.png, nifi-sample-flow.png, > nifi-search-resu...@2x.png, nifi-shell-samp...@800px.png > > > (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
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Description: (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. was: (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-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
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: flowfont.zip Attached updated *flowfont.zip* # Updated icon-template (0xe809) # New icon-template-import (0xe810) # New icon-template-create (0xe811) > 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, nifi-dialog-samp...@800px.png, > nifi-drop.svg, nifi-global-menu.png, nifi-interaction-and-menu-samples.png, > nifi-lineage-gra...@800px.png, nifi-logo.svg, nifi-sample-fl...@800px.png, > nifi-sample-flow.png, nifi-shell-samp...@800px.png > > > (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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: flowfont.zip) > 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: 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, nifi-dialog-samp...@800px.png, > nifi-drop.svg, nifi-global-menu.png, nifi-interaction-and-menu-samples.png, > nifi-lineage-gra...@800px.png, nifi-logo.svg, nifi-sample-fl...@800px.png, > nifi-sample-flow.png, nifi-shell-samp...@800px.png > > > (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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: nifi-component-samples.png) > 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-configure-processor-properties-set-value.png, > nifi-configure-processor-properties.png, > nifi-configure-processor-scheduling.png, > nifi-configure-processor-settings.png, nifi-dialog-samp...@800px.png, > nifi-drop.svg, nifi-global-menu.png, nifi-interaction-and-menu-samples.png, > nifi-lineage-gra...@800px.png, nifi-logo.svg, nifi-sample-fl...@800px.png, > nifi-sample-flow.png, nifi-shell-samp...@800px.png > > > (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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: flowfont.zip Removed _icon-bulletin_ Added _added icon-connect-add_ > 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, nifi-dialog-samp...@800px.png, > nifi-drop.svg, nifi-global-menu.png, nifi-interaction-and-menu-samples.png, > nifi-lineage-gra...@800px.png, nifi-logo.svg, nifi-sample-fl...@800px.png, > nifi-sample-flow.png, nifi-shell-samp...@800px.png > > > (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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: flowfont.zip) > 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: 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, nifi-dialog-samp...@800px.png, > nifi-drop.svg, nifi-global-menu.png, nifi-interaction-and-menu-samples.png, > nifi-lineage-gra...@800px.png, nifi-logo.svg, nifi-sample-fl...@800px.png, > nifi-sample-flow.png, nifi-shell-samp...@800px.png > > > (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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: flowfont.zip Updated to only include custom icons > 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, nifi-dialog-samp...@800px.png, > nifi-drop.svg, nifi-global-menu.png, nifi-interaction-and-menu-samples.png, > nifi-lineage-gra...@800px.png, nifi-logo.svg, nifi-sample-fl...@800px.png, > nifi-sample-flow.png, nifi-shell-samp...@800px.png > > > (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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: flowfont.zip) > 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: 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, nifi-dialog-samp...@800px.png, > nifi-drop.svg, nifi-global-menu.png, nifi-interaction-and-menu-samples.png, > nifi-lineage-gra...@800px.png, nifi-logo.svg, nifi-sample-fl...@800px.png, > nifi-sample-flow.png, nifi-shell-samp...@800px.png > > > (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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: flowfont.zip > 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, nifi-dialog-samp...@800px.png, > nifi-drop.svg, nifi-global-menu.png, nifi-interaction-and-menu-samples.png, > nifi-lineage-gra...@800px.png, nifi-logo.svg, nifi-sample-fl...@800px.png, > nifi-sample-flow.png, nifi-shell-samp...@800px.png > > > (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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: flowfont.zip) > 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, nifi-dialog-samp...@800px.png, > nifi-drop.svg, nifi-global-menu.png, nifi-interaction-and-menu-samples.png, > nifi-lineage-gra...@800px.png, nifi-logo.svg, nifi-sample-fl...@800px.png, > nifi-sample-flow.png, nifi-shell-samp...@800px.png > > > (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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: flowfont.zip) > 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, nifi-dialog-samp...@800px.png, > nifi-drop.svg, nifi-global-menu.png, nifi-interaction-and-menu-samples.png, > nifi-lineage-gra...@800px.png, nifi-logo.svg, nifi-sample-fl...@800px.png, > nifi-sample-flow.png, nifi-shell-samp...@800px.png > > > (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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: flowfont.zip > 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, nifi-dialog-samp...@800px.png, > nifi-drop.svg, nifi-global-menu.png, nifi-interaction-and-menu-samples.png, > nifi-lineage-gra...@800px.png, nifi-logo.svg, nifi-sample-fl...@800px.png, > nifi-sample-flow.png, nifi-shell-samp...@800px.png > > > (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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Description: (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-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. was: (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 *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-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. > UI visual design enhancement > > > Key: NIFI-1323 >
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: nifi-sample-flow.png nifi-component-samples.png > 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, nifi-dialog-samp...@800px.png, > nifi-drop.svg, nifi-global-menu.png, nifi-interaction-and-menu-samples.png, > nifi-lineage-gra...@800px.png, nifi-logo.svg, nifi-sample-fl...@800px.png, > nifi-sample-flow.png, nifi-shell-samp...@800px.png > > > (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 > *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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: nifi-sample-flow.png) > 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, nifi-dialog-samp...@800px.png, > nifi-drop.svg, nifi-global-menu.png, nifi-interaction-and-menu-samples.png, > nifi-lineage-gra...@800px.png, nifi-logo.svg, nifi-sample-fl...@800px.png, > nifi-sample-flow.png, nifi-shell-samp...@800px.png > > > (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 > *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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: flowfont.zip > 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, nifi-dialog-samp...@800px.png, > nifi-drop.svg, nifi-global-menu.png, nifi-interaction-and-menu-samples.png, > nifi-lineage-gra...@800px.png, nifi-logo.svg, nifi-sample-fl...@800px.png, > nifi-sample-flow.png, nifi-shell-samp...@800px.png > > > (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 > *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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: flowfont.zip) > 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: 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, nifi-dialog-samp...@800px.png, > nifi-drop.svg, nifi-global-menu.png, nifi-interaction-and-menu-samples.png, > nifi-lineage-gra...@800px.png, nifi-logo.svg, nifi-sample-fl...@800px.png, > nifi-sample-flow.png, nifi-shell-samp...@800px.png > > > (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 > *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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Description: (I will attach mockups 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. --- *nifi-add-processor-dialog.png* Dialog sample. This sample shows the 'Add Processor' dialog. *nifi-component-samples.png* To show styling for all components *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-global-menu* To show global menu *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-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. was: (I will attach mockups 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. --- *nifi-add-processor-dialog.png* Dialog sample. This sample shows the 'Add Processor' dialog. *nifi-component-samples.png* To show styling for all components *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-global-menu* To show global menu *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-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. > 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: nifi-add-processor-dialog.png, > nifi-component-samples.png, > nifi-configure-processor-properties-set-value.png, > nifi-configure-processor-properties.png, >
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: nifi-configure-processor-properties.png nifi-configure-processor-properties-set-value.png > 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: 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, nifi-dialog-samp...@800px.png, > nifi-global-menu.png, nifi-interaction-and-menu-samples.png, > nifi-lineage-gra...@800px.png, nifi-sample-fl...@800px.png, > nifi-sample-flow.png, nifi-shell-samp...@800px.png > > > (I will attach mockups 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. > --- > *nifi-add-processor-dialog.png* > Dialog sample. This sample shows the 'Add Processor' dialog. > *nifi-component-samples.png* > To show styling for all components > *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-global-menu* > To show global menu > *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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: nifi-lineage-gra...@800px.png *nifi-lineage-graph-@800px* Added explicit action to return to event list. Currently it is not clear how to do this. Also added 'FlowFile Lineage' heading and the flowfile ID associated with the event from which the lineage graph was triggered. This gives more context to what the user initially sees. > 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: nifi-add-processor-dialog.png, > nifi-component-samples.png, nifi-configure-processor-scheduling.png, > nifi-configure-processor-settings.png, nifi-dialog-samp...@800px.png, > nifi-global-menu.png, nifi-interaction-and-menu-samples.png, > nifi-lineage-gra...@800px.png, nifi-sample-fl...@800px.png, > nifi-sample-flow.png, nifi-shell-samp...@800px.png > > > (I will attach mockups 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. > --- > *nifi-add-processor-dialog.png* > Dialog sample. This sample shows the 'Add Processor' dialog. > *nifi-component-samples.png* > To show styling for all components > *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-global-menu* > To show global menu > *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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: nifi-configure-processor-settings.png nifi-configure-processor-scheduling.png *nifi-configure-processor-settings* *nifi-configure-processor-scheduling* I wanted to comment on these two mockups as they demonstrate some ideas for change beyond just styling: The first is making the contents of this dialog scrollable. The thought here is to make the configuration workflow a little more efficient. As a user you could simply scroll or tab through the entire configuration process without having to move away to interact with tabs to move to another section. Tabs have been replaced with pills, that when clicked on will jump to that section. If you were to scroll or tab through the content, the corresponding pill for that section would highlight. Additionally, this scrollable model can accommodate any number of inputs and other settings-related controls depending on the type of processor and/or dynamic changes that may occur based on dependent settings. The second is context-sensitive help. In *nifi-configure-processor-settings* you can see as the 'Penalty Duration' input is in focus, help text appears to the right giving the user more insight to the task at hand. Help text for 'Yield Duration' is shown as well since it is together "on the same line." This also enables the user to stay focused on the configuration process without having to move away to hover a help icon. The third is starting to think a little more about language and making tasks for less-experienced users easier. In *nifi-configure-processor-scheduling* you'll see the scheduling section has been designed in such a way that reading through it gives a clear picture of the outcome – _schedule by time and run as often as possible._ Options related to 'CRON' would be exposed under 'show more time options.' Here we can provide more intuitive controls to set advanced time options instead of making the user enter a properly formatted expression they may not know. At the same time, we should continue to provide advanced users the ability to use that expression if they want. > 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: nifi-add-processor-dialog.png, > nifi-component-samples.png, nifi-configure-processor-scheduling.png, > nifi-configure-processor-settings.png, nifi-dialog-samp...@800px.png, > nifi-global-menu.png, nifi-interaction-and-menu-samples.png, > nifi-sample-fl...@800px.png, nifi-sample-flow.png, > nifi-shell-samp...@800px.png > > > (I will attach mockups 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. > --- > *nifi-add-processor-dialog.png* > Dialog sample. This sample shows the 'Add Processor' dialog. > *nifi-component-samples.png* > To show styling for all components > *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-global-menu* > To show global menu > *nifi-interaction-and-menu-samples.png* > To demonstrate user interactions - hover states, tooltips, menus, etc. > *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-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
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: nifi-add-processor-dialog.png) > 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: nifi-add-processor-dialog.png, > nifi-component-samples.png, nifi-dialog-samp...@800px.png, > nifi-global-menu.png, nifi-interaction-and-menu-samples.png, > nifi-sample-fl...@800px.png, nifi-sample-flow.png, > nifi-shell-samp...@800px.png > > > (I will attach mockups 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. > --- > *nifi-add-processor-dialog.png* > Dialog sample. This sample shows the 'Add Processor' dialog. > *nifi-component-samples.png* > To show styling for all components > *nifi-dialog-sample-@800px* > Dialog sample in 800px wide viewport. This sample shows the the 'Details' tab > of a provenance event. > *nifi-global-menu* > To show global menu > *nifi-interaction-and-menu-samples.png* > To demonstrate user interactions - hover states, tooltips, menus, etc. > *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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: nifi-sample-flow.png) > 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: nifi-component-samples.png > > > (I will attach mockups 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. > --- > *nifi-add-processor-dialog.png* (File is being updated; will re-attach when > complete) > Dialog sample > *nifi-component-samples.png* > To show styling for all components > *nifi-dialog-sample-@800px* > Dialog sample in 800px wide viewport. This sample shows the the 'Details' tab > of a provenance event. > *nifi-global-menu* > To show global menu > *nifi-interaction-and-menu-samples.png* > To demonstrate user interactions - hover states, tooltips, menus, etc. > *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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: nifi-interaction-and-menu-samples.png) > 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: nifi-component-samples.png > > > (I will attach mockups 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. > --- > *nifi-add-processor-dialog.png* (File is being updated; will re-attach when > complete) > Dialog sample > *nifi-component-samples.png* > To show styling for all components > *nifi-dialog-sample-@800px* > Dialog sample in 800px wide viewport. This sample shows the the 'Details' tab > of a provenance event. > *nifi-global-menu* > To show global menu > *nifi-interaction-and-menu-samples.png* > To demonstrate user interactions - hover states, tooltips, menus, etc. > *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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: nifi-add-processor-dialog.png) > 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: nifi-component-samples.png, > nifi-interaction-and-menu-samples.png, nifi-sample-flow.png > > > (I will attach mockups 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. > --- > *nifi-add-processor-dialog.png* (File is being updated; will re-attach when > complete) > Dialog sample > *nifi-component-samples.png* > To show styling for all components > *nifi-dialog-sample-@800px* > Dialog sample in 800px wide viewport. This sample shows the the 'Details' tab > of a provenance event. > *nifi-global-menu* > To show global menu > *nifi-interaction-and-menu-samples.png* > To demonstrate user interactions - hover states, tooltips, menus, etc. > *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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: nifi-head...@800px.png) > 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: nifi-component-samples.png, > nifi-interaction-and-menu-samples.png, nifi-sample-flow.png > > > (I will attach mockups 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. > --- > *nifi-add-processor-dialog.png* (File is being updated; will re-attach when > complete) > Dialog sample > *nifi-component-samples.png* > To show styling for all components > *nifi-dialog-sample-@800px* > Dialog sample in 800px wide viewport. This sample shows the the 'Details' tab > of a provenance event. > *nifi-global-menu* > To show global menu > *nifi-interaction-and-menu-samples.png* > To demonstrate user interactions - hover states, tooltips, menus, etc. > *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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: nifi-global-menu.png) > 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: nifi-component-samples.png, > nifi-interaction-and-menu-samples.png, nifi-sample-flow.png > > > (I will attach mockups 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. > --- > *nifi-add-processor-dialog.png* (File is being updated; will re-attach when > complete) > Dialog sample > *nifi-component-samples.png* > To show styling for all components > *nifi-dialog-sample-@800px* > Dialog sample in 800px wide viewport. This sample shows the the 'Details' tab > of a provenance event. > *nifi-global-menu* > To show global menu > *nifi-interaction-and-menu-samples.png* > To demonstrate user interactions - hover states, tooltips, menus, etc. > *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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: nifi-shell-samp...@800px.png nifi-sample-flow.png nifi-sample-fl...@800px.png nifi-interaction-and-menu-samples.png nifi-global-menu.png nifi-dialog-samp...@800px.png > 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: nifi-component-samples.png, > nifi-dialog-samp...@800px.png, nifi-global-menu.png, > nifi-interaction-and-menu-samples.png, nifi-sample-fl...@800px.png, > nifi-sample-flow.png, nifi-shell-samp...@800px.png > > > (I will attach mockups 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. > --- > *nifi-add-processor-dialog.png* (File is being updated; will re-attach when > complete) > Dialog sample > *nifi-component-samples.png* > To show styling for all components > *nifi-dialog-sample-@800px* > Dialog sample in 800px wide viewport. This sample shows the the 'Details' tab > of a provenance event. > *nifi-global-menu* > To show global menu > *nifi-interaction-and-menu-samples.png* > To demonstrate user interactions - hover states, tooltips, menus, etc. > *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-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)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Description: (I will attach mockups 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. --- *nifi-add-processor-dialog.png* (File is being updated; will re-attach when complete) Dialog sample *nifi-component-samples.png* To show styling for all components *nifi-dialog-sample-@800px* Dialog sample in 800px wide viewport. This sample shows the the 'Details' tab of a provenance event. *nifi-global-menu* To show global menu *nifi-interaction-and-menu-samples.png* To demonstrate user interactions - hover states, tooltips, menus, etc. *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-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. was: (I will attach mockups 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. --- *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-header-@800px_) *nifi-global-menu* To show global menu *nifi-header-@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-interaction-and-menu-samples.png* To demonstrate user interactions - hover states, tooltips, menus, etc. *nifi-add-processor-dialog.png* Dialog sample *nifi-component-samples.png* To show styling for all components _Will be updating this soon to reflect recent design changes_ > 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: nifi-add-processor-dialog.png, > nifi-component-samples.png, nifi-global-menu.png, nifi-head...@800px.png, > nifi-interaction-and-menu-samples.png, nifi-sample-flow.png > > > (I will attach mockups 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. > --- > *nifi-add-processor-dialog.png* (File is being updated; will re-attach when > complete) > Dialog sample > *nifi-component-samples.png* > To show styling for all components > *nifi-dialog-sample-@800px* > Dialog sample in 800px wide viewport. This sample shows the the 'Details' tab > of a provenance event. >
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: nifi-component-samples.png > 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: nifi-add-processor-dialog.png, > nifi-component-samples.png, nifi-global-menu.png, nifi-head...@800px.png, > nifi-interaction-and-menu-samples.png, nifi-sample-flow.png > > > (I will attach mockups 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. > --- > *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-header-@800px_) > *nifi-global-menu* > To show global menu > *nifi-header-@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-interaction-and-menu-samples.png* > To demonstrate user interactions - hover states, tooltips, menus, etc. > *nifi-add-processor-dialog.png* > Dialog sample > *nifi-component-samples.png* > To show styling for all components > _Will be updating this soon to reflect recent design changes_ -- This message was sent by Atlassian JIRA (v6.3.4#6332)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: nifi-component-samples.png) > 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: nifi-add-processor-dialog.png, > nifi-component-samples.png, nifi-global-menu.png, nifi-head...@800px.png, > nifi-interaction-and-menu-samples.png, nifi-sample-flow.png > > > (I will attach mockups 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. > --- > *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-header-@800px_) > *nifi-global-menu* > To show global menu > *nifi-header-@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-interaction-and-menu-samples.png* > To demonstrate user interactions - hover states, tooltips, menus, etc. > *nifi-add-processor-dialog.png* > Dialog sample > *nifi-component-samples.png* > To show styling for all components > _Will be updating this soon to reflect recent design changes_ -- This message was sent by Atlassian JIRA (v6.3.4#6332)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: nifi-sample-flow.png nifi-interaction-and-menu-samples.png nifi-head...@800px.png nifi-global-menu.png > 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: nifi-add-processor-dialog.png, > nifi-component-samples.png, nifi-global-menu.png, nifi-head...@800px.png, > nifi-interaction-and-menu-samples.png, nifi-sample-flow.png > > > (I will attach mockups 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. > --- > *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-header-@800px_) > *nifi-global-menu* > To show global menu > *nifi-header-@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-interaction-and-menu-samples.png* > To demonstrate user interactions - hover states, tooltips, menus, etc. > _Will be updating this soon reflect recent design changes_ > *nifi-add-processor-dialog.png* > Dialog sample > _Will be updating this soon reflect recent design changes_ > *nifi-component-samples.png* > To show styling for all components > _Will be updating this soon reflect recent design changes_ -- This message was sent by Atlassian JIRA (v6.3.4#6332)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Description: (I will attach mockups 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. --- *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-header-@800px_) *nifi-global-menu* To show global menu *nifi-header-@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-interaction-and-menu-samples.png* To demonstrate user interactions - hover states, tooltips, menus, etc. *nifi-add-processor-dialog.png* Dialog sample *nifi-component-samples.png* To show styling for all components _Will be updating this soon to reflect recent design changes_ was: (I will attach mockups 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. --- *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-header-@800px_) *nifi-global-menu* To show global menu *nifi-header-@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-interaction-and-menu-samples.png* To demonstrate user interactions - hover states, tooltips, menus, etc. _Will be updating this soon reflect recent design changes_ *nifi-add-processor-dialog.png* Dialog sample _Will be updating this soon reflect recent design changes_ *nifi-component-samples.png* To show styling for all components _Will be updating this soon reflect recent design changes_ > 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: nifi-add-processor-dialog.png, > nifi-component-samples.png, nifi-global-menu.png, nifi-head...@800px.png, > nifi-interaction-and-menu-samples.png, nifi-sample-flow.png > > > (I will attach mockups 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. > --- > *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-header-@800px_) > *nifi-global-menu* >
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: nifi-sample-flow.png) > 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: nifi-add-processor-dialog.png, nifi-component-samples.png > > > (I will attach mockups 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. > --- > *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-header-@800px_) > *nifi-global-menu* > To show global menu > *nifi-header-@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-interaction-and-menu-samples.png* > To demonstrate user interactions - hover states, tooltips, menus, etc. > _Will be updating this soon reflect recent design changes_ > *nifi-add-processor-dialog.png* > Dialog sample > _Will be updating this soon reflect recent design changes_ > *nifi-component-samples.png* > To show styling for all components > _Will be updating this soon reflect recent design changes_ -- This message was sent by Atlassian JIRA (v6.3.4#6332)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: nifi-head...@800px.png) > 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: nifi-add-processor-dialog.png, nifi-component-samples.png > > > (I will attach mockups 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. > --- > *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-header-@800px_) > *nifi-global-menu* > To show global menu > *nifi-header-@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-interaction-and-menu-samples.png* > To demonstrate user interactions - hover states, tooltips, menus, etc. > _Will be updating this soon reflect recent design changes_ > *nifi-add-processor-dialog.png* > Dialog sample > _Will be updating this soon reflect recent design changes_ > *nifi-component-samples.png* > To show styling for all components > _Will be updating this soon reflect recent design changes_ -- This message was sent by Atlassian JIRA (v6.3.4#6332)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: nifi-add-processor-dialog.png > 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: nifi-add-processor-dialog.png, > nifi-add-processor-dialog.png, nifi-component-samples.png, > nifi-global-menu.png, nifi-head...@800px.png, > nifi-interaction-and-menu-samples.png, nifi-sample-flow.png > > > (I will attach mockups 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. > --- > *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-header-@800px_) > *nifi-global-menu* > To show global menu > *nifi-header-@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-interaction-and-menu-samples.png* > To demonstrate user interactions - hover states, tooltips, menus, etc. > _Will be updating this soon reflect recent design changes_ > *nifi-add-processor-dialog.png* > Dialog sample > _Will be updating this soon reflect recent design changes_ > *nifi-component-samples.png* > To show styling for all components > _Will be updating this soon reflect recent design changes_ -- This message was sent by Atlassian JIRA (v6.3.4#6332)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: nifi-add-processor-dialog.png) > 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: nifi-add-processor-dialog.png, > nifi-component-samples.png, nifi-global-menu.png, nifi-head...@800px.png, > nifi-interaction-and-menu-samples.png, nifi-sample-flow.png > > > (I will attach mockups 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. > --- > *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-header-@800px_) > *nifi-global-menu* > To show global menu > *nifi-header-@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-interaction-and-menu-samples.png* > To demonstrate user interactions - hover states, tooltips, menus, etc. > _Will be updating this soon reflect recent design changes_ > *nifi-add-processor-dialog.png* > Dialog sample > _Will be updating this soon reflect recent design changes_ > *nifi-component-samples.png* > To show styling for all components > _Will be updating this soon reflect recent design changes_ -- This message was sent by Atlassian JIRA (v6.3.4#6332)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Description: (I will attach mockups 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. --- *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-header-@800px_) *nifi-global-menu* To show global menu *nifi-header-@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-interaction-and-menu-samples.png* To demonstrate user interactions - hover states, tooltips, menus, etc. _Will be updating this soon reflect recent design changes_ *nifi-add-processor-dialog.png* Dialog sample _Will be updating this soon reflect recent design changes_ *nifi-component-samples.png* To show styling for all components _Will be updating this soon reflect recent design changes_ was: (I will attach mockups 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. --- *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. 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-header-@800px_) *nifi-header-@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-interaction-and-menu-samples.png* To demonstrate user interactions - hover states, tooltips, menus, etc. _Will be updating this soon reflect recent design changes_ *nifi-add-processor-dialog.png* Dialog sample _Will be updating this soon reflect recent design changes_ *nifi-component-samples.png* To show styling for all components _Will be updating this soon reflect recent design changes_ > 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: nifi-add-processor-dialog.png, > nifi-component-samples.png, nifi-global-menu.png, nifi-head...@800px.png, > nifi-interaction-and-menu-samples.png, nifi-sample-flow.png > > > (I will attach mockups 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. > --- > *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 >
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: nifi-global-menu.png > 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: nifi-add-processor-dialog.png, > nifi-component-samples.png, nifi-global-menu.png, nifi-head...@800px.png, > nifi-interaction-and-menu-samples.png, nifi-sample-flow.png > > > (I will attach mockups 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. > --- > *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-header-@800px_) > *nifi-global-menu* > To show global menu > *nifi-header-@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-interaction-and-menu-samples.png* > To demonstrate user interactions - hover states, tooltips, menus, etc. > _Will be updating this soon reflect recent design changes_ > *nifi-add-processor-dialog.png* > Dialog sample > _Will be updating this soon reflect recent design changes_ > *nifi-component-samples.png* > To show styling for all components > _Will be updating this soon reflect recent design changes_ -- This message was sent by Atlassian JIRA (v6.3.4#6332)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: nifi-sample-flow.png) > 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: nifi-add-processor-dialog.png, > nifi-component-samples.png, nifi-interaction-and-menu-samples.png > > > (I will attach mockups 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. > --- > *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. 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-header-@800px_) > *nifi-header-@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-interaction-and-menu-samples.png* > To demonstrate user interactions - hover states, tooltips, menus, etc. > _Will be updating this soon reflect recent design changes_ > *nifi-add-processor-dialog.png* > Dialog sample > _Will be updating this soon reflect recent design changes_ > *nifi-component-samples.png* > To show styling for all components > _Will be updating this soon reflect recent design changes_ -- This message was sent by Atlassian JIRA (v6.3.4#6332)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Description: (I will attach mockups 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. --- *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. 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-header-@800px_) *nifi-header-@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-interaction-and-menu-samples.png* To demonstrate user interactions - hover states, tooltips, menus, etc. _Will be updating this soon reflect recent design changes_ *nifi-add-processor-dialog.png* Dialog sample _Will be updating this soon reflect recent design changes_ *nifi-component-samples.png* To show styling for all components _Will be updating this soon reflect recent design changes_ was: (I will attach mockups 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. --- *nifi-sample-flow.png* Mockup of sample flow *nifi-interaction-and-menu-samples.png* To demonstrate user interactions - hover states, tooltips, menus, etc. *nifi-add-processor-dialog.png* Dialog sample *nifi-component-samples.png* To show styling for all components > 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: nifi-add-processor-dialog.png, > nifi-component-samples.png, nifi-interaction-and-menu-samples.png, > nifi-sample-flow.png > > > (I will attach mockups 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. > --- > *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. 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-header-@800px_) > *nifi-header-@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-interaction-and-menu-samples.png* > To demonstrate user interactions - hover states, tooltips, menus, etc. > _Will be updating this soon reflect recent design changes_ > *nifi-add-processor-dialog.png* > Dialog sample > _Will be updating this soon reflect recent design changes_ > *nifi-component-samples.png* > To show styling for all components > _Will be updating this soon reflect recent design changes_ -- This message was sent by Atlassian JIRA (v6.3.4#6332)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: nifi-sample-flow.png nifi-head...@800px.png > 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: nifi-add-processor-dialog.png, > nifi-component-samples.png, nifi-head...@800px.png, > nifi-interaction-and-menu-samples.png, nifi-sample-flow.png > > > (I will attach mockups 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. > --- > *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. 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-header-@800px_) > *nifi-header-@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-interaction-and-menu-samples.png* > To demonstrate user interactions - hover states, tooltips, menus, etc. > _Will be updating this soon reflect recent design changes_ > *nifi-add-processor-dialog.png* > Dialog sample > _Will be updating this soon reflect recent design changes_ > *nifi-component-samples.png* > To show styling for all components > _Will be updating this soon reflect recent design changes_ -- This message was sent by Atlassian JIRA (v6.3.4#6332)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Description: (I will attach mockups 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. --- *nifi-sample-flow.png* Mockup of sample flow *nifi-interaction-and-menu-samples.png* To demonstrate user interactions - hover states, tooltips, menus, etc. *nifi-add-processor-dialog.png* Dialog sample *nifi-component-samples.png* To show styling for all components was: (I will attach mockups 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. > 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: nifi-add-processor-dialog.png, > nifi-component-samples.png, nifi-interaction-and-menu-samples.png, > nifi-sample-flow.png > > > (I will attach mockups 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. > --- > *nifi-sample-flow.png* > Mockup of sample flow > *nifi-interaction-and-menu-samples.png* > To demonstrate user interactions - hover states, tooltips, menus, etc. > *nifi-add-processor-dialog.png* > Dialog sample > *nifi-component-samples.png* > To show styling for all components -- This message was sent by Atlassian JIRA (v6.3.4#6332)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: (was: nifiRedesign_2016-01-06.png) > 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: nifi-add-processor-dialog.png, > nifi-component-samples.png, nifi-interaction-and-menu-samples.png, > nifi-sample-flow.png > > > (I will attach mockups 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. -- This message was sent by Atlassian JIRA (v6.3.4#6332)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: nifiRedesign_2016-01-06.png Minor update - slightly bumped up black level of grid background and matched background of breadcrumbs to the dockable panels. > 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: 0.6.0 >Reporter: Rob Moran >Priority: Trivial > Attachments: nifiRedesign_2016-01-06.png > > > (I will attach mockups 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. -- This message was sent by Atlassian JIRA (v6.3.4#6332)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Affects Version/s: (was: 0.5.0) 0.6.0 > 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: 0.6.0 >Reporter: Rob Moran >Priority: Trivial > > (I will attach mockups 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. -- This message was sent by Atlassian JIRA (v6.3.4#6332)
[jira] [Updated] (NIFI-1323) UI visual design enhancement
[ https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ] Rob Moran updated NIFI-1323: Attachment: nifiRedesign_2016-01-06.png > 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: 0.6.0 >Reporter: Rob Moran >Priority: Trivial > Attachments: nifiRedesign_2016-01-06.png > > > (I will attach mockups 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. -- This message was sent by Atlassian JIRA (v6.3.4#6332)