| <style include="shared-style"> |
| :host { |
| --activity-log-call-and-time-width: 575px; |
| --activity-type-width: 85px; |
| --activity-time-width: 100px; |
| |
| display: flex; |
| flex-direction: column; |
| } |
| |
| cr-search-field { |
| align-self: center; |
| margin-inline-end: auto; |
| } |
| |
| .activity-table-headings { |
| width: var(--activity-log-call-and-time-width); |
| } |
| |
| #activity-type { |
| flex: 0 var(--activity-type-width); |
| } |
| |
| #activity-key { |
| flex: 1; |
| margin-inline-start: 10px; |
| } |
| |
| #activity-time { |
| flex: 0 var(--activity-time-width); |
| text-align: end; |
| } |
| |
| iron-list { |
| flex: 1; |
| } |
| </style> |
| <div class="activity-subpage-header"> |
| <cr-search-field label="$i18n{activityLogSearchLabel}" |
| on-search-changed="onSearchChanged_"> |
| </cr-search-field > |
| <cr-button id="toggle-stream-button" on-click="onToggleButtonClick_"> |
| <span hidden$="[[isStreamOn_]]"> |
| $i18n{startActivityStream} |
| </span> |
| <span hidden$="[[!isStreamOn_]]"> |
| $i18n{stopActivityStream} |
| </span> |
| </cr-button> |
| <cr-button class="clear-activities-button" on-click="clearStream"> |
| $i18n{clearActivities} |
| </cr-button> |
| </div> |
| <div id="empty-stream-message" class="activity-message" |
| hidden$="[[!isStreamEmpty_(activityStream_.length)]]"> |
| <span id="stream-stopped-message" hidden$="[[isStreamOn_]]"> |
| $i18n{emptyStreamStopped} |
| </span> |
| <span id="stream-started-message" hidden$="[[!isStreamOn_]]"> |
| $i18n{emptyStreamStarted} |
| </span> |
| </div> |
| <div id="empty-search-message" class="activity-message" |
| hidden$="[[!shouldShowEmptySearchMessage_( |
| activityStream_.length, filteredActivityStream_.length)]]"> |
| $i18n{noSearchResults} |
| </div> |
| <div class="activity-table-headings" |
| hidden$="[[isFilteredStreamEmpty_(filteredActivityStream_.length)]]"> |
| <span id="activity-type">$i18n{activityLogTypeColumn}</span> |
| <span id="activity-key">$i18n{activityLogNameColumn}</span> |
| <span id="activity-time">$i18n{activityLogTimeColumn}</span> |
| </div> |
| <iron-list items="[[filteredActivityStream_]]"> |
| <template> |
| <activity-log-stream-item data="[[item]]"></activity-log-stream-item> |
| </template> |
| </iron-list> |