Skip to content

GitLab

T
tangled
Commit 0db85ce9 authored by Shik Chen's avatar Shik Chen Committed by Chromium LUCI CQ
Browse files
Options

CCA: Add barcode detection toggle button 

This CL adds a new barcode detection toggle button and removes the old
item in expert mode menu.

Bug: b/172879638
Test: Manually
Change-Id: Ia89657f5d3d2900b53721f650058240e472b254b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2594827Reviewed-by: default avatarWei Lee <wtlee@chromium.org>
Commit-Queue: Shik Chen <shik@chromium.org>
Cr-Commit-Position: refs/heads/master@{#837518}
parent 018df9e0
Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 12 deletions
chromeos/components/camera_app_ui/resources.h
View file @ 0db85ce9
......@@ -54,6 +54,7 @@ const struct {
{"error_msg_no_camera", IDS_ERROR_MSG_NO_CAMERA},
{"error_msg_record_start_failed", IDS_ERROR_MSG_RECORD_START_FAILED},
{"toggle_mic_button", IDS_TOGGLE_MIC_BUTTON},
{"toggle_barcode_button", IDS_TOGGLE_BARCODE_BUTTON},
{"expert_mode_button", IDS_EXPERT_MODE_BUTTON},
{"expert_preview_metadata", IDS_EXPERT_PREVIEW_METADATA},
{"expert_save_metadata", IDS_EXPERT_SAVE_METADATA},
......
chromeos/components/camera_app_ui/resources/camera_app_resources.grd
View file @ 0db85ce9
......@@ -160,8 +160,10 @@
<include name="IDR_CAMERA_CAMERA_APP_ICONS_128_PNG" file="images/camera_app_icons_128.png" type="BINDATA" />
<include name="IDR_CAMERA_CAMERA_APP_ICONS_192_PNG" file="images/camera_app_icons_192.png" type="BINDATA" />
<include name="IDR_CAMERA_CAMERA_APP_ICONS_48_PNG" file="images/camera_app_icons_48.png" type="BINDATA" />
<include name="IDR_CAMERA_BARCODE_URL_SVG" file="images/barcode_url.svg" type="BINDATA" />
<include name="IDR_CAMERA_BARCODE_COPY_SVG" file="images/barcode_copy.svg" type="BINDATA" />
<include name="IDR_CAMERA_BARCODE_TOGGLE_OFF_SVG" file="images/barcode_toggle_off.svg" type="BINDATA" />
<include name="IDR_CAMERA_BARCODE_TOGGLE_ON_SVG" file="images/barcode_toggle_on.svg" type="BINDATA" />
<include name="IDR_CAMERA_BARCODE_URL_SVG" file="images/barcode_url.svg" type="BINDATA" />
<include name="IDR_CAMERA_CAMERA_BUTTON_FPS_30_SVG" file="images/camera_button_fps_30.svg" type="BINDATA" />
<include name="IDR_CAMERA_CAMERA_BUTTON_FPS_60_SVG" file="images/camera_button_fps_60.svg" type="BINDATA" />
<include name="IDR_CAMERA_CAMERA_BUTTON_GRID_OFF_SVG" file="images/camera_button_grid_off.svg" type="BINDATA" />
......
chromeos/components/camera_app_ui/resources/css/main.css
View file @ 0db85ce9
......@@ -3,6 +3,8 @@
* found in the LICENSE file. */
:root {
--blue-300-rgb: 138, 180, 248;
--blue-300: rgb(var(--blue-300-rgb));
--grey-100: rgb(241, 243, 244);
--grey-200: rgb(232, 234, 237);
--grey-900: rgb(32, 33, 36);
......@@ -509,6 +511,7 @@ body.video.taking #recordvideo {
}
body:not(.video) #toggle-mic,
body:not(.photo) #toggle-barcode,
body:not(.multi-camera) #switch-device {
visibility: hidden;
}
......@@ -646,6 +649,16 @@ body._10sec #toggle-timer:checked {
background-image: url(/images/camera_button_mic_off.svg);
}
#toggle-barcode:checked {
background: url(/images/barcode_toggle_on.svg) center no-repeat,
rgba(var(--blue-300-rgb), 0.3);
}
#toggle-barcode {
background-image: url(/images/barcode_toggle_off.svg);
border-radius: 50%;
}
body:not(.multi-fps) #toggle-fps,
body:not(.video) #toggle-fps {
display: none;
......@@ -1550,7 +1563,7 @@ body:not(.mode-switching):not(.streaming):not(.review-result) #spinner {
}
.barcode-chip-url > a {
color: rgb(138, 180, 248);
color: var(--blue-300);
max-width: 416px;
overflow: hidden;
text-decoration: none;
......
chromeos/components/camera_app_ui/resources/images/barcode_toggle_off.svg 0 → 100644
View file @ 0db85ce9
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" jetway-hooks="{}">
<title>ic_QR code</title>
<g jetway-hook-id="08335F75-6103-408B-A1E8-5C734C95C86B" id="ic_QR-code" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g jetway-hook-id="0922F802-CA75-47A8-91C7-3DDA7435639F" id="Scanner" transform="translate(2.000000, 2.000000)" fill="#E8EAED">
<path d="M0,11 L2,11 L2,14 L5,14 L5,16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,11 Z M16,11 L16,14 C16,15.1045695 15.1045695,16 14,16 L11,16 L11,14 L14,14 L14,11 L16,11 Z M14,0 C15.1045695,0 16,0.8954305 16,2 L16,5 L14,4.999 L14,2 L11,2 L11,0 L14,0 Z M5,2 L2,2 L2,5 L0,5 L0,2 C0,0.8954305 0.8954305,0 2,0 L5,0 L5,2 Z" jetway-hook-id="65066AE9-BA95-4BD2-830F-702A2BAF2373" id="Combined-Shape" fill-rule="nonzero"></path>
<path d="M7,3 L7,7 L3,7 L3,3 L7,3 Z M5.5,4.5 L4.5,4.5 L4.5,5.5 L5.5,5.5 L5.5,4.5 Z" jetway-hook-id="7AFE2645-6416-4C0A-86F8-9937AF5F8D2D" id="Rectangle" fill-rule="nonzero"></path>
<path d="M7,9 L7,13 L3,13 L3,9 L7,9 Z M5.5,10.5 L4.5,10.5 L4.5,11.5 L5.5,11.5 L5.5,10.5 Z" jetway-hook-id="60AB4502-99DF-497C-B25D-E1FEF2949C77" id="Rectangle-Copy-2" fill-rule="nonzero"></path>
<path d="M13,3 L13,7 L9,7 L9,3 L13,3 Z M11.5,4.5 L10.5,4.5 L10.5,5.5 L11.5,5.5 L11.5,4.5 Z" jetway-hook-id="489581C8-570A-4400-9696-1F0B5E704108" id="Rectangle-Copy" fill-rule="nonzero"></path>
<path d="M10.5,8.5 L10.5,10 L9.5,10 L9.5,11.5 L10.5,11.5 L10.5,13 L9,13 L9,11.5 L8,11.5 L8,10 L9,10 L9,8.5 L10.5,8.5 Z M10.5,11.5 L10.5,10 L11.5,10 L11.5,8.5 L13,8.5 L13,10 L12,10 L12,11.5 L13,11.5 L13,13 L11.5,13 L11.5,11.5 L10.5,11.5 Z" jetway-hook-id="A007E647-A565-4BF9-A946-07BABE8CA005" id="Combined-Shape"></path>
</g>
</g>
</svg>
chromeos/components/camera_app_ui/resources/images/barcode_toggle_on.svg 0 → 100644
View file @ 0db85ce9
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" jetway-hooks="{}">
<title>ic_QR code</title>
<g jetway-hook-id="08335F75-6103-408B-A1E8-5C734C95C86B" id="ic_QR-code" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g jetway-hook-id="0922F802-CA75-47A8-91C7-3DDA7435639F" id="Scanner" transform="translate(2.000000, 2.000000)" fill="#8AB4F8">
<path d="M0,11 L2,11 L2,14 L5,14 L5,16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,11 Z M16,11 L16,14 C16,15.1045695 15.1045695,16 14,16 L11,16 L11,14 L14,14 L14,11 L16,11 Z M14,0 C15.1045695,0 16,0.8954305 16,2 L16,5 L14,4.999 L14,2 L11,2 L11,0 L14,0 Z M5,2 L2,2 L2,5 L0,5 L0,2 C0,0.8954305 0.8954305,0 2,0 L5,0 L5,2 Z" jetway-hook-id="65066AE9-BA95-4BD2-830F-702A2BAF2373" id="Combined-Shape" fill-rule="nonzero"></path>
<path d="M7,3 L7,7 L3,7 L3,3 L7,3 Z M5.5,4.5 L4.5,4.5 L4.5,5.5 L5.5,5.5 L5.5,4.5 Z" jetway-hook-id="7AFE2645-6416-4C0A-86F8-9937AF5F8D2D" id="Rectangle" fill-rule="nonzero"></path>
<path d="M7,9 L7,13 L3,13 L3,9 L7,9 Z M5.5,10.5 L4.5,10.5 L4.5,11.5 L5.5,11.5 L5.5,10.5 Z" jetway-hook-id="60AB4502-99DF-497C-B25D-E1FEF2949C77" id="Rectangle-Copy-2" fill-rule="nonzero"></path>
<path d="M13,3 L13,7 L9,7 L9,3 L13,3 Z M11.5,4.5 L10.5,4.5 L10.5,5.5 L11.5,5.5 L11.5,4.5 Z" jetway-hook-id="489581C8-570A-4400-9696-1F0B5E704108" id="Rectangle-Copy" fill-rule="nonzero"></path>
<path d="M10.5,8.5 L10.5,10 L9.5,10 L9.5,11.5 L10.5,11.5 L10.5,13 L9,13 L9,11.5 L8,11.5 L8,10 L9,10 L9,8.5 L10.5,8.5 Z M10.5,11.5 L10.5,10 L11.5,10 L11.5,8.5 L13,8.5 L13,10 L12,10 L12,11.5 L13,11.5 L13,13 L11.5,13 L11.5,11.5 L10.5,11.5 Z" jetway-hook-id="A007E647-A565-4BF9-A946-07BABE8CA005" id="Combined-Shape"></path>
</g>
</g>
</svg>
chromeos/components/camera_app_ui/resources/images/images.gni
View file @ 0db85ce9
......@@ -3,8 +3,10 @@
# found in the LICENSE file.
in_app_assets = [
"barcode_url.svg",
"barcode_copy.svg",
"barcode_toggle_off.svg",
"barcode_toggle_on.svg",
"barcode_url.svg",
"camera_button_fps_30.svg",
"camera_button_fps_60.svg",
"camera_button_grid_off.svg",
......
chromeos/components/camera_app_ui/resources/js/views/camera/options.js
View file @ 0db85ce9
......@@ -50,6 +50,13 @@ export class Options {
*/
this.toggleMirror_ = dom.get('#toggle-mirror', HTMLInputElement);
/**
* @type {!HTMLInputElement}
* @private
* @const
*/
this.toggleBarcode_ = dom.get('#toggle-barcode', HTMLInputElement);
/**
* Device id of the camera device currently used or selected.
* @type {?string}
......@@ -96,6 +103,7 @@ export class Options {
this.toggleMic_.addEventListener('click', () => this.updateAudioByMic_());
this.toggleMirror_.addEventListener('click', () => this.saveMirroring_());
this.toggleBarcode_.addEventListener('click', () => this.updateBarcode_());
util.bindElementAriaLabelWithState({
element: dom.get('#toggle-timer', Element),
......@@ -233,7 +241,8 @@ export class Options {
}
/**
* Enables/disables the current audio track by the microphone option.
* Enables/disables the current audio track according to the microphone
* option.
* @private
*/
updateAudioByMic_() {
......@@ -242,6 +251,14 @@ export class Options {
}
}
/**
* Enables/disables barcode scanning according to the barcode option.
* @private
*/
updateBarcode_() {
state.set(state.State.SCAN_BARCODE, this.toggleBarcode_.checked);
}
/**
* Gets the video device ids sorted by preference.
* @return {!Promise<!Array<?string>>} May contain null for user facing camera
......
chromeos/components/camera_app_ui/resources/js/views/camera/preview.js
View file @ 0db85ce9
......@@ -9,6 +9,7 @@ import {DeviceOperator, parseMetadata} from '../../mojo/device_operator.js';
import * as nav from '../../nav.js';
import * as state from '../../state.js';
import * as util from '../../util.js';
import {Mode} from '../../type.js';
/**
* Creates a controller for the video preview of Camera view.
......@@ -203,8 +204,7 @@ export class Preview {
if (this.scanner_ === null) {
return;
}
// TODO(b/172879638): Only enables barcode scanning in Photo mode.
if (state.get(state.State.EXPERT) && state.get(state.State.SCAN_BARCODE)) {
if (state.get(Mode.PHOTO) && state.get(state.State.SCAN_BARCODE)) {
this.scanner_.start();
} else {
this.scanner_.stop();
......
chromeos/components/camera_app_ui/resources/strings/camera_strings.grd
View file @ 0db85ce9
......@@ -324,6 +324,9 @@
<message desc="Label for the checkbox to toggle the microphone for recording video." name="IDS_TOGGLE_MIC_BUTTON">
Microphone
</message>
<message desc="Label for the checkbox to toggle barcode (QR code) scanning in photo mode." name="IDS_TOGGLE_BARCODE_BUTTON">
QR code
</message>
<message desc="Label for the button of expert mode options." name="IDS_EXPERT_MODE_BUTTON">
Expert mode
</message>
......
chromeos/components/camera_app_ui/resources/views/main.html
View file @ 0db85ce9
......@@ -182,6 +182,10 @@
i18n-label="toggle_mic_button" data-state="mic"
data-key="toggleMic" checked>
</div>
<div class="top-stripe right-stripe circle buttons">
<input id="toggle-barcode" type="checkbox"
tabindex="0" i18n-label="toggle_barcode_button">
</div>
<div class="centered-overlay">
<div id="timer-tick-msg"></div>
</div>
......@@ -379,12 +383,6 @@
data-key="printPerformanceLogs">
<span i18n-content="expert_print_performance_logs"></span>
</label>
<label class="menu-item">
<input id="expert-scan-barcode" class="icon" type="checkbox"
tabindex="0" data-state="scan-barcode"
data-key="scanBarcode">
<span i18n-content="expert_scan_barcode"></span>
</label>
</div>
</div>
<div id="spinner" class="centered-overlay"></div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment