From d2aa336bf2c771fefe8b2a72697b4a2ea1aa05e3 Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Sun, 12 Mar 2023 11:31:02 +0100
Subject: [PATCH] ui: New button to expand resolution text in a large modal

---
 .../src/lib/components/ResolutionModal.svelte | 26 +++++++++++++++++++
 .../routes/[theme]/[exercice]/+page.svelte    | 17 +++++++++---
 2 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 frontend/ui/src/lib/components/ResolutionModal.svelte

diff --git a/frontend/ui/src/lib/components/ResolutionModal.svelte b/frontend/ui/src/lib/components/ResolutionModal.svelte
new file mode 100644
index 00000000..4279e57c
--- /dev/null
+++ b/frontend/ui/src/lib/components/ResolutionModal.svelte
@@ -0,0 +1,26 @@
+<script>
+ import {
+     Icon,
+     Modal,
+     ModalBody,
+     ModalHeader
+ } from 'sveltestrap';
+ const toggle = () => (open = !open);
+
+ export let exercice = null;
+ export let open = false;
+ export let resolution;
+</script>
+
+<Modal isOpen={open} {toggle} size="xl">
+    <ModalHeader {toggle} class="bg-success text-light">
+        <Icon name="laptop-fill" />
+        Solution du défi
+        {#if exercice}
+            : {exercice.title}
+        {/if}
+    </ModalHeader>
+    <ModalBody>
+        {@html resolution}
+    </ModalBody>
+</Modal>
diff --git a/frontend/ui/src/routes/[theme]/[exercice]/+page.svelte b/frontend/ui/src/routes/[theme]/[exercice]/+page.svelte
index 5dea354c..045eb453 100644
--- a/frontend/ui/src/routes/[theme]/[exercice]/+page.svelte
+++ b/frontend/ui/src/routes/[theme]/[exercice]/+page.svelte
@@ -2,6 +2,7 @@
  import {
      Alert,
      Badge,
+     Button,
      Card,
      CardBody,
      CardHeader,
@@ -16,6 +17,7 @@
  import ExerciceHints from '$lib/components/ExerciceHints.svelte';
  import ExerciceSolved from '$lib/components/ExerciceSolved.svelte';
  import ExerciceVideo from '$lib/components/ExerciceVideo.svelte';
+ import ResolutionModal from '$lib/components/ResolutionModal.svelte';
 
  import { current_exercice } from '$lib/stores/exercices';
  import { my } from '$lib/stores/my';
@@ -23,6 +25,7 @@
  import { settings } from '$lib/stores/settings';
 
  let solved = {};
+ let openResolution = false;
 </script>
 
 {#if $current_exercice}
@@ -184,9 +187,17 @@
             {/if}
             {#if $my.exercices[$current_exercice.id].resolution || $my.exercices[$current_exercice.id].video_uri}
                 <Card class="border-success mb-2">
-                    <CardHeader class="bg-success text-light">
-                        <Icon name="laptop-fill" />
-                        Solution du défi
+                    <CardHeader class="bg-success text-light d-flex justify-content-between">
+                        <div>
+                            <Icon name="laptop-fill" />
+                            Solution du défi
+                        </div>
+                        {#if $my.exercices[$current_exercice.id].resolution}
+                            <Button color="success" size="sm" on:click={() => openResolution = true}>
+                                <Icon name="arrows-angle-expand" />
+                            </Button>
+                            <ResolutionModal exercice={$current_exercice} bind:open={openResolution} resolution={$my.exercices[$current_exercice.id].resolution} />
+                        {/if}
                     </CardHeader>
                     {#if $my.exercices[$current_exercice.id].resolution}
                         <CardBody>