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

feat: inline font selector with styled options and fix font size

Browse Source
This commit is contained in:
Gigi
2025-10-05 03:26:18 +01:00
parent dea647f36a
commit aba91f7a52
2 changed files with 34 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/Settings.tsx
View File

@@ -19,6 +19,12 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, isSaving
setLocalSettings(settings)
}, [settings])
useEffect(() => {
// Preload all fonts for the dropdown
const fonts = ['inter', 'lora', 'merriweather', 'open-sans', 'roboto', 'source-serif-4', 'crimson-text', 'libre-baskerville', 'pt-serif']
fonts.forEach(font => loadFont(font))
}, [])
useEffect(() => {
// Load font for preview when it changes
if (localSettings.readingFont) {
@@ -49,24 +55,24 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, isSaving
<div className="settings-section">
<h3 className="section-title">Reading & Display</h3>
<div className="setting-group">
<div className="setting-group setting-inline">
<label htmlFor="readingFont">Reading Font</label>
<select
id="readingFont"
value={localSettings.readingFont || 'system'}
onChange={(e) => setLocalSettings({ ...localSettings, readingFont: e.target.value })}
className="setting-select"
className="setting-select font-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>
<option value="system" style={{ fontFamily: 'system-ui, -apple-system, sans-serif' }}>System Default</option>
<option value="inter" style={{ fontFamily: 'Inter, sans-serif' }}>Inter</option>
<option value="lora" style={{ fontFamily: 'Lora, serif' }}>Lora</option>
<option value="merriweather" style={{ fontFamily: 'Merriweather, serif' }}>Merriweather</option>
<option value="open-sans" style={{ fontFamily: 'Open Sans, sans-serif' }}>Open Sans</option>
<option value="roboto" style={{ fontFamily: 'Roboto, sans-serif' }}>Roboto</option>
<option value="source-serif-4" style={{ fontFamily: 'Source Serif 4, serif' }}>Source Serif 4</option>
<option value="crimson-text" style={{ fontFamily: 'Crimson Text, serif' }}>Crimson Text</option>
<option value="libre-baskerville" style={{ fontFamily: 'Libre Baskerville, serif' }}>Libre Baskerville</option>
<option value="pt-serif" style={{ fontFamily: 'PT Serif, serif' }}>PT Serif</option>
</select>
</div>

18
src/index.css
View File

@@ -575,8 +575,11 @@ body {
.reader-html p,
.reader-html div,
.reader-html span {
font-size: 1em;
.reader-html span,
.reader-html li,
.reader-html td,
.reader-html th {
font-size: 1em !important;
}
.reader-markdown a {
@@ -1585,11 +1588,22 @@ body {
font-size: 1rem;
}
.setting-inline .setting-select {
width: auto;
min-width: 200px;
flex: 1;
}
.setting-select:focus {
outline: none;
border-color: #646cff;
}
.font-select option {
padding: 0.5rem;
font-size: 1rem;
}
.checkbox-label {
display: flex !important;
align-items: center;