| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="/profile_browser_proxy.html"> |
| <link rel="import" href="/shared_styles.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html"> |
| <link rel="import" href="chrome://resources/cr_elements/icons.html"> |
| <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> |
| <link rel="import" href="chrome://resources/html/action_link.html"> |
| <link rel="import" href="chrome://resources/html/cr.html"> |
| <link rel="import" href="chrome://resources/html/i18n_behavior.html"> |
| <link rel="import" href="chrome://resources/html/md_select_css.html"> |
| <link rel="import" href="chrome://resources/html/util.html"> |
| <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html"> |
| |
| <dom-module id="create-profile"> |
| <template> |
| <style |
| include="shared-styles iron-positioning md-select"> |
| :host { |
| align-self: center; |
| } |
| |
| .container { |
| color: var(--cr-primary-text-color); |
| width: var(--page-width); |
| } |
| |
| #message-container { |
| -webkit-transition: top 400ms cubic-bezier(.4, 0, .2, 1), |
| visibility 0s linear 400ms; |
| align-items: center; |
| background-color: var(--paper-red-50); |
| box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12); |
| color: var(--google-red-700); |
| display: flex; |
| height: 40px; |
| left: 0; |
| overflow: hidden; |
| padding: 0 16px; |
| position: absolute; |
| right: 0; |
| top: -40px; |
| visibility: hidden; |
| } |
| |
| #message-container[visible] { |
| -webkit-transition: top 400ms cubic-bezier(.4, 0, .2, 1), |
| visibility 0s linear 0s; |
| top: 0; |
| visibility: visible; |
| } |
| |
| #message-container iron-icon { |
| --iron-icon-height: 20px; |
| --iron-icon-width: 20px; |
| } |
| |
| #message-container #message { |
| -webkit-margin-start: 16px; |
| } |
| |
| #message-container a { |
| color: inherit; |
| text-decoration: underline; |
| } |
| |
| #title-bar { |
| font-size: 16px; |
| font-weight: 500; |
| } |
| |
| #nameInput { |
| --cr-input-input: { |
| border-bottom: 1px solid var(--paper-grey-800); |
| } |
| margin-bottom: 24px; |
| margin-top: 32px; |
| width: 300px; |
| } |
| |
| cr-checkbox { |
| margin-top: 24px; |
| } |
| |
| #actions { |
| bottom: 16px; |
| display: flex; |
| position: absolute; |
| right: 16px; |
| } |
| |
| :host-context([dir='rtl']) #actions { |
| left: 16px; |
| right: auto; |
| } |
| |
| #actions paper-spinner-lite { |
| -webkit-margin-end: 8px; |
| align-self: center; |
| height: 20px; |
| width: 20px; |
| } |
| </style> |
| <div id="message-container" visible$="[[isMessageVisble_]]"> |
| <iron-icon icon="cr:warning"></iron-icon> |
| <span id="message" inner-h-t-m-l="[[message_]]"></span> |
| </div> |
| <div class="container"> |
| <div id="title-bar">$i18n{createProfileTitle}</div> |
| <cr-input id="nameInput" value="{{profileName_}}" pattern=".*\S.*" |
| auto-validate> |
| </cr-input> |
| <cr-profile-avatar-selector avatars="[[availableIcons_]]" |
| selected-avatar="{{selectedAvatar_}}"> |
| </cr-profile-avatar-selector> |
| <cr-checkbox id="createShortcutCheckbox" checked="{{createShortcut_}}" |
| hidden="[[!isProfileShortcutsEnabled_]]"> |
| $i18n{createDesktopShortcutLabel} |
| </cr-checkbox> |
| <div id="actions"> |
| <paper-spinner-lite active="[[isSpinnerActive_(createInProgress_)]]"> |
| </paper-spinner-lite> |
| <paper-button id="cancel" class="cancel-button" |
| on-tap="onCancelTap_"> |
| $i18n{cancel} |
| </paper-button> |
| <paper-button id="save" class="action-button" on-tap="onSaveTap_" |
| disabled="[[isSaveDisabled_(createInProgress_, profileName_)]]"> |
| $i18n{createProfileConfirm} |
| </paper-button> |
| </div> |
| </div> |
| </template> |
| <script src="create_profile.js"></script> |
| </dom-module> |