UBER-219: updated CreateIssue layout (#3244)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

plugins/attachment-resources/src/components/AttachmentPresenter.svelte

@@ -81,6 +81,7 @@
   >
     <div
       class="flex-center icon"
+      class:svg={value.type === 'image/svg+xml'}
       class:image={isImage(value.type)}
       style:background-image={isImage(value.type) ? `url(${getFileUrl(value.file)})` : 'none'}
     >
@@ -106,7 +107,7 @@
           on:click={(ev) => {
             ev.stopPropagation()
             ev.preventDefault()
-            dispatch('remove')
+            dispatch('remove', value)
           }}
         >
           <Label label={presentation.string.Delete} />
@@ -118,33 +119,43 @@
 
 <style lang="scss">
   .attachment-container {
-    padding: 0.375rem 0.75rem 0.375rem 0.375rem;
+    flex-shrink: 0;
     width: auto;
+    height: 3rem;
     min-width: 14rem;
     max-width: 19rem;
-    background-color: var(--theme-button-enabled);
-    border: 1px solid var(--theme-button-border);
+    background-color: var(--theme-button-hovered);
     border-radius: 0.25rem;
 
     .icon {
       flex-shrink: 0;
-      margin-right: 0.75rem;
-      width: 3.25rem;
-      height: 3.25rem;
-      border: 1px solid var(--primary-button-border);
-      border-radius: 0.25rem;
+      width: 3rem;
+      height: 3rem;
+      border: 1px solid var(--theme-button-border);
+      border-radius: 0.25rem 0 0 0.25rem;
       cursor: pointer;
 
       &:not(.image) {
         color: var(--primary-button-color);
         background-color: var(--primary-button-enabled);
       }
+      &.svg {
+        background-color: #fff;
+      }
       &.image {
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;
       }
     }
+    .info-container {
+      padding: 0.5rem 0.75rem;
+      width: 100%;
+      height: 100%;
+      border: 1px solid var(--theme-button-border);
+      border-left: none;
+      border-radius: 0 0.25rem 0.25rem 0;
+    }
     .name {
       white-space: nowrap;
       font-size: 0.8125rem;
@@ -152,7 +163,6 @@
       cursor: pointer;
     }
     .info-content {
-      margin-top: 0.125rem;
       white-space: nowrap;
       font-size: 0.6875rem;
       color: var(--theme-darker-color);

plugins/attachment-resources/src/components/AttachmentStyledBox.svelte

@@ -32,7 +32,7 @@
   export let placeholder: IntlString | undefined = undefined
   export let alwaysEdit = false
   export let showButtons = false
-  export let emphasized: boolean = false
+  export let kind: 'normal' | 'emphasized' | 'indented' = 'normal'
   export let buttonSize: IconSize = 'medium'
   export let formatButtonSize: IconSize = 'small'
   export let maxHeight: 'max' | 'card' | 'limited' | string = 'max'
@@ -302,6 +302,11 @@
   export function isEmptyContent (): boolean {
     return refInput.isEmptyContent()
   }
+
+  $: dispatch('attachments', {
+    size: attachments.size,
+    values: attachments.size === 0 ? true : attachments
+  })
 </script>
 
 <input
@@ -337,7 +342,7 @@
       {formatButtonSize}
       {maxHeight}
       {focusable}
-      {emphasized}
+      {kind}
       {enableBackReferences}
       on:changeSize
       on:changeContent