Merge pull request #2 from mishankov/make-it-better

Make it better
mishankov · Feb 22, 2024 · c8a56f8 · c8a56f8
2 parents 0d6a593 + a3ec2f5
commit c8a56f8
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 38 deletions.
diff --git a/index.html b/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/lines.svg" />
     <link rel="stylesheet" href="/reset.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Svelte + TS</title>
+    <title>String Manipulator</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/public/lines.svg b/public/lines.svg
diff --git a/public/trash-can.svg b/public/trash-can.svg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.svelte b/src/App.svelte
@@ -3,20 +3,15 @@
   import ManipulationsPanel from "./ManipulationsPanel.svelte";
   
   import TextArea from "./components/TextArea.svelte";
+  import Heading from "./components/Heading.svelte";
 
-  let source = "Try me!\nPress \"Apply\""
+  let source = "Try me!\nResult will update automatically"
   let result = ""
   let manipulations: TManipulation[] = [{
     type: "replace",
-    from: "\\n", to: "--", id: "initial"
+    from: "\\n", to: " -- ", id: "initial"
   }]
 
-  function onApply(event: MouseEvent) {
-    if (event.type == "click") {
-      result = applyManipulations(source, manipulations)
-    }
-  }
-
   document.addEventListener("keydown", (event) => {
     if (event.ctrlKey && event.key === "Enter") {
       result = applyManipulations(source, manipulations)
@@ -28,26 +23,29 @@
 
 <div class="panels">
   <div class="panel">
-    <TextArea id="source" labelText="Source" bind:value={source} />
+    <Heading text="Source" />
+    <TextArea id="source" bind:value={source} />
   </div>
-  
+
   <div class="panel">
-    <TextArea id="result" labelText="Result" bind:value={result} />
+    <Heading text="Manipulations" />
+    <ManipulationsPanel bind:manipulations />
   </div>
 
   <div class="panel">
-    <ManipulationsPanel bind:manipulations />
-    <!-- <button on:click={onApply}>Apply</button> -->
+    <Heading text="Result" />
+    <TextArea id="result" bind:value={result} />
   </div>
-
 </div>
 
 
 <style>
   .panels {
-    display: flex;
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
     gap: 10px;
+
+    padding: 10px;
   }
 
   .panel {

diff --git a/src/ManipulationsPanel.svelte b/src/ManipulationsPanel.svelte
@@ -3,11 +3,9 @@
   import { ManipulationsList } from "./manipulations";
 
   export let manipulations: TManipulation[] = []
-  // $: console.log(manipulations)
 </script>
 
 <div class="panel">
-  <label for="manipulations">Manipulations</label>
   <ManipulationsList bind:manipulations/>
 </div>
 

diff --git a/src/app.css b/src/app.css
@@ -2,9 +2,10 @@ html {
   --bg-color-100: hsl(157, 100%, 90%);
   --border-color-100: hsl(157, 100%, 10%);
 
-  --text-color: #000
+  --text-color: hsl(157, 100%, 10%);
 }
 
 body {
   background-color: var(--bg-color-100);
+  font-family: monospace;
 }
diff --git a/src/components/Heading.svelte b/src/components/Heading.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  export let text: string
+</script>
+
+<h1>{text}</h1>
+
+<style>
+  h1 {
+    color: var(--text-color);
+    font-family: monospace;
+  }
+</style>
diff --git a/src/components/TextArea.svelte b/src/components/TextArea.svelte
@@ -13,13 +13,13 @@
 
 <style>
   textarea {
-    height: 500px;
-    width: 300px;
-    /* background-color: #FFF; */
+    width: 100%;
     color: var(--text-color);
     border-radius: 10px;
-    border: 1px solid var(--border-color-100);
+    border: 2px solid var(--border-color-100);
     padding: 10px;
+
+    font-family: monospace;
   }
 
   textarea:focus {

diff --git a/src/manipulations/components/Manipulation.svelte b/src/manipulations/components/Manipulation.svelte
@@ -9,7 +9,6 @@
   const dispatch = createEventDispatcher()
 
   function sendDeleteEvent() {
-    console.log(`Sendind delete event for ${manipulation.id}`)
     dispatch("delete", {
       id: manipulation.id
     })
@@ -34,18 +33,10 @@
   {:else if manipulation.type == "splitJoin"}
     <SplitJoin bind:splitString={manipulation.splitString} bind:joinString={manipulation.joinString} bind:innerManipulations={manipulation.innerManipulations}/>
   {/if}
-  <button class="delete" on:click={sendDeleteEvent}>X</button>
+  <button class="delete" on:click={sendDeleteEvent}><img src="trash-can.svg" alt="Delete"/></button>
 </div>
 
 <style>
-  :global(.manipulation) {
-    /* default colors */
-    --manipulation-bg-color: grey;
-    --manipulation-border-color: white;
-
-    
-  }
-
   div {
     display: flex;
     flex-direction: row;
@@ -66,6 +57,8 @@
     padding: 0px;
     padding-left: 5px;
     padding-right: 5px;
+
+    margin-left: auto;
   }
 
   .delete:hover {
@@ -77,4 +70,9 @@
     outline: none;
     background-color: var(--bg-color-100);
   }
+
+  .delete img {
+    min-width: 20px;
+    height: 20px;
+  }
 </style>
diff --git a/src/manipulations/components/ManipulationsList.svelte b/src/manipulations/components/ManipulationsList.svelte
@@ -9,7 +9,6 @@
       return manipulation.id !== event.detail.id
     })
   }
-  // $: console.log(manipulations)
 </script>
 
 <div id="manipulations" class="manipulations">

diff --git a/src/manipulations/components/SplitJoin.svelte b/src/manipulations/components/SplitJoin.svelte
@@ -36,7 +36,6 @@
     flex-direction: column;
     gap: 10px;
 
-    /* border: 2px solid black; */
     padding: 5px;
   }