Add inline component Link (#98)

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

packages/theme/styles/_layouts.scss

@@ -14,6 +14,13 @@
 //
 
 /* CLEAR */
+a {
+  font: inherit;
+  color: var(--theme-content-color);
+  &:hover { color: var(--theme-caption-color); }
+  &:active { color: var(--theme-content-color); }
+  &:visited { color: var(--theme-content-color); }
+}
 button {
   display: flex;
   justify-content: center;

packages/ui/src/components/Link.svelte

@@ -0,0 +1,53 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// 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 type { IntlString, Asset } from '@anticrm/platform'
+  import type { AnySvelteComponent } from '@anticrm/ui'
+  import Icon from './Icon.svelte'
+
+  export let label: IntlString
+  export let href: string
+  export let icon: Asset | AnySvelteComponent | undefined
+</script>
+
+<span class="container">
+  {#if icon}
+    <span class="icon">
+      {#if typeof (icon) === 'string'}
+        <Icon {icon} size={'small'}/>
+      {:else}
+        <svelte:component this={icon} size={'small'} />
+      {/if}
+    </span>
+  {/if}
+  <a {href}>{label}</a>
+</span>
+
+<style lang="scss">
+  .container {
+    display: inline-flex;
+    align-items: center;
+    line-height: 100%;
+
+    .icon {
+      margin-right: .25rem;
+      transform-origin: center center;
+      transform: scale(.75);
+      opacity: .6;
+    }
+    &:hover .icon { opacity: 1; }
+    &:active .icon { opacity: .6; }
+  }
+</style>

packages/ui/src/index.ts

@@ -51,6 +51,7 @@ export { default as EditWithIcon } from './components/EditWithIcon.svelte'
 export { default as Loading } from './components/Loading.svelte'
 export { default as Popup } from './components/Popup.svelte'
 export { default as CircleButton } from './components/CircleButton.svelte'
+export { default as Link } from './components/Link.svelte'
 
 export { default as IconAdd } from './components/icons/Add.svelte'
 export { default as IconClose } from './components/icons/Close.svelte'

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

@@ -19,8 +19,9 @@
   import type { Ref, Space, Doc } from '@anticrm/core'
   import { generateId } from '@anticrm/core'
 
-  import { EditBox, Button, CircleButton, Grid, Label, showModal } from '@anticrm/ui'
+  import { EditBox, Button, CircleButton, Grid, Label, showModal, Link } from '@anticrm/ui'
   import AvatarEditor from './AvatarEditor.svelte'
+  import File from './icons/File.svelte'
   import FileUpload from './icons/FileUpload.svelte'
   import Edit from './icons/Edit.svelte'
   import Twitter from './icons/Twitter.svelte'
@@ -105,7 +106,7 @@
   </div>
   <div class="abs-lb-content">
     {#if resumeName}
-      <a href="#">{resumeName}</a>
+      <Link label={resumeName} href={'#'} icon={File} />
     {:else}
       <Button label={'Upload resume'} {loading} icon={FileUpload} size={'small'} transparent primary on:click={() => { inputFile.click() }}/>
       <input bind:this={inputFile} type="file" name="file" id="file" style="display: none" on:change={fileSelected}/>
@@ -125,6 +126,18 @@
 </div>
 
 <style lang="scss">
+  a {
+    display: flex;
+    align-items: center;
+  }
+  a span {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: .5rem;
+    transform-origin: center center;
+    transform: scale(.75);
+  }
   .header {
     position: relative;
     padding: 1.5rem 1.5rem 0;