aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-29 04:24:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: organize settings into logical groups

Browse Source 
- Create three sections: Reading & Display, Layout & Navigation, Startup Preferences
- Add section titles with consistent styling
- Group related settings together:
  - Reading & Display: font, highlight underlines, preview
  - Layout & Navigation: view mode, collapse behavior
  - Startup Preferences: initial sidebar states
- Add section title styling with border and uppercase text
- Better visual hierarchy and organization
This commit is contained in:
Gigi
2025-10-05 02:57:04 +01:00
parent bb351ae35f
commit e10ae00a1a
2 changed files with 136 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
src/components/Settings.tsx
View File

@@ -46,120 +46,132 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, isSaving
</div>
<div className="settings-content">
<div className="setting-group">
<label htmlFor="collapseOnArticleOpen" className="checkbox-label">
<input
id="collapseOnArticleOpen"
type="checkbox"
checked={localSettings.collapseOnArticleOpen !== false}
onChange={(e) => setLocalSettings({ ...localSettings, collapseOnArticleOpen: e.target.checked })}
className="setting-checkbox"
/>
<span>Collapse bookmark bar when opening an article</span>
</label>
</div>
<div className="settings-section">
<h3 className="section-title">Reading & Display</h3>
<div className="setting-group">
<label htmlFor="readingFont">Reading Font</label>
<select
id="readingFont"
value={localSettings.readingFont || 'system'}
onChange={(e) => setLocalSettings({ ...localSettings, readingFont: e.target.value })}
className="setting-select"
>
<option value="system">System Default</option>
<option value="inter">Inter</option>
<option value="lora">Lora</option>
<option value="merriweather">Merriweather</option>
<option value="open-sans">Open Sans</option>
<option value="roboto">Roboto</option>
<option value="source-serif-4">Source Serif 4</option>
<option value="crimson-text">Crimson Text</option>
<option value="libre-baskerville">Libre Baskerville</option>
<option value="pt-serif">PT Serif</option>
</select>
</div>
<div className="setting-group setting-inline">
<label>Default View Mode</label>
<div className="setting-buttons">
<IconButton
icon={faList}
onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'compact' })}
title="Compact list view"
ariaLabel="Compact list view"
variant={(localSettings.defaultViewMode || 'compact') === 'compact' ? 'primary' : 'ghost'}
/>
<IconButton
icon={faThLarge}
onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'cards' })}
title="Cards view"
ariaLabel="Cards view"
variant={localSettings.defaultViewMode === 'cards' ? 'primary' : 'ghost'}
/>
<IconButton
icon={faImage}
onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'large' })}
title="Large preview view"
ariaLabel="Large preview view"
variant={localSettings.defaultViewMode === 'large' ? 'primary' : 'ghost'}
/>
<div className="setting-group">
<label htmlFor="showUnderlines" className="checkbox-label">
<input
id="showUnderlines"
type="checkbox"
checked={localSettings.showUnderlines !== false}
onChange={(e) => setLocalSettings({ ...localSettings, showUnderlines: e.target.checked })}
className="setting-checkbox"
/>
<span>Show highlight underlines</span>
</label>
</div>
<div className="setting-preview">
<div className="preview-label">Preview</div>
<div
className="preview-content"
style={{ fontFamily: previewFontFamily }}
>
<h3>The Quick Brown Fox</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span className={localSettings.showUnderlines !== false ? "content-highlight" : ""}>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<div className="setting-group">
<label htmlFor="readingFont">Reading Font</label>
<select
id="readingFont"
value={localSettings.readingFont || 'system'}
onChange={(e) => setLocalSettings({ ...localSettings, readingFont: e.target.value })}
className="setting-select"
>
<option value="system">System Default</option>
<option value="inter">Inter</option>
<option value="lora">Lora</option>
<option value="merriweather">Merriweather</option>
<option value="open-sans">Open Sans</option>
<option value="roboto">Roboto</option>
<option value="source-serif-4">Source Serif 4</option>
<option value="crimson-text">Crimson Text</option>
<option value="libre-baskerville">Libre Baskerville</option>
<option value="pt-serif">PT Serif</option>
</select>
</div>
<div className="settings-section">
<h3 className="section-title">Layout & Navigation</h3>
<div className="setting-group setting-inline">
<label>Default View Mode</label>
<div className="setting-buttons">
<IconButton
icon={faList}
onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'compact' })}
title="Compact list view"
ariaLabel="Compact list view"
variant={(localSettings.defaultViewMode || 'compact') === 'compact' ? 'primary' : 'ghost'}
/>
<IconButton
icon={faThLarge}
onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'cards' })}
title="Cards view"
ariaLabel="Cards view"
variant={localSettings.defaultViewMode === 'cards' ? 'primary' : 'ghost'}
/>
<IconButton
icon={faImage}
onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'large' })}
title="Large preview view"
ariaLabel="Large preview view"
variant={localSettings.defaultViewMode === 'large' ? 'primary' : 'ghost'}
/>
</div>
</div>
<div className="setting-preview">
<div className="preview-label">Preview</div>
<div
className="preview-content"
style={{ fontFamily: previewFontFamily }}
>
<h3>The Quick Brown Fox</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span className={localSettings.showUnderlines !== false ? "content-highlight" : ""}>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div className="setting-group">
<label htmlFor="collapseOnArticleOpen" className="checkbox-label">
<input
id="collapseOnArticleOpen"
type="checkbox"
checked={localSettings.collapseOnArticleOpen !== false}
onChange={(e) => setLocalSettings({ ...localSettings, collapseOnArticleOpen: e.target.checked })}
className="setting-checkbox"
/>
<span>Collapse bookmark bar when opening an article</span>
</label>
</div>
</div>
<div className="setting-group">
<label htmlFor="showUnderlines" className="checkbox-label">
<input
id="showUnderlines"
type="checkbox"
checked={localSettings.showUnderlines !== false}
onChange={(e) => setLocalSettings({ ...localSettings, showUnderlines: e.target.checked })}
className="setting-checkbox"
/>
<span>Show highlight underlines</span>
</label>
</div>
<div className="settings-section">
<h3 className="section-title">Startup Preferences</h3>
<div className="setting-group">
<label htmlFor="sidebarCollapsed" className="checkbox-label">
<input
id="sidebarCollapsed"
type="checkbox"
checked={localSettings.sidebarCollapsed === true}
onChange={(e) => setLocalSettings({ ...localSettings, sidebarCollapsed: e.target.checked })}
className="setting-checkbox"
/>
<span>Start with bookmarks sidebar collapsed</span>
</label>
</div>
<div className="setting-group">
<label htmlFor="sidebarCollapsed" className="checkbox-label">
<input
id="sidebarCollapsed"
type="checkbox"
checked={localSettings.sidebarCollapsed === true}
onChange={(e) => setLocalSettings({ ...localSettings, sidebarCollapsed: e.target.checked })}
className="setting-checkbox"
/>
<span>Start with bookmarks sidebar collapsed</span>
</label>
</div>
<div className="setting-group">
<label htmlFor="highlightsCollapsed" className="checkbox-label">
<input
id="highlightsCollapsed"
type="checkbox"
checked={localSettings.highlightsCollapsed === true}
onChange={(e) => setLocalSettings({ ...localSettings, highlightsCollapsed: e.target.checked })}
className="setting-checkbox"
/>
<span>Start with highlights panel collapsed</span>
</label>
<div className="setting-group">
<label htmlFor="highlightsCollapsed" className="checkbox-label">
<input
id="highlightsCollapsed"
type="checkbox"
checked={localSettings.highlightsCollapsed === true}
onChange={(e) => setLocalSettings({ ...localSettings, highlightsCollapsed: e.target.checked })}
className="setting-checkbox"
/>
<span>Start with highlights panel collapsed</span>
</label>
</div>
</div>
</div>

19
src/index.css
View File

@@ -1458,6 +1458,25 @@ body {
padding: 0 0.25rem;
}
.settings-section {
margin-bottom: 2.5rem;
}
.settings-section:last-child {
margin-bottom: 0;
}
.section-title {
font-size: 1rem;
font-weight: 600;
color: #fff;
margin: 0 0 1rem 0;
padding-bottom: 0.5rem;
border-bottom: 1px solid #333;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.setting-group {
margin-bottom: 1.5rem;
text-align: left;