Skip to content

Commit 149e6fd

Browse files
amyleesterlingclaude
amyleesterling
and
claude
committed
UI polish: larger icons, Pyr logo, Week in Science SVG, spacing, Selection Details
- Smaller Trophy Case particles (4px base, was 6px) - Top bar icons: 18px font (was 15px), 32x30 buttons (was 30x28), 4px gap - SVG icons for Cut/Merge/Week in Science in both toolbar and Settings - Week in Science: new bar chart + trend line SVG icon (was 📊 emoji) - Pyr icon stays in top left (no longer overwritten by CaveLogo) - Added spacing between neuroglancer native icons near Share - Moved Selection Details toggle to Settings > Advanced - Hidden Selection Details button from neuroglancer top bar - Settings toolbar config now shows SVG icons matching the top bar Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 4e6df2a commit 149e6fd

File tree

3 files changed

+56
-30
lines changed

3 files changed

+56
-30
lines changed

‎src/components/ExtensionBar.vue‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const invalidLogins = computed(() => login.sessions.filter(x => x.status !== und
5858
const {volumes} = useVolumesStore();
5959
6060
onMounted(() => {
61-
(document.querySelector('.ng-extend-logo > a > img')! as HTMLImageElement).src = logoImage;
61+
// Keep Pyr icon in top-left (don't overwrite with CaveLogo)
6262
document.addEventListener('nge:open-profile', ((e: CustomEvent) => {
6363
profileUserId.value = e.detail?.userId || null;
6464
showProfile.value = true;
@@ -113,13 +113,13 @@ interface ToolbarIcon {
113113
}
114114
115115
// Branch-style SVG icons for split & merge (must match profile icons)
116-
const SPLIT_SVG = `<svg viewBox="0 0 16 16" fill="none" style="width:16px;height:16px;vertical-align:middle;color:#e06060"><path d="M8 3v2a4 4 0 0 1-4 4H4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M8 3v2a4 4 0 0 0 4 4h0" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="8" cy="2.5" r="1.5" fill="currentColor"/><circle cx="4" cy="13" r="1.5" fill="currentColor"/><circle cx="12" cy="13" r="1.5" fill="currentColor"/><path d="M4 9v4M12 9v4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>`;
117-
const MERGE_SVG = `<svg viewBox="0 0 16 16" fill="none" style="width:16px;height:16px;vertical-align:middle;color:#60c060"><path d="M4 3v4a4 4 0 0 0 4 4h0a4 4 0 0 0 4-4V3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="4" cy="2.5" r="1.5" fill="currentColor"/><circle cx="12" cy="2.5" r="1.5" fill="currentColor"/><circle cx="8" cy="13" r="1.5" fill="currentColor"/><path d="M8 11v2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>`;
116+
const SPLIT_SVG = `<svg viewBox="0 0 16 16" fill="none" style="width:18px;height:18px;vertical-align:middle;color:#e06060"><path d="M8 3v2a4 4 0 0 1-4 4H4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M8 3v2a4 4 0 0 0 4 4h0" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="8" cy="2.5" r="1.5" fill="currentColor"/><circle cx="4" cy="13" r="1.5" fill="currentColor"/><circle cx="12" cy="13" r="1.5" fill="currentColor"/><path d="M4 9v4M12 9v4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>`;
117+
const MERGE_SVG = `<svg viewBox="0 0 16 16" fill="none" style="width:18px;height:18px;vertical-align:middle;color:#60c060"><path d="M4 3v4a4 4 0 0 0 4 4h0a4 4 0 0 0 4-4V3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="4" cy="2.5" r="1.5" fill="currentColor"/><circle cx="12" cy="2.5" r="1.5" fill="currentColor"/><circle cx="8" cy="13" r="1.5" fill="currentColor"/><path d="M8 11v2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>`;
118118
119119
const toolbarDefs = computed<ToolbarIcon[]>(() => [
120120
{ id: 'split', emoji: '✂️', svg: SPLIT_SVG, label: 'Cut Mode (C)', action: () => activateTool('multicut') },
121121
{ id: 'merge', emoji: '🔗', svg: MERGE_SVG, label: 'Merge Mode (M)', action: () => activateTool('merge') },
122-
{ id: 'recap', emoji: '📊', label: 'Your Week in Science', action: () => { showRecap.value = true; } },
122+
{ id: 'recap', emoji: '📊', svg: `<svg viewBox="0 0 16 16" fill="none" style="width:18px;height:18px;vertical-align:middle;color:#a0c4ff"><rect x="2" y="10" width="2.5" height="4" rx="0.5" fill="currentColor" opacity="0.5"/><rect x="6" y="7" width="2.5" height="7" rx="0.5" fill="currentColor" opacity="0.7"/><rect x="10" y="3" width="2.5" height="11" rx="0.5" fill="currentColor"/><path d="M3 6l3.5-2.5L10 5.5l3-3" stroke="#ffd700" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="2" r="1.2" fill="#ffd700"/></svg>`, label: 'Your Week in Science', action: () => { showRecap.value = true; } },
123123
{ id: 'leaderboard', emoji: '🏆', label: 'Leaderboard', action: () => { showLeaderboard.value = true; } },
124124
{ id: 'quest', emoji: '🧠', label: 'Brain Quest', action: () => { showQueue.value = !showQueue.value; }, badge: () => queueStore.pendingCount() },
125125
{ id: 'cells', emoji: '🧬', img: neuronIcon, label: 'Cell Library', action: () => { cellLibraryInitialTab.value = undefined; showCellLibrary.value = !showCellLibrary.value; } },
@@ -340,6 +340,16 @@ function activateTool(toolType: 'multicut' | 'merge') {
340340
#insertNGTopBar > div {
341341
width: 100%;
342342
}
343+
/* Add spacing between neuroglancer native icons next to Share */
344+
#insertNGTopBar .neuroglancer-icon,
345+
#insertNGTopBar button {
346+
margin: 0 2px;
347+
}
348+
/* Hide selection details toggle from top bar (moved to Settings > Advanced) */
349+
#insertNGTopBar .neuroglancer-icon[title*="election"],
350+
#insertNGTopBar button[title*="election"] {
351+
display: none !important;
352+
}
343353
344354
/* Style NG's Share button to look clickable */
345355
#insertNGTopBar .neuroglancer-icon[title*="Share"],
@@ -460,15 +470,15 @@ function activateTool(toolType: 'multicut' | 'merge') {
460470
.nge-toolbar-icons {
461471
display: flex;
462472
align-items: center;
463-
gap: 2px;
464-
padding: 0 6px;
473+
gap: 4px;
474+
padding: 0 8px;
465475
height: 100%;
466476
}
467477
468478
.nge-icon-btn {
469-
font-size: 15px;
470-
width: 30px;
471-
height: 28px;
479+
font-size: 18px;
480+
width: 32px;
481+
height: 30px;
472482
display: flex;
473483
align-items: center;
474484
justify-content: center;
@@ -492,8 +502,8 @@ function activateTool(toolType: 'multicut' | 'merge') {
492502
.nge-icon-btn--badge { position: relative; }
493503
494504
.nge-toolbar-icon-img {
495-
width: 16px;
496-
height: 16px;
505+
width: 18px;
506+
height: 18px;
497507
object-fit: contain;
498508
vertical-align: middle;
499509
opacity: 0.85;

‎src/components/SettingsPanel.vue‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -245,10 +245,13 @@ function handleSave() {
245245
}
246246
247247
// ── Toolbar icon choices ──────────────────────────────────────
248+
const SPLIT_SVG_SM = `<svg viewBox="0 0 16 16" fill="none" style="width:14px;height:14px;vertical-align:middle;color:#e06060"><path d="M8 3v2a4 4 0 0 1-4 4H4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M8 3v2a4 4 0 0 0 4 4h0" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="8" cy="2.5" r="1.5" fill="currentColor"/><circle cx="4" cy="13" r="1.5" fill="currentColor"/><circle cx="12" cy="13" r="1.5" fill="currentColor"/><path d="M4 9v4M12 9v4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>`;
249+
const MERGE_SVG_SM = `<svg viewBox="0 0 16 16" fill="none" style="width:14px;height:14px;vertical-align:middle;color:#60c060"><path d="M4 3v4a4 4 0 0 0 4 4h0a4 4 0 0 0 4-4V3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="4" cy="2.5" r="1.5" fill="currentColor"/><circle cx="12" cy="2.5" r="1.5" fill="currentColor"/><circle cx="8" cy="13" r="1.5" fill="currentColor"/><path d="M8 11v2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>`;
250+
const RECAP_SVG_SM = `<svg viewBox="0 0 16 16" fill="none" style="width:14px;height:14px;vertical-align:middle;color:#a0c4ff"><rect x="2" y="10" width="2.5" height="4" rx="0.5" fill="currentColor" opacity="0.5"/><rect x="6" y="7" width="2.5" height="7" rx="0.5" fill="currentColor" opacity="0.7"/><rect x="10" y="3" width="2.5" height="11" rx="0.5" fill="currentColor"/><path d="M3 6l3.5-2.5L10 5.5l3-3" stroke="#ffd700" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="2" r="1.2" fill="#ffd700"/></svg>`;
248251
const TOOLBAR_ICON_OPTIONS = [
249-
{ id: 'split', emoji: '✂️', label: 'Split Mode' },
250-
{ id: 'merge', emoji: '🔗', label: 'Merge Mode' },
251-
{ id: 'recap', emoji: '📊', label: 'Weekly Recap' },
252+
{ id: 'split', emoji: '✂️', svg: SPLIT_SVG_SM, label: 'Split Mode' },
253+
{ id: 'merge', emoji: '🔗', svg: MERGE_SVG_SM, label: 'Merge Mode' },
254+
{ id: 'recap', emoji: '📊', svg: RECAP_SVG_SM, label: 'Weekly Recap' },
252255
{ id: 'leaderboard', emoji: '🏆', label: 'Leaderboard' },
253256
{ id: 'cells', emoji: '🧬', label: 'Cell Library' },
254257
{ id: 'help', emoji: '🔍', label: 'Help Requests' },
@@ -298,6 +301,17 @@ function toggleLayerListPanel() {
298301
}
299302
}
300303
304+
function toggleSelectionDetails() {
305+
const viewer = (window as any)['viewer'];
306+
if (viewer?.selectionDetailsState?.location?.watchableVisible) {
307+
const vis = viewer.selectionDetailsState.location.watchableVisible;
308+
vis.value = !vis.value;
309+
} else if (viewer?.selectedStatePanel) {
310+
// Alternative API path
311+
viewer.selectedStatePanel.visible = !viewer.selectedStatePanel.visible;
312+
}
313+
}
314+
301315
const loginStore = useLoginStore();
302316
303317
function logoutSession(session: loginSession) {
@@ -345,7 +359,8 @@ const emit = defineEmits({hide: null});
345359
<p class="nge-settings-hint">Toggle which actions appear in your top bar.</p>
346360
<div class="nge-settings-toolbar-grid">
347361
<button v-for="opt in TOOLBAR_ICON_OPTIONS" :key="opt.id" class="nge-settings-toolbar-item" :class="{ 'nge-settings-toolbar-item--active': isToolbarIconEnabled(opt.id) }" @click="toggleToolbarIcon(opt.id)">
348-
<span class="nge-settings-toolbar-emoji">{{ opt.emoji }}</span>
362+
<span v-if="opt.svg" class="nge-settings-toolbar-emoji" v-html="opt.svg"></span>
363+
<span v-else class="nge-settings-toolbar-emoji">{{ opt.emoji }}</span>
349364
<span class="nge-settings-toolbar-label">{{ opt.label }}</span>
350365
</button>
351366
</div>
@@ -358,6 +373,7 @@ const emit = defineEmits({hide: null});
358373
<button class="nge-settings-advanced-btn" @click="openNgSettings">⚙ Viewer Settings</button>
359374
<button class="nge-settings-advanced-btn" @click="openJsonEditor">{} Edit JSON State</button>
360375
<button class="nge-settings-advanced-btn" @click="toggleLayerListPanel">☰ Layer List Panel</button>
376+
<button class="nge-settings-advanced-btn" @click="toggleSelectionDetails">◫ Selection Details</button>
361377
</div>
362378

363379
<!-- Logins management -->

‎src/components/UserProfilePanel.vue‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2293,46 +2293,46 @@ const emit = defineEmits({hide: null, 'open-settings': null});
22932293
/* Orbital dots */
22942294
.nge-trophy-orbit-dot {
22952295
position: absolute;
2296-
width: 6px; height: 6px;
2296+
width: 4px; height: 4px;
22972297
border-radius: 50%;
22982298
background: rgba(0, 220, 255, 0.8);
2299-
box-shadow: 0 0 8px rgba(0, 220, 255, 0.5), 0 0 18px rgba(0, 220, 255, 0.2);
2299+
box-shadow: 0 0 6px rgba(0, 220, 255, 0.4), 0 0 12px rgba(0, 220, 255, 0.15);
23002300
top: 50%; left: 50%;
23012301
will-change: transform;
23022302
animation: nge-trophy-orbit 40s linear infinite;
23032303
animation-delay: calc(var(--j) * -3.3s);
23042304
}
23052305
.nge-trophy-orbit-dot:nth-child(odd) {
2306-
width: 4px; height: 4px;
2306+
width: 3px; height: 3px;
23072307
background: rgba(206, 180, 255, 0.7);
2308-
box-shadow: 0 0 7px rgba(206, 180, 255, 0.4);
2308+
box-shadow: 0 0 5px rgba(206, 180, 255, 0.3);
23092309
animation-duration: 55s;
23102310
animation-direction: reverse;
23112311
}
23122312
.nge-trophy-orbit-dot:nth-child(3n) {
2313-
width: 5px; height: 5px;
2313+
width: 3.5px; height: 3.5px;
23142314
background: rgba(0, 255, 180, 0.6);
2315-
box-shadow: 0 0 7px rgba(0, 255, 180, 0.4);
2315+
box-shadow: 0 0 5px rgba(0, 255, 180, 0.3);
23162316
animation-duration: 48s;
23172317
}
23182318
/* Outer orbit particles */
23192319
.nge-trophy-orbit-dot:nth-child(n+7) {
23202320
animation-name: nge-trophy-orbit-outer;
23212321
animation-duration: 65s;
2322-
width: 4px; height: 4px;
2322+
width: 3px; height: 3px;
23232323
opacity: 0.8;
23242324
}
23252325
.nge-trophy-orbit-dot:nth-child(8) {
2326-
width: 5px; height: 5px;
2326+
width: 3.5px; height: 3.5px;
23272327
background: rgba(255, 200, 100, 0.6);
2328-
box-shadow: 0 0 6px rgba(255, 200, 100, 0.4);
2328+
box-shadow: 0 0 5px rgba(255, 200, 100, 0.3);
23292329
animation-duration: 58s;
23302330
animation-direction: reverse;
23312331
}
23322332
.nge-trophy-orbit-dot:nth-child(9) {
2333-
width: 4px; height: 4px;
2333+
width: 3px; height: 3px;
23342334
background: rgba(100, 180, 255, 0.7);
2335-
box-shadow: 0 0 7px rgba(100, 180, 255, 0.4);
2335+
box-shadow: 0 0 5px rgba(100, 180, 255, 0.3);
23362336
animation-duration: 72s;
23372337
}
23382338
.nge-trophy-orbit-dot:nth-child(10) {
@@ -2343,15 +2343,15 @@ const emit = defineEmits({hide: null, 'open-settings': null});
23432343
animation-direction: reverse;
23442344
}
23452345
.nge-trophy-orbit-dot:nth-child(11) {
2346-
width: 5px; height: 5px;
2346+
width: 3.5px; height: 3.5px;
23472347
background: rgba(0, 220, 255, 0.5);
2348-
box-shadow: 0 0 8px rgba(0, 220, 255, 0.3);
2348+
box-shadow: 0 0 5px rgba(0, 220, 255, 0.2);
23492349
animation-duration: 80s;
23502350
}
23512351
.nge-trophy-orbit-dot:nth-child(12) {
2352-
width: 3.5px; height: 3.5px;
2352+
width: 2.5px; height: 2.5px;
23532353
background: rgba(206, 147, 216, 0.6);
2354-
box-shadow: 0 0 6px rgba(206, 147, 216, 0.4);
2354+
box-shadow: 0 0 4px rgba(206, 147, 216, 0.3);
23552355
animation-duration: 62s;
23562356
animation-direction: reverse;
23572357
}

0 commit comments

Comments
 (0)