Add Search (#190)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-09-13 18:05:39 +03:00 committed by GitHub
parent 91b9543599
commit 570c3e2bac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 6 deletions

View File

@ -22,7 +22,7 @@
export let description: IntlString | undefined export let description: IntlString | undefined
</script> </script>
<div class="container"> <div class="header-container">
<div class="flex-center"> <div class="flex-center">
{#if icon }<span class="icon"><Icon {icon} size={'small'}/></span>{/if} {#if icon }<span class="icon"><Icon {icon} size={'small'}/></span>{/if}
<span class="label">{label}</span> <span class="label">{label}</span>
@ -31,7 +31,7 @@
</div> </div>
<style lang="scss"> <style lang="scss">
.container { .header-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
@ -46,7 +46,6 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
user-select: none;
} }
.label { .label {
font-weight: 500; font-weight: 500;

View File

@ -54,15 +54,19 @@
</div> </div>
<style lang="scss"> <style lang="scss">
// .container {
// display: flex;
// }
.container { .container {
display: grid; display: grid;
grid-template-columns: auto; grid-template-columns: auto;
grid-auto-flow: column; grid-auto-flow: column;
grid-auto-columns: min-content; grid-auto-columns: minmax(min-content, auto);
gap: .75rem; gap: .75rem;
align-items: center; align-items: center;
padding: 0 2rem 0 2.5rem; padding: 0 2rem 0 2.5rem;
height: 4.5rem; height: 4.5rem;
min-height: 4.5rem; min-height: 4.5rem;
max-width: max-content;
} }
</style> </style>

View File

@ -22,7 +22,7 @@ import type { Viewlet } from '@anticrm/view'
import { getClient } from '@anticrm/presentation' import { getClient } from '@anticrm/presentation'
import { Icon, Component } from '@anticrm/ui' import { Icon, Component, EditWithIcon, IconSearch } from '@anticrm/ui'
import view from '@anticrm/view' import view from '@anticrm/view'
import core from '@anticrm/core' import core from '@anticrm/core'
@ -56,7 +56,7 @@ $: onSpace(space)
{#if viewlets.length > 0} {#if viewlets.length > 0}
<div class="toolbar"> <div class="toolbar">
<div style="flex-grow: 1;" /> <EditWithIcon icon={IconSearch} placeholder={'Search for something'} />
<div class="flex"> <div class="flex">
{#each viewlets as viewlet, i} {#each viewlets as viewlet, i}