mirror of
https://github.com/hcengineering/platform.git
synced 2025-06-03 22:35:01 +00:00
Fix category styles (#1475)
Signed-off-by: Artyom Grigorovich <grigorovichartyom@gmail.com>
This commit is contained in:
parent
af3c251d36
commit
6d6f1fb48a
@ -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>
|
||||||
|
@ -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;
|
||||||
|
@ -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">
|
||||||
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
@ -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">
|
||||||
|
@ -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 {
|
||||||
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user