Skip to content

Commit

Permalink
fixed formatting; added os specific key names; tooltip displays error…
Browse files Browse the repository at this point in the history 
… messages; still missing mobile version
  • Loading branch information
@martholomew
martholomew committed Oct 31, 2024
1 parent 5f41352 commit 95c1dbd
Show file tree
Hide file tree
Showing 5 changed files with 105 additions and 75 deletions.
91 changes: 44 additions & 47 deletions ext/action-popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,58 +16,55 @@
<script src="/js/pages/action-popup-main.js" type="module"></script>
</head>
<body>
<div>
<div tabindex="0" class="action-item action-select-profile" hidden>
<div class="action-item-inner">
<div class="action-item-left">
<h2>Profile</h2>
</div>
<div class="action-item-right">
<select class="profile-select" id="profile-select">
</select>
<div id="loading">
Loading...
</div>

<div id="action-popups">
<div id="mini">
<div tabindex="0" class="action-item action-select-profile" hidden>
<div class="action-item-inner">
<div class="action-item-left">
<h2 class="action-title">Profile</h2>
</div>
<div class="action-item-right">
<select class="profile-select" id="profile-select">
</select>
</div>
</div>
</div>
</div>
<div tabindex="0" class="action-item">
<div class="action-item-inner">
<div class="action-item-center">
<label class="toggle">
<input type="checkbox" class="enable-search">
<div class="toggle-group">
<span class="toggle-on">On</span>
<span class="toggle-off">Off</span>
<span class="toggle-handle"></span>
</div>
</label>
<p class="tooltip">Hold <em class="modifier-key">shift</em> to scan</p>
<div tabindex="0" class="action-item">
<div class="action-item-inner">
<div class="action-item-center">
<label class="toggle">
<input type="checkbox" class="enable-search">
<div class="toggle-group">
<span class="toggle-on">On</span>
<span class="toggle-off">Off</span>
<span class="toggle-handle"></span>
</div>
</label>
<p class="tooltip">Hover over text to scan</p>
</div>
</div>
</div>
</div>
<div tabindex="0" class="action-container">
<button type="button" class="low-emphasis action-open-settings" title="Settings" data-hotkey='["global:openSettingsPage","title","Settings ({0})"]'>
<div class="action-icon">
<span class="icon" data-icon="cog"></span>
</div>
</button>
<button type="button" class="low-emphasis action-open-permissions" title="Permissions" hidden>
<div class="action-icon">
<span class="icon" data-icon="key"></span>
<div class="nav-button-warning-badge permissions-required-warning" hidden>
<div class="nav-button-warning-badge-outer"></div>
<div class="nav-button-warning-badge-inner"></div>
<div tabindex="0" class="action-container">
<button type="button" class="low-emphasis action-open-settings" title="Settings" data-hotkey='["global:openSettingsPage","title","Settings ({0})"]'>
<div class="action-icon">
<span class="icon" data-icon="cog"></span>
</div>
</div>
</button>
<button type="button" class="low-emphasis action-open-search" title="Search" data-hotkey='["global:openSearchPage","title","Search ({0})\nShift+click to open here"]'>
<div class="action-icon">
<span class="icon" data-icon="magnifying-glass"></span>
</div>
</button>
<button type="button" class="low-emphasis action-open-info" title="Information" data-hotkey='["global:openInfoPage","title","Information ({0})"]'>
<div class="action-icon">
<span class="icon" data-icon="info"></span>
</div>
</button>
</button>
<button type="button" class="low-emphasis action-open-search" title="Search&#010;Shift+click to open here" data-hotkey='["global:openSearchPage","title","Search ({0})\nShift+click to open here"]'>
<div class="action-icon">
<span class="icon" data-icon="magnifying-glass"></span>
</div>
</button>
<button type="button" class="low-emphasis action-open-info" title="Information" data-hotkey='["global:openInfoPage","title","Information ({0})"]'>
<div class="action-icon">
<span class="icon" data-icon="question-mark-circle"></span>
</div>
</button>
</div>
</div>
</div>
</body>
Expand Down
24 changes: 16 additions & 8 deletions ext/css/action-popup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@
--background-color: #f8f9fa;
--text-color: #333333;
--svg-filter: 0;
--animation-duration: 0.5s;
}

