Move UI changes to main (#6161)

Signed-off-by: Alexander Platov <[email protected]>

Author: haiodo

packages/theme/styles/popups.scss

@@ -194,7 +194,6 @@
     height: max-content;
     overflow-x: hidden;
     overflow-y: auto;
-    scrollbar-width: thin;
 
     &::-webkit-scrollbar { width: 0; }
     .box {

packages/ui/src/components/Button.svelte

@@ -57,6 +57,7 @@
   export let title: string | undefined = undefined
   export let borderStyle: 'solid' | 'dashed' | 'none' = 'solid'
   export let id: string | undefined = undefined
+  export let dataId: string | undefined = undefined
   export let input: HTMLButtonElement | undefined = undefined
   export let showTooltip: LabelAndProps | undefined = undefined
   export let short: boolean = false
@@ -154,6 +155,7 @@
   on:mousemove
   on:mouseleave
   {id}
+  data-id={dataId}
 >
   {#if icon && !loading}
     <div class="btn-icon pointer-events-none" class:resetIconSize={resetIconSize === 'icon'}>

packages/ui/src/components/NotificationToast.svelte

@@ -43,7 +43,7 @@
   $: icon = getIcon()
 </script>
 
-<div class="root" in:fade out:fade>
+<div class="notifyPopup" in:fade out:fade>
   <div class="flex-between">
     <div class="flex-row-center">
       {#if icon}
@@ -60,7 +60,7 @@
       <span class="overflow-label fs-bold text-base caption-color">{title}</span>
     </div>
     {#if onClose !== undefined}
-      <Button icon={Close} kind="ghost" size="small" on:click={onClose} />
+      <Button icon={Close} kind="ghost" size="small" dataId={'btnNotifyClose'} on:click={onClose} />
     {/if}
   </div>
 
@@ -76,7 +76,7 @@
 </div>
 
 <style lang="scss">
-  .root {
+  .notifyPopup {
     overflow: hidden;
     display: flex;
     flex-direction: column;

plugins/activity-resources/src/components/ActivityMessageAction.svelte

@@ -22,7 +22,8 @@
   export let iconProps: any | undefined = undefined
   export let size: IconSize = 'small'
   export let action: (ev: MouseEvent) => Promise<void> | void = async () => {}
-  export let opened = false
+  export let opened: boolean = false
+  export let dataId: string | undefined = undefined
 
   function onClick (ev: MouseEvent): void {
     ev.stopPropagation()
@@ -38,6 +39,7 @@
   size="small"
   kind="tertiary"
   pressed={opened}
-  on:click={onClick}
+  {dataId}
   tooltip={{ label }}
+  on:click={onClick}
 />

plugins/activity-resources/src/components/ActivityMessageActions.svelte

@@ -79,7 +79,7 @@
 </script>
 
 {#if message}
-  <div class="root">
+  <div class="activityMessage-actionPopup">
     {#each inlineActions as inline}
       {#if inline.icon}
         {#await getResource(inline.action) then action}
@@ -88,6 +88,7 @@
             size={inline.actionProps?.size ?? 'small'}
             icon={inline.icon}
             iconProps={inline.actionProps?.iconProps}
+            dataId={inline._id}
             action={(ev) => action(message, ev, { onOpen, onClose })}
           />
         {/await}
@@ -96,18 +97,19 @@
 
     {#if withActionMenu}
       <ActivityMessageAction
-        size="small"
         icon={IconMoreV}
+        label={view.string.MoreActions}
+        size={'small'}
         opened={isActionMenuOpened}
+        dataId={'btnMoreActions'}
         action={showMenu}
-        label={view.string.MoreActions}
       />
     {/if}
   </div>
 {/if}
 
 <style lang="scss">
-  .root {
+  .activityMessage-actionPopup {
     display: flex;
     align-items: center;
     border-radius: 0.375rem;

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

@@ -41,12 +41,12 @@
   export let shouldShowAvatar = true
   export let inline: boolean = false
   export let disabled: boolean = false
-  export let oneLine: boolean = false
+  export let oneLine: boolean = true
   export let shouldShowName: boolean = true
   export let shouldShowTooltip: boolean = false
   export let noUnderline: boolean = false
   export let accent: boolean = false
-  export let shrink: number = 0
+  export let shrink: number = 1
   export let space: Ref<Project> | undefined = undefined
   export let projectType: Ref<ProjectType> | undefined = $selectedTypeStore
   export let taskType: Ref<TaskType> | undefined = undefined

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

@@ -27,7 +27,7 @@
   export let kind: ButtonKind = 'link'
   export let size: ButtonSize = 'medium'
   export let shouldShowName: boolean = true
-  export let shrink: number = 0
+  export let shrink: number = 1
   export let disabled: boolean = false
 
   import { selectedTaskTypeStore, selectedTypeStore } from '../../index'

plugins/templates-resources/src/components/Templates.svelte

@@ -162,7 +162,7 @@
 
   <div class="hulyComponent-content__container columns">
     <div class="hulyComponent-content__column">
-      <div id="create-template" class="flex-between trans-title m-3">
+      <div id="create-template" class="flex-between trans-title flex-no-shrink bottom-divider p-3">
         <Button
           icon={templatesPlugin.icon.Template}
           label={templatesPlugin.string.CreateTemplate}
@@ -179,6 +179,7 @@
             label={getEmbeddedLabel(space.name)}
             actions={async () => await getSpaceActions(space)}
             isFold
+            noDivider
             empty={getTemps.length === 0}
           >
             {#each getTemps as t (t._id)}

plugins/text-editor-resources/src/components/TextActionButton.svelte

@@ -66,6 +66,7 @@
   class:selected
   use:tooltip={{ label: action.label }}
   tabindex="0"
+  data-id={'btn' + action.label.split(':').pop()}
   on:click|preventDefault|stopPropagation={handleClick}
 >
   <Icon icon={action.icon} {size} />

plugins/time-resources/src/components/DueDateEditor.svelte

@@ -55,6 +55,7 @@
   type="type-button"
   icon={time.icon.Calendar}
   iconSize="small"
+  id={'dueDateButton'}
   title={buttonTitle}
   label={buttonLabel}
   pressed={opened}