[WIP] replace modals and buttons with new ui components

2024-12-12 17:04:41 +01:00 · 2024-12-12 17:04:41 +01:00 · 5399f9be0e
parent e0fb7f0fc4
commit 5399f9be0e
6 changed files with 76 additions and 73 deletions
--- a/front/src/components/ShortcutsModal.vue
+++ b/front/src/components/ShortcutsModal.vue
@ -2,7 +2,7 @@
 import Modal from '~/components/ui/Modal.vue'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-
+import Button from '~/components/ui/Button.vue'

 const model = defineModel<boolean>()

@ -141,9 +141,9 @@ const player = computed(() => [
      </div>
    </section>
    <footer class="actions">
-      <button class="ui basic cancel button">
+      <Button color="secondary">
        {{ t('components.ShortcutsModal.button.close') }}
-      </button>
+      </Button>
    </footer>
  </Modal>
 </template>
--- a/front/src/components/admin/SignupFormBuilder.vue
+++ b/front/src/components/admin/SignupFormBuilder.vue
@ -2,6 +2,8 @@
 import type { Form } from '~/types'

 import SignupForm from '~/components/auth/SignupForm.vue'
+import Button from '~/components/ui/Button.vue'
+
 import { useVModel } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@ -65,18 +67,20 @@ const move = (idx: number, increment: number) => {
 <template>
  <div>
    <div class="ui top attached tabular menu">
-      <button
+      <Button
+        color="primary"
        :class="[{active: !isPreviewing}, 'item']"
        @click.stop.prevent="isPreviewing = false"
      >
-        {{ t('components.admin.SignupFormBuilder.button.edit') }}
-      </button>
-      <button
+        {{ t('components.admin.SignupFormBuilder.Button.edit') }}
+      </Button>
+      <Button
+        color="primary"
        :class="[{active: isPreviewing}, 'item']"
        @click.stop.prevent="isPreviewing = true"
      >
-        {{ t('components.admin.SignupFormBuilder.button.preview') }}
-      </button>
+        {{ t('components.admin.SignupFormBuilder.Button.preview') }}
+      </Button>
    </div>
    <div
      v-if="isPreviewing"
@ -187,13 +191,13 @@ const move = (idx: number, increment: number) => {
          </tbody>
        </table>
        <div class="ui hidden divider" />
-        <button
+        <Button
+          color = "primary"
          v-if="value.fields?.length < maxFields"
-          class="ui basic button"
          @click.stop.prevent="addField"
        >
          {{ t('components.admin.SignupFormBuilder.button.add') }}
-        </button>
+        </Button>
      </div>
    </div>
    <div class="ui hidden divider" />
--- a/front/src/components/library/Podcasts.vue
+++ b/front/src/components/library/Podcasts.vue
@ -3,8 +3,10 @@ import type { OrderingProps } from '~/composables/navigation/useOrdering'
 import type { Artist, BackendResponse } from '~/types'
 import type { RouteRecordName } from 'vue-router'
 import type { OrderingField } from '~/store/ui'
+import Popover from "~/components/ui/Popover.vue"
+import PopoverItem from "~/components/ui/popover/PopoverItem.vue"

-import { computed, ref, watch, onMounted } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRouteQuery } from '@vueuse/router'
 import { useI18n } from 'vue-i18n'
 import { syncRef } from '@vueuse/core'
@ -12,11 +14,10 @@ import { sortedUniq } from 'lodash-es'
 import { useStore } from '~/store'

 import axios from 'axios'
-import $ from 'jquery'

 import TagsSelector from '~/components/library/TagsSelector.vue'
 import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
-import SemanticModal from '~/components/semantic/Modal.vue'
+import Modal from '~/components/ui/Modal.vue'
 import ArtistCard from '~/components/artist/Card.vue'
 import Pagination from '~/components/vui/Pagination.vue'

@ -103,13 +104,13 @@ const search = () => {
  q.value = query.value
 }

+const artistOrdering = ref(false)
+
 onOrderingUpdate(() => {
  page.value = 1
  fetchData()
 })

-onMounted(() => $('.ui.dropdown').dropdown())
-
 const { t } = useI18n()
 const labels = computed(() => ({
  searchPlaceholder: t('components.library.Podcasts.placeholder.search'),
@ -157,19 +158,16 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
          </div>
          <div class="field">
            <label for="artist-ordering">{{ t('components.library.Podcasts.ordering.label') }}</label>
-            <select
-              id="artist-ordering"
-              v-model="ordering"
-              class="ui dropdown"
-            >
-              <option
+            <Popover v-model:open="artistOrdering">
+              <OptionsButton @click="artistOrdering = !artistOrdering" id="artist-ordering" v-model="ordering"/>
+              <PopoverItem
                v-for="(option, key) in orderingOptions"
                :key="key"
                :value="option[0]"
              >
                {{ sharedLabels.filters[option[1]] }}
-              </option>
-            </select>
+              </PopoverItem>
+            </Popover>
          </div>
          <div class="field">
            <label for="artist-ordering-direction">{{ t('components.library.Podcasts.ordering.direction.label') }}</label>
@ -259,14 +257,11 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
        />
      </div>
    </section>
-    <semantic-modal
+    <Modal
      v-model:show="showSubscribeModal"
-      class="tiny"
-      :fullscreen="false"
+      title="t('components.library.Podcasts.modal.subscription.header')"
+      <!-- class="tiny" TODO: check if necessary -->
    >
-      <h2 class="header">
-        {{ t('components.library.Podcasts.modal.subscription.header') }}
-      </h2>
      <div
        ref="modalContent"
        class="scrolling content"
@ -292,6 +287,6 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
          {{ t('components.library.Podcasts.button.subscribe') }}
        </button>
      </div>
-    </semantic-modal>
+    </Modal>
  </main>
 </template>
--- a/front/src/components/playlists/PlaylistModal.vue
+++ b/front/src/components/playlists/PlaylistModal.vue
@ -4,7 +4,7 @@ import type { BackendError, Playlist, APIErrorResponse } from '~/types'
 import { filter, sortBy, flow } from 'lodash-es'
 import axios from 'axios'
 import { useI18n } from 'vue-i18n'
-import SemanticModal from '~/components/semantic/Modal.vue'
+import Modal from '~/components/ui/Modal.vue'
 import PlaylistForm from '~/components/playlists/Form.vue'
 import useLogger from '~/composables/useLogger'
 import { useStore } from '~/store'
@ -78,14 +78,17 @@ const addToPlaylist = async (playlistId: number, allowDuplicates: boolean) => {
 }

 store.dispatch('playlists/fetchOwn')
+const playlistIsOpen = store.state.playlists.showModal
 </script>

 <template>
-  <semantic-modal
-    v-model:show="store.state.playlists.showModal"
+  <Modal
+    v-model=playlistIsOpen
+    title="t('components.playlists.PlaylistModal.header.addToPlaylist')"
  >
    <h4 class="header">
      <template v-if="track">
+      // TODO: Check subheader
        <h2 class="ui header">
          {{ t('components.playlists.PlaylistModal.header.addToPlaylist') }}
          <div class="ui sub header">
@ -241,5 +244,5 @@ store.dispatch('playlists/fetchOwn')
        {{ t('components.playlists.PlaylistModal.button.cancel') }}
      </button>
    </div>
-  </semantic-modal>
+  </Modal>
 </template>
--- a/front/src/ui/components/UploadModal.vue
+++ b/front/src/ui/components/UploadModal.vue
@ -2,8 +2,11 @@
 import { computed, ref, reactive } from 'vue'
 import { useUploadsStore } from '~/ui/stores/upload'
 import { bytesToHumanSize } from '~/ui/composables/bytes'
-import UploadList from '~/ui/components/UploadList.vue'
 import { useRouter } from 'vue-router'
+import UploadList from '~/ui/components/UploadList.vue'
+import Alert from '~/components/ui/Alert.vue'
+import Button from '~/components/ui/Button.vue'
+import Modal from '~/components/ui/Modal.vue'

 const uploads = useUploadsStore()

@ -54,6 +57,8 @@ const continueInBackground = () => {
  return router.push('/upload/running')
 }

+//TODO (whole file): Translations
+
 // Sorting
 const sortItems = reactive([
  { label: 'Upload time', value: 'upload-time' },
@ -67,25 +72,24 @@ const filterItems = reactive([
  { label: 'All', value: 'all' }
 ])
 const currentFilter = ref(filterItems[0])
-
 </script>

 <template>
-  <FwModal
+  <Modal
    v-model="libraryOpen"
    title="Upload music to library"
  >
-    <template #alert="{ closeAlert }">
-      <FwAlert>
+    <template #alert="closeAlert">
+      <Alert>
        Before uploading, please ensure your files are tagged properly.
        We recommend using Picard for that purpose.

        <template #actions>
-          <FwButton @click="closeAlert">
+          <Button @click="closeAlert">
            Got it
-          </FwButton>
+          </Button>
        </template>
-      </FwAlert>
+      </Alert>
    </template>

    <FwFileInput
@ -125,24 +129,25 @@ const currentFilter = ref(filterItems[0])
          v-model="serverPath"
          class="w-full mr-4"
        />
-        <FwButton color="secondary">
+        <Button color="secondary">
          Import
-        </FwButton>
+        </Button>
      </div>
    </template>

    <template #actions>
-      <FwButton
+      <Button
        color="secondary"
        @click="cancel"
      >
        Cancel
-      </FwButton>
-      <FwButton @click="continueInBackground">
+      </Button>
+      <Button @click="continueInBackground">
        {{ uploads.queue.length ? 'Continue in background' : 'Save and close' }}
-      </FwButton>
+        //TODO: Translations
+      </Button>
    </template>
-  </FwModal>
+  </Modal>
 </template>

 <style scoped lang="scss">
--- a/front/src/views/playlists/Detail.vue
+++ b/front/src/views/playlists/Detail.vue
@ -10,9 +10,10 @@ import axios from 'axios'

 import PlaylistEditor from '~/components/playlists/Editor.vue'
 import EmbedWizard from '~/components/audio/EmbedWizard.vue'
-import SemanticModal from '~/components/semantic/Modal.vue'
+import Modal from '~/components/ui/Modal.vue'
 import TrackTable from '~/components/audio/track/Table.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
+import Button from '~/components/ui/Button.vue'

 import PlaylistDropdown from '~/components/playlists/PlaylistDropdown.vue'

@ -113,24 +114,23 @@ const deletePlaylist = async () => {
            </play-button>
          </div>
          <div class="ui buttons">
-            <button
+            <Button
              v-if="store.state.auth.profile && playlist.actor.full_username === store.state.auth.fullUsername"
-              class="ui icon labeled button"
              @click="edit = !edit"
+              icon="bi-pencil"
            >
-              <i class="pencil icon" />
              <template v-if="edit">
                {{ t('views.playlists.Detail.button.stopEdit') }}
              </template>
              <template v-else>
                {{ t('views.playlists.Detail.button.edit') }}
              </template>
-            </button>
+            </Button>
          </div>
          <div class="ui buttons">
-            <button
+            <Button
              v-if="playlist.privacy_level === 'everyone' && playlist.is_playable"
-              class="ui icon labeled button"
+              icon="bi-code-slash"
              @click="showEmbedModal = !showEmbedModal"
            >
              <i class="code icon" />
@ -141,7 +141,6 @@ const deletePlaylist = async () => {
              class="ui labeled danger icon button"
              :action="deletePlaylist"
            >
-              <i class="trash icon" />
              {{ t('views.playlists.Detail.button.delete') }}
              <template #modal-header>
                <p>
@ -166,13 +165,11 @@ const deletePlaylist = async () => {
            />
          </div>
        </div>
-        <semantic-modal
+        <Modal
          v-if="playlist.privacy_level === 'everyone' && playlist.is_playable"
-          v-model:show="showEmbedModal"
+          v-model="showEmbedModal"
+          title="t('views.playlists.Detail.modal.embed.header')"
        >
-          <h4 class="header">
-            {{ t('views.playlists.Detail.modal.embed.header') }}
-          </h4>
          <div class="scrolling content">
            <div class="description">
              <embed-wizard
@ -181,12 +178,12 @@ const deletePlaylist = async () => {
              />
            </div>
          </div>
-          <div class="actions">
-            <button class="ui basic deny button">
+          <template #actions>
+            <Button variant="outline">
              {{ t('views.playlists.Detail.button.cancel') }}
-            </button>
-          </div>
-        </semantic-modal>
+            </Button>
+          </template>
+        </Modal>
      </div>
    </section>
    <section class="ui vertical stripe segment">
@ -214,13 +211,12 @@ const deletePlaylist = async () => {
          <i class="list icon" />
          {{ t('views.playlists.Detail.empty.noTracks') }}
        </div>
-        <button
-          class="ui success icon labeled button"
+        <Button
+          icon="bi-pencil"
          @click="edit = !edit"
        >
-          <i class="pencil icon" />
          {{ t('views.playlists.Detail.button.edit') }}
-        </button>
+        </Button>
      </div>
    </section>
  </main>