[
https://issues.apache.org/jira/browse/NIFI-2603?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=15437498#comment-15437498
]
Scott Aslan commented on NIFI-2603:
-----------------------------------
Hello,
I have taken a look at the work Patrick completed and I agree it is a great
start! While I like the colors you have chosen for the play and the stop I am
not too sure about the new yellow color for the warning and bulletins. I think
we should open this discussion up and gain a consensus of what the final colors
for these icons should be.
I would also like to open a discussion pertaining to when it would be
appropriate to color an icon. I feel like a good rule of thumb would be that we
only change color for an icon that is reporting status AND that status provides
valuable feedback worthy of drawing the attention from the user. What do you
guys think? Check out the examples below to get a better idea of what I mean:
Ex 1: In the flow status bar across the top I think we should only apply the
green color to the play icon if there is > 0 processors running and otherwise
it should keep the current #004849. This way the users eye will be drawn to
icons with color but we will not be drawing their eye to color that does not
provide value.
Ex 2: In the ‘Operate Palette’ and the ‘Context Menu’ coloring of the play and
stop button on hover is unnecessary as these buttons invoke an action but do
not report status.
I have created a list of what the current color is and the colors proposed.
Additionally, I have included the transmitting/not-transmitting icons as well
as the enabled/disabled icons as these icons in the flow status bar and on the
graph fall under the “reports status AND that status provides valuable feedback
worthy of drawing the attention from the user”. I am not sure if we would want
different colors for each of these??? …maybe we would want to reuse the CSS
class .running to represent all positive icons like play, enabled, and
transmitting and then use the .stopped class for negative icons like
not-transmitting/disabled...should come up with better names if we go this
route.
If anyone has other icons you think we should consider in this list please add
to this discussion.
Icons and their color:
has-errors, invalid, and has-bulletin css classes: current #ba554a,
proposed: #f0ad4e, final: ???
fa-play/.running: current: #004849, proposed: #5cb85c, final: ???
fa-stop/.stopped: current: #004849, proposed: #d9534f, final: ???
fa-bullseye/.transmitting: current: #004849, proposed: ???, final: ???
icon-transmit-false/.not-transmitting: current: #004849, proposed: ???,
final: ???
icon-enable-false/.disabled: current: #004849, proposed: ???, final: ???
fa-flash/.enabled: current: #004849, proposed: ???, final: ???
I have also pulled down https://github.com/patricker/nifi/tree/NIFI-2603 and
would like to give some feedback here to give a little more detail:
1. We are always excited to have contributions from the community - especially
from new contributors! That said please squash these commits on your branch
down into a single commit and please make sure to add [NIFI-2603] in the commit
description. You may also want to assign
https://issues.apache.org/jira/browse/NIFI-2603 to yourself. If you need more
guidance on how the process works I will be happy to help guide you and provide
you with more information.
2. common-ui.css
1. I like the strategy of creating several css classes that could be
applied with !important as you did in common-ui.css with .running, .stopped,
.invalid. each of these should have a color defined and a !important so to be
sure to apply the color when the class is present. Then we should be able to
conditionally apply these classes later on…
1. If it is decided that we should reuse the same colors for all
positive icons (and vice versa) then the names of these CSS classes should
probably change to reflect that…we wouldn’t want to apply the class .running to
a transmitting icon.
2. Please remove div.context-menu-item.hover >
div.context-menu-item-img.fa.fa-play and div.context-menu-item.hover >
div.context-menu-item-img.fa.fa-stop styles as these buttons invoke an action
but do not report status
3. flow-status.css
1. Remove the styles for #flow-status .fa.fa-*
2. We will also need to conditionally add .running/.stopped/etc. (or
whatever the class names end up being) classes to the icons in the flow status
bar. Look at nf-ng-canvas-flow-status-controller.js and add some logic to only
apply the .running style to the play icon only if the value is greater than 0.
Also will need to complete a similar task for each of the following flow status
icons.
1. Play
2. Stop
3. Warn
4. Transmitting
5. Not-Transmitting
6. Enabled
7. Disabled
3. Update colors to whatever color is decided by consensus (see comments in
Icons and their color section)
4. graph.css
1. Update colors to whatever color is decided by consensus (see comments in
Icons and their color section)
5.
nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css
1. Update colors to whatever color is decided by consensus (see comments in
Icons and their color section)
6.
nifi/nifi-nar-bundles/nifi-update-attribute-bundle/nifi-update-attribute-ui/src/main/webapp/css/main.css
1. Update colors to whatever color is decided by consensus (see comments in
Icons and their color section)
7. navigation.css
1. Please remove the hover styles for #operate-start and #operate-stop.
8. The rest of the files look like my comments will be the same: We will need
to update the colors to whatever final decisions we come to. However, much like
you did for ‘running’, ‘stopped’, and ‘invalid’ states in nf-processor.js and
nf-summary-table.js we will also need to update the transmitting,
not-transmitting, enabled. disabled, and warn icons on processors/groups/ports
on the graph and in the summary table…and possible in the Controller Services
and Reporting Task tables as well.
I think that covers it for now…[~rmoran] [~mcgilman] anything to add?
> Bringing Some UI Color Back
> ---------------------------
>
> Key: NIFI-2603
> URL: https://issues.apache.org/jira/browse/NIFI-2603
> Project: Apache NiFi
> Issue Type: Improvement
> Components: Core UI
> Reporter: Peter Wicks
> Priority: Minor
>
> In the new 1.0 UI all of the colors associated with status (except the orange
> triangle) are gone; replaced with a dark gray color.
> I propose bringing back color. The screenshots are in the format of before
> on the top and after on the bottom, except were labeled in the picture itself:
> - Top Status Menu: https://goo.gl/photos/se1JnvhRwU7N4Fap7
> - Process Group: https://goo.gl/photos/dqjG4KvC6xqxQfgT7
> - Processes (Running/Stopped/Invalid):
> https://goo.gl/photos/dSS8vgE2RkrXtc77A
> - Operate Play/Stop buttons (only on mouse hover):
> https://goo.gl/photos/Am5SUEEn7G9RjmMe6
> - Processor/Processor Group Context Menu:
> https://goo.gl/photos/Jq3qFg4ezaN91qms5
> This is not a "100% done, I've covered everything" before/after list. I know
> I need to do the NiFi summary page also at the minimum.
--
This message was sent by Atlassian JIRA
(v6.3.4#6332)
