UBER-219: updated CreateIssue layout

packages/presentation/lang/en.json

@@ -14,17 +14,16 @@
     "AddSocialLinks": "Add social links",
     "EditSocialLinks": "Edit social links",
     "Change": "Change",
-    "Remove": "Remove",    
+    "Remove": "Remove",
     "Search": "Search...",
-    "Spaces": "Spaces",    
-    "CreateMore": "Create more",    
+    "Spaces": "Spaces",
     "NumberSpaces": "{count, plural, =0 {In} =1 {In 1 place} other {In # places}}",
     "InThis": "In this {space}",
     "NoMatchesInThis": "No matches in this {space}",
     "NoMatchesFound": "No matches found",
     "NotInThis": "Not in this {space}",
     "Add": "Add",
-    "Edit": "Edit",    
+    "Edit": "Edit",
     "DocumentPreview": "Preview",
     "MakePrivate": "Make private",
     "MakePrivateDescription": "Only members can see it"

packages/presentation/lang/ru.json

@@ -16,8 +16,7 @@
     "Change": "Изменить",
     "Remove": "Удалить",    
     "Search": "Поиск...",
-    "Spaces": "Пространства",    
-    "CreateMore": "Создать еще",    
+    "Spaces": "Пространства",
     "NumberSpaces": "{count, plural, =0 {В} =1 {В 1 месте} other {В # местах}}",
     "InThis": "В этом {space}",
     "NoMatchesInThis": "В этом {space} совпадения не обнаружены",

packages/presentation/src/components/Card.svelte

@@ -15,7 +15,7 @@
 -->
 <script lang="ts">
   import type { IntlString } from '@hcengineering/platform'
-  import { Button, IconClose, Label, MiniToggle, Scroller } from '@hcengineering/ui'
+  import { Button, IconClose, Label, Scroller } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import presentation from '..'
   import { deviceOptionsStore as deviceInfo, resizeObserver } from '@hcengineering/ui'
@@ -25,10 +25,12 @@
   export let labelProps: any | undefined = undefined
   export let okAction: () => Promise<void> | void
   export let canSave: boolean = false
-  export let createMore: boolean | undefined = undefined
   export let okLabel: IntlString = presentation.string.Create
   export let onCancel: Function | undefined = undefined
-  export let fullSize = false
+  export let fullSize: boolean = false
+  export let hideAttachments: boolean = false
+  export let hideSubheader: boolean = false
+  export let gap: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
 
@@ -44,7 +46,7 @@
     dispatch('changeContent')
   }}
 >
