Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update UI assets from Font awesome to Material Icons #2405

Closed
Lindsayauchin opened this issue Jul 23, 2018 · 16 comments

Comments

@Lindsayauchin
Copy link
Contributor

@Lindsayauchin Lindsayauchin commented Jul 23, 2018

Resourse Page:

Current:

screen shot 2018-08-08 at 11 34 06 am

New:

screen shot 2018-08-08 at 11 34 50 am

Assets:

chevrons_pagination.zip

Build Page:

Current:

screen shot 2018-08-08 at 12 00 09 pm

New:

screen shot 2018-12-05 at 10 47 43 am

screen shot 2018-12-05 at 10 49 17 am

Assets:

ic_add_circle_outline_white.svg.zip

@Lindsayauchin Lindsayauchin self-assigned this Jul 23, 2018
@Lindsayauchin Lindsayauchin changed the title Update assets from Font awesome to svg Update assets from Font awesome to Material Icons Aug 8, 2018
@Lindsayauchin Lindsayauchin changed the title Update assets from Font awesome to Material Icons Update UI assets from Font awesome to Material Icons Aug 8, 2018
@xtremerui

This comment has been minimized.

Copy link
Contributor

@xtremerui xtremerui commented Nov 16, 2018

Linking to #1976 so it could be done altogether

@pivotal-jamie-klassen

This comment has been minimized.

Copy link
Contributor

@pivotal-jamie-klassen pivotal-jamie-klassen commented Dec 4, 2018

CLI download icons are currently font awesome as well.

@pivotal-jamie-klassen

This comment has been minimized.

Copy link
Contributor

@pivotal-jamie-klassen pivotal-jamie-klassen commented Dec 4, 2018

  • abort build (fa-times-circle)
  • loading spinners in various places (fa-circle-o-notch)
  • resource check errors, build step errors (fa-exclamation-triangle)
  • build page step headers ( failure fa-times, success fa-check, task fa-terminal, get fa-arrow-down, put fa-arrow-up)
  • build page preparation/pending (fa-cogs)
  • job page play/pause (fa-play, fa-pause)
  • job page inputs/outputs (fa-arrow-up, fa-arrow-down)
@Lindsayauchin

This comment has been minimized.

Copy link
Contributor Author

@Lindsayauchin Lindsayauchin commented Dec 7, 2018

@pivotal-jamie-klassen updated icons inline.

@Lindsayauchin

This comment has been minimized.

Copy link
Contributor Author

@Lindsayauchin Lindsayauchin commented Dec 7, 2018

WIP Loading Assets:

  • loading spinners in various places (fa-circle-o-notch)

  • build page preparation/pending (fa-cogs)

  • build page step headers ( failure fa-times, success fa-check, task fa-terminal, get fa-arrow-down, put fa-arrow-up)
@jama22 jama22 added the size/large label Dec 10, 2018
@pivotal-jamie-klassen

This comment has been minimized.

Copy link
Contributor

@pivotal-jamie-klassen pivotal-jamie-klassen commented Dec 11, 2018

@Lindsayauchin perhaps worth nothing here that there don't seem to be material design icons for the Tux the linux penguin, the Windows logo or the Apple logo that we have been using for the CLI download icons?

@Lindsayauchin

This comment has been minimized.

Copy link
Contributor Author

@Lindsayauchin Lindsayauchin commented Dec 12, 2018

Found some more icons here: http://materialdesignicons.com/

@Lindsayauchin

This comment has been minimized.

Copy link
Contributor Author

@Lindsayauchin Lindsayauchin commented Dec 12, 2018

