genadis / aurelia-mdl Goto Github PK

Probably something easy, but I'm not sure what I'm doing wrong..

I have loaded the 'mdi' icon set - because there are more icons than the official MD icon set by Google - and if I use them in my page, it works ok.

However, the aurelia-mdl 'layout' tries to use the (unavailable) standard menu icon and just shows "menu" rather than an icon.
How could I get the correct icon in there?
I'm trying this:

<template bindable="router">
  <div mdl="layout">
    <header class="mdl-layout__header">
      <i class="mdl-layout-icon mdi mdi-menu"></i>
      <div class="mdl-layout__header-row">
      ...

With MDI, to show the icon elsewhere, it'd just be <i class="mdi mdi-icon"></i> but if I just put that somewhere, it just appears in the wrong place, and the actual menu icon spot still has the broken behaviour. The above snippet gives me no new icon, and still broken behaviour.

Any hints? 😖

I've been looking at the code and the MDL site to try to figure out how to use a modal, but would really love to see an example of a modal used with aurelia-mdl..

Would you happen have any example code anywhere?

Thanks! ⭐

Is it possible to set a custom timeout value on the snackbar element?

Are there any plans to support webpack (NPM)?

I'm using this definition for my tabs:

<div mdl="tabs" class="mdl-layout__tab-bar mdl-color--cyan-500 mdl-color-text--blue-grey-700 mdl-cell--hide-tablet mdl-cell--hide-phone">
    <a repeat.for="row of router.navigation | authFilter: isAuthenticated" class="mdl-layout__tab ${row.isActive ? 'is-active' : ''}" href.bind="row.href">${row.title}</a>
</div>

The idea is for each tab to redirect to one of my defined routes. When hovering over any of the tabs, I can see the correct URL in the browser footer. But, When clicking on a tab, I get the following error:

layout.js:444 Uncaught SyntaxError: Failed to execute 'querySelector' on 'Element': '#/config' is not a valid selector.

On my page, I have between 1 and n textfields (I use a repeat.for), and I'm getting this odd behaviour:

As you can see, the <label> floats ok for the bottom textfield, but is not floating in the first.
The only difference in where the two are getting their content is that the top one gets it straight from an object property (value.bind="taskDetails.server") and the lower one gets it from an array that's repeated over. I'll put the code below for reference.

Note: If I edit the text in the top textfield, the label then floats properly, it's just when the data gets placed there by the value.bind that it's behaving weirdly. 😕

Any idea what I'm doing wrong here, to get this odd behaviour? Have you seen anything like this?

Cheers! 😄

Code:

<template>

  <div mdl="grid">

    <div class="mdl-cell mdl-cell--12-col-desktop">
      <div mdl="grid" class="mdl-grid--no-spacing">

        <div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--6-col-tablet">
          <div mdl="textfield" class="mdl-textfield--floating-label">
            <input id="server" class="mdl-textfield__input" type="text" value.bind="taskDetails.server" disabled.bind="!edit">
            <label for="server" class="mdl-textfield__label">Server to target</label>
          </div>
        </div>

      </div>
    </div>

    <div class="mdl-cell mdl-cell--12-col-desktop" repeat.for="url of taskDetails.urls">

      <div mdl="grid" class="mdl-grid--no-spacing">

        <div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
          <div mdl="textfield" class="mdl-textfield--floating-label">
            <input id="edit_${$index}" class="mdl-textfield__input" type="text" value.bind="url" disabled.bind="!edit">
            <label for="edit_${$index}" class="mdl-textfield__label" >URL</label>
          </div>
        </div>

        <div class="mdl-cell mdl-cell--middle mdl-cell--1-col">
          <div if.bind="edit">
            <button
            id="delbutton-${$index}"
            mdl="button"
            class="mdl-button--icon mdl-button--accent mdl-js-ripple-effect"
            click.trigger="del($index)">
            <i class="mdi mdi-delete"></i>
          </button>
          <label mdl="tooltip" class="mdl-tooltip--top" for="delbutton-${$index}">
            Remove URL
          </label>
        </div>
      </div>

      </div>

    </div>
  </div>

</template>

I have downloaded the Aurelia Skeleton Navigation project, and followed the installation instructions from the aurelia-mdl README.

In the app.hmtl I have changed the code to the following:

<template>
  <require from="nav-bar.html"></require>
 <require from="encapsulated-mdl/material.amber-pink.min.css"></require>

  <nav-bar router.bind="router"></nav-bar>

</template>

When the app starts up, it throws a 404, not being able to find encapsulated-mdl/material.amber-pink.min.cs.

I have managed to overcome this by physically copying all the files from jspm_packages/github/genadis/[email protected] into jspm_packages/github/genadis/[email protected].

I'm trying to get a tooltip to show on each button for items in an array, that are iterated by a repeat.for.

The MDL docs have a simplistic example of a tooltip being for="id-of-thing", but if I put that in my repeat I either get only a tooltip on the first item (if the id is a static name like editbutton, or no tooltip, if I try dynamic id generation like below)

