[WIP] replace modals and buttons with new ui components

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>

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') }}
+        {{ t('components.admin.SignupFormBuilder.Button.edit') }}
-      </button>
+      </Button>
-      <button
+      <Button
+        color="primary"
         :class="[{active: isPreviewing}, 'item']"
         @click.stop.prevent="isPreviewing = true"
       >
-        {{ t('components.admin.SignupFormBuilder.button.preview') }}
+        {{ t('components.admin.SignupFormBuilder.Button.preview') }}
-      </button>
+      </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" />

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
+            <Popover v-model:open="artistOrdering">
-              id="artist-ordering"
+              <OptionsButton @click="artistOrdering = !artistOrdering" id="artist-ordering" v-model="ordering"/>
-              v-model="ordering"
+              <PopoverItem
-              class="ui dropdown"
-            >
-              <option
                 v-for="(option, key) in orderingOptions"
                 :key="key"
                 :value="option[0]"
               >
                 {{ sharedLabels.filters[option[1]] }}
-              </option>
+              </PopoverItem>
-            </select>
+            </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"
+      title="t('components.library.Podcasts.modal.subscription.header')"
-      :fullscreen="false"
+      <!-- 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>

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
+  <Modal
-    v-model:show="store.state.playlists.showModal"
+    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>

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 }">
+    <template #alert="closeAlert">
-      <FwAlert>
+      <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>
+      </Button>
-      <FwButton @click="continueInBackground">
+      <Button @click="continueInBackground">
         {{ uploads.queue.length ? 'Continue in background' : 'Save and close' }}
-      </FwButton>
+        //TODO: Translations
+      </Button>
     </template>
-  </FwModal>
+  </Modal>
 </template>
 
 <style scoped lang="scss">

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">
+          <template #actions>
-            <button class="ui basic deny button">
+            <Button variant="outline">
               {{ t('views.playlists.Detail.button.cancel') }}
-            </button>
+            </Button>
-          </div>
+          </template>
-        </semantic-modal>
+        </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
+        <Button
-          class="ui success icon labeled button"
+          icon="bi-pencil"
           @click="edit = !edit"
         >
-          <i class="pencil icon" />
           {{ t('views.playlists.Detail.button.edit') }}
-        </button>
+        </Button>
       </div>
     </section>
   </main>