Looking at the example from materialize (https://materializecss.com/preloader.html)

loading_spinner_example

  • update loading spinners in various places (fa-circle-o-notch)
  • Can we replace the current with the Circular animation and update the color to @blue-primary: #4A90E2;
  • Scale according to situation based on the current spinners that we are replacing
pivotal-jamie-klassen added a commit that referenced this issue Dec 28, 2018
* trigger/abort buttons on build page

#2405

Signed-off-by: Jamie Klassen <cklassen@pivotal.io>
@pivotal-jamie-klassen pivotal-jamie-klassen self-assigned this Dec 31, 2018
@pivotal-jamie-klassen

This comment has been minimized.

Copy link
Contributor

@pivotal-jamie-klassen pivotal-jamie-klassen commented Dec 31, 2018

@Lindsayauchin for the trigger button on the build page (for a non-one-off build), if disable_manual_trigger is true for the job in question, I'm assuming there will simply be a default cursor and no highlight on hover (but still with the 'tooltip' as discussed in #1496). If this is not desirable, let's make another issue because this one's already a doozy.

@pivotal-jamie-klassen

This comment has been minimized.

Copy link
Contributor

@pivotal-jamie-klassen pivotal-jamie-klassen commented Dec 31, 2018

Also on the job page it might make sense for the colored banner to blue when the job is paused now, because in this view it's not super obvious that the job is paused:
screen shot 2018-12-31 at 4 04 46 pm

pivotal-jamie-klassen added a commit that referenced this issue Dec 31, 2018
#2405

Signed-off-by: Jamie Klassen <cklassen@pivotal.io>
@pivotal-jamie-klassen

This comment has been minimized.

Copy link
Contributor

@pivotal-jamie-klassen pivotal-jamie-klassen commented Jan 3, 2019

prototype for build pagination on job page

screen shot 2019-01-03 at 4 06 20 pm

<div id="pagination" style="display: flex;align-items: stretch;"><div style="
    padding: 5px;
    display: flex;
    align-items: center;
    border-left: 1px solid #3d3c3c;
"><div style="background-image: url(/public/images/baseline-chevron_left-24px.svg);background-position: 50% 50%;background-repeat: no-repeat;width: 24px;height: 24px;padding: 5px;opacity: 0.5;"></div></div><div style="
    border-left: 1px solid #3d3c3c;
    display: flex;
    align-items: center;
    padding: 5px;
"><div style="background-image: url(/public/images/baseline-chevron_right-24px.svg);background-position: 50% 50%;background-repeat: no-repeat;background-color: #504b4b;border-radius: 50%;width: 24px;height: 24px;padding: 5px;"></div></div></div>
  • disabled chevron is opacity: 0.5
  • enabled chevron is opacity: 1
  • enabled and hovered chevron has background-color: #504b4b; border-radius: 50%
pivotal-jamie-klassen added a commit that referenced this issue Jan 3, 2019
* add pagination chevrons with hover circles
* job input/output arrows

#2405

Signed-off-by: Jamie Klassen <cklassen@pivotal.io>
@pivotal-jamie-klassen

This comment has been minimized.

Copy link
Contributor

@pivotal-jamie-klassen pivotal-jamie-klassen commented Jan 3, 2019

a quick update to keep the details straight. As of today I have still to do the following (in presumably decreasing order of effort required):

  • build page step headers
  • loading spinners throughout
  • pagination chevrons on resource page
  • CLI icons on pipeline page
  • resource check status on resource page
  • rename asset names to use hyphen
  • build prep icons
pivotal-jamie-klassen added a commit that referenced this issue Jan 7, 2019
#2405

Signed-off-by: Mark Huang <mhuang@pivotal.io>
Co-authored-by: Jamie Klassen <cklassen@pivotal.io>
pivotal-jamie-klassen added a commit that referenced this issue Jan 7, 2019
#2405

Signed-off-by: Mark Huang <mhuang@pivotal.io>
Co-authored-by: Jamie Klassen <cklassen@pivotal.io>
mhuangpivotal added a commit that referenced this issue Jan 8, 2019
#2405

Signed-off-by: Mark Huang <mhuang@pivotal.io>
Co-authored-by: Jamie Klassen <cklassen@pivotal.io>
mhuangpivotal added a commit that referenced this issue Jan 8, 2019
#2405

Signed-off-by: Mark Huang <mhuang@pivotal.io>
Co-authored-by: Jamie Klassen <cklassen@pivotal.io>
mhuangpivotal added a commit that referenced this issue Jan 8, 2019
#2405

Signed-off-by: Mark Huang <mhuang@pivotal.io>
Co-authored-by: Jamie Klassen <cklassen@pivotal.io>
mhuangpivotal added a commit that referenced this issue Jan 8, 2019
#2405

Signed-off-by: Mark Huang <mhuang@pivotal.io>
Co-authored-by: Jamie Klassen <cklassen@pivotal.io>
Co-authored-by: James Cooper <jcooper@pivotal.io>
mhuangpivotal added a commit that referenced this issue Jan 8, 2019
#2405

Signed-off-by: Mark Huang <mhuang@pivotal.io>
Co-authored-by: Jamie Klassen <cklassen@pivotal.io>
Co-authored-by: James Cooper <jcooper@pivotal.io>
@pivotal-jamie-klassen

This comment has been minimized.

Copy link
Contributor

@pivotal-jamie-klassen pivotal-jamie-klassen commented Jan 9, 2019

@Lindsayauchin We noticed that the build page also makes use of a non-spinning fa-circle-o-notch
for pending steps during a running build and fa-circle for steps that were never reached in a finished build. We were unable to find obvious material design equivalents for these icons -- please help!

@pivotal-jamie-klassen

This comment has been minimized.

Copy link
Contributor

@pivotal-jamie-klassen pivotal-jamie-klassen commented Jan 9, 2019

Also, as we experiment with these spinners, grey feels more and more appropriate than blue.

pivotal-jamie-klassen added a commit that referenced this issue Jan 9, 2019
#2405

Signed-off-by: Mark Huang <mhuang@pivotal.io>
Co-authored-by: Jamie Klassen <cklassen@pivotal.io>
pivotal-jamie-klassen added a commit that referenced this issue Jan 9, 2019
#2405

Signed-off-by: Mark Huang <mhuang@pivotal.io>
Co-authored-by: Jamie Klassen <cklassen@pivotal.io>
@pivotal-jamie-klassen

This comment has been minimized.

Copy link
Contributor

@pivotal-jamie-klassen pivotal-jamie-klassen commented Jan 10, 2019

spinners should be white

pivotal-jamie-klassen added a commit that referenced this issue Jan 10, 2019
#2405

Signed-off-by: Mark Huang <mhuang@pivotal.io>
Co-authored-by: Jamie Klassen <cklassen@pivotal.io>
Co-authored-by: James Cooper <jcooper@pivotal.io>
pivotal-jamie-klassen added a commit that referenced this issue Jan 10, 2019
#2405

Signed-off-by: Mark Huang <mhuang@pivotal.io>
Co-authored-by: Jamie Klassen <cklassen@pivotal.io>
Co-authored-by: James Cooper <jcooper@pivotal.io>
pivotal-jamie-klassen added a commit that referenced this issue Jan 10, 2019
#2405

Signed-off-by: Mark Huang <mhuang@pivotal.io>
Co-authored-by: Jamie Klassen <cklassen@pivotal.io>
pivotal-jamie-klassen added a commit that referenced this issue Jan 10, 2019
#2405

Signed-off-by: Mark Huang <mhuang@pivotal.io>
Co-authored-by: Jamie Klassen <cklassen@pivotal.io>
@vito

This comment has been minimized.

Copy link
Member

@vito vito commented Feb 4, 2019

Accepting, since we broke the rest out in #3022

@vito vito closed this Feb 4, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.