wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-06-03 14:19:56 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Fix category styles (#1475)

Browse Source 
Signed-off-by: Artyom Grigorovich <grigorovichartyom@gmail.com>
This commit is contained in:
Artyom Grigorovich 2022-04-26 14:12:58 +07:00 committed by GitHub
parent af3c251d36
commit 6d6f1fb48a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 119 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
packages/presentation/src/components/Avatar.svelte
View File

@ -12,7 +12,6 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
--> -->
<script lang="ts"> <script lang="ts">
import Avatar from './icons/Avatar.svelte' import Avatar from './icons/Avatar.svelte'
@ -20,7 +19,7 @@
export let avatar: string | null | undefined = undefined export let avatar: string | null | undefined = undefined
export let direct: Blob | undefined = undefined export let direct: Blob | undefined = undefined
export let size: 'inline' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' export let size: 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large'
let url: string | undefined let url: string | undefined
$: if (direct !== undefined) { $: if (direct !== undefined) {
@ -37,11 +36,11 @@
<div class="ava-{size} flex-center avatar-container" class:no-img={!url}> <div class="ava-{size} flex-center avatar-container" class:no-img={!url}>
{#if url} {#if url}
{#if size === 'large' || size === 'x-large'} {#if size === 'large' || size === 'x-large'}
<img class="ava-{size} ava-blur" src={url} alt={''}/> <img class="ava-{size} ava-blur" src={url} alt={''} />
{/if} {/if}
<img class="ava-{size} ava-mask" src={url} alt={''}/> <img class="ava-{size} ava-mask" src={url} alt={''} />
{:else} {:else}
<Avatar {size}/> <Avatar {size} />
{/if} {/if}
</div> </div>
@ -58,31 +57,39 @@
object-fit: cover; object-fit: cover;
border: 2px solid var(--theme-avatar-border); border: 2px solid var(--theme-avatar-border);
} }
&.no-img { border-color: transparent; } &.no-img {
border-color: transparent;
}
} }
.ava-inline { .ava-inline {
width: .875rem; // 24 width: 0.875rem; // 24
height: .875rem; height: 0.875rem;
} }
.ava-tiny {
width: 1.13rem; // ~18
height: 1.13rem;
}
.ava-x-small { .ava-x-small {
width: 1.5rem; // 24 width: 1.5rem; // 24
height: 1.5rem; height: 1.5rem;
} }
.ava-small { .ava-small {
width: 2rem; // 32 width: 2rem; // 32
height: 2rem; height: 2rem;
} }
.ava-medium { .ava-medium {
width: 2.25rem; // 36 width: 2.25rem; // 36
height: 2.25rem; height: 2.25rem;
} }
.ava-large { .ava-large {
width: 4.5rem; // 72 width: 4.5rem; // 72
height: 4.5rem; height: 4.5rem;
} }
.ava-x-large { .ava-x-large {
width: 7.5rem; // 120 width: 7.5rem; // 120
height: 7.5rem; height: 7.5rem;
} }
@ -96,8 +103,14 @@
border-radius: 50%; border-radius: 50%;
} }
.ava-inline .ava-mask, .ava-inline.no-img, .ava-inline .ava-mask,
.ava-x-small .ava-mask, .ava-x-small.no-img, .ava-inline.no-img,
.ava-small .ava-mask, .ava-small.no-img, .ava-x-small .ava-mask,
.ava-medium .ava-mask, .ava-medium.no-img { border-style: none; } .ava-x-small.no-img,
</style> .ava-small .ava-mask,
.ava-small.no-img,
.ava-medium .ava-mask,
.ava-medium.no-img {
border-style: none;
}
</style>

27
packages/presentation/src/components/icons/Avatar.svelte
View File

