Update viewoptions layout. (#2050)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

packages/kanban/src/components/Kanban.svelte

@@ -361,9 +361,6 @@
     padding: 1.5rem 2rem 0;
   }
 
-  .scrollable {
-    height: 100%;
-  }
   .card-container {
     background-color: var(--board-card-bg-color);
     border-radius: 0.25rem;

packages/presentation/src/components/SpaceMultiBoxList.svelte

@@ -66,7 +66,7 @@
       {#if selectedItems.length > 0}
         <div class="flex-row-center flex-nowrap">
           {#await translate(presentation.string.NumberSpaces, { count: selectedItems.length }) then text}
-            <span class="ml-1-5">{text}</span>
+            <span class="overflow-label disabled ml-1-5">{text}</span>
           {/await}
         </div>
       {/if}

packages/presentation/src/components/SpaceSelect.svelte

@@ -80,7 +80,7 @@
 
 <Tooltip {label} fill={false} direction={labelDirection}>
   <Button {focus} {focusIndex} icon={IconFolder} size={'small'} kind={'no-border'} on:click={showSpacesPopup}>
-    <span slot="content" class="text-sm">
+    <span slot="content" class="overflow-label disabled text-sm">
       {#if selected}{selected.name}{:else}<Label {label} />{/if}
     </span>
   </Button>

packages/presentation/src/components/UserBox.svelte

@@ -123,7 +123,7 @@
         {justify}
         on:click={_click}
       >
-        <span slot="content" style="overflow: hidden">
+        <span slot="content" class="overflow-label disabled">
           {#if selected}
             {#if size === 'x-large'}
               <UserInfo value={selected} size={'medium'} {icon} />
@@ -146,7 +146,7 @@
       {justify}
       on:click={_click}
     >
-      <span slot="content" style="overflow: hidden">
+      <span slot="content" class="overflow-label disabled">
         {#if selected}
           {#if size === 'x-large' || size === 'large'}
             <UserInfo value={selected} size={'x-small'} {icon} />

packages/presentation/src/components/UserBoxList.svelte

@@ -78,10 +78,10 @@
   >
     <svelte:fragment slot="content">
       {#if persons.length > 0}
-        <div class="flex-row-center flex-nowrap">
+        <div class="flex-row-center flex-nowrap pointer-events-none">
           <CombineAvatars {_class} bind:items size={'inline'} />
           {#await translate(presentation.string.NumberMembers, { count: persons.length }) then text}
-            <span class="ml-1-5">{text}</span>
+            <span class="overflow-label ml-1-5">{text}</span>
           {/await}
         </div>
       {/if}

packages/theme/styles/_layouts.scss

@@ -592,6 +592,8 @@ a.no-line {
   text-overflow: ellipsis;
   overflow: hidden;
   min-width: 0;
+
+  &.disabled { pointer-events: none; }
 }
 
 .lines-limit-2, .lines-limit-4 {

packages/theme/styles/dialogs.scss

@@ -104,6 +104,33 @@
     border-radius: 0 0 .5rem .5rem;
   }
 
+  .antiCard-group {
+    padding: .5rem 1rem;
+
+    &:not(:last-child) { border-bottom: 1px solid var(--popup-divider); }
+    &.grid {
+      display: grid;
+      grid-template-columns: 5rem auto;
+      grid-auto-rows: minmax(2rem, auto);
+      column-gap: .5rem;
+      
+      .label {
+        display: flex;
+        align-items: center;
+        text-align: left;
+        font-weight: 500;
+        font-size: .75rem;
+        line-height: .75rem;
+        color: var(--content-color);
+      }    
+      .value {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }    
+    }
+  }
+
   &.dialog {
     width: 40rem;
     height: max-content;

packages/ui/src/components/Button.svelte

@@ -120,13 +120,11 @@
   {#if loading}
     <Spinner />
   {:else if label}
-    <span class="overflow-label pointer-events-none">
+    <span class="overflow-label disabled">
       <Label {label} params={labelParams} />
     </span>
   {:else if $$slots.content}
-    <span class="overflow-label pointer-events-none">
-      <slot name="content" />
-    </span>
+    <slot name="content" />
   {/if}
 </button>
 

packages/ui/src/components/Dropdown.svelte

@@ -58,7 +58,7 @@
         }
       }}
     >
-      <span slot="content" style="overflow: hidden">
+      <span slot="content" class="overflow-label disabled">
         {#if selected}{selected.label}{:else}<Label label={placeholder} />{/if}
       </span>
     </Button>

packages/ui/src/components/DropdownLabels.svelte

@@ -73,7 +73,7 @@
         }
       }}
     >
-      <span slot="content" style="overflow: hidden">
+      <span slot="content" class="overflow-label disabled">
         {#if selectedItem}{selectedItem.label}{:else}<Label label={label ?? ui.string.NotSelected} />{/if}
       </span>
     </Button>

packages/ui/src/components/DropdownLabelsIntl.svelte

@@ -65,11 +65,12 @@
         }
       }}
     >
-      <span slot="content" style="overflow: hidden">
+      <span slot="content" class="overflow-label disabled">
         {#if selectedItem}
           <Label label={selectedItem.label} />
         {:else}
-          <Label label={label ?? ui.string.NotSelected} />{/if}
+          <Label label={label ?? ui.string.NotSelected} />
+        {/if}
       </span>
     </Button>
   </Tooltip>

packages/ui/src/components/DropdownRecord.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { IntlString } from '@anticrm/platform'
+  import { createEventDispatcher } from 'svelte'
+  import ui, { Label, Button, IconDownOutline, showPopup } from '..'
+  import type { ButtonKind, ButtonSize } from '../types'
+  import DropdownRecordPopup from './DropdownRecordPopup.svelte'
+
+  export let items: Record<any, IntlString>
+  export let selected: any | undefined = undefined
+
+  export let kind: ButtonKind = 'no-border'
+  export let size: ButtonSize = 'small'
+  export let width: string | undefined = '10rem'
+
+  const dispatch = createEventDispatcher()
+
+  let tool: HTMLElement
+  let opened: boolean = false
+  $: selectedLabel = selected ? items[selected] : ui.string.NotSelected
+</script>
+
+<div class="clear-mins" bind:this={tool}>
+  <Button
+    {kind}
+    {size}
+    {width}
+    on:click={() => {
+      if (!opened) {
+        opened = true
+        showPopup(DropdownRecordPopup, { items, selected }, tool, (result) => {
+          if (result != null) {
+            dispatch('select', result)
+          }
+          opened = false
+        })
+      }
+    }}
+  >
+    <svelte:fragment slot="content">
+      <div class="flex-between clear-mins pointer-events-none" style:width style:max-width={'12rem'}>
+        <span class="overflow-label"><Label label={selectedLabel} /></span>
+        <div class="ml-2"><IconDownOutline size={'small'} /></div>
+      </div>
+    </svelte:fragment>
+  </Button>
+</div>

packages/ui/src/components/DropdownRecordPopup.svelte

@@ -0,0 +1,83 @@
+<!--
+// Copyright © 2022 Hardcore Engineering Inc.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { IntlString } from '@anticrm/platform'
+  import { createEventDispatcher } from 'svelte'
+  import CheckBox from './CheckBox.svelte'
+  import { Label } from '..'
+  import ListView from './ListView.svelte'
+
+  export let items: Record<any, IntlString>
+  export let selected: any | undefined = undefined
+
+  const dispatch = createEventDispatcher()
+
+  let selection = 0
+  let list: ListView
+  $: objects = Object.entries(items)
+
+  async function handleSelection (evt: Event | undefined, selection: number): Promise<void> {
+    const item = items[selection]
+
+    dispatch('close', item)
+  }
+
+  function onKeydown (key: KeyboardEvent): void {
+    if (key.code === 'ArrowUp') {
+      key.stopPropagation()
+      key.preventDefault()
+      list.select(selection - 1)
+    }
+    if (key.code === 'ArrowDown') {
+      key.stopPropagation()
+      key.preventDefault()
+      list.select(selection + 1)
+    }
+    if (key.code === 'Enter') {
+      key.preventDefault()
+      key.stopPropagation()
+      handleSelection(key, selection)
+    }
+    if (key.code === 'Escape') {
+      key.preventDefault()
+      key.stopPropagation()
+      dispatch('close')
+    }
+  }
+</script>
+
+<div class="selectPopup" on:keydown={onKeydown}>
+  <div class="scroll">
+    <div class="box">
+      <ListView bind:this={list} count={objects.length} bind:selection>
+        <svelte:fragment slot="item" let:item={idx}>
+          {@const item = objects[idx]}
+
+          <button
+            class="menu-item flex-between w-full"
+            on:click={() => {
+              dispatch('close', item[0])
+            }}
+          >
+            <div class="flex-grow caption-color lines-limit-2"><Label label={item[1]} /></div>
+            {#if item[0] === selected}
+              <div class="check-right"><CheckBox checked primary /></div>
+            {/if}
+          </button>
+        </svelte:fragment>
+      </ListView>
+    </div>
+  </div>
+</div>

packages/ui/src/index.ts

@@ -90,6 +90,7 @@ export { default as Dropdown } from './components/Dropdown.svelte'
 export { default as DropdownPopup } from './components/DropdownPopup.svelte'
 export { default as DropdownLabels } from './components/DropdownLabels.svelte'
 export { default as DropdownLabelsIntl } from './components/DropdownLabelsIntl.svelte'
+export { default as DropdownRecord } from './components/DropdownRecord.svelte'
 export { default as ShowMore } from './components/ShowMore.svelte'
 export { default as Menu } from './components/Menu.svelte'
 export { default as TimeShiftPicker } from './components/TimeShiftPicker.svelte'

plugins/contact-resources/src/components/OrganizationEditor.svelte

@@ -17,7 +17,8 @@
   import { Ref } from '@anticrm/core'
   import { IntlString } from '@anticrm/platform'
   import { createQuery } from '@anticrm/presentation'
-  import { DropdownPopup, Label, showPopup } from '@anticrm/ui'
+  import { DropdownPopup, Label, showPopup, Button } from '@anticrm/ui'
+  import type { ButtonKind, ButtonSize } from '@anticrm/ui'
   import { ListItem } from '@anticrm/ui/src/types'
   import contact from '../plugin'
   import Company from './icons/Company.svelte'
@@ -25,7 +26,11 @@
   export let value: Ref<Organization> | undefined
   export let label: IntlString = contact.string.Organization
   export let onChange: (value: any) => void
-  export let kind: 'no-border' | 'link' = 'no-border'
+
+  export let kind: ButtonKind = 'no-border'
+  export let size: ButtonSize = 'small'
+  export let justify: 'left' | 'center' = 'center'
+  export let width: string | undefined = 'min-content'
 
   const query = createQuery()
 
@@ -57,64 +62,47 @@
 
   let opened: boolean = false
   const icon = Company
-  let container: HTMLElement
+  let tool: HTMLElement
 </script>
 
-<div
-  class="org-container {kind}"
-  bind:this={container}
-  class:empty={selected === undefined}
-  on:click|preventDefault={() => {
+<div class="clear-mins" bind:this={tool} />
+<Button
+  {justify}
+  {width}
+  {size}
+  {kind}
+  on:click={() => {
     if (!opened) {
       opened = true
-      showPopup(DropdownPopup, { title: label, items, icon }, container, (result) => {
+      showPopup(DropdownPopup, { title: label, items, icon }, tool, (result) => {
         if (result) setValue(result)
         opened = false
       })
     }
   }}
 >
-  {#if selected}
-    <div class="flex-row-center">
-      <div class="icon"><Company size={'small'} /></div>
-      {selected.label}
-    </div>
-  {:else}
-    <Label {label} />
-  {/if}
-</div>
+  <svelte:fragment slot="content">
+    {#if selected}
+      <div class="flex-row-center pointer-events-none">
+        <div class="icon"><Company size={'small'} /></div>
+        <span class="overflow-label">{selected.label}</span>
+      </div>
+    {:else}
+      <span class="overflow-label disabled"><Label {label} /></span>
+    {/if}
+  </svelte:fragment>
+</Button>
 
 <style lang="scss">
-  .org-container {
-    display: flex;
-    align-items: center;
-    color: var(--caption-color);
-    border: 1px solid transparent;
-    border-radius: 0.25rem;
-    transition-property: border, background-color, color, box-shadow;
-    transition-duration: 0.15s;
-    cursor: pointer;
+  .icon {
+    margin-right: 0.5rem;
+    padding: 0.25rem;
+    color: var(--accent-color);
+    background-color: var(--avatar-bg-color);
+    border-radius: 50%;
 
-    .icon {
-      margin-right: 0.5rem;
-      padding: 0.25rem;
+    &:hover {
       color: var(--caption-color);
-      background-color: var(--avatar-bg-color);
-      border-radius: 50%;
-    }
-
-    &.empty {
-      color: var(--theme-content-trans-color);
-    }
-
-    &.link {
-      padding: 0 0.875rem;
-      height: 2rem;
-      &:hover {
-        color: var(--caption-color);
-        background-color: var(--body-color);
-        border-color: var(--divider-color);
-      }
     }
   }
 </style>

plugins/recruit-resources/src/components/CreateApplication.svelte

@@ -292,7 +292,7 @@
             )
           }}
         >
-          <div slot="content" class="flex-row-center">
+          <div slot="content" class="flex-row-center pointer-events-none">
             {#if selectedState}
               <div class="color" style="background-color: {getPlatformColor(selectedState.color)}" />
               <span class="label overflow-label">{selectedState.title}</span>

plugins/recruit-resources/src/components/CreateCandidate.svelte

@@ -537,7 +537,7 @@
           }}
         >
           <svelte:fragment slot="content">
-            {resume.name}
+            <span class="overflow-label disabled">{resume.name}</span>
           </svelte:fragment>
         </Button>
       {:else}

plugins/recruit-resources/src/components/YesNo.svelte

@@ -46,7 +46,7 @@
     }}
   >
     <svelte:fragment slot="content">
-      <div class="flex-row-center flex-no-wrap">
+      <div class="flex-row-center flex-no-wrap pointer-events-none">
         <span class="overflow-label">
           <Label {label} />
         </span>

plugins/setting-resources/src/components/typeEditors/EnumSelect.svelte

@@ -70,7 +70,7 @@
 
 <Tooltip {label} fill={false} direction={labelDirection}>
   <Button {focus} {focusIndex} icon={IconFolder} size={'small'} kind={'no-border'} on:click={handleClick}>
-    <span slot="content" class="text-sm">
+    <span slot="content" class="text-sm overflow-label disabled">
       {#if value}{value.name}{:else}<Label {label} />{/if}
     </span>
   </Button>

plugins/tags-resources/src/components/CreateTagElement.svelte

@@ -113,7 +113,7 @@
     <div class="mr-3">
       <Button size={'medium'} kind={'link-bordered'} on:click={showColorPopup}>
         <svelte:fragment slot="content">
-          <div class="color" style={getTagStyle(getPlatformColor(color))} />
+          <div class="color pointer-events-none" style={getTagStyle(getPlatformColor(color))} />
         </svelte:fragment>
       </Button>
     </div>

plugins/tags-resources/src/components/TagsDropdownEditor.svelte

@@ -85,7 +85,7 @@
   >
     <svelte:fragment slot="content">
       {#if items.length > 0}
-        <div class="flex-row-center flex-nowrap">
+        <div class="flex-row-center flex-nowrap overflow-label disabled">
           {#await translate(countLabel, { count: items.length }) then text}
             {text}
           {/await}

plugins/task-resources/src/components/state/DoneStateEditor.svelte

@@ -75,11 +75,11 @@
 >
   <svelte:fragment slot="content">
     {#if state}
-      <DoneStatePresenter value={state} showTitle />
+      <div class="pointer-events-none"><DoneStatePresenter value={state} showTitle /></div>
     {:else}
-      <div class="flex-center clear-mins">
+      <div class="flex-row-center pointer-events-none">
         <div class="color background-card-divider" />
-        <Label label={task.string.NoDoneState} />
+        <span class="overflow-label"><Label label={task.string.NoDoneState} /></span>
       </div>
     {/if}
   </svelte:fragment>

plugins/task-resources/src/components/state/StateEditor.svelte

@@ -59,7 +59,7 @@
 <Button {kind} {size} {width} {justify} on:click={handleClick}>
   <svelte:fragment slot="content">
     {#if state}
-      <StatePresenter value={state} />
+      <div class="pointer-events-none"><StatePresenter value={state} /></div>
     {/if}
   </svelte:fragment>
 </Button>

plugins/tracker-assets/assets/icons.svg

@@ -77,7 +77,7 @@
     <rect width="2" height="2" rx="1" transform="matrix(-1 0 0 1 11 6)" />
   </symbol>
   <symbol id="priority-urgent" viewBox="-1 -1 16 16">
-    <path d="M2 0a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V2a2 2 0 00-2-2H2zm3.914 3h1.738L7.5 8.602H6.07L5.914 3zm1.809 7.164a.95.95 0 01-.938.938.934.934 0 110-1.867c.5 0 .934.417.938.93z" />
+    <path fill="var(--warning-color)" d="M2 0a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V2a2 2 0 00-2-2H2zm3.914 3h1.738L7.5 8.602H6.07L5.914 3zm1.809 7.164a.95.95 0 01-.938.938.934.934 0 110-1.867c.5 0 .934.417.938.93z" />
   </symbol>
   <symbol id="priority-high" viewBox="0 0 16 16">
     <rect x="1" y="8" width="3" height="6" rx="1" />

plugins/tracker-resources/src/components/DropdownNative.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-  import { IntlString } from '@anticrm/platform'
-  import { Label } from '@anticrm/ui'
-
-  export let items: Record<any, IntlString>
-  export let selected: any | undefined = undefined
-
-  $: dropdownItems = Object.entries(items)
-</script>
-
-<select class="dropdownNativeRoot" bind:value={selected}>
-  {#each dropdownItems as [key, value]}
-    <option value={key}>
-      <Label label={value} />
-    </option>
-  {/each}
-</select>
-
-<style lang="scss">
-  .dropdownNativeRoot {
-    justify-content: flex-start;
-    border: none;
-    min-width: 7rem;
-    height: 1.5rem;
-    padding: 0 1.1rem 0 0.5rem;
-    background-color: var(--popup-divider);
-    color: var(--caption-color);
-    border-radius: 0.25rem;
-    margin: 0;
-
-    &:hover {
-      border-color: var(--button-border-hover);
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-</style>

plugins/tracker-resources/src/components/ProjectSelector.svelte

@@ -104,7 +104,7 @@
 >
   <svelte:fragment slot="content">
     {#if projectText}
-      <span class="nowrap">{projectText}</span>
+      <span class="overflow-label disabled">{projectText}</span>
     {/if}
   </svelte:fragment>
 </Button>

plugins/tracker-resources/src/components/StatusSelector.svelte

@@ -59,7 +59,7 @@
 >
   <svelte:fragment slot="content">
     {#if selectedStatusLabel}
-      <span class="nowrap">{selectedStatusLabel}</span>
+      <span class="overflow-label disabled">{selectedStatusLabel}</span>
     {/if}
   </svelte:fragment>
 </Button>

plugins/tracker-resources/src/components/issues/Issues.svelte

@@ -448,13 +448,15 @@
 </script>
 
 {#if currentTeam}
-  <div class="fs-title flex-between header">
-    <div class="titleContainer">
-      {#if label}
-        {label}
-      {:else}
-        <Label label={title} params={{ value }} />
-      {/if}
+  <div class="ac-header full divide">
+    <div class="ac-header__wrap-title">
+      <div class="ac-header__title">
+        {#if label}
+          {label}
+        {:else}
+          <Label label={title} params={{ value }} />
+        {/if}
+      </div>
       <div class="ml-4">
         <Button
           size="small"
@@ -463,12 +465,12 @@
           on:click={isFiltersEmpty ? handleFilterMenuOpened : handleAllFiltersDeleted}
         >
           <svelte:fragment slot="content">
-            <div class="flex-row-center">
+            <div class="flex-row-center pointer-events-none">
               {#if isFiltersEmpty}
                 <Icon icon={IconAdd} size={'x-small'} />
-                <span class="ml-1"><Label label={tracker.string.Filter} /></span>
+                <span class="overflow-label ml-1"><Label label={tracker.string.Filter} /></span>
               {:else}
-                <span class="mr-1"><Label label={tracker.string.ClearFilters} /></span>
+                <span class="overflow-label mr-1"><Label label={tracker.string.ClearFilters} /></span>
                 <Icon icon={IconClose} size={'x-small'} />
               {/if}
             </div>
@@ -530,17 +532,3 @@
     {/if}
   </div>
 {/if}
-
-<style lang="scss">
-  .header {
-    min-height: 3.5rem;
-    padding-left: 2.25rem;
-    padding-right: 1.35rem;
-  }
-
-  .titleContainer {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-  }
-</style>

plugins/tracker-resources/src/components/issues/IssuesHeader.svelte

@@ -25,7 +25,7 @@
   }
 </script>
 
-<div class="ac-header full">
+<div class="ac-header full divide">
   <div class="ac-header__wrap-title">
     <div class="ac-header__icon"><Icon icon={tracker.icon.Issues} size={'small'} /></div>
     <span class="ac-header__title">{label}</span>

plugins/tracker-resources/src/components/issues/IssuesView.svelte

@@ -69,24 +69,22 @@
 </script>
 
 {#if currentSpace}
-  <div class="header">
-    <IssuesHeader {currentSpace} {viewlets} {label} bind:viewlet bind:viewOptions bind:filters>
-      <svelte:fragment slot="extra">
-        {#if asideFloat && $$slots.aside}
-          <Button
-            icon={IconDetails}
-            kind={'transparent'}
-            size={'medium'}
-            selected={asideShown}
-            on:click={() => {
-              asideShown = !asideShown
-            }}
-          />
-        {/if}
-      </svelte:fragment>
-    </IssuesHeader>
-    <FilterBar _class={tracker.class.Issue} {query} bind:filters on:change={(e) => (resultQuery = e.detail)} />
-  </div>
+  <IssuesHeader {currentSpace} {viewlets} {label} bind:viewlet bind:viewOptions bind:filters>
+    <svelte:fragment slot="extra">
+      {#if asideFloat && $$slots.aside}
+        <Button
+          icon={IconDetails}
+          kind={'transparent'}
+          size={'medium'}
+          selected={asideShown}
+          on:click={() => {
+            asideShown = !asideShown
+          }}
+        />
+      {/if}
+    </svelte:fragment>
+  </IssuesHeader>
+  <FilterBar _class={tracker.class.Issue} {query} bind:filters on:change={(e) => (resultQuery = e.detail)} />
   <div class="flex h-full">
     <div class="antiPanel-component">
       <IssuesContent {currentSpace} {viewlet} query={resultQuery} {viewOptions} />
@@ -98,9 +96,3 @@
     {/if}
   </div>
 {/if}
-
-<style lang="scss">
-  .header {
-    border-bottom: 1px solid var(--divider-color);
-  }
-</style>

plugins/tracker-resources/src/components/issues/ViewOptionsPopup.svelte

@@ -14,10 +14,9 @@
 -->
 <script lang="ts">
   import { IssuesGrouping, IssuesOrdering, IssuesDateModificationPeriod } from '@anticrm/tracker'
-  import { Label, MiniToggle } from '@anticrm/ui'
+  import { Label, MiniToggle, DropdownRecord } from '@anticrm/ui'
   import tracker from '../../plugin'
   import { issuesGroupByOptions, issuesOrderByOptions, issuesDateModificationPeriodOptions } from '../../utils'
-  import DropdownNative from '../DropdownNative.svelte'
   import { createEventDispatcher } from 'svelte'
 
   const dispatch = createEventDispatcher()
@@ -28,93 +27,78 @@
   export let shouldShowSubIssues: boolean | undefined = false
   export let shouldShowEmptyGroups: boolean | undefined = false
 
+  $: _groupBy = groupBy
+  $: _orderBy = orderBy
+  $: _completedIssuesPeriod = completedIssuesPeriod
+  $: _shouldShowSubIssues = shouldShowSubIssues
+  $: _shouldShowEmptyGroups = shouldShowEmptyGroups
+
   const groupByItems = issuesGroupByOptions
   const orderByItems = issuesOrderByOptions
   const dateModificationPeriodItems = issuesDateModificationPeriodOptions
 
-  $: dispatch('update', { groupBy, orderBy, completedIssuesPeriod, shouldShowSubIssues, shouldShowEmptyGroups })
+  const updateOptions = (): void => {
+    dispatch('update', {
+      groupBy: _groupBy,
+      orderBy: _orderBy,
+      completedIssuesPeriod: _completedIssuesPeriod,
+      shouldShowSubIssues: _shouldShowSubIssues,
+      shouldShowEmptyGroups: _shouldShowEmptyGroups
+    })
+  }
 </script>
 
-<div class="root">
-  <div class="groupContainer">
-    <div class="viewOption">
-      <div class="label">
-        <Label label={tracker.string.Grouping} />
-      </div>
-      <div class="optionContainer">
-        <DropdownNative items={groupByItems} bind:selected={groupBy} />
-      </div>
+<div class="antiCard">
+  <div class="antiCard-group grid">
+    <span class="label"><Label label={tracker.string.Grouping} /></span>
+    <div class="value">
+      <DropdownRecord
+        items={groupByItems}
+        selected={_groupBy}
+        on:select={(result) => {
+          if (result === undefined) return
+          _groupBy = result.detail
+          updateOptions()
+        }}
+      />
     </div>
-    <div class="viewOption">
-      <div class="label">
-        <Label label={tracker.string.Ordering} />
-      </div>
-      <div class="optionContainer">
-        <DropdownNative items={orderByItems} bind:selected={orderBy} />
-      </div>
+    <span class="label"><Label label={tracker.string.Ordering} /></span>
+    <div class="value">
+      <DropdownRecord
+        items={orderByItems}
+        selected={_orderBy}
+        on:select={(result) => {
+          if (result === undefined) return
+          _orderBy = result.detail
+          updateOptions()
+        }}
+      />
     </div>
   </div>
-  <div class="groupContainer">
-    {#if completedIssuesPeriod}
-      <div class="viewOption">
-        <div class="label">
-          <Label label={tracker.string.CompletedIssues} />
-        </div>
-        <div class="optionContainer">
-          <DropdownNative items={dateModificationPeriodItems} bind:selected={completedIssuesPeriod} />
-        </div>
+  <div class="antiCard-group grid">
+    {#if _completedIssuesPeriod}
+      <span class="label"><Label label={tracker.string.CompletedIssues} /></span>
+      <div class="value">
+        <DropdownRecord
+          items={dateModificationPeriodItems}
+          selected={_completedIssuesPeriod}
+          on:select={(result) => {
+            if (result === undefined) return
+            _completedIssuesPeriod = result.detail
+            updateOptions()
+          }}
+        />
       </div>
     {/if}
-    <div class="viewOption">
-      <div class="label">
-        <Label label={tracker.string.SubIssues} />
-      </div>
-      <div class="optionContainer">
-        <MiniToggle bind:on={shouldShowSubIssues} />
-      </div>
+    <span class="label"><Label label={tracker.string.SubIssues} /></span>
+    <div class="value">
+      <MiniToggle bind:on={shouldShowSubIssues} on:change={updateOptions} />
     </div>
-    {#if groupBy === IssuesGrouping.Status || groupBy === IssuesGrouping.Priority}
-      <div class="viewOption">
-        <div class="label">
-          <Label label={tracker.string.ShowEmptyGroups} />
-        </div>
-        <div class="optionContainer">
-          <MiniToggle bind:on={shouldShowEmptyGroups} />
-        </div>
+    {#if _groupBy === IssuesGrouping.Status || _groupBy === IssuesGrouping.Priority}
+      <span class="label"><Label label={tracker.string.ShowEmptyGroups} /></span>
+      <div class="value">
+        <MiniToggle bind:on={_shouldShowEmptyGroups} on:change={updateOptions} />
       </div>
     {/if}
   </div>
 </div>
-
-<style lang="scss">
-  .root {
-    display: flex;
-    flex-direction: column;
-    width: 17rem;
-    background-color: var(--board-card-bg-color);
-  }
-
-  .groupContainer {
-    padding: 0.5rem 1rem;
-    border-bottom: 1px solid var(--popup-divider);
-  }
-
-  .viewOption {
-    display: flex;
-    min-height: 2rem;
-  }
-
-  .label {
-    display: flex;
-    align-items: center;
-    min-width: 5rem;
-    color: var(--theme-content-dark-color);
-  }
-
-  .optionContainer {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    flex-grow: 1;
-  }
-</style>

plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte

@@ -98,7 +98,7 @@
     >
       <svelte:fragment slot="content">
         {#if subIssues}
-          <div class="flex-row-center content-color text-sm">
+          <div class="flex-row-center content-color text-sm pointer-events-none">
             <div class="mr-1">
               <ProgressCircle bind:value={countComplate} bind:max={subIssues.length} size={'inline'} primary />
             </div>

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

@@ -51,6 +51,6 @@
   }}
 >
   <svelte:fragment slot="content">
-    <BooleanPresenter bind:value />
+    <div class="pointer-events-none"><BooleanPresenter bind:value /></div>
   </svelte:fragment>
 </Button>

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

@@ -64,12 +64,12 @@
     }}
   >
     <svelte:fragment slot="content">
-      <div class="flex-row-center">
+      <div class="flex-row-center pointer-events-none">
         {#if filters.length === 0}
           <Icon icon={IconAdd} size={'x-small'} />
-          <span class="ml-1"><Label label={view.string.Filter} /></span>
+          <span class="overflow-label ml-1"><Label label={view.string.Filter} /></span>
         {:else}
-          <span class="mr-1"><Label label={view.string.ClearFilters} /></span>
+          <span class="overflow-label mr-1"><Label label={view.string.ClearFilters} /></span>
           <Icon icon={IconClose} size={'x-small'} />
         {/if}
       </div>