mirror of
https://github.com/hcengineering/platform.git
synced 2024-11-22 11:42:30 +03:00
Fixed filters, popups, tags, activity. (#3260)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
ea6612cdb7
commit
b7463a3a16
@ -282,6 +282,7 @@ input.search {
|
||||
&:not(.small-gap, .large-gap) { margin-right: .375rem; }
|
||||
&.small-gap { margin-right: .25rem; }
|
||||
&.large-gap { margin-right: .5rem; }
|
||||
&.flow:last-child { margin-right: 0; }
|
||||
}
|
||||
.label {
|
||||
min-width: 0;
|
||||
@ -338,6 +339,7 @@ input.search {
|
||||
.icon.circle { transform: translateY(.375rem); }
|
||||
.avatar-container:not(.no-img) { transform: translateY(.375rem); }
|
||||
.avatar-container.no-img { transform: translateY(.15rem); }
|
||||
.emoji { transform: none; }
|
||||
}
|
||||
|
||||
.buttons-group {
|
||||
|
||||
@ -11,6 +11,47 @@
|
||||
transition-property: border, background-color, color, box-shadow;
|
||||
transition-duration: 0.15s;
|
||||
|
||||
&.inline {
|
||||
height: 1.375rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 0.75rem;
|
||||
&.only-icon {
|
||||
width: 1.375rem;
|
||||
}
|
||||
}
|
||||
&.x-small {
|
||||
height: 1.5rem;
|
||||
font-size: 0.75rem;
|
||||
&.only-icon {
|
||||
width: 1.5rem;
|
||||
}
|
||||
}
|
||||
&.small {
|
||||
height: 1.75rem;
|
||||
font-size: 0.8125rem;
|
||||
&.only-icon {
|
||||
width: 1.75rem;
|
||||
}
|
||||
}
|
||||
&.medium {
|
||||
height: 2rem;
|
||||
&.only-icon {
|
||||
width: 2rem;
|
||||
}
|
||||
}
|
||||
&.large {
|
||||
height: 2.25rem;
|
||||
&.only-icon {
|
||||
width: 2.25rem;
|
||||
}
|
||||
}
|
||||
&.x-large {
|
||||
height: 2.75rem;
|
||||
&.only-icon {
|
||||
width: 2.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.iconL:not(.iconR) {
|
||||
padding: 0 1rem 0 0.75rem;
|
||||
}
|
||||
@ -89,7 +130,7 @@
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
&:not(.no-focus):focus {
|
||||
&:not(.sh-filter) {
|
||||
box-shadow: 0 0 0 2px var(--primary-button-focused-border);
|
||||
}
|
||||
@ -239,7 +280,7 @@
|
||||
background-color: var(--theme-button-hovered);
|
||||
border-color: var(--theme-button-border);
|
||||
}
|
||||
&:focus {
|
||||
&:not(.no-focus):focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@ -287,7 +328,7 @@
|
||||
&:hover {
|
||||
background-color: var(--dangerous-bg-hover);
|
||||
}
|
||||
&:focus {
|
||||
&:not(.no-focus):focus {
|
||||
box-shadow: var(--dangerous-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: fit-content;
|
||||
min-width: 10rem;
|
||||
min-width: 12.5rem;
|
||||
max-width: 17rem;
|
||||
max-height: 22rem;
|
||||
background: var(--theme-popup-color);
|
||||
|
||||
@ -51,6 +51,7 @@
|
||||
export let iconRightSize: IconSize = 'x-small'
|
||||
export let short: boolean = false
|
||||
export let accent: boolean = false
|
||||
export let noFocus: boolean = false
|
||||
|
||||
// $: iconSize = size === 'inline' ? 'inline' : 'small'
|
||||
let iconOnly: boolean = false
|
||||
@ -100,6 +101,7 @@
|
||||
bind:this={input}
|
||||
class="antiButton {kind} {size} jf-{justify} sh-{shape ?? 'no-shape'} bs-{borderStyle}"
|
||||
class:only-icon={iconOnly}
|
||||
class:no-focus={noFocus}
|
||||
class:accent
|
||||
class:highlight
|
||||
class:selected
|
||||
@ -143,46 +145,3 @@
|
||||
{#if $$slots.content}<slot name="content" />{/if}
|
||||
{#if $$slots.iconRight}<slot name="iconRight" />{/if}
|
||||
</button>
|
||||
|
||||
<style lang="scss">
|
||||
.inline {
|
||||
height: 1.375rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 0.75rem;
|
||||
&.only-icon {
|
||||
width: 1.375rem;
|
||||
}
|
||||
}
|
||||
.x-small {
|
||||
height: 1.5rem;
|
||||
font-size: 0.75rem;
|
||||
&.only-icon {
|
||||
width: 1.5rem;
|
||||
}
|
||||
}
|
||||
.small {
|
||||
height: 1.75rem;
|
||||
font-size: 0.8125rem;
|
||||
&.only-icon {
|
||||
width: 1.75rem;
|
||||
}
|
||||
}
|
||||
.medium {
|
||||
height: 2rem;
|
||||
&.only-icon {
|
||||
width: 2rem;
|
||||
}
|
||||
}
|
||||
.large {
|
||||
height: 2.25rem;
|
||||
&.only-icon {
|
||||
width: 2.25rem;
|
||||
}
|
||||
}
|
||||
.x-large {
|
||||
height: 2.75rem;
|
||||
&.only-icon {
|
||||
width: 2.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
import plugin from '../plugin'
|
||||
import type { AnySvelteComponent } from '../types'
|
||||
import Icon from './Icon.svelte'
|
||||
import Button from './Button.svelte'
|
||||
import IconClose from './icons/Close.svelte'
|
||||
|
||||
export let icon: Asset | AnySvelteComponent | ComponentType
|
||||
@ -46,25 +47,29 @@
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div class="flex-between editbox {size}" style={width ? 'width: ' + width : ''} on:click={() => textHTML.focus()}>
|
||||
<div class="mr-2 icon"><Icon {icon} size={'small'} /></div>
|
||||
<div class="mr-2 content-dark-color"><Icon {icon} size={'small'} /></div>
|
||||
<input bind:this={textHTML} type="text" bind:value placeholder={phTraslate} on:change on:input on:keydown />
|
||||
<slot name="extra" />
|
||||
{#if value}
|
||||
<div
|
||||
class="ml-2 btn"
|
||||
on:click={() => {
|
||||
value = ''
|
||||
dispatch('change', '')
|
||||
}}
|
||||
>
|
||||
<Icon icon={IconClose} size={'x-small'} />
|
||||
<div class="ml-2">
|
||||
<Button
|
||||
icon={IconClose}
|
||||
kind={'transparent'}
|
||||
size={'small'}
|
||||
noFocus
|
||||
on:click={() => {
|
||||
value = ''
|
||||
dispatch('change', '')
|
||||
textHTML.focus()
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.editbox {
|
||||
padding: 0 0.5rem 0 0.5rem;
|
||||
padding: 0 0.25rem 0 0.5rem;
|
||||
min-width: 10rem;
|
||||
color: var(--theme-caption-color);
|
||||
border-radius: 0.25rem;
|
||||
@ -93,16 +98,5 @@
|
||||
color: var(--theme-dark-color);
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
color: var(--theme-dark-color);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
color: var(--theme-dark-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -91,6 +91,7 @@
|
||||
user-select: none;
|
||||
|
||||
.list-item {
|
||||
margin: 0 0.5rem;
|
||||
min-width: 0;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
@ -148,10 +148,10 @@ export function fitPopupPositionedElement (
|
||||
} else {
|
||||
// Vertical
|
||||
if (rect.bottom + rectPopup.height + 28 <= docHeight) {
|
||||
newProps.top = `${rect.bottom + 1}px`
|
||||
newProps.top = `${rect.bottom + 16}px`
|
||||
direction = 'bottom'
|
||||
} else if (rectPopup.height + 28 < rect.top) {
|
||||
newProps.bottom = `${docHeight - rect.top + 1}px`
|
||||
newProps.bottom = `${docHeight - rect.top + 16}px`
|
||||
direction = 'top'
|
||||
} else {
|
||||
newProps.top = newProps.bottom = '16px'
|
||||
|
||||
@ -399,7 +399,7 @@
|
||||
flex-grow: 1;
|
||||
margin-right: 1rem;
|
||||
min-width: 0;
|
||||
color: var(--content-color);
|
||||
color: var(--theme-dark-color);
|
||||
|
||||
.msgactivity-content__header {
|
||||
display: flex;
|
||||
@ -520,13 +520,13 @@
|
||||
}
|
||||
|
||||
.show-diff {
|
||||
color: var(--accent-color);
|
||||
color: var(--theme-content-color);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--caption-color);
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
&:active {
|
||||
color: var(--accent-color);
|
||||
color: var(--theme-content-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
{@const valueColor = getPlatformColorDef(value.color ?? 0, $themeStore.dark)}
|
||||
{#if i < limit}
|
||||
<div class="item" class:last={i === limit - 1} class:first={i === 0}>
|
||||
<div class="color" style:background-color={valueColor.background} />
|
||||
<div class="color" style:background-color={valueColor.color} />
|
||||
{#if i === limit - 1 && values.length <= limit}
|
||||
<span class="label overflow-label ml-1-5 max-w-40" style:color={valueColor.title}>
|
||||
{value.title}
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="color" style:background-color={getPlatformColorDef(value.color ?? 0, $themeStore.dark).background} />
|
||||
<div class="color" style:background-color={getPlatformColorDef(value.color ?? 0, $themeStore.dark).color} />
|
||||
<span class="label overflow-label ml-1-5 max-w-40">
|
||||
{value.title}
|
||||
</span>
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
realWidth = element.clientWidth
|
||||
}}
|
||||
>
|
||||
<div class="color" style:background-color={color.background} />
|
||||
<div class="color" style:background-color={color.color} />
|
||||
<span class="label overflow-label ml-1 text-sm caption-color max-w-40" style:color={color.title}
|
||||
>{value.title}</span
|
||||
>
|
||||
@ -56,7 +56,7 @@
|
||||
realWidth = element.clientWidth
|
||||
}}
|
||||
>
|
||||
<div class="color" style:background-color={color.background} />
|
||||
<div class="color" style:background-color={color.color} />
|
||||
<span class="label overflow-label ml-1-5 max-w-40" style:color={color.title}>
|
||||
{value.title}
|
||||
</span>
|
||||
|
||||
@ -168,7 +168,7 @@
|
||||
checkSelected(selected, element)
|
||||
}}
|
||||
>
|
||||
<div class="tag" style:background-color={color.background} />
|
||||
<div class="tag" style:background-color={color.color} />
|
||||
<span class="lines-limit-2 flex-grow" style:color={color.title}>{element.title}</span>
|
||||
<span class="ml-2 text-xs">
|
||||
({element.refCount ?? 0})
|
||||
|
||||
@ -31,13 +31,13 @@
|
||||
|
||||
{#if value}
|
||||
<DocNavLink object={value} {onClick} {disabled} {noUnderline} {inline} component={view.component.EditDoc}>
|
||||
<span class="flex-presenter" class:inline class:list={kind === 'list'}>
|
||||
<span class="flex-presenter" class:inline-presenter={inline} class:list={kind === 'list'}>
|
||||
{#if !inline && shouldShowAvatar}
|
||||
<div class="icon" use:tooltip={{ label: tracker.string.Component }}>
|
||||
<Icon icon={tracker.icon.Component} size={'small'} />
|
||||
</div>
|
||||
{/if}
|
||||
<span title={value.label} class="label nowrap">
|
||||
<span title={value.label} class="label nowrap" class:no-underline={disabled || noUnderline}>
|
||||
{value.label}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
|
||||
<div class="flex-presenter">
|
||||
{#each icons as icon}
|
||||
<div class="icon">
|
||||
<div class="icon small-gap flow">
|
||||
<Icon {icon} size={'small'} />
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
@ -18,10 +18,11 @@
|
||||
import tracker from '../../plugin'
|
||||
|
||||
export let value: Project
|
||||
export let inline = false
|
||||
</script>
|
||||
|
||||
<div class="flex-presenter cursor-default">
|
||||
<div class="icon">
|
||||
<div class="flex-presenter cursor-default" class:inline-presenter={inline}>
|
||||
<div class="icon" class:emoji={value.icon === tracker.component.IconWithEmojii}>
|
||||
<Icon
|
||||
icon={value.icon === tracker.component.IconWithEmojii ? IconWithEmojii : value.icon ?? tracker.icon.Home}
|
||||
iconProps={value.icon === tracker.component.IconWithEmojii
|
||||
|
||||
@ -158,6 +158,7 @@
|
||||
_class={item._class}
|
||||
value={item}
|
||||
inline={false}
|
||||
noUnderline
|
||||
props={{ disabled: true, inline: false, size, avatarSize: 'smaller' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -15,19 +15,12 @@
|
||||
<script lang="ts">
|
||||
import { Class, Doc, Ref, Space } from '@hcengineering/core'
|
||||
import { getClient } from '@hcengineering/presentation'
|
||||
import {
|
||||
Button,
|
||||
IconClose,
|
||||
IconFilter,
|
||||
eventToHTMLElement,
|
||||
resolvedLocationStore,
|
||||
showPopup
|
||||
} from '@hcengineering/ui'
|
||||
import { Button, IconFilter, eventToHTMLElement, resolvedLocationStore, showPopup } from '@hcengineering/ui'
|
||||
import { Filter } from '@hcengineering/view'
|
||||
import { filterStore, getFilterKey, setFilters } from '../../filter'
|
||||
import view from '../../plugin'
|
||||
import FilterTypePopup from './FilterTypePopup.svelte'
|
||||
import IconArrowDown from '../icons/ArrowDown.svelte'
|
||||
import IconClose from '../icons/Close.svelte'
|
||||
|
||||
export let _class: Ref<Class<Doc>> | undefined
|
||||
export let space: Ref<Space> | undefined = undefined
|
||||
@ -84,9 +77,9 @@
|
||||
|
||||
{#if visible}
|
||||
<Button
|
||||
icon={IconFilter}
|
||||
icon={$filterStore.length === 0 ? IconFilter : IconClose}
|
||||
iconProps={{ fill: $filterStore.length === 0 ? 'var(--theme-content-color)' : 'var(--theme-halfcontent-color)' }}
|
||||
label={$filterStore.length === 0 ? view.string.Filter : view.string.ClearFilters}
|
||||
iconRight={$filterStore.length === 0 ? IconArrowDown : IconClose}
|
||||
on:click={(ev) => {
|
||||
if ($filterStore.length === 0) add(ev)
|
||||
else setFilters([])
|
||||
|
||||
@ -165,7 +165,7 @@
|
||||
{/await}
|
||||
<div class="divider" />
|
||||
<button
|
||||
class="filter-button hoverable"
|
||||
class="filter-button square hoverable"
|
||||
on:click={() => {
|
||||
dispatch('remove')
|
||||
}}
|
||||
@ -199,9 +199,8 @@
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
padding: 0 0.375rem;
|
||||
font-size: 0.75rem;
|
||||
height: 1.5rem;
|
||||
min-width: 1.5rem;
|
||||
height: 1.75rem;
|
||||
min-width: 1.75rem;
|
||||
white-space: nowrap;
|
||||
color: var(--theme-content-color);
|
||||
border: 1px solid transparent;
|
||||
@ -209,10 +208,21 @@
|
||||
transition-property: border, background-color, color, box-shadow;
|
||||
transition-duration: 0.15s;
|
||||
|
||||
.left-round {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.btn-icon {
|
||||
color: var(--theme-dark-color);
|
||||
color: var(--theme-halfcontent-color);
|
||||
transition: color 0.15s;
|
||||
pointer-events: none;
|
||||
|
||||
&.square {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
width: 1.75rem;
|
||||
}
|
||||
}
|
||||
span {
|
||||
white-space: nowrap;
|
||||
@ -228,12 +238,9 @@
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.divider {
|
||||
flex-shrink: 0;
|
||||
width: 1px;
|
||||
height: 1.5rem;
|
||||
background-color: var(--theme-refinput-divider);
|
||||
|
||||
27
plugins/view-resources/src/components/icons/Close.svelte
Normal file
27
plugins/view-resources/src/components/icons/Close.svelte
Normal file
@ -0,0 +1,27 @@
|
||||
<!--
|
||||
//
|
||||
// Copyright © 2023 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">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
export let descending: boolean = false
|
||||
export let fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M8.7,8l4.6-4.6c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0L8,7.3L3.4,2.6c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7L7.3,8l-4.6,4.6c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1L8,8.7l4.6,4.6c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1c0.2-0.2,0.2-0.5,0-0.7L8.7,8z"
|
||||
/>
|
||||
</svg>
|
||||
Loading…
Reference in New Issue
Block a user