<div class="mdl-list" click.delegate="handleClick($event)" style="height: 100%;">
     <div class="mdl-list__item" repeat.for="entry of taskList" style="height: 56px;">

          <span class="mdl-list__item-primary-content">
            ${entry.name}
          </span>

          <span class="mdl-list__item-secondary-action">
            <button id="editbutton-${$index}" mdl="button" class="mdl-button--icon mdl-button--colored">
              <i class="mdi mdi-pencil"></i>
            </button>
            <div mdl="tooltip" class="mdl-tooltip--right" for="editbutton-${$index}">
              Edit Task
            </div>
          </span>
 ...

Any ideas?

And also, I can only seem to get mdl-tooltip--large to work, the --right in the above code does not put the tooltip on the right..

I'd like to be able to add an additional entry to mdlTypes. E.g. say we want to use mdl-selectfield as <select mdl="select" ...>. Is it possible currently?

As far as I can tell, the checkbox and switch elements are not updating when the aurelia bound property changes. I've disabled the mdl code and aurelia is checking/unchecking the checkbox but the the change event in the mdl code is not being called when being updated programmaticaly.

I'll conduct some more testing to check I'm not doing anything stupid...

If not please write up a short document on how to

Hi,

So I'm trying out the new aurelia-cli and it seems to only use packages via npm.
I've tried all sorts of contortions, but I can't seem to get aurelia-mdl and its encapsulated-mdl dependency to work - I just get errors in the browser.

Have you tried the cli? Did you get mdl to work and if so, how?
I'm wanting to migrate my project (based on aurelia-mdl) to use the cli as the packaging looks very nice in that structure, but I'm stuck on this..

Any and all assistance would be very much appreciated.

My expected "happy path" for a basic use case (which does not work at present):

• Start a new project in the cli: au new (follow the prompts)
• Install mdl: npm install aurelia-mdl
• Add to aurelia_project/aurelia.json:

"dependencies": [
...
    "aurelia-mdl",
...
]

• Add mdl to app.html: <require from="encapsulated-mdl/material.amber-pink.min.css"></require>
• Run the app: au run --watch
• Browse to the app

At this point I get errors: 😭

GET http://localhost:9000/node_modules/aurelia-mdl/dist/commonjs/index/mdl.js 404 (Not Found)

Unhandled rejection Error: Script error for "aurelia-mdl/mdl"
http://requirejs.org/docs/errors.html#scripterror
    at Error (native)
    at F (http://localhost:9000/scripts/vendor-bundle.js:3661:290)
    at HTMLScriptElement.onScriptError (http://localhost:9000/scripts/vendor-bundle.js:3684:113)
...

So I guess that the default, commonjs path is screwy, and change my entry in aurelia_project/aurelia.json to:

          {
            "name": "aurelia-mdl",
            "path": "../node_modules/aurelia-mdl/dist/amd",
            "main": "index"
          },

Now I get

GET http://localhost:9000/src/annoto-mdl.js
Unhandled rejection Error: Script error for "annoto-mdl", needed by: aurelia-mdl/mdl
http://requirejs.org/docs/errors.html#scripterror
    at Error (native)
    at F (http://localhost:9000/scripts/vendor-bundle.js:3661:290)
    at HTMLScriptElement.onScriptError (http://localhost:9000/scripts/vendor-bundle.js:3684:113)
...

I try to npm install annoto-mdl --save, but get 404 Registry returned 404 for GET on https://registry.npmjs.org/annoto-mdl

I search for annoto-mdl, but Google failed to find it for me.. can you help? 😓
I notice in the package.json that there are references to it and a bitbucket repo, but that appears to be inaccessible:

"dependencies": {
      "annoto-mdl": "bitbucket:annototeam/annoto-mdl@annoto-widget"
    },

Cheers,
Frode
😃

I have changed the code in the nav-bar.html of the Aurelia Skeleton Navigation project to:

<template bindable="router">
  <div mdl="layout" class="mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        <span class="mdl-layout-title">${router.title}</span>
        <div class="mdl-layout-spacer"></div>
      </div>
    </header>
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Title</span>
      <nav class="mdl-navigation">
        <ul>
          <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
            <a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" href.bind="row.href">${row.title}</a>
          </li>
        </ul>
      </nav>
    </div>
    <main class="mdl-layout__content">
      <div class="page-content page-host">
        <router-view></router-view>
      </div>
    </main>
  </div>
</template>

But, when rendering, I am seeing the following issues:

• The collapsed drawer menu does not display the hamburger icon, but instead the word menu.
• When opening the menu, and then clicking on on the links, the app navigates correctly to the selected route, and the correct content is displayed. But, the drawer menu does not close automatically. Is there any settings and/or code that I've missed?

Then I would also like to understand the following:

• Is the roboto font included by default when installing the aurelia-mdl jspm package?
• Are the mdl icons included by default when installing the aurelia-mdl jspm package?

If I use your code snippet from the README:

<button mdl="button" class="mdl-button--fab mdl-button--colored">
  <i class="material-icons">add</i>
</button>

it displays the mdl-fab button, but instead of rendering an icon on the button, the text "add" is displayed.