Cards fixes (#8003)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

plugins/view-resources/src/components/DocTable.svelte

@@ -35,6 +35,8 @@
 
   export let selection: number | undefined = undefined
 
+  export let onContextMenu: ((ev: MouseEvent, object: Doc) => void) | undefined
+
   const client = getClient()
   const hierarchy = client.getHierarchy()
 
@@ -62,8 +64,13 @@
 
   const showContextMenu = async (ev: MouseEvent, object: Doc, row: number): Promise<void> => {
     selection = row
-    const items = object
-    showMenu(ev, { object: items, baseMenuClass })
+    ev.stopPropagation()
+    ev.preventDefault()
+    if (onContextMenu !== undefined) {
+      onContextMenu(ev, object)
+    } else {
+      showMenu(ev, { object, baseMenuClass })
+    }
   }
 
   function onRow (object: Doc): void {

plugins/view-resources/src/components/HyperlinkEditorPopup.svelte

@@ -119,33 +119,6 @@
     position: relative;
     min-width: 0;
     min-height: 0;
-
-    &.show::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border: 1px solid transparent;
-      border-radius: 0.25rem;
-      opacity: 0.95;
-    }
-    &.show::after {
-      content: attr(data-tooltip);
-      position: absolute;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      min-width: 0;
-      top: 50%;
-      left: 50%;
-      width: calc(100% - 0.5rem);
-      text-align: center;
-      font-size: 0.75rem;
-      color: var(--theme-content-color);
-      transform: translate(-50%, -50%);
-    }
   }
 
   .editor-container {

plugins/view-resources/src/components/RelationEditor.svelte

@@ -3,6 +3,7 @@
   import { IntlString } from '@hcengineering/platform'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { Button, IconAdd, Label, Section, showPopup } from '@hcengineering/ui'
+  import { showMenu } from '../actions'
   import view, { Viewlet, ViewletPreference } from '@hcengineering/view'
   import DocTable from './DocTable.svelte'
   import ObjectBoxPopup from './ObjectBoxPopup.svelte'
@@ -14,6 +15,8 @@
   export let readonly: boolean = false
   export let direction: 'A' | 'B'
 
+  const client = getClient()
+
   $: _class = direction === 'B' ? association.classB : association.classA
 
   function add (): void {
@@ -76,6 +79,17 @@
   }
 
   $: config = preference?.config ?? viewlet?.config
+
+  async function onContextMenu (ev: MouseEvent, doc: Doc): Promise<void> {
+    const q =
+      direction === 'A'
+        ? { docA: object._id, docB: doc._id, association: association._id }
+        : { docA: doc._id, docB: object._id, association: association._id }
+    const relation = await client.findOne(core.class.Relation, q)
+    if (relation !== undefined) {
+      showMenu(ev, { object: relation, includedActions: [view.action.Delete] })
+    }
+  }
 </script>
 
 <Section {label}>
@@ -90,9 +104,7 @@
   <svelte:fragment slot="content">
     <div class="antiSection-empty solid flex-col mt-3">
       {#if docs?.length > 0 && config != null}
-        <div class="self-start flex-col flex-gap-2">
-          <DocTable objects={docs} {_class} {config} />
-        </div>
+        <DocTable objects={docs} {_class} {config} {onContextMenu} />
       {:else if !readonly}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <!-- svelte-ignore a11y-no-static-element-interactions -->

plugins/view-resources/src/components/filter/FilterBar.svelte

@@ -19,13 +19,13 @@
   import { Button, IconAdd, eventToHTMLElement, getCurrentLocation, showPopup } from '@hcengineering/ui'
   import { Filter, FilteredView, ViewOptions, Viewlet } from '@hcengineering/view'
   import { createEventDispatcher } from 'svelte'
-  import { filterStore, removeFilter, updateFilter, selectedFilterStore } from '../../filter'
+  import { filterStore, removeFilter, selectedFilterStore, updateFilter } from '../../filter'
   import view from '../../plugin'
+  import { activeViewlet, getActiveViewletId, makeViewletKey } from '../../utils'
+  import { getViewOptions, viewOptionStore } from '../../viewOptions'
   import FilterSave from './FilterSave.svelte'
   import FilterSection from './FilterSection.svelte'
   import FilterTypePopup from './FilterTypePopup.svelte'
-  import { activeViewlet, getActiveViewletId, makeViewletKey } from '../../utils'
-  import { getViewOptions, viewOptionStore } from '../../viewOptions'
 
   export let _class: Ref<Class<Doc>> | undefined
   export let space: Ref<Space> | undefined
@@ -145,11 +145,9 @@
 
   $: makeQuery(query, $filterStore)
 
-  let clazz: Class<Doc<Space>>
   let visible: boolean = false
   $: if (_class) {
-    clazz = hierarchy.getClass(_class)
-    visible = hierarchy.hasMixin(clazz, view.mixin.ClassFilters)
+    visible = hierarchy.classHierarchyMixin(_class, view.mixin.ClassFilters) !== undefined
   }
 
   const me = getCurrentAccount()._id

plugins/view-resources/src/components/filter/FilterButton.svelte

@@ -81,8 +81,7 @@
   export let visible: boolean = false
   $: {
     if (_class) {
-      const clazz = hierarchy.getClass(_class)
-      visible = hierarchy.hasMixin(clazz, view.mixin.ClassFilters)
+      visible = hierarchy.classHierarchyMixin(_class, view.mixin.ClassFilters) !== undefined
     } else visible = false
   }
 </script>