Skip to content

Commit

Permalink
fix(print): print with large content adds a scrollbar
Browse files Browse the repository at this point in the history 
statusbar changed to hardcoded from variable, for better customizations ability
  • Loading branch information
@Muhammed-Rahif
Muhammed-Rahif committed Oct 3, 2024
1 parent 0918126 commit 2111f84
Show file tree
Hide file tree
Showing 8 changed files with 173 additions and 155 deletions.
4 changes: 2 additions & 2 deletions src/lib/components/EditorTitle.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
import { autoWidth } from 'svelte-input-auto-width';
import { tick } from 'svelte';
import { longpress } from '@/actions/longpress';
import type { EditorData } from '@/store';
import type { EditorType } from '@/store';
import * as Tooltip from '@/components/ui/tooltip';
export let editor: EditorData;
export let editor: EditorType;
let readonly = true;
let input: HTMLInputElement;
Expand Down
211 changes: 106 additions & 105 deletions src/lib/components/MenuBar.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,127 +2,128 @@
import * as Menubar from '@/components/ui/menubar';
import EditorTitle from '@/components/EditorTitle.svelte';
import { Notpad } from '@/helpers/notpad';
import { editors } from '@/store';
import { editors, settings } from '@/store';
import { fade } from 'svelte/transition';
import { isTauri } from '$lib';
import screenfull from 'screenfull';
import { toggleMode, mode } from 'mode-watcher';
interface MenuItems {
label: string;
items: Item[];
}
interface Item {
label?: string;
shortcut?: string;
type?: string;
onClick?: () => void;
}
const menuItems: MenuItems[] = [
{
label: 'File',
items: [
{
label: 'New',
shortcut: isTauri ? 'Ctrl+N' : 'Ctrl+Alt+N',
onClick: Notpad.editors.createNew
},
{ label: 'Open...', shortcut: 'Ctrl+O', onClick: Notpad.fileOptions.open },
{
label: 'Save',
shortcut: 'Ctrl+S',
onClick: Notpad.fileOptions.save
},
{ label: 'Save as...', onClick: () => Notpad.fileOptions.save({ saveAs: true }) },
{ type: 'separator' },
{ label: 'Print', shortcut: 'Ctrl+P', onClick: Notpad.editors.printActive },
{ type: 'separator' },
{ label: 'Exit', onClick: Notpad.close }
]
},
{
label: 'Edit',
items: [
{ label: 'Undo', shortcut: 'Ctrl+Z' },
{ label: 'Redo', shortcut: 'Ctrl+Y' },
{ type: 'separator' },
{ label: 'Cut', shortcut: 'Ctrl+X' },
{ label: 'Copy', shortcut: 'Ctrl+C' },
{ label: 'Paste', shortcut: 'Ctrl+V' },
{ type: 'separator' },
{ label: 'Select All', shortcut: 'Ctrl+A' },
{ label: 'Time/Date', shortcut: 'F5' },
{ type: 'separator' },
{ label: 'Font' }
]
},
{
label: 'Search',
items: [
{ label: 'Find', shortcut: 'Ctrl+F' },
{ label: 'Find Next', shortcut: 'F3' },
{ label: 'Find Previous', shortcut: 'Shift+F3' },
{ label: 'Replace', shortcut: 'Ctrl+H' },
{ label: 'Go To', shortcut: 'Ctrl+G' }
]
},
{
label: 'View',
items: [
{ label: 'Zoom In', shortcut: 'Ctrl+Plus' },
{ label: 'Zoom Out', shortcut: 'Ctrl+Minus' },
{ label: 'Reset Zoom', shortcut: 'Ctrl+0' },
{ type: 'separator' },
{
label: 'Full Screen',
shortcut: 'F11',
onClick: () => screenfull.toggle()
},
{ label: 'mode', onClick: toggleMode }
]
},
{
label: 'Help',
items: [{ label: 'About Notpad' }]
}
];
import { onMount } from 'svelte';
let innerWidth = window.innerWidth;
let isFullScreen = screenfull.isFullscreen;
$: isXS = innerWidth <= 450;
$: tabsMode = $editors.length > 1;
$: singleEditor = $editors.at(0)!;
$: modeLabel = $mode == 'dark' ? 'Light Mode' : 'Dark Mode';
onMount(() => {
screenfull.onchange(() => (isFullScreen = screenfull.isFullscreen));
});
</script>

<svelte:window bind:innerWidth />

