Group viewlet settings fields (#2341)

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

packages/ui/src/components/ToggleButton.svelte

@@ -16,25 +16,22 @@
   import type { Asset, IntlString } from '@hcengineering/platform'
   import { createEventDispatcher, onMount } from 'svelte'
   import { registerFocus } from '../focus'
-  import type { AnySvelteComponent, ButtonKind, ButtonSize } from '../types'
+  import type { AnySvelteComponent, ButtonSize } from '../types'
   import Icon from './Icon.svelte'
   import Label from './Label.svelte'
 
   export let value: boolean
   export let label: IntlString | undefined = undefined
   export let labelParams: Record<string, any> = {}
-  export let kind: ButtonKind = 'secondary'
   export let size: ButtonSize = 'medium'
   export let icon: Asset | AnySvelteComponent | undefined = undefined
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = undefined
-  export let resetIconSize: boolean = false
-  export let highlight: boolean = false
   export let selected: boolean = false
   export let focus: boolean = false
-  export let borderStyle: 'solid' | 'dashed' = 'solid'
   export let id: string | undefined = undefined
   export let input: HTMLButtonElement | undefined = undefined
+  export let backgroundColor: string | undefined = undefined
 
   $: iconOnly = label === undefined && $$slots.content === undefined
 
@@ -66,19 +63,23 @@
   }
 
   const dispatch = createEventDispatcher()
+
+  function getStyle (backgroundColor: string | undefined, width: string | undefined) {
+    let style = width ? `width: ${width};` : ''
+    if (backgroundColor) {
+      style += ` background: ${backgroundColor};`
+    }
+    return style
+  }
 </script>
 
 <button
   bind:this={input}
-  class="button {kind} {size} jf-{justify}"
+  class="button {size} jf-{justify}"
   class:only-icon={iconOnly}
-  class:border-solid={borderStyle === 'solid'}
-  class:border-dashed={borderStyle === 'dashed'}
-  class:highlight
   class:selected
   class:disabled={!value}
