BuboBubo/oldboy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moving files around

Browse Source
This commit is contained in:
Raphaël Forment
2025-10-15 01:52:43 +02:00
parent 8e6b07797c
commit d43d16c73c
17 changed files with 25 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
src/lib/components/editor/EditorSettings.svelte Normal file
View File

@ -0,0 +1,222 @@
<script lang="ts">
import { getAppContext } from '../../contexts/app-context';
const { editorSettings } = getAppContext();
let settings = $state($editorSettings);
$effect(() => {
settings = $editorSettings;
});
function updateSetting(key: keyof typeof settings, value: any) {
editorSettings.updatePartial({ [key]: value });
}
</script>
<div class="editor-settings">
<div class="setting">
<label>
<span class="label-text">Font Size: {settings.fontSize}px</span>
<input
type="range"
min="10"
max="24"
step="1"
value={settings.fontSize}
oninput={(e) => updateSetting('fontSize', parseInt(e.currentTarget.value))}
/>
</label>
</div>
<div class="setting">
<label>
<span class="label-text">Font Family</span>
<select
value={settings.fontFamily}
onchange={(e) => updateSetting('fontFamily', e.currentTarget.value)}
>
<option value="'Roboto Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace">Roboto Mono</option>
<option value="'JetBrains Mono', 'Roboto Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace">JetBrains Mono</option>
<option value="'Fira Code', 'Roboto Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace">Fira Code</option>
<option value="Monaco, 'Roboto Mono', Consolas, 'Liberation Mono', 'Courier New', monospace">Monaco</option>
<option value="Consolas, 'Roboto Mono', Monaco, 'Liberation Mono', 'Courier New', monospace">Consolas</option>
<option value="'Courier New', 'Roboto Mono', Monaco, Consolas, monospace">Courier New</option>
</select>
</label>
</div>
<div class="setting">
<label>
<span class="label-text">Tab Size: {settings.tabSize}</span>
<input
type="range"
min="2"
max="8"
step="2"
value={settings.tabSize}
oninput={(e) => updateSetting('tabSize', parseInt(e.currentTarget.value))}
/>
</label>
</div>
<div class="checkboxes">
<label class="checkbox-label">
<input
type="checkbox"
checked={settings.vimMode}
onchange={(e) => updateSetting('vimMode', e.currentTarget.checked)}
/>
<span>Vim mode</span>
</label>
<label class="checkbox-label">
<input
type="checkbox"
checked={settings.showLineNumbers}
onchange={(e) => updateSetting('showLineNumbers', e.currentTarget.checked)}
/>
<span>Display line numbers</span>
</label>
<label class="checkbox-label">
<input
type="checkbox"
checked={settings.enableLineWrapping}
onchange={(e) => updateSetting('enableLineWrapping', e.currentTarget.checked)}
/>
<span>Enable line wrapping</span>
</label>
</div>
</div>
<style>
.editor-settings {
padding: 0.5rem;
color: rgba(255, 255, 255, 0.87);
}
.setting {
margin-bottom: 1rem;
}
label {
display: block;
}
.label-text {
display: block;
font-size: 0.75rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 0.25rem;
}
input[type="range"] {
width: 100%;
height: 8px;
background: #4b5563;
appearance: none;
cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 12px;
height: 12px;
background: #646cff;
cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
width: 12px;
height: 12px;
background: #646cff;
cursor: pointer;
border: none;
}
input[type="range"]:hover {
background: #6b7280;
}
input[type="range"]::-webkit-slider-thumb:hover {
background: #818cf8;
}
input[type="range"]::-moz-range-thumb:hover {
background: #818cf8;
}
select {
width: 100%;
background-color: #1a1a1a;
color: rgba(255, 255, 255, 0.87);
border: 1px solid #555;
padding: 0.4rem;
font-size: 0.75rem;
cursor: pointer;
}
select:hover {
border-color: #646cff;
}
select:focus {
outline: none;
border-color: #646cff;
}
.checkboxes {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
}
input[type="checkbox"] {
appearance: none;
width: 16px;
height: 16px;
background-color: #4b5563;
border: 1px solid #6b7280;
cursor: pointer;
transition: all 0.2s;
}
input[type="checkbox"]:hover {
background-color: #6b7280;
border-color: #9ca3af;
}
input[type="checkbox"]:checked {
background-color: #646cff;
border-color: #646cff;
}
input[type="checkbox"]:checked:hover {
background-color: #818cf8;
border-color: #818cf8;
}
input[type="checkbox"]:checked::before {
content: '✓';
color: white;
font-size: 12px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
</style>