Merge remote-tracking branch 'origin/master'

Author: AngelFQC

assets/css/scss/_exercise.scss

@@ -34,18 +34,14 @@
   font-weight: normal;
 }
 
+.question_options .checkbox,
 .question_options .radio {
-  min-height: 18px;
-  margin-left: 65px;
-}
-
-.question_options .checkbox {
-  margin-left: 65px;
+  margin-left: 5px;
 }
 
 .question_options .radio input[type="radio"], .question_options .checkbox input[type="checkbox"] {
   float: left;
-  margin-left: -25px;
+  margin-right: 5px;
 }
 
 .question_options input[type="text"] {

assets/css/scss/atoms/_checkbox.scss

@@ -94,3 +94,27 @@
 .p-checkbox-input:checked + .p-checkbox-box .p-checkbox-icon {
   @apply block;
 }
+.p-checkbox.p-component {
+  @apply relative inline-flex items-center mr-2;
+}
+.p-checkbox.p-component input[type="checkbox"] {
+  @apply absolute top-0 left-0 w-5 h-5 m-0 opacity-0 cursor-pointer;
+  z-index: 2;
+}
+.p-checkbox-box {
+  @apply w-5 h-5 flex items-center justify-center border border-gray-30 rounded;
+  z-index: 1;
+}
+.p-checkbox.p-component + label,
+.p-checkbox.p-component ~ label {
+  @apply ml-2;
+}
+.p-checkbox-box .p-checkbox-icon {
+  @apply hidden;
+}
+.p-checkbox.p-component input[type="checkbox"]:checked + .p-checkbox-box {
+  @apply bg-primary border-primary;
+}
+.p-checkbox.p-component input[type="checkbox"]:checked + .p-checkbox-box .p-checkbox-icon {
+  @apply block text-white;
+}

assets/vue/components/dropbox/DropboxLayout.vue

@@ -1,22 +1,25 @@
 <template>
   <div class="dbx">
-    <BaseToolbar class="dbx-toolbar" :showTopBorder="true">
+    <BaseToolbar
+      class="dbx-toolbar"
+      :showTopBorder="true"
+    >
       <template #start>
-        <h2 class="text-lg font-semibold m-0">Dropbox</h2>
+        <h2 class="text-lg font-semibold m-0">{{ t("Dropbox") }}</h2>
       </template>
 
       <template #end>
         <RouterLink
           class="nav-link"
-          :to="{ name:'DropboxListSent', params:$route.params, query:$route.query }"
+          :to="{ name: 'DropboxListReceived', params: $route.params, query: { ...$route.query, tab: 'received' } }"
         >
-          Sent
+          {{ t("Received") }}
         </RouterLink>
         <RouterLink
           class="nav-link"
-          :to="{ name:'DropboxListReceived', params:$route.params, query:$route.query }"
+          :to="{ name: 'DropboxListSent', params: $route.params, query: { ...$route.query, tab: 'sent' } }"
         >
-          Received
+          {{ t("Sent") }}
         </RouterLink>
       </template>
     </BaseToolbar>
@@ -29,7 +32,11 @@
 
 <script setup>
 import BaseToolbar from "../basecomponents/BaseToolbar.vue"
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
 </script>
+
 <style scoped>
 .dbx {
   width: 100%;

assets/vue/router/dropbox.js

@@ -7,7 +7,7 @@ export default {
   name: "dropbox",
   component: () => import("../components/dropbox/DropboxLayout.vue"),
   redirect: (to) => ({
-    name: "DropboxListSent",
+    name: "DropboxListReceived",
     params: to.params,
     query: to.query,
   }),

assets/vue/views/dropbox/DropboxCreate.vue

@@ -9,7 +9,7 @@
         </div>
       </template>
       <template #end>
-        <RouterLink :to="{ name: 'DropboxListSent', params: $route.params, query: $route.query }">
+        <RouterLink :to="returnRoute">
           <BaseButton
             type="black"
             icon="arrow-left"
@@ -130,7 +130,7 @@
             </div>
 
             <div class="flex justify-end gap-2 mt-6">
-              <RouterLink :to="{ name: 'DropboxListSent', params: $route.params, query: $route.query }">
+              <RouterLink :to="returnRoute">
                 <BaseButton
                   type="black"
                   icon="xmark"
@@ -178,6 +178,8 @@ import service from "../../services/dropbox"
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
+const returnRouteName = computed(() => (route.query?.from === "received" ? "DropboxListReceived" : "DropboxListSent"))
+const returnRoute = computed(() => ({ name: returnRouteName.value, params: route.params, query: route.query }))
 const uppy = shallowRef(null)
 
 const pickedFiles = ref([])
@@ -304,7 +306,7 @@ async function submit() {
     pickedFiles.value = []
 
     // Navigate back to list (sent)
-    router.push({ name: "DropboxListSent", params: route.params, query: route.query })
+    router.push(returnRoute.value)
   } catch (e) {
     console.error(e)
     alert(t("Upload failed"))