universal space panel

Signed-off-by: Andrey Platov <andrey@hardcoreeng.com>

plugins/workbench-resources/src/components/navigator/SpacePanel.svelte

@@ -0,0 +1,180 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
+// 
+// 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 { Ref, Doc, Class, Space } from '@anticrm/core'
+  import { IconClose, Label, EditBox, Dropdown, Grid, Icon } from '@anticrm/ui'
+  import { getClient, createQuery, AttributeBarEditor } from '@anticrm/presentation'
+
+  import { createEventDispatcher } from 'svelte'
+
+  import core from '@anticrm/core'
+
+  export let _id: Ref<Space>
+  export let spaceClass: Ref<Class<Space>>
+
+  let space: Space
+
+  // export let label: IntlString
+  // export let icon: Asset | AnySvelteComponent
+
+  const dispatch = createEventDispatcher()
+
+  const client = getClient()
+  const clazz = client.getHierarchy().getClass(spaceClass)
+
+  const query = createQuery()
+  $: query.query(core.class.Space, { _id }, result => { space = result[0] })
+
+  const tabs: IntlString[] = ['General' as IntlString, 'Members' as IntlString]
+  let selected = 0
+
+  function onNameChange(ev: Event) {
+    client.updateDoc(spaceClass, space.space, space._id, { name: (ev.target as HTMLInputElement).value })
+  }
+
+</script>
+
+<div class="overlay" on:click={() => { dispatch('close') }}/>
+<div class="dialog-container">
+  <div class="flex-row-center header">
+    <Icon icon={clazz.icon} size={'medium'} />
+    <div class="flex-grow fs-title ml-2"><Label label={clazz.label} /></div>
+    <div class="tool" on:click={() => { dispatch('close') }}><IconClose size={'small'} /></div>
+  </div>
+  <div class="flex-row-center subtitle">
+    Subtitle
+  </div>
+  <div class="flex-stretch tab-container">
+    {#each tabs as tab, i}
+      <div class="flex-row-center tab" class:selected={i === selected}
+           on:click={() => { selected = i }}>
+        <Label label={tab}/>
+      </div>
+    {/each}
+    <div class="grow"/>
+  </div>
+  <div class="scroll">
+    <div class="flex-col box">
+      {#if selected === 0}
+        {#if space}
+          <Grid rowGap={1.5}>
+            <EditBox label={clazz.label} icon={clazz.icon} bind:value={space.name} placeholder="Software Engineer" maxWidth="39rem" focus on:change={onNameChange}/>
+            <!-- <AttributeBarEditor maxWidth="39rem" object={space} key="name"/> -->
+          </Grid>
+        {/if}
+      {:else}
+        Members and other
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .dialog-container {
+    overflow: hidden;
+    position: fixed;
+    top: 32px;
+    bottom: 1.25rem;
+    left: 50%;
+    right: 1rem;
+
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 32px - 1.25rem);
+    background: var(--theme-dialog-bg);
+    border-radius: 1.25rem;
+    box-shadow: var(--theme-dialog-shadow);
+    backdrop-filter: blur(10px);
+
+    .header {
+      flex-shrink: 0;
+      padding: 0 2rem 0 2.5rem;
+      height: 4.5rem;
+      border-bottom: 1px solid var(--theme-dialog-divider);
+
+      .tool {
+        margin-left: .75rem;
+        transform-origin: center center;
+        transform: scale(.75);
+        color: var(--theme-content-accent-color);
+        cursor: pointer;
+        &:hover { color: var(--theme-caption-color); }
+      }
+    }
+
+    .subtitle {
+      flex-shrink: 0;
+      padding: 0 2.5rem;
+      height: 3.5rem;
+      border-bottom: 1px solid var(--theme-dialog-divider);
+    }
+  }
+
+  .tab-container {
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+    margin: 0 2.5rem;
+    height: 4.5rem;
+    border-bottom: 1px solid var(--theme-menu-divider);
+
+    .tab {
+      height: 4.5rem;
+      font-weight: 500;
+      color: var(--theme-content-trans-color);
+      cursor: pointer;
+      user-select: none;
+
+      &.selected {
+        border-top: .125rem solid transparent;
+        border-bottom: .125rem solid var(--theme-caption-color);
+        color: var(--theme-caption-color);
+        cursor: default;
+      }
+    }
+    .tab + .tab {
+      margin-left: 2.5rem;
+    }
+    .grow {
+      min-width: 2.5rem;
+      flex-grow: 1;
+    }
+  }
+
+  .scroll {
+    flex-grow: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin: 1rem 0;
+    padding: 1.5rem 2.5rem;
+
+    .box {
+      margin-right: 1px;
+      height: 100%;
+    }
+  }
+
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--theme-menu-color);
+    opacity: .6;
+  }
+</style>

plugins/workbench-resources/src/components/navigator/SpacesNav.svelte

@@ -30,6 +30,7 @@
   import TreeItem from './TreeItem.svelte'
 
   import EditStatuses from '../EditStatuses.svelte'
+  import SpacePanel from './SpacePanel.svelte'
 
   export let model: SpacesNavModel
   
@@ -60,7 +61,7 @@
     label: 'Open' as IntlString,
     icon: IconEdit,
     action: async (_id: Ref<Doc>): Promise<void> => {
-      showPopup(model.editComponent!, { _id, spaceClass: model.spaceClass }, 'right')
+      showPopup(SpacePanel, { _id, spaceClass: model.spaceClass }, 'right')
     }
   }