blob: b3ff61bf392602bac2240064df9863bb80453449 [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
<link rel="import" href="chrome://resources/html/action_link.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
<link rel="import" href="../controls/settings_toggle_button.html">
<link rel="import" href="../settings_shared_css.html">
<dom-module id="settings-stylus">
<template>
<style include="settings-shared md-select">
.settings-box > .secondary {
align-items: center;
display: flex;
/* 'secondary' class applies a top margin. This breaks centering. */
margin-top: 0;
}
paper-spinner-lite {
margin-left: 12px;
@apply --cr-icon-height-width;
}
cr-policy-indicator {
padding: 0 var(--cr-controlled-by-spacing);
}
#note-taking-app-lock-screen-settings {
padding: 0 var(--settings-box-row-padding);
}
</style>
<settings-toggle-button id="enableStylusToolsToggle"
class="continuation"
pref="{{prefs.settings.enable_stylus_tools}}"
label="$i18n{stylusEnableStylusTools}">
</settings-toggle-button>
<template is="dom-if" if="[[hasInternalStylus_]]">
<settings-toggle-button
id ="launchPaletteOnEjectEventToggle"
pref="{{prefs.settings.launch_palette_on_eject_event}}"
label="$i18n{stylusAutoOpenStylusTools}"
disabled="[[!prefs.settings.enable_stylus_tools.value]]">
</settings-toggle-button>
</template>
<div class="settings-box">
<div id="stylusNoteTakingAppLabel" class="start">
$i18n{stylusNoteTakingApp}
</div>
<div id="no-apps" class="secondary"
hidden$="[[!showNoApps_(appChoices_, waitingForAndroid_)]]">
$i18n{stylusNoteTakingAppNoneAvailable}
</div>
<div id="waiting" class="secondary" hidden$="[[!waitingForAndroid_]]">
$i18n{stylusNoteTakingAppWaitingForAndroid}
<paper-spinner-lite active></paper-spinner-lite>
</div>
<select id="selectApp" class="md-select"
on-change="onSelectedAppChanged_"
aria-labelledby="stylusNoteTakingAppLabel"
hidden$="[[!showApps_(appChoices_, waitingForAndroid_)]]">
<template is="dom-repeat" items="[[appChoices_]]">
<option value="[[item.value]]" selected="[[item.preferred]]">
[[item.name]]
</option>
</template>
</select>
</div>
<!-- TODO(scottchen): Make a proper a[href].settings-box with
icon-external (see: https://crbug.com/684005)-->
<div class="settings-box two-line" on-click="onFindAppsTap_" actionable
hidden$="[[!prefs.arc.enabled.value]]">
<div class="start">
$i18n{stylusFindMoreAppsPrimary}
<div class="secondary" id="stylusFindMoreAppsSecondary">
$i18n{stylusFindMoreAppsSecondary}
</div>
</div>
<paper-icon-button-light class="icon-external">
<button aria-label="$i18n{stylusFindMoreAppsPrimary}"
aria-describedby="stylusFindMoreAppsSecondary"></button>
</paper-icon-button-light>
</div>
<template is="dom-if" if="[[supportsLockScreen_(selectedApp_)]]">
<div id="note-taking-app-lock-screen-settings">
<h2>$i18n{stylusNoteTakingAppLockScreenSettingsHeader}</h2>
<div class="settings-box first">
<div id="lock-screen-toggle-label" class="start"
actionable$="[[!disallowedOnLockScreenByPolicy_(selectedApp_)]]"
on-click="toggleLockScreenSupport_">
$i18n{stylusNoteTakingAppEnabledOnLockScreen}
</div>
<template is="dom-if"
if="[[disallowedOnLockScreenByPolicy_(selectedApp_)]]">
<cr-policy-indicator
id="enable-app-on-lock-screen-policy-indicator"
indicator-type="[[userPolicyIndicator_]]">
</cr-policy-indicator>
</template>
<cr-toggle id="enable-app-on-lock-screen-toggle"
aria-labelledby="lock-screen-toggle-label"
disabled="[[disallowedOnLockScreenByPolicy_(selectedApp_)]]"
checked="[[lockScreenSupportEnabled_(selectedApp_)]]"
on-change="toggleLockScreenSupport_">
</cr-toggle>
</div>
<template is="dom-if" if="[[lockScreenSupportEnabled_(selectedApp_)]]">
<settings-toggle-button id="keep-last-note-on-lock-screen-toggle"
pref="{{prefs.settings.restore_last_lock_screen_note}}"
label="$i18n{stylusNoteTakingAppKeepsLastNoteOnLockScreen}">
</settings-toggle-button>
</template>
</div>
</template>
</template>
<script src="stylus.js"></script>
</dom-module>