<style include="md-select cr-shared-style"> | |
:host { | |
height: 100%; | |
} | |
.shortcut-card { | |
@apply --cr-card-elevation; | |
background-color: var(--cr-card-background-color); | |
border-radius: var(--cr-card-border-radius); | |
color: var(--cr-primary-text-color); | |
margin: 0 auto 16px auto; | |
padding-bottom: 8px; | |
width: var(--cr-toolbar-field-width); | |
} | |
.shortcut-card:last-of-type { | |
margin-bottom: 64px; | |
} | |
#container { | |
box-sizing: border-box; | |
height: 100%; | |
overflow: overlay; | |
padding-top: 24px; | |
} | |
.command-entry { | |
align-items: start; | |
display: flex; | |
/* Makes top/bottom spacing of each row more even, while leaving | |
space for cr-input error message in between rows. */ | |
margin-bottom: -8px; | |
padding-top: 16px; | |
} | |
.command-name { | |
/* Align with cr-input by matching the field's top padding. */ | |
flex: 1; | |
margin-top: 6px; | |
} | |
.command-entry .md-select { | |
/* TODO(johntlee): line-height needs adjustment to fix large fonts. */ | |
line-height: 22px; | |
margin-inline-start: var(--cr-section-padding); | |
} | |
.card-title { | |
align-items: center; | |
border-bottom: var(--cr-separator-line); | |
display: flex; | |
margin-bottom: 9px; | |
padding: 16px var(--cr-section-padding); | |
} | |
.icon { | |
height: 20px; | |
margin-inline-end: 20px; | |
width: 20px; | |
} | |
.card-controls { | |
/* We line up the controls with the name, which is after the | |
20px left padding + 20px icon + 20px margin on the icon. */ | |
margin-inline-end: 20px; | |
margin-inline-start: 60px; | |
} | |
</style> | |
<div id="container"> | |
<template is="dom-repeat" items="[[calculateShownItems_(items.*)]]"> | |
<div class="shortcut-card"> | |
<div class="card-title cr-title-text"> | |
<img class="icon" src="[[item.iconUrl]]" | |
alt$="[[appOrExtension( | |
item.type, | |
'$i18nPolymer{appIcon}', | |
'$i18nPolymer{extensionIcon}')]]"> | |
<span role="heading" aria-level="2">[[item.name]]</span> | |
</div> | |
<div class="card-controls"> | |
<template is="dom-repeat" items="[[item.commands]]" as="command"> | |
<div class="command-entry" command="[[command]]"> | |
<span class="command-name">[[command.description]]</span> | |
<extensions-shortcut-input delegate="[[delegate]]" | |
item="[[item.id]]" shortcut="[[command.keybinding]]" | |
command-name="[[command.name]]"> | |
</extensions-shortcut-input> | |
<!-- Binding "value" to triggerScopeChange_ to trigger update | |
only after CommandScope_ becomes available. --> | |
<select class="md-select" on-change="onScopeChanged_" | |
disabled$="[[computeScopeDisabled_(command)]]" | |
value="[[ | |
triggerScopeChange_(command.scope, CommandScope_)]]"> | |
<option value$="[[CommandScope_.CHROME]]"> | |
$i18n{shortcutScopeInChrome} | |
</option> | |
<option value$="[[CommandScope_.GLOBAL]]"> | |
$i18n{shortcutScopeGlobal} | |
</option> | |
</select> | |
</div> | |
</template> | |
</div> | |
</div> | |
</template> | |
</div> |