Fixed #423, clarifying tile expand/collapse.

wordplaydev · Mar 30, 2024 · 362f995 · 362f995
1 parent a022dfb
commit 362f995
Show file tree

Hide file tree

Showing 13 changed files with 110 additions and 82 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ Dates are in `YYYY-MM-DD` format and versions are in [semantic versioning](http:
 ## Fixed
 
 -   [#422](https://github.com/wordplaydev/wordplay/issues/422): Improved performance of very long list, set, and map values.
+-   [#423](https://github.com/wordplaydev/wordplay/issues/423): Improved design of tile expand/collapse.
 
 ## 0.9.37 2024-03-16
 

diff --git a/src/components/evaluator/Timeline.svelte b/src/components/evaluator/Timeline.svelte
@@ -53,7 +53,7 @@
         dragging = false;
 
         const el = document.querySelector(
-            `.stream-input[data-inputindex="${currentReaction.stepIndex}"]`
+            `.stream-input[data-inputindex="${currentReaction.stepIndex}"]`,
         );
         // Move the timeline's scroll left such that the element is in the center.
         if (el && timeline) {
@@ -124,7 +124,7 @@
             if (view.dataset.inputindex !== undefined) {
                 const index = parseInt(view.dataset.inputindex);
                 const change = $evaluation.streams.find(
-                    (change) => change.stepIndex === index
+                    (change) => change.stepIndex === index,
                 );
                 if (change) evaluator.stepTo(change.stepIndex);
             }
@@ -144,7 +144,7 @@
                     (event.offsetX - view.offsetLeft) / view.offsetWidth;
                 const step = Math.min(
                     end,
-                    Math.max(0, Math.round(percent * (end - start) + start))
+                    Math.max(0, Math.round(percent * (end - start) + start)),
                 );
                 evaluator.stepTo(step);
             }
@@ -225,11 +225,11 @@
                         change.stream instanceof Key &&
                         change.value instanceof StructureValue
                             ? change.value.resolve(
-                                  change.value.type.inputs[1].names
+                                  change.value.type.inputs[1].names,
                               )
                             : change.stream instanceof Button
-                            ? change.value
-                            : undefined}
+                              ? change.value
+                              : undefined}
                     <!-- Show an emoji representing the cause of the reevaluation -->
                     <span
                         class={`event stream-input ${
@@ -289,6 +289,7 @@
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
+        align-items: center;
         gap: var(--wordplay-spacing);
         width: 100%;
     }

diff --git a/src/components/project/ProjectView.svelte b/src/components/project/ProjectView.svelte
@@ -119,6 +119,8 @@
     import Switch from '@components/widgets/Switch.svelte';
     import { withVariationSelector } from '../../unicode/emoji';
     import FullscreenIcon from './FullscreenIcon.svelte';
+    import Glyphs from '../../lore/Glyphs';
+    import Speech from '@components/lore/Speech.svelte';
 
     export let project: Project;
     export let original: Project | undefined = undefined;
@@ -1249,7 +1251,13 @@
         {#key tileIDSequence}
             <!-- Are all the tiles collapsed? Show a bit of feedback suggesting navigating down. -->
             {#if layout.tiles.every((tile) => tile.isCollapsed())}
-                <div class="empty">⬇</div>
+                <div class="empty">
+                    <Speech glyph={Glyphs.Function}>
+                        <svelte:fragment slot="content">
+                            {$locales.get((l) => l.ui.project.collapsed)} ⬇
+                        </svelte:fragment>
+                    </Speech>
+                </div>
             {:else}
                 <!-- Lay out each of the tiles according to its specification, in order if in free layout, but in layout order if not. -->
                 {#each $arrangement === Arrangement.Free ? layout.tiles : layout.getTilesInReadingOrder() as tile (tile.id)}
@@ -1529,7 +1537,7 @@
             <Separator />
             {#each project.getSources() as source, index}
                 {@const tile = layout.getTileWithID(Layout.getSourceID(index))}
-                {#if tile}
+                {#if tile && tile.isCollapsed()}
                     <!-- Mini source view output is visible when collapsed, or if its main, when output is collapsed. -->
                     <SourceTileToggle
                         {source}
@@ -1542,7 +1550,8 @@
                 <Button
                     uiid="addSource"
                     tip={$locales.get((l) => l.ui.project.button.addSource)}
-                    action={addSource}>+</Button
+                    action={addSource}
+                    >+<Emoji>{Glyphs.Program.symbols}</Emoji></Button
                 >{/if}
             {#if overwritten}
                 <span class="overwritten"
@@ -1551,11 +1560,13 @@
             {/if}
             <Separator />
             {#each layout.getNonSources() as tile}
-                <NonSourceTileToggle
-                    {project}
-                    {tile}
-                    on:toggle={() => toggleTile(tile)}
-                />
+                {#if tile.isCollapsed()}
+                    <NonSourceTileToggle
+                        {project}
+                        {tile}
+                        on:toggle={() => toggleTile(tile)}
+                    />
+                {/if}
             {/each}
             <ProjectLanguages {project} />
             <span class="help">
@@ -1690,12 +1701,12 @@
     .empty {
         width: 100%;
         height: 100%;
-        color: var(--wordplay-border-color);
-        font-size: 1000%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
+        padding: var(--wordplay-spacing);
+        background: var(--wordplay-alternating-color);
     }
 
     .annotated-editor {

diff --git a/src/components/project/TileView.svelte b/src/components/project/TileView.svelte
@@ -65,14 +65,14 @@
                 event.key === 'ArrowLeft'
                     ? -1
                     : event.key === 'ArrowRight'
-                    ? 1
-                    : 0;
+                      ? 1
+                      : 0;
             const vertical =
                 event.key === 'ArrowUp'
                     ? -1
                     : event.key === 'ArrowDown'
-                    ? 1
-                    : 0;
+                      ? 1
+                      : 0;
             if (horizontal !== 0)
                 dispatch('position', {
                     position: resize
@@ -81,14 +81,14 @@
                               top: tile.position.top,
                               width: Math.max(
                                   100,
-                                  tile.position.width + increment * horizontal
+                                  tile.position.width + increment * horizontal,
                               ),
                               height: tile.position.height,
                           }
                         : {
                               left: Math.max(
                                   0,
-                                  tile.position.left + increment * horizontal
+                                  tile.position.left + increment * horizontal,
                               ),
                               top: tile.position.top,
                               width: tile.position.width,
@@ -104,14 +104,14 @@
                               width: tile.position.width,
                               height: Math.max(
                                   100,
-                                  tile.position.height + increment * vertical
+                                  tile.position.height + increment * vertical,
                               ),
                           }
                         : {
                               left: tile.position.left,
                               top: Math.max(
                                   0,
-                                  tile.position.top + increment * vertical
+                                  tile.position.top + increment * vertical,
                               ),
                               width: tile.position.width,
                               height: tile.position.height,
@@ -151,20 +151,20 @@
                 containsLeft && containsTop
                     ? 'top-left'
                     : containsLeft && containsBottom
-                    ? 'bottom-left'
-                    : containsRight && containsTop
-                    ? 'top-right'
-                    : containsRight && containsBottom
-                    ? 'bottom-right'
-                    : containsLeft
-                    ? 'left'
-                    : containsRight
-                    ? 'right'
-                    : containsTop
-                    ? 'top'
-                    : containsBottom
-                    ? 'bottom'
-                    : null;
+                      ? 'bottom-left'
+                      : containsRight && containsTop
+                        ? 'top-right'
+                        : containsRight && containsBottom
+                          ? 'bottom-right'
+                          : containsLeft
+                            ? 'left'
+                            : containsRight
+                              ? 'right'
+                              : containsTop
+                                ? 'top'
+                                : containsBottom
+                                  ? 'bottom'
+                                  : null;
         }
     }
 
@@ -202,6 +202,23 @@
     >
         <!-- Render the toolbar -->
         <div class="header" style:color={foreground} style:fill={foreground}>
+            {#if !layout.isFullscreen()}
+                <Button
+                    tip={$locales.get((l) => l.ui.tile.button.collapse)}
+                    action={() => dispatch('mode', { mode: Mode.Collapsed })}
+                    >–</Button
+                >
+            {/if}
+            <Toggle
+                tips={$locales.get((l) => l.ui.tile.toggle.fullscreen)}
+                on={fullscreen}
+                toggle={() =>
+                    dispatch('fullscreen', {
+                        fullscreen: !fullscreen,
+                    })}
+            >
+                <FullscreenIcon />
+            </Toggle>
             <div class="name" class:source={tile.isSource()}>
                 {#if editable && tile.isSource()}
                     <Emoji>{Glyphs.Program.symbols}</Emoji>
@@ -210,42 +227,24 @@
                             .getSource(project)
                             ?.getPreferredName($locales.getLocales())}
                         description={$locales.get(
-                            (l) => l.ui.source.field.name.description
+                            (l) => l.ui.source.field.name.description,
                         )}
                         placeholder={$locales.get(
-                            (l) => l.ui.source.field.name.placeholder
+                            (l) => l.ui.source.field.name.placeholder,
                         )}
                         validator={(text) => isName(text)}
                         changed={handleRename}
                     />
                 {:else}
                     <Emoji>{TileSymbols[tile.kind]}</Emoji>{tile.getName(
                         project,
-                        $locales
+                        $locales,
                     )}
                 {/if}
                 <slot name="name" />
             </div>
             <div class="toolbar">
                 <slot name="extra" />
-                <Toggle
-                    tips={$locales.get((l) => l.ui.tile.toggle.fullscreen)}
-                    on={fullscreen}
-                    toggle={() =>
-                        dispatch('fullscreen', {
-                            fullscreen: !fullscreen,
-                        })}
-                >
-                    <FullscreenIcon />
-                </Toggle>
-                {#if !layout.isFullscreen()}
-                    <Button
-                        tip={$locales.get((l) => l.ui.tile.button.collapse)}
-                        action={() =>
-                            dispatch('mode', { mode: Mode.Collapsed })}
-                        >–</Button
-                    >
-                {/if}
             </div>
         </div>
         <!-- Render the content -->
@@ -285,18 +284,13 @@
         gap: var(--wordplay-spacing);
     }
 
-    /** Dim the header a bit so that they don't demand so much attention */
-    .header {
-        opacity: 0.8;
-    }
-
     .toolbar {
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
         align-items: center;
         min-width: max-content;
-        gap: calc(var(--wordplay-spacing));
+        gap: var(--wordplay-spacing);
     }
 
     .footer {
@@ -357,7 +351,11 @@
     }
 
     .tile.animated {
-        transition: left ease-out, top ease-out, width ease-out, height ease-out;
+        transition:
+            left ease-out,
+            top ease-out,
+            width ease-out,
+            height ease-out;
         transition-duration: calc(var(--animation-factor) * 200ms);
     }
 
@@ -404,10 +402,12 @@
         flex-wrap: nowrap;
         align-items: center;
         padding: var(--wordplay-spacing);
-        gap: var(--wordplay-spacing);
+        gap: calc(var(--wordplay-spacing) / 2);
         width: 100%;
         overflow-x: auto;
         flex-shrink: 0;
+        /** Dim the header a bit so that they don't demand so much attention */
+        opacity: 0.8;
     }
 
     .focus-indicator {

diff --git a/src/components/widgets/Button.svelte b/src/components/widgets/Button.svelte
@@ -80,7 +80,7 @@
         transform-origin: center;
         user-select: none;
         border: none;
-        padding: 0;
+        padding: calc(var(--wordplay-spacing) / 2);
         background: none;
         color: currentcolor;
         cursor: pointer;