Added horizontal/vertical view toggle to the shell (#37)

frontend/src/components/icon.svelte

@@ -3,6 +3,7 @@
 
   export let name = '';
   export let spin = false;
+  export let rotation = 0;
 
   if (name === 'loading') {
     spin = true;
@@ -10,6 +11,19 @@
 </script>
 
 <style>
+  @keyframes spinning {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  svg {
+    transition: transform 0.25s;
+    will-change: transform;
+  }
+  svg.spinning {
+    animation: spinning 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  }
+
   :global(.field) svg {
     width: 13px;
     height: 13px;
@@ -21,15 +35,6 @@
     width: auto;
     vertical-align: bottom;
   }
-
-  @keyframes spinning {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-
-  svg.spinning {
-    animation: spinning 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  }
 </style>
 
 <svg
@@ -43,6 +48,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
   class:spinning={spin}
+  style:transform="rotate({rotation}deg)"
 >
   {@html icons[name] || ''}
 </svg>

frontend/src/lib/icons.json

@@ -40,5 +40,6 @@
   "!": "<path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01\"/>",
   "loading": "<path d=\"M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83\"/>",
   "shell": "<path d=\"m4 17 6-6-6-6M12 19h8\"/>",
-  "doc": "<path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"/><path d=\"M14 2v6h6M16 13H8M16 17H8M10 9H8\"/>"
+  "doc": "<path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"/><path d=\"M14 2v6h6M16 13H8M16 17H8M10 9H8\"/>",
+  "columns": "<path d=\"M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18\"/>"
 }

frontend/src/organisms/connection/shell.svelte

@@ -15,6 +15,7 @@
   const extensions = [ javascript() ];
   let script = '';
   let result = {};
+  let horizontal = false;
   let copySucceeded = false;
   let timeout;
   let busy = false;
@@ -72,6 +73,10 @@
     timeout = setTimeout(() => copySucceeded = false, 1500);
   }
 
+  function toggleView() {
+    horizontal = !horizontal;
+  }
+
   $: visible && editor.focus();
 
   onMount(() => {
@@ -94,7 +99,7 @@
   onDestroy(() => clearTimeout(timeout));
 </script>
 
-<div class="shell">
+<div class="shell" class:horizontal>
   <div class="overflow">
     <!-- svelte-ignore a11y-label-has-associated-control -->
     <label class="field">
@@ -130,6 +135,10 @@
       </button>
     </div>
 
+    <button class="button viewtoggle" title="Toggle horizontal/vertical view" on:click={toggleView}>
+      <Icon name="columns" rotation={horizontal ? 90 : 0} />
+    </button>
+
     {#key result}
       <div class="status flash-green">
         {#if result?.status}
@@ -145,6 +154,9 @@
     display: grid;
     grid-template: 1fr auto / 1fr 1fr;
   }
+  .shell.horizontal {
+    grid-template: 1fr 1fr auto / 1fr;
+  }
 
   .overflow {
     overflow: auto;
@@ -189,7 +201,10 @@
     align-items: center;
     grid-column: 1 / 3;
   }
-  .controls .status {
+  .controls .viewtoggle {
     margin-left: auto;
   }
+  .shell.horizontal .controls {
+    grid-column: 1;
+  }
 </style>