Skip to content

Commit

Permalink
Add minor styling tweaks to more accurately reflect mocks.
Browse files Browse the repository at this point in the history 
Bug: b/259442466, b/259444476, b/259426841
Change-Id: I5084f12027cb88ccb745120e4bd3ce6f1fd2b33b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4037003
Reviewed-by: Roman Arora <romanarora@chromium.org>
Commit-Queue: Yo Wakita <yowakita@google.com>
Cr-Commit-Position: refs/heads/main@{#1073522}
  • Loading branch information
Yo Wakita authored and Chromium LUCI CQ committed Nov 18, 2022
1 parent 8756a07 commit e38bac2
Showing 1 changed file with 30 additions and 44 deletions.
74 changes: 30 additions & 44 deletions chrome/browser/resources/new_tab_page/lens_upload_dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@
--upload-dialog-input-box-background: var(--color-new-tab-page-background-override);
--upload-dialog-input-box-border-color: var(--google-grey-300);
--upload-dialog-input-box-color: var(--google-grey-800);
--upload-dialog-input-box-placeholder-color: var(--google-grey-600);
--upload-dialog-input-box-placeholder-color: var(--google-grey-700);
--upload-dialog-input-submit-background: var(--color-new-tab-page-background-override);
--upload-dialog-input-submit-border-color: var(--google-grey-300);
--upload-dialog-input-submit-color: var(--google-blue-600);
--upload-dialog-shadow: var( --cr-elevation-3);
--upload-dialog-shadow: var(--cr-elevation-3);
--upload-dialog-title-color: var(--google-grey-800);
font-family: inherit;
width: 100%;
Expand Down Expand Up @@ -48,7 +48,7 @@

:host([is-dragging_]),
:host([is-loading_]) {
--upload-dialog-drag-drop-background: rgba(var(--google-blue-300), .24);
--upload-dialog-drag-drop-background: rgba(var(--google-blue-300-rgb), .24);
--upload-dialog-drag-drop-border: 1px dashed var(--google-blue-300);
--upload-dialog-drag-drop-title-color: var(--google-blue-300);
}
Expand Down Expand Up @@ -158,7 +158,8 @@
white-space: nowrap;
}

#uploadText:focus {
#uploadText:focus,
#uploadText:hover {
text-decoration: underline;
}

Expand Down Expand Up @@ -262,38 +263,38 @@
}

#inputSubmit:hover {
--upload-dialog-input-submit-background: rgba(var(--google-blue-700), 0.08);
--upload-dialog-input-submit-background: rgba(var(--google-blue-700-rgb), 0.08);
--upload-dialog-input-submit-border-color: var(--google-grey-300);
--upload-dialog-input-submit-color: var(--google-blue-600);
}

#inputSubmit:focus {
--upload-dialog-input-submit-background: rgba(var(--google-blue-700), 0.08);
--upload-dialog-input-submit-background: rgba(var(--google-blue-700-rgb), 0.08);
--upload-dialog-input-submit-border-color: var(--google-blue-700);
--upload-dialog-input-submit-color: var(--google-blue-600);
}

#inputSubmit:active {
--upload-dialog-input-submit-background: rgba(var(--google-blue-700), 0.14);
--upload-dialog-input-submit-background: rgba(var(--google-blue-700-rgb), 0.14);
--upload-dialog-input-submit-border-color: var(--google-grey-300);
--upload-dialog-input-submit-color: var(--google-blue-600);
}

@media (prefers-color-scheme: dark) {
#inputSubmit:hover {
--upload-dialog-input-submit-background: rgba(var(--google-blue-300), 0.04);
--upload-dialog-input-submit-background: rgba(var(--google-blue-300-rgb), 0.04);
--upload-dialog-input-submit-border-color: var(--google-grey-800);
--upload-dialog-input-submit-color: var(--google-blue-100);
}

#inputSubmit:focus {
--upload-dialog-input-submit-background: rgba(var(--google-blue-300), 0.12);
--upload-dialog-input-submit-background: rgba(var(--google-blue-300-rgb), 0.12);
--upload-dialog-input-submit-border-color: var(--google-blue-100);
--upload-dialog-input-submit-color: var(--google-blue-100);
}

