Weekly Design/Dev MeetingL Content Views

https://docs.google.com/document/d/1Oqh0o676iS6ME9gGBPGCs-ToL8yDM882bIJZNNYcfOo/edit

Dev/Design Weekly Review - Content Views

Presented by Brad Buckingham

Create New Version button should be blue.

Sync Status should be icon - When blue hover is active you cannot see status

List/Remove/Add – Can these be added together? Will work on some design
concepts.

Also - second row tabs are usually line style, not box style.
(http://www.patternfly.org/pattern-library/widgets/#tabs)

Reduce redundancy of always use latest and specific version. Filtering for
use latest?

Space between tabs… too crowded.

Security icon should be red with capitalized S

Can Affected Repositories be included into building a filter?

Use PF Calendar.
(http://www.patternfly.org/pattern-library/forms-and-controls/datepicker/)

Success item should have icon

If Publish New Version is main item, make blue and break out other items.
Otherwise relabel actions with drop down (I believe this is what we are
moving forward with in other parts of the UI).

“De” and “dev-2” are serif typeface. Change to match other step typefaces

This life cycle graphic breaks frequently… I will work on an alternate
design.

User Help icon for help text on Composite View.

Can we use this same “Always Use Latest” drop down on the previous content
views

-Edit view is the same as previous content view?

If there is no data, put statement that there is no content, do not use
inline message box.

Grey box should be error and appear on checkbox click. Change button to
Cancel or Submit

··· -

Organization dropdown doesn’t match patternfly

New layout that communicates changes better. This is too generic.

Placement of buttons poor

This wizard doesn’t have steps, introduce new wizard.

Table scrolls which is unusual instead of pagination or longer page
scroll

Date is not handled consistently in tables (I know this is being
addressed)

Add additional information to bar, lets see the numbers especially on
failure. Do we want to keep mimicking dynaflow?

Number of column headers and columns do not match.

Thanks for compiling this list. I have either filed issues, linked to
issues, or asked clarifying questions below.

Thanks,
Walden

> Create New Version button should be blue.

http://projects.theforeman.org/issues/19282

> Sync Status should be icon - When blue hover is active you cannot see
status

What icon would you suggest here?

> List/Remove/Add – Can these be added together? Will work on some design
concepts.

I would love to see these pages combined.

> Also - second row tabs are usually line style, not box style. (
http://www.patternfly.org/pattern-library/widgets/#tabs)

Even when there is spacing between them? In this case there is an <h3>
between the tabs.

> Reduce redundancy of always use latest and specific version. Filtering
for use latest?

What if we added "use latest" as its own column?

> Space between tabs… too crowded.

But even on http://www.patternfly.org/pattern-library/widgets/#tabs there
is no space. I think we need PF to address this use case rather than me
adding custom styling into katello.

> Security icon should be red with capitalized S

Not sure what you are talking about here. I don't see the word security in
the screenshot.

> Can Affected Repositories be included into building a filter?

As in part of a wizard or something? Maybe but the user will still need
the ability to edit these post filter creation.

> Use PF Calendar. (http://www.patternfly.org/pattern-library/forms-and-
controls/datepicker/)

http://projects.theforeman.org/issues/17667

> Success item should have icon

What icon should be used for this?

> If Publish New Version is main item, make blue and break out other items.
Otherwise relabel actions with drop down (I believe this is what we are
moving forward with in other parts of the UI).

http://projects.theforeman.org/issues/19287

> “De” and “dev-2” are serif typeface. Change to match other step typefaces

http://projects.theforeman.org/issues/19139
> User Help icon for help text on Composite View.

Instead of using the bs3 standard help text that appears under form fields?

> Edit view is the same as previous content view?
> Can we use this same “Always Use Latest” drop down on the previous
content views

http://projects.theforeman.org/issues/19286

> If there is no data, put statement that there is no content, do not use
inline message box.

Is there a pattern for this? What styling should this comment use?

> Grey box should be error and appear on checkbox click. Change button to
Cancel or Submit

This was handled as part of Bug #19166: Fix styling issues on CV deletion pages - Katello - Foreman

> Organization dropdown doesn’t match patternfly

http://projects.theforeman.org/issues/19285

> New layout that communicates changes better. This is too generic.

What do you mean by this?

> Placement of buttons poor

http://projects.theforeman.org/issues/19166

> This wizard doesn’t have steps, introduce new wizard.

http://projects.theforeman.org/issues/17345

> Table scrolls which is unusual instead of pagination or longer page scroll

This is fixed now in master, all tables now use pagination.

> Date is not handled consistently in tables (I know this is being
addressed)

I am unaware of and date consistency work, maybe in Foreman?

> Add additional information to bar, lets see the numbers especially on
failure. Do we want to keep mimicking dynaflow?

What additional information should we add here?

> Number of column headers and columns do not match.

http://projects.theforeman.org/issues/19283

··· On Wed, Apr 12, 2017 at 2:39 PM, Roxanne Hoover wrote:

https://docs.google.com/document/d/1Oqh0o676iS6ME9gGBPGCs-
ToL8yDM882bIJZNNYcfOo/edit

Dev/Design Weekly Review - Content Views

Presented by Brad Buckingham

Create New Version button should be blue.

Sync Status should be icon - When blue hover is active you cannot see
status

List/Remove/Add – Can these be added together? Will work on some design
concepts.

Also - second row tabs are usually line style, not box style. (
http://www.patternfly.org/pattern-library/widgets/#tabs)

Reduce redundancy of always use latest and specific version. Filtering for
use latest?

Space between tabs… too crowded.

Security icon should be red with capitalized S

Can Affected Repositories be included into building a filter?

Use PF Calendar. (http://www.patternfly.org/pattern-library/forms-and-
controls/datepicker/)

Success item should have icon

If Publish New Version is main item, make blue and break out other items.
Otherwise relabel actions with drop down (I believe this is what we are
moving forward with in other parts of the UI).

“De” and “dev-2” are serif typeface. Change to match other step typefaces

This life cycle graphic breaks frequently… I will work on an alternate
design.

User Help icon for help text on Composite View.

Can we use this same “Always Use Latest” drop down on the previous content
views

-Edit view is the same as previous content view?

If there is no data, put statement that there is no content, do not use
inline message box.

Grey box should be error and appear on checkbox click. Change button to
Cancel or Submit

Organization dropdown doesn’t match patternfly

New layout that communicates changes better. This is too generic.

Placement of buttons poor

This wizard doesn’t have steps, introduce new wizard.

Table scrolls which is unusual instead of pagination or longer page
scroll

Date is not handled consistently in tables (I know this is being
addressed)

Add additional information to bar, lets see the numbers especially on
failure. Do we want to keep mimicking dynaflow?

Number of column headers and columns do not match.


You received this message because you are subscribed to the Google Groups
"foreman-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an
email to foreman-dev+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

>
> Thanks for compiling this list. I have either filed issues, linked to
> issues, or asked clarifying questions below.
>
> Thanks,
> Walden
>
>
> > Create New Version button should be blue.
>
> Bug #19282: Create New View button should be blue on content view page - Katello - Foreman
>
> > Sync Status should be icon - When blue hover is active you cannot see
> status
>
> What icon would you suggest here?
> Depends on the status… but usually we're using the green/yellow/grey
> colors with either dots or checks, errors or warning icons.
>

> > List/Remove/Add – Can these be added together? Will work on some
> design concepts.
>
> I would love to see these pages combined.
> I've got it on my list to work on this component. I'll be sure to send any
> ideas over to you for feasibility and feedback.
>

> > Also - second row tabs are usually line style, not box style. (
> http://www.patternfly.org/pattern-library/widgets/#tabs
> <http://www.google.com/url?q=http%3A%2F%2Fwww.patternfly.org%2Fpattern-library%2Fwidgets%2F%23tabs&sa=D&sntz=1&usg=AFQjCNHoEaI6Wso0V9pXd-N6pdQ0tPqffg>
> )
>
> Even when there is spacing between them? In this case there is an <h3>
> between the tabs.
>
I think the pattern calls for the line style when they are secondary to the
main tab (which I think is the case here). As a side note, I'm seeing
instances where main tabs are going onto second rows, that is not ideal. No
comment on solution, just observation.

>
> > Reduce redundancy of always use latest and specific version. Filtering
> for use latest?
>
> What if we added "use latest" as its own column?
>
+1

>
>
> > Space between tabs… too crowded.
>
>
> But even on http://www.patternfly.org/pattern-library/widgets/#tabs there
> is no space. I think we need PF to address this use case rather than me
> adding custom styling into katello.
>
I don't disagree. I also think the issue I mentioned before of tabs flowing
to second row contribute to this spacing issue.

>
> > Security icon should be red with capitalized S
>
> Not sure what you are talking about here. I don't see the word security
> in the screenshot.
>
Sorry - my mistake, I try to take notes while taking screenshots at the
same time. Looks like I may have misplaced something.

>
> > Can Affected Repositories be included into building a filter?
>
> As in part of a wizard or something? Maybe but the user will still need
> the ability to edit these post filter creation.
>
> > Use PF Calendar. (
> http://www.patternfly.org/pattern-library/forms-and-controls/datepicker/)
>
> Refactor #17667: Katello should be using patternfly date and time pickers - Bastion - Foreman
>
> > Success item should have icon
>
> What icon should be used for this?
>
See previous icon answer. I think the bigger issue is being consistent on
how we handle status and having good reason when we deviate. Sometimes now
I see icons, words, etc.

>
> > If Publish New Version is main item, make blue and break out other
> items. Otherwise relabel actions with drop down (I believe this is what we
> are moving forward with in other parts of the UI).
>
> Bug #19287: Make "Publish New Version" it's own button on the content view details page - Katello - Foreman
>
> > “De” and “dev-2” are serif typeface. Change to match other step
> typefaces
>
> Bug #19139: Styling of suggested environment is using incorrect font in path selector - Bastion - Foreman
> > User Help icon for help text on Composite View.
>
> Instead of using the bs3 standard help text that appears under form fields?
>
I've been going with our field level help
(http://www.patternfly.org/pattern-library/forms-and-controls/field-level-help/).
BTW - that icon is not updated…

>
>

>
> > Edit view is the same as previous content view?
> > Can we use this same “Always Use Latest” drop down on the previous
> content views
>
> Bug #19286: Composite Content View: use same dropdown as Add Content View for List/Remove CV as from the Add page - Katello - Foreman
>
> > If there is no data, put statement that there is no content, do not use
> inline message box.
>
> Is there a pattern for this? What styling should this comment use?
>
I don't think PatternFly has a pattern. I can mock something up if you'd
like. I don't like using the messaging box because it starts diluting the
purpose of that box.

>
> > Grey box should be error and appear on checkbox click. Change button to
> Cancel or Submit
>
> This was handled as part of Bug #19166: Fix styling issues on CV deletion pages - Katello - Foreman
>
> > Organization dropdown doesn’t match patternfly
>
> Bug #19285: Select inputs on content view deletion are not correctly styled - Katello - Foreman
>
> > New layout that communicates changes better. This is too generic.
>
> What do you mean by this?
>
I can do a layout. I think the page information lacks visual hierarchy.

>
>
> > Placement of buttons poor
>
> Bug #19166: Fix styling issues on CV deletion pages - Katello - Foreman
>
> > This wizard doesn’t have steps, introduce new wizard.
>
> Refactor #17345: Content view deletion should use patternfly wizard - Katello - Foreman
>
> > Table scrolls which is unusual instead of pagination or longer page
> scroll
>
> This is fixed now in master, all tables now use pagination.
>
> > Date is not handled consistently in tables (I know this is being
> addressed)
>
> I am unaware of and date consistency work, maybe in Foreman?
>
Marek is doing work around this.

>
> > Add additional information to bar, lets see the numbers especially on
> failure. Do we want to keep mimicking dynaflow?
>
> What additional information should we add here?
>
Perhaps things like percentage complete, or x out of x. I think just the
green bar isn't super informative.

>
> > Number of column headers and columns do not match.
>

Thanks Walden!

··· On Monday, April 17, 2017 at 12:57:50 PM UTC-4, Walden Raines wrote:

Bug #19283: Table columns are misaligned on content view filter repositories page - Katello - Foreman

On Wed, Apr 12, 2017 at 2:39 PM, Roxanne Hoover <roho...@redhat.com > <javascript:>> wrote:

https://docs.google.com/document/d/1Oqh0o676iS6ME9gGBPGCs-ToL8yDM882bIJZNNYcfOo/edit

Dev/Design Weekly Review - Content Views

Presented by Brad Buckingham

Create New Version button should be blue.

Sync Status should be icon - When blue hover is active you cannot see
status

List/Remove/Add – Can these be added together? Will work on some design
concepts.

Also - second row tabs are usually line style, not box style. (
http://www.patternfly.org/pattern-library/widgets/#tabs)

Reduce redundancy of always use latest and specific version. Filtering
for use latest?

Space between tabs… too crowded.

Security icon should be red with capitalized S

Can Affected Repositories be included into building a filter?

Use PF Calendar. (
http://www.patternfly.org/pattern-library/forms-and-controls/datepicker/)

Success item should have icon

If Publish New Version is main item, make blue and break out other items.
Otherwise relabel actions with drop down (I believe this is what we are
moving forward with in other parts of the UI).

“De” and “dev-2” are serif typeface. Change to match other step typefaces

This life cycle graphic breaks frequently… I will work on an alternate
design.

User Help icon for help text on Composite View.

Can we use this same “Always Use Latest” drop down on the previous
content views

-Edit view is the same as previous content view?

If there is no data, put statement that there is no content, do not use
inline message box.

Grey box should be error and appear on checkbox click. Change button to
Cancel or Submit

Organization dropdown doesn’t match patternfly

New layout that communicates changes better. This is too generic.

Placement of buttons poor

This wizard doesn’t have steps, introduce new wizard.

Table scrolls which is unusual instead of pagination or longer page
scroll

Date is not handled consistently in tables (I know this is being
addressed)

Add additional information to bar, lets see the numbers especially on
failure. Do we want to keep mimicking dynaflow?

Number of column headers and columns do not match.


You received this message because you are subscribed to the Google Groups
"foreman-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an
email to foreman-dev...@googlegroups.com <javascript:>.
For more options, visit https://groups.google.com/d/optout.