Fix minor issues (#2426)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
This commit is contained in:
Andrey Sobolev 2022-12-07 14:21:39 +07:00 committed by GitHub
parent 8436d226ea
commit 231f04f6a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 114 additions and 87 deletions

View File

@ -37,6 +37,7 @@
export let floatAside = false export let floatAside = false
export let allowClose = true export let allowClose = true
export let useMaxWidth = false export let useMaxWidth = false
export let isFullSize = false
</script> </script>
<Panel <Panel
@ -48,7 +49,8 @@
on:close on:close
{allowClose} {allowClose}
{floatAside} {floatAside}
{useMaxWidth} bind:useMaxWidth
{isFullSize}
> >
<svelte:fragment slot="navigator"> <svelte:fragment slot="navigator">
{#if $$slots.navigator} {#if $$slots.navigator}

View File

@ -231,6 +231,11 @@ input.search {
.flex-gap-2 { gap: .5rem; } .flex-gap-2 { gap: .5rem; }
.flex-gap-1 { gap: .25rem; } .flex-gap-1 { gap: .25rem; }
.flex-break {
flex-basis: 100%;
height: 0;
}
.flex-presenter, .inline-presenter { .flex-presenter, .inline-presenter {
flex-wrap: nowrap; flex-wrap: nowrap;
cursor: pointer; cursor: pointer;

View File

@ -84,6 +84,7 @@
flex-direction: column; flex-direction: column;
margin: 0 1rem .75rem; margin: 0 1rem .75rem;
color: var(--theme-caption-color); color: var(--theme-caption-color);
flex-wrap: wrap;
&__separator { &__separator {
margin: 1rem 0; margin: 1rem 0;

View File

@ -36,21 +36,41 @@
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
let asideFloat: boolean = false let asideFloat: boolean = false
let asideShown: boolean = false let asideShown: boolean = true
let fullSize: boolean = false
$: twoRows = $deviceInfo.minWidth $: twoRows = $deviceInfo.minWidth
let oldWidth = ''
let hideTimer: number | undefined
const checkPanel = (): void => { const checkPanel = (): void => {
const k = `${panelWidth}-${asideFloat}`
if (oldWidth === k) {
return
}
oldWidth = k
if (floatAside) { if (floatAside) {
asideFloat = true asideFloat = true
} else if (panelWidth <= 900 && !asideFloat) asideFloat = true } else if (panelWidth <= 900 && !asideFloat) {
else if (panelWidth > 900 && asideFloat) { asideFloat = true
asideFloat = false if (asideShown) {
asideShown = false asideShown = false
} }
} else if (panelWidth > 900) {
if (asideFloat) {
asideFloat = false
}
if (!asideShown) {
asideShown = true
}
}
} }
afterUpdate(() => { afterUpdate(() => {
if (hideTimer) {
clearTimeout(hideTimer)
}
hideTimer = setTimeout(() => {
checkPanel() checkPanel()
}, 500)
}) })
</script> </script>
@ -80,7 +100,7 @@
<div class="buttons-group xsmall-gap"> <div class="buttons-group xsmall-gap">
<slot name="utils" /> <slot name="utils" />
{#if isFullSize || (asideFloat && $$slots.aside && isAside)}<div class="buttons-divider" />{/if} {#if isFullSize || (asideFloat && $$slots.aside && isAside)}<div class="buttons-divider" />{/if}
{#if asideFloat && $$slots.aside && isAside} {#if $$slots.aside && isAside}
<Button <Button
icon={IconDetails} icon={IconDetails}
kind={'transparent'} kind={'transparent'}
@ -93,12 +113,12 @@
{/if} {/if}
{#if isFullSize} {#if isFullSize}
<Button <Button
icon={fullSize ? IconScale : IconScaleFull} icon={useMaxWidth ? IconScale : IconScaleFull}
kind={'transparent'} kind={'transparent'}
size={'medium'} size={'medium'}
selected={fullSize} selected={useMaxWidth}
on:click={() => { on:click={() => {
fullSize = !fullSize useMaxWidth = !useMaxWidth
dispatch('fullsize') dispatch('fullsize')
}} }}
/> />
@ -141,7 +161,7 @@
<slot /> <slot />
</div> </div>
{/if} {/if}
{#if $$slots.aside && isAside} {#if $$slots.aside && isAside && asideShown}
<div class="popupPanel-body__aside" class:float={asideFloat} class:shown={asideShown}> <div class="popupPanel-body__aside" class:float={asideFloat} class:shown={asideShown}>
<slot name="aside" /> <slot name="aside" />
</div> </div>

View File

@ -135,6 +135,7 @@
on:close={(ev) => _close(ev?.detail)} on:close={(ev) => _close(ev?.detail)}
on:fullsize={() => { on:fullsize={() => {
fullSize = !fullSize fullSize = !fullSize
fitPopup()
}} }}
on:changeContent={() => { on:changeContent={() => {
fitPopup() fitPopup()

View File

@ -380,7 +380,9 @@
isAside={true} isAside={true}
isSub={false} isSub={false}
bind:innerWidth bind:innerWidth
floatAside={true} floatAside={false}
useMaxWidth={true}
isFullSize={true}
on:close={() => dispatch('close')} on:close={() => dispatch('close')}
> >
<svelte:fragment slot="navigator"> <svelte:fragment slot="navigator">

View File

@ -512,6 +512,8 @@
}} }}
/> />
{#if skills.length > 0} {#if skills.length > 0}
<div class="flex-break" />
<div class="antiComponent antiEmphasized flex-grow mt-2">
<Component <Component
is={tags.component.TagsEditor} is={tags.component.TagsEditor}
props={{ props={{
@ -536,6 +538,7 @@
skills = skills skills = skills
}} }}
/> />
</div>
{/if} {/if}
</svelte:fragment> </svelte:fragment>

View File

@ -105,8 +105,14 @@
</div> </div>
{/if} {/if}
<ShowMore ignore={!showTitle}> <ShowMore ignore={!showTitle}>
<div class:tags-container={showTitle} class:mt-3={showTitle} class:empty={items.length === 0}> <div
<div class="tag-items-container" class:tag-items-scroll={!showTitle}> class:tags-container={showTitle}
class:antiComponent={showTitle}
class:antiEmphasized={showTitle}
class:mt-3={showTitle}
class:empty={items.length === 0}
>
<div class="flex flex-grow flex-col" class:tag-items-scroll={!showTitle}>
{#if items.length === 0} {#if items.length === 0}
{#if keyLabel} {#if keyLabel}
<div class="text-sm dark-color w-full flex-center"> <div class="text-sm dark-color w-full flex-center">
@ -120,7 +126,7 @@
<Label label={cat.label} /> <Label label={cat.label} />
</div> </div>
{/if} {/if}
<div class="tag-items"> <div class="flex flex-grow flex-wrap">
{#each cat.items as tag} {#each cat.items as tag}
<TagItem <TagItem
{tag} {tag}
@ -154,26 +160,10 @@
<style lang="scss"> <style lang="scss">
.tags-container { .tags-container {
padding: 0.5rem;
color: var(--accent-color);
background-color: var(--board-bg-color);
border: 1px solid var(--divider-color);
border-radius: 0.75rem;
&.empty { &.empty {
background-color: transparent; background-color: transparent;
} }
} }
.tag-items-container {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.tag-items {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
.tag-items-scroll { .tag-items-scroll {
overflow-y: scroll; overflow-y: scroll;
max-height: 20rem; max-height: 20rem;

View File

@ -692,6 +692,7 @@
<ParentIssue issue={parentIssue} on:close={clearParentIssue} /> <ParentIssue issue={parentIssue} on:close={clearParentIssue} />
{/if} {/if}
<EditBox bind:value={object.title} placeholder={tracker.string.IssueTitlePlaceholder} kind={'large-style'} focus /> <EditBox bind:value={object.title} placeholder={tracker.string.IssueTitlePlaceholder} kind={'large-style'} focus />
{#key objectId}
<AttachmentStyledBox <AttachmentStyledBox
bind:this={descriptionBox} bind:this={descriptionBox}
{objectId} {objectId}
@ -704,6 +705,7 @@
placeholder={tracker.string.IssueDescriptionPlaceholder} placeholder={tracker.string.IssueDescriptionPlaceholder}
on:changeSize={() => dispatch('changeContent')} on:changeSize={() => dispatch('changeContent')}
/> />
{/key}
<IssueTemplateChilds bind:children={subIssues} sprint={object.sprint} project={object.project} isScrollable /> <IssueTemplateChilds bind:children={subIssues} sprint={object.sprint} project={object.project} isScrollable />
<svelte:fragment slot="pool"> <svelte:fragment slot="pool">
{#if issueStatuses} {#if issueStatuses}

View File

@ -41,7 +41,7 @@
let labels: TagReference[] = [] let labels: TagReference[] = []
let descriptionBox: AttachmentStyledBox let descriptionBox: AttachmentStyledBox
const objectId: Ref<Issue> = generateId() let objectId: Ref<Issue> = generateId()
const key: KeyedAttribute = { const key: KeyedAttribute = {
key: 'labels', key: 'labels',
attr: client.getHierarchy().getAttribute(tracker.class.Issue, 'labels') attr: client.getHierarchy().getAttribute(tracker.class.Issue, 'labels')
@ -73,6 +73,7 @@
newIssue = getIssueDefaults() newIssue = getIssueDefaults()
labels = [] labels = []
focusIssueTitle?.() focusIssueTitle?.()
objectId = generateId()
} }
function getTitle (value: string) { function getTitle (value: string) {
@ -191,6 +192,7 @@
focus focus
/> />
<div class="mt-4"> <div class="mt-4">
{#key objectId}
<AttachmentStyledBox <AttachmentStyledBox
bind:this={descriptionBox} bind:this={descriptionBox}
{objectId} {objectId}
@ -204,6 +206,7 @@
placeholder={tracker.string.IssueDescriptionPlaceholder} placeholder={tracker.string.IssueDescriptionPlaceholder}
on:changeSize={() => dispatch('changeContent')} on:changeSize={() => dispatch('changeContent')}
/> />
{/key}
</div> </div>
</div> </div>
</div> </div>

View File

@ -220,7 +220,7 @@
$: updateStatusCategories() $: updateStatusCategories()
</script> </script>
<Panel isHeader={false} isAside={false} isFullSize on:fullsize on:close={() => dispatch('close')}> <Panel isHeader={false} isAside={false} on:fullsize on:close={() => dispatch('close')}>
<svelte:fragment slot="title"> <svelte:fragment slot="title">
<div class="antiTitle icon-wrapper"> <div class="antiTitle icon-wrapper">
<div class="wrapped-icon"> <div class="wrapped-icon">

View File

@ -94,9 +94,7 @@
m.kind === ClassifierKind.MIXIN && m.kind === ClassifierKind.MIXIN &&
!ignoreMixins.has(m._id) && !ignoreMixins.has(m._id) &&
(hierarchy.hasMixin(object, m._id) || (hierarchy.hasMixin(object, m._id) ||
(showAllMixins && (showAllMixins && hierarchy.isDerived(realObjectClass, hierarchy.getBaseClass(m._id))))
// hierarchy.isDerived(hierarchy.getBaseClass(m._id), realObjectClass)
hierarchy.isDerived(realObjectClass, hierarchy.getBaseClass(m._id))))
) )
} }