Code Monkey home page Code Monkey logo

Comments (15)

yeelan0319 avatar yeelan0319 commented on May 4, 2024

Here is the prototype of toolbar:

Supported features:

  • Fixed to top with 4 elevation
  • RTL
  • Theme on dark and light

CodePen Link

from material-components-web.

traviskaufman avatar traviskaufman commented on May 4, 2024

@yeelan0319 nice work so far! Some initial thoughts on the prototype:

  • Noticed that the <body> styles have padding applied to it. This looks like it would only be an issue when there is a fixed toolbar. Furthermore, I'm not sure we'd want that to be padding, we may want to use margin instead, and alter margin-top only. Finally, we probably don't want to do this by default. What if instead we created a css class mdc-toolbar-adjust that could be put onto the body (or any other element) and bump it's margin top. E.g.
$mdc-toolbar-height: 64px !default;

.mdc-toolbar-adjust {
  margin-top: $mdc-toolbar-height;
}

.mdc-toolbar {
  height: $mdc-toolbar-height;
}
<body class="mdc-toolbar-adjust">
  <div class="mdc-toolbar mdc-toolbar--fixed">
    <!-- ... -->
  </div>
  <!-- main content -->
</body>

  • I'm not sure if the toolbar should be a <nav>, or have a role="toolbar". I think here the use of the word toolbar just refers to the stylistic treatment of the element within the material system, but it doesn't necessarily have to be used as a toolbar. @amsheehan @sgomes thoughts?

  • Regarding whether or not there is a default font size for toolbar, spec doesn't say but I'd probably check with design

  • It may be useful to split the toolbar into two sections using something like flexbox, e.g. the "start" side which may contain a site title / logo, and an "end" side which may contain some icon buttons, etc. e.g. similar to Inbox. However, we also may just want to leave that up to the individual developers and just worry about styling the outer toolbar itself.

from material-components-web.

Garbee avatar Garbee commented on May 4, 2024

Aria toolbar:

A collection of commonly used function buttons or controls represented in compact visual form.

The toolbar container should not have the role. However, any inner actions container with icons for doing tasks should be encouraged to have the role.

+1 to flexbox, it also will handle RTL transitions seamlessly.

Do remember toolbars are not app-level only, but can be contained within inner nodes as well.

from material-components-web.

traviskaufman avatar traviskaufman commented on May 4, 2024

@yeelan0319 regarding having flex containers, here's a codepen example http://codepen.io/traviskaufman/pen/YNLRVN

from material-components-web.

yeelan0319 avatar yeelan0319 commented on May 4, 2024
  • @traviskaufman @Garbee Valid thoughts on semantic tag and role. If toolbar is considered more as a style instead of functional component, we should remove the role and make it a div.
  • Text style on toolbar is listed under Typography section in spec, which is App bar: Title style, Medium 20sp. I will put this into mdc-toolbar__title.
  • The flex container idea is pretty interesting. So I will put mdc-toolbar__section-start and mdc-toolbar__section-end as container for user to put their items in.

from material-components-web.

Garbee avatar Garbee commented on May 4, 2024

The use of multiple rows will also need to be thought through as well. Just remembered application-level bars can have I think up to 3 rows in different contexts. That should be integrated close to the start of the component because handling that could affect how the structure of the general toolbar will be done.

from material-components-web.

traviskaufman avatar traviskaufman commented on May 4, 2024

The use of multiple rows will also need to be thought through as well.

I don't think this isn't a requirement for toolbars; the spec makes no mention of it. You may be thinking of something like system bars, which are layered on top of toolbars and not something we support.

from material-components-web.

Garbee avatar Garbee commented on May 4, 2024

In Appbar metrics:

The app bar with significantly increased height for prominence. (Height 128dp)

EDIT: And looking around it is referenced more in the app bar section. Consistently as "Prominent" mode.

appbar

from material-components-web.

yeelan0319 avatar yeelan0319 commented on May 4, 2024

Merged to master with commit #267

from material-components-web.

yeelan0319 avatar yeelan0319 commented on May 4, 2024

Start working on implementing flexible header:

Here is a prototype of flexible header on CodePen.

Parking lot:

  1. Should we call the whole thing appbar or toolbar. There I saw the definition in Scrolling techniques talking about the whole thing as appbar.
  2. How generic the flexible header should be? Will it be applicable to things other than toolbar

from material-components-web.

Garbee avatar Garbee commented on May 4, 2024

from material-components-web.

yeelan0319 avatar yeelan0319 commented on May 4, 2024

Thanks @Garbee

I also confirmed with our designer that the flexible behavior is only applicable to appbar.

I will follow up with the discussion about appbar-toolbar relationship today. The tricky part is toolbar need to remove its theme (obviously should have no shadow casting).

My current thinking is

<div class="mdc-appbar">
  <div class="mdc-toolbar no-theme">...</div>
  <div class="mdc-flexible-space"></div>
</div>

Or another possibility I could explore is using :after for mdc-toolbar, like:

<style>
  .mdc-toolbar--with-flexible-space :after {
    // flexible header definition here
  }
</style>
<div class="mdc-toolbar mdc-toolbar--with-flexible-space">...</div>

from material-components-web.

traviskaufman avatar traviskaufman commented on May 4, 2024

Thanks @yeelan0319

After discussing with team, the plan is to go with modifier classes on mdc-toolbar, for both seams and flexible header. As @yeelan0319, design team confirmed that flexible headers / seams are coupled to toolbars, so it makes sense to bake them into it directly, rather than having to educate users on how to use another component in a certain way.

from material-components-web.

yeelan0319 avatar yeelan0319 commented on May 4, 2024

@material-components/mdc-web MDC-Web Eng Outline: Flexible Header: https://docs.google.com/document/d/1NpiWO-2A-74wYcl0FW_tZ2JU4kNBjmxhaxqJ26rFm2M/edit#heading=h.3qa3hj2cqohb

from material-components-web.

traviskaufman avatar traviskaufman commented on May 4, 2024

Closed via #499

from material-components-web.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.