mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-22 11:01:54 +03:00
TSK-1431,-1440: Update AttachmentPresenter. Replace colors, minor fixes. (#3131)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
83fe8f897b
commit
987fe19c64
@ -5,6 +5,7 @@
|
||||
"Ok": "Ok",
|
||||
"Save": "Save",
|
||||
"Download": "Download",
|
||||
"Delete": "Delete",
|
||||
"Close": "Close",
|
||||
"NotSelected": "Not selected",
|
||||
"Deselect": "Deselect",
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
"Ok": "Ок",
|
||||
"Save": "Сохранить",
|
||||
"Download": "Скачать",
|
||||
"Delete": "Удалить",
|
||||
"Close": "Закрыть",
|
||||
"NotSelected": "Не выбрано",
|
||||
"Deselect": "Снять выделение",
|
||||
|
||||
@ -96,8 +96,8 @@
|
||||
height: 2rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.625rem;
|
||||
color: var(--white-color);
|
||||
background-color: var(--primary-bg-color);
|
||||
color: var(--primary-button-color);
|
||||
background-color: var(--primary-button-enabled);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
@ -107,7 +107,7 @@
|
||||
overflow: auto;
|
||||
border-style: none;
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--board-bg-color);
|
||||
background-color: var(--theme-bg-color);
|
||||
|
||||
&.img {
|
||||
display: flex;
|
||||
|
||||
@ -34,6 +34,7 @@ export default plugin(presentationId, {
|
||||
Ok: '' as IntlString,
|
||||
Save: '' as IntlString,
|
||||
Download: '' as IntlString,
|
||||
Delete: '' as IntlString,
|
||||
Close: '' as IntlString,
|
||||
NotSelected: '' as IntlString,
|
||||
Deselect: '' as IntlString,
|
||||
|
||||
@ -121,6 +121,7 @@
|
||||
--theme-checkbox-disabled: #999;
|
||||
--theme-progress-color: #FFFFFF;
|
||||
--theme-popup-color: #292938;
|
||||
--theme-popup-hover: #32323F;
|
||||
--theme-popup-divider: rgba(255, 255, 255, .1);
|
||||
--theme-popup-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1); // Light
|
||||
--theme-panel-color: #1A1A28;
|
||||
@ -131,6 +132,10 @@
|
||||
--theme-calendar-holiday-bgcolor: rgba(235, 87, 87, .1);
|
||||
--theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .05);
|
||||
|
||||
--theme-error-color: #eb5757;
|
||||
--theme-lost-color: #eb5757;
|
||||
--theme-won-color: #34DB80;
|
||||
|
||||
--body-color: #1f2023;
|
||||
--body-accent: #222326;
|
||||
--board-bg-color: #1c1d1f;
|
||||
@ -145,9 +150,9 @@
|
||||
--highlight-select-border: #44506b;
|
||||
--highlight-select-hover: #2c3346;
|
||||
|
||||
--scrollbar-bar-color: #303236;
|
||||
--scrollbar-bar-hover: #8a8f98;
|
||||
--scrollbar-track-color: #303236;
|
||||
--scrollbar-bar-color: #35354a;
|
||||
--scrollbar-bar-hover: #8a8aa5;
|
||||
--scrollbar-track-color: #35354a;
|
||||
|
||||
--trans-color: rgba(255, 255, 255, .3);
|
||||
--darker-color: rgba(255, 255, 255, .4);
|
||||
@ -159,9 +164,6 @@
|
||||
--white-color: #fff;
|
||||
--caret-color: #6e5ed2;
|
||||
--warning-color: #f2994a;
|
||||
--error-color: #eb5757;
|
||||
--lost-color: #eb5757;
|
||||
--won-color: #34DB80;
|
||||
|
||||
--divider-color: #303236;
|
||||
--divider-trans-color: rgba(255, 255, 255, .12);
|
||||
@ -281,7 +283,8 @@
|
||||
--theme-checkbox-border: rgba(0, 0, 0, .12);
|
||||
--theme-checkbox-disabled: #999;
|
||||
--theme-progress-color: rgba(0, 0, 0, .5);
|
||||
--theme-popup-color: #F1F1F4;
|
||||
--theme-popup-color: #FFFFFF;
|
||||
--theme-popup-hover: #F5F5F5;
|
||||
--theme-popup-divider: rgba(0, 0, 0, .1);
|
||||
--theme-popup-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
|
||||
--theme-panel-color: #FFFFFF;
|
||||
@ -292,6 +295,10 @@
|
||||
--theme-calendar-holiday-bgcolor: rgba(235, 87, 87, .1);
|
||||
--theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .1);
|
||||
|
||||
--theme-error-color: #eb5757; // Dark
|
||||
--theme-lost-color: #eb5757; // Dark
|
||||
--theme-won-color: #34DB80; // Dark
|
||||
|
||||
--body-color: #fff;
|
||||
--body-accent: #fafafa; // HZ
|
||||
--board-bg-color: #f4f5f8;
|
||||
@ -320,9 +327,6 @@
|
||||
--white-color: #fff;
|
||||
--caret-color: #6e5ed2;
|
||||
--warning-color: #f2994a; // Dark
|
||||
--error-color: #eb5757; // Dark
|
||||
--lost-color: #eb5757; // Dark
|
||||
--won-color: #34DB80; // Dark
|
||||
|
||||
--divider-color: #e0e0e0;
|
||||
--divider-trans-color: rgba(0, 0, 0, .12);
|
||||
|
||||
@ -46,6 +46,7 @@ button {
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
@ -492,6 +493,7 @@ input.search {
|
||||
.my-4 { margin: 1rem 0; }
|
||||
.my-5 { margin: 1.25rem 0; }
|
||||
|
||||
.m--1 { margin: -.25rem; }
|
||||
.m-0-5 { margin: .125rem; }
|
||||
.m-1 { margin: .25rem; }
|
||||
|
||||
@ -853,7 +855,7 @@ a.no-line {
|
||||
.caption-color { color: var(--caption-color); }
|
||||
|
||||
.red-color { color: var(--highlight-red); }
|
||||
.error-color { color: var(--error-color); }
|
||||
.error-color { color: var(--theme-error-color); }
|
||||
|
||||
.border-radius-4 { border-radius: 1rem; }
|
||||
.border-radius-3 { border-radius: 0.75rem; }
|
||||
|
||||
@ -365,21 +365,21 @@
|
||||
padding: .3125rem .5rem;
|
||||
min-width: 0;
|
||||
font-size: .875rem;
|
||||
background-color: var(--accent-bg-color);
|
||||
color: var(--dark-color);
|
||||
border: 1px solid var(--divider-color);
|
||||
background-color: var(--theme-button-enabled);
|
||||
color: var(--theme-halfcontent-color);
|
||||
border: 1px solid var(--theme-button-border);
|
||||
border-radius: .25rem;
|
||||
|
||||
.tag-icon {
|
||||
margin-left: .5rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
color: var(--accent-color);
|
||||
color: var(--theme-content-color);
|
||||
|
||||
&:hover { color: var(--caption-color); }
|
||||
&:hover { color: var(--theme-caption-color); }
|
||||
}
|
||||
|
||||
&.highlight { color: var(--content-color); }
|
||||
&.highlight { color: var(--theme-content-color); }
|
||||
}
|
||||
&__tag + &__tag { margin-left: .375rem; }
|
||||
}
|
||||
|
||||
@ -22,9 +22,10 @@
|
||||
min-width: 10rem;
|
||||
max-width: 15rem;
|
||||
max-height: 22rem;
|
||||
background: var(--popup-bg-color);
|
||||
background: var(--theme-popup-color);
|
||||
// border: 1px solid var(--theme-popup-divider);
|
||||
border-radius: .5rem;
|
||||
box-shadow: var(--popup-shadow);
|
||||
box-shadow: var(--theme-popup-shadow);
|
||||
|
||||
&.full-width {
|
||||
flex-grow: 1;
|
||||
@ -48,7 +49,7 @@
|
||||
max-width: 40rem !important;
|
||||
}
|
||||
.header {
|
||||
border-bottom: 1px solid var(--popup-divider);
|
||||
border-bottom: 1px solid var(--theme-popup-divider);
|
||||
|
||||
&.no-border { border-bottom-color: transparent; }
|
||||
input {
|
||||
@ -72,12 +73,12 @@
|
||||
}
|
||||
|
||||
&.show {
|
||||
color: var(--content-color);
|
||||
background-color: var(--button-border-color);
|
||||
color: var(--theme-content-color);
|
||||
background-color: var(--theme-button-enabled);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--accent-color);
|
||||
background-color: var(--button-border-hover);
|
||||
color: var(--theme-caption-color);
|
||||
background-color: var(--theme-button-hovered);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -104,7 +105,7 @@
|
||||
padding: .25rem .75rem;
|
||||
min-height: 2rem;
|
||||
text-align: left;
|
||||
color: var(--caption-color);
|
||||
color: var(--theme-content-color);
|
||||
cursor: pointer;
|
||||
|
||||
&.high { height: 3rem; }
|
||||
@ -116,7 +117,7 @@
|
||||
.icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
color: var(--content-color);
|
||||
color: var(--theme-dark-color);
|
||||
}
|
||||
.color {
|
||||
width: .875rem;
|
||||
@ -144,12 +145,13 @@
|
||||
.check-right { margin: 0 0 0 2rem; }
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: var(--popup-bg-hover);
|
||||
color: var(--theme-caption-color);
|
||||
background-color: var(--theme-popup-hover);
|
||||
|
||||
.icon { color: var(--accent-color); }
|
||||
.icon { color: var(--theme-content-color); }
|
||||
}
|
||||
&.no-focus:focus { background-color: transparent; }
|
||||
&.no-focus:hover { background-color: var(--popup-bg-hover); }
|
||||
&.no-focus:focus { background-color: var(--theme-popup-hover); }
|
||||
&.no-focus:hover { background-color: var(--theme-popup-hover); }
|
||||
}
|
||||
.sticky-wrapper {
|
||||
display: flex;
|
||||
@ -176,8 +178,8 @@
|
||||
font-weight: 500;
|
||||
font-size: .75rem;
|
||||
text-align: left;
|
||||
color: var(--accent-color);
|
||||
background-color: var(--button-bg-color);
|
||||
color: var(--theme-content-color);
|
||||
background-color: var(--theme-comp-header-color);
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
@ -187,7 +189,7 @@
|
||||
transition: transform .15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
&.show .icon { transform: rotate(90deg); }
|
||||
&:hover { color: var(--caption-color); }
|
||||
&:hover { color: var(--theme-caption-color); }
|
||||
&.show + .menu-group { height: auto; }
|
||||
}
|
||||
}
|
||||
@ -200,9 +202,9 @@
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
max-width: 30rem;
|
||||
background: var(--popup-bg-color);
|
||||
background: var(--theme-popup-color);
|
||||
border-radius: .25rem;
|
||||
box-shadow: var(--popup-shadow);
|
||||
box-shadow: var(--theme-popup-shadow);
|
||||
user-select: none;
|
||||
|
||||
.ap-space {
|
||||
@ -234,21 +236,21 @@
|
||||
justify-content: flex-start;
|
||||
padding: 0 .5rem;
|
||||
height: 2rem;
|
||||
color: var(--caption-color);
|
||||
color: var(--theme-content-color);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
|
||||
&.ap-woScroll { margin: 0 .5rem; }
|
||||
&.selected { background: var(--popup-bg-hover); }
|
||||
&.selected { background: var(--theme-popup-hover); }
|
||||
&.empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-style: italic;
|
||||
color: var(--dark-color);
|
||||
color: var(--theme-dark-color);
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
color: var(--dark-color);
|
||||
color: var(--theme-content-color);
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
@ -256,13 +258,13 @@
|
||||
&.withIcon {
|
||||
margin: 0;
|
||||
|
||||
.icon { color: var(--content-color); }
|
||||
&.hover .icon { color: var(--accent-color); }
|
||||
.icon { color: var(--theme-dark-color); }
|
||||
&.hover .icon { color: var(--theme-content-color); }
|
||||
}
|
||||
|
||||
// &:hover { background-color: var(--popup-bg-hover); }
|
||||
&.hover {
|
||||
background-color: var(--popup-bg-hover);
|
||||
background-color: var(--theme-popup-hover);
|
||||
outline: none;
|
||||
// box-shadow: inset 0 0 1px 1px var(--primary-edit-border-color);
|
||||
}
|
||||
@ -277,7 +279,7 @@
|
||||
&.separator {
|
||||
margin: 0.25rem 0;
|
||||
height: 1px;
|
||||
background-color: var(--popup-divider);
|
||||
background-color: var(--theme-popup-divider);
|
||||
}
|
||||
}
|
||||
.ap-check {
|
||||
@ -297,7 +299,7 @@
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--popup-bg-hover);
|
||||
background-color: var(--theme-popup-divider);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@ -315,7 +317,7 @@
|
||||
font-size: .75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--dark-color);
|
||||
color: var(--theme-dark-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -325,7 +327,7 @@
|
||||
flex-shrink: 0;
|
||||
margin: 1rem 1rem .25rem;
|
||||
font-weight: 500;
|
||||
color: var(--caption-color);
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
.ap-header {
|
||||
margin: .25rem 1rem 0;
|
||||
@ -344,14 +346,14 @@
|
||||
|
||||
.ap-categoryItem {
|
||||
margin: .25rem;
|
||||
color: var(--dark-color);
|
||||
color: var(--theme-dark-color);
|
||||
cursor: pointer;
|
||||
|
||||
&.selected {
|
||||
color: var(--accent-color) !important;
|
||||
color: var(--theme-content-color) !important;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--accent-color);
|
||||
color: var(--theme-content-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -388,14 +390,14 @@
|
||||
min-width: 0;
|
||||
min-height: 2rem;
|
||||
text-align: left;
|
||||
color: var(--caption-color);
|
||||
color: var(--theme-content-color);
|
||||
cursor: pointer;
|
||||
|
||||
.icon { color: var(--content-color); }
|
||||
.icon { color: var(--theme-dark-color); }
|
||||
&:focus .icon,
|
||||
&.withHover:hover .icon,
|
||||
&.withIconHover:hover .icon { color: var(--accent-color); }
|
||||
&.withHover:hover { background-color: var(--popup-bg-hover); }
|
||||
&.withIconHover:hover .icon { color: var(--theme-caption-color); }
|
||||
&.withHover:hover { background-color: var(--theme-popup-hover); }
|
||||
}
|
||||
|
||||
.antiPopup .ap-menuItem.arrow,
|
||||
@ -411,7 +413,7 @@
|
||||
top: 50%;
|
||||
right: 0.5rem;
|
||||
font-size: 0.375rem;
|
||||
color: var(--dark-color);
|
||||
color: var(--theme-dark-color);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
@ -424,7 +426,7 @@
|
||||
min-height: 22rem;
|
||||
background: var(--theme-popup-color);
|
||||
border-radius: .5rem;
|
||||
box-shadow: var(--popup-shadow);
|
||||
box-shadow: var(--theme-popup-shadow);
|
||||
|
||||
&:not(.min-w-168) { min-width: 22rem; }
|
||||
|
||||
|
||||
@ -93,7 +93,7 @@
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.selection {
|
||||
background-color: var(--menu-bg-select);
|
||||
background-color: var(--theme-button-focused);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -167,10 +167,10 @@
|
||||
color: var(--warning-color);
|
||||
}
|
||||
&.critical {
|
||||
color: var(--error-color);
|
||||
color: var(--theme-error-color);
|
||||
}
|
||||
&.overdue {
|
||||
color: var(--error-color);
|
||||
color: var(--theme-error-color);
|
||||
}
|
||||
}
|
||||
.not-selected {
|
||||
@ -198,10 +198,10 @@
|
||||
color: var(--warning-color);
|
||||
}
|
||||
&.critical {
|
||||
color: var(--error-color);
|
||||
color: var(--theme-error-color);
|
||||
}
|
||||
&.overdue {
|
||||
color: var(--error-color);
|
||||
color: var(--theme-error-color);
|
||||
}
|
||||
}
|
||||
.time-divider {
|
||||
|
||||
@ -462,7 +462,7 @@
|
||||
color: var(--warning-color);
|
||||
}
|
||||
&.overdue {
|
||||
color: var(--error-color);
|
||||
color: var(--theme-error-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -510,7 +510,7 @@
|
||||
color: var(--warning-color);
|
||||
}
|
||||
&.overdue {
|
||||
color: var(--error-color);
|
||||
color: var(--theme-error-color);
|
||||
}
|
||||
}
|
||||
.time-divider {
|
||||
|
||||
@ -69,7 +69,7 @@
|
||||
}
|
||||
|
||||
&.mIconContainerCritical {
|
||||
color: var(--error-color);
|
||||
color: var(--theme-error-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -125,7 +125,7 @@
|
||||
>
|
||||
<svelte:component
|
||||
this={isMobile ? Phone : Computer}
|
||||
fill={alwaysMobile ? 'var(--won-color)' : 'var(--content-color)'}
|
||||
fill={alwaysMobile ? 'var(--theme-won-color)' : 'var(--content-color)'}
|
||||
size={'small'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -339,8 +339,8 @@
|
||||
<div class="activity-content content" class:indent={isAttached} class:contentHidden>
|
||||
<ShowMore ignore={edit}>
|
||||
{#if tx.collectionAttribute !== undefined && (tx.txDocIds?.size ?? 0) > 1}
|
||||
<div class="flex-row-center flex-grow flex-wrap clear-mins">
|
||||
<TxViewTx {tx} {onCancelEdit} {edit} {viewlet} />
|
||||
<div class="flex-row-center flex-grow flex-wrap m--1 gap-around-2 clear-mins">
|
||||
<TxViewTx {tx} {onCancelEdit} {edit} {viewlet} presentersOnly={isAttached} />
|
||||
</div>
|
||||
{:else if typeof viewlet.component === 'string'}
|
||||
<Component is={viewlet.component} {props} on:close={onCancelEdit} />
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
export let tx: DisplayTx
|
||||
export let viewlet: TxDisplayViewlet
|
||||
export let edit: boolean
|
||||
export let presentersOnly: boolean = false
|
||||
export let onCancelEdit: () => void
|
||||
|
||||
function filterTx (dtx: DisplayTx[], _class: Ref<Class<Doc>>): DisplayTx[] {
|
||||
@ -22,7 +23,7 @@
|
||||
</script>
|
||||
|
||||
{#each filterTx([...tx.txes, tx], core.class.TxCreateDoc) as ctx, i}
|
||||
{#if i === 0}
|
||||
{#if i === 0 && !presentersOnly}
|
||||
<IconAdd size={'x-small'} fill={'var(--trans-color)'} />
|
||||
{/if}
|
||||
{#if typeof viewlet?.component === 'string'}
|
||||
@ -32,7 +33,7 @@
|
||||
{/if}
|
||||
{/each}
|
||||
{#each filterTx([...tx.txes, tx], core.class.TxRemoveDoc) as ctx, i}
|
||||
{#if i === 0}
|
||||
{#if i === 0 && !presentersOnly}
|
||||
<IconDelete size={'x-small'} fill={'var(--trans-color)'} />
|
||||
{/if}
|
||||
{#if typeof viewlet?.component === 'string'}
|
||||
|
||||
@ -16,8 +16,8 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import type { Attachment } from '@hcengineering/attachment'
|
||||
import { showPopup, closeTooltip, Icon, IconClose } from '@hcengineering/ui'
|
||||
import { PDFViewer, getFileUrl } from '@hcengineering/presentation'
|
||||
import { showPopup, closeTooltip, Label } from '@hcengineering/ui'
|
||||
import presentation, { PDFViewer, getFileUrl } from '@hcengineering/presentation'
|
||||
import filesize from 'filesize'
|
||||
|
||||
export let value: Attachment
|
||||
@ -67,6 +67,8 @@
|
||||
e.stopPropagation()
|
||||
window.open((e.target as HTMLAnchorElement).href, '_blank')
|
||||
}
|
||||
|
||||
let download: HTMLAnchorElement
|
||||
</script>
|
||||
|
||||
<div class="flex-row-center attachment-container">
|
||||
@ -77,100 +79,112 @@
|
||||
on:click={clickHandler}
|
||||
on:mousedown={middleClickHandler}
|
||||
>
|
||||
<div class="flex-center icon">
|
||||
{iconLabel(value.name)}
|
||||
<div
|
||||
class="flex-center icon"
|
||||
class:image={isImage(value.type)}
|
||||
style:background-image={isImage(value.type) ? `url(${getFileUrl(value.file)})` : 'none'}
|
||||
>
|
||||
{#if !isImage(value.type)}{iconLabel(value.name)}{/if}
|
||||
</div>
|
||||
</a>
|
||||
<div class="flex-col info-container">
|
||||
<div class="name">
|
||||
<a href={getFileUrl(value.file)} download={value.name} on:click={clickHandler} on:mousedown={middleClickHandler}>
|
||||
{trimFilename(value.name)}
|
||||
</a>
|
||||
</div>
|
||||
<div class="info-content">
|
||||
{filesize(value.size, { spacer: '' })} •
|
||||
<a class="no-line colorInherit" href={getFileUrl(value.file)} download={value.name} bind:this={download}>
|
||||
<Label label={presentation.string.Download} />
|
||||
</a>
|
||||
{#if removable}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div
|
||||
class="remove-btn"
|
||||
•
|
||||
<span
|
||||
class="remove-link"
|
||||
on:click={(ev) => {
|
||||
ev.stopPropagation()
|
||||
ev.preventDefault()
|
||||
dispatch('remove')
|
||||
}}
|
||||
>
|
||||
<Icon icon={IconClose} size={'medium'} />
|
||||
</div>
|
||||
<Label label={presentation.string.Delete} />
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
<div class="flex-col info">
|
||||
<div class="name">
|
||||
<a href={getFileUrl(value.file)} download={value.name} on:click={clickHandler} on:mousedown={middleClickHandler}>
|
||||
{trimFilename(value.name)}
|
||||
</a>
|
||||
</div>
|
||||
<div class="type">{filesize(value.size)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.icon {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
margin-right: 1rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.625rem;
|
||||
color: var(--white-color);
|
||||
background-color: var(--primary-bg-color);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
|
||||
.remove-btn {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--primary-bg-hover);
|
||||
border-radius: 0.25rem;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.attachment-container {
|
||||
margin-right: 0.5rem;
|
||||
// padding: .375rem;
|
||||
// width: 14rem;
|
||||
// min-width: 14rem;
|
||||
// max-width: 14rem;
|
||||
// background-color: var(--accent-bg-color);
|
||||
// border: 1px solid var(--divider-color);
|
||||
// border-radius: .25rem;
|
||||
padding: 0.375rem 0.75rem 0.375rem 0.375rem;
|
||||
width: auto;
|
||||
min-width: 14rem;
|
||||
max-width: 19rem;
|
||||
background-color: var(--theme-button-enabled);
|
||||
border: 1px solid var(--theme-button-border);
|
||||
border-radius: 0.25rem;
|
||||
|
||||
&:hover .remove-btn {
|
||||
opacity: 1;
|
||||
.icon {
|
||||
flex-shrink: 0;
|
||||
margin-right: 0.75rem;
|
||||
width: 3.25rem;
|
||||
height: 3.25rem;
|
||||
border: 1px solid var(--primary-button-border);
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(.image) {
|
||||
color: var(--primary-button-color);
|
||||
background-color: var(--primary-button-enabled);
|
||||
}
|
||||
&.image {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--theme-caption-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
.info-content {
|
||||
margin-top: 0.125rem;
|
||||
white-space: nowrap;
|
||||
font-size: 0.6875rem;
|
||||
color: var(--theme-darker-color);
|
||||
}
|
||||
.remove-link {
|
||||
color: var(--theme-error-color);
|
||||
cursor: pointer;
|
||||
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
color: var(--accent-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
a.colorInherit {
|
||||
color: inherit;
|
||||
|
||||
.type {
|
||||
white-space: nowrap;
|
||||
font-size: 0.75rem;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--theme-dark-color);
|
||||
}
|
||||
}
|
||||
|
||||
.name:hover,
|
||||
.icon:hover + .info > .name,
|
||||
.no-line:hover + .info > .name a {
|
||||
text-decoration: underline;
|
||||
color: var(--caption-color);
|
||||
}
|
||||
.name:active,
|
||||
.icon:active + .info > .name,
|
||||
.no-line:active + .info > .name a {
|
||||
text-decoration: underline;
|
||||
color: var(--accent-color);
|
||||
.name:hover,
|
||||
.icon:hover + .info-container > .name,
|
||||
.no-line:hover + .info-container > .name a {
|
||||
text-decoration: underline;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
.name:active,
|
||||
.icon:active + .info-container > .name,
|
||||
.no-line:active + .info-container > .name a {
|
||||
text-decoration: underline;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -67,7 +67,7 @@
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex container buttonContainer extraWidth">
|
||||
<div class="flex buttonContainer extraWidth">
|
||||
<AttachmentPresenter {value} />
|
||||
<div class="actions conner">
|
||||
<AttachmentActions attachment={value} {isSaved} />
|
||||
@ -76,13 +76,6 @@
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
background-color: var(--board-card-bg-color);
|
||||
border: 1px solid var(--button-border-color);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.buttonContainer {
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
|
||||
@ -345,7 +345,7 @@
|
||||
{#if attachments.size && fakeAttach === 'normal'}
|
||||
<div class="flex-row-center list scroll-divider-color">
|
||||
{#each Array.from(attachments.values()) as attachment}
|
||||
<div class="item flex">
|
||||
<div class="item flex-center flex-no-shrink clear-mins">
|
||||
{#if useAttachmentPreview}
|
||||
<AttachmentPreview value={attachment} />
|
||||
{:else}
|
||||
@ -365,6 +365,7 @@
|
||||
|
||||
<style lang="scss">
|
||||
.list {
|
||||
align-items: stretch;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
min-width: 0;
|
||||
@ -375,7 +376,11 @@
|
||||
border: 1px solid var(--theme-button-border);
|
||||
border-radius: 0.25rem;
|
||||
|
||||
.item {
|
||||
min-height: 100%;
|
||||
}
|
||||
.item + .item {
|
||||
margin-left: 1rem;
|
||||
padding-left: 1rem;
|
||||
border-left: 1px solid var(--theme-divider-color);
|
||||
}
|
||||
|
||||
@ -98,7 +98,7 @@
|
||||
icon: DocSuccess,
|
||||
action: () => approve(),
|
||||
order: 1000,
|
||||
fill: 'var(--won-color)',
|
||||
fill: 'var(--theme-won-color)',
|
||||
disabled
|
||||
},
|
||||
{
|
||||
@ -106,7 +106,7 @@
|
||||
icon: DocFail,
|
||||
action: () => reject(),
|
||||
order: 2000,
|
||||
fill: 'var(--lost-color)',
|
||||
fill: 'var(--theme-lost-color)',
|
||||
disabled
|
||||
}
|
||||
]
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
id: s._id,
|
||||
label: s.name,
|
||||
icon: s._class === task.class.WonState ? Won : Lost,
|
||||
color: s._class === task.class.WonState ? 'var(--won-color)' : 'var(--lost-color)'
|
||||
color: s._class === task.class.WonState ? 'var(--theme-won-color)' : 'var(--theme-lost-color)'
|
||||
}
|
||||
})
|
||||
itemsDS.unshift({ id: 'NoDoneState', labelIntl: task.string.NoDoneState })
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
export let style: 'normal' | 'circle' = 'normal'
|
||||
export let fill: string = 'var(--lost-color)'
|
||||
export let fill: string = 'var(--theme-lost-color)'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
export let style: 'normal' | 'circle' = 'normal'
|
||||
export let fill: string = 'var(--won-color)'
|
||||
export let fill: string = 'var(--theme-won-color)'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
@ -65,7 +65,7 @@
|
||||
transform="translate(3.5,3.5)"
|
||||
/>
|
||||
{:else}
|
||||
<circle cx="8" cy="8" r="4" fill="var(--error-color)" opacity=".15" />
|
||||
<circle cx="8" cy="8" r="4" fill="var(--theme-error-color)" opacity=".15" />
|
||||
{/if}
|
||||
{:else if category._id === tracker.issueStatusCategory.Completed}
|
||||
<path
|
||||
|
||||
@ -129,7 +129,7 @@
|
||||
}
|
||||
|
||||
.showError {
|
||||
color: var(--error-color) !important;
|
||||
color: var(--theme-error-color) !important;
|
||||
}
|
||||
.showWarning {
|
||||
color: var(--warning-color) !important;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user