wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-13 19:58:09 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UBER-504: correct display of optional presenters (#3452)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2023-06-23 13:51:56 +03:00 committed by GitHub
parent e37400dc03
commit 42f902a7b6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 101 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
models/tracker/src/index.ts
View File

@ -477,6 +477,7 @@ export function createModel (builder: Builder): void {
{ key: 'comments', displayProps: { key: 'comments' } },
{ key: 'attachments', displayProps: { key: 'attachments' } },
{ key: '', label: tracker.string.SubIssues, presenter: tracker.component.SubIssuesSelector, props: {} },
{ key: '', displayProps: { grow: true } },
{
key: 'labels',
presenter: tags.component.LabelsPresenter,
@ -524,7 +525,6 @@ export function createModel (builder: Builder): void {
displayProps: { key: 'dueDate', optional: true, compression: true },
props: { kind: 'list' }
},
{ key: '', displayProps: { grow: true } },
{
key: '',
label: tracker.string.Estimation,

14
packages/theme/styles/components.scss
View File

@ -916,15 +916,15 @@
// Labels on the ListView
.list-container .listitems-container,
.list-container .listitems-container:hover,
.list-container .button.list,
.list-container .button.list:hover,
.list-container .antiButton.list,
.list-container .antiButton.list:hover,
.list-container .datetime-button,
.list-container .datetime-button:hover {
background-color: var(--theme-list-button-color);
.icon, .btn-icon {
margin-right: .5rem;
color: var(--theme-halfcontent-color) !important;
}
background-color: var(--theme-list-button-color) !important;
&:not(.only-icon) .btn-icon,
&:not(.only-icon) .icon { margin-right: .5rem !important; }
.icon, .btn-icon { color: var(--theme-halfcontent-color) !important; }
.label {
font-size: 0.8125rem !important;
color: var(--theme-halfcontent-color) !important;

2
packages/ui/src/components/EditWithIcon.svelte
View File

@ -72,7 +72,7 @@
<style lang="scss">
.editbox {
padding: 0 0.25rem 0 0.5rem;
min-width: 10rem;
min-width: 8rem;
color: var(--theme-caption-color);
border-radius: 0.25rem;

101
plugins/view-resources/src/components/list/ListItem.svelte
View File

@ -13,16 +13,15 @@
// limitations under the License.
-->
<script lang="ts">
import core, { AnyAttribute, Doc, getObjectValue } from '@hcengineering/core'
import { AnyAttribute, Doc, getObjectValue } from '@hcengineering/core'
import notification from '@hcengineering/notification'
import { getClient, updateAttribute } from '@hcengineering/presentation'
import { CheckBox, Component, deviceOptionsStore as deviceInfo, IconCircles, tooltip } from '@hcengineering/ui'
import { AttributeModel } from '@hcengineering/view'
import { createEventDispatcher, onMount } from 'svelte'
import { FixedColumn } from '../..'
import view from '../../plugin'
import GrowPresenter from './GrowPresenter.svelte'
import DividerPresenter from './DividerPresenter.svelte'
import ListPresenter from './ListPresenter.svelte'
export let docObject: Doc
export let model: AttributeModel[]
@ -65,14 +64,6 @@
return (value: any) => onChange(value, docObject, attribute.key, attr)
}
function joinProps (attribute: AttributeModel, object: Doc, props: Record<string, any>) {
const clearAttributeProps = attribute.props
if (attribute.attribute?.type._class === core.class.EnumOf) {
return { ...clearAttributeProps, type: attribute.attribute.type, ...props }
}
return { object, ...clearAttributeProps, ...props }
}
let noCompressed: number
$: if (model) {
noCompressed = -1
@ -129,63 +120,33 @@
/>
</div>
</div>
{#each model.filter((p) => !p.displayProps?.optional) as attributeModel, i}
{#each model.filter((p) => !(p.displayProps?.optional === true)) as attributeModel, i}
{@const displayProps = attributeModel.displayProps}
{#if !groupByKey || displayProps?.excludeByKey !== groupByKey}
{#if !(compactMode && displayProps?.compression)}
{#if displayProps?.grow}
<GrowPresenter />
{#each model.filter((p) => p.displayProps?.optional) as attributeModel, i}
{@const dp = attributeModel.displayProps}
{#if dp?.dividerBefore === true}
<DividerPresenter />
{/if}
{#if dp?.fixed}
<FixedColumn key={`list_item_${dp.key}`} justify={dp.fixed}>
<svelte:component
this={attributeModel.presenter}
value={getObjectValue(attributeModel.key, docObject)}
kind={'list'}
onChange={getOnChange(docObject, attributeModel)}
{...joinProps(attributeModel, docObject, props)}
/>
</FixedColumn>
{:else}
<svelte:component
this={attributeModel.presenter}
value={getObjectValue(attributeModel.key, docObject)}
onChange={getOnChange(docObject, attributeModel)}
kind={'list'}
compression={dp?.compression && i !== noCompressed}
{...joinProps(attributeModel, docObject, props)}
/>
{/if}
{/each}
{:else}
{#if i !== 0 && displayProps?.dividerBefore === true}
<DividerPresenter />
{/if}
{#if displayProps?.fixed}
<FixedColumn key={`list_item_${displayProps.key}`} justify={displayProps.fixed}>
<svelte:component
this={attributeModel.presenter}
value={getObjectValue(attributeModel.key, docObject)}
kind={'list'}
onChange={getOnChange(docObject, attributeModel)}
{...joinProps(attributeModel, docObject, props)}
/>
</FixedColumn>
{:else}
<svelte:component
this={attributeModel.presenter}
value={getObjectValue(attributeModel.key, docObject)}
onChange={getOnChange(docObject, attributeModel)}
kind={'list'}
compression={displayProps?.compression && i !== noCompressed}
{...joinProps(attributeModel, docObject, props)}
{#if displayProps?.grow}
<GrowPresenter />
{#if !compactMode}
{#each model.filter((p) => p.displayProps?.optional === true) as attrModel, j}
<ListPresenter
{docObject}
attributeModel={attrModel}
{props}
compression={j !== noCompressed}
value={getObjectValue(attrModel.key, docObject)}
onChange={getOnChange(docObject, attrModel)}
/>
{/if}
{/each}
{/if}
{:else}
<ListPresenter
{docObject}
{attributeModel}
{props}
compression={i !== noCompressed}
value={getObjectValue(attributeModel.key, docObject)}
onChange={getOnChange(docObject, attributeModel)}
hideDivider={i === 0}
/>
{/if}
{/if}
{/each}
@ -207,15 +168,13 @@
{@const displayProps = attributeModel.displayProps}
{@const value = getObjectValue(attributeModel.key, docObject)}
{#if displayProps?.excludeByKey !== groupByKey && value !== undefined}
{#if j !== 0 && displayProps?.dividerBefore === true}
<DividerPresenter />
{/if}
<svelte:component
this={attributeModel.presenter}
<ListPresenter
{docObject}
{attributeModel}
{props}
value={getObjectValue(attributeModel.key, docObject)}
onChange={getOnChange(docObject, attributeModel)}
kind={'list'}
{...joinProps(attributeModel, docObject, props)}
hideDivider={j === 0}
/>
{/if}
{/each}

62
plugins/view-resources/src/components/list/ListPresenter.svelte Normal file
View File

@ -0,0 +1,62 @@
<!--
// Copyright © 2022 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 core, { Doc } from '@hcengineering/core'
import { AttributeModel } from '@hcengineering/view'
import { FixedColumn } from '../..'
import DividerPresenter from './DividerPresenter.svelte'
export let docObject: Doc
export let attributeModel: AttributeModel
export let onChange: ((value: any) => void) | undefined
export let value: any
export let props: Record<string, any>
export let compression: boolean = false
export let hideDivider: boolean = false
$: dp = attributeModel?.displayProps
function joinProps (attribute: AttributeModel, object: Doc, props: Record<string, any>) {
const clearAttributeProps = attribute.props
if (attribute.attribute?.type._class === core.class.EnumOf) {
return { ...clearAttributeProps, type: attribute.attribute.type, ...props }
}
return { object, ...clearAttributeProps, ...props }
}
</script>
{#if dp?.dividerBefore === true && !hideDivider}
<DividerPresenter />
{/if}
{#if dp?.fixed}
<FixedColumn key={`list_item_${dp.key}`} justify={dp.fixed}>
<svelte:component
this={attributeModel.presenter}
{value}
{onChange}
kind={'list'}
{...joinProps(attributeModel, docObject, props)}
/>
</FixedColumn>
{:else}
<svelte:component
this={attributeModel.presenter}
{value}
{onChange}
kind={'list'}
compression={dp?.compression && compression}
{...joinProps(attributeModel, docObject, props)}
/>
{/if}