WEBDIENSTE/huly-platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2026-09-22 09:35:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

New style (#1253)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
2022-04-02 11:06:48 +07:00
committed by GitHub
parent e2ae4b157e
commit b6de3da74a
75 changed files with 1007 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/workbench-resources/src/components/AppItem.svelte
+1 -1
View File
@@ -63,7 +63,7 @@
}
&.selected {
background-color: var(--theme-menu-selection);
background-color: var(--menu-bg-select);
.icon-container { color: var(--theme-caption-color); }
}
}
plugins/workbench-resources/src/components/Navigator.svelte
+8 -9
View File
@@ -45,7 +45,6 @@
{ sort: { name: SortingOrder.Ascending } })
}
let showDivider: Boolean = false
let specTopCount: number
let specBottomCount: number
let spModelCount: number
@@ -67,7 +66,6 @@
}
if (model.spaces) spModelCount = model.spaces.length
shownSpaces = spaces.filter(sp => !sp.archived)
showDivider = !!((specTopCount > 0 && specBottomCount + spModelCount > 0))
}
$: if (model) update(model, spaces)
@@ -97,18 +95,19 @@
{#each topSpecials as special}
<SpecialElement label={special.label} icon={special.icon} on:click={() => dispatch('special', special.id)} selected={special.id === currentSpecial} indent={'ml-2'} />
{/each}
{#if topSpecials.length > 0 && bottomSpecials.length > 0}
<TreeSeparator />
{/if}
{#if showDivider}<TreeSeparator />{/if}
{#each model.spaces as m (m.label)}
<SpacesNav spaces={shownSpaces.filter(it => hierarchy.isDerived(it._class, m.spaceClass))} {currentSpace} model={m} on:space {currentSpecial}/>
{/each}
{#if model.specials}
{#each bottomSpecials as special}
<SpecialElement label={special.label} icon={special.icon} on:click={() => dispatch('special', special.id)} selected={special.id === currentSpecial} indent={'ml-2'} />
{/each}
{/if}
{#if topSpecials.length > 0 || bottomSpecials.length > 0}<TreeSeparator />{/if}
{#each model.spaces as m (m.label)}
<SpacesNav spaces={shownSpaces.filter(it => hierarchy.isDerived(it._class, m.spaceClass))} {currentSpace} model={m} on:space {currentSpecial}/>
{/each}
<div class="antiNav-space" />
</Scroller>
{/if}
plugins/workbench-resources/src/components/SpaceHeader.svelte
+2 -2
View File
@@ -69,7 +69,7 @@
}
</script>
<div class="ac-header full">
<div class="ac-header divide full">
{#if space}
<Header icon={classIcon(client, space._class)} label={space.name} description={space.description} on:click={onSpaceEdit} />
{#if viewlets.length > 1}
@@ -89,7 +89,7 @@
dispatch('search', search)
}}/>
{#if createItemDialog}
<Button icon={IconAdd} label={createItemLabel} primary size={'small'} on:click={(ev) => showCreateDialog(ev)}/>
<Button icon={IconAdd} label={createItemLabel} kind={'primary'} on:click={(ev) => showCreateDialog(ev)}/>
{/if}
{/if}
</div>
plugins/workbench-resources/src/components/Workbench.svelte
+4 -5
View File
@@ -266,8 +266,8 @@
</svg>
<div class="workbench-container">
<div class="antiPanel-application" on:click={toggleNav}>
<div class="flex-col">
<ActivityStatus status="active" />
<div class="flex-col mt-1">
<!-- <ActivityStatus status="active" /> -->
<AppItem
icon={TopMenu}
label={visibileNav ? workbench.string.HideMenu : workbench.string.ShowMenu}
@@ -317,7 +317,7 @@
</div>
</div>
{#if currentApplication && navigatorModel && navigator && visibileNav}
<div class="antiPanel-navigator filled indent">
<div class="antiPanel-navigator" style="box-shadow: -1px 0px 2px rgba(0, 0, 0, .1)">
{#if currentApplication}
<NavHeader label={currentApplication.label} />
{#if currentApplication.navHeaderComponent}
@@ -337,7 +337,7 @@
{/if}
</div>
{/if}
<div class="antiPanel-component indent antiComponent" class:filled={isNavigate}>
<div class="antiPanel-component antiComponent border-left">
{#if currentApplication && currentApplication.component}
<Component is={currentApplication.component} props={{ currentSpace }}/>
{:else if specialComponent}
@@ -359,6 +359,5 @@
.workbench-container {
display: flex;
height: 100%;
padding-bottom: 1.25rem;
}
</style>
plugins/workbench-resources/src/components/navigator/SpacesNav.svelte
+2 -2
View File
@@ -82,10 +82,10 @@
}
</script>
<TreeNode label={model.label} actions={async () => [addSpace]} indent={'ml-2'}>
<TreeNode label={model.label} parent actions={async () => [addSpace]} indent={'ml-2'}>
{#each spaces as space (space._id)}
{#if model.specials}
<TreeNode title={space.name} indent={'ml-2'} actions={() => getActions(space)}>
<TreeNode icon={model.icon} title={space.name} indent={'ml-2'} actions={() => getActions(space)}>
{#each model.specials as special}
<SpecialElement
indent={'ml-4'}
plugins/workbench-resources/src/components/navigator/SpecialElement.svelte
+5 -1
View File
@@ -30,7 +30,11 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div
class="antiNav-element" class:selected class:ml-2={indent === 'ml-2'} class:ml-4={indent === 'ml-4'} class:ml-8={indent === 'ml-8'}
class="antiNav-element"
class:selected
class:ml-2={indent === 'ml-2'}
class:ml-4={indent === 'ml-4'}
class:ml-8={indent === 'ml-8'}
on:click|stopPropagation={() => {
dispatch('click')
}}
plugins/workbench-resources/src/components/navigator/TreeElement.svelte
+14 -15
View File
@@ -13,13 +13,10 @@
// limitations under the License.
-->
<script lang="ts">
import Collapsed from '../icons/Collapsed.svelte'
import Expanded from '../icons/Expanded.svelte'
import type { Asset, IntlString } from '@anticrm/platform'
import type { Action } from '@anticrm/ui'
import type { Ref, Space } from '@anticrm/core'
import { Icon, Label, ActionIcon, Menu, showPopup, IconMoreV } from '@anticrm/ui'
import { Icon, Label, ActionIcon, Menu, showPopup, IconMoreH, IconMoreV } from '@anticrm/ui'
import { createEventDispatcher } from 'svelte'
export let _id: Ref<Space> | undefined = undefined
@@ -28,6 +25,7 @@
export let title: string | undefined = undefined
export let notifications = 0
export let node = false
export let parent = false
export let collapsed = false
export let selected = false
export let actions: () => Promise<Action[]> = async () => []
@@ -51,27 +49,28 @@
class:ml-2={indent === 'ml-2'}
class:ml-4={indent === 'ml-4'}
class:ml-8={indent === 'ml-8'}
class:parent
class:collapsed
class:child={!node}
on:click|stopPropagation={() => {
if (node && !icon) collapsed = !collapsed
collapsed = !collapsed
dispatch('click')
}}
>
<span class="an-element__label" class:title={node}>
<div class="flex-row-center">
{#if icon}
<div class="an-element__icon" class:sub={!node}>
{#if icon && !parent}
<div class="an-element__icon">
<Icon {icon} size={'small'} />
</div>
{/if}
{#if label}<Label {label} />{:else}{title}{/if}
{#if !icon}
<div class="ml-2" class:sub={!node}>
{#if collapsed}
<Collapsed size={'small'} />
{:else}
<Expanded size={'small'} />
{/if}
{#if node}
<div class="an-element__icon-arrow {parent ? 'small' : 'medium'}" class:collapsed>
<svg fill="var(--content-color)" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
<path d="M0,0L6,3L0,6Z" />
</svg>
</div>
{/if}
</div>
@@ -104,6 +103,6 @@
<div class="an-element__counter">{notifications}</div>
{/if}
</div>
{#if node && !icon && !collapsed}
{#if node && !collapsed}
<div class="antiNav-element__dropbox"><slot /></div>
{/if}
plugins/workbench-resources/src/components/navigator/TreeNode.svelte
+4 -2
View File
@@ -14,19 +14,21 @@
-->
<script lang="ts">
import type { IntlString } from '@anticrm/platform'
import type { Asset, IntlString } from '@anticrm/platform'
import type { Action } from '@anticrm/ui'
import TreeElement from './TreeElement.svelte'
export let title: string | undefined = undefined
export let label: IntlString | undefined = undefined
export let icon: Asset | undefined = undefined
export let actions: () => Promise<Action[]> = async () => []
export let notifications = 0
export let parent = false
export let collapsed = false
export let indent: 'default' | 'ml-2' | 'ml-4' | 'ml-8' = 'default'
</script>
<TreeElement {title} {label} {notifications} {collapsed} {actions} node {indent}>
<TreeElement {title} {label} {icon} {notifications} {collapsed} {actions} node {parent} {indent}>
<slot/>
</TreeElement>