weixin_39623082
weixin_39623082
2021-01-01 09:01

Feature Application Launcher 3x

Description

Styling for Angular-PF Application Launcher

Todos

  • [x] cross browser test
  • [x] Are you sure it works on IE9?
  • [x] Is it reponsive?

Steps to test or reproduce and link to rawgit

https://rawgit.com/cdcabrera/patternfly/Feature-AppLauncher-3x-dist/dist/tests/application-launcher-nav.html

该提问来源于开源项目:patternfly/patternfly-3

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

17条回答

  • weixin_39763902 weixin_39763902 4月前

    I like the update to the icon sizing and the removal of the tooltips- looks better, for sure! Good ideas, Andres. As for the styling to tie it to other hover instances, I propose that we do one of the following. Let me know what you think.:

    1- We visually mirror the hover style used on list view compound expansions. This would mean that on hover, the container that hold the particular link would turn grey, and the icon would be blue. (see http://www.patternfly.org/pattern-library/content-views/list-view/#/design - I much prefer this option!) listview-compoundexpansion

    or 2- We visually mirror the card hover style (I believe this is too subtle) http://www.patternfly.org/pattern-library/content-views/card-view/#/design cardview-hover

    点赞 评论 复制链接分享
  • weixin_39623082 weixin_39623082 4月前

    I'll give option 1 you presented a go...

    "We visually mirror the hover style used on list view compound expansions."
    点赞 评论 复制链接分享
  • weixin_39623082 weixin_39623082 4月前

    Update is applied

    • https://rawgit.com/cdcabrera/patternfly/Feature-AppLauncher-3x-dist/dist/tests/application-launcher-nav.html
    点赞 评论 复制链接分享
  • weixin_39763902 weixin_39763902 4月前

    I think it looks great, - the only inconsistency with our existing PatternFly style is having the title stay that dark grey color, rather than turn blue. That's my only suggestion! , thoughts?

    点赞 评论 复制链接分享
  • weixin_39827798 weixin_39827798 4月前

    where can we preview the version without icons?

    点赞 评论 复制链接分享
  • weixin_39623082 weixin_39623082 4月前

    I'll look at creating another header within the same sample file

    点赞 评论 复制链接分享
  • weixin_39623082 weixin_39623082 4月前

    the sample should be updated now... - https://rawgit.com/cdcabrera/patternfly/Feature-AppLauncher-3x-dist/dist/tests/application-launcher-nav.html

    点赞 评论 复制链接分享
  • weixin_39636987 weixin_39636987 4月前

    Today is release day. is this PR to be merged before the release?

    点赞 评论 复制链接分享
  • weixin_39623082 weixin_39623082 4月前

    still awaiting the final "all clear" on the related 4x PR #636 .

    PRs in AngularPF 3x & AngularPF 4x are dependents.

    点赞 评论 复制链接分享
  • weixin_39827798 weixin_39827798 4月前

    Thanks

    点赞 评论 复制链接分享
  • weixin_39922769 weixin_39922769 4月前

    Also, when I pull down your branch and do 'grunt server'. I see at 'localhost:9000':

    image Shouldn't App. Launcher be under Navigation instead of Layout?

    点赞 评论 复制链接分享
  • weixin_39623082 weixin_39623082 4月前

    Once the example gets trimmed down, can move under Navigation so it matches Angular-PatternFly. Was based off of the Notification Drawer behavior/example

    点赞 评论 复制链接分享
  • weixin_39827798 weixin_39827798 4月前

    Hi I haven't seen the code yet, but to me there are design issues.

    • The hover state is inconsistent with other hovers, check for example the drop menu on the right next to the app launcher.
    • Tooltip is useless, each link has an icon and a label, do we really need a tooltip?
    • The component is too large IMO, comparing to the scale of any other element in PatternFly.
    • What exactly is the "home" link?
    点赞 评论 复制链接分享
  • weixin_39763902 weixin_39763902 4月前

    Hi

    In response to the design issues,

    • I see that the launcher hover state is inconsistent with other dropdown menu hover, but am not concerned with this fact, since the launcher menu is more visual with the use of icons. I don't think it would look right to have this same light blue background highlight style. I'm curious what the rest of you think!

    • I can see that we might not need the tooltip. I'm thinking that if the titles are descriptive enough, we wouldn't need the tooltip.

    • I can see that about the icon size being too large in this "tile view" launcher menu. In the original PSD design, the masthead icons are larger, so there is less of a difference. I'd recommend to reduce the size of the Launcher Menu icons to a maximum height of 30px.

    • The "home" link would link the user to the Launcher home screen so that they they can see the the function descriptions, and access the additional links such as "Getting Started", "Learn More", etc.

    点赞 评论 复制链接分享
  • weixin_39922769 weixin_39922769 4月前

    recommendations on trimming it down?

    If it's a test page for the application launcher, then I would just show the app. launcher in the top nav bar. No need for vert. nav, dashboard, or charts -they are just a distraction :-) -thanks!

    点赞 评论 复制链接分享
  • weixin_39922769 weixin_39922769 4月前

    Is this a new test page for application launcher? If so, it seems like overkill. It's unfortunate that test page initially shows a toast notification over the app. launcher: image Is there a way to remove the toast notification and actually most of the page. I think we'd only need the top nav bar with the app. launcher icon. We don't need the vert. nav, dashboard, or charts.

    点赞 评论 复制链接分享
  • weixin_39623082 weixin_39623082 4月前

    Agree on the toast notification, taking a look. recommendations on trimming it down? And just realized you made a recommendation... taking a look

    点赞 评论 复制链接分享

相关推荐