fix(ui): Modal toggles

2025-01-05 19:35:04 +01:00 · 2025-01-05 19:35:04 +01:00 · 4681e23a1e
parent 42805171fe
commit 4681e23a1e
5 changed files with 95 additions and 70 deletions
--- a/front/src/components/RemoteSearchForm.vue
+++ b/front/src/components/RemoteSearchForm.vue
@ -8,6 +8,13 @@ import { useStore } from '~/store'

 import axios from 'axios'

+import Layout from '~/components/ui/Layout.vue'
+import Button from '~/components/ui/Button.vue'
+import Input from '~/components/ui/Input.vue'
+import Alert from '~/components/ui/Alert.vue'
+import Tabs from '~/components/ui/Tabs.vue'
+import Tab from '~/components/ui/Tab.vue'
+
 import updateQueryString from '~/composables/updateQueryString'
 import useLogger from '~/composables/useLogger'

@ -165,40 +172,52 @@ watch(() => props.initialId, () => {
 </script>

 <template>
-  <div
+  <Tabs
    v-if="type === 'both'"
    class="two ui buttons"
  >
-    <button
-      class="ui left floated labeled icon button"
+    <Tab
+      icon="bi-feed"
+      title="t('components.RemoteSearchForm.button.rss')"
      @click.prevent="type = 'rss'"
    >
-      <i class="feed icon" />
-      {{ t('components.RemoteSearchForm.button.rss') }}
-    </button>
-    <div class="or" />
-    <button
-      class="ui right floated right labeled icon button"
+      {{ t('components.RemoteSearchForm.description.rss') }}
+      <Input
+        id="object-id"
+        v-model="id"
+        type="text"
+        name="object-id"
+        :placeholder="labels.fieldPlaceholder"
+        required
+      />
+    </Tab>
+    <Tab
+      icon="bi-globe"
+      title="t('components.RemoteSearchForm.button.fediverse')"
      @click.prevent="type = 'artists'"
    >
-      <i class="globe icon" />
-      {{ t('components.RemoteSearchForm.button.fediverse') }}
-    </button>
-  </div>
+      {{ t('components.RemoteSearchForm.description.fediverse') }}
+      <Input
+        id="object-id"
+        v-model="id"
+        type="text"
+        name="object-id"
+        :placeholder="labels.fieldPlaceholder"
+        required
+      />
+    </Tab>
+  </Tabs>
  <div v-else>
-    <form
+    <Layout form
      id="remote-search"
      :class="['ui', {loading: isLoading}, 'form']"
      @submit.stop.prevent="submit"
    >
-      <div
+      <Alert red
        v-if="errors.length > 0"
        role="alert"
-        class="ui negative message"
+        title="t('components.RemoteSearchForm.header.fetchFailed')"
      >
-        <h3 class="header">
-          {{ t('components.RemoteSearchForm.header.fetchFailed') }}
-        </h3>
        <ul class="list">
          <li
            v-for="(error, key) in errors"
@ -207,43 +226,21 @@ watch(() => props.initialId, () => {
            {{ error }}
          </li>
        </ul>
-      </div>
-      <div class="ui required field">
-        <label for="object-id">
-          {{ labels.fieldLabel }}
-        </label>
-        <p v-if="type === 'rss'">
-          {{ t('components.RemoteSearchForm.description.rss') }}
-        </p>
-        <p v-else-if="type === 'artists'">
-          {{ t('components.RemoteSearchForm.description.fediverse') }}
-        </p>
-        <input
-          id="object-id"
-          v-model="id"
-          type="text"
-          name="object-id"
-          :placeholder="labels.fieldPlaceholder"
-          required
-        >
-      </div>
-      <button
+      </Alert>
+      <Button
        v-if="showSubmit"
+        primary
        type="submit"
-        :class="['ui', 'primary', {loading: isLoading}, 'button']"
+        :class="{loading: isLoading}"
        :disabled="isLoading || !id || id.length === 0"
      >
        {{ t('components.RemoteSearchForm.button.search') }}
-      </button>
-    </form>
-    <div
+      </Button>
+    </Layout>
+    <Alert
      v-if="!isLoading && obj?.status === 'finished' && !redirectRoute"
-      role="alert"
-      class="ui warning message"
    >
-      <p>
-        {{ t('components.RemoteSearchForm.warning.unsupported') }}
-      </p>
-    </div>
+      {{ t('components.RemoteSearchForm.warning.unsupported') }}
+    </Alert>
  </div>
 </template>
--- a/front/src/components/library/Albums.vue
+++ b/front/src/components/library/Albums.vue
@ -218,7 +218,8 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
          solid
          small
          primary
-          :to="{name: 'content.index'}"
+          @click="store.commit('ui/toggleModal', 'upload')"
+          :aria-pressed="store.state.ui.modalsOpen.has('upload') || undefine"
        >
          <template #image>
            <i class="bi bi-upload" style="font-size: 100px; position: relative; top: 50px;" />
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@ -230,7 +230,8 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
          solid
          small
          primary
-          :to="{name: 'content.index'}"
+          @click="store.commit('ui/toggleModal', 'upload')"
+          :aria-pressed="store.state.ui.modalsOpen.has('upload') || undefine"
        >
          <template #image>
            <i class="bi bi-upload" style="font-size: 100px; position: relative; top: 50px;" />
--- a/front/src/components/library/Podcasts.vue
+++ b/front/src/components/library/Podcasts.vue
@ -16,6 +16,7 @@ import axios from 'axios'
 import TagsSelector from '~/components/library/TagsSelector.vue'
 import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
 import Modal from '~/components/ui/Modal.vue'
+import Card from '~/components/ui/Card.vue'
 import ArtistCard from '~/components/artist/Card.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 import Layout from '~/components/ui/Layout.vue'
@ -129,6 +130,17 @@ const labels = computed(() => ({
 }))

 const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value].sort((a, b) => a - b)))
+
+const modalName = 'subscribe'
+
+const isOpen = computed({
+  get() {
+    return store.state.ui.modalsOpen.has(modalName);
+  },
+  set(value) {
+    store.commit('ui/setModal', [modalName, value]);
+  }
+})
 </script>

 <template>
@ -213,22 +225,32 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
        {{ t('components.library.Podcasts.empty.noResults') }}
      </Alert>
      <Layout flex>
-        <Button
+        <Card
          v-if="store.state.auth.authenticated"
-          icon="bi-plus"
+          :title="t('components.library.Podcasts.button.feed')"
+          solid
+          small
          primary
-          @click.stop.prevent="showSubscribeModal = true"
+          @click="store.commit('ui/toggleModal', 'subscribe')"
+          :aria-pressed="store.state.ui.modalsOpen.has('subscribe') || undefine"
        >
-          {{ t('components.library.Podcasts.button.feed') }}
-        </Button>
-        <Button
-          primary
+          <template #image>
+            <i class="bi bi-plus" style="font-size: 100px; position: relative; top: 50px;" />
+          </template>
+        </Card>
+        <Card
          v-if="store.state.auth.authenticated"
-          icon="bi-upload"
-          :to="{name: 'content.index'}"
+          :title="t('components.library.Podcasts.button.channel')"
+          solid
+          small
+          primary
+          @click="store.commit('ui/toggleModal', 'upload')"
+          :aria-pressed="store.state.ui.modalsOpen.has('upload') || undefine"
        >
-        {{ t('components.library.Podcasts.button.channel') }}
-        </Button>
+          <template #image>
+            <i class="bi bi-upload" style="font-size: 100px; position: relative; top: 50px;" />
+          </template>
+        </Card>
      </Layout>
    </Layout>
    <Spacer grow />
@ -238,8 +260,8 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
      :pages="Math.ceil((result?.results.length || 0)/paginateBy)"
    />
  <Modal
-    v-model:show="showSubscribeModal"
-    title="t('components.library.Podcasts.modal.subscription.header')"
+    v-model="isOpen"
+    :title="t('components.library.Podcasts.modal.subscription.header')"
  >
    <div
      ref="modalContent"
@ -250,21 +272,25 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
        :show-submit="false"
        :standalone="false"
        :redirect="true"
-        @subscribed="showSubscribeModal = false; fetchData()"
+        @subscribed="isOpen = false; fetchData()"
      />
    </div>
-    <div class="actions">
-      <Button color="secondary">
+    <template #actions>
+      <Button
+        secondary
+        @click="isOpen = false"
+      >
        {{ t('components.library.Podcasts.button.cancel') }}
      </Button>
      <Button
+        primary
        form="remote-search"
        type="submit"
      >
        <i class="bookmark icon" />
        {{ t('components.library.Podcasts.button.subscribe') }}
      </Button>
-    </div>
+    </template>
  </Modal>

  </Layout>
--- a/front/src/ui/components/Sidebar.vue
+++ b/front/src/ui/components/Sidebar.vue
@ -67,7 +67,7 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
          :class="[$style.button]"
          ghost
          @click="store.commit('ui/toggleModal', 'upload')"
-          :aria-pressed="store.state.ui.modalsOpen.has('languages') || undefined"
+          :aria-pressed="store.state.ui.modalsOpen.has('upload') || undefined"
        >
          <Transition>
            <div