1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
<div id="dialog" ?hidden="${this.isHidden_}" tabindex="-1"
lang="$i18n{language}" role="dialog" aria-modal="true"
@focusout="${this.onFocusOut_}">
<ntp-lens-form id="lensForm" @loading="${this.handleFormLoading_}"
@error="${this.handleFormError_}">
</ntp-lens-form>
<div id="container">
<cr-icon-button id="closeButton" class="icon-clear"
title="$i18n{lensSearchUploadDialogCloseButtonLabel}"
@click="${this.onCloseButtonClick_}"
@keydown="${this.onCloseButtonKeydown_}">
</cr-icon-button>
<div id="title">$i18n{lensSearchUploadDialogTitle}</div>
<div id="dragDropArea" @dragenter="${this.onDragEnter_}"
@dragover="${this.onDragOver_}" @dragleave="${this.onDragLeave_}"
@drop="${this.onDrop_}">
<!-- Error state -->
${this.isError_ ? html`
<div id="dragDropError">
<div id="dragDropErrorMessage">${this.getErrorString_()}</div>
</div>
` : ''}
<!-- Normal state -->
${this.isNormalOrError_ ? html`
<div class="drag-drop-title-container">
<div id="dragDropIllustration"></div>
<div class="drag-drop-title">
<span id="dragText">$i18n{lensSearchUploadDialogDragTitle}</span>
<span tabindex="0" role="button" id="uploadText"
@click="${this.onUploadFileClick_}"
@keydown="${this.onUploadFileKeyDown_}"
@touchend="${this.onUploadFileTouchEnd_}">
$i18n{lensSearchUploadDialogUploadFileTitle}
</span>
</div>
</div>
<div id="urlUploadContainer">
<div id="sectionDivider">
<div class="divider-line"></div>
<div id="orLabel">$i18n{lensSearchUploadDialogOrText}</div>
<div class="divider-line"></div>
</div>
<div id="inputContainer">
<input id="inputBox" autocomplete="false" autocorrect="false"
placeholder="$i18n{lensSearchUploadDialogTextPlaceholder}"
text="text" .value="${this.uploadUrl_}"
@input="${this.onInputBoxInput_}"
@keydown="${this.onUrlKeyDown_}">
<div id="inputSubmit" tabindex="0" role="button"
@click="${this.onSubmitUrl_}"
@keydown="${this.onInputSubmitKeyDown_}">
$i18n{lensSearchUploadDialogSearchButtonLabel}
</div>
</div>
</div>
` : ''}
<!-- Dragging state -->
${this.isDragging_ ? html`
<div class="drag-drop-title-container">
<div class="drag-drop-title">
$i18n{lensSearchUploadDialogDragDropTitle}
</div>
</div>
` : ''}
<!-- Loading state -->
${this.isLoading_ ? html`
<div id="loadingContainer">
<div class="spinner"></div>
<div class="drag-drop-title">
$i18n{lensSearchUploadDialogLoadingText}
</div>
</div>
` : ''}
<!-- Offline state -->
${this.isOffline_ ? html`
<div id="offlineContainer">
<div id="offlineImage"></div>
<div id="offlineTitle" class="drag-drop-title">
$i18n{lensSearchUploadDialogOfflineText}
</div>
<div id="offlineSubtitle">
$i18n{lensSearchUploadDialogOfflineSubtitleText}
</div>
<cr-button id="offlineRetryButton" class="action-button"
@click="${this.onOfflineRetryButtonClick_}"
@keydown="${this.onOfflineRetryButtonKeydown_}">
$i18n{lensSearchUploadDialogOfflineButtonLabel}
</cr-button>
</div>
` : ''}
</div>
</div>
</div>
|
