Reworked Party Edit (#17)

* Initializing Reworked_Party_Edit for empty Pull Request

* Rework party edit screen

* Fix order of inputs

src/components/PartyModal.vue

@@ -16,7 +16,7 @@ const modals = useModals();
  >
  <div
  v-show="parties.saved.length"
- class="bg-gray-50 dark:bg-gray-700 rounded shadow overflow-hidden border-b dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-800"
+ class="bg-gray-50 dark:bg-gray-700 rounded shadow overflow-hidden dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-800"
  >
  <PartyModalParty
  v-for="(party, partyIndex) of parties.saved"

src/components/PartyModalParty.vue

@@ -1,90 +1,118 @@
 <script setup>
 import { useParty } from "../stores/party";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import PlayerInputGroup from "./PlayerInputGroup.vue";
+import ToggleInput from "./ToggleInput.vue";
 
 const parties = useParty();
 
-defineProps({
+const props = defineProps({
  party: Object,
  index: Number,
 });
 
+const active = ref(
+ props.party.players.filter((player) => player.active).length
+);
+
+watch(
+ () => active.value,
+ (value) => {
+ if (value) {
+ parties.activateParty(props.index);
+ } else {
+ parties.deactivateParty(props.index);
+ }
+ }
+);
+
 const editing = ref(false);
+const editingMembership = ref(false);
 </script>
 
 <template>
  <div
- class="flex px-4 py-4 dark:border-gray-700 w-100 relative cursor-pointer group hover:bg-gray-100 dark:hover:bg-gray-600"
+ class=""
  :class="{
+ 'flex px-4 dark:border-gray-700 w-100 relative cursor-pointer group hover:bg-gray-100 dark:hover:bg-gray-600': true,
  'bg-gray-100 hover:bg-gray-50 dark:bg-gray-700': editing,
+ 'py-4': !editing,
  }"
  :title="party.name"
  :key="index"
  @click="editing = !editing"
  >
  <div
- class="grow flex flex-col justify-center mr-2 grow truncate overflow-ellipsis"
- >
- <span v-text="party.name"></span>
- </div>
- <div
- class="shrink-0 grid grid-cols-[30px_1fr] place-items-center h-full absolute inset-y-0 right-0"
+ class="grow flex justify-between mr-2 truncate overflow-ellipsis items-center"
  >
- <div
- class="w-full h-full bg-gradient-to-l from-gray-50 dark:from-gray-700 group-hover:from-gray-100 dark:group-hover:from-gray-600 to-transparent"
- ></div>
- <div
- class="px-3 bg-gray-50 group-hover:bg-gray-100 dark:bg-gray-700 dark:group-hover:bg-gray-600 min-w-4 h-full grid place-items-center"
- >
- <div
- @click.stop="parties.activateParty(index)"
- v-show="!party.players.filter((player) => player.active).length"
- class="h-full hidden place-items-center group-hover:grid text-gray-900 dark:text-gray-100"
- >
- <div>Make all active <i class="fa fa-users"></i></div>
- </div>
- <div
- @click.stop="parties.deactivateParty(index)"
- v-show="party.players.filter((player) => player.active).length"
- class="h-full hidden place-items-center group-hover:grid text-gray-900 dark:text-gray-100"
- >
- <div>Deactivate all <i class="fa fa-users-slash"></i></div>
- </div>
+ <div>
+ <span v-text="party.name"></span>
+ </div>
+ <div class="flex items-center space-x-2">
+ <span
+ v-text="
+ `${party.players.filter((player) => player.active).length} / ${
+ party.players.length
+ }`
+ "
+ ></span>
+ <i :class="{ 'fa fa-users': active, 'fa fa-users-slash': !active }"></i>
+ <ToggleInput
+ v-model="active"
+ @click.stop
+ darker="true"
+ class="p-1"
+ ></ToggleInput>
  </div>
  </div>
  </div>
 
  <div
  v-show="editing"
- class="border-x border-gray-50 dark:border-gray-700 dark:bg-gray-800 flex flex-col gap-x-1 gap-y-2 px-6 py-3"
+ class="border border-gray-50 dark:border-gray-700 dark:bg-gray-800 flex flex-col gap-y-2 gap-x-1 px-6 py-3 m-px rounded-b"
  >
  <div class="flex items-center">
- <input v-model="party.name" type="text" class="!mb-0 py-0.5 text-xl" />
- <div class="w-[30px] ml-2 flex justify-center">
- <i
+ <input v-show="editingMembership" v-model="party.name" type="text" class="!mb-0 py-0.5 text-xl" />
+ <div class="flex space-x-1 flex-grow self-stretch text-2xl" v-show="!editingMembership" v-text="party.name"></div>
+ <div class="ml-2 flex space-x-1 justify-center self-stretch">
+ <button
  @click.stop="parties.deleteParty(index)"
+ v-if="editingMembership"
  :title="'Delete ' + party.name"
- class="fa fa-trash hover:text-red-400 dark:hover:text-red-600 cursor-pointer"
- ></i>
+ type="button"
+ class="button-danger-outline-md"
+ >
+ <i class="fa fa-trash"></i>
+ </button>
+ <button
+ @click.stop="editingMembership = !editingMembership"
+ :title="'Edit membership of ' + party.name"
+ class="button-muted-outline-md"
+ >
+ <i class="fa fa-pencil"></i>
+ </button>
  </div>
  </div>
 
  <div
- class="text-gray-600 dark:text-gray-300 grid gap-2 grid-cols-[60px_1fr_1fr] md:grid-cols-[60px_1fr_50px_75px_150px_30px]"
+ class="grid gap-2 grid-cols-[1fr_1fr_60px] md:grid-cols-[1fr_50px_75px_150px_60px] -mb-1 mt-2"
  >
- <div>Active</div>
  <div>Name<span class="md:hidden">/Init.</span></div>
  <div>Level<span class="md:hidden">/HP</span></div>
  <div class="hidden md:block md:order-6"></div>
  <div class="hidden md:block">Initiative</div>
  <div class="hidden md:block">HP</div>
+ <div
+ class="text-end"
+ v-text="editingMembership ? 'Delete' : 'Active'"
+ ></div>
  </div>
 
  <PlayerInputGroup
  v-for="(player, playerIndex) of party.players"
  :player="player"
  :key="playerIndex"
+ :editing="editingMembership"
  @delete="parties.deletePlayer(index, playerIndex)"
  ></PlayerInputGroup>
 

src/components/PartyPanel.vue

@@ -13,8 +13,8 @@ const modals = useModals();
 <template>
  <div class="grid grid-cols-3 md:pr-2 md:grid-cols-5 pb-4 flex-col w-full">
  <div class="col-span-3 space-y-2">
- <div class="flex justify-between items-end">
- <div class="mb-1 text-gray-600 dark:text-gray-400">Party</div>
+ <div class="flex justify-between items-end items-center">
+ <div class="text-gray-600 dark:text-gray-400">Party</div>
 
  <a
  class="primary-link text-sm"

src/components/PlayerInputGroup.vue

@@ -8,24 +8,23 @@ defineProps({
  player: Object,
  playerIndex: Number,
  partyIndex: Number,
+ editing: Boolean,
 });
 </script>
 
 <template>
  <div
- class="grid gap-2 grid-cols-[60px_1fr_1fr] md:grid-cols-[60px_1fr_50px_75px_150px_30px]"
+ class="grid gap-2 grid-cols-[1fr_1fr_60px] md:grid-cols-[1fr_50px_75px_150px_60px]"
  >
- <ToggleInput v-model="player.active"></ToggleInput>
-
- <div class="order-2">
+ <div class="order-1">
  <input
  type="text"
  :id="'name_' + playerIndex"
  v-model="player.name"
  class="px-1 py-1 !mb-0 block w-full sm:text-sm rounded-md dark:text-gray-200 dark:bg-gray-700 dark:border-gray-600 focus:ring-emerald-500 focus:border-emerald-500 border-gray-300"
  />
  </div>
- <div class="order-3">
+ <div class="order-2">
  <input
  type="number"
  :id="'level_' + playerIndex"
@@ -34,7 +33,7 @@ defineProps({
  />
  </div>
 
- <div class="relative order-5 md:order-4 mb-2 md:mb-0">
+ <div class="relative order-4 md:order-3 mb-2 md:mb-0">
  <input
  type="number"
  :id="'initiativeMod_' + playerIndex"
@@ -72,7 +71,7 @@ defineProps({
  </div>
 
  <div
- class="order-6 md:order-5 justify-center md:justify-start flex -space-x-px mb-2 md:mb-0"
+ class="order-5 md:order-4 justify-center md:justify-start flex -space-x-px mb-2 md:mb-0"
  >
  <div class="w-1/2 flex-1 min-w-0">
  <input
@@ -100,12 +99,23 @@ defineProps({
  </div>
 
  <div
- @click="$emit('delete')"
- class="order-4 md:order-6 group cursor-pointer grid place-items-center mb-2 md:mb-0"
- >
- <i
- class="fa fa-times text-red-500 dark:text-red-500 group-hover:text-red-600 dark:group-hover:text-red-700"
- ></i>
+ class="order-3 md:order-6"
+ ><button
+ @click="$emit('delete')"
+ v-if="editing"
+ class="button-danger-outline-md self-stretch w-full flex justify-center items-center -mb-1"
+ >
+ <i
+ class="fa fa-user-xmark text-red-500 dark:text-red-500 group-hover:text-red-600 dark:group-hover:text-red-700"
+ ></i>
+ </button>
+
+ <ToggleInput
+ class="pt-[2px]"
+ v-if="!editing"
+ v-model="player.active"
+ end="true"
+ ></ToggleInput>
  </div>
  </div>
 </template>

src/components/ToggleInput.vue

@@ -1,22 +1,30 @@
 <script setup>
 import { ref } from "vue";
-const props = defineProps(["modelValue"]);
+const props = defineProps(["modelValue", "darker", "end"]);
 const emit = defineEmits(["update:modelValue"]);
 
 const input = ref(null);
+const end = ref(props.end);
 
 function toggleValue() {
  emit("update:modelValue", !props.modelValue);
 }
 </script>
 
 <template>
- <div class="order-1 flex justify-center md:justify-start">
+ <div
+ :class="{
+ 'order-1 flex justify-center': true,
+ 'md:justify-start': !end,
+ 'md:justify-end': end,
+ }"
+ >
  <button
  @click="toggleValue"
  type="button"
  :class="{
- 'bg-gray-200 dark:bg-gray-700': !modelValue,
+ 'bg-gray-200 dark:bg-gray-700': !modelValue && !darker,
+ 'bg-gray-400 dark:bg-gray-800': !modelValue && darker,
  'bg-emerald-600': modelValue,
  }"
  class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"

src/main.css

@@ -67,6 +67,12 @@ input[type=text] {
 .button-secondary-md {
  @apply inline-flex items-center px-4 py-2 border border-transparent dark:border-emerald-800 text-sm font-medium rounded-md text-emerald-700 bg-emerald-100 dark:bg-transparent dark:text-emerald-600 dark:hover:bg-emerald-800 dark:hover:text-white hover:bg-emerald-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500;
 }
+.button-muted-md {
+ @apply inline-flex items-center px-4 py-2 border border-transparent dark:border-gray-800 text-sm font-medium rounded-md text-gray-700 bg-gray-100 dark:bg-transparent dark:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-white hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500;
+}
+.button-muted-outline-md {
+ @apply inline-flex items-center px-4 py-2 border border-gray-500 dark:border-gray-600 text-sm font-medium rounded-md text-gray-500 bg-transparent dark:bg-transparent dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-400 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500;
+}
 .button-danger-md {
  @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-700 dark:bg-red-800 dark:hover:bg-red-700 disabled:bg-red-300 dark:disabled:bg-red-900 disabled:hover:bg-red-300 dark:disabled:hover:bg-red-900 disabled:opacity-70 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
 }
@@ -149,4 +155,4 @@ div.multiselect {
 
 .multiselect-caret {
  @apply dark:text-white;
-}
+}