[FEATURE] UI - update dataset list (#5684)

This PR includes a new layout for the list of datasets on the homepage

---------

Co-authored-by: Paco Aranda <[email protected]>
Co-authored-by: Damián Pumar <[email protected]>

Author: 3 people

argilla-frontend/CHANGELOG.md

@@ -18,11 +18,13 @@ These are the section headers that we use:
 
 ### Added
 
+- Add new dataset list page ([#5684](https://github.com/argilla-io/argilla/pull/5684))
 - Add a high-contrast theme & improvements for the forced-colors mode. ([#5661](https://github.com/argilla-io/argilla/pull/5661))
 - Add English as the default language and add language selector in the user settings page. ([#5690](https://github.com/argilla-io/argilla/pull/5690))
 
 ### Fixed
 
+- Fixed visible_options when updating question setting. ([#5716](https://github.com/argilla-io/argilla/pull/5716))
 - Fixed highlighting on same record ([#5693](https://github.com/argilla-io/argilla/pull/5693))
 
 ## [2.4.1](https://github.com/argilla-io/argilla/compare/v2.4.0...v2.4.1)

argilla-frontend/assets/icons/high-contrast-theme.js

@@ -1,36 +1,27 @@
 /*
- * Taken from https://icons.getbootstrap.com/icons/universal-access/
- * The MIT License (MIT)
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
  *
- * Copyright (c) 2019-2024 The Bootstrap Authors
-
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
-
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
-
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  */
 
 /* eslint-disable */
 var icon = require('vue-svgicon')
 icon.register({
-  //
   'high-contrast-theme': {
     width: 16,
     height: 16,
     viewBox: '0 0 16 16',
-    data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M9.5 1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0M6 5.5l-4.535-.442A.531.531 0 0 1 1.531 4H14.47a.531.531 0 0 1 .066 1.058L10 5.5V9l.452 6.42a.535.535 0 0 1-1.053.174L8.243 9.97c-.064-.252-.422-.252-.486 0l-1.156 5.624a.535.535 0 0 1-1.053-.174L6 9z" />'
+    data: '<path pid="0" clip-rule="evenodd" d="M9.5 1.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0M6 5.5l-4.535-.442A.531.531 0 011.531 4H14.47a.531.531 0 01.066 1.058L10 5.5V9l.452 6.42a.535.535 0 01-1.053.174L8.243 9.97c-.064-.252-.422-.252-.486 0l-1.156 5.624a.535.535 0 01-1.053-.174L6 9z"/>'
   }
 })

argilla-frontend/assets/icons/index.js

@@ -40,6 +40,7 @@ require('./pen')
 require('./plus')
 require('./progress')
 require('./question-answering')
+require('./records')
 require('./refresh')
 require('./reset')
 require('./row-last')
@@ -59,5 +60,6 @@ require('./text-to-image')
 require('./time')
 require('./trash-empty')
 require('./unavailable')
+require('./update')
 require('./validate')
 require('./weak-labeling')

argilla-frontend/assets/icons/records.js

@@ -0,0 +1,27 @@
+/*
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'records': {
+    width: 10,
+    height: 9,
+    viewBox: '0 0 10 9',
+    data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M9 .715H1.32a.3.3 0 00-.3.3v1.421H9.3v-1.42a.3.3 0 00-.3-.3zm-7.98 4.18v-1.76H9.3v1.76H1.02zm0 .7v1.42a.3.3 0 00.3.3H9a.3.3 0 00.3-.3v-1.42H1.02zm.3-5.58a1 1 0 00-1 1v6a1 1 0 001 1H9a1 1 0 001-1v-6a1 1 0 00-1-1H1.32z" _fill="#000"/>'
+  }
+})

argilla-frontend/assets/icons/update.js

@@ -0,0 +1,27 @@
+/*
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'update': {
+    width: 12,
+    height: 13,
+    viewBox: '0 0 12 13',
+    data: '<path pid="0" d="M6.692 5.456l-.105-1.203 1.434-.126a3.02 3.02 0 10.495 3.728l1.21.303a4.228 4.228 0 11-.795-4.83l-.148-1.692 1.204-.106.315 3.61-3.61.316z"/>'
+  }
+})

argilla-frontend/assets/scss/abstract/variables/_themes.scss

@@ -16,6 +16,7 @@
   --bg-solid-grey-1: hsl(0, 0%, 98%);
   --bg-solid-grey-2: hsl(0, 0%, 96%);
   --bg-solid-grey-3: hsl(0, 0%, 90%);
+  --bg-solid-grey-4: hsl(0, 0%, 90%);
   --bg-accent-grey-1: hsl(0, 0%, 100%);
   --bg-accent-grey-2: hsl(0, 0%, 100%);
   --bg-accent-grey-3: hsl(0, 0%, 98%);
@@ -95,6 +96,7 @@
   --bg-solid-grey-1: hsl(214, 12%, 10%);
   --bg-solid-grey-2: hsl(214, 12%, 14%);
   --bg-solid-grey-3: hsl(214, 12%, 16%);
+  --bg-solid-grey-4: hsl(214, 12%, 20%);
   --bg-accent-grey-1: hsl(214, 12%, 12%);
   --bg-accent-grey-2: hsl(214, 12%, 16%);
   --bg-accent-grey-3: hsl(214, 12%, 14%);
@@ -185,6 +187,7 @@
   --bg-solid-grey-1: hsl(0, 0%, 98%);
   --bg-solid-grey-2: hsl(0, 0%, 96%);
   --bg-solid-grey-3: hsl(0, 0%, 90%);
+  --bg-solid-grey-4: hsl(0, 0%, 90%);
   --bg-accent-grey-1: hsl(0, 0%, 100%);
   --bg-accent-grey-2: hsl(0, 0%, 100%);
   --bg-accent-grey-3: hsl(0, 0%, 98%);

argilla-frontend/assets/scss/abstract/variables/_variables.scss

@@ -39,17 +39,15 @@ $base-space-between-records: $base-space;
 $border-radius-s: 5px;
 $border-radius: 5px;
 $border-radius-m: 10px;
-$border-radius-l: 25px;
+$border-radius-l: 16px;
+$border-radius-xl: 25px;
 $border-radius-rounded: 50em;
 
 // Shadows
 //-----------
 $shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2);
 $shadow-100: 1px 1px 3px 0px rgba(0, 0, 0, 0.15);
 $shadow-200: 1px 2px 5px 2px rgba(0, 0, 0, 0.15);
-$shadow-300: 0 1px 3px 0 rgba(185, 185, 185, 0.4);
-$shadow-400: 0px 4px 10px rgba(0, 0, 0, 0.1);
-$shadow-500: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
 
 // Input size
 //-----------

argilla-frontend/components/base/base-action-tooltip/BaseActionTooltip.vue

@@ -65,6 +65,12 @@ export default {
   &.--right {
     left: 100%;
   }
+  &.--top {
+    bottom: 100%;
+  }
+  &.--bottom {
+    top: 100%;
+  }
   &__container {
     position: relative;
   }

argilla-frontend/components/base/base-badge/BaseBadge.vue

@@ -1,8 +1,10 @@
 <template>
-  <p v-if="!clickable" class="badge" v-html="text" />
-  <BaseButton @click="onClick" v-else class="badge --clickable">{{
-    text
-  }}</BaseButton>
+  <div class="badge">
+    <p v-if="!clickable" v-html="text" />
+    <BaseButton @click="onClick" v-else class="--clickable">{{
+      text
+    }}</BaseButton>
+  </div>
 </template>
 
 <script>
@@ -12,6 +14,14 @@ export default {
       type: String,
       required: true,
     },
+    fontSize: {
+      type: String,
+      default: "12px",
+    },
+    color: {
+      type: String,
+      default: "var(--fg-secondary)",
+    },
   },
   data() {
     return {
@@ -32,25 +42,26 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.badge.button,
 .badge {
-  display: flex;
-  align-items: center;
-  height: $base-space * 3;
-  width: fit-content;
-  padding: 0.8em;
-  border: 1px solid var(--fg-tertiary);
-  border-radius: $border-radius-rounded;
-  margin: 0;
-  color: var(--fg-secondary);
-  @include font-size(12px);
-  @include line-height(12px);
-  &.--clickable {
-    cursor: pointer;
-    background-color: var(--bg-opacity-4);
-    border: unset;
-    &:hover {
-      background-color: var(--bg-opacity-10);
+  p,
+  .button {
+    display: flex;
+    align-items: center;
+    max-height: calc(v-bind(fontSize) * 2);
+    width: fit-content;
+    padding: 0.8em;
+    border: 1px solid v-bind(color);
+    border-radius: $border-radius-rounded;
+    margin: 0;
+    color: v-bind(color);
+    font-size: v-bind(fontSize);
+    &.--clickable {
+      cursor: pointer;
+      background-color: var(--bg-opacity-4);
+      border: unset;
+      &:hover {
+        background-color: var(--bg-opacity-10);
+      }
     }
   }
 }

argilla-frontend/components/base/base-badge/BaseBadgeSkeleton.vue

@@ -11,6 +11,10 @@ export default {
       type: Number,
       default: 1,
     },
+    fontSize: {
+      type: String,
+      default: "14px",
+    },
   },
   computed: {
     range() {
@@ -31,7 +35,8 @@ $progressBackgroundColorSecondary: var(--bg-opacity-10);
 }
 
 .badge {
-  height: $base-space * 3;
+  height: calc(v-bind(fontSize) * 2);
+  font-size: v-bind(fontSize);
   width: 5em;
   border-radius: $border-radius-rounded;
   margin: 0;