refactor: keyboard nav as primary feature, design tweaks behind experimental toggle
This commit is contained in:
Joel Brock
468
popup/popup.html
468
popup/popup.html
@@ -11,220 +11,8 @@
|
||||
<span class="or-version" id="version"></span>
|
||||
</div>
|
||||
|
||||
<!-- Theme & Appearance -->
|
||||
<div class="or-section open" data-section="theme">
|
||||
<div class="or-section-header">Theme & Appearance</div>
|
||||
<div class="or-section-body">
|
||||
<div class="or-select-row">
|
||||
<label for="theme">Theme</label>
|
||||
<select id="theme" data-setting="theme">
|
||||
<option value="swiss">Swiss</option>
|
||||
<option value="material">Material</option>
|
||||
<option value="brutalist">Brutalist</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="or-radio-group" data-setting="colorScheme">
|
||||
<label><input type="radio" name="colorScheme" value="light"> Light</label>
|
||||
<label><input type="radio" name="colorScheme" value="dark"> Dark</label>
|
||||
<label><input type="radio" name="colorScheme" value="system"> System</label>
|
||||
</div>
|
||||
<div class="or-color-row">
|
||||
<label for="accentColor">Accent color</label>
|
||||
<input type="color" id="accentColor" data-setting="accentColor" value="#1976d2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Density & Spacing -->
|
||||
<div class="or-section" data-section="density">
|
||||
<div class="or-section-header">Density & Spacing</div>
|
||||
<div class="or-section-body">
|
||||
<div class="or-select-row">
|
||||
<label for="densityPreset">Density preset</label>
|
||||
<select id="densityPreset" data-setting="densityPreset">
|
||||
<option value="comfortable">Comfortable</option>
|
||||
<option value="compact">Compact</option>
|
||||
<option value="ultra-compact">Ultra-compact</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="compactTopBar">Compact top bar</label>
|
||||
<div class="or-switch"><input type="checkbox" id="compactTopBar" data-setting="compactTopBar"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="compactCommandBar">Compact command bar</label>
|
||||
<div class="or-switch"><input type="checkbox" id="compactCommandBar" data-setting="compactCommandBar"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="compactMessageList">Compact message list</label>
|
||||
<div class="or-switch"><input type="checkbox" id="compactMessageList" data-setting="compactMessageList"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="compactReadingPane">Compact reading pane</label>
|
||||
<div class="or-switch"><input type="checkbox" id="compactReadingPane" data-setting="compactReadingPane"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="compactFolderPane">Compact folder pane</label>
|
||||
<div class="or-switch"><input type="checkbox" id="compactFolderPane" data-setting="compactFolderPane"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="narrowDateColumn">Narrow date column</label>
|
||||
<div class="or-switch"><input type="checkbox" id="narrowDateColumn" data-setting="narrowDateColumn"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="compressComposeToolbar">Compress compose toolbar</label>
|
||||
<div class="or-switch"><input type="checkbox" id="compressComposeToolbar" data-setting="compressComposeToolbar"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="readingPaneMaxWidth">Reading pane max-width</label>
|
||||
<div class="or-switch"><input type="checkbox" id="readingPaneMaxWidth" data-setting="readingPaneMaxWidth"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="unifiedHeader">Unified header (collapse all bars)</label>
|
||||
<div class="or-switch"><input type="checkbox" id="unifiedHeader" data-setting="unifiedHeader"><span class="slider"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hide Elements -->
|
||||
<div class="or-section" data-section="hide">
|
||||
<div class="or-section-header">Hide Elements</div>
|
||||
<div class="or-section-body">
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideCopilot">Copilot (button, pane, suggestions)</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideCopilot" data-setting="hideCopilot"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideSuggestedReplies">Suggested replies</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideSuggestedReplies" data-setting="hideSuggestedReplies"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hidePromoBanners">Promotional banners</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hidePromoBanners" data-setting="hidePromoBanners"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideFocusedOtherTabs">Focused / Other tabs</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideFocusedOtherTabs" data-setting="hideFocusedOtherTabs"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideSidebarAppIcons">Sidebar app icons</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideSidebarAppIcons" data-setting="hideSidebarAppIcons"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideGroupsSection">Groups section</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideGroupsSection" data-setting="hideGroupsSection"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideMyDayButtons">My Day / panel buttons</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideMyDayButtons" data-setting="hideMyDayButtons"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideSenderAvatars">Sender avatars</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideSenderAvatars" data-setting="hideSenderAvatars"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideFeatureDiscovery">Feature discovery tooltips</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideFeatureDiscovery" data-setting="hideFeatureDiscovery"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideVivaInsights">Viva Insights / Briefing</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideVivaInsights" data-setting="hideVivaInsights"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideUnreadOtherBanner">Unread in Other banner</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideUnreadOtherBanner" data-setting="hideUnreadOtherBanner"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideActivityFeed">Activity feed banners</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideActivityFeed" data-setting="hideActivityFeed"><span class="slider"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Readability -->
|
||||
<div class="or-section" data-section="readability">
|
||||
<div class="or-section-header">Readability</div>
|
||||
<div class="or-section-body">
|
||||
<div class="or-toggle-row">
|
||||
<label for="unreadDistinction">Unread distinction (bold + border)</label>
|
||||
<div class="or-switch"><input type="checkbox" id="unreadDistinction" data-setting="unreadDistinction"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="previewOwnLine">Preview text on own line</label>
|
||||
<div class="or-switch"><input type="checkbox" id="previewOwnLine" data-setting="previewOwnLine"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="normalizeFontWeight">Normalize font weight</label>
|
||||
<div class="or-switch"><input type="checkbox" id="normalizeFontWeight" data-setting="normalizeFontWeight"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="darkModeEmailFix">Dark mode email body fix</label>
|
||||
<div class="or-switch"><input type="checkbox" id="darkModeEmailFix" data-setting="darkModeEmailFix"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-select-row">
|
||||
<label for="messageListFontSize">Message list font size</label>
|
||||
<select id="messageListFontSize" data-setting="messageListFontSize">
|
||||
<option value="small">Small</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="large">Large</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Behavior -->
|
||||
<div class="or-section" data-section="behavior">
|
||||
<div class="or-section-header">Behavior</div>
|
||||
<div class="or-section-body">
|
||||
<div class="or-toggle-row">
|
||||
<label for="autoCollapseRibbon">Auto-collapse ribbon</label>
|
||||
<div class="or-switch"><input type="checkbox" id="autoCollapseRibbon" data-setting="autoCollapseRibbon"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="rememberSidebarState">Remember sidebar state</label>
|
||||
<div class="or-switch"><input type="checkbox" id="rememberSidebarState" data-setting="rememberSidebarState"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="suppressContactHover">Suppress contact hover cards</label>
|
||||
<div class="or-switch"><input type="checkbox" id="suppressContactHover" data-setting="suppressContactHover"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="autoAdvanceAfterDelete">Auto-advance after delete</label>
|
||||
<div class="or-switch"><input type="checkbox" id="autoAdvanceAfterDelete" data-setting="autoAdvanceAfterDelete"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-select-row">
|
||||
<label for="autoDismissToasts">Auto-dismiss toasts</label>
|
||||
<select id="autoDismissToasts" data-setting="autoDismissToasts">
|
||||
<option value="off">Off</option>
|
||||
<option value="3">3 seconds</option>
|
||||
<option value="5">5 seconds</option>
|
||||
<option value="10">10 seconds</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="or-select-row">
|
||||
<label for="toastPosition">Toast position</label>
|
||||
<select id="toastPosition" data-setting="toastPosition">
|
||||
<option value="bottom-left">Bottom-left</option>
|
||||
<option value="top-right">Top-right</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="stickyReplyBar">Sticky Reply/Forward bar</label>
|
||||
<div class="or-switch"><input type="checkbox" id="stickyReplyBar" data-setting="stickyReplyBar"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="autoResizeCompose">Auto-resize compose window</label>
|
||||
<div class="or-switch"><input type="checkbox" id="autoResizeCompose" data-setting="autoResizeCompose"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="throttleNotifications">Throttle desktop notifications</label>
|
||||
<div class="or-switch"><input type="checkbox" id="throttleNotifications" data-setting="throttleNotifications"><span class="slider"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Keyboard Navigation -->
|
||||
<div class="or-section" data-section="keyboard">
|
||||
<!-- Keyboard Navigation (primary feature, always visible) -->
|
||||
<div class="or-section open" data-section="keyboard">
|
||||
<div class="or-section-header">Keyboard Navigation</div>
|
||||
<div class="or-section-body">
|
||||
<div class="or-toggle-row">
|
||||
@@ -232,26 +20,258 @@
|
||||
<div class="or-switch"><input type="checkbox" id="keyboardMultiSelect" data-setting="keyboardMultiSelect"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div style="font-size:11px;color:#888;padding:4px 0 2px;line-height:1.4;">
|
||||
j/k or arrows to navigate, x/Space to select, # delete, e archive, Shift+i read, Shift+u unread, v move, Esc deselect
|
||||
j/k navigate, x/Space select, # delete, e archive,
|
||||
Shift+i/u read/unread, v move, f flag, p pin, Esc deselect
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="or-section" data-section="actions">
|
||||
<div class="or-section-header">Quick Actions</div>
|
||||
<div class="or-section-body">
|
||||
<!-- Design Tweaks Master Toggle -->
|
||||
<div class="or-section" data-section="design-master">
|
||||
<div class="or-section-header" style="cursor:default;">Design Tweaks</div>
|
||||
<div class="or-section-body" style="display:block;">
|
||||
<div class="or-toggle-row">
|
||||
<label for="markAllReadButton">"Mark all as read" button</label>
|
||||
<div class="or-switch"><input type="checkbox" id="markAllReadButton" data-setting="markAllReadButton"><span class="slider"></span></div>
|
||||
<label for="enableDesignTweaks">Enable experimental UI customization</label>
|
||||
<div class="or-switch"><input type="checkbox" id="enableDesignTweaks" data-setting="enableDesignTweaks"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="quickFolderJump">Quick folder jump (Ctrl+Shift+K)</label>
|
||||
<div class="or-switch"><input type="checkbox" id="quickFolderJump" data-setting="quickFolderJump"><span class="slider"></span></div>
|
||||
<div style="font-size:11px;color:#888;padding:2px 0;line-height:1.4;">
|
||||
Themes, density, element hiding, and behavior patches. May conflict with OWA updates.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Design Tweaks Sections (hidden when enableDesignTweaks is off) -->
|
||||
<div id="designSections">
|
||||
|
||||
<!-- Theme & Appearance -->
|
||||
<div class="or-section" data-section="theme">
|
||||
<div class="or-section-header">Theme & Appearance</div>
|
||||
<div class="or-section-body">
|
||||
<div class="or-select-row">
|
||||
<label for="theme">Theme</label>
|
||||
<select id="theme" data-setting="theme">
|
||||
<option value="swiss">Swiss</option>
|
||||
<option value="material">Material</option>
|
||||
<option value="brutalist">Brutalist</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="or-radio-group" data-setting="colorScheme">
|
||||
<label><input type="radio" name="colorScheme" value="light"> Light</label>
|
||||
<label><input type="radio" name="colorScheme" value="dark"> Dark</label>
|
||||
<label><input type="radio" name="colorScheme" value="system"> System</label>
|
||||
</div>
|
||||
<div class="or-color-row">
|
||||
<label for="accentColor">Accent color</label>
|
||||
<input type="color" id="accentColor" data-setting="accentColor" value="#1976d2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Density & Spacing -->
|
||||
<div class="or-section" data-section="density">
|
||||
<div class="or-section-header">Density & Spacing</div>
|
||||
<div class="or-section-body">
|
||||
<div class="or-select-row">
|
||||
<label for="densityPreset">Density preset</label>
|
||||
<select id="densityPreset" data-setting="densityPreset">
|
||||
<option value="comfortable">Comfortable</option>
|
||||
<option value="compact">Compact</option>
|
||||
<option value="ultra-compact">Ultra-compact</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="compactTopBar">Compact top bar</label>
|
||||
<div class="or-switch"><input type="checkbox" id="compactTopBar" data-setting="compactTopBar"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="compactCommandBar">Compact command bar</label>
|
||||
<div class="or-switch"><input type="checkbox" id="compactCommandBar" data-setting="compactCommandBar"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="compactMessageList">Compact message list</label>
|
||||
<div class="or-switch"><input type="checkbox" id="compactMessageList" data-setting="compactMessageList"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="compactReadingPane">Compact reading pane</label>
|
||||
<div class="or-switch"><input type="checkbox" id="compactReadingPane" data-setting="compactReadingPane"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="compactFolderPane">Compact folder pane</label>
|
||||
<div class="or-switch"><input type="checkbox" id="compactFolderPane" data-setting="compactFolderPane"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="narrowDateColumn">Narrow date column</label>
|
||||
<div class="or-switch"><input type="checkbox" id="narrowDateColumn" data-setting="narrowDateColumn"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="compressComposeToolbar">Compress compose toolbar</label>
|
||||
<div class="or-switch"><input type="checkbox" id="compressComposeToolbar" data-setting="compressComposeToolbar"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="readingPaneMaxWidth">Reading pane max-width</label>
|
||||
<div class="or-switch"><input type="checkbox" id="readingPaneMaxWidth" data-setting="readingPaneMaxWidth"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="unifiedHeader">Unified header (collapse all bars)</label>
|
||||
<div class="or-switch"><input type="checkbox" id="unifiedHeader" data-setting="unifiedHeader"><span class="slider"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hide Elements -->
|
||||
<div class="or-section" data-section="hide">
|
||||
<div class="or-section-header">Hide Elements</div>
|
||||
<div class="or-section-body">
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideCopilot">Copilot (button, pane, suggestions)</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideCopilot" data-setting="hideCopilot"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideSuggestedReplies">Suggested replies</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideSuggestedReplies" data-setting="hideSuggestedReplies"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hidePromoBanners">Promotional banners</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hidePromoBanners" data-setting="hidePromoBanners"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideFocusedOtherTabs">Focused / Other tabs</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideFocusedOtherTabs" data-setting="hideFocusedOtherTabs"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideSidebarAppIcons">Sidebar app icons</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideSidebarAppIcons" data-setting="hideSidebarAppIcons"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideGroupsSection">Groups section</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideGroupsSection" data-setting="hideGroupsSection"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideMyDayButtons">My Day / panel buttons</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideMyDayButtons" data-setting="hideMyDayButtons"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideSenderAvatars">Sender avatars</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideSenderAvatars" data-setting="hideSenderAvatars"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideFeatureDiscovery">Feature discovery tooltips</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideFeatureDiscovery" data-setting="hideFeatureDiscovery"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideVivaInsights">Viva Insights / Briefing</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideVivaInsights" data-setting="hideVivaInsights"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideUnreadOtherBanner">Unread in Other banner</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideUnreadOtherBanner" data-setting="hideUnreadOtherBanner"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="hideActivityFeed">Activity feed banners</label>
|
||||
<div class="or-switch"><input type="checkbox" id="hideActivityFeed" data-setting="hideActivityFeed"><span class="slider"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Readability -->
|
||||
<div class="or-section" data-section="readability">
|
||||
<div class="or-section-header">Readability</div>
|
||||
<div class="or-section-body">
|
||||
<div class="or-toggle-row">
|
||||
<label for="unreadDistinction">Unread distinction (bold + border)</label>
|
||||
<div class="or-switch"><input type="checkbox" id="unreadDistinction" data-setting="unreadDistinction"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="previewOwnLine">Preview text on own line</label>
|
||||
<div class="or-switch"><input type="checkbox" id="previewOwnLine" data-setting="previewOwnLine"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="normalizeFontWeight">Normalize font weight</label>
|
||||
<div class="or-switch"><input type="checkbox" id="normalizeFontWeight" data-setting="normalizeFontWeight"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="darkModeEmailFix">Dark mode email body fix</label>
|
||||
<div class="or-switch"><input type="checkbox" id="darkModeEmailFix" data-setting="darkModeEmailFix"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-select-row">
|
||||
<label for="messageListFontSize">Message list font size</label>
|
||||
<select id="messageListFontSize" data-setting="messageListFontSize">
|
||||
<option value="small">Small</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="large">Large</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Behavior -->
|
||||
<div class="or-section" data-section="behavior">
|
||||
<div class="or-section-header">Behavior</div>
|
||||
<div class="or-section-body">
|
||||
<div class="or-toggle-row">
|
||||
<label for="autoCollapseRibbon">Auto-collapse ribbon</label>
|
||||
<div class="or-switch"><input type="checkbox" id="autoCollapseRibbon" data-setting="autoCollapseRibbon"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="rememberSidebarState">Remember sidebar state</label>
|
||||
<div class="or-switch"><input type="checkbox" id="rememberSidebarState" data-setting="rememberSidebarState"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="suppressContactHover">Suppress contact hover cards</label>
|
||||
<div class="or-switch"><input type="checkbox" id="suppressContactHover" data-setting="suppressContactHover"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="autoAdvanceAfterDelete">Auto-advance after delete</label>
|
||||
<div class="or-switch"><input type="checkbox" id="autoAdvanceAfterDelete" data-setting="autoAdvanceAfterDelete"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-select-row">
|
||||
<label for="autoDismissToasts">Auto-dismiss toasts</label>
|
||||
<select id="autoDismissToasts" data-setting="autoDismissToasts">
|
||||
<option value="off">Off</option>
|
||||
<option value="3">3 seconds</option>
|
||||
<option value="5">5 seconds</option>
|
||||
<option value="10">10 seconds</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="or-select-row">
|
||||
<label for="toastPosition">Toast position</label>
|
||||
<select id="toastPosition" data-setting="toastPosition">
|
||||
<option value="bottom-left">Bottom-left</option>
|
||||
<option value="top-right">Top-right</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="stickyReplyBar">Sticky Reply/Forward bar</label>
|
||||
<div class="or-switch"><input type="checkbox" id="stickyReplyBar" data-setting="stickyReplyBar"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="autoResizeCompose">Auto-resize compose window</label>
|
||||
<div class="or-switch"><input type="checkbox" id="autoResizeCompose" data-setting="autoResizeCompose"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="throttleNotifications">Throttle desktop notifications</label>
|
||||
<div class="or-switch"><input type="checkbox" id="throttleNotifications" data-setting="throttleNotifications"><span class="slider"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="or-section" data-section="actions">
|
||||
<div class="or-section-header">Quick Actions</div>
|
||||
<div class="or-section-body">
|
||||
<div class="or-toggle-row">
|
||||
<label for="markAllReadButton">"Mark all as read" button</label>
|
||||
<div class="or-switch"><input type="checkbox" id="markAllReadButton" data-setting="markAllReadButton"><span class="slider"></span></div>
|
||||
</div>
|
||||
<div class="or-toggle-row">
|
||||
<label for="quickFolderJump">Quick folder jump (Ctrl+Shift+K)</label>
|
||||
<div class="or-switch"><input type="checkbox" id="quickFolderJump" data-setting="quickFolderJump"><span class="slider"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /designSections -->
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="or-footer">
|
||||
<button id="exportBtn" title="Export settings as JSON">Export</button>
|
||||
|
||||
@@ -3,14 +3,22 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
// We need access to DEFAULTS and DENSITY_PRESETS from settings-defaults.js,
|
||||
// but popup runs in its own context. Duplicate the defaults here.
|
||||
// (Content scripts and popup don't share a JS context.)
|
||||
// Defaults — must stay in sync with content/settings-defaults.js
|
||||
// (popup runs in its own JS context, no access to content script globals)
|
||||
|
||||
var DEFAULTS = {
|
||||
// Primary feature
|
||||
keyboardMultiSelect: true,
|
||||
|
||||
// Design tweaks master toggle
|
||||
enableDesignTweaks: false,
|
||||
|
||||
// Theme & Appearance
|
||||
theme: 'swiss',
|
||||
colorScheme: 'system',
|
||||
accentColor: '',
|
||||
|
||||
// Density & Spacing
|
||||
densityPreset: 'compact',
|
||||
compactTopBar: true,
|
||||
compactCommandBar: true,
|
||||
@@ -21,6 +29,8 @@
|
||||
compressComposeToolbar: true,
|
||||
readingPaneMaxWidth: true,
|
||||
unifiedHeader: false,
|
||||
|
||||
// Hide Elements
|
||||
hideCopilot: true,
|
||||
hideSuggestedReplies: true,
|
||||
hidePromoBanners: true,
|
||||
@@ -33,11 +43,15 @@
|
||||
hideVivaInsights: true,
|
||||
hideUnreadOtherBanner: true,
|
||||
hideActivityFeed: true,
|
||||
|
||||
// Readability
|
||||
unreadDistinction: true,
|
||||
previewOwnLine: false,
|
||||
normalizeFontWeight: true,
|
||||
darkModeEmailFix: true,
|
||||
messageListFontSize: 'medium',
|
||||
|
||||
// Behavior
|
||||
autoCollapseRibbon: true,
|
||||
rememberSidebarState: true,
|
||||
suppressContactHover: true,
|
||||
@@ -47,7 +61,8 @@
|
||||
stickyReplyBar: true,
|
||||
autoResizeCompose: true,
|
||||
throttleNotifications: false,
|
||||
keyboardMultiSelect: true,
|
||||
|
||||
// Quick Actions
|
||||
markAllReadButton: true,
|
||||
quickFolderJump: true,
|
||||
};
|
||||
@@ -85,6 +100,13 @@
|
||||
},
|
||||
};
|
||||
|
||||
// --- Design sections visibility ---
|
||||
var designSections = document.getElementById('designSections');
|
||||
|
||||
function updateDesignSectionsVisibility(enabled) {
|
||||
designSections.style.display = enabled ? 'block' : 'none';
|
||||
}
|
||||
|
||||
// --- Load settings and populate UI ---
|
||||
function loadUI() {
|
||||
chrome.storage.sync.get(DEFAULTS, function (settings) {
|
||||
@@ -117,6 +139,9 @@
|
||||
// Version
|
||||
var manifest = chrome.runtime.getManifest();
|
||||
document.getElementById('version').textContent = 'v' + manifest.version;
|
||||
|
||||
// Show/hide design sections
|
||||
updateDesignSectionsVisibility(settings.enableDesignTweaks);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -140,6 +165,11 @@
|
||||
for (var c = 0; c < checkboxes.length; c++) {
|
||||
checkboxes[c].addEventListener('change', function () {
|
||||
saveSetting(this.dataset.setting, this.checked);
|
||||
|
||||
// Toggle design sections visibility when master toggle changes
|
||||
if (this.dataset.setting === 'enableDesignTweaks') {
|
||||
updateDesignSectionsVisibility(this.checked);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -155,7 +185,6 @@
|
||||
if (settingKey === 'densityPreset' && DENSITY_PRESETS[value]) {
|
||||
var preset = DENSITY_PRESETS[value];
|
||||
chrome.storage.sync.set(preset);
|
||||
// Update checkboxes in the UI
|
||||
var toggleKeys = Object.keys(preset);
|
||||
for (var p = 0; p < toggleKeys.length; p++) {
|
||||
var checkbox = document.getElementById(toggleKeys[p]);
|
||||
@@ -213,7 +242,6 @@
|
||||
reader.onload = function (event) {
|
||||
try {
|
||||
var imported = JSON.parse(event.target.result);
|
||||
// Only import known keys
|
||||
var cleaned = {};
|
||||
var defaultKeys = Object.keys(DEFAULTS);
|
||||
for (var i = 0; i < defaultKeys.length; i++) {
|
||||
|
||||
Reference in New Issue
Block a user