designslife/Outcut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: settings popup HTML and CSS with all toggle categories

Browse Source
This commit is contained in:
Joel Brock
2026-04-23 09:00:53 -07:00
parent b59ee18a37
commit be70086e7e
2 changed files with 499 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
popup/popup.css Normal file
View File

@@ -0,0 +1,246 @@
/* Outlook Relook — Settings Popup */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 360px;
max-height: 540px;
overflow-y: auto;
font-family: system-ui, -apple-system, sans-serif;
font-size: 13px;
line-height: 1.4;
color: #222;
background: #fff;
padding: 0;
}
/* Header */
.or-header {
padding: 12px 16px;
border-bottom: 1px solid #e5e5e5;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
background: #fff;
z-index: 10;
}
.or-header h1 {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.02em;
}
.or-header .or-version {
font-size: 11px;
color: #999;
}
/* Sections */
.or-section {
border-bottom: 1px solid #f0f0f0;
}
.or-section-header {
padding: 10px 16px 6px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #888;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
}
.or-section-header::after {
content: '\25B6'; /* right-pointing triangle */
font-size: 8px;
transition: transform 0.15s;
}
.or-section.open .or-section-header::after {
transform: rotate(90deg);
}
.or-section-body {
display: none;
padding: 0 16px 10px;
}
.or-section.open .or-section-body {
display: block;
}
/* Toggle rows */
.or-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 0;
gap: 8px;
}
.or-toggle-row label {
flex: 1;
cursor: pointer;
font-size: 12.5px;
}
/* Toggle switch */
.or-switch {
position: relative;
width: 36px;
height: 20px;
flex-shrink: 0;
}
.or-switch input {
opacity: 0;
width: 0;
height: 0;
}
.or-switch .slider {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #ccc;
border-radius: 10px;
cursor: pointer;
transition: background 0.2s;
}
.or-switch .slider::before {
content: '';
position: absolute;
width: 16px;
height: 16px;
left: 2px;
top: 2px;
background: #fff;
border-radius: 50%;
transition: transform 0.2s;
}
.or-switch input:checked + .slider {
background: #1976d2;
}
.or-switch input:checked + .slider::before {
transform: translateX(16px);
}
/* Select/dropdown rows */
.or-select-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 0;
gap: 8px;
}
.or-select-row label {
flex: 1;
font-size: 12.5px;
}
.or-select-row select {
padding: 3px 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 12px;
background: #fff;
color: #222;
cursor: pointer;
}
/* Color picker */
.or-color-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 0;
gap: 8px;
}
.or-color-row label {
flex: 1;
font-size: 12.5px;
}
.or-color-row input[type="color"] {
width: 32px;
height: 24px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
padding: 0;
}
/* Radio group */
.or-radio-group {
display: flex;
gap: 12px;
padding: 5px 0;
}
.or-radio-group label {
display: flex;
align-items: center;
gap: 4px;
font-size: 12.5px;
cursor: pointer;
}
/* Footer */
.or-footer {
padding: 10px 16px;
display: flex;
gap: 8px;
justify-content: flex-end;
}
.or-footer button {
padding: 5px 12px;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
font-size: 12px;
cursor: pointer;
color: #222;
}
.or-footer button:hover {
background: #f0f0f0;
}
.or-footer button.danger {
color: #d32f2f;
border-color: #d32f2f;
}
.or-footer button.danger:hover {
background: #fce4ec;
}
/* Scrollbar */
body::-webkit-scrollbar {
width: 6px;
}
body::-webkit-scrollbar-track {
background: transparent;
}
body::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}

259
popup/popup.html
View File

@@ -2,13 +2,260 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body { width: 320px; padding: 16px; font-family: system-ui, sans-serif; font-size: 13px; }
h1 { font-size: 16px; margin: 0 0 8px; }
</style>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<h1>Outlook Relook</h1>
<p>Settings panel coming soon.</p>
<div class="or-header">
<h1>Outlook Relook</h1>
<span class="or-version" id="version"></span>
</div>
<!-- Theme & Appearance -->
<div class="or-section open" data-section="theme">
<div class="or-section-header">Theme &amp; 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>
</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 &amp; 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>
</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">
<div class="or-section-header">Keyboard Navigation</div>
<div class="or-section-body">
<div class="or-toggle-row">
<label for="keyboardMultiSelect">Gmail-style keyboard multi-select</label>
<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
</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>
<!-- Footer -->
<div class="or-footer">
<button id="exportBtn" title="Export settings as JSON">Export</button>
<button id="importBtn" title="Import settings from JSON">Import</button>
<button id="resetBtn" class="danger" title="Reset all settings to defaults">Reset</button>
</div>
<input type="file" id="importFile" accept=".json" style="display:none">
<script src="popup.js"></script>
</body>
</html>