-  <div class="antiCard-header">
+  <div class="antiCard-header" class:withSub={$$slots.subheader && !hideSubheader}>
     <div class="antiCard-header__title-wrap">
       {#if $$slots.header}
         <slot name="header" />
@@ -58,12 +60,15 @@
         {/if}
       </span>
     </div>
-    <div class="buttons-group small-gap">
+    <div class="buttons-group small-gap content-dark-color">
       <Button
         id="card-close"
         focusIndex={10002}
         icon={IconClose}
+        iconSize={'medium'}
+        iconProps={{ fill: 'var(--theme-dark-color)' }}
         kind={'transparent'}
+        size={'small'}
         on:click={() => {
           if (onCancel) {
             onCancel()
@@ -74,25 +79,35 @@
       />
     </div>
   </div>
-  <Scroller horizontal>
-    <div class="antiCard-content">
-      <slot />
+  {#if $$slots.subheader && !hideSubheader}
+    <div class="antiCard-subheader">
+      <slot name="subheader" />
     </div>
-  </Scroller>
+  {/if}
+  <div class="antiCard-content">
+    <Scroller padding={$$slots.pool ? '.5rem 1.5rem' : '.5rem 1.5rem 1.5rem'} {gap}>
+      <slot />
+    </Scroller>
+  </div>
   {#if $$slots.pool}
     <div class="antiCard-pool">
       <slot name="pool" />
     </div>
   {/if}
-  <div class="antiCard-pool__separator" />
-  <div class="antiCard-footer reverse">
+  {#if $$slots.attachments && !hideAttachments}
+    <div class="antiCard-attachments">
+      <Scroller horizontal contentDirection={'horizontal'} {gap}>
+        <div class="antiCard-attachments__container">
+          <slot name="attachments" />
+        </div>
+      </Scroller>
+    </div>
+  {/if}
+  <div class="antiCard-footer divide reverse">
     <div class="buttons-group text-sm flex-no-shrink">
       {#if $$slots.buttons}
         <slot name="buttons" />
       {/if}
-      {#if createMore !== undefined}
-        <MiniToggle label={presentation.string.CreateMore} bind:on={createMore} />
-      {/if}
       <Button
         loading={okProcessing}
         focusIndex={10001}
@@ -109,11 +124,9 @@
           if (r instanceof Promise) {
             r.then(() => {
               okProcessing = false
-              if (!createMore) {
-                dispatch('close')
-              }
+              dispatch('close')
             })
-          } else if (!createMore) {
+          } else {
             okProcessing = false
             dispatch('close')
           }

packages/presentation/src/components/SpaceCreateCard.svelte

@@ -36,7 +36,7 @@
       </div>
     {/if}
   </div>
-  <div class="antiCard-content"><slot /></div>
+  <div class="antiCard-content px-6"><slot /></div>
   <div class="antiCard-footer">
     <Button
       disabled={!canSave}

packages/presentation/src/components/icons/Forward.svelte

@@ -18,7 +18,5 @@
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M11.4,7.7L5.7,2.1C5.5,1.9,5.2,1.9,5,2.1S4.8,2.6,5,2.8L10.3,8L5,13.3c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1l5.6-5.6c0.1-0.1,0.1-0.2,0.1-0.4S11.4,7.8,11.4,7.7z"
-  />
+  <path d="M11.0001 8L6.00008 3L5.29297 3.70711L9.58586 8L5.29297 12.2929L6.00008 13L11.0001 8Z" />
 </svg>

packages/presentation/src/plugin.ts

@@ -46,7 +46,6 @@ export default plugin(presentationId, {
     Remove: '' as IntlString,
     Search: '' as IntlString,
     Spaces: '' as IntlString,
-    CreateMore: '' as IntlString,
     NumberMembers: '' as IntlString,
     NumberSpaces: '' as IntlString,
     InThis: '' as IntlString,

packages/text-editor/src/components/CollaborationDiffViewer.svelte

@@ -130,7 +130,7 @@
     max-height: inherit !important;
     outline: none;
     line-height: 150%;
-    color: var(--accent-color);
+    color: var(--theme-caption-color);
 
     p:not(:last-child) {
       margin-block-end: 1em;
@@ -148,10 +148,13 @@
     p.is-editor-empty:first-child::before {
       content: attr(data-placeholder);
       float: left;
-      color: var(--dark-color);
+      color: var(--theme-halfcontent-color);
       pointer-events: none;
       height: 0;
     }
+    &:focus-within p.is-editor-empty:first-child::before {
+      color: var(--theme-trans-color);
+    }
 
     &::-webkit-scrollbar-thumb {
       background-color: var(--scrollbar-bar-color);
@@ -166,14 +169,6 @@
       margin: 0;
     }
   }
-  /* Placeholder (at the top) */
-  .ProseMirror p.is-editor-empty:first-child::before {
-    color: #adb5bd;
-    content: attr(data-placeholder);
-    float: left;
-    height: 0;
-    pointer-events: none;
-  }
 
   .lint-icon {
     display: inline-block;
@@ -227,7 +222,7 @@
   }
 
   .code-block {
-    border: 1px solid var(--divider-color);
+    border: 1px solid var(--theme-divider-color);
     border-radius: 4px;
     padding: 0.5rem;
   }

packages/text-editor/src/components/StyledTextArea.svelte

@@ -12,7 +12,7 @@
   export let showButtons = true
   export let buttonSize: IconSize = 'small'
   export let focus = false
-  export let emphasized: boolean = false
+  export let kind: 'normal' | 'emphasized' | 'indented' = 'normal'
   export let isScrollable: boolean = false
   export let maxHeight: 'max' | 'card' | 'limited' | string | undefined = undefined
   export let required = false
@@ -49,8 +49,9 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-  class="antiComponent styled-box clear-mins"
-  class:antiEmphasized={emphasized}
+  class="antiComponent styled-box focusable clear-mins"
+  class:antiEmphasized={kind === 'emphasized'}
+  class:antiIndented={kind === 'indented'}
   on:click={() => {
     textEditor?.focus()
   }}

packages/text-editor/src/components/StyledTextBox.svelte

@@ -22,7 +22,7 @@
   export let content: string
   export let placeholder: IntlString = textEditorPlugin.string.EditorPlaceholder
 
-  export let emphasized: boolean = false
+  export let kind: 'normal' | 'emphasized' | 'indented' = 'normal'
   export let alwaysEdit: boolean = false
   export let showButtons: boolean = true
   export let hideAttachments: boolean = false
@@ -133,8 +133,9 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="antiComponent styled-box clear-mins"
-  class:antiEmphasized={emphasized}
-  class:antiEmphasized-focus={(mode === Mode.Edit || alwaysEdit) && focused}
+  class:antiEmphasized={kind === 'emphasized'}
+  class:antiIndented={kind === 'indented'}
+  class:focusable={(mode === Mode.Edit || alwaysEdit) && focused}
   on:click={() => {
     if (alwaysEdit && focused) {
       textEditor?.focus()
@@ -230,9 +231,7 @@
 
     .label {
       padding-bottom: 0.25rem;
-      font-size: 0.75rem;
-      color: var(--caption-color);
-      opacity: 0.3;
+      color: var(--theme-halfcontent-color);
       transition: top 200ms;
       pointer-events: none;
       user-select: none;

packages/text-editor/src/components/StyledTextEditor.svelte

@@ -80,6 +80,7 @@
 
   let textEditor: TextEditor
   let isEmpty = true
+  let contentHeight: number
 
   export function submit (): void {
     textEditor.submit()
@@ -551,7 +552,13 @@
     </div>
   {/if}
   <div class="textInput" class:focusable>
-    <div class="inputMsg" class:scrollable={isScrollable} style="--texteditor-maxheight: {varsStyle};">
+    <div
+      bind:clientHeight={contentHeight}
+      class="inputMsg"
+      class:scrollable={isScrollable}
+      class:showScroll={contentHeight > 32}
+      style="--texteditor-maxheight: {varsStyle};"
+    >
       {#if isScrollable}
         <Scroller>
           <TextEditor
@@ -617,28 +624,31 @@
     flex-grow: 1;
     display: flex;
     flex-direction: column;
-    min-height: 4.5rem;
+    min-height: 1.25rem;
 
     .textInput {
       flex-grow: 1;
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
-      min-height: 2.75rem;
+      min-height: 1.25rem;
       background-color: transparent;
 
       .inputMsg {
         align-self: stretch;
         width: 100%;
         min-height: 0;
-        color: var(--content-color);
+        color: var(--theme-caption-color);
         background-color: transparent;
 
         :global(.ProseMirror) {
           min-height: 0;
           // max-height: 100%;
           height: 100%;
         }
+        &:not(.showScroll)::-webkit-scrollbar-thumb {
+          background-color: transparent;
+        }
 
         &.scrollable {
           overflow: auto;

packages/text-editor/src/components/TextEditor.svelte

@@ -248,7 +248,7 @@
     max-height: inherit !important;
     outline: none;
     line-height: 150%;
-    color: var(--accent-color);
+    color: var(--theme-caption-color);
 
     p:not(:last-child) {
       margin-block-end: 1em;
@@ -262,10 +262,13 @@
     p.is-editor-empty:first-child::before {
       content: attr(data-placeholder);
       float: left;
-      color: var(--dark-color);
+      color: var(--theme-halfcontent-color);
       pointer-events: none;
       height: 0;
     }
+    &:focus-within p.is-editor-empty:first-child::before {
+      color: var(--theme-trans-color);
+    }
 
     &::-webkit-scrollbar-thumb {
       background-color: var(--scrollbar-bar-color);

packages/theme/styles/_colors.scss

@@ -69,13 +69,14 @@
   --theme-button-pressed: rgba(255, 255, 255, .08);
   --theme-button-focused: rgba(255, 255, 255, .04);
   --theme-button-disabled: rgba(255, 255, 255, .02);
-  --theme-button-border: rgba(255, 255, 255, .06);
+  --theme-button-border: rgba(255, 255, 255, .09);
 
   --theme-refinput-color: rgba(255, 255, 255, .03);
   --theme-refinput-divider: rgba(255, 255, 255, .07);
   --theme-refinput-border: rgba(255, 255, 255, .03);
 
   --theme-bg-color: #1A1A28;
+  --theme-bg-accent-color: rgba(0, 0, 0, .08);
   --theme-back-color: #0f0f18;
   --theme-overlay-color: rgba(0, 0, 0, .3);
   --theme-statusbar-color: #2C2C35;
@@ -239,13 +240,14 @@
   --theme-button-pressed: rgba(0, 0, 0, .08);
   --theme-button-focused: rgba(0, 0, 0, .04);
   --theme-button-disabled: rgba(0, 0, 0, .02);
-  --theme-button-border: rgba(0, 0, 0, .06);
+  --theme-button-border: rgba(0, 0, 0, .09);
 
   --theme-refinput-color: rgba(0, 0, 0, .03);
   --theme-refinput-divider: rgba(0, 0, 0, .07);
   --theme-refinput-border: rgba(0, 0, 0, .03);
 
   --theme-bg-color: #F1F1F4;
+  --theme-bg-accent-color: rgba(255, 255, 255, .08);
   --theme-back-color: #D9D9DD;
   --theme-overlay-color: rgba(0, 0, 0, .2);
   --theme-statusbar-color: #bfbfc6;