<Menubar.Root class="relative z-10 rounded-sm">
{#each menuItems as { label, items }}
<Menubar.Menu>
<Menubar.Trigger>{label}</Menubar.Trigger>
<Menubar.Content>
{#each items as { label, shortcut, type, onClick }}
{#if type === 'separator'}
<Menubar.Separator />
{:else}
<Menubar.Item on:click={onClick}>
{#if label == 'mode'}
{modeLabel}
{:else}
{label}
{/if}
{#if shortcut}
<Menubar.Shortcut>{shortcut}</Menubar.Shortcut>
{/if}
</Menubar.Item>
{/if}
{/each}
</Menubar.Content>
</Menubar.Menu>
{/each}
<Menubar.Menu>
<Menubar.Trigger>File</Menubar.Trigger>
<Menubar.Content>
<Menubar.Item on:click={() => Notpad.editors.createNew()}>
New<Menubar.Shortcut>{isTauri ? 'Ctrl+N' : 'Ctrl+Alt+N'}</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Item on:click={Notpad.fileOptions.open}>
Open...<Menubar.Shortcut>Ctrl+O</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Item on:click={() => Notpad.fileOptions.save()}>
Save<Menubar.Shortcut>Ctrl+S</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Item on:click={() => Notpad.fileOptions.save({ saveAs: true })}>
Save as...
</Menubar.Item>
<Menubar.Separator />
<Menubar.Item on:click={Notpad.editors.printActive}>
Print<Menubar.Shortcut>Ctrl+P</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Separator />
<Menubar.Item on:click={Notpad.close}>Exit</Menubar.Item>
</Menubar.Content>
</Menubar.Menu>

<Menubar.Menu>
<Menubar.Trigger>Edit</Menubar.Trigger>
<Menubar.Content>
<Menubar.Item>Undo<Menubar.Shortcut>Ctrl+Z</Menubar.Shortcut></Menubar.Item>
<Menubar.Item>Redo<Menubar.Shortcut>Ctrl+Y</Menubar.Shortcut></Menubar.Item>
<Menubar.Separator />
<Menubar.Item>Cut<Menubar.Shortcut>Ctrl+X</Menubar.Shortcut></Menubar.Item>
<Menubar.Item>Copy<Menubar.Shortcut>Ctrl+C</Menubar.Shortcut></Menubar.Item>
<Menubar.Item>Paste<Menubar.Shortcut>Ctrl+V</Menubar.Shortcut></Menubar.Item>
<Menubar.Separator />
<Menubar.Item>Select All<Menubar.Shortcut>Ctrl+A</Menubar.Shortcut></Menubar.Item>
<Menubar.Item>Time/Date<Menubar.Shortcut>F5</Menubar.Shortcut></Menubar.Item>
<Menubar.Separator />
<Menubar.Item>Font</Menubar.Item>
</Menubar.Content>
</Menubar.Menu>

<Menubar.Menu>
<Menubar.Trigger>Search</Menubar.Trigger>
<Menubar.Content>
<Menubar.Sub>
<Menubar.SubTrigger>Find</Menubar.SubTrigger>
<Menubar.SubContent>
<Menubar.Item>Search the web</Menubar.Item>
<Menubar.Separator />
<Menubar.Item>Find<Menubar.Shortcut>Ctrl+F</Menubar.Shortcut></Menubar.Item>
<Menubar.Item>Find Next<Menubar.Shortcut>F3</Menubar.Shortcut></Menubar.Item>
<Menubar.Item>
Find Previous
<Menubar.Shortcut class="ml-3">Shift+F3</Menubar.Shortcut>
</Menubar.Item>
</Menubar.SubContent>
</Menubar.Sub>
<Menubar.Item>Replace<Menubar.Shortcut>Ctrl+H</Menubar.Shortcut></Menubar.Item>
<Menubar.Item>Go To<Menubar.Shortcut>Ctrl+G</Menubar.Shortcut></Menubar.Item>
</Menubar.Content>
</Menubar.Menu>

<Menubar.Menu>
<Menubar.Trigger>View</Menubar.Trigger>
<Menubar.Content>
<Menubar.Sub>
<Menubar.SubTrigger>Zoom</Menubar.SubTrigger>
<Menubar.SubContent>
<Menubar.Item>Zoom In<Menubar.Shortcut>Ctrl+Plus</Menubar.Shortcut></Menubar.Item>
<Menubar.Item>
Zoom Out<Menubar.Shortcut class="ml-3">Ctrl+Minus</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Item>Reset Zoom<Menubar.Shortcut>Ctrl+0</Menubar.Shortcut></Menubar.Item>
</Menubar.SubContent>
</Menubar.Sub>

<Menubar.Separator />
<Menubar.CheckboxItem bind:checked={isFullScreen} on:click={() => screenfull.toggle()}>
Full Screen
<Menubar.Shortcut>F11</Menubar.Shortcut>
</Menubar.CheckboxItem>
<Menubar.CheckboxItem
bind:checked={$settings.statusBar}
on:click={Notpad.settings.toggleStatusBar}
>
Status Bar
</Menubar.CheckboxItem>
<Menubar.CheckboxItem checked={$mode == 'dark'} on:click={toggleMode}>
Dark Mode
</Menubar.CheckboxItem>
</Menubar.Content>
</Menubar.Menu>

<Menubar.Menu>
<Menubar.Trigger>Help</Menubar.Trigger>
<Menubar.Content>
<Menubar.Item>About Notpad</Menubar.Item>
</Menubar.Content>
</Menubar.Menu>

{#if !isXS && !tabsMode}
<div
Expand Down
70 changes: 37 additions & 33 deletions src/lib/components/StatusBar.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script lang="ts">
import Separator from '@/components/ui/separator/separator.svelte';
import { settings } from '@/store';
import { slide } from 'svelte/transition';
export let lineNo = 1;
Expand All @@ -11,39 +12,42 @@
};
</script>

<div
class="sticky bottom-0 z-10 h-[30px] w-full
bg-primary-foreground px-2"
>
<Separator />
<p
class="flex h-full w-full items-center justify-start
divide-x-2 text-sm [&>span]:px-4 first:[&>span]:pl-0 last:[&>span]:pr-0"
{#if $settings.statusBar}
<div
class="sticky bottom-0 z-10 h-[30px] w-full
bg-primary-foreground px-2"
transition:slide
>
<span class="flex items-center justify-center">
Line:
{#key lineNo}
<span in:slide={inAnimation} class="ml-1 inline-block">
{lineNo}
</span>
{/key}
, Column:
{#key columnNo}
<span in:slide={inAnimation} class="ml-1 inline-block">
{columnNo}
</span>
{/key}
</span>
<Separator />
<p
class="flex h-full w-full items-center justify-start
divide-x-2 text-sm [&>span]:px-4 first:[&>span]:pl-0 last:[&>span]:pr-0"
>
<span class="flex items-center justify-center">
Line:
{#key lineNo}
<span in:slide={inAnimation} class="ml-1 inline-block">
{lineNo}
</span>
{/key}
, Column:
{#key columnNo}
<span in:slide={inAnimation} class="ml-1 inline-block">
{columnNo}
</span>
{/key}
</span>

<span class="flex items-center justify-center">
{#key characterCount}
<span in:slide={inAnimation} class="mr-1 inline-block">
{characterCount}
</span>
{/key}
{characterCount <= 1 ? 'Character' : 'Characters'}
</span>
<span class="flex items-center justify-center">
{#key characterCount}
<span in:slide={inAnimation} class="mr-1 inline-block">
{characterCount}
</span>
{/key}
{characterCount <= 1 ? 'Character' : 'Characters'}
</span>

<span class="ml-auto">100%</span>
</p>
</div>
<span class="ml-auto">100%</span>
</p>
</div>
{/if}
15 changes: 7 additions & 8 deletions src/lib/helpers/editors.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { activeTabId, editors, type EditorData } from '@/store';
import { activeTabId, editors, type EditorType } from '@/store';
import { get } from 'svelte/store';
import { generate as genId } from 'short-uuid';
import { toast } from 'svelte-sonner';
Expand All @@ -10,7 +10,7 @@ import { Notpad } from '@/helpers/notpad';
* a new editor, removing an editor, etc.
*/
export class Editors {
createNew({ content, fileName, fileHandle, filePath }: Partial<EditorData> = {}) {
createNew({ content, fileName, fileHandle, filePath }: Partial<EditorType> = {}) {
const newId = genId();
editors.update((value) => {
value.push({
Expand Down Expand Up @@ -68,7 +68,7 @@ export class Editors {
toast.success(`Title updated to "${fileName}"`);
}

getActive(): EditorData | undefined {
getActive(): EditorType | undefined {
const activeId = get(activeTabId);
const editorsList = get(editors);
return editorsList.find((editor) => editor.id === activeId);
Expand Down Expand Up @@ -104,8 +104,8 @@ export class Editors {
if (!activeEditor) return;
try {
print({
printable: 'textarea',
type: 'html',
printable: `<pre>${activeEditor.content}</pre>`,
type: 'raw-html',
style: `@import url('https://fonts.googleapis.com/css2?family=SUSE');
* {
font-family: 'SUSE', system-ui;
Expand All @@ -115,10 +115,9 @@ export class Editors {
print-color-adjust: exact;
color-adjust: exact;
}
textarea {
border: none;
resize: none;
pre {
padding: 8px;
text-wrap: wrap
}
h1 {
font-size: 20px;
Expand Down
2 changes: 2 additions & 0 deletions src/lib/helpers/notpad.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@ import { toast } from 'svelte-sonner';
import { FileOptions } from '@/helpers/file-options';
import { Editors } from '@/helpers/editors';
import { NotpadStorage } from '@/store/storage';
import { Settings } from './settings';

export class Notpad {
public static fileOptions: FileOptions = new FileOptions();
public static editors: Editors = new Editors();
public static storage: NotpadStorage = new NotpadStorage();
public static settings: Settings = new Settings();

static init = () => {
this.storage.init();
Expand Down
Loading

0 comments on commit 2111f84

Please sign in to comment.