+
@@ -51,26 +99,16 @@ onBeforeUnmount(() => {
display: inline-block;
& .items {
- position: absolute;
- z-index: 1000;
- top: 100%;
- left: 0;
+ position: fixed;
+ z-index: 9999;
display: flex;
overflow: visible;
+ width: max-content;
flex-direction: column;
- padding: var(--spacing-padding-small);
border: solid 1px var(--border-color-normal);
border-radius: var(--border-radius);
background-color: var(--background-color-normal);
box-shadow: 4px 10px 20px var(--background-color-selected);
- gap: var(--spacing-padding-small);
- }
-
- &.align-right {
- & .items {
- right: 0;
- left: unset;
- }
}
}
diff --git a/frontend/src/components/DropdownButtonItem.vue b/frontend/src/components/DropdownButtonItem.vue
index 6abccaa2..bd03893b 100644
--- a/frontend/src/components/DropdownButtonItem.vue
+++ b/frontend/src/components/DropdownButtonItem.vue
@@ -20,16 +20,26 @@ const props = defineProps
();
.dropdown-item {
display: inline-block;
box-sizing: border-box;
- padding: calc(var(--spacing-padding-small) / 2) var(--spacing-padding-small);
+ padding: var(--spacing-padding-small);
border: 0;
- border-radius: var(--border-radius);
+ border-bottom: 1px solid var(--border-color-normal);
background-color: var(--background-color-normal);
color: var(--text-color-normal);
+ cursor: pointer;
font-size: var(--text-size-normal);
font-weight: var(--text-weight-normal);
text-align: left;
white-space: nowrap;
+ &:first-child {
+ border-radius: var(--border-radius) var(--border-radius) 0 0;
+ }
+
+ &:last-child {
+ border-radius: 0 0 var(--border-radius) var(--border-radius);
+ border-bottom: 0;
+ }
+
&:hover {
background-color: var(--background-color-elevated);
}
diff --git a/frontend/src/components/EditableList.vue b/frontend/src/components/EditableList.vue
new file mode 100644
index 00000000..4a4b4bdf
--- /dev/null
+++ b/frontend/src/components/EditableList.vue
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/EditableListItem.vue b/frontend/src/components/EditableListItem.vue
new file mode 100644
index 00000000..c7b63618
--- /dev/null
+++ b/frontend/src/components/EditableListItem.vue
@@ -0,0 +1,143 @@
+
+
+
+
+
+
+
+ {{ item.name }}
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/ReportCanvas.vue b/frontend/src/components/ProjectViewCanvas.vue
similarity index 70%
rename from frontend/src/components/ReportCanvas.vue
rename to frontend/src/components/ProjectViewCanvas.vue
index a106bd82..c8349c85 100644
--- a/frontend/src/components/ReportCanvas.vue
+++ b/frontend/src/components/ProjectViewCanvas.vue
@@ -7,19 +7,26 @@ import HtmlSnippetWidget from "@/components/HtmlSnippetWidget.vue";
import ImageWidget from "@/components/ImageWidget.vue";
import MarkdownWidget from "@/components/MarkdownWidget.vue";
import PlotlyWidget from "@/components/PlotlyWidget.vue";
-import ReportCard from "@/components/ReportCard.vue";
+import ProjectViewCard from "@/components/ProjectViewCard.vue";
import VegaWidget from "@/components/VegaWidget.vue";
-import type { KeyLayoutSize, KeyMoveDirection } from "@/models";
-import { useReportStore } from "@/stores/report";
+import { useProjectStore } from "@/stores/project";
-const reportStore = useReportStore();
+const props = defineProps({
+ showCardActions: {
+ type: Boolean,
+ default: true,
+ },
+});
+
+const projectStore = useProjectStore();
const visibleItems = computed(() => {
const items = [];
let index = 0;
- if (reportStore.items !== null) {
- for (const { key, size } of reportStore.layout) {
- const item = reportStore.items[key];
+ if (projectStore.items !== null && projectStore.currentView !== null) {
+ const v = projectStore.views[projectStore.currentView];
+ for (const key of v) {
+ const item = projectStore.items[key];
if (item) {
const mediaType = item.media_type || "";
let data;
@@ -45,7 +52,6 @@ const visibleItems = computed(() => {
const updatedAt = new Date(item.updated_at);
items.push({
key,
- size,
mediaType,
data,
createdAt,
@@ -59,25 +65,12 @@ const visibleItems = computed(() => {
return items;
});
-function onLayoutChange(key: string, size: KeyLayoutSize) {
- reportStore.setKeyLayoutSize(key, size);
-}
-
function onCardRemoved(key: string) {
- reportStore.hideKey(key);
-}
-
-function onPositionChanged(key: string, direction: KeyMoveDirection) {
- reportStore.moveKey(key, direction);
+ if (projectStore.currentView) {
+ projectStore.hideKey(projectStore.currentView, key);
+ }
}
-const props = defineProps({
- showCardButtons: {
- type: Boolean,
- default: true,
- },
-});
-
function getItemSubtitle(created_at: Date, updated_at: Date) {
const now = new Date();
return `Created ${formatDistance(created_at, now)} ago, updated ${formatDistance(updated_at, now)} ago`;
@@ -86,19 +79,14 @@ function getItemSubtitle(created_at: Date, updated_at: Date) {
-
-
+
diff --git a/frontend/src/components/ReportCard.vue b/frontend/src/components/ProjectViewCard.vue
similarity index 53%
rename from frontend/src/components/ReportCard.vue
rename to frontend/src/components/ProjectViewCard.vue
index b83f2a8a..0aec3051 100644
--- a/frontend/src/components/ReportCard.vue
+++ b/frontend/src/components/ProjectViewCard.vue
@@ -1,17 +1,14 @@
@@ -25,23 +22,14 @@ const emit = defineEmits<{
{{ props.subtitle }}
-