| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/cr_elements/cr_container_shadow_behavior.html"> |
| <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html"> |
| <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> |
| <link rel="import" href="chrome://resources/html/cr.html"> |
| <link rel="import" href="chrome://resources/html/md_select_css.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html"> |
| <link rel="import" href="item_behavior.html"> |
| <link rel="import" href="shortcut_input.html"> |
| |
| <dom-module id="extensions-keyboard-shortcuts"> |
| <template> |
| <style include="md-select cr-shared-style"> |
| :host { |
| height: 100%; |
| } |
| |
| .shortcut-card { |
| @apply --cr-primary-text; |
| @apply --cr-card-elevation; |
| background-color: var(--cr-card-background-color); |
| border-radius: var(--cr-card-border-radius); |
| 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(scottchen): 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); |
| @apply --cr-title-text; |
| } |
| |
| .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"> |
| <img class="icon" src="[[item.iconUrl]]" |
| alt$="[[appOrExtension( |
| item.type, |
| '$i18nPolymer{appIcon}', |
| '$i18nPolymer{extensionIcon}')]]"> |
| <span>[[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> |
| </template> |
| <script src="keyboard_shortcuts.js"></script> |
| </dom-module> |