blob: 813018f58e1f4d53d05d5d9379b92f834ff64494 [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://apps/item.html">
<link rel="import" href="chrome://apps/shared_style.html">
<link rel="import" href="chrome://apps/shared_vars.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.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-icon-button/paper-icon-button-light.html">
<dom-module id="app-management-main-view">
<template>
<style include="app-management-shared-css">
cr-toolbar {
color: var(--secondary-text-color);
}
#app-list {
@apply --cr-card-elevation;
background-color: #fff;
border-radius: var(--cr-card-border-radius);
margin: 24px auto;
width: var(--card-width);
}
#app-list-title {
color: var(--card-title-text-color);
font-weight: 400;
padding: 16px 24px;
}
#more-apps {
align-items: center;
border-top: var(--card-separator);
color: var(--secondary-text-color);
display: flex;
height: 50px;
justify-content: space-between;
padding-inline-start: 24px;
}
#right-button {
height: 36px;
margin-inline-end: 12px;
width: 36px;
}
</style>
<cr-toolbar page-name="$i18n{title}" search-prompt="$i18n{searchPrompt}">
</cr-toolbar>
<div id="app-list">
<div id="app-list-title">$i18n{appListTitle}</div>
<template is="dom-repeat" items="[[displayedApps_]]">
<app-management-item app="[[item]]"></app-management-item>
</template>
<iron-collapse opened="[[listExpanded_]]">
<template is="dom-repeat" items="[[collapsedApps_]]">
<app-management-item app="[[item]]"></app-management-item>
</template>
</iron-collapse>
<div id="more-apps" on-click="toggleListExpanded_">
<span>[[moreAppsString_(apps_.length,listExpanded_)]]</span>
<paper-icon-button-light id="right-button">
<button id="collapse-button">
<iron-icon icon="[[getCollapsedIcon_(listExpanded_)]]"
id="dropdown-indicator">
</iron-icon>
</button>
</paper-icon-button-light>
</div>
</div>
</template>
<script src="chrome://apps/main_view.js"></script>
</dom-module>