blob: d00cae41ca5ed0e47d30ed3e0667ff6eebe5cacf [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="app_item.html">
<link rel="import" href="shared_style.html">
<link rel="import" href="store_client.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.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">
#app-list-title {
padding: 16px 24px;
}
#expand-button {
height: 36px;
margin-inline-end: 12px;
width: 36px;
}
#expander-row {
align-items: center;
border-top: var(--card-separator);
color: var(--secondary-text-color);
display: flex;
height: 50px;
justify-content: space-between;
padding-inline-end: 8px;
padding-inline-start: 24px;
}
.notification-row-sublabel {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 11px 0;
}
.collapsible {
max-width: 250px;
overflow: hidden;
text-overflow: ellipsis;
}
#notifications-sublabel {
display: flex;
overflow: hidden;
}
#notifications-sublabel > span {
white-space: pre;
}
.notification-row {
align-items: center;
cursor: pointer;
display: inline-flex;
justify-content: space-between;
padding: 0 24px;
}
.app-management-item-arrow {
margin-inline-end: 8px;
padding: 12px;
}
</style>
<div class="card-container">
<div id="app-list-title" class="header-text">$i18n{appListTitle}</div>
<template is="dom-repeat" items="[[displayedApps_]]">
<app-management-app-item app="[[item]]">
<paper-icon-button-light slot="right-content"
class="subpage-arrow app-management-item-arrow" actionable>
<button></button>
</paper-icon-button-light>
</app-management-app-item>
</template>
<iron-collapse opened="[[listExpanded_]]">
<template is="dom-repeat" items="[[collapsedApps_]]">
<app-management-app-item app="[[item]]">
<paper-icon-button-light slot="right-content"
class="subpage-arrow app-management-item-arrow" actionable>
<button></button>
</paper-icon-button-light>
</app-management-app-item>
</template>
</iron-collapse>
<div id="expander-row" class="expander-list-row"
on-click="toggleListExpanded_">
<span>[[moreAppsString_(apps_, listExpanded_)]]</span>
<paper-icon-button-light class="expand-button">
<button>
<iron-icon icon="[[getCollapsedIcon_(listExpanded_)]]">
</iron-icon>
</button>
</paper-icon-button-light>
</div>
</div>
<div class="card-container">
<span class="notification-row" on-click="onClickNotificationSublabel_">
<div class="notification-row-sublabel">
<div class="header-text">
$i18n{notifications}
</div>
<div id="notifications-sublabel" class="secondary-text"></div>
</div>
<paper-icon-button-light class="subpage-arrow" actionable>
<button></button>
</paper-icon-button-light>
</span>
</div>
</template>
<script src="main_view.js"></script>
</dom-module>