mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-06 03:18:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor subproject commit in zen-components and update keyboard shortcuts preferences

Browse Source
This commit is contained in:
mauro-balades
2024-09-23 17:00:27 +02:00
parent 9ebe42d9af
commit 445b21c03d
4 changed files with 105 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
l10n

Submodule l10n updated: 49b3961b5f...a0c4c558fe

2
src/browser/base/content/zen-components

Submodule src/browser/base/content/zen-components updated: b4b3c1f0d4...a97e7e65ed

90
src/browser/components/preferences/zen-settings.js
View File

@@ -637,9 +637,24 @@ const ZEN_CKS_WRAPPER_ID = `${ZEN_CKS_CLASS_BASE}-wrapper`;
const ZEN_CKS_GROUP_PREFIX = `${ZEN_CKS_CLASS_BASE}-group`;
const KEYBIND_ATTRIBUTE_KEY = 'key';
var zenMissingKeyboardShortcutL10n = {
key_quickRestart: "zen-key-quick-restart",
key_delete: "zen-key-delete",
goBackKb: "zen-key-go-back",
goForwardKb: "zen-key-go-forward",
key_enterFullScreen: "zen-key-enter-full-screen",
key_exitFullScreen: "zen-key-exit-full-screen",
key_aboutProcesses: "zen-key-about-processes",
key_stop: "zen-key-stop",
key_sanitize: "zen-key-sanitize",
key_wrCaptureCmd: "zen-key-wr-capture-cmd",
key_wrToggleCaptureSequenceCmd: "zen-key-wr-toggle-capture-sequence-cmd",
}
var gZenCKSSettings = {
async init() {
this._currentAction = null;
this._currentActionID = null;
this._initializeEvents();
await this._initializeCKS();
},
@@ -663,7 +678,7 @@ var gZenCKSSettings = {
if (!wrapper.querySelector(`[data-group="${groupClass}"]`)) {
let groupElem = document.createElement('h2');
groupElem.setAttribute('data-group', groupClass);
document.l10n.setAttributes(groupElem, `groupClass`);
document.l10n.setAttributes(groupElem, groupClass);
wrapper.appendChild(groupElem);
}
}
@@ -674,32 +689,43 @@ var gZenCKSSettings = {
const l10nID = shortcut.getL10NID();
const group = shortcut.getGroup();
const keyInString = shortcut.toUserString();
console.debug(keyInString);
// const labelValue = l10nID == null ? keyID : l10nID;
const labelValue = keyID;
const hasLabel = !l10nID;
const labelValue = !hasLabel
? l10nID
: zenMissingKeyboardShortcutL10n[keyID];
let fragment = window.MozXULElement.parseXULToFragment(`
<hbox class="${ZEN_CKS_CLASS_BASE}">
<label class="${ZEN_CKS_LABEL_CLASS}" for="${ZEN_CKS_CLASS_BASE}-${action}">${labelValue}</label>
<label class="${ZEN_CKS_LABEL_CLASS}" for="${ZEN_CKS_CLASS_BASE}-${action}"></label>
<vbox flex="1">
<html:input readonly="1" class="${ZEN_CKS_INPUT_FIELD_CLASS}" id="${ZEN_CKS_INPUT_FIELD_CLASS}-${action}" />
</vbox>
</hbox>
`);
document.l10n.setAttributes(fragment.querySelector(`.${ZEN_CKS_LABEL_CLASS}`), labelValue);
const label = fragment.querySelector(`.${ZEN_CKS_LABEL_CLASS}`);
if (!labelValue) {
label.textContent = action; // Just in case
} else {
document.l10n.setAttributes(label, labelValue);
}
let input = fragment.querySelector(`.${ZEN_CKS_INPUT_FIELD_CLASS}`);
if (keyInString) {
if (keyInString && !shortcut.isEmpty()) {
input.value = keyInString;
} else {
this._resetShortcut(input);
}
input.setAttribute(KEYBIND_ATTRIBUTE_KEY, action);
input.setAttribute('data-group', group);
input.setAttribute('data-id', keyID);
input.addEventListener('focus', (event) => {
const value = event.target.getAttribute(KEYBIND_ATTRIBUTE_KEY);
this._currentAction = value;
this._currentActionID = event.target.getAttribute('data-id');
event.target.classList.add(`${ZEN_CKS_INPUT_FIELD_CLASS}-editing`);
});
@@ -709,6 +735,12 @@ var gZenCKSSettings = {
this._editDone(target);
});
input.addEventListener('blur', (event) => {
const target = event.target;
target.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-editing`);
this._editDone(target);
});
const groupElem = wrapper.querySelector(`[data-group="${ZEN_CKS_GROUP_PREFIX}-${group}"]`);
groupElem.after(fragment);
}
@@ -727,18 +759,23 @@ var gZenCKSSettings = {
},
_editDone(shortcut, modifiers) {
// Check if we have a valid key
if (!shortcut || !modifiers) {
return;
}
gZenKeyboardShortcutsManager.setShortcut(this._currentAction, shortcut, modifiers);
this._currentAction = null;
this._currentActionID = null;
},
//TODO Check for duplicates
async _handleKeyDown(event) {
event.preventDefault();
if (!this._currentAction) {
return;
}
event.preventDefault();
let input = document.querySelector(`.${ZEN_CKS_INPUT_FIELD_CLASS}[${KEYBIND_ATTRIBUTE_KEY}="${this._currentAction}"]`);
const modifiers = new KeyShortcutModifiers(event.ctrlKey, event.altKey, event.shiftKey, event.metaKey);
const modifiersActive = modifiers.areAnyActive();
@@ -752,16 +789,39 @@ var gZenCKSSettings = {
this._latestValidKey = null;
return;
} else if (shortcut == 'Escape' && !modifiersActive) {
input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-editing`);
const hasConflicts = gZenKeyboardShortcutsManager.checkForConflicts(
this._latestValidKey ? this._latestValidKey : shortcut,
this._latestModifier ? this._latestModifier : modifiers, this._currentActionID, this._currentAction);
if (!this._latestValidKey) {
if (!this._latestValidKey || hasConflicts) {
if (!input.classList.contains(`${ZEN_CKS_INPUT_FIELD_CLASS}-invalid`)) {
input.classList.add(`${ZEN_CKS_INPUT_FIELD_CLASS}-invalid`);
}
} else {
this._editDone(input, this._latestValidKey, modifiers);
this._latestValidKey = null;
if (hasConflicts && !input.nextElementSibling) {
input.after(window.MozXULElement.parseXULToFragment(`
<label class="${ZEN_CKS_CLASS_BASE}-conflict">Conflict with another shortcut</label>
`));
}
} else {
input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-editing`);
input.blur();
this._editDone(this._latestValidKey, this._latestModifier);
this._latestValidKey = null;
this._latestModifier = null;
input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-invalid`);
input.classList.add(`${ZEN_CKS_INPUT_FIELD_CLASS}-valid`);
setTimeout(() => {
input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-valid`);
}, 1000);
const sibling = input.nextElementSibling;
if (sibling && sibling.classList.contains(`${ZEN_CKS_CLASS_BASE}-conflict`)) {
sibling.remove();
}
}
input.blur();
this._currentAction = null;
this._currentActionID = null;
return;
} else if (shortcut == 'Backspace' && !modifiersActive) {
this._resetShortcut(input);
@@ -769,7 +829,9 @@ var gZenCKSSettings = {
return;
}
this._latestModifier = modifiers;
input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-invalid`);
input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-not-set`);
input.value = modifiers.toUserString() + shortcut;
this._latestValidKey = shortcut;
},

30
src/browser/themes/shared/preferences/zen-preferences.css
View File

@@ -327,17 +327,29 @@ groupbox h2 {
user-select: none;
cursor: text;
background: transparent;
transition: border-color 0.1s;
}
.zenCKSOption {
margin-bottom: 10px;
display: flex;
align-items: center;
& > vbox {
width: fit-content;
justify-content: end;
min-width: 70%;
& > label {
margin-left: auto;
}
}
}
.zenCKSOption > label {
font-size: 14px;
color: light-dark(rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.7));
width: 100%;
}
.zenCKSOption-input.zenCKSOption-input-not-set {
@@ -349,13 +361,25 @@ groupbox h2 {
box-shadow: 0 0 0 2px var(--zen-primary-color);
}
.zenCKSOption-conflict {
color: red;
margin-left: 10px;
margin-top: 5px;
}
.zenCKSOption-input.zenCKSOption-input-invalid {
border-color: red;
}
#zenCKSOption-wrapper > [data-group]:not(:first-of-type) {
border-top: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
padding-top: 10px;
.zenCKSOption-input.zenCKSOption-input-valid {
border-color: green;
}
#zenCKSOption-wrapper > [data-group] {
border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
padding-top: 20px;
padding-bottom: 10px;
margin-bottom: 15px;
}
/* Theme builder */