Refactor Button. Add icons. Fix EditDoc. (#2326)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2022-10-26 08:16:32 +03:00 committed by GitHub
parent cfe5972a11
commit 70e00dbb5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 115 additions and 103 deletions

View File

@ -134,7 +134,7 @@ export function createModel (builder: Builder): void {
id: 'library',
position: 'top',
label: document.string.Library,
icon: document.icon.Document,
icon: document.icon.Library,
component: document.component.Documents
}
],

View File

@ -148,6 +148,8 @@
.icon { color: var(--accent-color); }
}
&.no-focus:focus { background-color: transparent; }
&.no-focus:hover { background-color: var(--popup-bg-hover); }
}
.sticky-wrapper {
display: flex;

View File

@ -41,9 +41,10 @@
export let borderStyle: 'solid' | 'dashed' = 'solid'
export let id: string | undefined = undefined
export let input: HTMLButtonElement | undefined = undefined
export let showTooltip: LabelAndProps | undefined = undefined
let iconSize: ButtonSize
$: iconSize = size === 'inline' ? 'inline' : 'small'
$: iconOnly = label === undefined && $$slots.content === undefined
onMount(() => {
@ -85,20 +86,12 @@
<button
use:tooltip={showTooltip}
bind:this={input}
class="button {kind} {size} jf-{justify}"
class="button {kind} {size} jf-{justify} sh-{shape ?? 'no-shape'} bs-{borderStyle}"
class:only-icon={iconOnly}
class:border-radius-1={shape === undefined}
class:border-radius-2={shape === 'round'}
class:border-radius-4={shape === 'circle'}
class:border-radius-left-1={shape === 'rectangle-right'}
class:border-radius-right-1={shape === 'rectangle-left'}
class:border-solid={borderStyle === 'solid'}
class:border-dashed={borderStyle === 'dashed'}
class:highlight
class:selected
disabled={disabled || loading}
style:width
style:padding={shape === 'circle' && kind === 'link' ? '0 .5rem 0 .25rem' : '0 .5rem'}
{title}
type={kind === 'primary' ? 'submit' : 'button'}
on:click|stopPropagation|preventDefault
@ -109,22 +102,12 @@
{id}
>
{#if icon && !loading}
<div
class="btn-icon pointer-events-none"
class:mr-1={!iconOnly &&
(kind === 'no-border' || kind === 'link-bordered' || kind === 'list' || shape === 'circle')}
class:mr-2={!iconOnly &&
kind !== 'no-border' &&
kind !== 'link-bordered' &&
kind !== 'list' &&
shape !== 'circle'}
class:resetIconSize
>
<Icon bind:icon size={size === 'inline' ? 'inline' : 'small'} />
<div class="btn-icon pointer-events-none" class:resetIconSize>
<Icon bind:icon size={iconSize} />
</div>
{/if}
{#if loading}
<Spinner />
<Spinner size={iconSize} />
{/if}
{#if label}
<span class="overflow-label disabled pointer-events-none" class:ml-2={loading}>
@ -184,19 +167,48 @@
transition-property: border, background-color, color, box-shadow;
transition-duration: 0.15s;
&.border-solid {
border-style: solid;
}
&.border-dashed {
border-style: dashed;
}
.btn-icon {
color: var(--content-color);
transition: color 0.15s;
pointer-events: none;
}
&:not(.only-icon) .btn-icon {
margin-right: 0.5rem;
}
&.no-border:not(.only-icon) .btn-icon,
&.link-bordered:not(.only-icon) .btn-icon,
&.list:not(.only-icon) .btn-icon,
&.sh-circle:not(.only-icon) .btn-icon {
margin-right: 0.25rem;
}
&.sh-no-shape {
border-radius: 0.25rem;
}
&.sh-round {
border-radius: 0.5rem;
}
&.sh-circle {
border-radius: 1rem;
&.link {
padding: 0 0.5rem 0 0.25rem;
}
}
&.sh-rectangle-right {
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
&.sh-rectangle-left {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
&.bs-solid {
border-style: solid;
}
&.bs-dashed {
border-style: dashed;
}
&.highlight {
box-shadow: inset 0 0 1px 1px var(--primary-bg-color);

View File

@ -13,7 +13,9 @@
// limitations under the License.
-->
<script lang="ts">
export let size: 'small' | 'medium' = 'medium'
import type { ButtonSize } from '../types'
export let size: ButtonSize = 'medium'
</script>
<div class="spinner spinner-{size}">
@ -32,6 +34,10 @@
-webkit-animation: spinCircle 1s infinite linear;
animation: spinCircle 1s infinite linear;
&-inline {
width: 0.75rem;
height: 0.75rem;
}
&-small {
width: 1rem;
height: 1rem;
@ -40,6 +46,14 @@
width: 1.5rem;
height: 1.5rem;
}
&-large {
width: 2rem;
height: 2rem;
}
&-x-large {
width: 3rem;
height: 3rem;
}
}
@-webkit-keyframes spinCircle {
from {

View File

@ -1,18 +1,26 @@
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="documentapplication" viewBox="0 0 237.783 237.783">
<!-- <path d="m42.735,50.071h96.959c3.313,0 6,2.687 6,6s-2.687,6-6,6h-96.959c-3.313,0-6-2.687-6-6s2.686-6 6-6zm0,25.934h96.959c3.313,0 6,2.687 6,6s-2.687,6-6,6h-96.959c-3.313,0-6-2.687-6-6s2.686-6 6-6zm0,25.935h96.959c3.313,0 6,2.687 6,6s-2.687,6-6,6h-96.959c-3.313,0-6-2.687-6-6s2.686-6 6-6zm0,25.935h96.959c3.313,0 6,2.687 6,6s-2.687,6-6,6h-96.959c-3.313,0-6-2.687-6-6s2.686-6 6-6z"/> -->
<path d="m42.735,62.071h96.959c3.313,0 6-2.687 6-6s-2.687-6-6-6h-96.959c-3.313,0-6,2.687-6,6s2.686,6 6,6z"/>
<!-- <path d="m42.735,88.005h96.959c3.313,0 6-2.687 6-6s-2.687-6-6-6h-96.959c-3.313,0-6,2.687-6,6s2.686,6 6,6z"/> -->
<path d="m42.735,113.94h96.959c3.313,0 6-2.687 6-6s-2.687-6-6-6h-96.959c-3.313,0-6,2.687-6,6s2.686,6 6,6z"/>
<!-- <path d="m42.735,139.875h96.959c3.313,0 6-2.687 6-6s-2.687-6-6-6h-96.959c-3.313,0-6,2.687-6,6s2.686,6 6,6z"/> -->
<path d="m237.783,98.361c0-1.591-0.632-3.117-1.757-4.243l-16.356-16.355c-1.125-1.125-2.651-1.757-4.243-1.757s-3.117,0.632-4.243,1.757l-28.756,28.756v-88.117c0-3.313-2.686-6-6-6h-170.428c-3.314,0-6,2.687-6,6v200.979c0,3.313 2.686,6 6,6h170.429c3.314,0 6-2.687 6-6v-63.18l53.597-53.597c1.125-1.125 1.757-2.651 1.757-4.243zm-225.783,115.02v-188.979h158.429v94.117l-35.291,35.291h-92.403c-3.313,0-6,2.687-6,6s2.687,6 6,6h80.403l-1.033,1.033c-0.777,0.777-1.326,1.753-1.586,2.821l-4.157,17.05h-25.148c-3.313,0-6,2.687-6,6s2.687,6 6,6c0,0 29.714,0 29.86,0 0.473,0 0.95-0.056 1.421-0.171l21.629-5.273c1.068-0.26 2.044-0.809 2.821-1.586l23.482-23.482v45.181h-158.427zm127.649-31.374l-10.408,2.538 2.538-10.408 83.648-83.648 7.871,7.871-83.649,83.647z"/>
<symbol id="documentapplication" viewBox="0 0 24 24">
<path d="M18.7,14.2l-3.5,3.5c-0.2,0.2-0.5,0.7-0.5,1l-0.2,1.3c-0.1,0.5,0.1,0.9,0.4,1.2c0.3,0.3,0.6,0.4,1,0.4c0.1,0,0.2,0,0.2,0l1.4-0.2c0.4-0.1,0.8-0.3,1-0.5l2.9-2.9c0.1-0.1,0.1-0.1,0.2-0.2l0.4-0.4c0.5-0.5,0.7-1,0.8-1.5c0.1-0.6-0.2-1.2-0.8-1.8C21.3,13.6,20.1,12.8,18.7,14.2z M20.9,15.3c0.2,0.2,0.4,0.4,0.4,0.6c0,0.1-0.1,0.3-0.4,0.5l-0.2,0.2c-0.5-0.2-0.9-0.6-1.1-1.2l0.2-0.2C20.2,14.9,20.4,14.8,20.9,15.3z M17.3,20c0,0-0.1,0.1-0.2,0.1l-1.2,0.2l0.2-1.2c0,0,0.1-0.1,0.1-0.2l2.3-2.3c0.3,0.5,0.7,0.9,1.1,1.2L17.3,20z"/>
<path d="M22.7,10c0-0.1,0-0.1,0-0.2c0,0,0,0,0-0.1c0-0.1-0.1-0.2-0.1-0.2l-8-8c-0.1-0.1-0.1-0.1-0.2-0.1c0,0,0,0-0.1,0c-0.1,0-0.1,0-0.2,0c0,0,0,0,0,0H9C3.6,1.2,1.2,3.6,1.2,9v6c0,5.4,2.3,7.8,7.8,7.8h3.2c0.4,0,0.8-0.3,0.8-0.8s-0.3-0.8-0.8-0.8H9c-4.6,0-6.2-1.6-6.2-6.2V9c0-4.6,1.6-6.2,6.2-6.2h4.2V6c0,3.4,1.3,4.8,4.8,4.8h3.2v0.8c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8L22.7,10C22.8,10,22.7,10,22.7,10z M18,9.2c-2.6,0-3.2-0.7-3.2-3.2V3.8l5.4,5.4H18z"/>
<path d="M13,12.3H7c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h6c0.4,0,0.8-0.3,0.8-0.8S13.4,12.3,13,12.3z"/>
<path d="M7,16.3c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h4c0.4,0,0.8-0.3,0.8-0.8s-0.3-0.8-0.8-0.8H7z"/>
</symbol>
<symbol id="document" viewBox="0 0 237.783 237.783">
<path d="m42.735,50.071h96.959c3.313,0 6,2.687 6,6s-2.687,6-6,6h-96.959c-3.313,0-6-2.687-6-6s2.686-6 6-6zm0,25.934h96.959c3.313,0 6,2.687 6,6s-2.687,6-6,6h-96.959c-3.313,0-6-2.687-6-6s2.686-6 6-6zm0,25.935h96.959c3.313,0 6,2.687 6,6s-2.687,6-6,6h-96.959c-3.313,0-6-2.687-6-6s2.686-6 6-6zm0,25.935h96.959c3.313,0 6,2.687 6,6s-2.687,6-6,6h-96.959c-3.313,0-6-2.687-6-6s2.686-6 6-6z"/>
<path d="m42.735,62.071h96.959c3.313,0 6-2.687 6-6s-2.687-6-6-6h-96.959c-3.313,0-6,2.687-6,6s2.686,6 6,6z"/>
<path d="m42.735,88.005h96.959c3.313,0 6-2.687 6-6s-2.687-6-6-6h-96.959c-3.313,0-6,2.687-6,6s2.686,6 6,6z"/>
<path d="m42.735,113.94h96.959c3.313,0 6-2.687 6-6s-2.687-6-6-6h-96.959c-3.313,0-6,2.687-6,6s2.686,6 6,6z"/>
<path d="m42.735,139.875h96.959c3.313,0 6-2.687 6-6s-2.687-6-6-6h-96.959c-3.313,0-6,2.687-6,6s2.686,6 6,6z"/>
<path d="m237.783,98.361c0-1.591-0.632-3.117-1.757-4.243l-16.356-16.355c-1.125-1.125-2.651-1.757-4.243-1.757s-3.117,0.632-4.243,1.757l-28.756,28.756v-88.117c0-3.313-2.686-6-6-6h-170.428c-3.314,0-6,2.687-6,6v200.979c0,3.313 2.686,6 6,6h170.429c3.314,0 6-2.687 6-6v-63.18l53.597-53.597c1.125-1.125 1.757-2.651 1.757-4.243zm-225.783,115.02v-188.979h158.429v94.117l-35.291,35.291h-92.403c-3.313,0-6,2.687-6,6s2.687,6 6,6h80.403l-1.033,1.033c-0.777,0.777-1.326,1.753-1.586,2.821l-4.157,17.05h-25.148c-3.313,0-6,2.687-6,6s2.687,6 6,6c0,0 29.714,0 29.86,0 0.473,0 0.95-0.056 1.421-0.171l21.629-5.273c1.068-0.26 2.044-0.809 2.821-1.586l23.482-23.482v45.181h-158.427zm127.649-31.374l-10.408,2.538 2.538-10.408 83.648-83.648 7.871,7.871-83.649,83.647z"/>
<symbol id="newdocument" viewBox="0 0 16 16">
<path d="M14.7826 3.26359C15.1313 2.69123 15.0606 1.93115 14.5705 1.43492C14.0757 0.933932 13.3153 0.865765 12.7483 1.23041C13.2123 2.09277 13.9198 2.79999 14.7826 3.26359Z"/>
<path d="M11.8171 2.11829L6.78472 7.18C7.77457 7.47517 8.57699 8.21908 8.95006 9.18198L13.9064 4.20208C13.0535 3.68436 12.3369 2.9696 11.8171 2.11829Z"/>
<path d="M7.91486 10.1761C7.80538 9.1186 6.91913 8.30487 5.8592 8.29183C5.53827 8.92804 5.21105 9.90848 5.01729 10.5311C4.93355 10.8002 5.16675 11.0527 5.44262 10.9905C6.16831 10.8268 7.36057 10.5217 7.91486 10.1761Z"/>
<path d="M4.75 2C2.67893 2 1 3.67893 1 5.75V11.25C1 13.3211 2.67893 15 4.75 15H10.2501C12.3212 15 14.0001 13.3211 14.0001 11.25V8C14.0001 7.58579 13.6643 7.25 13.2501 7.25C12.8359 7.25 12.5001 7.58579 12.5001 8V11.25C12.5001 12.4926 11.4927 13.5 10.2501 13.5H4.75C3.50736 13.5 2.5 12.4926 2.5 11.25V5.75C2.5 4.50736 3.50736 3.5 4.75 3.5H7C7.41421 3.5 7.75 3.16421 7.75 2.75C7.75 2.33579 7.41421 2 7 2H4.75Z"/>
</symbol>
<symbol id="document" viewBox="0 0 24 24">
<path d="M21.2,7.9c0-0.1,0-0.1,0-0.2c0-0.1-0.1-0.1-0.1-0.1c0,0,0-0.1-0.1-0.1l-5.5-6c0,0,0,0,0,0c0,0-0.1-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1c0,0-0.1,0-0.1,0c-0.1,0-0.1,0-0.2,0c0,0,0,0,0,0H6.5C6.1,1.2,5.8,1.6,5.8,2v17c0,0.4,0.3,0.8,0.8,0.8h14c0.4,0,0.8-0.3,0.8-0.8V8C21.2,8,21.2,7.9,21.2,7.9z M15.8,3.9l3,3.3h-3V3.9z M19.8,18.2H7.2V2.8h7V8c0,0.4,0.3,0.8,0.8,0.8h4.8V18.2z"/>
<path d="M14,21.2H4.2V10c0-0.4-0.3-0.8-0.8-0.8S2.8,9.6,2.8,10v12c0,0.4,0.3,0.8,0.8,0.8H14c0.4,0,0.8-0.3,0.8-0.8C14.8,21.6,14.4,21.2,14,21.2z"/>
<path d="M9.5,10.8h2c0.4,0,0.8-0.3,0.8-0.8c0-0.4-0.3-0.8-0.8-0.8h-2c-0.4,0-0.8,0.3-0.8,0.8C8.8,10.4,9.1,10.8,9.5,10.8z"/>
<path d="M8.8,14c0,0.4,0.3,0.8,0.8,0.8h6c0.4,0,0.8-0.3,0.8-0.8c0-0.4-0.3-0.8-0.8-0.8h-6C9.1,13.2,8.8,13.6,8.8,14z"/>
</symbol>
<symbol id="library" viewBox="0 0 24 24">
<path d="M21,2.2h-5h-5c-0.4,0-0.8,0.3-0.8,0.8v18c0,0.4,0.3,0.8,0.8,0.8h5h5c0.4,0,0.8-0.3,0.8-0.8V3C21.8,2.6,21.4,2.2,21,2.2z M11.8,3.8h3.5v16.5h-3.5V3.8z M20.2,20.2h-3.5V3.8h3.5V20.2z"/>
<path d="M9.1,2.8l-4-0.5c-0.2,0-0.4,0-0.6,0.2S4.3,2.7,4.3,2.9l-2,17.5c0,0.4,0.2,0.8,0.7,0.8l4.2,0.5c0.2,0,0.4,0,0.6-0.2C7.9,21.5,8,21.3,8,21.1L9.7,3.6C9.8,3.2,9.5,2.8,9.1,2.8z M6.6,20.2l-2.7-0.3l1.8-16l2.5,0.3L6.6,20.2z"/>
<path d="M18.5,9.8c0.4,0,0.8-0.3,0.8-0.8V7.5c0-0.4-0.3-0.8-0.8-0.8s-0.8,0.3-0.8,0.8V9C17.8,9.4,18.1,9.8,18.5,9.8z"/>
<path d="M13.5,6.8c-0.4,0-0.8,0.3-0.8,0.8V9c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8V7.5C14.2,7.1,13.9,6.8,13.5,6.8z"/>
</symbol>
</svg>

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

View File

@ -19,6 +19,8 @@ import { addStringsLoader, loadMetadata } from '@hcengineering/platform'
const icons = require('../assets/icons.svg') as string // eslint-disable-line
loadMetadata(document.icon, {
DocumentApplication: `${icons}#documentapplication`,
Document: `${icons}#document`
NewDocument: `${icons}#newdocument`,
Document: `${icons}#document`,
Library: `${icons}#library`
})
addStringsLoader(documentId, async (lang: string) => await import(`../lang/${lang}.json`))

View File

@ -307,30 +307,9 @@
{/if}
<style lang="scss">
.title {
font-weight: 500;
font-size: 1.125rem;
color: var(--theme-caption-color);
}
.description-preview {
color: var(--theme-content-color);
line-height: 150%;
.placeholder {
color: var(--theme-content-trans-color);
}
}
.tool {
align-self: start;
width: 20px;
height: 20px;
opacity: 0.3;
cursor: pointer;
&:hover {
opacity: 1;
}
}
.tab-content {

View File

@ -25,7 +25,7 @@
<div class="antiNav-subheader gap-2">
<div class="flex-grow text-md">
<Button
icon={document.icon.Document}
icon={document.icon.NewDocument}
label={document.string.CreateDocument}
justify={'left'}
width={'100%'}

View File

@ -92,7 +92,9 @@ const documentPlugin = plugin(documentId, {
},
icon: {
DocumentApplication: '' as Asset,
Document: '' as Asset
NewDocument: '' as Asset,
Document: '' as Asset,
Library: '' as Asset
},
space: {
Documents: '' as Ref<Space>

View File

@ -16,7 +16,6 @@
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte'
import { createQuery } from '@hcengineering/presentation'
import { Scroller } from '@hcengineering/ui'
import type { Candidate, Applicant, Vacancy } from '@hcengineering/recruit'
import CandidateCard from './CandidateCard.svelte'
import VacancyCard from './VacancyCard.svelte'
@ -52,16 +51,14 @@
</script>
{#if object !== undefined && candidate !== undefined}
<Scroller horizontal>
<div class="flex-between">
<div class="card"><CandidateCard {candidate} on:click /></div>
<div class="arrows"><ExpandRightDouble /></div>
<div class="card"><VacancyCard {vacancy} /></div>
</div>
<div class="mt-6">
<Reviews objectId={candidate._id} reviews={candidate.reviews ?? 0} label={recruit.string.TalentReviews} />
</div>
</Scroller>
<div class="flex-between">
<div class="card"><CandidateCard {candidate} on:click /></div>
<div class="arrows"><ExpandRightDouble /></div>
<div class="card"><VacancyCard {vacancy} /></div>
</div>
<div class="mt-6">
<Reviews objectId={candidate._id} reviews={candidate.reviews ?? 0} label={recruit.string.TalentReviews} />
</div>
{/if}
<style lang="scss">

View File

@ -252,7 +252,7 @@
{icon}
{title}
{object}
isHeader={true}
isHeader={false}
isAside={true}
bind:panelWidth
bind:innerWidth
@ -265,24 +265,6 @@
<UpDownNavigator element={object} />
</svelte:fragment>
<svelte:fragment slot="header">
<span class="fs-title flex-grow">
{#if mainEditor}
<Component
is={mainEditor}
props={{ object }}
on:open={(ev) => {
ignoreKeys = ev.detail.ignoreKeys
ignoreMixins = new Set(ev.detail.ignoreMixins)
allowedCollections = ev.detail.allowedCollections ?? []
collectionArrays = ev.detail.collectionArrays ?? []
getMixins(parentClass, object, showAllMixins)
updateKeys(showAllMixins)
}}
/>
{/if}
</span>
</svelte:fragment>
<svelte:fragment slot="tools">
<div class="p-1">
<Button icon={IconMoreH} kind={'transparent'} size={'medium'} on:click={showMenu} />
@ -335,6 +317,20 @@
{/if}
</svelte:fragment>
{#if mainEditor}
<Component
is={mainEditor}
props={{ object }}
on:open={(ev) => {
ignoreKeys = ev.detail.ignoreKeys
ignoreMixins = new Set(ev.detail.ignoreMixins)
allowedCollections = ev.detail.allowedCollections ?? []
collectionArrays = ev.detail.collectionArrays ?? []
getMixins(parentClass, object, showAllMixins)
updateKeys(showAllMixins)
}}
/>
{/if}
{#each fieldEditors as collection}
{#if collection.editor}
<div class="mt-6 clear-mins">

View File

@ -156,7 +156,7 @@
{:else}
{#each values as value, i}
<button
class="menu-item"
class="menu-item no-focus"
on:click={() => {
toggle(value)
}}
@ -167,7 +167,7 @@
<CheckBox checked={isSelected(value, filter.value)} primary />
</div>
{#if value}
<svelte:component this={attribute.presenter} {value} {...attribute.props} />
<svelte:component this={attribute.presenter} {value} {...attribute.props} isInteractive={false} />
{:else}
<Label label={ui.string.NotSelected} />
{/if}