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; } + } + } }