Merge pull request #21 from stillday/master

Version 1.0.0.0
League-of-Foundry-Developers · Mar 9, 2022 · 0d5b09c · 0d5b09c
2 parents 9d99fe1 + 84cafd5
commit 0d5b09c
Show file tree

Hide file tree

Showing 15 changed files with 442 additions and 258 deletions.
diff --git a/README.md b/README.md
@@ -1,34 +1,52 @@
+# Introductory
+True to the idea of providing translation from a Foundry VTT gaming system as simply as possible. In order to reach many users, there had to be an easy way to work together on the texts. For this reason this tool was created. It allows anyone who wants to work with it.
+
+---------------------------------
+## Information of the Project
+- [Basic idea](#introductory)
+- [DnD implementation](#foundryvtt-dnd5e-lang-de-ui)
+- [Customizable](#customizable)
+- [Developing](#developing)
+- [Question](#question)
+- 
+---------------------------------------------
+## foundryvtt-dnd5e-lang-de-ui
 
-# foundryvtt-dnd5e-lang-de-ui
 ![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/League-of-Foundry-Developers/foundryvtt-dnd5e-lang-de-ui?label=Latest+Release)
 ![GitHub Downloads All Releases](https://img.shields.io/github/downloads/League-of-Foundry-Developers/foundryvtt-dnd5e-lang-de-ui/total?label=Downloads+(Total))
 ![GitHub Downloads Release](https://img.shields.io/github/downloads/League-of-Foundry-Developers/foundryvtt-dnd5e-lang-de-ui/latest/total?label=Downloads+(Latest))
 ![GitHub Release Date](https://img.shields.io/github/release-date/League-of-Foundry-Developers/foundryvtt-dnd5e-lang-de-ui?label=Release+Date)
 
 Web translation UI for https://github.com/League-of-Foundry-Developers/foundryvtt-dnd5e-lang-de
 
-This is the Alpha version for the UI.
-
-This Project is createt with SvelteKit. 
+This is a Release Version.
 
 When you have interesst to help to Translate, write me on Discord. You find me under crash#7509
 
 You have interesst to help to Develop this Project, than fork please this Project and after you work, create Merge Request.
 
-### ToDo:
-- [x] use NeDB to load the Origin Datastore
-- [ ] include search Function
-- [x] only login user can write translation, with log
-- [x] rework design. Color, Responsive, ...
-- [x] include new interface
-- [ ] include international lang function, [example from git project](https://github.com/dreitzner/kit-i18n/blob/master/src/hooks.ts)
+-----------------------------------
+## Customizable
+The tool is easily adaptable to use it for other game modules.
+
+You find at the folder routes the compendium files. 
+At this files you find this code line:
 
+```bash
+<Translater file="dnd5e.monsters.json" dbFile="monsters.db"></Translater>
+```
+The Saving file is **file**
 
+The Databank file is **dbFile**
 
-WORK IN PROGRESS
+Change here the file names for the files. And you can load a other Databanks files.
 
+----------------------------------------
 ## Developing
 
+This project is wirting in [Svelte](https://svelte.dev/) with [Svelte Kit](https://kit.svelte.dev/)
+
+
 Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
 ```bash
@@ -47,3 +65,7 @@ npm run build
 ```
 
 > You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
+
+## Question
+You have Question, write me on Discord crash#7509
+or a Email <[email protected]>
diff --git a/src/app.css b/src/app.css
@@ -176,6 +176,11 @@ button:focus:not(:focus-visible) {
 	background: var(--rogue-ash); 
 }
 
+.header {
+	position: sticky;
+	top: 0;
+}
+
 /* btn styling */
 .btn {
 	border-radius: 5px;
@@ -459,7 +464,7 @@ footer {
 	padding: 10px 10px 0 10px;
 	background: var(--warlock-iris);
 	display: grid;
-	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-columns: 1fr 1fr 1fr 1fr;
 	column-gap: 10px;
 }
 
@@ -479,4 +484,66 @@ footer a:hover {
 	line-height: 1;
 }
 
+/* Filter Styling */
+.filter {
+	display: flex;
+	justify-content: space-evenly;
+	padding: 15px 0;
+	align-items: center;
+}
+
+.search-area-label {
+	font-weight: block;
+}
+
+.input-filter {
+	border: 1px bottom;
+    border-width: 0;
+    border-bottom: 1px solid;
+    border-radius: 0;
+    padding: 5px 2px;
+}
+
+.filter-btn-wp {	
+    border: 2px solid #000;
+	background-color: var(--monk-sky);
+	color: var(--pure-white);
+    position: relative;
+	font-weight: 700;
+	box-shadow: 1px -1px 2px 0px #000
+}
+
+.filter-btn-wp:hover {
+	background-color: var(--wizard-cobalt);
+}
+.filter-btn-checkbox {
+	position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+}
+
+.filter-btn-text {
+	background-color: transparent;	
+	padding: 7px;
+}
+
 
+.filter-btn-checkbox:checked + .filter-btn-text{
+	background-color: var(--nav-color);
+}
+
+/* screenreader class */
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0,0,0,0);
+	border: 0;
+  }
diff --git a/src/lib/Header/index.svelte b/src/lib/Header/index.svelte
@@ -5,7 +5,7 @@
 
 </script>
 
-<header>
+<header class="header">
 	<nav class="nav">
 		<div class="nav-burger-menu-wp">
 			<div class="nav-burger-menu-inner">

diff --git a/src/lib/components/FeeldNotEmpty.svelte b/src/lib/components/FeeldNotEmpty.svelte
@@ -0,0 +1,15 @@
+<script>
+    export let finalSave;
+    export let dontShow;
+    export let closeShow;
+</script>
+<div class="overlay">
+    <div class="dialog-wp">
+        Es ist schon Text vorhanden, wollen Sie diesen ändern?
+        <div class="dialog-btn-wp">
+            <button on:click={() => finalSave()} class="btn btn--spacing">ja</button>
+            <button on:click={() => dontShow()} class="btn btn--spacing btn--color-switch">nein</button>
+            <button on:click={() => closeShow()} class="btn btn--spacing btn--color-cancel">Abbrechen</button>
+        </div>
+    </div>
+</div>
diff --git a/src/lib/components/LoadingSpinner.svelte b/src/lib/components/LoadingSpinner.svelte
@@ -0,0 +1,31 @@
+<div class="overlay">
+    <div class="loading-spinner">
+        <div class="loading-spinner-inner">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255, 0); display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+            <g>
+            <circle cx="60" cy="50" r="4" fill="#e15b64">
+                <animate attributeName="cx" repeatCount="indefinite" dur="1s" values="95;35" keyTimes="0;1" begin="-0.67s"></animate>
+                <animate attributeName="fill-opacity" repeatCount="indefinite" dur="1s" values="0;1;1" keyTimes="0;0.2;1" begin="-0.67s"></animate>
+            </circle>
+            <circle cx="60" cy="50" r="4" fill="#e15b64">
+                <animate attributeName="cx" repeatCount="indefinite" dur="1s" values="95;35" keyTimes="0;1" begin="-0.33s"></animate>
+                <animate attributeName="fill-opacity" repeatCount="indefinite" dur="1s" values="0;1;1" keyTimes="0;0.2;1" begin="-0.33s"></animate>
+            </circle>
+            <circle cx="60" cy="50" r="4" fill="#e15b64">
+                <animate attributeName="cx" repeatCount="indefinite" dur="1s" values="95;35" keyTimes="0;1" begin="0s"></animate>
+                <animate attributeName="fill-opacity" repeatCount="indefinite" dur="1s" values="0;1;1" keyTimes="0;0.2;1" begin="0s"></animate>
+            </circle>
+            </g><g transform="translate(-15 0)">
+            <path d="M50 50L20 50A30 30 0 0 0 80 50Z" fill="#f8b26a" transform="rotate(90 50 50)"></path>
+            <path d="M50 50L20 50A30 30 0 0 0 80 50Z" fill="#f8b26a">
+                <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;45 50 50;0 50 50" keyTimes="0;0.5;1"></animateTransform>
+            </path>
+            <path d="M50 50L20 50A30 30 0 0 1 80 50Z" fill="#f8b26a">
+                <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;-45 50 50;0 50 50" keyTimes="0;0.5;1"></animateTransform>
+            </path>
+            </g>
+            <!-- [ldio] generated by https://loading.io/ --></svg>
+        </div>
+    </div>
+</div>
+
diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
@@ -0,0 +1,15 @@
+<script>
+    import { hideTranslated, searchQuerry } from "$lib/stores/filter";
+</script>
+
+<div class="filter">
+    <div class="search-area">
+        <label class="search-area-label" for="filter">Search:</label>
+        <input type="text" id="filter" class="input-filter" bind:value={$searchQuerry} />
+    </div>
+    <div class="filter-btn-wp">
+        <label class="filter-btn-label sr-only" for="emptyField">zu Übersetzende Texte</label>
+        <input type="checkbox" class="filter-btn-checkbox" id="emptyField" bind:checked="{$hideTranslated}" />
+        <div class="filter-btn-text">zu Übersetzende Texte</div>
+    </div>
+</div>
diff --git a/src/lib/components/YouWantCancel.svelte b/src/lib/components/YouWantCancel.svelte
@@ -0,0 +1,14 @@
+<script>
+    export let close;
+    export let cancel;
+</script>
+
+<div class="overlay">
+    <div class="dialog-wp">
+        Wollen Sie wirklich die Bearbeitung Abbrechen?
+        <div class="dialog-btn-wp">
+            <button on:click={() => close()} class="btn btn--spacing">Ja</button>
+            <button on:click={() => cancel()} class="btn btn--spacing btn--color-switch">Nein</button>
+        </div>
+    </div>
+</div>
diff --git a/src/lib/components/YouWantSave.svelte b/src/lib/components/YouWantSave.svelte
@@ -0,0 +1,16 @@
+<script>
+    export let saveClose;
+    export let notSave;
+    export let closeThis;
+</script>
+
+<div class="overlay">
+    <div class="dialog-wp">
+        Wollen Sie den Text speichern?
+        <div class="dialog-btn-wp">
+            <button on:click={() => saveClose()} class="btn btn--spacing">ja</button>
+            <button on:click={() => notSave()} class="btn btn--spacing btn--color-switch">nein</button>
+            <button on:click={() => closeThis()} class="btn btn--spacing btn--color-cancel">Abbrechen</button>
+        </div>
+    </div>
+</div>