#inputSubmit:active {
--upload-dialog-input-submit-background: rgba(var(--google-blue-300), 0.10);
--upload-dialog-input-submit-background: rgba(var(--google-blue-300-rgb), 0.10);
--upload-dialog-input-submit-border-color: var(--google-grey-800);
--upload-dialog-input-submit-color: var(--google-blue-100);
}
Expand All @@ -315,6 +316,7 @@

#offlineTitle {
color: var(--upload-dialog-title-color);
text-align: center;
}

#offlineImage {
Expand All @@ -335,30 +337,21 @@
}
</style>

<div id="dialog"
hidden$="{{isHidden_}}"
tabindex="-1"
lang="$i18n{language}"
role="dialog"
aria-modal="true">
<ntp-lens-form id="lensForm"
on-loading="handleFormLoading_"
on-error="handleFormError_">
<div id="dialog" hidden$="{{isHidden_}}" tabindex="-1" lang="$i18n{language}"
role="dialog" aria-modal="true">
<ntp-lens-form id="lensForm" on-loading="handleFormLoading_"
on-error="handleFormError_">
</ntp-lens-form>
<div id="container">
<cr-icon-button id="closeButton" class="icon-clear"
title="$i18n{lensSearchUploadDialogCloseButtonLabel}"
on-click="onCloseButtonClick_"
on-keydown="onCloseButtonKeydown_">
title="$i18n{lensSearchUploadDialogCloseButtonLabel}"
on-click="onCloseButtonClick_" on-keydown="onCloseButtonKeydown_">
</cr-icon-button>
<div id="title">
$i18n{lensSearchUploadDialogTitle}
</div>
<div id="dragDropArea"
on-dragenter="onDragEnter_"
on-dragover="onDragOver_"
on-dragleave="onDragLeave_"
on-drop="onDrop_">
<div id="dragDropArea" on-dragenter="onDragEnter_" on-dragover="onDragOver_"
on-dragleave="onDragLeave_" on-drop="onDrop_">
<!-- Error state -->
<template is="dom-if" if="{{isError_}}">
<div id="dragDropError">
Expand All @@ -373,11 +366,8 @@
<div id="dragDropIllustration"></div>
<div class="drag-drop-title">
<span id="dragText">$i18n{lensSearchUploadDialogDragTitle}</span>
<span tabindex="0"
role="button"
id="uploadText"
on-click="onUploadFileClick_"
on-keydown="onUploadFileKeyDown_">
<span tabindex="0" role="button" id="uploadText"
on-click="onUploadFileClick_" on-keydown="onUploadFileKeyDown_">
$i18n{lensSearchUploadDialogUploadFileTitle}
</span>
</div>
Expand All @@ -390,15 +380,11 @@
</div>
<div id="inputContainer">
<input id="inputBox" autocomplete="false" autocorrect="false"
placeholder="$i18n{lensSearchUploadDialogTextPlaceholder}"
text="text"
value="{{uploadUrl_::input}}"
on-keydown="onUrlKeyDown_">
<div id="inputSubmit"
tabindex="0"
role="button"
on-click="onSubmitUrl_"
on-keydown="onInputSubmitKeyDown_">
placeholder="$i18n{lensSearchUploadDialogTextPlaceholder}"
text="text" value="{{uploadUrl_::input}}"
on-keydown="onUrlKeyDown_">
<div id="inputSubmit" tabindex="0" role="button"
on-click="onSubmitUrl_" on-keydown="onInputSubmitKeyDown_">
$i18n{lensSearchUploadDialogSearchButtonLabel}
</div>
</div>
Expand Down Expand Up @@ -433,12 +419,12 @@
$i18n{lensSearchUploadDialogOfflineSubtitleText}
</div>
<cr-button id="offlineRetryButton" class="action-button"
on-click="onOfflineRetryButtonClick_"
on-keydown="onOfflineRetryButtonKeydown_">
on-click="onOfflineRetryButtonClick_"
on-keydown="onOfflineRetryButtonKeydown_">
$i18n{lensSearchUploadDialogOfflineButtonLabel}
</cr-button>
</div>
</template>
</div>
</div>
</div>
</div>

0 comments on commit e38bac2

Please sign in to comment.