feat(lluis): add <Panel /> component (#1637)

kantord · Sep 26, 2021 · dd2f746 · dd2f746
1 parent b4b4b06
commit dd2f746
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 80 deletions.
diff --git a/apps/lluis/Panel.svelte b/apps/lluis/Panel.svelte
@@ -0,0 +1,54 @@
+<script lang="typescript">
+  export let background: "default" | "success" | "failure" | "info" = "default"
+</script>
+
+<div class="panel" data-background={background}>
+  <div class="content">
+    <slot name="left" />
+    <slot name="right" />
+  </div>
+</div>
+
+<style type="text/scss">
+  .panel {
+    position: fixed;
+    display: block;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    padding: var(--spacing-medium);
+
+    &[data-background="default"] {
+      background: var(--panel-background);
+    }
+
+    &[data-background="success"] {
+      background: var(--panel-background-success);
+      color: var(--panel-background);
+    }
+
+    &[data-background="failure"] {
+      background: var(--panel-background-failure);
+      color: var(--panel-background);
+    }
+
+    &[data-background="info"] {
+      background: var(--panel-background-info);
+      color: var(--panel-background);
+    }
+
+    .content {
+      display: flex;
+      max-width: 960px;
+      margin: auto;
+
+      :global( [slot="left"] ) {
+        flex-grow: 1;
+      }
+
+      :global( [slot="right"] ) {
+        flex-grow: 0;
+      }
+    }
+  }
+</style>
diff --git a/apps/web/src/components/ChallengePanel.svelte b/apps/web/src/components/ChallengePanel.svelte
@@ -1,5 +1,6 @@
 <script lang="typescript">
   import Button from "lluis/Button.svelte"
+  import Panel from "lluis/Panel.svelte"
 
   export let buttonText
   export let buttonAction = null
@@ -12,86 +13,47 @@
   export let skipAction = null
   export let skipAllAction = null
   export let skipAllVoice = null
+
+  let background: "default" | "success" | "failure" | "info" = (() => {
+      if (correct) {
+          return "success"
+      }
+      if (incorrect) {
+          return "failure"
+      }
+      if (typo) {
+          return "info"
+      }
+
+      return "default"
+  })()
 </script>
 
-<div class:correct class:incorrect class:typo class="panel is-primary">
-  <div class="panel-block">
-    <div class="control">
-      <div class="left">
-        {#if skipAction}
-          <Button on:click="{skipAction}">Skip</Button>
-        {/if}
-        {#if skipAllAction}
-          <Button on:click="{skipAllAction}">Finish early</Button>
-        {/if}
-        {#if skipAllVoice}
-          <Button on:click="{skipAllVoice}">Can't listen now</Button>
-        {/if}
-        {#if message}<b>{message}</b>{/if}
-        {#if messageDetail}
-          <p>{messageDetail}</p>
-        {/if}
-      </div>
-      <div class="right">
-        {#if buttonAction}
-          <Button style="primary" type="submit" on:click="{buttonAction}">
-            {buttonText}
-          </Button>
-        {/if}
-        {#if submit}
-          <Button style="primary" type="submit">Submit</Button>
-        {/if}
-      </div>
-    </div>
+<Panel background="{background}">
+  <div slot="left">
+    {#if skipAction}
+      <Button on:click="{skipAction}">Skip</Button>
+    {/if}
+    {#if skipAllAction}
+      <Button on:click="{skipAllAction}">Finish early</Button>
+    {/if}
+    {#if skipAllVoice}
+      <Button on:click="{skipAllVoice}">Can't listen now</Button>
+    {/if}
+    {#if message}<b>{message}</b>{/if}
+    {#if messageDetail}
+      <p>{messageDetail}</p>
+    {/if}
   </div>
-</div>
-
-<style type="text/scss">
-  @import "../variables";
-
-  .panel {
-    position: fixed;
-    min-height: 12vh;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    border-radius: 0;
-    background: $white;
-  }
-
-  .correct {
-    color: $text-invert;
-    background: $success;
-  }
 
-  .incorrect {
-    color: $text-invert;
-    background: $pink;
-  }
-
-  .typo {
-    color: $text-invert;
-    background: $yellow;
-  }
-  .left {
-    float: left;
-  }
-  .right {
-    float: right;
-  }
-
-  .panel-block {
-    color: inherit;
-    padding-top: 1em;
-    @include mobile {
-      margin: 0;
-    }
-    @include tablet-only {
-      margin: 0 24px;
-    }
-    @include desktop {
-      max-width: 920px;
-      margin: auto;
-    }
-  }
-</style>
+  <div slot="right">
+    {#if buttonAction}
+      <Button style="primary" type="submit" on:click="{buttonAction}">
+        {buttonText}
+      </Button>
+    {/if}
+    {#if submit}
+      <Button style="primary" type="submit">Submit</Button>
+    {/if}
+  </div>
+</Panel>
diff --git a/apps/web/src/mystyles.scss b/apps/web/src/mystyles.scss
@@ -39,7 +39,7 @@
 //@import "~bulma/sass/components/message.sass";
 //@import "~bulma/sass/components/modal.sass";
 // @import "~bulma/sass/components/navbar.sass";
-@import "~bulma/sass/components/panel.sass";
+// @import "~bulma/sass/components/panel.sass";
 //@import "~bulma/sass/components/list.sass";
 //@import "~bulma/sass/components/breadcrumb.sass";
 //@import "~bulma/sass/components/menu.sass";
@@ -89,4 +89,9 @@
     --navbar-padding-vertical: var(--spacing-small);
     --navbar-padding-horizontal: var(--spacing-medium);
     --navbar-logo-height: calc(var(--navbar-height) - 2 * var(--spacing-small));
+
+    --panel-background: white;
+    --panel-background-success: #84b83f;
+    --panel-background-failure: #ab2149;
+    --panel-background-info: #fcb141;
 }