fix(front): [WIP] manageUploads

front/src/components/ui/Slider.vue

@@ -130,6 +130,7 @@ onMounted(() => {
   }
   .key {
     all: unset;
+    cursor: pointer;
     opacity: .7;
     &.current {
         opacity: 1;

front/src/views/auth/ManageUploads.vue

@@ -25,15 +25,13 @@ import usePage from '~/composables/navigation/usePage'
 import Layout from '~/components/ui/Layout.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Button from '~/components/ui/Button.vue'
+import Link from '~/components/ui/Link.vue'
 import Pill from '~/components/ui/Pill.vue'
 import Input from '~/components/ui/Input.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 import Table from '~/components/ui/Table.vue'
 import Slider from '~/components/ui/Slider.vue'
-import OptionsButton from "~/components/ui/button/Options.vue"
-import Popover from "~/components/ui/Popover.vue"
-import PopoverItem from "~/components/ui/popover/PopoverItem.vue"
 
 interface Props extends SmartSearchProps, OrderingProps {
   object: Actor
@@ -317,48 +315,20 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
 
       <!-- Edit the currently selected items -->
 
-      <Slider
-        v-model="globalPrivacyLevel"
-        :disabled="selectedItems.length === 0"
-        :options="options"
-        :label="`Privacy level (${ selectedItems.length } items)`"
-      />
-
-      <!-- <div class="field">
-        <label for="selected-visibility">{{ t('components.manage.library.UploadsTable.label.visibility') }}</label>
-        <select
-          id="selected-visibility"
-          class="ui dropdown"
-          :value="
-            selectedItems.map(({ privacy_level }) =>
-              privacy_level as 'me' | 'instance' | 'everyone' | ''
-            ).reduce((acc, item) =>
-              acc === item
-                ? acc
-                : ''
-          )"
-          @change="items = items.map(item => ({
-            ...item,
-            privacy_level:
-              item.selected && ($event.target as HTMLSelectElement).value !== ''
-              ? ($event.target as HTMLSelectElement).value as 'me' | 'instance' | 'everyone' | ''
-              : item.privacy_level
-          }))"
-        >
-          <option value="">
-            {{ t('components.manage.library.UploadsTable.option.all') }}
-          </option>
-          <option value="me">
-            {{ sharedLabels.fields.privacy_level.shortChoices.me }}
-          </option>
-          <option value="instance">
-            {{ sharedLabels.fields.privacy_level.shortChoices.instance }}
-          </option>
-          <option value="everyone">
-            {{ sharedLabels.fields.privacy_level.shortChoices.everyone }}
-          </option>
-        </select>
-      </div> -->
+      <Spacer />
+      <Spacer />
+      <div
+        class="default solid raised"
+        style="margin: -32px; padding: 32px;"
+      >
+        <Slider
+          v-model="globalPrivacyLevel"
+          :disabled="selectedItems.length === 0 ? true : undefined"
+          :options="options"
+          :label="`Privacy level (${ selectedItems.length } items)`"
+        />
+      </div>
+      <Spacer />
     </div>
   </div>
   <!-- TODO (wvffle): Check if :upload shouldn't be v-model:upload -->
@@ -373,15 +343,17 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
 
   <Table
     v-if="result"
-    :grid-template-columns="['auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto']"
+    :grid-template-columns="['auto', 'auto', 'auto', 'auto', 'auto', 'auto']"
   >
     <template #header>
       <!-- 0. select -->
-      <input
-        v-model="isAllSelected"
-        type="checkbox"
-        title="Select/Deselect all"
-      >
+      <b>
+        <input
+          v-model="isAllSelected"
+          type="checkbox"
+          title="Select/Deselect all"
+        >
+      </b>
       <!-- 1. filename -->
       <b>
         {{ t('components.manage.library.UploadsTable.table.upload.header.name') }}
@@ -409,10 +381,13 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
     >
       <!-- 0. select -->
 
-      <input
-        v-model="item.selected"
-        type="checkbox"
-      >
+      <b>
+        <input
+          v-model="item.selected"
+          type="checkbox"
+          title="Select"
+        >
+      </b>
 
       <!-- 1. filename -->