Merge branch 'feat/2091-improve-visuals' into HEAD

front/src/components/channels/UploadForm.vue

@@ -33,7 +33,7 @@ interface Events {
 
 interface Props {
   channel: Channel | null,
-  filter: 'podcast' | 'music'
+  filter: 'podcast' | 'music' | undefined,
 }
 
 interface QuotaStatus {

front/src/components/ui/Pill.vue

@@ -2,22 +2,31 @@
 import { ref, onMounted } from 'vue'
 import { type ColorProps, type PastelProps, type VariantProps, type RaisedProps, color } from '~/composables/color'
 
-const input = ref()
+
+const input = ref<HTMLInputElement>();
 const emit = defineEmits<{
   click: [event: MouseEvent]
 }>()
 const handleClick = (event: MouseEvent) => {
   emit('click', event)
   if (model.value !== undefined) {
-    (input.value as HTMLInputElement).focus()
+    input.value?.focus();
   }
 }
 const props = defineProps<{ noUnderline?:true, autofocus? : boolean } &(PastelProps | ColorProps) & VariantProps & RaisedProps>()
 const model = defineModel<string>()
 
 onMounted(() => {
-  if (props.autofocus) input.value.focus()
+  if (props.autofocus) input.value?.focus();
 })
+
+const sanitize = () =>
+  model.value = model.value?.replace(',', '')?.trim()
+
+const sanitizeAndBlur = () =>
+  sanitize() && input.value?.blur()
+
+
 </script>
 
 <template>
@@ -40,8 +49,10 @@ onMounted(() => {
       ref="input"
       contenteditable
       class="pill-content"
-      @keydown.enter="(e) => (e.target as HTMLInputElement).blur()"
+      @keydown.enter.prevent="sanitizeAndBlur"
-      @blur="(e) => model = (e.target as HTMLInputElement).innerText.trim()"
+      @keyup.space.prevent="sanitizeAndBlur"
+      @keyup.,.prevent="sanitizeAndBlur"
+      @blur="sanitize"
     >
       {{ model }}
     </span>

front/src/composables/onKeyboardShortcut.ts

@@ -20,7 +20,7 @@ useEventListener(window, 'keydown', (event) => {
   if (!event.key) return
 
   const target = event.target as HTMLElement
-  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return
+  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) return
 
   current.add(event.key.toLowerCase())
 

front/src/ui/modals/Upload.vue

@@ -22,9 +22,9 @@ import LibraryWidget from '~/components/federation/LibraryWidget.vue'
 const { t } = useI18n()
 const store = useStore()
 
-onKeyboardShortcut('u', () => useModal('upload').toggle())
+const { isOpen, toggle } = useModal('upload')
 
-const isOpen = useModal('upload').isOpen
+onKeyboardShortcut('u', toggle)
 
 type UploadDestination =
   | { type: 'channel', channel?: Channel | null, filter?: 'podcast' | 'music' }
@@ -76,85 +76,74 @@ const channelUpload = ref()
 <template>
   <Modal
     v-model="isOpen"
+    :cancel="t('components.channels.UploadModal.button.cancel')"
     :title="modalTitle"
   >
-    <!-- Page content -->
-    <!-- Page 1 -->
 
-    <Layout
+  <!-- Page content -->
-      v-if="state.page === 'selectDestination'"
+  <!-- Page 1 -->
-      flex
+
-      style="place-content:center"
+  <Layout flex style="place-content:center" v-if="state.page === 'selectDestination'">
+    <Card
+      small
+      solid
+      title="Music"
+      icon="bi-upload"
+      @click="destinationSelected({ type: 'library' })"
     >
-      <Card
+      <template #image>
-        small
+        <i class="bi bi-headphones solid secondary raised" :class="$style.icon"></i>
-        solid
+      </template>
-        title="Music"
+      {{ "Host music you listen to" /* TODO: Translate */ }}
-        icon="bi-upload"
+    </Card>
-        @click="destinationSelected('library')"
+    <Card
-      >
+      small
-        <template #image>
+      title="Music"
-          <i
+      solid
-            class="bi bi-headphones solid secondary raised"
+      icon="bi-upload primary solid"
-            :class="$style.icon"
+      @click="destinationSelected({ type: 'channel', filter: 'music' })"
-          />
-        </template>
-        {{ "Host music you listen to" /* TODO: Translate */ }}
-      </Card>
-      <Card
-        small
-        title="Music"
-        solid
-        icon="bi-upload primary solid"
-        @click="destinationSelected('channel')"
-      >
-        <template #image>
-          <i
-            class="bi bi-music-note-beamed solid primary"
-            :class="$style.icon"
-          />
-        </template>
-        {{ "Publish music you make" /* TODO: Translate */ }}
-      </Card>
-      <Card
-        small
-        solid
-        title="Podcast"
-        icon="bi-upload primary solid"
-        @click="destinationSelected('podcast')"
-      >
-        <template #image>
-          <i
-            class="bi bi-mic-fill solid primary"
-            :class="$style.icon"
-          />
-        </template>
-        {{ "Publish podcasts you make" /* TODO: Translate */ }}
-      </Card>
-    </Layout>
-
-    <!-- Page 2 -->
-
-    <Layout
-      v-if="state.page === 'uploadFiles'"
-      stack
     >
-      <!--  -->
+      <template #image>
+        <i class="bi bi-music-note-beamed solid primary" :class="$style.icon"></i>
+      </template>
+      {{ "Publish music you make" /* TODO: Translate */ }}
+    </Card>
+    <Card
+      small
+      solid
+      title="Podcast"
+      icon="bi-upload primary solid"
+      @click="destinationSelected({ type: 'channel', filter: 'podcast' })"
+    >
+      <template #image>
+        <i class="bi bi-mic-fill solid primary" :class="$style.icon"></i>
+      </template>
+      {{ "Publish podcasts you make" /* TODO: Translate */ }}
+    </Card>
+  </Layout>
 
-      <ChannelUpload
+  <!-- Page 2 -->
-        v-if="state.uploadDestination === 'channel'"
+
-        ref="channelUpload"
+  <Layout stack v-if="state.page === 'uploadFiles'">
+
+    <!--  -->
+
+    <ChannelUpload
+      ref="channelUpload"
+      v-if="state.uploadDestination?.type === 'channel'"
+      :filter="state.uploadDestination.filter"
+      :channel="null"
       />
 
       <!--  -->
 
-      <!-- Privacy Slider -->
+    <!-- Privacy Slider -->
-      <LibraryUpload
+    <LibraryUpload
-        v-if="state.uploadDestination === 'library'"
+      v-if="state.uploadDestination?.type === 'library'"
-        v-model="privacyLevel"
+      v-model="privacyLevel">
-      />
+    </LibraryUpload>
-      {{ state.files }}
+    {{ state.files }}
-    </Layout>
+  </Layout>
 
     <template #actions>
       <Button
@@ -164,16 +153,7 @@ const channelUpload = ref()
       >
         {{ t('components.channels.UploadModal.button.previous') }}
       </Button>
-      <Spacer
+      <Spacer h grow />
-        h
-        grow
-      />
-      <Button
-        secondary
-        :on-click="() => { isOpen = false }"
-      >
-        {{ t('components.channels.UploadModal.button.cancel') }}
-      </Button>
       <Spacer size-16 />
       <Button
         v-if="state.page === 'uploadFiles'"