NextGraph
/
nextgraph-rs
1
3
Fork 0
Code Issues 1 Pull Requests Packages Projects 2 Releases 3 Activity

3 panes windowing system

Browse Source
pull/37/head
Niko PLP 4 months ago
parent ff379ccf65
commit a8ec95a583
12 changed files with 540 additions and 320 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      ng-app/src/lib/CenteredLayout.svelte
  2. 742
      ng-app/src/lib/FullLayout.svelte
  3. 5
      ng-app/src/lib/Login.svelte
  4. 13
      ng-app/src/lib/components/BranchIcon.svelte
  5. 8
      ng-app/src/lib/components/NavBar.svelte
  6. 46
      ng-app/src/lib/components/PaneHeader.svelte
  7. 2
      ng-app/src/locales/de.json
  8. 4
      ng-app/src/locales/en.json
  9. 17
      ng-app/src/routes/NotFound.svelte
  10. 2
      ng-app/src/routes/WalletLogin.svelte
  11. 10
      ng-app/src/styles.css
  12. 7
      ng-app/src/tab.ts

4
ng-app/src/lib/CenteredLayout.svelte
Unescape View File

@ -62,7 +62,7 @@
<div class="mb-20 mt-10"> <div class="mb-20 mt-10">
<button <button
on:click={changeLang} on:click={changeLang}
class="text-primary-700 bg-[#f6f6f6] bg-none ring-0 hover:bg-primary-100/90 focus:ring-4 focus:ring-primary-100/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-100/55" class="text-primary-700 bg-white bg-none ring-0 hover:bg-primary-100/90 focus:ring-4 focus:ring-primary-100/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-100/55"
> >
<Language <Language
tabindex="-1" tabindex="-1"
@ -72,7 +72,7 @@
<br /> <br />
<button <button
on:click={displayNextgraphOrg} on:click={displayNextgraphOrg}
class="text-primary-700 bg-[#f6f6f6] bg-none ring-0 hover:bg-primary-100/90 focus:ring-4 focus:ring-primary-100/50 font-medium rounded-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-100/55 mb-2" class="text-primary-700 bg-white bg-none ring-0 hover:bg-primary-100/90 focus:ring-4 focus:ring-primary-100/50 font-medium rounded-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-100/55 mb-2"
> >
{$t("common.about_nextgraph")} {$t("common.about_nextgraph")}
</button> </button>

742
ng-app/src/lib/FullLayout.svelte
Unescape View File