@ -13,27 +13,38 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
--> -->
<script lang="ts"> <script lang="ts">
export let size: 'inline' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' export let size: 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large'
const fill: string = 'var(--theme-caption-color)' const fill: string = 'var(--theme-caption-color)'
</script> </script>
<svg class="svg-avatar {size}" {fill} viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"> <svg class="svg-avatar {size}" {fill} viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<circle class="op" cx="20" cy="13.6" r="6.4"/> <circle class="op" cx="20" cy="13.6" r="6.4" />
<path d="M33.1,33.3c-0.8-2.2-2.5-4.2-4.9-5.5c-2.3-1.3-5.2-2.1-8.2-2.1s-5.8,0.7-8.2,2.1c-2.4,1.4-4.1,3.3-4.9,5.5 c-0.1,0.4,0.1,0.8,0.5,1c0.4,0.1,0.8-0.1,1-0.5c0.7-1.9,2.2-3.5,4.2-4.7c2.1-1.2,4.7-1.9,7.4-1.9c2.7,0,5.3,0.7,7.4,1.9 c2.1,1.2,3.6,2.9,4.2,4.7c0.1,0.3,0.4,0.5,0.7,0.5c0.1,0,0.2,0,0.3,0C33,34.1,33.2,33.7,33.1,33.3z"/> <path
<path d="M20,20.8c3.9,0,7.1-3.2,7.1-7.1S23.9,6.5,20,6.5c-3.9,0-7.1,3.2-7.1,7.1S16.1,20.8,20,20.8z M20,8 c3.1,0,5.6,2.5,5.6,5.6s-2.5,5.6-5.6,5.6c-3.1,0-5.6-2.5-5.6-5.6S16.9,8,20,8z"/> d="M33.1,33.3c-0.8-2.2-2.5-4.2-4.9-5.5c-2.3-1.3-5.2-2.1-8.2-2.1s-5.8,0.7-8.2,2.1c-2.4,1.4-4.1,3.3-4.9,5.5 c-0.1,0.4,0.1,0.8,0.5,1c0.4,0.1,0.8-0.1,1-0.5c0.7-1.9,2.2-3.5,4.2-4.7c2.1-1.2,4.7-1.9,7.4-1.9c2.7,0,5.3,0.7,7.4,1.9 c2.1,1.2,3.6,2.9,4.2,4.7c0.1,0.3,0.4,0.5,0.7,0.5c0.1,0,0.2,0,0.3,0C33,34.1,33.2,33.7,33.1,33.3z"
/>
<path
d="M20,20.8c3.9,0,7.1-3.2,7.1-7.1S23.9,6.5,20,6.5c-3.9,0-7.1,3.2-7.1,7.1S16.1,20.8,20,20.8z M20,8 c3.1,0,5.6,2.5,5.6,5.6s-2.5,5.6-5.6,5.6c-3.1,0-5.6-2.5-5.6-5.6S16.9,8,20,8z"
/>
</svg> </svg>
<style lang="scss"> <style lang="scss">
.svg-avatar { .svg-avatar {
.op { opacity: .05; } .op {
opacity: 0.05;
}
} }
.inline { .inline {
width: .75rem; width: 0.75rem;
height: .75rem; height: 0.75rem;
} }
.tiny {
width: 0.875rem;
height: 0.875rem;
}
.x-small { .x-small {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;

2
plugins/tracker-assets/assets/icons.svg
View File

@ -76,7 +76,7 @@
<rect width="2" height="2" rx="1" transform="matrix(-1 0 0 1 8 6)" /> <rect width="2" height="2" rx="1" transform="matrix(-1 0 0 1 8 6)" />
<rect width="2" height="2" rx="1" transform="matrix(-1 0 0 1 11 6)" /> <rect width="2" height="2" rx="1" transform="matrix(-1 0 0 1 11 6)" />
</symbol> </symbol>
<symbol id="priority-urgent" viewBox="0 0 16 16"> <symbol id="priority-urgent" viewBox="-1 -1 16 16">
<path d="M2 0a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V2a2 2 0 00-2-2H2zm3.914 3h1.738L7.5 8.602H6.07L5.914 3zm1.809 7.164a.95.95 0 01-.938.938.934.934 0 110-1.867c.5 0 .934.417.938.93z" /> <path d="M2 0a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V2a2 2 0 00-2-2H2zm3.914 3h1.738L7.5 8.602H6.07L5.914 3zm1.809 7.164a.95.95 0 01-.938.938.934.934 0 110-1.867c.5 0 .934.417.938.93z" />
</symbol> </symbol>
<symbol id="priority-high" viewBox="0 0 16 16"> <symbol id="priority-high" viewBox="0 0 16 16">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

4
plugins/tracker-resources/src/components/issues/AssigneePresenter.svelte
View File

@ -110,7 +110,7 @@
<Tooltip {label} props={{ value: formattedName }}> <Tooltip {label} props={{ value: formattedName }}>
<div class="flex-presenter" on:click={handleAssigneeEditorOpened}> <div class="flex-presenter" on:click={handleAssigneeEditorOpened}>
<div class="icon"> <div class="icon">
<Avatar size={'x-small'} {avatar} /> <Avatar size={'tiny'} {avatar} />
</div> </div>
{#if shouldShowLabel} {#if shouldShowLabel}
<div class="label nowrap ml-2"> <div class="label nowrap ml-2">
@ -122,7 +122,7 @@
{:else} {:else}
<div class="presenter"> <div class="presenter">
<div class="icon"> <div class="icon">
<Avatar size={'x-small'} {avatar} /> <Avatar size={'tiny'} {avatar} />
</div> </div>
{#if shouldShowLabel} {#if shouldShowLabel}
<div class="label nowrap ml-2"> <div class="label nowrap ml-2">

5
plugins/tracker-resources/src/components/issues/CategoryPresenter.svelte
View File

@ -68,7 +68,7 @@
/> />
<span class="eLabelCounter ml-2">{issuesAmount}</span> <span class="eLabelCounter ml-2">{issuesAmount}</span>
</div> </div>
<div class="flex mr-1"> <div class="flex">
<Tooltip label={tracker.string.AddIssueTooltip} direction={'left'}> <Tooltip label={tracker.string.AddIssueTooltip} direction={'left'}>
<Button icon={IconAdd} kind={'transparent'} on:click={handleNewIssueAdded} /> <Button icon={IconAdd} kind={'transparent'} on:click={handleNewIssueAdded} />
</Tooltip> </Tooltip>
@ -101,7 +101,8 @@
.categoryHeader { .categoryHeader {
height: 2.5rem; height: 2.5rem;
background-color: var(--theme-table-bg-hover); background-color: var(--theme-table-bg-hover);
padding-left: 2.3rem; padding-left: 2.25rem;
padding-right: 1.35rem;
} }
.label { .label {

119
plugins/tracker-resources/src/components/issues/IssuesList.svelte
View File

@ -106,68 +106,72 @@
class:mListGridChecked={selectedIssueIds.has(docObject._id)} class:mListGridChecked={selectedIssueIds.has(docObject._id)}
class:mListGridFixed={rowIndex === selectedRowIndex} class:mListGridFixed={rowIndex === selectedRowIndex}
> >
{#each itemModels as attributeModel, attributeModelIndex} <div class="contentWrapper">
{#if attributeModelIndex === 0} {#each itemModels as attributeModel, attributeModelIndex}
<div class="gridElement"> {#if attributeModelIndex === 0}
<Tooltip direction={'bottom'} label={tracker.string.SelectIssue}> <div class="gridElement">
<div class="eListGridCheckBox ml-2"> <Tooltip direction={'bottom'} label={tracker.string.SelectIssue}>
<CheckBox <div class="eListGridCheckBox">
checked={selectedIssueIds.has(docObject._id)} <CheckBox
on:value={(event) => { checked={selectedIssueIds.has(docObject._id)}
handleIssueSelected(docObject._id, event) on:value={(event) => {
}} handleIssueSelected(docObject._id, event)
}}
/>
</div>
</Tooltip>
<div class="priorityPresenter">
<svelte:component
this={attributeModel.presenter}
value={getObjectValue(attributeModel.key, docObject) ?? ''}
{...attributeModel.props}
/> />
</div> </div>
</Tooltip> </div>
<div class="priorityPresenter"> {:else if attributeModelIndex === 1}
<div class="issuePresenter">
<svelte:component
this={attributeModel.presenter}
value={getObjectValue(attributeModel.key, docObject) ?? ''}
{...attributeModel.props}
/>
<div
id="context-menu"
class="eIssuePresenterContextMenu"
on:click={(event) => showMenu(event, docObject, rowIndex)}
>
<IconMoreV size={'small'} />
</div>
</div>
{:else if attributeModelIndex === 3}
<svelte:component
this={attributeModel.presenter}
value={getObjectValue(attributeModel.key, docObject) ?? ''}
{...attributeModel.props}
/>
<div class="filler" />
{:else}
<div class="gridElement">
<svelte:component <svelte:component
this={attributeModel.presenter} this={attributeModel.presenter}
value={getObjectValue(attributeModel.key, docObject) ?? ''} value={getObjectValue(attributeModel.key, docObject) ?? ''}
{...attributeModel.props} {...attributeModel.props}
/> />
</div> </div>
</div> {/if}
{:else if attributeModelIndex === 1} {/each}
<div class="issuePresenter"> </div>
<svelte:component
this={attributeModel.presenter}
value={getObjectValue(attributeModel.key, docObject) ?? ''}
{...attributeModel.props}
/>
<div
id="context-menu"
class="eIssuePresenterContextMenu"
on:click={(event) => showMenu(event, docObject, rowIndex)}
>
<IconMoreV size={'small'} />
</div>
</div>
{:else if attributeModelIndex === 3}
<svelte:component
this={attributeModel.presenter}
value={getObjectValue(attributeModel.key, docObject) ?? ''}
{...attributeModel.props}
/>
<div class="filler" />
{:else}
<div class="gridElement">
<svelte:component
this={attributeModel.presenter}
value={getObjectValue(attributeModel.key, docObject) ?? ''}
{...attributeModel.props}
/>
</div>
{/if}
{/each}
</div> </div>
{/each} {/each}
{:else if loadingProps !== undefined} {:else if loadingProps !== undefined}
{#each Array(getLoadingElementsLength(loadingProps, options)) as _, rowIndex} {#each Array(getLoadingElementsLength(loadingProps, options)) as _, rowIndex}
<div class="listGrid mListGridIsLoading" class:fixed={rowIndex === selectedRowIndex}> <div class="listGrid" class:fixed={rowIndex === selectedRowIndex}>
<div class="gridElement"> <div class="contentWrapper">
<CheckBox checked={false} /> <div class="gridElement">
<div class="ml-4"> <CheckBox checked={false} />
<Spinner size="small" /> <div class="ml-4">
<Spinner size="small" />
</div>
</div> </div>
</div> </div>
</div> </div>
@ -185,9 +189,16 @@
width: 100%; width: 100%;
} }
.listGrid { .contentWrapper {
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%;
padding-left: 0.75rem;
padding-right: 1.15rem;
}
.listGrid {
width: 100%;
height: 3.25rem; height: 3.25rem;
color: var(--theme-caption-color); color: var(--theme-caption-color);
border-bottom: 1px solid var(--theme-button-border-hovered); border-bottom: 1px solid var(--theme-button-border-hovered);
@ -206,10 +217,6 @@
} }
} }
&.mListGridIsLoading {
justify-content: flex-start;
}
&:hover { &:hover {
background-color: var(--theme-table-bg-hover); background-color: var(--theme-table-bg-hover);
} }
@ -243,7 +250,7 @@
} }
.priorityPresenter { .priorityPresenter {
padding-left: 0.75rem; padding-left: 0.65rem;
} }
.issuePresenter { .issuePresenter {