From 00e39f0cc429c1c1746dd01d7b1b06ec25070309 Mon Sep 17 00:00:00 2001 From: Niko PLP Date: Thu, 1 Aug 2024 15:55:30 +0300 Subject: [PATCH] create document GUI --- .../{ListView.svelte => ContainerView.svelte} | 0 ng-app/src/classes.ts | 74 ++- ng-app/src/lib/Document.svelte | 2 +- ng-app/src/lib/FullLayout.svelte | 477 +++++++++++++++++- ng-app/src/lib/Home.svelte | 6 +- ng-app/src/lib/MobileBottomBarItem.svelte | 2 +- ng-app/src/lib/components/Message.svelte | 1 + ng-app/src/lib/components/NavBar.svelte | 2 +- ng-app/src/lib/icons/BrailleIcon.svelte | 3 + .../{components => icons}/BranchIcon.svelte | 0 ng-app/src/lib/icons/ChemistryIcon.svelte | 8 + .../src/lib/{ => icons}/DataClassIcon.svelte | 95 ++-- .../{components => icons}/DeviceIcon.svelte | 0 ng-app/src/lib/icons/GuitarIcon.svelte | 4 + ng-app/src/lib/icons/JsIcon.svelte | 3 + ng-app/src/lib/icons/JsonIcon.svelte | 4 + ng-app/src/lib/icons/JsonLdIcon.svelte | 10 + ng-app/src/lib/icons/MarkdownIcon.svelte | 6 + .../lib/{components => icons}/NavIcon.svelte | 2 +- ng-app/src/lib/icons/PdfIcon.svelte | 3 + ng-app/src/lib/icons/RdfIcon.svelte | 9 + ng-app/src/lib/icons/ReactIcon.svelte | 3 + ng-app/src/lib/icons/RustIcon.svelte | 3 + ng-app/src/lib/icons/SvelteIcon.svelte | 3 + ng-app/src/lib/icons/TsIcon.svelte | 3 + ng-app/src/lib/icons/TurtleIcon.svelte | 35 ++ ng-app/src/lib/icons/TxtIcon.svelte | 5 + ng-app/src/lib/{ => icons}/ZeraIcon.svelte | 15 +- ng-app/src/lib/panes/History.svelte | 2 +- ng-app/src/locales/de.json | 5 +- ng-app/src/locales/en.json | 34 +- ng-app/src/routes/AccountInfo.svelte | 2 +- ng-app/src/routes/WalletInfo.svelte | 2 +- ng-app/src/routes/WalletLoginQr.svelte | 2 +- ng-app/src/store.ts | 1 - ng-app/src/styles.css | 14 +- ng-app/src/tab.ts | 18 +- ng-app/src/zeras.ts | 38 +- 38 files changed, 765 insertions(+), 131 deletions(-) rename ng-app/src/apps/{ListView.svelte => ContainerView.svelte} (100%) create mode 100644 ng-app/src/lib/icons/BrailleIcon.svelte rename ng-app/src/lib/{components => icons}/BranchIcon.svelte (100%) create mode 100644 ng-app/src/lib/icons/ChemistryIcon.svelte rename ng-app/src/lib/{ => icons}/DataClassIcon.svelte (65%) rename ng-app/src/lib/{components => icons}/DeviceIcon.svelte (100%) create mode 100644 ng-app/src/lib/icons/GuitarIcon.svelte create mode 100644 ng-app/src/lib/icons/JsIcon.svelte create mode 100644 ng-app/src/lib/icons/JsonIcon.svelte create mode 100644 ng-app/src/lib/icons/JsonLdIcon.svelte create mode 100644 ng-app/src/lib/icons/MarkdownIcon.svelte rename ng-app/src/lib/{components => icons}/NavIcon.svelte (96%) create mode 100644 ng-app/src/lib/icons/PdfIcon.svelte create mode 100644 ng-app/src/lib/icons/RdfIcon.svelte create mode 100644 ng-app/src/lib/icons/ReactIcon.svelte create mode 100644 ng-app/src/lib/icons/RustIcon.svelte create mode 100644 ng-app/src/lib/icons/SvelteIcon.svelte create mode 100644 ng-app/src/lib/icons/TsIcon.svelte create mode 100644 ng-app/src/lib/icons/TurtleIcon.svelte create mode 100644 ng-app/src/lib/icons/TxtIcon.svelte rename ng-app/src/lib/{ => icons}/ZeraIcon.svelte (86%) diff --git a/ng-app/src/apps/ListView.svelte b/ng-app/src/apps/ContainerView.svelte similarity index 100% rename from ng-app/src/apps/ListView.svelte rename to ng-app/src/apps/ContainerView.svelte diff --git a/ng-app/src/classes.ts b/ng-app/src/classes.ts index 115b96e..526cb6a 100644 --- a/ng-app/src/classes.ts +++ b/ng-app/src/classes.ts @@ -98,6 +98,46 @@ export const official_classes = { "ng:compat": ["code:*","file:iana:text:javascript","file:iana:text:css","file:iana:text:html","file:iana:text:markdown", "file:iana:application:xml", "file:iana:application:yaml", "file:iana:text:xml", "file:iana:application:xhtml+xml"], }, + "code:js": { + "ng:crdt": "YText", + "ng:n": "JavaScript", // edited with CodeMirror, displayed with highlight.js + "ng:a": "A JavaScript Source Code file", + "ng:o": "n:g:z:pre", + "ng:w": "n:g:z:code_editor", + "ng:compat": ["file:iana:text:javascript"], + }, + "code:ts": { + "ng:crdt": "YText", + "ng:n": "TypeScript", // edited with CodeMirror, displayed with highlight.js + "ng:a": "A TypeScript Source Code file", + "ng:o": "n:g:z:pre", + "ng:w": "n:g:z:code_editor", + "ng:compat": ["file:iana:text:typescript"], + }, + "code:rust": { + "ng:crdt": "YText", + "ng:n": "Rust", // edited with CodeMirror, displayed with highlight.js + "ng:a": "A Rust Source Code file", + "ng:o": "n:g:z:pre", + "ng:w": "n:g:z:code_editor", + "ng:compat": [], + }, + "code:svelte": { + "ng:crdt": "YText", + "ng:n": "Svelte", // edited with CodeMirror, displayed with highlight.js + "ng:a": "A Svelte Source Code file", + "ng:o": "n:g:z:pre", + "ng:w": "n:g:z:code_editor", + "ng:compat": [], + }, + "code:react": { + "ng:crdt": "YText", + "ng:n": "React", // edited with CodeMirror, displayed with highlight.js + "ng:a": "A React Source Code file", + "ng:o": "n:g:z:pre", + "ng:w": "n:g:z:code_editor", + "ng:compat": [], + }, "app": { "ng:n": "Official App", "ng:a": "App provided by NextGraph platform", @@ -191,7 +231,7 @@ export const official_classes = { }, "contract": { "ng:crdt": "YText", - "ng:n": "Contract", // edited with CodeMirror, displayed with highlight.js + "ng:n": "Smart Contract", // edited with CodeMirror, displayed with highlight.js "ng:a": "Smart Contract with Rust or JS code", "ng:compat": ["code:rust", "file:iana:application:wasm", "code:javascript", "code:typescript", "file:iana:text:javascript", "file:iana:application:node"], }, @@ -254,16 +294,16 @@ export const official_classes = { }, "data:array": { "ng:crdt": "YArray", - "ng:n": "JSON Array", - "ng:a": "JSON Array CRDT", + "ng:n": "Array", + "ng:a": "Yjs Array CRDT", "ng:o": "n:g:z:json_viewer", // default viewer "ng:w": "n:g:z:json_editor", // default editor "ng:compat": ["file:iana:application:json", "code:json"], }, "data:map": { "ng:crdt": "YMap", - "ng:n": "JSON Map", - "ng:a": "JSON Map CRDT", + "ng:n": "Object", + "ng:a": "Yjs Map CRDT", "ng:o": "n:g:z:json_viewer", // default viewer "ng:w": "n:g:z:json_editor", // default editor "ng:compat": ["file:iana:application:json", "code:json"], @@ -285,7 +325,7 @@ export const official_classes = { "ng:crdt": "Graph", "ng:n": "Collection", "ng:a": "An ordered list of items", - "ng:o": "n:g:z:list", + "ng:o": "n:g:z:container", "ng:x": { "as": true, "rdf": true, @@ -296,7 +336,7 @@ export const official_classes = { "ng:crdt": "Graph", "ng:n": "Container", "ng:a": "An unordered set of items", - "ng:o": "n:g:z:list", + "ng:o": "n:g:z:container", "ng:x": { "rdf": true, "rdfs": true, @@ -386,7 +426,8 @@ export const official_classes = { "ng:crdt": "YArray", "ng:n": "Composition", "ng:a": "Compose several blocks into a single document", - "ng:o": "n:g:z:compose", + "ng:o": "n:g:z:compose:viewer", + "ng:w": "n:g:z:compose:editor", }, "doc:diagram:mermaid" : { "ng:crdt": "YText", @@ -534,7 +575,7 @@ export const official_classes = { }, "doc:odf": { //!!! becareful: AGPL "ng:crdt": "Graph", - "ng:n": "OpenDocumentFormat (ODF)", + "ng:n": "ODF", "ng:a": "upload and display an ODF file", "ng:compat": ["file:iana:application:vnd.oasis.opendocument*"] // https://webodf.org/ https://github.com/webodf/WebODF https://viewerjs.org/ }, @@ -553,7 +594,7 @@ export const official_classes = { }, "doc:music:abc": { //https://github.com/paulrosen/abcjs "ng:crdt": "YText", - "ng:n": "Music ABC", + "ng:n": "Musical Notation", "ng:a": "sheet music notation", "ng:compat": [] }, @@ -571,7 +612,7 @@ export const official_classes = { }, "doc:chemistry": { //GPL!! https://github.com/aeris-data/ChemDoodle/tree/master/ChemDoodleWeb-8.0.0 or https://github.com/aseevia/smiles-3d-vue "ng:crdt": "YText", - "ng:n": "Chemical", + "ng:n": "Molecules (SMILES)", "ng:a": "simplified molecular-input line-entry system (SMILES)", "ng:compat": ["file:iana:chemical:x-daylight-smiles"] // https://en.wikipedia.org/wiki/SYBYL_line_notation and http://fileformats.archiveteam.org/wiki/Chemical_data }, @@ -733,6 +774,11 @@ export const official_classes = { "ng:n": "ChatRoom", "ng:a": "A room for group chat", }, + "social:live": { + "ng:crdt": "Graph", + "ng:n": "Live", + "ng:a": "A live session of video or audio, with optional chat", + }, "prod:task": { "ng:crdt": "Graph", "ng:n": "Task", @@ -821,6 +867,12 @@ export const official_classes = { "ng:a": "CADmium", "ng:compat": [] }, + "prod:spreadsheet": { + "ng:crdt": "Automerge", + "ng:n": "Spreadsheet", + "ng:a": "Spreadsheet", + "ng:compat": [] + }, "prod:slides": { //https://github.com/hakimel/reveal.js //https://pandoc.org/MANUAL.html#slide-shows "ng:crdt": "Graph", diff --git a/ng-app/src/lib/Document.svelte b/ng-app/src/lib/Document.svelte index a733168..464cbcb 100644 --- a/ng-app/src/lib/Document.svelte +++ b/ng-app/src/lib/Document.svelte @@ -25,7 +25,7 @@ import { Button, Progressbar, Spinner, Alert } from "flowbite-svelte"; import { inview } from 'svelte-inview'; import { cur_tab, nav_bar, can_have_header, header_icon, header_title, header_description, cur_branch, set_header_in_view, edit_header_button, cur_app, load_official_app } from "../tab"; - import NavIcon from "./components/NavIcon.svelte"; + import NavIcon from "./icons/NavIcon.svelte"; export let nuri = ""; diff --git a/ng-app/src/lib/FullLayout.svelte b/ng-app/src/lib/FullLayout.svelte index 1459e5e..3e47ec3 100644 --- a/ng-app/src/lib/FullLayout.svelte +++ b/ng-app/src/lib/FullLayout.svelte @@ -17,27 +17,31 @@ SidebarWrapper, Modal, Toggle, + Radio, } from "flowbite-svelte"; import { link, location, push } from "svelte-spa-router"; import MobileBottomBarItem from "./MobileBottomBarItem.svelte"; import MobileBottomBar from "./MobileBottomBar.svelte"; import Pane from "./Pane.svelte"; + import DataClassIcon from "./icons/DataClassIcon.svelte"; + import MarkdownIcon from "./icons/MarkdownIcon.svelte"; + import TxtIcon from "./icons/TxtIcon.svelte"; // @ts-ignore import Logo from "./components/Logo.svelte"; import MenuItem from "./components/MenuItem.svelte"; import PaneHeader from "./components/PaneHeader.svelte"; - import BranchIcon from "./components/BranchIcon.svelte"; + import BranchIcon from "./icons/BranchIcon.svelte"; import Message from "./components/Message.svelte"; // @ts-ignore import { t } from "svelte-i18n"; import { onMount, onDestroy, tick } from "svelte"; - import { cur_tab, cur_viewer, cur_editor, toggle_graph_discrete, cur_tab_update, + import { cur_tab, cur_viewer, cur_editor, toggle_graph_discrete, cur_tab_update, get_class, 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, show_modal_menu } from "../tab"; + has_editor_chat, all_files_count, all_comments_count, nav_bar, save, hideMenu, show_modal_menu, show_modal_create, openModalCreate } from "../tab"; import { - active_session, redirect_after_login, toasts + active_session, redirect_after_login, toasts, check_has_camera } from "../store"; - import ZeraIcon from "./ZeraIcon.svelte"; + import ZeraIcon from "./icons/ZeraIcon.svelte"; import { Home, @@ -86,9 +90,14 @@ XMark, ArrowLeft, ArchiveBox, - CheckCircle, - XCircle, - ExclamationCircle, + Square3Stack3d, + UserGroup, + Briefcase, + DocumentArrowUp, + Language, + Camera, + VideoCamera, + Microphone, } from "svelte-heros-v2"; import NavBar from "./components/NavBar.svelte"; @@ -212,6 +221,137 @@ } } + let createMenu = { + social: undefined, + pro: undefined, + media: undefined, + chart: undefined, + viz: undefined, + diagram: undefined, + doc: undefined, + data: undefined, + code: undefined, + apps: undefined, + }; + async function scrollToCreateMenu(menu) { + await tick(); + if (createMenu[menu]) createMenu[menu].scrollIntoView(); + } + + let createMenuOpened = { + social: false, + pro: false, + media: false, + chart: false, + viz: false, + diagram: false, + doc: false, + data: false, + code: false, + apps: false + } + + const create_social_items = [ + "social:contact", + "social:chatroom", + "social:event", + "social:channel", + "social:scheduler", + "social:calendar", + "social:live" + ]; + + const create_pro_items = [ + "prod:project", + "prod:task", + "prod:issue", + "prod:form", + "prod:slides", + "prod:spreadsheet", + "contract", + "prod:question", + "prod:poll", + "prod:cad", + ]; + + const create_media_items = [ + "media:image", + "media:reel", + "media:video", + "media:album", + "media:audio", + "media:song", + "media:overlay", + ]; + + const create_chart_items = [ + "doc:chart:frappecharts", + "doc:chart:financial", + "doc:chart:apexcharts", + "doc:chart:billboard", + "doc:chart:echarts", + "doc:chart:chartjs", + ]; + + const create_viz_items = [ + "doc:viz:cytoscape", + "doc:viz:vega", + "doc:viz:vizzu", + "doc:viz:plotly", + "doc:viz:avail", + ]; + + const create_diagram_items = [ + "doc:diagram:mermaid", + "doc:diagram:drawio", + "doc:diagram:graphviz", + "doc:diagram:excalidraw", + "doc:diagram:gantt", + "doc:diagram:flowchart", + "doc:diagram:sequence", + "doc:diagram:markmap", + "doc:diagram:mymind", + "doc:diagram:jsmind", + ]; + + const create_doc_items = [ + "doc:pdf", + "doc:odf", + "file", + "doc:music:abc", + "doc:music:guitar", + "doc:maths", + "doc:chemistry", + "doc:ancientscript", + "doc:braille", + ]; + + const create_data_items = [ + "data:graph", + "data:container", + "data:collection", + "data:table", + "data:geomap", + "data:board", + "data:grid", + "data:json", + "data:array", + "data:map", + "data:xml", + ]; + + const create_code_items = [ + "code:rust", + "code:js", + "code:ts", + "code:svelte", + "code:react", + ]; + + const create_apps_items = [ + "app:n:xxx.xx.xx", + ]; + let top; let shareMenu; let toolsMenu; @@ -251,7 +391,7 @@ }); active_session.subscribe((as) => { if(!as) { - console.log($location); + //console.log($location); if ($location!="/user") { $redirect_after_login = $location; } @@ -346,6 +486,10 @@ // }); } + const closeModalCreate = () => { + $show_modal_create = false; + } + const closePaneInModal = () => { cur_tab_update(ct => { ct.show_menu = true; @@ -373,6 +517,7 @@ {n:"embed",i:CodeBracketSquare}, {n:"schema",i:ArrowsPointingOut}, {n:"signature",i:ShieldCheck}, + {n:"translations",i:Language}, {n:"services",i:Cube}, {n:"print",i:Printer}, {n:"console",i:CommandLine}, @@ -392,12 +537,48 @@ "mc":Sparkles, }; - const customEv = new CustomEvent('loaded', {}); + let destination = "store"; + + $: destination = $cur_tab.branch.id === "" ? "mc" : destination == "mc" ? "store" : destination; + + let config = { tabindex:"-1", + class:"w-7 h-7 text-gray-700 focus:outline-none dark:text-white" + }; + + const new_document = (class_name) => { + + closeModalCreate(); + } + + const new_group = () => { + + closeModalCreate(); + } + + const new_app = () => { + + closeModalCreate(); + } - async function addLoaded(node) { - await tick() - node.dispatchEvent(customEv) - } + const scan_qr = () => { + + closeModalCreate(); + } + + const take_picture = () => { + + closeModalCreate(); + } + + const record_reel = () => { + + closeModalCreate(); + } + + const record_voice = () => { + + closeModalCreate(); + } let asideClass = "w-48"; let spanClass = "flex-1 ml-3 whitespace-nowrap"; @@ -406,8 +587,7 @@ - -
-
    +
      {#if $cur_tab.branch.has_discrete}
    • @@ -682,6 +862,248 @@
      + +
      +
      + +
      + + + +
      +       + {#each $toasts as toast, i} {/each} @@ -710,7 +1132,12 @@ icon={MagnifyingGlass} /> - +
      + +
@@ -763,18 +1190,16 @@ /> - - +
  • +
    - - + {$t("pages.full_layout.create")} +
    +
    • + - + - + - + - + {remove_toast(toast.i);}} + on:keypress={()=>{}} > diff --git a/ng-app/src/lib/components/NavBar.svelte b/ng-app/src/lib/components/NavBar.svelte index dcee3aa..2a5564f 100644 --- a/ng-app/src/lib/components/NavBar.svelte +++ b/ng-app/src/lib/components/NavBar.svelte @@ -18,7 +18,7 @@ EllipsisVertical, ExclamationTriangle, } from "svelte-heros-v2"; - import NavIcon from "./NavIcon.svelte"; + import NavIcon from "../icons/NavIcon.svelte"; import { Popover, diff --git a/ng-app/src/lib/icons/BrailleIcon.svelte b/ng-app/src/lib/icons/BrailleIcon.svelte new file mode 100644 index 0000000..64f6a8c --- /dev/null +++ b/ng-app/src/lib/icons/BrailleIcon.svelte @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/ng-app/src/lib/components/BranchIcon.svelte b/ng-app/src/lib/icons/BranchIcon.svelte similarity index 100% rename from ng-app/src/lib/components/BranchIcon.svelte rename to ng-app/src/lib/icons/BranchIcon.svelte diff --git a/ng-app/src/lib/icons/ChemistryIcon.svelte b/ng-app/src/lib/icons/ChemistryIcon.svelte new file mode 100644 index 0000000..ed2d58a --- /dev/null +++ b/ng-app/src/lib/icons/ChemistryIcon.svelte @@ -0,0 +1,8 @@ + + + \ No newline at end of file diff --git a/ng-app/src/lib/DataClassIcon.svelte b/ng-app/src/lib/icons/DataClassIcon.svelte similarity index 65% rename from ng-app/src/lib/DataClassIcon.svelte rename to ng-app/src/lib/icons/DataClassIcon.svelte index e1d399e..1623423 100644 --- a/ng-app/src/lib/DataClassIcon.svelte +++ b/ng-app/src/lib/icons/DataClassIcon.svelte @@ -20,7 +20,7 @@ ViewfinderCircle, ArrowsPointingOut, Cube, - Briefcase, + ClipboardDocumentCheck, MagnifyingGlass, RocketLaunch, Sun, @@ -38,7 +38,7 @@ Photo, Film, RectangleStack, - Microphone, + SpeakerWave, MusicalNote, Ticket, CursorArrowRays, @@ -67,20 +67,41 @@ Cog, Square3Stack3d, ChatBubbleLeftRight, + Fire, + ReceiptPercent, + ArrowTrendingUp, + CursorArrowRipple, + VideoCamera, + Variable, + Language, + QueueList, } from "svelte-heros-v2"; + import PdfIcon from "./PdfIcon.svelte"; + import BrailleIcon from "./BrailleIcon.svelte"; + import ChemistryIcon from "./ChemistryIcon.svelte"; + import GuitarIcon from "./GuitarIcon.svelte"; + import JsonIcon from "./JsonIcon.svelte"; + import JsIcon from "./JsIcon.svelte"; + import TsIcon from "./TsIcon.svelte"; + import RustIcon from "./RustIcon.svelte"; + import SvelteIcon from "./SvelteIcon.svelte"; + import ReactIcon from "./ReactIcon.svelte"; + export let config = {}; export let dataClass: string; + export let color = "currentColor"; const exact_mapping = { page: Window, "app": Cog, "app:z": SquaresPlus, class: ViewfinderCircle, - contract: Briefcase, + contract: ClipboardDocumentCheck, "query:text": MagnifyingGlass, "query:web": MagnifyingGlass, "data:graph": Sun, + "data:json": JsonIcon, "data:table": TableCells, "data:collection": ListBullet, "data:container": Square3Stack3d, @@ -93,10 +114,10 @@ "plato/card": Clipboard, "plato/pad": Square2Stack, "media:image": Photo, - "media:reel": Film, + "media:reel": VideoCamera, "media:video": Film, "media:album": RectangleStack, - "media:audio": Microphone, + "media:audio": SpeakerWave, "media:song": MusicalNote, "media:subtitle": Ticket, "media:overlay": CursorArrowRays, @@ -108,6 +129,7 @@ "social:scheduler": Calendar, "social:reaction": Heart, "social:chatroom": ChatBubbleLeftRight, + "social:live": Fire, "prod:task": Stop, "prod:project": Flag, "prod:issue": HandRaised, @@ -117,8 +139,22 @@ "prod:slides": PresentationChartBar, "prod:question": QuestionMarkCircle, "prod:answer": CheckCircle, - "prod:poll": QuestionMarkCircle, + "prod:poll": CursorArrowRipple, "prod:vote": CheckCircle, + "prod:spreadsheet": ReceiptPercent, + "doc:compose": QueueList, + "doc:maths": Variable, + "doc:music:abc": MusicalNote, + "doc:pdf": PdfIcon, + "doc:braille": BrailleIcon, + "doc:ancientscript": Language, + "doc:chemistry": ChemistryIcon, + "doc:music:guitar": GuitarIcon, + "code:js": JsIcon, + "code:ts": TsIcon, + "code:rust": RustIcon, + "code:svelte": SvelteIcon, + "code:react": ReactIcon, }; const prefix_mapping = { @@ -132,7 +168,7 @@ "data:": CircleStack, "doc:diagram": DocumentChartBar, "doc:chart": ChartPie, - "doc:viz": ChartPie, + "doc:viz": ArrowTrendingUp, "doc:": ClipboardDocumentList, file: Document, }; @@ -147,47 +183,4 @@ }; - - + diff --git a/ng-app/src/lib/components/DeviceIcon.svelte b/ng-app/src/lib/icons/DeviceIcon.svelte similarity index 100% rename from ng-app/src/lib/components/DeviceIcon.svelte rename to ng-app/src/lib/icons/DeviceIcon.svelte diff --git a/ng-app/src/lib/icons/GuitarIcon.svelte b/ng-app/src/lib/icons/GuitarIcon.svelte new file mode 100644 index 0000000..7d0d0c7 --- /dev/null +++ b/ng-app/src/lib/icons/GuitarIcon.svelte @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/ng-app/src/lib/icons/JsIcon.svelte b/ng-app/src/lib/icons/JsIcon.svelte new file mode 100644 index 0000000..7086643 --- /dev/null +++ b/ng-app/src/lib/icons/JsIcon.svelte @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/ng-app/src/lib/icons/JsonIcon.svelte b/ng-app/src/lib/icons/JsonIcon.svelte new file mode 100644 index 0000000..8e09485 --- /dev/null +++ b/ng-app/src/lib/icons/JsonIcon.svelte @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/ng-app/src/lib/icons/JsonLdIcon.svelte b/ng-app/src/lib/icons/JsonLdIcon.svelte new file mode 100644 index 0000000..ef82176 --- /dev/null +++ b/ng-app/src/lib/icons/JsonLdIcon.svelte @@ -0,0 +1,10 @@ + + + \ No newline at end of file diff --git a/ng-app/src/lib/icons/MarkdownIcon.svelte b/ng-app/src/lib/icons/MarkdownIcon.svelte new file mode 100644 index 0000000..8cf3e36 --- /dev/null +++ b/ng-app/src/lib/icons/MarkdownIcon.svelte @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/ng-app/src/lib/components/NavIcon.svelte b/ng-app/src/lib/icons/NavIcon.svelte similarity index 96% rename from ng-app/src/lib/components/NavIcon.svelte rename to ng-app/src/lib/icons/NavIcon.svelte index 76d2694..3560840 100644 --- a/ng-app/src/lib/components/NavIcon.svelte +++ b/ng-app/src/lib/icons/NavIcon.svelte @@ -29,7 +29,7 @@ PaperAirplane, } from "svelte-heros-v2"; - import DataClassIcon from "../DataClassIcon.svelte"; + import DataClassIcon from "./DataClassIcon.svelte"; export let config = {}; export let img: string; diff --git a/ng-app/src/lib/icons/PdfIcon.svelte b/ng-app/src/lib/icons/PdfIcon.svelte new file mode 100644 index 0000000..8f3d803 --- /dev/null +++ b/ng-app/src/lib/icons/PdfIcon.svelte @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/ng-app/src/lib/icons/RdfIcon.svelte b/ng-app/src/lib/icons/RdfIcon.svelte new file mode 100644 index 0000000..0f2d194 --- /dev/null +++ b/ng-app/src/lib/icons/RdfIcon.svelte @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/ng-app/src/lib/icons/ReactIcon.svelte b/ng-app/src/lib/icons/ReactIcon.svelte new file mode 100644 index 0000000..e72806e --- /dev/null +++ b/ng-app/src/lib/icons/ReactIcon.svelte @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/ng-app/src/lib/icons/RustIcon.svelte b/ng-app/src/lib/icons/RustIcon.svelte new file mode 100644 index 0000000..ed4157b --- /dev/null +++ b/ng-app/src/lib/icons/RustIcon.svelte @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/ng-app/src/lib/icons/SvelteIcon.svelte b/ng-app/src/lib/icons/SvelteIcon.svelte new file mode 100644 index 0000000..8bf3358 --- /dev/null +++ b/ng-app/src/lib/icons/SvelteIcon.svelte @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/ng-app/src/lib/icons/TsIcon.svelte b/ng-app/src/lib/icons/TsIcon.svelte new file mode 100644 index 0000000..9e4b7a7 --- /dev/null +++ b/ng-app/src/lib/icons/TsIcon.svelte @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/ng-app/src/lib/icons/TurtleIcon.svelte b/ng-app/src/lib/icons/TurtleIcon.svelte new file mode 100644 index 0000000..9dbaf2a --- /dev/null +++ b/ng-app/src/lib/icons/TurtleIcon.svelte @@ -0,0 +1,35 @@ + + + + \ No newline at end of file diff --git a/ng-app/src/lib/icons/TxtIcon.svelte b/ng-app/src/lib/icons/TxtIcon.svelte new file mode 100644 index 0000000..01bf8b1 --- /dev/null +++ b/ng-app/src/lib/icons/TxtIcon.svelte @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/ng-app/src/lib/ZeraIcon.svelte b/ng-app/src/lib/icons/ZeraIcon.svelte similarity index 86% rename from ng-app/src/lib/ZeraIcon.svelte rename to ng-app/src/lib/icons/ZeraIcon.svelte index e834eca..0da0ae1 100644 --- a/ng-app/src/lib/ZeraIcon.svelte +++ b/ng-app/src/lib/icons/ZeraIcon.svelte @@ -70,17 +70,25 @@ CloudArrowDown, Beaker, Eye, + Square3Stack3d, + QueueList, } from "svelte-heros-v2"; + import JsonIcon from "./JsonIcon.svelte"; + import JsonLdIcon from "./JsonLdIcon.svelte"; + import RdfIcon from "./RdfIcon.svelte"; + import TurtleIcon from "./TurtleIcon.svelte"; export let config = {}; export let zera: string; const exact_mapping = { - json_ld_editor: TableCells, - json_editor: TableCells, - triple_editor: Share, + json_ld_editor: JsonLdIcon, + json_editor: JsonIcon, + triple_editor: RdfIcon, + turtle_viewer: TurtleIcon, rdf_viewer: CircleStack, graph_viewer: Sun, + compose: QueueList, sparql_query: RocketLaunch, sparnatural: CursorArrowRays, graphql: Cube, @@ -92,6 +100,7 @@ source: CodeBracket, post: DocumentText, pad: Square2Stack, + container: Square3Stack3d, card: Clipboard, gallery: RectangleStack, load_graph: CloudArrowUp, diff --git a/ng-app/src/lib/panes/History.svelte b/ng-app/src/lib/panes/History.svelte index de91bdf..0782396 100644 --- a/ng-app/src/lib/panes/History.svelte +++ b/ng-app/src/lib/panes/History.svelte @@ -29,7 +29,7 @@ Icon, ShieldCheck, } from "svelte-heros-v2"; - import BranchIcon from "../components/BranchIcon.svelte"; + import BranchIcon from "../icons/BranchIcon.svelte"; import { t } from "svelte-i18n"; import { Button, Progressbar, Spinner, Alert } from "flowbite-svelte"; diff --git a/ng-app/src/locales/de.json b/ng-app/src/locales/de.json index d7eee7b..fd434d2 100644 --- a/ng-app/src/locales/de.json +++ b/ng-app/src/locales/de.json @@ -25,7 +25,6 @@ "create_text_code": "Export: TextCode erstellen", "scan_qr.title": "Export: QR-Code scannen", "scan_qr.notes": "Scanne einen QR-Code vom Gerät, auf das du dich anmelden möchtest.", - "scan_qr.scan_btn": "QR-Code scannen", "scan_qr.scanner.title": "QR-Code Scannen für Wallet-Export", "scan_qr.scanner.loading": "QR-Scanner wird geladen", "scan_qr.syncing": "Wallet wird übertragen", @@ -246,7 +245,6 @@ "wallet_login_qr": { "title": "Wallet mit QR-Code importieren", "scan.description": "Um dein Wallet von einem anderen Gerät zu importieren, erzeuge dort einen Export-QR-Code. Gehe zum Erstellen zu
    Nutzerbereich > Wallet > Export: QR-Code erstellen.", - "scan.button": "QR-Code scannen", "scan.modal.title": "Export-QR-Code scannen", "gen.description": "Um dein Wallet von einem anderen Gerät zu importieren, kannst du hier auf diesem Gerät einen Import-QR-Code generieren und ihn dann mit deinem anderen Gerät scannen. Gehe auf dem anderen Gerät zu
    Nutzerbereich > Wallet > Export: QR scannen, um zu exportieren.", "gen.generated": "Scanne diesen QR-Code vom anderen Gerät aus.", @@ -274,7 +272,8 @@ "logout": "Abmelden", "login": "Anmelden", "start_over": "Neu beginnen", - "generate": "Generieren" + "generate": "Generieren", + "scan_qr": "QR-Code scannen" }, "errors": { "an_error_occurred": "Ein Fehler ist aufgetreten", diff --git a/ng-app/src/locales/en.json b/ng-app/src/locales/en.json index 3b111ee..8268238 100644 --- a/ng-app/src/locales/en.json +++ b/ng-app/src/locales/en.json @@ -11,6 +11,31 @@ "private_store": "Private Store", "group_store": "Group Store", "dialog_store": "Dialog Store", + "rich": "Post or Article", + "markdown": "Markdown", + "text": "Plain Text", + "social": "Social", + "group": "Group", + "pro": "Pro", + "media": "Media", + "chart": "Chart", + "viz": "Vizualitation", + "diagram": "Diagram", + "other": "Other file formats", + "data": "Data", + "code": "Code", + "apps": "Apps", + "new_app": "Create a new App", + "record_reel": "Record Reel", + "record_voice": "Record Audio", + "take_picture": "Take a picture", + "select_class": "Select a type of document to create", + "destination": { + "mc": "Keep in Magic Carpet", + "stream": "Send in current Stream", + "dialog": "Send in Dialog", + "store": "Save in current Store" + }, "not_found" : "Document not found", "not_found_details_online" : "The document could not be found locally on this device, nor on the broker.", "not_found_details_offline" : "The document could not be found locally on this device, and it seems like you are offline, so it could not be retrieved from any broker neither.

    If you are opening this document for the first time on this device, you have to be online now so the document can be fetched.

    We will try connecting and fetching it every 20 seconds.", @@ -165,6 +190,10 @@ "label": "Signature", "desc": "Obtain and verify the Signature of the Document to prove its authenticity. Or request a signature if there isn't any." }, + "translations": { + "label": "Translations", + "desc": "Manage the translations of your document in order to offer it in multiple languages" + }, "services": { "label": "Services", "desc": "See and invoke services available for this Document. Services can be read-only, or read-write" @@ -230,7 +259,6 @@ "scan_qr.no_camera": "If to the contrary, the other device does not have a camera, ", "scan_qr.other_has_camera": "If the other device where you want to import the Wallet, has a camera, then you can just click on the Back button and select Generate QR to export", "scan_qr.notes": "You will now scan the QR-Code that appears on the screen of the other device (the one you want to transfer your wallet to). You will be asked to allow the app to use your camera.", - "scan_qr.scan_btn": "Scan QR-Code ", "scan_qr.scanner.title": "Scan your QR-Code", "scan_qr.scanner.loading": "Loading scanner", "scan_qr.syncing": "Synchronizing wallet", @@ -450,7 +478,6 @@ "wallet_login_qr": { "title": "Import Wallet with QR-Code", "scan.description": "To import your wallet from another device, generate an export QR-Code there. On the other device, go to
    User Panel > Wallet > Generate QR to export.", - "scan.button": "Scan QR-Code", "scan.modal.title": "Scan Wallet QR-Code", "gen.button": "Generate QR-Code", "gen.description": "To import your wallet from another device, you have to generate a QR-Code here on this device, and then scan it with your other device (the one where your wallet is located for now).
    If your other device does not have a camera, then you have to use another method for importing your wallet here.", @@ -481,7 +508,8 @@ "back_to_homepage": "Go back to Homepage", "logout": "Logout", "login": "Login", - "start_over": "Start over" + "start_over": "Start over", + "scan_qr": "Scan QR-Code" }, "errors": { "an_error_occurred": "An error occurred", diff --git a/ng-app/src/routes/AccountInfo.svelte b/ng-app/src/routes/AccountInfo.svelte index fc4b452..5568ced 100644 --- a/ng-app/src/routes/AccountInfo.svelte +++ b/ng-app/src/routes/AccountInfo.svelte @@ -25,7 +25,7 @@ import { active_session, active_wallet, connections, display_error } from "../store"; import { default as ng } from "../api"; - import DeviceIcon from "../lib/components/DeviceIcon.svelte"; + import DeviceIcon from "../lib/icons/DeviceIcon.svelte"; let error; let nonActiveClass = diff --git a/ng-app/src/routes/WalletInfo.svelte b/ng-app/src/routes/WalletInfo.svelte index 08241ea..65e2965 100644 --- a/ng-app/src/routes/WalletInfo.svelte +++ b/ng-app/src/routes/WalletInfo.svelte @@ -458,7 +458,7 @@ disabled={false || !$online} class="w-full text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55" > - {$t("pages.wallet_info.scan_qr.scan_btn")} + {$t("buttons.scan_qr")} {:else if scanner_state === "scanned"} diff --git a/ng-app/src/routes/WalletLoginQr.svelte b/ng-app/src/routes/WalletLoginQr.svelte index 2ecac08..a177a5c 100644 --- a/ng-app/src/routes/WalletLoginQr.svelte +++ b/ng-app/src/routes/WalletLoginQr.svelte @@ -199,7 +199,7 @@ tabindex="-1" class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white" /> - {$t("pages.wallet_login_qr.scan.button")} + {$t("buttons.scan_qr")} {:else if login_method === "gen" && gen_state === "before_start"} diff --git a/ng-app/src/store.ts b/ng-app/src/store.ts index e30d451..6a1d77f 100644 --- a/ng-app/src/store.ts +++ b/ng-app/src/store.ts @@ -173,7 +173,6 @@ export const check_has_camera = async () => { has_camera = false; } else { - // If there is a camera, go to scan mode, else gen mode. try { const devices = await navigator.mediaDevices.enumerateDevices(); has_camera = diff --git a/ng-app/src/styles.css b/ng-app/src/styles.css index fa31030..ceb02b0 100644 --- a/ng-app/src/styles.css +++ b/ng-app/src/styles.css @@ -35,22 +35,22 @@ td.hljs { width: 320px !important; height: 100%; } -#menu-modal { +.menu-modal { border-radius: 0; } -#menu-modal div { +.menu-modal div { padding: 0; } -#menu-modal div.commit { +.menu-modal div.commit { padding: 8px; } -#menu-modal > button { +.menu-modal > button { display: none; } -#menu-modal li { +.menu-modal li { margin: 5px; } -#menu-modal li.submenu { +.menu-modal li.submenu { padding-left: 30px; } .toggle * { @@ -149,7 +149,7 @@ div[role="alert"] div { min-width: 320px; } -li.clickable { +.clickable { cursor: pointer; } diff --git a/ng-app/src/tab.ts b/ng-app/src/tab.ts index 7c518f5..c1e99fc 100644 --- a/ng-app/src/tab.ts +++ b/ng-app/src/tab.ts @@ -195,6 +195,12 @@ export const update_branch_display = (cur_tab) => { export const show_modal_menu = writable(false); +export const show_modal_create = writable(false); + +export const openModalCreate = () => { + show_modal_create.set(true); + } + export const in_memory_graph = writable(""); export const in_memory_discrete = writable(""); @@ -215,8 +221,15 @@ export const all_tabs = writable({ store_type: "", //"public" "protected", "private", "group", "dialog", readcap: "", // "r:" readcap of main is_member: "", // "r:" readcap of store root branch + can_edit: true, inner: "", // "w:l:" + stream: { // only if not a Dialog + notif: 0, + last: "", + nuri: "", + }, + // comes from main branch of store title: "", icon: "", @@ -272,11 +285,6 @@ export const all_tabs = writable({ icon: "", description: "", - stream: { // only if is_store - notif: 0, - last: "", - nuri: "", - }, live_editors: { }, diff --git a/ng-app/src/zeras.ts b/ng-app/src/zeras.ts index d4001a4..3fdfda7 100644 --- a/ng-app/src/zeras.ts +++ b/ng-app/src/zeras.ts @@ -129,7 +129,7 @@ export const official_apps = { "ng:n": "Turtle", "ng:a": "View the RDF Graph in Turtle format", "ng:c": "app", - "ng:u": "rdf_viewer",//favicon. can be a did:ng:j + "ng:u": "turtle_viewer",//favicon. can be a did:ng:j "ng:g": "n:g:z:rdf_viewer:turtle", "ng:b": "TurtleViewer", "ng:o": ["data:graph"], @@ -147,11 +147,11 @@ export const official_apps = { }, "n:g:z:rdf_viewer:json_ld": { // highlight.js JSON "ng:n": "JSON-LD Source", - "ng:a": "View the RDF Graph in N3 format", + "ng:a": "View the RDF Graph in JSON-LD format", "ng:c": "app", - "ng:u": "rdf_viewer",//favicon. can be a did:ng:j + "ng:u": "source",//favicon. can be a did:ng:j "ng:g": "n:g:z:rdf_viewer:json_ld", - "ng:b": "JsonLdViewer", + "ng:b": "JsonLdSourceViewer", "ng:o": ["data:graph"], "ng:w": [], }, @@ -326,6 +326,24 @@ export const official_apps = { "ng:o": ["post:md"], "ng:w": [], }, + "n:g:z:compose:editor": { + "ng:n": "Composition Editor", + "ng:a": "Compose several blocks into a single document", + "ng:c": "app", + "ng:u": "compose",//favicon. can be a did:ng:j + "ng:g": "n:g:z:compose:editor", + "ng:b": "ComposeEditor", + "ng:w": ["doc:compose"], + }, + "n:g:z:compose:viewer": { + "ng:n": "Composition", + "ng:a": "Composition of several blocks", + "ng:c": "app", + "ng:u": "compose",//favicon. can be a did:ng:j + "ng:g": "n:g:z:compose:viewer", + "ng:b": "ComposeViewer", + "ng:o": ["doc:compose"], + }, "n:g:z:post:text": { "ng:n": "Text", "ng:a": "View a Text Post", @@ -396,13 +414,13 @@ export const official_apps = { "ng:o": ["app:z"], "ng:w": ["app:z"], }, - "n:g:z:list": { - "ng:n": "List", - "ng:a": "See the content of document as a list", + "n:g:z:container": { + "ng:n": "Container", + "ng:a": "See the content of document as a Container", "ng:c": "app", - "ng:u": "list",//favicon. can be a did:ng:j - "ng:g": "n:g:z:list", - "ng:b": "ListView", + "ng:u": "container",//favicon. can be a did:ng:j + "ng:g": "n:g:z:container", + "ng:b": "ContainerView", "ng:o": ["data:collection","data:container"], "ng:w": ["data:collection","data:container"], },