diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 406475182b..7fa9760299 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -105,6 +105,11 @@
--theme-table-bg-color: rgba(255, 255, 255, .02);
--theme-table-bg-hover: rgba(255, 255, 255, .04);
+ --theme-popup-bg: rgba(222, 222, 240, .2);
+ --theme-popup-bg-hover: rgba(37, 37, 42, .4);
+ --theme-popup-border: transparent;
+ --theme-popup-shadow: 0px 10px 20px rgba(0, 0, 0, .2);
+
--theme-caption-color: #fff;
--theme-content-accent-color: rgba(255, 255, 255, 0.8);
--theme-content-color: rgba(255, 255, 255, 0.6);
@@ -169,6 +174,11 @@
--theme-table-bg-color: rgba(255, 255, 255, .02);
--theme-table-bg-hover: rgba(255, 255, 255, .04);
+ --theme-popup-bg: rgba(222, 222, 240, .2);
+ --theme-popup-bg-hover: rgba(37, 37, 42, .4);
+ --theme-popup-border: transparent;
+ --theme-popup-shadow: 0px 10px 20px rgba(0, 0, 0, .2);
+
--theme-caption-color: #fff;
--theme-content-accent-color: rgba(255, 255, 255, 0.8);
--theme-content-color: rgba(255, 255, 255, 0.6);
@@ -232,6 +242,11 @@
--theme-table-bg-color: rgba(0, 0, 0, .02);
--theme-table-bg-hover: rgba(0, 0, 0, .04);
+ --theme-popup-bg: #fff;
+ --theme-popup-bg-hover: #F2F2F2;
+ --theme-popup-border: 1px solid rgba(0, 0, 0, .06);
+ --theme-popup-shadow: 0px 10px 20px rgba(0, 0, 0, .2);
+
--theme-caption-color: #272121;
--theme-content-accent-color: rgba(39, 33, 33, 0.8);
--theme-content-color: rgba(39, 33, 33, 0.6);
diff --git a/plugins/view-resources/src/components/Menu.svelte b/plugins/view-resources/src/components/Menu.svelte
new file mode 100644
index 0000000000..b76916c70e
--- /dev/null
+++ b/plugins/view-resources/src/components/Menu.svelte
@@ -0,0 +1,81 @@
+
+
+
+
+
+
+
diff --git a/plugins/view-resources/src/components/TableView.svelte b/plugins/view-resources/src/components/TableView.svelte
index 8a0f9f5e40..b7e4b66067 100644
--- a/plugins/view-resources/src/components/TableView.svelte
+++ b/plugins/view-resources/src/components/TableView.svelte
@@ -21,6 +21,7 @@
import { getClient } from '@anticrm/presentation'
import { Label, showPopup, Loading, ScrollBox, CheckBox } from '@anticrm/ui'
import MoreV from './icons/MoreV.svelte'
+ import Menu from './Menu.svelte'
import { createQuery } from '@anticrm/presentation'
@@ -49,6 +50,22 @@
const client = getClient()
let checking: boolean = false
+
+ const findNode = (el: HTMLElement, name: string): any => {
+ while (el.parentNode !== null) {
+ if (el.classList.contains(name)) return el
+ el = el.parentNode as HTMLElement
+ }
+ return false
+ }
+ const showMenu = (ev: MouseEvent): void => {
+ const elRow: HTMLElement = findNode(ev.target as HTMLElement, 'tr-body')
+ const elBtn: HTMLElement = findNode(ev.target as HTMLElement, 'menuRow')
+ elRow.classList.add('fixed')
+ showPopup(Menu, {}, elBtn, (() => {
+ elRow.classList.remove('fixed')
+ }))
+ }
{#await buildModel(client, _class, config, options)}
@@ -75,7 +92,7 @@
{#if objects}
- {#each objects as object (object._id)}
+ {#each objects as object, row (object._id)}
{#each model as attribute, cell}
@@ -83,7 +100,7 @@
@@ -117,7 +134,7 @@
display: flex;
align-items: center;
width: 0;
- .moveRow {
+ .menuRow {
visibility: hidden;
width: 1rem;
margin: 0 .5rem;
@@ -171,6 +188,19 @@
}
}
}
- &:hover td:first-child .control .moveRow { visibility: visible; }
+ &:hover td:first-child .control .menuRow { visibility: visible; }
+ }
+
+ :global(.fixed) {
+ background-color: var(--theme-table-bg-hover);
+ & td:first-child {
+ padding-left: 1rem;
+ padding-right: 1.5rem;
+ & .control {
+ visibility: visible;
+ width: auto;
+ .menuRow { visibility: visible; }
+ }
+ }
}
|