designer

designer.html

<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../core-icon/core-icon.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #core_card {
        position: absolute;
        width: 640px;
        height: 100%;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        left: 0px;
        top: 0px;
        background-color: rgb(255, 255, 255);
      }
      #header {
        color: rgb(150, 150, 150);
        padding-left: 56px;
        padding-right: 112px; /* 65px */
        font-weight: bold;
        height: 50px;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: rgb(225, 225, 225);
      }
      .story_item {
        color: rgb(101, 101, 101);
        fill: rgb(51, 51, 51);
        height: 45px;
      }
      .title {
        padding-right: 5px;
      }
      .fixed_cell {
        width: 95px;
      }
      .account_icon {
        margin-right: 12px;
      }
      .action_icon {
        margin-left: 5px;
        margin-right: 5px;
      }
      .red_fill {
        fill: rgb(255, 0, 0);
      }
      .green_fill {
        fill: #7cb342;
      }
      .black_fill {
      }
      #account_icon {
        height: 32px;
        width: 32px;
      }
    </style>
    <core-card id="core_card" layout vertical>
      <div id="header" class="header" horizontal layout center>
        <div class="fixed_cell">Number</div>
        <div flex>Story</div>
        <div class="fixed_cell">Points</div>
        <div class="fixed_cell">Last Modified</div>
      </div>
      <template repeat="{{item in items}}">
	      <paper-item id="story_item" class="story_item" horizontal layout center>
  	      <core-icon size="32" icon="account-circle" id="account_icon" class="account_icon"></core-icon>
    	    <div class="fixed_cell">{{item.number}}</div>
      	  <div class="title" flex>{{item.title}}</div>
        	<div class="fixed_cell">{{item.points}}</div>
	        <div class="fixed_cell">{{item.date}}</div>
  	      <paper-icon-button size="16" icon="{{statusToIcon(item.status)}}" id="status_icon" class="action_icon {{statusToColor(item.status)}}_fill"></paper-icon-button>
    	    <paper-icon-button size="16" icon="more-vert" id="more_icon" class="action_icon"></paper-icon-button>
      	</paper-item>
      </template>
    </core-card>
  </template>

  <script>

    Polymer('my-element', {
      ready: function() {
        this.items = [
          {
            number: "1234",
            title: "Wipeout Gallery Plugin",
            points: 5,
            date: "Jul. 2, 1982",
            status: "blocked"
          },
          {
            number: "1235",
            title: "Wipeout Engagements Plugin",
            points: 8,
            date: "Jul. 2, 1982",
            status: "suggestion"
          },
          {
            number: "1236",
            title: "Wipeout Image Plugin",
            points: 2,
            date: "Jul. 2, 1982",
            status: "scheduled"
          },
          {
            number: "1237",
            title: "Wipeout Text Plugin",
            points: 2,
            date: "Jul. 2, 1982",
            status: "in-progress"
          },
          {
            number: "1237",
            title: "Wipeout Text Plugin",
            points: 2,
            date: "Jul. 2, 1982",
            status: "completed"
          },
          {
            number: "1237",
            title: "Wipeout Text Plugin",
            points: 2,
            date: "Jul. 2, 1982",
            status: "verified"
          },
          {
            number: "1237",
            title: "Wipeout Text Plugin",
            points: 2,
            date: "Jul. 2, 1982",
            status: "accepted"
          },
        ];
      },
      statusToIcon: function(status) {
          switch(status) {
          case "accepted":
          	return "check-circle";
          case "suggestion":
          	return "radio-button-off";
          case "scheduled":
          	return "schedule";
          case "in-progress":
          	return "radio-button-on";
          case "completed":
	          return "check-circle-blank";
          case "verified":
          	return "check-circle-outline";
          case "blocked":
          	return "cancel";
          }
      },
      statusToColor: function(status) {
          switch(status) {
          case "accepted":
          	return "green";
          case "suggestion":
          	return "black";
          case "scheduled":
          	return "black";
          case "in-progress":
          	return "black";
          case "completed":
	          return "green";
          case "verified":
          	return "green";
          case "blocked":
          	return "red";
          }
      },
    });

  </script>

</polymer-element>