blob: 437954a6e5005bdecc8b62f31161548a46106dca [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<dom-module id="apps-chooser">
<template>
<style>
:host {
display: flex;
flex-direction: column;
}
.app-icon {
-webkit-margin-end: 16px;
-webkit-margin-start: 4px;
}
iron-icon {
-webkit-margin-end: 48px;
}
[active] iron-icon[icon="cr:check"] {
--iron-icon-fill-color: var(--google-blue-600);
opacity: unset;
}
iron-icon[icon="cr:check"] {
opacity: 0;
}
.gmail {
content: -webkit-image-set(
url(chrome://welcome/apps/gmail_1x.png) 1x,
url(chrome://welcome/apps/gmail_2x.png) 2x);
}
.youtube {
content: -webkit-image-set(
url(chrome://welcome/apps/youtube_1x.png) 1x,
url(chrome://welcome/apps/youtube_2x.png) 2x);
}
.maps {
content: -webkit-image-set(
url(chrome://welcome/apps/maps_1x.png) 1x,
url(chrome://welcome/apps/maps_2x.png) 2x);
}
.translate {
content: -webkit-image-set(
url(chrome://welcome/apps/translate_1x.png) 1x,
url(chrome://welcome/apps/translate_2x.png) 2x);
}
.news {
content: -webkit-image-set(
url(chrome://welcome/apps/news_1x.png) 1x,
url(chrome://welcome/apps/news_2x.png) 2x);
}
.chrome_store {
content: -webkit-image-set(
url(chrome://welcome/apps/chrome_store_1x.png) 1x,
url(chrome://welcome/apps/chrome_store_2x.png) 2x);
}
paper-button:first-of-type {
border-top: unset;
}
paper-button {
border-radius: 0;
border-top: var(--cr-section_-_border-top);
display: flex;
margin: 0;
padding: 12px 0;
text-transform: unset;
}
paper-button:not([raised]).keyboard-focus {
outline-width: unset;
font-weight: unset;
}
.app-name {
flex: 1;
}
</style>
<template is="dom-repeat" items="[[appList]]">
<paper-button toggles noink
active$="[[item.selected]]" on-click="onAppClick_">
<div class$="[[item.icon]] app-icon"></div>
<div class="app-name">[[item.name]]</div>
<iron-icon icon="cr:check"></iron-icon>
</paper-button>
</template>
</template>
<script src="apps_chooser.js"></script>
</dom-module>