@ -25,6 +25,8 @@
// @ts-ignore // @ts-ignore
import Logo from "./components/Logo.svelte"; import Logo from "./components/Logo.svelte";
import MenuItem from "./components/MenuItem.svelte"; import MenuItem from "./components/MenuItem.svelte";
import PaneHeader from "./components/PaneHeader.svelte";
import BranchIcon from "./components/BranchIcon.svelte";
// @ts-ignore // @ts-ignore
import { t } from "svelte-i18n"; import { t } from "svelte-i18n";
import { onMount, tick } from "svelte"; import { onMount, tick } from "svelte";
@ -32,6 +34,7 @@
available_editors, available_viewers, set_editor, set_viewer, set_view_or_edit, toggle_live_edit, available_editors, available_viewers, set_editor, set_viewer, set_view_or_edit, toggle_live_edit,
has_editor_chat, all_files_count, all_comments_count, nav_bar, save, hideMenu } from "../tab"; has_editor_chat, all_files_count, all_comments_count, nav_bar, save, hideMenu } from "../tab";
import ZeraIcon from "./ZeraIcon.svelte"; import ZeraIcon from "./ZeraIcon.svelte";
import { import {
Home, Home,
Bolt, Bolt,
@ -76,6 +79,8 @@
WrenchScrewdriver, WrenchScrewdriver,
Sparkles, Sparkles,
PaperClip, PaperClip,
XMark,
ArrowLeft,
} from "svelte-heros-v2"; } from "svelte-heros-v2";
import NavBar from "./components/NavBar.svelte"; import NavBar from "./components/NavBar.svelte";
@ -95,6 +100,109 @@
mobile = true; mobile = true;
} }
let panes_available = 0;
$: if (width < 983) {
panes_available = 0;
} else if (width >= 983 && width < 1304) {
panes_available = 1;
} else if (width >= 1304 && width < 1625) {
panes_available = 2;
} else if (width >= 1625) {
panes_available = 3;
};
let pane_left1_used: boolean | string = false;
let pane_left2_used: boolean | string = false;
let pane_right_used: boolean | string = false;
let pane_lefts_used = 0;
$: if (pane_left1_used && pane_left2_used) {
pane_lefts_used = 2;
} else if (pane_left1_used || pane_left2_used) {
pane_lefts_used = 1;
} else {
pane_lefts_used = 0;
};
$: if (panes_available == 0) {
pane_left1_used = false;
pane_left2_used = false;
pane_right_used = false;
if ($cur_tab.right_pane || $cur_tab.folders_pane || $cur_tab.toc_pane) {
$cur_tab.show_modal_menu = true;
}
} else {
if ($cur_tab.show_modal_menu && !$cur_tab.show_menu) {
$cur_tab.show_modal_menu = false;
}
if (panes_available == 1) {
if ($cur_tab.right_pane) {
pane_right_used = $cur_tab.right_pane;
pane_left1_used = false;
pane_left2_used = false;
} else if ($cur_tab.folders_pane) {
pane_left1_used = "folders";
pane_right_used = false;
pane_left2_used = false;
} else if ($cur_tab.toc_pane) {
pane_left1_used = "toc";
pane_right_used = false;
pane_left2_used = false;
} else {
pane_left1_used = false;
pane_left2_used = false;
pane_right_used = false;
}
} else if (panes_available == 2) {
if ($cur_tab.right_pane) {
pane_right_used = $cur_tab.right_pane;
pane_left2_used = false;
if ($cur_tab.folders_pane) {
pane_left1_used = "folders";
} else if ($cur_tab.toc_pane) {
pane_left1_used = "toc";
} else {
pane_left1_used = false;
}
} else {
pane_right_used = false;
if ($cur_tab.folders_pane) {
pane_left1_used = "folders";
if ($cur_tab.toc_pane) {
pane_left2_used = "toc";
} else {
pane_left2_used = false;
}
} else if ($cur_tab.toc_pane) {
pane_left1_used = "toc";
pane_left2_used = false;
} else {
pane_left1_used = false;
pane_left2_used = false;
}
}
} else if (panes_available == 3) {
if ($cur_tab.right_pane) {
pane_right_used = $cur_tab.right_pane;
} else {
pane_right_used = false;
}
if ($cur_tab.folders_pane) {
pane_left1_used = "folders";
if ($cur_tab.toc_pane) {
pane_left2_used = "toc";
} else {
pane_left2_used = false;
}
} else if ($cur_tab.toc_pane) {
pane_left1_used = "toc";
pane_left2_used = false;
} else {
pane_left1_used = false;
pane_left2_used = false;
}
}
}
let top; let top;
let shareMenu; let shareMenu;
let toolsMenu; let toolsMenu;
@ -112,6 +220,7 @@
} }
onMount(async () => {await open_doc(""); await scrollToTop()}); onMount(async () => {await open_doc(""); await scrollToTop()});
$: activeUrl = "#" + $location; $: activeUrl = "#" + $location;
const launchAppStore = (class_name:string) => { const launchAppStore = (class_name:string) => {
@ -126,7 +235,37 @@
const openPane = (pane:string) => { const openPane = (pane:string) => {
// TODO // TODO
hideMenu(); if ( pane == "folders") {
$cur_tab.folders_pane = !$cur_tab.folders_pane;
if ($cur_tab.folders_pane) {
if (panes_available <= 1 ) {
$cur_tab.right_pane = "";
}
}
} else if ( pane == "toc") {
$cur_tab.toc_pane = !$cur_tab.toc_pane;
if ($cur_tab.toc_pane) {
if (panes_available <= 1 ) {
$cur_tab.folders_pane = false;
$cur_tab.right_pane = "";
} else if (panes_available == 2) {
if ($cur_tab.folders_pane && $cur_tab.right_pane)
$cur_tab.folders_pane = false;
}
}
} else {
if ($cur_tab.right_pane == pane)
$cur_tab.right_pane = "";
else {
$cur_tab.right_pane = pane;
}
}
if (panes_available) {
hideMenu();
} else {
$cur_tab.show_modal_menu = true;
$cur_tab.show_menu = false;
}
} }
const openShare = (share:string) => { const openShare = (share:string) => {
@ -149,6 +288,29 @@
hideMenu(); hideMenu();
} }
const closeModal = () => {
cur_tab.update(ct => {
ct.show_menu = false;
ct.show_modal_menu = false;
if (!panes_available) {
$cur_tab.right_pane = "";
$cur_tab.folders_pane = false;
$cur_tab.toc_pane = false;
}
return ct;
});
}
const closePaneInModal = () => {
cur_tab.update(ct => {
ct.show_menu = true;
$cur_tab.right_pane = "";
$cur_tab.folders_pane = false;
$cur_tab.toc_pane = false;
return ct;
});
}
const share_items = [ const share_items = [
{n:"repost",i:Bolt}, {n:"repost",i:Bolt},
{n:"dm",i:PaperAirplane}, {n:"dm",i:PaperAirplane},
@ -173,6 +335,18 @@
{n:"dev",i:Beaker}, {n:"dev",i:Beaker},
]; ];
const pane_items = {
"folders":FolderOpen,
"toc":BookOpen,
"branches":BranchIcon,
"files":PaperClip,
"history":Clock,
"comments":ChatBubbleOvalLeft,
"info":InformationCircle,
"chat":ChatBubbleLeftRight,
"mc":Sparkles,
};
let asideClass = "w-48"; let asideClass = "w-48";
let spanClass = "flex-1 ml-3 whitespace-nowrap"; let spanClass = "flex-1 ml-3 whitespace-nowrap";
let nonActiveClass = let nonActiveClass =
@ -183,266 +357,265 @@
<Modal id="menu-modal" <Modal id="menu-modal"
outsideclose outsideclose
bind:open={$cur_tab.show_menu} bind:open={$cur_tab.show_modal_menu}
size = 'xs' size = 'xs'
placement = 'top-right' placement = 'top-right'
backdropClass="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 menu-bg-modal" backdropClass="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 menu-bg-modal"
> >
<div class="static">
<div class="absolute top-2 right-4 w-10 h-10" role="button" aria-label="Close menu" title="Close menu"
on:click={closeModal}
on:keypress={closeModal}
tabindex="0">
<XMark class="w-10 h-10 text-gray-700 focus:outline-none dark:text-white"/>
</div>
{#if !$cur_tab.show_menu}
<div class="m-3 flex items-center" role="button" aria-label="Back to menu" title="Back to menu"
on:click={closePaneInModal}
on:keypress={closePaneInModal}
tabindex="0">
<ArrowLeft class="w-8 h-8 text-gray-700 focus:outline-none dark:text-white"/>
<span class="ml-2 inline-block text-gray-700 select-none dark:text-white">Back to menu</span>
</div>
{/if}
{#if $cur_tab.show_menu || (!$cur_tab.folders_pane && !$cur_tab.toc_pane && !$cur_tab.right_pane)}
<aside style="width:305px; padding:5px;" class="bg-white" aria-label="Sidebar">
<div class="bg-gray-60 overflow-y-auto dark:bg-gray-800">
<ul class="space-y-1 space-x-0 mb-10">
{#if $cur_branch_has_discrete}
<li>
<div class="inline-flex graph-discrete-toggle mb-2 ml-2" role="group">
<button on:click={toggle_graph_discrete} disabled={$cur_tab.graph_or_discrete} type="button" style="border-top-left-radius: 0.375rem;border-bottom-left-radius: 0.375rem;" class:selected-toggle={$cur_tab.graph_or_discrete} class:unselected-toggle={!$cur_tab.graph_or_discrete} class="common-toggle" >
<Sun class="mr-2 focus:outline-none"/> {$t("doc.graph")}
</button>
<button on:click={toggle_graph_discrete} disabled={!$cur_tab.graph_or_discrete} type="button" style="border-top-right-radius: 0.375rem;border-bottom-right-radius: 0.375rem;" class:selected-toggle={!$cur_tab.graph_or_discrete} class:unselected-toggle={$cur_tab.graph_or_discrete} class="common-toggle">
<Cloud class="mr-2 focus:outline-none"/> {$t("doc.discrete")}
</button>
</div>
</li>
{/if}
{#if $cur_viewer}
<MenuItem selected={$cur_tab.view_or_edit} title={$cur_viewer["ng:a"]} clickable={($available_viewers.length > 1 || !$cur_tab.view_or_edit) && function () { if ($available_viewers.length > 1) { open_view_as = !open_view_as; } else { set_view_or_edit(true); hideMenu(); } open_edit_with=false;} }>
<Eye
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white "
/>
<span class="ml-3">{$t("doc.menu.view_as")} {#if $cur_tab.view_or_edit || $available_viewers.length == 1 }{$cur_viewer["ng:n"]}{/if}</span>
</MenuItem>
{#if open_view_as && $available_viewers.length > 1 }
{#each $available_viewers as viewer}
<MenuItem title={viewer["ng:a"]} extraClass="submenu" clickable={(viewer["ng:g"] !== $cur_viewer["ng:g"] || !$cur_tab.view_or_edit) && function () { set_view_or_edit(true); set_viewer(viewer["ng:g"]); hideMenu(); open_view_as = false} }>
<ZeraIcon
zera={viewer["ng:u"]}
config={{
tabindex:"-1",
class:"w-7 h-7 text-gray-700 focus:outline-none dark:text-white "
}}
/>
<span class="ml-3">{viewer["ng:n"]}</span>
</MenuItem>
{/each}
{/if}
{/if}
{#if $cur_tab.doc.can_edit}
{#if $cur_editor}
<MenuItem title={$cur_editor["ng:a"]} selected={!$cur_tab.view_or_edit} clickable={ ($available_editors.length > 1 || $cur_tab.view_or_edit) && function () { if ($available_editors.length > 1) { open_edit_with = !open_edit_with; } else { set_view_or_edit(false); hideMenu(); } open_view_as=false;} }>
<PencilSquare
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white "
/>
<span class="ml-3">{$t("doc.menu.edit_with")} {#if !$cur_tab.view_or_edit || $available_editors.length == 1 }{$cur_editor["ng:n"]}{/if}</span>
</MenuItem>
{#if open_edit_with && $available_editors.length > 1 }
{#each $available_editors as editor}
<MenuItem title={editor["ng:a"]} extraClass="submenu" clickable={(editor["ng:g"] !== $cur_editor["ng:g"] || $cur_tab.view_or_edit) && function () { set_view_or_edit(false); set_editor(editor["ng:g"]); hideMenu(); open_edit_with = false} }>
<ZeraIcon
zera={editor["ng:u"]}
config={{
tabindex:"-1",
class:"w-7 h-7 text-gray-700 focus:outline-none dark:text-white "
}}
/>
<span class="ml-3">{editor["ng:n"]}</span>
</MenuItem>
{/each}
{/if}
{#if !$cur_tab.view_or_edit || open_edit_with }
<li title={$t("doc.menu.live_editing_description")} style="margin: 7px 0; padding-left: 32px;" class="toggle">
<Toggle
on:change={ toggle_live_edit }
checked={ $cur_tab.doc.live_edit }
><span class="text-gray-700 text-base">{$t("doc.menu.live_editing")}</span>
</Toggle>
</li>
{/if}
{:else}
<MenuItem clickable={()=>launchAppStore($cur_tab.cur_branch.class)}>
<ZeraIcon
zera="app_store"
config={{tabindex:"-1",
class:"w-7 h-7 text-gray-700 focus:outline-none dark:text-white "}}
/>
<span class="ml-3">{$t("doc.menu.install_app_to_edit")}</span>
</MenuItem>
{/if}
{/if}
<aside style="width:295px;" class="bg-white" aria-label="Sidebar"> {#if $cur_tab.doc.can_edit}
<div class="bg-gray-60 overflow-y-auto dark:bg-gray-800"> <MenuItem title={$t("doc.menu.items.new_block.desc")} clickable={ ()=> openAction("new_block") }>
<ul class="space-y-1 space-x-0 mb-10"> <PlusCircle
{#if $cur_branch_has_discrete} tabindex="-1"
<li> class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
<div class="inline-flex graph-discrete-toggle mb-2" role="group">
<button on:click={toggle_graph_discrete} disabled={$cur_tab.graph_or_discrete} type="button" style="border-top-left-radius: 0.375rem;border-bottom-left-radius: 0.375rem;" class:selected-toggle={$cur_tab.graph_or_discrete} class:unselected-toggle={!$cur_tab.graph_or_discrete} class="common-toggle" >
<Sun class="mr-2 focus:outline-none"/> {$t("doc.graph")}
</button>
<button on:click={toggle_graph_discrete} disabled={!$cur_tab.graph_or_discrete} type="button" style="border-top-right-radius: 0.375rem;border-bottom-right-radius: 0.375rem;" class:selected-toggle={!$cur_tab.graph_or_discrete} class:unselected-toggle={$cur_tab.graph_or_discrete} class="common-toggle">
<Cloud class="mr-2 focus:outline-none"/> {$t("doc.discrete")}
</button>
</div>
</li>
{/if}
{#if $cur_viewer}
<MenuItem selected={$cur_tab.view_or_edit} title={$cur_viewer["ng:a"]} clickable={($available_viewers.length > 1 || !$cur_tab.view_or_edit) && function () { if ($available_viewers.length > 1) { open_view_as = !open_view_as; } else { set_view_or_edit(true); hideMenu(); } open_edit_with=false;} }>
<Eye
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white "
/>
<span class="ml-3">{$t("doc.menu.view_as")} {#if $cur_tab.view_or_edit || $available_viewers.length == 1 }{$cur_viewer["ng:n"]}{/if}</span>
</MenuItem>
{#if open_view_as && $available_viewers.length > 1 }
{#each $available_viewers as viewer}
<MenuItem title={viewer["ng:a"]} extraClass="submenu" clickable={(viewer["ng:g"] !== $cur_viewer["ng:g"] || !$cur_tab.view_or_edit) && function () { set_view_or_edit(true); set_viewer(viewer["ng:g"]); hideMenu(); open_view_as = false} }>
<ZeraIcon
zera={viewer["ng:u"]}
config={{
tabindex:"-1",
class:"w-7 h-7 text-gray-700 focus:outline-none dark:text-white "
}}
/> />
<span class="ml-3">{viewer["ng:n"]}</span> <span class="ml-3">{$t("doc.menu.items.new_block.label")}</span>
</MenuItem>
{/if}
{#if $has_editor_chat}
<MenuItem title={$t("doc.menu.items.editor_chat.desc")} selected={$cur_tab.right_pane == "chat"} clickable={ ()=> openPane("chat") }>
<Icon tabindex="-1" class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white" variation="outline" color="currentColor" icon={pane_items["chat"]} />
<span class="ml-3">{$t("doc.menu.items.editor_chat.label")}</span>
</MenuItem> </MenuItem>
{/each} {/if}
{/if}
{/if} <MenuItem title={$t("doc.menu.items.mc.desc")} selected={$cur_tab.right_pane == "mc"} clickable={ ()=> openPane("mc") }>
{#if $cur_tab.doc.can_edit} <Icon tabindex="-1" class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white" variation="outline" color="currentColor" icon={pane_items["mc"]} />
{#if $cur_editor} <span class="ml-3">{$t("doc.menu.items.mc.label")}</span>
<MenuItem title={$cur_editor["ng:a"]} selected={!$cur_tab.view_or_edit} clickable={ ($available_editors.length > 1 || $cur_tab.view_or_edit) && function () { if ($available_editors.length > 1) { open_edit_with = !open_edit_with; } else { set_view_or_edit(false); hideMenu(); } open_view_as=false;} }> </MenuItem>
<PencilSquare
<MenuItem title={$t("doc.menu.items.folders.desc")} selected={$cur_tab.folders_pane} clickable={ ()=> openPane("folders") }>
<Icon tabindex="-1" class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white" variation="outline" color="currentColor" icon={pane_items["folders"]} />
<span class="ml-3">{$t("doc.menu.items.folders.label")}</span>
</MenuItem>
<MenuItem title={$t("doc.menu.items.toc.desc")} selected={$cur_tab.toc_pane} clickable={ ()=> openPane("toc") }>
<Icon tabindex="-1" class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white" variation="outline" color="currentColor" icon={pane_items["toc"]} />
<span class="ml-3">{$t("doc.menu.items.toc.label")}</span>
</MenuItem>
<MenuItem title={$t("doc.menu.items.files.desc")} selected={$cur_tab.right_pane == "files"} clickable={ ()=> openPane("files") }>
<Icon tabindex="-1" class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white" variation="outline" color="currentColor" icon={pane_items["files"]} />
<span class="ml-3">{$t("doc.menu.items.files.label")} {$all_files_count}</span>
</MenuItem>
<div style="padding:0;" bind:this={shareMenu}></div>
<MenuItem title={$t("doc.menu.items.share.desc")} clickable={ () => { open_share = !open_share; scrollToMenuShare(); } }>
<Share
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white " class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/> />
<span class="ml-3">{$t("doc.menu.edit_with")} {#if !$cur_tab.view_or_edit || $available_editors.length == 1 }{$cur_editor["ng:n"]}{/if}</span> <span class="ml-3">{$t("doc.menu.items.share.label")}</span>
</MenuItem> </MenuItem>
{#if open_edit_with && $available_editors.length > 1 } {#if open_share }
{#each $available_editors as editor} {#each share_items as share}
<MenuItem title={editor["ng:a"]} extraClass="submenu" clickable={(editor["ng:g"] !== $cur_editor["ng:g"] || $cur_tab.view_or_edit) && function () { set_view_or_edit(false); set_editor(editor["ng:g"]); hideMenu(); open_edit_with = false} }> <MenuItem title={$t(`doc.menu.items.${share.n}.desc`)} extraClass="submenu" clickable={ () => openShare(share.n) }>
<ZeraIcon <Icon tabindex="-1" class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white " variation="outline" color="currentColor" icon={share.i} />
zera={editor["ng:u"]} <span class="ml-3">{$t(`doc.menu.items.${share.n}.label`)}</span>
config={{
tabindex:"-1",
class:"w-7 h-7 text-gray-700 focus:outline-none dark:text-white "
}}
/>
<span class="ml-3">{editor["ng:n"]}</span>
</MenuItem> </MenuItem>
{/each} {/each}
{/if} {/if}
{#if !$cur_tab.view_or_edit || open_edit_with }
<li title={$t("doc.menu.live_editing_description")} style="margin: 7px 0; padding-left: 32px;" class="toggle"> <MenuItem title={$t("doc.menu.items.comments.desc")} selected={$cur_tab.right_pane == "comments"} clickable={ ()=> openPane("comments") }>
<Toggle <Icon tabindex="-1" class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white" variation="outline" color="currentColor" icon={pane_items["comments"]} />
on:change={ toggle_live_edit } <span class="ml-3">{$t("doc.menu.items.comments.label")} {$all_comments_count}</span>
checked={ $cur_tab.doc.live_edit } </MenuItem>
><span class="text-gray-700 text-base">{$t("doc.menu.live_editing")}</span>
</Toggle> <MenuItem title={$t("doc.menu.items.branches.desc")} selected={$cur_tab.right_pane == "branches"} clickable={ ()=> openPane("branches") }>
</li> <Icon tabindex="-1" class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white" variation="outline" color="currentColor" icon={pane_items["branches"]} />
{/if} <span class="ml-3">{$t("doc.menu.items.branches.label")}</span>
{:else} </MenuItem>
<MenuItem clickable={()=>launchAppStore($cur_tab.cur_branch.class)}>
<ZeraIcon <MenuItem title={$t("doc.menu.items.history.desc")} selected={$cur_tab.right_pane == "history"} clickable={ ()=> openPane("history") }>
zera="app_store" <Icon tabindex="-1" class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white" variation="outline" color="currentColor" icon={pane_items["history"]} />
config={{tabindex:"-1", <span class="ml-3">{$t("doc.menu.items.history.label")}</span>
class:"w-7 h-7 text-gray-700 focus:outline-none dark:text-white "}} </MenuItem>
<MenuItem title={$t("doc.menu.items.find.desc")} clickable={ find }>
<MagnifyingGlass
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/> />
<span class="ml-3">{$t("doc.menu.install_app_to_edit")}</span> <span class="ml-3">{$t("doc.menu.items.find.label")}</span>
</MenuItem> </MenuItem>
{/if}
{/if} <MenuItem title={$t("doc.menu.items.bookmark.desc")} clickable={ bookmark }>
<Bookmark
{#if $cur_tab.doc.can_edit} tabindex="-1"
<MenuItem title={$t("doc.menu.items.new_block.desc")} clickable={ ()=> openAction("new_block") }> class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
<PlusCircle />
tabindex="-1" <span class="ml-3">{$t("doc.menu.items.bookmark.label")}</span>
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/>
<span class="ml-3">{$t("doc.menu.items.new_block.label")}</span>
</MenuItem>
{/if}
{#if $has_editor_chat}
<MenuItem title={$t("doc.menu.items.editor_chat.desc")} clickable={ ()=> openPane("chat") }>
<ChatBubbleLeftRight
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/>
<span class="ml-3">{$t("doc.menu.items.editor_chat.label")}</span>
</MenuItem>
{/if}
<MenuItem title={$t("doc.menu.items.mc.desc")} clickable={ ()=> openPane("mc") }>
<Sparkles
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/>
<span class="ml-3">{$t("doc.menu.items.mc.label")}</span>
</MenuItem>
<MenuItem title={$t("doc.menu.items.folders.desc")} clickable={ ()=> openPane("folders") }>
<FolderOpen
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/>
<span class="ml-3">{$t("doc.menu.items.folders.label")}</span>
</MenuItem>
<MenuItem title={$t("doc.menu.items.toc.desc")} clickable={ ()=> openPane("toc") }>
<BookOpen
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/>
<span class="ml-3">{$t("doc.menu.items.toc.label")}</span>
</MenuItem>
<MenuItem title={$t("doc.menu.items.files.desc")} clickable={ ()=> openPane("files") }>
<PaperClip
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/>
<span class="ml-3">{$t("doc.menu.items.files.label")} {$all_files_count}</span>
</MenuItem>
<div style="padding:0;" bind:this={shareMenu}></div>
<MenuItem title={$t("doc.menu.items.share.desc")} clickable={ () => { open_share = !open_share; scrollToMenuShare(); } }>
<Share
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/>
<span class="ml-3">{$t("doc.menu.items.share.label")}</span>
</MenuItem>
{#if open_share }
{#each share_items as share}
<MenuItem title={$t(`doc.menu.items.${share.n}.desc`)} extraClass="submenu" clickable={ () => openShare(share.n) }>
<Icon tabindex="-1" class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white " variation="outline" color="currentColor" icon={share.i} />
<span class="ml-3">{$t(`doc.menu.items.${share.n}.label`)}</span>
</MenuItem> </MenuItem>
{/each}
{/if} <MenuItem title={$t("doc.menu.items.annotate.desc")} clickable={ annotate }>
<ChatBubbleLeftEllipsis
<MenuItem title={$t("doc.menu.items.comments.desc")} clickable={ ()=> openPane("comments") }> tabindex="-1"
<ChatBubbleOvalLeft class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
tabindex="-1" />
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white" <span class="ml-3">{$t("doc.menu.items.annotate.label")}</span>
/>
<span class="ml-3">{$t("doc.menu.items.comments.label")} {$all_comments_count}</span>
</MenuItem>
<MenuItem title={$t("doc.menu.items.branches.desc")} clickable={ ()=> openPane("branches") }>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512" fill="currentColor" width="24" height="24" tabindex="-1" class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white" >
<path d="M365.1,74.6c-43.8,0-80.2,36.4-80.2,80.2c0,38.2,27,70.9,64.3,78.3c-0.9,21.4-12.1,33.6-30.8,48.5
c-23.3,17.7-53.2,23.3-74.6,27c-46.6,8.4-71.8,30.8-83,45.7V159.5c16.8-2.8,32.6-12.1,44.8-25.2c13.1-14.9,20.5-33.6,20.5-54.1
C226.2,36.4,189.8,0,146,0S65.7,36.4,65.7,80.2c0,19.6,7.5,38.2,19.6,53.2c11.2,13.1,26.1,21.4,42.9,25.2v195.8
c-16.8,3.7-31.7,13.1-42.9,25.2c-13.1,14.9-19.6,33.6-19.6,52.2c0,43.8,36.4,80.2,80.2,80.2s80.2-36.4,80.2-80.2
c0-27-13.1-51.3-35.4-66.2c10.3-11.2,28-22.4,58.8-28c25.2-4.7,60.6-11.2,88.6-32.6c27-20.5,42-42,43.8-73.7
c37.3-7.5,64.3-40.1,64.3-78.3C445.3,110,408.9,74.6,365.1,74.6L365.1,74.6z M97.5,81.1c0-26.1,21.4-48.5,48.5-48.5
c26.1,0,48.5,21.4,48.5,48.5S173,129.6,146,129.6C118.9,129.6,97.5,107.2,97.5,81.1z M193.5,433.7c0,26.1-21.4,48.5-48.5,48.5
c-26.1,0-48.5-21.4-48.5-48.5s21.4-48.5,48.5-48.5C172.1,386.1,193.5,407.5,193.5,433.7z M365.1,202.4c-26.1,0-48.5-21.4-48.5-48.5
c0-26.1,21.4-48.5,48.5-48.5c26.1,0,48.5,21.4,48.5,48.5C412.7,180.9,391.2,202.4,365.1,202.4z"/>
</svg>
<span class="ml-3">{$t("doc.menu.items.branches.label")}</span>
</MenuItem>
<MenuItem title={$t("doc.menu.items.history.desc")} clickable={ ()=> openPane("history") }>
<Clock
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/>
<span class="ml-3">{$t("doc.menu.items.history.label")}</span>
</MenuItem>
<MenuItem title={$t("doc.menu.items.find.desc")} clickable={ find }>
<MagnifyingGlass
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/>
<span class="ml-3">{$t("doc.menu.items.find.label")}</span>
</MenuItem>
<MenuItem title={$t("doc.menu.items.bookmark.desc")} clickable={ bookmark }>
<Bookmark
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/>
<span class="ml-3">{$t("doc.menu.items.bookmark.label")}</span>
</MenuItem>
<MenuItem title={$t("doc.menu.items.annotate.desc")} clickable={ annotate }>
<ChatBubbleLeftEllipsis
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/>
<span class="ml-3">{$t("doc.menu.items.annotate.label")}</span>
</MenuItem>
<MenuItem title={$t("doc.menu.items.info.desc")} clickable={ ()=> openPane("info") }>
<InformationCircle
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/>
<span class="ml-3">{$t("doc.menu.items.info.label")}</span>
</MenuItem>
<MenuItem title={$t("doc.menu.items.notifs.desc")} clickable={ ()=> openAction("notifs") }>
<Bell
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/>
<span class="ml-3">{$t("doc.menu.items.notifs.label")}</span>
</MenuItem>
{#if $cur_tab.doc.is_member}
<MenuItem title={$t("doc.menu.items.permissions.desc")} clickable={ ()=> openAction("permissions") }>
<LockOpen
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/>
<span class="ml-3">{$t("doc.menu.items.permissions.label")}</span>
</MenuItem>
{/if}
<MenuItem title={$t("doc.menu.items.settings.desc")} clickable={ ()=> openAction("settings") }>
<Cog6Tooth
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/>
<span class="ml-3">{$t("doc.menu.items.settings.label")}</span>
</MenuItem>
<div style="padding:0;" bind:this={toolsMenu}></div>
<MenuItem title={$t("doc.menu.items.tools.desc")} clickable={ () => {open_tools = !open_tools; scrollToMenuTools();} } >
<WrenchScrewdriver
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/>
<span class="ml-3">{$t("doc.menu.items.tools.label")}</span>
</MenuItem>
{#if open_tools }
{#each tools_items as tool}
<MenuItem title={$t(`doc.menu.items.${tool.n}.desc`)} extraClass="submenu" clickable={ () => openAction(tool.n) }>
<Icon tabindex="-1" class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white " variation="outline" color="currentColor" icon={tool.i} />
<span class="ml-3">{$t(`doc.menu.items.${tool.n}.label`)}</span>
</MenuItem> </MenuItem>
{/each}
{/if} <MenuItem title={$t("doc.menu.items.info.desc")} selected={$cur_tab.right_pane == "info"} clickable={ ()=> openPane("info") }>
</ul> <Icon tabindex="-1" class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white" variation="outline" color="currentColor" icon={pane_items["info"]} />
</div> <span class="ml-3">{$t("doc.menu.items.info.label")}</span>
</aside> </MenuItem>
<MenuItem title={$t("doc.menu.items.notifs.desc")} clickable={ ()=> openAction("notifs") }>
<Bell
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/>
<span class="ml-3">{$t("doc.menu.items.notifs.label")}</span>
</MenuItem>
{#if $cur_tab.doc.is_member}
<MenuItem title={$t("doc.menu.items.permissions.desc")} clickable={ ()=> openAction("permissions") }>
<LockOpen
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/>
<span class="ml-3">{$t("doc.menu.items.permissions.label")}</span>
</MenuItem>
{/if}
<MenuItem title={$t("doc.menu.items.settings.desc")} clickable={ ()=> openAction("settings") }>
<Cog6Tooth
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/>
<span class="ml-3">{$t("doc.menu.items.settings.label")}</span>
</MenuItem>
<div style="padding:0;" bind:this={toolsMenu}></div>
<MenuItem title={$t("doc.menu.items.tools.desc")} clickable={ () => {open_tools = !open_tools; scrollToMenuTools();} } >
<WrenchScrewdriver
tabindex="-1"
class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white"
/>
<span class="ml-3">{$t("doc.menu.items.tools.label")}</span>
</MenuItem>
{#if open_tools }
{#each tools_items as tool}
<MenuItem title={$t(`doc.menu.items.${tool.n}.desc`)} extraClass="submenu" clickable={ () => openAction(tool.n) }>
<Icon tabindex="-1" class="w-7 h-7 text-gray-700 focus:outline-none dark:text-white " variation="outline" color="currentColor" icon={tool.i} />
<span class="ml-3">{$t(`doc.menu.items.${tool.n}.label`)}</span>
</MenuItem>
{/each}
{/if}
</ul>
</div>
</aside>
{:else if $cur_tab.right_pane}
<div style="height:44px; background-color: rgb(251, 251, 251);" class="flex items-center">
<Icon tabindex="-1" class="ml-3 w-8 h-8 text-gray-400 dark:text-white focus:outline-none " variation="outline" color="currentColor" icon={pane_items[$cur_tab.right_pane]} />
<span class="ml-2 inline-block text-gray-500 select-none dark:text-white">{$t(`doc.menu.items.${$cur_tab.right_pane}.label`)}</span>
</div>
{:else if $cur_tab.folders_pane}
<div style="height:44px; background-color: rgb(251, 251, 251);" class="flex items-center">
<Icon tabindex="-1" class="ml-3 w-8 h-8 text-gray-400 dark:text-white focus:outline-none " variation="outline" color="currentColor" icon={pane_items["folders"]} />
<span class="ml-2 inline-block text-gray-500 select-none dark:text-white">{$t("doc.menu.items.folders.label")}</span>
</div>
{:else if $cur_tab.toc_pane}
<div style="height:44px; background-color: rgb(251, 251, 251);" class="flex items-center">
<Icon tabindex="-1" class="ml-3 w-8 h-8 text-gray-400 dark:text-white focus:outline-none " variation="outline" color="currentColor" icon={pane_items["toc"]} />
<span class="ml-2 inline-block text-gray-500 select-none dark:text-white">{$t("doc.menu.items.toc.label")}</span>
</div>
{/if}
</div>
</Modal> </Modal>
{#if mobile} {#if mobile}
@ -453,7 +626,7 @@
</div> </div>
{/if} {/if}
<div bind:this={top}></div> <div bind:this={top}></div>
<main class:mt-12={!withoutNavBar} class="pb-14 bg-white dark:bg-black"> <main class:mt-11={!withoutNavBar} class="pb-14 bg-white dark:bg-black">
<slot /> <slot />
</main> </main>
<MobileBottomBar {activeUrl}> <MobileBottomBar {activeUrl}>
@ -477,7 +650,7 @@
</div> </div>
{:else} {:else}
<div class="full-layout"> <div class="full-layout">
<Sidebar {activeUrl} {asideClass} {nonActiveClass} class="fixed"> <Sidebar {activeUrl} {asideClass} {nonActiveClass} style="background-color: #f6f6f6;" class="fixed h-full">
<SidebarWrapper <SidebarWrapper
divClass="bg-gray-60 overflow-y-auto tall-xs:py-4 px-3 rounded dark:bg-gray-800" divClass="bg-gray-60 overflow-y-auto tall-xs:py-4 px-3 rounded dark:bg-gray-800"
> >
@ -599,65 +772,40 @@
</SidebarGroup> </SidebarGroup>
</SidebarWrapper> </SidebarWrapper>
</Sidebar> </Sidebar>
</div>
{#if pane_left1_used}
<div class="left-[192px] w-[321px;] full-layout h-full absolute top-0 bg-white border-r border-r-1 border-gray-200">
<div class="static">
<PaneHeader class="left-[472px]" pane_name={pane_left1_used} {pane_items}/>
<!-- $: nav_bar = {
icon: false,
title: "",
back: true,
newest: 0,
save: undefined,
};-->
<!-- <div style="background-color: #f6f6f6;" class="fixed top-0 left-48 right-0 h-10 flex text-center text-gray-900 dark:text-white">
{#if $nav_bar.back}
<div role="button" tabindex="0" on:click={back} on:keypress={back} class="flex-none w-10 flex justify-center items-center">
<ArrowLeft tabindex="-1" class="w-8 h-8 focus:outline-none"/>
</div>
{/if}
{#if $nav_bar.icon}
<div style="cursor:pointer;" class="flex-none w-8 m-1 " on:click={scrollToTop} on:keypress={scrollToTop}>
<NavIcon img={$nav_bar.icon} config={{
tabindex:"-1",
class:"w-8 h-8 focus:outline-none"
}}/>
</div>
{/if}
<div style="cursor:pointer;" class="grow w-10 items-center flex px-1"><span class="inline-block truncate" on:click={scrollToTop} on:keypress={scrollToTop}> {$nav_bar.title} </span></div>
{#if $nav_bar.newest}
<div role="button" tabindex="0" class="flex-none m-1 rounded-full bg-primary-700 text-white dark:bg-primary-700" on:click={scrollToTop}>
<div class="flex items-center grow pr-2">
<ChevronDoubleUp tabindex="-1" class="w-6 h-6 m-1 focus:outline-none"/>
<span class="inline-block">{@html $nav_bar.newest < 100 ? "+ "+$nav_bar.newest : "<span class=\"text-xl\">&infin;</span>"}</span>
</div>
</div>
{/if}
{#if $nav_bar.save !== undefined}
{#if $nav_bar.save }
<div class="flex-none w-10" role="button" on:click={save} on:keypress={save} title="Save">
<CheckCircle variation="solid" tabindex="-1" strokeWidth="3" class="w-10 h-10 text-primary-400 focus:outline-none"/>
</div>
{:else}
<div class="flex-none w-10" title="Saved!">
<CheckBadge tabindex="-1" class="w-8 h-8 m-1 text-green-500 focus:outline-none"/>
</div>
{/if}
{/if}
<div class="flex-none w-10 " role="button" title="Open Menu" on:click={()=>show_menu = true} on:keypress={()=>show_menu = true}>
<EllipsisVertical tabindex="-1" class="w-8 h-8 my-1 mr-2"/>
</div> </div>
</div> -->
<div class="fixed top-0 left-48 right-0">
<NavBar {scrollToTop}/>
</div> </div>
{/if}
{#if pane_left2_used}
<div class="left-[513px] w-[321px;] full-layout h-full absolute top-0 bg-white border-r border-r-1 border-gray-200">
<div class="static">
<PaneHeader class="left-[793px]" pane_name={pane_left2_used} {pane_items}/>
</div>
</div>
{/if}
<div class:left-[192px]={pane_lefts_used==0} class:left-[513px]={pane_lefts_used==1} class:left-[834px]={pane_lefts_used==2} class:right-0={!pane_right_used} class:right-[321px]={pane_right_used} class="full-layout absolute top-0">
<div class:left-[192px]={pane_lefts_used==0} class:left-[513px]={pane_lefts_used==1} class:left-[834px]={pane_lefts_used==2} class:right-0={!pane_right_used} class:right-[321px]={pane_right_used} class="fixed top-0">
<NavBar {scrollToTop}/>
</div>
<div bind:this={top}></div> <div bind:this={top}></div>
<main class="ml-48 mt-12 bg-white dark:bg-black" > <main class="mt-11 bg-white dark:bg-black" >
<slot /> <slot />
</main> </main>
</div> </div>
{#if pane_right_used}
<div class="w-[321px;] full-layout h-full absolute top-0 right-0 bg-white border-l border-l-1 border-gray-200">
<div class="static">
<PaneHeader class="right-0" pane_name={pane_right_used} {pane_items}/>
</div>
</div>
{/if}
{/if} {/if}
<style> <style>

5
ng-app/src/lib/Login.svelte
Unescape View File

@ -272,6 +272,9 @@
async function on_pin_key(val) { async function on_pin_key(val) {
pin_code = [...pin_code, val]; pin_code = [...pin_code, val];
if (pin_code.length == 4) {
setTimeout(()=>window.document.getElementById("confirm_pin_btn").focus(),50);
}
} }
async function select_order(val) { async function select_order(val) {
@ -610,8 +613,10 @@
</button> </button>
<Button <Button
tabindex="0" tabindex="0"
id="confirm_pin_btn"
class="w-full bg-green-300 hover:bg-green-300/90 enabled:animate-bounce disabled:bg-gray-200 disabled:opacity-15 m-1 select-none align-bottom text-7xl p-0 aspect-square border-0" class="w-full bg-green-300 hover:bg-green-300/90 enabled:animate-bounce disabled:bg-gray-200 disabled:opacity-15 m-1 select-none align-bottom text-7xl p-0 aspect-square border-0"
on:click={async () => await finish()} on:click={async () => await finish()}
on:keypress={async () => await finish()}
disabled={pin_code.length < 4} disabled={pin_code.length < 4}
> >
<LockOpen <LockOpen

13
ng-app/src/lib/components/BranchIcon.svelte
Unescape View File

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512" fill="currentColor" width="24" height="24" tabindex="-1" class={$$props.class || ''} >
<path d="M365.1,74.6c-43.8,0-80.2,36.4-80.2,80.2c0,38.2,27,70.9,64.3,78.3c-0.9,21.4-12.1,33.6-30.8,48.5
c-23.3,17.7-53.2,23.3-74.6,27c-46.6,8.4-71.8,30.8-83,45.7V159.5c16.8-2.8,32.6-12.1,44.8-25.2c13.1-14.9,20.5-33.6,20.5-54.1
C226.2,36.4,189.8,0,146,0S65.7,36.4,65.7,80.2c0,19.6,7.5,38.2,19.6,53.2c11.2,13.1,26.1,21.4,42.9,25.2v195.8
c-16.8,3.7-31.7,13.1-42.9,25.2c-13.1,14.9-19.6,33.6-19.6,52.2c0,43.8,36.4,80.2,80.2,80.2s80.2-36.4,80.2-80.2
c0-27-13.1-51.3-35.4-66.2c10.3-11.2,28-22.4,58.8-28c25.2-4.7,60.6-11.2,88.6-32.6c27-20.5,42-42,43.8-73.7
c37.3-7.5,64.3-40.1,64.3-78.3C445.3,110,408.9,74.6,365.1,74.6L365.1,74.6z M97.5,81.1c0-26.1,21.4-48.5,48.5-48.5
c26.1,0,48.5,21.4,48.5,48.5S173,129.6,146,129.6C118.9,129.6,97.5,107.2,97.5,81.1z M193.5,433.7c0,26.1-21.4,48.5-48.5,48.5
c-26.1,0-48.5-21.4-48.5-48.5s21.4-48.5,48.5-48.5C172.1,386.1,193.5,407.5,193.5,433.7z M365.1,202.4c-26.1,0-48.5-21.4-48.5-48.5
c0-26.1,21.4-48.5,48.5-48.5c26.1,0,48.5,21.4,48.5,48.5C412.7,180.9,391.2,202.4,365.1,202.4z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

8
ng-app/src/lib/components/NavBar.svelte
Unescape View File

@ -9,12 +9,6 @@
// according to those terms. // according to those terms.
--> -->
<!--
@component DeviceIcon
Display an icon for a device class provided by the `device` attribute.
Pass `config` for custom attributes.
-->
<script lang="ts"> <script lang="ts">
import { import {
ArrowLeft, ArrowLeft,
@ -35,7 +29,7 @@
} }
</script> </script>
<div style="background-color: #f6f6f6;" class="h-12 pb-2 flex text-center text-gray-900 dark:text-white"> <div style="background-color: #fbfbfb;" class="h-11 pb-1 flex text-center text-gray-700 dark:text-white">
{#if $nav_bar.back} {#if $nav_bar.back}
<div role="button" tabindex="0" on:click={back} on:keypress={back} class="flex-none w-10 flex justify-center items-center"> <div role="button" tabindex="0" on:click={back} on:keypress={back} class="flex-none w-10 flex justify-center items-center">
<ArrowLeft tabindex="-1" class="w-8 h-8 focus:outline-none"/> <ArrowLeft tabindex="-1" class="w-8 h-8 focus:outline-none"/>

46
ng-app/src/lib/components/PaneHeader.svelte
Unescape View File

@ -0,0 +1,46 @@
<!--
// Copyright (c) 2022-2024 Niko Bonnieure, Par le Peuple, NextGraph.org developers
// All rights reserved.
// Licensed under the Apache License, Version 2.0
// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0>
// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>,
// at your option. All files in the project carrying such
// notice may not be copied, modified, or distributed except
// according to those terms.
-->
<script lang="ts">
import {
XMark,
Icon,
CheckCircle,
CheckBadge,
EllipsisVertical,
} from "svelte-heros-v2";
import { t } from "svelte-i18n";
import {cur_tab} from "../../tab";
export let pane_name = "";
export let pane_items = {};
const closePane = (pane:string|boolean) => {
if (pane=="folders") {
$cur_tab.folders_pane = false;
} else if (pane=="toc") {
$cur_tab.toc_pane = false;
} else {
$cur_tab.right_pane = "";
}
}
</script>
<div style="height:44px; background-color: rgb(251, 251, 251);" class={`${$$props.class || ''} fixed top-0 w-10 h-10 p-1 bg-white dark:bg-black; rounded-bl-xl`} role="button" aria-label="Close pane" title="Close pane"
on:click={()=>closePane(pane_name)}
on:keypress={()=>closePane(pane_name)}
tabindex="0">
<XMark class="w-8 h-8 p-1 text-gray-300 focus:outline-none dark:text-white"/>
</div>
<div style="height:44px; background-color: rgb(251, 251, 251);" class="p-1 flex items-center">
<Icon tabindex="-1" class="w-8 h-8 text-gray-400 dark:text-white focus:outline-none " variation="outline" color="currentColor" icon={pane_items[pane_name]} />
<span class="ml-2 inline-block text-gray-500 select-none dark:text-white">{$t(`doc.menu.items.${pane_name}.label`)}</span>
</div>

2
ng-app/src/locales/de.json
Unescape View File

@ -103,7 +103,7 @@
"open_with_pazzle": "Mit Pazzle öffnen", "open_with_pazzle": "Mit Pazzle öffnen",
"login_cancel": "Login abbrechen", "login_cancel": "Login abbrechen",
"open_with_mnemonic": "Mit Mnemonik öffnen", "open_with_mnemonic": "Mit Mnemonik öffnen",
"enter_mnemonic": "Enter your 12 words mnemonic.", "enter_mnemonic": "Enter your 12 words mnemonic",
"mnemonic_placeholder": "12 Wörter mit Leerzeichen getrennt", "mnemonic_placeholder": "12 Wörter mit Leerzeichen getrennt",
"select_emoji": "Wähle dein Bild für die Kategorie:<br />{category}", "select_emoji": "Wähle dein Bild für die Kategorie:<br />{category}",
"order_emojis": "Wähle die Bilder in der richtigen Reihenfolge", "order_emojis": "Wähle die Bilder in der richtigen Reihenfolge",

4
ng-app/src/locales/en.json
Unescape View File

@ -159,7 +159,7 @@
"pages": { "pages": {
"not_found": { "not_found": {
"title": "Page Not Found", "title": "Page Not Found",
"message": "The page you are looking for does not exist." "message": "The page you are looking for does not exist.<br/>It has probably not been implemented yet"
}, },
"user_panel": { "user_panel": {
"title": "User Panel", "title": "User Panel",
@ -265,7 +265,7 @@
"open_with_pazzle": "Open With Pazzle", "open_with_pazzle": "Open With Pazzle",
"login_cancel": "Cancel Login", "login_cancel": "Cancel Login",
"open_with_mnemonic": "Open with Mnemonic instead", "open_with_mnemonic": "Open with Mnemonic instead",
"enter_mnemonic": "Enter your 12 words mnemonic.", "enter_mnemonic": "Enter your 12 words mnemonic",
"mnemonic_placeholder": "12 words separated by spaces", "mnemonic_placeholder": "12 words separated by spaces",
"select_emoji": "Select your image for category:<br />{category}", "select_emoji": "Select your image for category:<br />{category}",
"order_emojis": "Select each image in the correct order", "order_emojis": "Select each image in the correct order",

17
ng-app/src/routes/NotFound.svelte
Unescape View File

@ -13,14 +13,27 @@
import { Alert } from "flowbite-svelte"; import { Alert } from "flowbite-svelte";
import CenteredLayout from "../lib/CenteredLayout.svelte"; import CenteredLayout from "../lib/CenteredLayout.svelte";
import { t } from "svelte-i18n"; import { t } from "svelte-i18n";
import {
ArrowLeft,
} from "svelte-heros-v2";
</script> </script>
<CenteredLayout displayFooter={true}> <CenteredLayout displayFooter={true}>
<div class="p-8"> <div class="p-8 flex flex-col justify-center">
<Alert color="red"> <Alert color="red">
<span class="font-medium">404</span> {$t("pages.not_found.title")} <span class="font-medium">404</span> {$t("pages.not_found.title")}
<br /> <br />
<span class="text-sm">{$t("pages.not_found.message")}</span> <span class="text-sm">{@html $t("pages.not_found.message")}</span>
</Alert> </Alert>
<button
class="mt-10 text-center justify-center align-center flex shrink items-center p-2 text-base font-normal text-white bg-primary-700 dark:bg-primary-400 clickable rounded-lg dark:text-white hover:bg-primary-500 dark:hover:bg-gray-700"
on:click={() => window.history.go(-1)}
>
<ArrowLeft
tabindex="-1"
class="w-7 h-7 text-white transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
<span class="ml-3">{$t("buttons.back")}</span>
</button>
</div> </div>
</CenteredLayout> </CenteredLayout>

2
ng-app/src/routes/WalletLogin.svelte
Unescape View File

@ -428,7 +428,7 @@
.wallet-box { .wallet-box {
width: 300px; width: 300px;
height: 300px; height: 300px;
background-color: white; background-color: #f6f6f6;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
} }

10
ng-app/src/styles.css
Unescape View File

@ -27,15 +27,13 @@
border-radius: 0; border-radius: 0;
} }
#menu-modal div { #menu-modal div {
padding: 5px; padding: 0;
} }
#menu-modal > button { #menu-modal > button {
margin-right: 10px; display: none;
} }
#menu-modal li { #menu-modal li {
margin: 0; margin: 5px;
margin-top: 5px;
margin-bottom: 5px;
} }
#menu-modal li.submenu { #menu-modal li.submenu {
padding-left: 30px; padding-left: 30px;
@ -140,7 +138,7 @@ li.clickable {
font-weight: 400; font-weight: 400;
color: #0f0f0f; color: #0f0f0f;
background-color: #f6f6f6; background-color: white;
font-synthesis: none; font-synthesis: none;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;

7
ng-app/src/tab.ts
Unescape View File

@ -227,9 +227,10 @@ export const cur_tab = writable({
}, },
folders_pane: false, folders_pane: false,
toc_pane: false, toc_pane: false,
right_pane: false, // "folders", "toc", "branches", "files", "history", "comments", "info", "chat", "mc" right_pane: "", // "branches", "files", "history", "comments", "info", "chat", "mc"
action: false, // "repost", "dm", "react", "author", "copy", "forward", "links", "qr", "download", "embed", "new_block", "notifs", "schema", "signature", "permissions", "settings", "print", "console", "source", "services", "dev", action: false, // "repost", "dm", "react", "author", "copy", "forward", "link", "qr", "download", "embed", "new_block", "notifs", "schema", "signature", "permissions", "settings", "print", "console", "source", "services", "dev",
show_modal_menu: false,
show_menu: false, show_menu: false,
}); });
@ -237,6 +238,7 @@ export const cur_tab = writable({
export const showMenu = () => { export const showMenu = () => {
cur_tab.update(ct => { cur_tab.update(ct => {
ct.show_menu = true; ct.show_menu = true;
ct.show_modal_menu = true;
return ct; return ct;
}); });
} }
@ -244,6 +246,7 @@ export const showMenu = () => {
export const hideMenu = () => { export const hideMenu = () => {
cur_tab.update(ct => { cur_tab.update(ct => {
ct.show_menu = false; ct.show_menu = false;
ct.show_modal_menu = false;
return ct; return ct;
}); });
} }

Write Preview
Loading…
Cancel
Save