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

fixed issues with css placement

Browse Source
This commit is contained in:
Bridget Morningstar
2024-12-27 15:20:16 -06:00
parent 9dfe3dcf79
commit cbcb5cfdd6
3 changed files with 66 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/browser/base/content/zen-styles/zen-popup.css
View File

@@ -196,36 +196,6 @@ panel {
min-height: calc((var(--arrowpanel-menuitem-padding-block) + 4px) * 2 + 16px); min-height: calc((var(--arrowpanel-menuitem-padding-block) + 4px) * 2 + 16px);
} }
/* Workspace icon picker styles */
#PanelUI-zen-workspaces-icon-picker-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 2px;
}
#PanelUI-zen-workspaces-icon-search-bar {
display: flex;
position: sticky;
top: 0;
background-color: inherit;
z-index: 1000;
padding: 8px;
width: 100%;
margin: 0;
box-sizing: border-box;
}
#PanelUI-zen-workspaces-icon-search-input {
width: 100%;
padding: 8px 12px;
font-size: 14px;
border: 1px solid var(--panel-separator-color, #ccc);
border-radius: 4px;
box-sizing: border-box;
margin: 0;
}
/* URL bar popup */ /* URL bar popup */
.identity-popup-security-connection > hbox > description { .identity-popup-security-connection > hbox > description {

39
src/browser/base/content/zen-styles/zen-workspaces.css
View File

@@ -253,6 +253,45 @@
} }
} }
/* Workspace icon picker styles */
#PanelUI-zen-workspaces-icon-picker-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 2px;
}
#PanelUI-zen-workspaces-icon-search-bar {
display: flex;
position: sticky;
top: 0;
background-color: inherit;
z-index: 1000;
padding: 8px;
width: 100%;
margin: 0;
box-sizing: border-box;
}
.workspace-icon-button {
min-width: 24px;
min-height: 24px;
font-size: 16px;
margin: 2px;
padding: 4px;
}
#PanelUI-zen-workspaces-icon-search-input {
width: 100%;
padding: 8px 12px;
font-size: 14px;
border: 1px solid var(--panel-separator-color, #ccc);
border-radius: 4px;
box-sizing: border-box;
margin: 0;
}
#PanelUI-zen-workspaces-list toolbarbutton { #PanelUI-zen-workspaces-list toolbarbutton {
padding: 5px; padding: 5px;
border-radius: var(--zen-button-border-radius); border-radius: var(--zen-button-border-radius);

64
src/browser/base/zen-components/ZenWorkspaces.mjs
View File

@@ -525,47 +525,45 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
return parseInt((inputLength / targetLength) * weight); return parseInt((inputLength / targetLength) * weight);
} }
for (let currentEmoji of icons) {
for (let icon of icons) { let alignmentScore = -1;
let normalizedEmojiName = currentEmoji.name.toLowerCase();
let searchScore = -1; let keywordList = currentEmoji.description.split(',').map(keyword => keyword.trim().toLowerCase());
let emojiName = icon.name.toLowerCase();
let emojiDescription = icon.description.split(',').map(keyword => keyword.trim().toLowerCase());
if (input[0] === ":") { if (input[0] === ":") {
let sliced_input = input.slice(1); let searchTerm = input.slice(1);
let nameIndex = emojiName.indexOf(sliced_input); let nameMatchIndex = normalizedEmojiName.indexOf(searchTerm);
if (nameIndex !== -1 && nameIndex === 0) { if (nameMatchIndex !== -1 && nameMatchIndex === 0) {
searchScore = calculateSearchScore(sliced_input.length, emojiName.length, 100); alignmentScore = calculateSearchScore(searchTerm.length, normalizedEmojiName.length, 100);
} }
} else { } else {
if (input === icon.emoji) { if (input === currentEmoji.emoji) {
searchScore = 999; alignmentScore = 999;
} }
let nameIndex = emojiName.replace(/_/g, ' ').indexOf(input); let nameMatchIndex = normalizedEmojiName.replace(/_/g, ' ').indexOf(input);
if (nameIndex !== -1) { if (nameMatchIndex !== -1) {
if (nameIndex === 0) { if (nameMatchIndex === 0) {
searchScore = calculateSearchScore(input.length, emojiName.length, 150); alignmentScore = calculateSearchScore(input.length, normalizedEmojiName.length, 150);
} else if (input[input.length - 1] !== " ") { } else if (input[input.length - 1] !== " ") {
searchScore += calculateSearchScore(input.length, emojiName.length, 40); alignmentScore += calculateSearchScore(input.length, normalizedEmojiName.length, 40);
} }
} }
for (let keyword of emojiDescription) { for (let keyword of keywordList) {
let keywordIndex = keyword.indexOf(input); let keywordMatchIndex = keyword.indexOf(input);
if (keywordIndex !== -1) { if (keywordMatchIndex !== -1) {
if (keywordIndex === 0) { if (keywordMatchIndex === 0) {
searchScore += calculateSearchScore(input.length, keyword.length, 50); alignmentScore += calculateSearchScore(input.length, keyword.length, 50);
} else if (input[input.length - 1] !== " ") { } else if (input[input.length - 1] !== " ") {
searchScore += calculateSearchScore(input.length, keyword.length, 5); alignmentScore += calculateSearchScore(input.length, keyword.length, 5);
} }
} }
} }
} }
// Update emojiScores with the highest rank found //if match score is not -1, add it
if (searchScore !== -1) { if (alignmentScore !== -1) {
emojiScores.push({ "emoji": icon.emoji, "Score": searchScore }); emojiScores.push({ "emoji": currentEmoji.emoji, "score": alignmentScore });
} }
} }
@@ -582,7 +580,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
return filteredEmojiScores.map(score => score.emoji); return filteredEmojiScores.map(score => score.emoji);
} }
resetWorkspaceIconSearch(){ resetWorkspaceIconSearch(){
let container = document.getElementById('PanelUI-zen-workspaces-icon-picker-wrapper'); let container = document.getElementById('PanelUI-zen-workspaces-icon-picker-wrapper');
let searchInput = document.getElementById('PanelUI-zen-workspaces-icon-search-input'); let searchInput = document.getElementById('PanelUI-zen-workspaces-icon-search-input');
@@ -600,14 +597,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
searchInput.value = ''; searchInput.value = '';
for (let icon of this._kIcons) { for (let icon of this._kIcons) {
let button = document.createXULElement('toolbarbutton'); let button = document.createXULElement('toolbarbutton');
button.className = 'toolbarbutton-1'; button.className = 'toolbarbutton-1 workspace-icon-button';
button.style.cssText = `
min-width: 24px;
min-height: 24px;
font-size: 16px;
margin: 2px;
padding: 4px;
`;
button.setAttribute('label', icon); button.setAttribute('label', icon);
button.onclick = (event) => { button.onclick = (event) => {
const button = event.target; const button = event.target;