:root[data-theme=dark] {
Expand Down Expand Up @@ -393,7 +392,6 @@ select.profile-select {
cursor: pointer;
}


.action-icon {
flex: 0 0 auto;
align-self: center;
Expand All @@ -405,9 +403,13 @@ select.profile-select {
height: 1.5em;
}

.low-emphasis {
position: relative;
}

.action-item {
position: relative;
padding: .5em;
padding: 0.5em;
}
.action-item:not([hidden]) {
display: block;
Expand Down Expand Up @@ -449,7 +451,7 @@ select.profile-select {
align-items: center;
align-content: center;
justify-content: flex-end;
padding-left: .5em;
padding-left: 0.5em;
}

.action-container {
Expand All @@ -465,7 +467,7 @@ select.profile-select {

/* Misc */

h2 {
h2.action-title {
padding: 0;
margin: 0;
font-size: 1.125em;
Expand All @@ -474,15 +476,21 @@ h2 {
}

.tooltip {
color: gray;
color: #808080;
padding: 0;
margin: 0;
}

input[type=text] {
width: 12em;
.enable-dictionary-tooltip {
color: #ff0000;
font-weight: bold;
font-style: normal;
}

.tooltip>a:link, a:visited {
color: #ff0000;
font-style: normal;
}


/* Mobile overrides */
Expand Down
1 change: 0 additions & 1 deletion ext/css/material.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,6 @@ body {
.icon[data-icon=connection] { --icon-image: url(/images/connection.svg); }
.icon[data-icon=external-link] { --icon-image: url(/images/external-link.svg); }
.icon[data-icon=monitor] { --icon-image: url(/images/monitor.svg); }
.icon[data-icon=info] { --icon-image: url(/images/info.svg); }
.icon[data-icon=material-down-arrow] {
--icon-image: url(/images/material-down-arrow.svg);
--icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1);
Expand Down
1 change: 0 additions & 1 deletion ext/images/info.svg
View file

This file was deleted.

63 changes: 45 additions & 18 deletions ext/js/pages/action-popup-main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {ThemeController} from '../app/theme-controller.js';
import {Application} from '../application.js';
import {getAllPermissions, hasRequiredPermissionsForOptions} from '../data/permissions-util.js';
import {HotkeyHelpController} from '../input/hotkey-help-controller.js';
import {HotkeyUtil} from '../input/hotkey-util.js';

class DisplayController {
/**
Expand All @@ -32,6 +33,8 @@ class DisplayController {
this._optionsFull = null;
/** @type {ThemeController} */
this._themeController = new ThemeController(document.documentElement);
/** @type {HotkeyUtil} */
this._hotkeyUtil = new HotkeyUtil();
}

/** */
Expand All @@ -40,6 +43,9 @@ class DisplayController {

const manifest = chrome.runtime.getManifest();

const {platform: {os}} = await this._api.getEnvironmentInfo();
this._hotkeyUtil.os = os;

this._showExtensionInfo(manifest);
void this._setupEnvironment();
this._setupButtonEvents('.action-open-search', 'openSearchPage', chrome.runtime.getURL('/search.html'), this._onSearchClick.bind(this));
Expand All @@ -58,7 +64,6 @@ class DisplayController {
''
);
this._setupButtonEvents('.action-open-settings', 'openSettingsPage', chrome.runtime.getURL(optionsPageUrl));
this._setupButtonEvents('.action-open-permissions', null, chrome.runtime.getURL('/permissions.html'));

const {profiles, profileCurrent} = optionsFull;
const defaultProfile = (profileCurrent >= 0 && profileCurrent < profiles.length) ? profiles[profileCurrent] : null;
Expand All @@ -81,12 +86,29 @@ class DisplayController {

// Private

/** */
_updateDisplayModifierKey() {
const {profiles, profileCurrent} = /** @type {import('settings').Options} */ (this._optionsFull);
/** @type {NodeListOf<HTMLElement>} */
const modifierKeys = document.querySelectorAll('em.modifier-key');
for (let i = 0; i < modifierKeys.length; i++) {
modifierKeys[i].textContent = profiles[profileCurrent].options.scanning.inputs[0].include ? profiles[profileCurrent].options.scanning.inputs[0].include : "no key"; // Change to your desired text
const modifierKeyHint = document.querySelectorAll('.tooltip');

const currentModifierKey = profiles[profileCurrent].options.scanning.inputs[0].include;

/** @type {{ [key: string]: string }} */
const modifierKeys = {};
for (const value of /** @type {import('input').ModifierKey[]} */ (['alt', 'ctrl', 'shift', 'meta'])) {
const name = this._hotkeyUtil.getModifierDisplayValue(value);
modifierKeys[value] = name;
}

for (let i = 0; i < modifierKeyHint.length; i++) {
modifierKeyHint[i].textContent = currentModifierKey ? 'Hold ' : 'Hover over text to scan';
if (currentModifierKey) {
const em = document.createElement('em');
em.textContent = modifierKeys[currentModifierKey];
modifierKeyHint[i].appendChild(em);
modifierKeyHint[i].appendChild(document.createTextNode(' to scan'));
}
}
}

Expand Down Expand Up @@ -216,13 +238,13 @@ class DisplayController {
}
toggle.addEventListener('change', onToggleChanged, false);
}
void this._updateDisplayModifierKey();
void this._updateDictionariesEnabledWarnings(options);
void this._updatePermissionsWarnings(options);

this._themeController.theme = options.general.popupTheme;
this._themeController.siteOverride = true;
this._themeController.updateTheme();
this._updateDisplayModifierKey();
}

/** */
Expand All @@ -247,7 +269,6 @@ class DisplayController {
/** @type {NodeListOf<HTMLSelectElement>} */
const selects = document.querySelectorAll('.profile-select');
/** @type {NodeListOf<HTMLElement>} */
// const optionGroups = document.querySelectorAll('.profile-select-option-group');
for (let i = 0; i < Math.min(selects.length); i++) {
const fragment = document.createDocumentFragment();
for (let j = 0, jj = profiles.length; j < jj; ++j) {
Expand All @@ -272,11 +293,14 @@ class DisplayController {
const node = /** @type {HTMLInputElement} */ (event.currentTarget);
const value = Number.parseInt(node.value, 10);
if (typeof value === 'number' && Number.isFinite(value) && value >= 0 && value < /** @type {import('settings').Options} */ (this._optionsFull).profiles.length) {
void this._setDefaultProfileIndex(value);
this._optionsFull.profileCurrent = value;
const defaultProfile = this._optionsFull.profiles[this._optionsFull.profileCurrent];
if (defaultProfile !== null) {
this._setupOptions(defaultProfile);
const optionsFull = this._optionsFull;
if (optionsFull && value < optionsFull.profiles.length) {
void this._setDefaultProfileIndex(value);
optionsFull.profileCurrent = value;
const defaultProfile = optionsFull.profiles[optionsFull.profileCurrent];
if (defaultProfile !== null) {
this._setupOptions(defaultProfile);
}
}
}
}
Expand All @@ -300,7 +324,7 @@ class DisplayController {
* @param {import('settings').ProfileOptions} options
*/
async _updateDictionariesEnabledWarnings(options) {
const noDictionariesEnabledWarnings = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.no-dictionaries-enabled-warning'));
const tooltip = document.querySelectorAll('.tooltip');
const dictionaries = await this._api.getDictionaryInfo();

const enabledDictionaries = new Set();
Expand All @@ -317,9 +341,11 @@ class DisplayController {
}
}

const hasEnabledDictionary = (enabledCount > 0);
for (const node of noDictionariesEnabledWarnings) {
node.hidden = hasEnabledDictionary;
if (enabledCount === 0) {
for (let i = 0; i < tooltip.length; i++) {
tooltip[i].innerHTML = 'No dictionary enabled';
tooltip[i].classList.add('enable-dictionary-tooltip');
}
}
}

Expand All @@ -330,10 +356,11 @@ class DisplayController {
const permissions = await getAllPermissions();
if (hasRequiredPermissionsForOptions(permissions, options)) { return; }

const warnings = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.action-open-permissions,.permissions-required-warning'));
for (const node of warnings) {
node.hidden = false;
const tooltip = document.querySelectorAll('.tooltip');
for (let i = 0; i < tooltip.length; i++) {
tooltip[i].innerHTML = '<a class="action-open-permissions">Please enable permissions</a>';
}
this._setupButtonEvents('.action-open-permissions', null, chrome.runtime.getURL('/permissions.html'));
}

/** @returns {Promise<boolean>} */
Expand Down

0 comments on commit 95c1dbd

Please sign in to comment.