Tuesday, August 19, 2014

Core-Icon in Polymer.dart


With little difficulty, I was able to convert vanilla HTML in my <x-pizza> Polymer.dart element to Core Elements / Material Design:

video

The conversion was made easy thanks to earlier work on a JavaScript version of <x-pizza> and the similarities between Polymer.dart and Polymer. More specifically, the Dart version of Core Elements uses the JavaScript Core Elements making things even easier the more I stick with core elements.

Except for <core-icon>. For some reason, my custom SVG images for pizza toppings are all showing up quite small:



In the JavaScript version, from which the Dart custom HTML and CSS was copied directly, the SVG icons look like:



In both Dart and JavaScript versions of the elements, I am using core-icon exactly the same:
              <div class="chip-icon">
                <core-icon
                   hero-id="first_half-icon"
                   hero?="{{selectedTopping == 'first_half' }}"
                   src="packages/paper/assets/first_half.svg"></core-icon>
              </div>
Furthermore, I am styling them exactly the same (following the core-icon documentation):
      .chip-icon core-icon {
        color: white;
        height: 100px;
        width: 100px;
      }
Digging a bit deeper, I find that the Dart version's DOM does not contain a <div> child element like the JavaScript version. Also, the Dart version seems to be explicitly setting the width and heigh to 24 pixels:



Not surprisingly given the differences in results, the Dart Core Element implementation of core-icon turns out to be different than the JavaScript. Instead of re-using the JavaScript core-icon, it has its own pure Dart implementation that includes a size attribute:
    /**
     * Specifies the size of the icon in pixel units.
     *
     * @attribute size
     * @type string
     * @default 24
     */
    size: 24,
It may not be identified in the core_elements package documentation as being pure Dart, but I can always forgive an omission when the code is documented.

After adding the seemingly required size attribute:
              <div class="chip-icon">
                <core-icon
                   hero-id="first_half-icon"
                   hero?="{{selectedTopping == 'first_half' }}"
                   size="100"
                   src="packages/paper/assets/first_half.svg"></core-icon>
              </div>
I have my <x-pizza> element working perfectly under a Material design.

video

I have this working with Material design principles and with Core elements, but I have yet to try Paper elements in Dart. I have no reason to suspect that they will give me any trouble, but it is still worth playing with a little. Tomorrow.

Day #157

2 comments:

  1. paper_elements work fine for me, except if you're viewing them in Firefox or Safari. Not sure about IE. It's not a Dart issue either. is visible when it should be hidden, and I think a few other things didn't work. Then that was not long after the initial release, so these issues might be fixed by now.

    ReplyDelete
  2. I keep forgetting this comments system will render anything within < and > as an HTML element. I was talking about <paper-toast>

    ReplyDelete