Rebase (#6088)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>

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

@@ -15,7 +15,7 @@
 <script lang="ts">
   import { DocumentQuery, WithLookup } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
-  import { Button, ButtonKind, showPopup } from '@hcengineering/ui'
+  import { ModernButton, showPopup, closeTooltip } from '@hcengineering/ui'
   import { ViewOptions, Viewlet, ViewletPreference } from '@hcengineering/view'
   import { createEventDispatcher } from 'svelte'
   import view from '../plugin'
@@ -25,7 +25,7 @@
   import { restrictionStore } from '../utils'
 
   export let viewletQuery: DocumentQuery<Viewlet> = {}
-  export let kind: ButtonKind = 'regular'
+  export let kind: 'primary' | 'secondary' | 'tertiary' | 'negative' = 'secondary'
   export let viewOptions: ViewOptions | undefined = undefined
 
   export let viewlet: Viewlet | undefined = undefined
@@ -37,9 +37,14 @@
   const dispatch = createEventDispatcher()
 
   let btn: HTMLButtonElement
+  let pressed: boolean = false
 
   function clickHandler (event: MouseEvent) {
-    showPopup(ViewletSetting, { viewlet }, btn)
+    pressed = true
+    closeTooltip()
+    showPopup(ViewletSetting, { viewlet }, btn, () => {
+      pressed = false
+    })
   }
 
   $: viewOptions = getViewOptions(viewlet, $viewOptionStore)
@@ -87,15 +92,15 @@
     {#if viewOptions}
       <ViewOptionsButton {viewlet} {kind} {viewOptions} {disabled} />
     {/if}
-    <Button
+    <ModernButton
       icon={view.icon.Configure}
       label={view.string.Show}
       {kind}
-      shrink={1}
+      size={'small'}
       {disabled}
-      adaptiveShrink={'sm'}
-      showTooltip={{ label: view.string.CustomizeView, direction: 'bottom' }}
-      bind:input={btn}
+      {pressed}
+      tooltip={{ label: view.string.CustomizeView, direction: 'bottom' }}
+      bind:element={btn}
       on:click={clickHandler}
     />
   </div>