-  style={width ? 'width: ' + width : ''}
+  style={getStyle(backgroundColor, width)}
-  type={kind === 'primary' ? 'submit' : 'button'}
   on:click={() => {
     value = !value
     dispatch('change', value)
@@ -90,12 +91,7 @@
   {id}
 >
   {#if icon}
-    <div
+    <div class="btn-icon mr-2 pointer-events-none">
-      class="btn-icon pointer-events-none"
-      class:mr-1={!iconOnly && kind === 'no-border'}
-      class:mr-2={!iconOnly && kind !== 'no-border'}
-      class:resetIconSize
-    >
       <Icon bind:icon size={'small'} />
     </div>
   {/if}
@@ -150,26 +146,11 @@
     transition-property: border, background-color, color, box-shadow;
     transition-duration: 0.15s;
 
-    &.border-solid {
-      border-style: solid;
-    }
-
-    &.border-dashed {
-      border-style: dashed;
-    }
-
     .btn-icon {
       color: var(--content-color);
       transition: color 0.15s;
       pointer-events: none;
     }
-    &.highlight {
-      box-shadow: inset 0 0 1px 1px var(--primary-bg-color);
-
-      &:hover {
-        box-shadow: inset 0 0 1px 1px var(--primary-bg-hover);
-      }
-    }
     &:hover {
       color: var(--accent-color);
       transition-duration: 0;
@@ -178,9 +159,6 @@
         color: var(--caption-color);
       }
     }
-    &:focus {
-      border-color: var(--primary-edit-border-color) !important;
-    }
     &.disabled {
       color: rgb(var(--caption-color) / 40%);
 
@@ -198,118 +176,5 @@
     &.only-icon {
       padding: 0;
     }
-
-    &.secondary {
-      background-color: var(--button-bg-color);
-      border-color: var(--button-border-color);
-      box-shadow: var(--button-shadow);
-
-      &:hover {
-        background-color: var(--button-bg-hover);
-        border-color: var(--button-border-hover);
-      }
-      &.disabled {
-        background-color: var(--button-disabled-color);
-        border-color: transparent;
-      }
-
-      &.selected {
-        background-color: var(--button-bg-hover);
-        border-color: var(--button-border-hover);
-        color: var(--caption-color);
-
-        .btn-icon {
-          color: var(--accent-color);
-        }
-      }
-    }
-    &.no-border {
-      font-weight: 400;
-      color: var(--accent-color);
-      background-color: var(--noborder-bg-color);
-      box-shadow: var(--button-shadow);
-
-      &:hover {
-        color: var(--caption-color);
-        background-color: var(--noborder-bg-hover);
-
-        .btn-icon {
-          color: var(--caption-color);
-        }
-      }
-      &.disabled {
-        color: var(--content-color);
-        background-color: var(--button-disabled-color);
-        cursor: default;
-        &:hover {
-          color: var(--content-color);
-          .btn-icon {
-            color: var(--content-color);
-          }
-        }
-      }
-    }
-    &.transparent:hover,
-    &.transparent.selected {
-      background-color: var(--button-bg-hover);
-    }
-    &.link {
-      padding: 0 0.875rem;
-      &:hover {
-        color: var(--caption-color);
-        background-color: var(--body-color);
-        border-color: var(--divider-color);
-        .btn-icon {
-          color: var(--content-color);
-        }
-      }
-    }
-    &.link-bordered {
-      padding: 0 0.375rem;
-      color: var(--accent-color);
-      border-color: var(--button-border-color);
-      &:hover {
-        color: var(--accent-color);
-        border-color: var(--button-border-hover);
-        .btn-icon {
-          color: var(--accent-color);
-        }
-      }
-    }
-    &.primary {
-      padding: 0 1rem;
-      color: var(--white-color);
-      background-color: var(--primary-bg-color);
-      border-color: var(--primary-bg-color);
-      box-shadow: var(--primary-shadow);
-
-      .btn-icon {
-        color: var(--white-color);
-      }
-      &:hover {
-        background-color: var(--primary-bg-hover);
-      }
-      &.disabled {
-        background-color: #5e6ad255;
-        border-color: #5e6ad255;
-      }
-    }
-
-    &.dangerous {
-      color: var(--white-color);
-      background-color: var(--dangerous-bg-color);
-      border-color: var(--dangerous-bg-color);
-
-      &:hover {
-        background-color: var(--dangerous-bg-hover);
-      }
-      &:focus {
-        box-shadow: var(--dangerous-shadow);
-      }
-    }
-
-    .resetIconSize {
-      font-size: 16px;
-    }
   }
 </style>

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

@@ -13,16 +13,16 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import presentation, { Card, createQuery, getAttributePresenterClass, getClient } from '@hcengineering/presentation'
-  import { BuildModelKey, Viewlet, ViewletPreference } from '@hcengineering/view'
   import core, { AnyAttribute, ArrOf, Class, Doc, Lookup, Ref, Type } from '@hcengineering/core'
-  import { Button, ToggleButton } from '@hcengineering/ui'
-  import { createEventDispatcher } from 'svelte'
   import { IntlString } from '@hcengineering/platform'
-  import { buildConfigLookup, getLookupClass, getLookupLabel, getLookupProperty } from '../utils'
-  import { deepEqual } from 'fast-equals'
   import preferencePlugin from '@hcengineering/preference'
+  import presentation, { Card, createQuery, getAttributePresenterClass, getClient } from '@hcengineering/presentation'
+  import { Button, getPlatformColorForText, ToggleButton } from '@hcengineering/ui'
+  import { BuildModelKey, Viewlet, ViewletPreference } from '@hcengineering/view'
+  import { deepEqual } from 'fast-equals'
+  import { createEventDispatcher } from 'svelte'
   import view from '../plugin'
+  import { buildConfigLookup, getLookupClass, getLookupLabel, getLookupProperty } from '../utils'
 
   export let viewlet: Viewlet
 
@@ -237,6 +237,16 @@
       selected = i
     }
   }
+
+  function getColor (attribute: AttributeConfig): string {
+    const color = getPlatformColorForText(attribute._class)
+    return `${color + (attribute.enabled ? 'cc' : '33')};`
+  }
+
+  function getStyle (attribute: AttributeConfig): string {
+    const color = getPlatformColorForText(attribute._class)
+    return `border: 1px solid ${color + (attribute.enabled ? 'ff' : 'cc')};`
+  }
 </script>
 
 <Card
@@ -252,6 +262,7 @@
     {#each attributes as attribute, i}
       <div
         class="mr-2 mb-2"
+        style={getStyle(attribute)}
         bind:this={elements[i]}
         draggable={true}
         on:dragover|preventDefault={(ev) => {
@@ -265,7 +276,7 @@
           selected = undefined
         }}
       >
-        <ToggleButton label={attribute.label} bind:value={attribute.enabled} />
+        <ToggleButton backgroundColor={getColor(attribute)} label={attribute.label} bind:value={attribute.enabled} />
       </div>
     {/each}
   </div>