Skip to content

Optimize homepage UI and search bar styling and interactions. #1446

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mergify merged 1 commit into from
Mar 21, 2026
Merged

Optimize homepage UI and search bar styling and interactions. #1446

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,3 +222,11 @@ pnpm-debug.log*

# These are backup files generated by rustfmt
**/*.rs.bk
.monkeycode
AGENTS.md
.codex
.claude
.aider*
.cursor/
.env
.env.*
58 changes: 58 additions & 0 deletions extensions/chrome/popup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,64 @@ button {
margin-top: 8px;
}

.search-input-wrapper {
position: relative;
display: flex;
align-items: center;
}

.search-icon {
position: absolute;
left: 10px;
width: 16px;
height: 16px;
color: var(--muted);
pointer-events: none;
}

.search-input-wrapper input {
width: 100%;
padding-left: 34px;
padding-right: 34px;
transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input-wrapper input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.search-clear {
position: absolute;
right: 8px;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
background: var(--muted);
border: none;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.2s;
}

.search-clear svg {
width: 12px;
height: 12px;
color: #fff;
}

.search-clear:hover {
background: var(--text);
}

.search-clear[hidden] {
display: none;
}

.import-hint {
margin-top: 6px;
font-size: 12px;
Expand Down
18 changes: 17 additions & 1 deletion extensions/chrome/popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,23 @@ <h2 data-i18n="import_section">从 CCFDDL 导入</h2>
</div>
<label class="search-label">
<span data-i18n="search_label">搜索会议</span>
<input id="ccfddl-search" type="text" placeholder="例如：ICML / SIGMOD" data-i18n-placeholder="search_placeholder" />
<div class="search-input-wrapper">
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.35-4.35" />
</svg>
<input
id="ccfddl-search"
type="text"
placeholder="例如：ICML / SIGMOD"
data-i18n-placeholder="search_placeholder"
/>
<button id="ccfddl-clear" type="button" class="search-clear" aria-label="清除搜索" hidden>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M18 6 6 18M6 6l12 12" />
</svg>
</button>
</div>
</label>
<ul id="ccfddl-list" class="import-list"></ul>
<p id="ccfddl-empty" class="empty" data-i18n="import_empty">
Expand Down
12 changes: 11 additions & 1 deletion extensions/chrome/popup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const emptyEl = document.getElementById("empty-state");
const countEl = document.getElementById("count");
const loadCcfddlBtn = document.getElementById("load-ccfddl");
const ccfddlSearchInput = document.getElementById("ccfddl-search");
const ccfddlClearBtn = document.getElementById("ccfddl-clear");
const ccfddlList = document.getElementById("ccfddl-list");
const ccfddlEmpty = document.getElementById("ccfddl-empty");
const langToggle = document.getElementById("lang-toggle");
Expand Down Expand Up @@ -554,5 +555,14 @@ chrome.storage.local.get({ [LANG_STORAGE_KEY]: "zh" }, (result) => {
});

loadCcfddlBtn.addEventListener("click", loadCcfddlData);
ccfddlSearchInput.addEventListener("input", filterCcfddlList);
ccfddlSearchInput.addEventListener("input", () => {
filterCcfddlList();
ccfddlClearBtn.hidden = !ccfddlSearchInput.value.trim();
});
ccfddlClearBtn.addEventListener("click", () => {
ccfddlSearchInput.value = "";
ccfddlClearBtn.hidden = true;
filterCcfddlList();
ccfddlSearchInput.focus();
});
refreshDeadlinesBtn.addEventListener("click", loadDeadlines);
Loading
Loading