Skip to content

Commit

Permalink
fix(menubar): rearrange menubar items
Browse files Browse the repository at this point in the history
resolves #278
Muhammed-Rahif committed Dec 25, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent be14cf3 commit 3b21534
Showing 15 changed files with 189 additions and 100 deletions.
2 changes: 1 addition & 1 deletion src/lib/components/Editor/Editor.css
Original file line number Diff line number Diff line change
@@ -48,7 +48,7 @@
@apply absolute left-0 top-0 -translate-x-full text-center text-primary duration-300;
}

.editor-container[data-wrap-long-lines='true'] .ql-editor > * {
.editor-container[data-wrap-lines='true'] .ql-editor > * {
@apply w-max;
}

2 changes: 1 addition & 1 deletion src/lib/components/Editor/Editor.svelte
Original file line number Diff line number Diff line change
@@ -151,7 +151,7 @@
--editor-zoom: {$settings.zoom};
--line-no-digits-count: {lineNo.toString().length}"
data-line-numbers={$settings.lineNumbers}
data-wrap-long-lines={$settings.wrapLongLines}
data-wrap-lines={$settings.wrapLines}
bind:this={editorContainer}
></div>

93 changes: 70 additions & 23 deletions src/lib/components/MenuBar.svelte
Original file line number Diff line number Diff line change
@@ -7,16 +7,22 @@
import { fade } from 'svelte/transition';
import { isTauri } from '@/src/lib';
import screenfull from 'screenfull';
import { toggleMode, mode } from 'mode-watcher';
// import { toggleMode, mode } from 'mode-watcher';
import { onMount } from 'svelte';
import { openFontDialog } from '@/components/font-dialog/FontDialog.svelte';
import { openAboutDialog } from '@/components/AboutDialog.svelte';
import { toggleGoToDialog } from '@/components/GoToDialog.svelte';
import { toggleFindDialog } from '@/components/FindDialog.svelte';
import { openShortcutsDialog } from '@/src/lib/components/ShortcutsDialog.svelte';
import InfoIcon from './icons/Info.svelte';
import InfoIcon from '@/components/icons/Info.svelte';
import KeyboardIcon from '@/components/icons/Keyboard.svelte';
import GithubOultineIcon from './icons/GithubOultine.svelte';
import GithubOultineIcon from '@/components/icons/GithubOultine.svelte';
import CalendarClockIcon from '@/components/icons/CalendarClock.svelte';
import GoogleLineIcon from './icons/GoogleLine.svelte';
import StatusBarIcon from './icons/StatusBar.svelte';
import ListOrderedIcon from './icons/ListOrdered.svelte';
import WrapTextIcon from './icons/WrapText.svelte';
import ALargeSmallIcon from './icons/ALargeSmall.svelte';
let innerWidth = $state(window.innerWidth);
let isFullScreen = $state(screenfull.isFullscreen);
@@ -46,9 +52,8 @@
Save<Menubar.Shortcut>Ctrl+S</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Item onclick={() => Notpad.fileOptions.save({ saveAs: true })}>
Save as...
Save as...<Menubar.Shortcut>Ctrl+Shift+S</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Separator />
<Menubar.Item onclick={() => Notpad.fileOptions.print()}>
Print<Menubar.Shortcut>Ctrl+P</Menubar.Shortcut>
</Menubar.Item>
@@ -76,30 +81,35 @@
<Menubar.Item onclick={() => Notpad.editOptions.paste()}>
Paste<Menubar.Shortcut>Ctrl+V</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Item onclick={() => Notpad.editOptions.paste()}>
Delete<Menubar.Shortcut>Delete</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Separator />
<Menubar.Item onclick={() => Notpad.editOptions.selectAll()}>
Select All
<Menubar.Shortcut>Ctrl+A</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Item onclick={() => Notpad.editOptions.insertDateAndTime()}>Time/Date</Menubar.Item>
<Menubar.Separator />
<Menubar.Item onclick={openFontDialog}>Font</Menubar.Item>
<Menubar.Item onclick={() => Notpad.editOptions.insertDateAndTime()}>
Time/Date
<CalendarClockIcon class="ml-auto text-xl text-muted-foreground" />
</Menubar.Item>
</Menubar.Content>
</Menubar.Menu>

<Menubar.Menu>
<Menubar.Trigger>Search</Menubar.Trigger>
<Menubar.Content>
<Menubar.Item onclick={() => Notpad.searchOptions.searchOnWeb()}>
Search on Google
</Menubar.Item>
<Menubar.Separator />
<Menubar.Item onclick={toggleFindDialog}>
Find/Replace<Menubar.Shortcut>Ctrl+F</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Item onclick={toggleGoToDialog}>
Go To<Menubar.Shortcut>Ctrl+G</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Separator />
<Menubar.Item onclick={() => Notpad.searchOptions.searchOnWeb()}>
Search on Google
<GoogleLineIcon class="ml-auto text-xl text-muted-foreground" />
</Menubar.Item>
</Menubar.Content>
</Menubar.Menu>

@@ -131,42 +141,79 @@
onclick={Notpad.viewOptions.toggleStatusBar}
>
Status Bar
<StatusBarIcon class="ml-auto text-xl text-muted-foreground" />
</Menubar.CheckboxItem>
<Menubar.CheckboxItem
checked={$settings.lineNumbers}
onclick={Notpad.viewOptions.toggleLineNumbers}
>
Line Numbers
<ListOrderedIcon class="ml-auto text-xl text-muted-foreground" />
</Menubar.CheckboxItem>
<Menubar.CheckboxItem
checked={$settings.wrapLongLines}
onclick={Notpad.viewOptions.toggleWrapLongLines}
checked={$settings.wrapLines}
onclick={Notpad.viewOptions.toggleWrapLines}
>
Wrap Long Lines
</Menubar.CheckboxItem>
<Menubar.CheckboxItem checked={$mode == 'dark'} onclick={toggleMode}>
Dark Mode
Wrap Lines
<WrapTextIcon class="ml-auto text-xl text-muted-foreground" />
</Menubar.CheckboxItem>
</Menubar.Content>
</Menubar.Menu>

<Menubar.Menu>
<Menubar.Trigger>Help</Menubar.Trigger>
<Menubar.Trigger>Settings</Menubar.Trigger>
<Menubar.Content>
<Menubar.Item onclick={openFontDialog}>
Font
<ALargeSmallIcon class="ml-auto text-xl text-muted-foreground" />
</Menubar.Item>

<Menubar.Separator />
<Menubar.Sub>
<Menubar.SubTrigger>Theme</Menubar.SubTrigger>
<Menubar.SubContent>
<Menubar.CheckboxItem>Light</Menubar.CheckboxItem>
<Menubar.CheckboxItem>Dark</Menubar.CheckboxItem>
<Menubar.CheckboxItem>Sepia</Menubar.CheckboxItem>
<Menubar.CheckboxItem>Classic</Menubar.CheckboxItem>
</Menubar.SubContent>
</Menubar.Sub>

<Menubar.Sub>
<Menubar.SubTrigger>Sound</Menubar.SubTrigger>
<Menubar.SubContent>
<Menubar.CheckboxItem>None</Menubar.CheckboxItem>
<Menubar.CheckboxItem>Click</Menubar.CheckboxItem>
<Menubar.CheckboxItem>Pop</Menubar.CheckboxItem>
<Menubar.CheckboxItem>Typewriter</Menubar.CheckboxItem>
</Menubar.SubContent>
</Menubar.Sub>

<Menubar.Sub>
<Menubar.SubTrigger>Vibration</Menubar.SubTrigger>
<Menubar.SubContent>
<Menubar.CheckboxItem>None</Menubar.CheckboxItem>
<Menubar.CheckboxItem>Low</Menubar.CheckboxItem>
<Menubar.CheckboxItem>Medium</Menubar.CheckboxItem>
<Menubar.CheckboxItem>High</Menubar.CheckboxItem>
<Menubar.CheckboxItem>Strong</Menubar.CheckboxItem>
</Menubar.SubContent>
</Menubar.Sub>

<Menubar.Separator />
<Menubar.Item class="flex items-center gap-2" onclick={openShortcutsDialog}>
<KeyboardIcon class="text-xl" />
Shortcuts
<KeyboardIcon class="ml-auto text-xl text-muted-foreground" />
</Menubar.Item>
<Menubar.Separator />
<a href="https://github.com/Muhammed-Rahif/Notpad" target="_blank">
<Menubar.Item class="flex items-center gap-2">
<GithubOultineIcon class="text-xl" />
Github
<GithubOultineIcon class="ml-auto text-xl text-muted-foreground" />
</Menubar.Item>
</a>
<Menubar.Item class="flex items-center gap-2" onclick={openAboutDialog}>
<InfoIcon class="text-xl" />
About Notpad
<InfoIcon class="ml-auto text-xl text-muted-foreground" />
</Menubar.Item>
</Menubar.Content>
</Menubar.Menu>
118 changes: 54 additions & 64 deletions src/lib/components/Shortcuts.svelte
Original file line number Diff line number Diff line change
@@ -19,71 +19,61 @@
modifier: 'ctrl',
callback: () => Notpad.fileOptions.save(),
preventDefault: true
},
{
key: 'S',
modifier: ['ctrl', 'shift'],
callback: () => Notpad.fileOptions.save({ saveAs: true }),
preventDefault: true
},
{
key: 'o',
modifier: 'ctrl',
callback: () => Notpad.fileOptions.open(),
preventDefault: true
},
{
key: 'p',
modifier: ['ctrl', 'shift'],
callback: () => Notpad.fileOptions.print(),
preventDefault: true
},
{
key: 'g',
modifier: ['ctrl'],
callback: () => toggleGoToDialog(),
preventDefault: true
},
{
key: 'f',
modifier: ['ctrl'],
callback: () => toggleFindDialog(),
preventDefault: true
},
{
key: '+',
modifier: ['ctrl'],
callback: () => Notpad.viewOptions.zoom('in'),
preventDefault: true
},
{
key: '-',
modifier: ['ctrl'],
callback: () => Notpad.viewOptions.zoom('out'),
preventDefault: true
},
{
key: '0',
modifier: ['ctrl'],
callback: () => Notpad.viewOptions.zoom('reset'),
preventDefault: true
},
{
key: 'w',
modifier: ['ctrl'],
callback: () => Notpad.editors.remove(),
preventDefault: true
}
]
}}
use:shortcut={{
trigger: {
key: 'o',
modifier: 'ctrl',
callback: () => Notpad.fileOptions.open(),
preventDefault: true
}
}}
use:shortcut={{
trigger: {
key: 'p',
modifier: ['ctrl', 'shift'],
callback: () => Notpad.fileOptions.print(),
preventDefault: true
}
}}
use:shortcut={{
trigger: {
key: 'g',
modifier: ['ctrl'],
callback: () => toggleGoToDialog(),
preventDefault: true
}
}}
use:shortcut={{
trigger: {
key: 'f',
modifier: ['ctrl'],
callback: () => toggleFindDialog(),
preventDefault: true
}
}}
use:shortcut={{
trigger: {
key: '+',
modifier: ['ctrl'],
callback: () => Notpad.viewOptions.zoom('in'),
preventDefault: true
}
}}
use:shortcut={{
trigger: {
key: '-',
modifier: ['ctrl'],
callback: () => Notpad.viewOptions.zoom('out'),
preventDefault: true
}
}}
use:shortcut={{
trigger: {
key: '0',
modifier: ['ctrl'],
callback: () => Notpad.viewOptions.zoom('reset'),
preventDefault: true
}
}}
use:shortcut={{
trigger: {
key: 'w',
modifier: ['ctrl'],
callback: () => Notpad.editors.remove(),
preventDefault: true
}
}}
/>
10 changes: 10 additions & 0 deletions src/lib/components/icons/ALargeSmall.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props}
><path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 14h-5m0 2v-3.5a2.5 2.5 0 0 1 5 0V16M4.5 13h6M3 16l4.5-9l4.5 9"
/></svg
>
12 changes: 12 additions & 0 deletions src/lib/components/icons/CalendarClock.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props}
><g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
><path
d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5M16 2v4M8 2v4m-5 4h5m9.5 7.5L16 16.3V14"
/><circle cx="16" cy="16" r="6" /></g
></svg
>
4 changes: 2 additions & 2 deletions src/lib/components/icons/Check.svelte
Original file line number Diff line number Diff line change
@@ -7,8 +7,8 @@
let { ...props }: Props = $props();
</script>

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}
><path
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
<path
fill="currentColor"
d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"
/>
6 changes: 6 additions & 0 deletions src/lib/components/icons/GoogleLine.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props}>
<path
fill="currentColor"
d="M12 11h8.533q.066.578.067 1.184c0 2.734-.98 5.036-2.678 6.6c-1.485 1.371-3.518 2.175-5.942 2.175A8.976 8.976 0 0 1 3 11.98A8.976 8.976 0 0 1 11.98 3c2.42 0 4.453.89 6.008 2.339L16.526 6.8C15.368 5.681 13.803 5 12 5a7 7 0 0 0 0 14c3.527 0 6.144-2.608 6.577-6H12z"
/>
</svg>
10 changes: 10 additions & 0 deletions src/lib/components/icons/ListOrdered.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props}
><path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 6h11m-11 6h11m-11 6h11M4 6h1v4m-1 0h2m0 8H4c0-1 2-2 2-3s-1-1.5-2-1"
/>
</svg>
6 changes: 1 addition & 5 deletions src/lib/components/icons/README.md
Original file line number Diff line number Diff line change
@@ -4,11 +4,7 @@ Icons are taken from: https://icones.js.org/

## Icon Usage

Icons used in this project are sourced from [Icones](https://icones.js.org/). The preferred icon set is Lucide, although other icon sets are also allowed.

## Icon Usage

Icons used in this project are sourced from [Icones](https://icones.js.org/). The preferred icon set is Lucide, although other icon sets are also allowed.
Icons used in this project are sourced from [Icones](https://icones.js.org/). The preferred icon set is [Lucide](https://icones.js.org/collection/lucide), although other icon sets are also allowed.

### Adding a New Icon

8 changes: 8 additions & 0 deletions src/lib/components/icons/StatusBar.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" {...$$props}
><path
fill="currentColor"
fill-rule="evenodd"
d="M2 1L1 2v12l1 1h12l1-1V2l-1-1zm0 12V2h12v11z"
clip-rule="evenodd"
/>
</svg>
Loading

0 comments on commit 3b21534

Please sign in to comment.