chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html - Issue 1933913002: Add a very basic PIN UI implementation that is shared between lock and settings.

Side by Side Diff: chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html

Issue 1933913002: Add a very basic PIN UI implementation that is shared between lock and settings. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@lkgr

Patch Set: Fix tests by removing a previously unused import that started getting used b/c of resource loader c… Created 4 years, 7 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « chrome/browser/resources/chromeos/login/screen_container.html ('k') | chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!-- TODO(crbug.com/603217): Use i18n instead of string literals. Figure out

	2 what i18n to use for keypad, ie, does 1 ABC make

	3 sense in every scenario? -->

	4

	5 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-butt on.html">

	6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper -icon-button.html">

	7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/paper-styl es.html">

	8 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.h tml">

	9

	10 <dom-module id="pin-keyboard">

	11 <template>

	12 <style>

	13 #root {

	14 display: flex;

	15 }

	16

	17 /* TODO(jdufault): Remove this CSS once we inline the PIN element with the

	18 * user-pod. */

	19 #container-constrained-width {

	20 -webkit-tap-highlight-color: transparent;

	21 background: white;

	22 border-radius: 2px;

	23 box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2),

	24 0 2px 6px rgba(0, 0, 0, 0.15),

	25 0 3px 0 rgba(0, 0, 0, 0.08);

	26 cursor: pointer;

	27 flex-direction: column;

	28 outline: none;

	29 }

	30

	31 .row {

	32 display: flex;

	33 }

	34

	35 .row.horizontal-center {

	36 justify-content: center;

	37 }

	38

	39 .digit-button {

	40 align-items: center;

	41 background: none;

	42 border-radius: 50px;

	43 display: flex;

	44 font-size: 30px;

	45 justify-content: center;

	46 margin: 5px;

	47 min-width: 94px;

	48 width: 94px;

	49 }

	50

	51 .digit-button inner-text {

	52 display: flex;

	53 flex-direction: column;

	54 height: 52px;

	55 }

	56

	57 .digit-button inner-text subhead {

	58 color: var(--paper-grey-500);

	59 font-size: 16px;

	60 }

	61

	62 .digit-button .submit-button {

	63 background: var(--paper-blue-a400);

	64 color: white;

	65 font-size: 20px;

	66 height: 60px;

	67 min-width: 0;

	68 width: 60px;

	69 }

	70

	71 #pin-input {

	72 -webkit-text-security: disc;

	73 border-bottom-color: lightgray;

	74 border-left: none;

	75 border-right: none;

	76 border-top: none;

	77 font-size: 20px;

	78 height: 30px;

	79 margin-top: 10px;

	80 text-align: center;

	81 width: 95%;

	82 }

	83

	84 #pin-input[type=number]::-webkit-inner-spin-button,

	85 #pin-input[type=number]::-webkit-outer-spin-button {

	86 -webkit-appearance: none;

	87 margin: 0;

	88 }

	89

	90 /* Ensure that all children of paper-button do not consume events. This

	91 * simplifies the event handler code. */

	92 paper-button * {

	93 pointer-events: none;

	94 }

	95 </style>

	96

	97 <div id="root">

	98 <div id="container-constrained-width">

	99 <div class="row horizontal-center">

	100 <input id="pin-input" type="number" placeholder="Enter PIN"

	101 on-keydown="onInputKeyDown_"></input>

	102 </div>

	103

	104 <div class="row keyboard">

	105 <paper-button class="digit-button" on-tap="onNumberTap_" value="1">

	106 <inner-text>1</inner-text>

	107 </paper-button>

	108 <paper-button class="digit-button" on-tap="onNumberTap_" value="2">

	109 <inner-text>2<subhead>ABC</subhead></inner-text>

	110 </paper-button>

	111 <paper-button class="digit-button" on-tap="onNumberTap_" value="3">

	112 <inner-text>3<subhead>DEF</subhead></inner-text>

	113 </paper-button>

	114 </div>

	115 <div class="row keyboard">

	116 <paper-button class="digit-button" on-tap="onNumberTap_" value="4">

	117 <inner-text>4<subhead>GHI</subhead></inner-text>

	118 </paper-button>

	119 <paper-button class="digit-button" on-tap="onNumberTap_" value="5">

	120 <inner-text>5<subhead>JKL</subhead></inner-text>

	121 </paper-button>

	122 <paper-button class="digit-button" on-tap="onNumberTap_" value="6">

	123 <inner-text>6<subhead>MNO</subhead></inner-text>

	124 </paper-button>

	125 </div>

	126 <div class="row keyboard">

	127 <paper-button class="digit-button" on-tap="onNumberTap_" value="7">

	128 <inner-text>7<subhead>PQRS</subhead></inner-text>

	129 </paper-button>

	130 <paper-button class="digit-button" on-tap="onNumberTap_" value="8">

	131 <inner-text>8<subhead>TUV</subhead></inner-text>

	132 </paper-button>

	133 <paper-button class="digit-button" on-tap="onNumberTap_" value="9">

	134 <inner-text>9<subhead>WXYZ</subhead></inner-text>

	135 </paper-button>

	136 </div>

	137 <div class="row keyboard">

	138 <div class="digit-button"></div>

	139 <paper-button class="digit-button" on-tap="onNumberTap_" value="0">

	140 <inner-text>0</inner-text>

	141 </paper-button>

	142 <div class="digit-button">

	143 <paper-icon-button class="digit-button submit-button"

	144 icon="icons:check" on-tap="onPinSubmit_">

	145 </paper-icon-button>

	146 </div>

	147 </div>

	148 </div>

	149 </div>

	150 </template>

	151 <script src="pin_keyboard.js"></script>

	152 </dom-module>

OLD	NEW