Removed top bar on game space screen

holochain-apps · Dec 10, 2024 · a0e60dc · a0e60dc
1 parent 66130f9
commit a0e60dc
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 48 deletions.
diff --git a/ui/src/GameSpace/GameSpace.svelte b/ui/src/GameSpace/GameSpace.svelte
@@ -3,7 +3,9 @@
   import { derived, get } from 'svelte/store';
   import GearIcon from '~icons/fa6-solid/gear';
   import CubesIcon from '~icons/fa6-solid/cubes';
+  import ArrowLeftIcon from '~icons/fa6-solid/arrow-left';
   import PocketIcon from '~/shared/icons/PocketIcon.svelte';
+  import { goBack } from '~/lib/routes';
 
   import LayoutBar from '~/Layout/LayoutBar.svelte';
   import {
@@ -24,6 +26,7 @@
   import { tooltip } from '~/shared/tooltip';
   import { cloneDeep } from 'lodash';
   import { COLORS, colorSequence, uuid } from '~/lib/util';
+  import NameTitleInput from './ui/NameTitleInput.svelte';
 
   export let gameSpace: GameSpaceSyn;
   export let asAsset: boolean = false;
@@ -136,17 +139,25 @@
 </script>
 
 {#if $state}
-  {#if !asAsset}
-    <LayoutBar
-      onChangeTitle={handleNameChange}
-      canChangeTitle={$permissions.canEditSpace}
-      title={$state.name}
-      sub={$permissions.isArchived ? ' (view only)' : ''}
-    />
-  {/if}
   <div class="h-full flex flex-col">
     {#if !$permissions.isArchived}
-      <div class="bg-main-700 h-14 flex relative">
+      <div class="bg-main-400 h-12 pl1 flexcc relative">
+        {#if !asAsset}
+          <button
+            class="h10 w10 flexcc mr1 hover:bg-black/10 rounded-full text-white"
+            on:click={goBack}
+          >
+            <ArrowLeftIcon />
+          </button>
+          <button
+            on:click={handleAddToPocket}
+            use:tooltip={'Add to pocket'}
+            class="h-10 w-10 p2 mr1 flexcc hover:bg-black/10 rounded-full text-white"
+          >
+            <PocketIcon class="h-full w-full" />
+          </button>
+        {/if}
+
         <SidebarToggleButton current={sidebar} value="configurator" onClick={toggleSidebar}>
           <GearIcon />
         </SidebarToggleButton>
@@ -155,17 +166,7 @@
             <CubesIcon />
           </SidebarToggleButton>
         {/if}
-        {#if !asAsset}
-          <div class="flexcc px2">
-            <button
-              on:click={handleAddToPocket}
-              use:tooltip={'Add to pocket'}
-              class="h-10 w-10 p2 bg-main-400 b b-black/10 hover:bg-main-500 rounded-md text-white"
-            >
-              <PocketIcon class="h-full w-full" />
-            </button>
-          </div>
-        {/if}
+        <NameTitleInput value={$state.name} onChange={handleNameChange} />
 
         <PeopleBar
           pubKey={gameSpace.pubKey}

diff --git a/ui/src/GameSpace/topbar/PeopleBar.svelte b/ui/src/GameSpace/topbar/PeopleBar.svelte
@@ -23,28 +23,27 @@
   };
 </script>
 
-<div class="flex-grow flexce space-x-2 relative">
+<div class="flex-grow flexce space-x-1 relative">
   {#if canJoinGame}
     <button
-      class="bg-main-400 h10 px2 py1 rounded-md text-white hover:bg-main-500 b b-black/10"
+      class="bg-main-300 h9 px1.5 flexcc rounded-md text-white hover:filter-brightness-120 b b-black/10"
       on:click={() => {
         onJoin();
       }}>Join Game</button
     >
   {/if}
   {#if canLeaveGame}
     <button
-      class="bg-gray-400 h10 px2 py1 rounded-md text-white b b-black/10 hover:brightness-110"
+      class="bg-main-300 h9 px1.5 flexcc rounded-md text-white hover:filter-brightness-120 b b-black/10"
       on:click={() => {
         onLeave();
       }}>Leave Game</button
     >
   {/if}
   <PlayersSlots {pubKey} {playersSlots} {canJoinGame} onChange={onChangePlayersSlots} />
   <button
-    class={cx('relative h14 w14 flexcc b b-black/10 ', {
-      'bg-black/30 text-white': showingParticipants,
-      'bg-white/20 hover:bg-white/30': !showingParticipants,
+    class={cx('h12 w12 text-white flexcc hover:bg-black/10', {
+      'bg-black/30!': showingParticipants,
     })}
     on:click={toggleParticipants}
   >

diff --git a/ui/src/GameSpace/topbar/PlayersSlots.svelte b/ui/src/GameSpace/topbar/PlayersSlots.svelte
@@ -58,11 +58,11 @@
   }
 </script>
 
-<div class="flex space-x-2">
+<div class="flex space-x-1">
   {#each playersSlots as playerSlot, slot}
     <div class="group relative">
       <PlayerIcon
-        size={34}
+        size={30}
         {slot}
         class="cursor-grab"
         color={playerSlot.color}
@@ -95,33 +95,31 @@
               Player {slot + 1}
             {/if}
           </div>
-          {#if canJoinGame}
-            {#if playerSlot.pubKey}
-              <button
-                on:click={() => handleRemovePlayer(slot)}
-                class="text-xs bg-main-400 w-full rounded-md line-height-tight py1 text-white b b-black/10 hover:bg-main-500"
-                >Remove<br />Player</button
-              >
-            {:else}
-              <button
-                on:click={() => handleJoinSlot(slot)}
-                class="text-xs bg-main-400 w-full rounded-md line-height-tight py1 text-white b b-black/10 hover:bg-main-500"
-                >Join Here</button
-              >
-            {/if}
+          {#if playerSlot.pubKey}
+            <button
+              on:click={() => handleRemovePlayer(slot)}
+              class="text-xs bg-main-400 w-full rounded-md line-height-tight py1 text-white b b-black/10 hover:bg-main-500"
+              >Remove<br />Player</button
+            >
+          {:else if canJoinGame}
+            <button
+              on:click={() => handleJoinSlot(slot)}
+              class="text-xs bg-main-400 w-full rounded-md line-height-tight py1 text-white b b-black/10 hover:bg-main-500"
+              >Join Here</button
+            >
           {/if}
         </div>
       </div>
     </div>
   {/each}
 </div>
-<div class="w-16 h-8 flex-shrink-0 flex">
+<div class="w-16 h-8 flex-shrink-0 flexcc">
   <button
-    class="flexcc text-xs font-bold h-full w-1/2 bg-main-400 w-full rounded-l-md text-white b b-black/10 hover:bg-main-500"
+    class="bg-main-300 h9 px2 pt.5 flexcc rounded-l-md text-white hover:filter-brightness-120 b b-black/10"
     on:click={handleRemoveSlot}>-</button
   >
   <button
-    class="flexcc text-xs font-bold h-full w-1/2 bg-main-400 w-full rounded-r-md text-white b b-black/10 hover:bg-main-500"
+    class="bg-main-300 h9 px2 pt.5 flexcc rounded-r-md text-white hover:filter-brightness-120 b b-black/10"
     on:click={handleAddSlot}>+</button
   >
 </div>
diff --git a/ui/src/GameSpace/topbar/SidebarToggleButton.svelte b/ui/src/GameSpace/topbar/SidebarToggleButton.svelte
@@ -7,9 +7,8 @@
 </script>
 
 <button
-  class={cx('h14 w14 flexcc b b-black/10', {
-    'bg-black/30 text-white': current === value,
-    'bg-white/20': current !== value,
+  class={cx('h12 w12 text-white flexcc hover:bg-black/10', {
+    'bg-black/30!': current === value,
   })}
   on:click={() => onClick(value)}><slot /></button
 >
diff --git a/ui/src/GameSpace/ui/NameTitleInput.svelte b/ui/src/GameSpace/ui/NameTitleInput.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { cx } from '~/lib/util';
+
+  export let value: string;
+  export let onChange: (value: string) => void;
+
+  function handleTitleBlur(ev: { currentTarget: HTMLHeadingElement }) {
+    onChange(ev.currentTarget.innerText);
+  }
+
+  function handleTitleKeydown(ev: KeyboardEvent & { currentTarget: HTMLHeadingElement }) {
+    if (ev.key === 'Enter') {
+      ev.currentTarget.blur();
+    }
+  }
+</script>
+
+<h1
+  class={cx('font-bold text-2xl px1 ml1 h9 flexcs text-white rounded-md outline-main-500', {
+    'hocus:(bg-gray-100 text-black/80 text-shadow-none!)': true,
+  })}
+  on:keydown={handleTitleKeydown}
+  style="text-shadow: 0 1px 0 rgba(0,0,0,.5)"
+  contenteditable={true}
+  on:blur={handleTitleBlur}
+>
+  {value}
+</h1>