mirror of
https://github.com/hcengineering/platform.git
synced 2024-11-25 19:58:30 +03:00
UBER-87: add new icons (#3188)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
696541af2d
commit
927e838c46
@ -88,7 +88,7 @@ export function createModel (builder: Builder): void {
|
||||
label: templates.string.Templates,
|
||||
icon: templates.icon.Template,
|
||||
action: templates.action.ShowTemplates,
|
||||
order: 1500
|
||||
order: 5000
|
||||
},
|
||||
templates.ids.TemplatePopupAction
|
||||
)
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"string": {
|
||||
"string": {
|
||||
"Suggested": "SUGGESTED",
|
||||
"NoItems": "No items",
|
||||
"EditorPlaceholder": "Start typing...",
|
||||
@ -18,7 +18,9 @@
|
||||
"Attach": "Attach",
|
||||
"TextStyle": "Text style",
|
||||
"Emoji": "Emoji",
|
||||
"GIF": "GIF",
|
||||
"GIF": "GIF",
|
||||
"Mention": "Mention",
|
||||
"Underlined": "Underlined",
|
||||
"FullDescription": "Full description",
|
||||
"NoFullDescription": "There are no detailed description",
|
||||
"EnableDiffMode": "Diff mode",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"string": {
|
||||
"string": {
|
||||
"Suggested": "РЕКОМЕНДУЕМЫЕ",
|
||||
"NoItems": "Нет содержимого",
|
||||
"EditorPlaceholder": "Начните печатать...",
|
||||
@ -19,6 +19,8 @@
|
||||
"TextStyle": "Стиль текста",
|
||||
"Emoji": "Эмодзи",
|
||||
"GIF": "GIF",
|
||||
"Mention": "Упомянуть",
|
||||
"Underlined": "Подчеркнутый",
|
||||
"FullDescription": "Детальное описание",
|
||||
"NoFullDescription": "Нет детального описания",
|
||||
"EnableDiffMode": "Режим сравнения",
|
||||
|
||||
@ -38,16 +38,21 @@
|
||||
import TextEditor from './TextEditor.svelte'
|
||||
import Attach from './icons/Attach.svelte'
|
||||
import Bold from './icons/Bold.svelte'
|
||||
import RIBold from './icons/RIBold.svelte'
|
||||
import Code from './icons/Code.svelte'
|
||||
import RICode from './icons/RICode.svelte'
|
||||
import CodeBlock from './icons/CodeBlock.svelte'
|
||||
import GIF from './icons/GIF.svelte'
|
||||
import RILink from './icons/RILink.svelte'
|
||||
import RIMention from './icons/RIMention.svelte'
|
||||
import Italic from './icons/Italic.svelte'
|
||||
import RIItalic from './icons/RIItalic.svelte'
|
||||
import Link from './icons/Link.svelte'
|
||||
import ListBullet from './icons/ListBullet.svelte'
|
||||
import ListNumber from './icons/ListNumber.svelte'
|
||||
import Quote from './icons/Quote.svelte'
|
||||
import Send from './icons/Send.svelte'
|
||||
import Strikethrough from './icons/Strikethrough.svelte'
|
||||
import RIStrikethrough from './icons/RIStrikethrough.svelte'
|
||||
import TextStyle from './icons/TextStyle.svelte'
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
@ -81,17 +86,22 @@
|
||||
action: () => {
|
||||
dispatch('attach')
|
||||
},
|
||||
order: 1000
|
||||
order: 1001
|
||||
},
|
||||
{
|
||||
label: textEditorPlugin.string.TextStyle,
|
||||
icon: TextStyle,
|
||||
label: textEditorPlugin.string.Link,
|
||||
icon: RILink,
|
||||
action: () => {
|
||||
isFormatting = !isFormatting
|
||||
textEditor.focus()
|
||||
if (!(isSelectionEmpty && !activeModes.has('link'))) formatLink()
|
||||
},
|
||||
order: 2000
|
||||
},
|
||||
{
|
||||
label: textEditorPlugin.string.Mention,
|
||||
icon: RIMention,
|
||||
action: () => textEditor.insertText('@'),
|
||||
order: 3000
|
||||
},
|
||||
{
|
||||
label: textEditorPlugin.string.Emoji,
|
||||
icon: IconEmoji,
|
||||
@ -103,17 +113,57 @@
|
||||
(emoji) => {
|
||||
if (!emoji) return
|
||||
textEditor.insertText(emoji)
|
||||
textEditor.focus()
|
||||
},
|
||||
() => {}
|
||||
)
|
||||
},
|
||||
order: 3000
|
||||
order: 4001
|
||||
},
|
||||
{
|
||||
label: textEditorPlugin.string.GIF,
|
||||
icon: GIF,
|
||||
action: () => {},
|
||||
order: 4000
|
||||
label: textEditorPlugin.string.TextStyle,
|
||||
icon: TextStyle,
|
||||
action: () => {
|
||||
isFormatting = !isFormatting
|
||||
textEditor.focus()
|
||||
},
|
||||
order: 6000
|
||||
},
|
||||
{
|
||||
label: textEditorPlugin.string.Bold,
|
||||
icon: RIBold,
|
||||
action: () => {
|
||||
textEditor.toggleBold()
|
||||
textEditor.focus()
|
||||
},
|
||||
order: 6010
|
||||
},
|
||||
{
|
||||
label: textEditorPlugin.string.Italic,
|
||||
icon: RIItalic,
|
||||
action: () => {
|
||||
textEditor.toggleItalic()
|
||||
textEditor.focus()
|
||||
},
|
||||
order: 6020
|
||||
},
|
||||
{
|
||||
label: textEditorPlugin.string.Strikethrough,
|
||||
icon: RIStrikethrough,
|
||||
action: () => {
|
||||
textEditor.toggleStrike()
|
||||
textEditor.focus()
|
||||
},
|
||||
order: 6030
|
||||
},
|
||||
{
|
||||
label: textEditorPlugin.string.Code,
|
||||
icon: RICode,
|
||||
action: () => {
|
||||
textEditor.toggleCode()
|
||||
textEditor.focus()
|
||||
},
|
||||
order: 6040
|
||||
}
|
||||
]
|
||||
|
||||
@ -355,7 +405,7 @@
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex-between clear-mins" style:margin={'.5rem 1rem 0'}>
|
||||
<div class="flex-between clear-mins" style:margin={'.75rem .75rem 0'}>
|
||||
<div class="buttons-group large-gap">
|
||||
{#each actions as a}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
@ -364,8 +414,11 @@
|
||||
use:tooltip={{ label: a.label }}
|
||||
on:click={handler(a, (a, evt) => handleAction(a, evt))}
|
||||
>
|
||||
<Icon icon={a.icon} size={'medium'} fill={a.fill} />
|
||||
<Icon icon={a.icon} size={'medium'} />
|
||||
</div>
|
||||
{#if a.order % 10 === 1}
|
||||
<div class="buttons-divider" />
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{#if extraActions && extraActions.length > 0}
|
||||
@ -391,23 +444,26 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.buttons-divider {
|
||||
height: 1rem;
|
||||
max-height: 1rem;
|
||||
}
|
||||
.icon-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
color: var(--theme-caption-color);
|
||||
opacity: 0.6;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
color: var(--theme-darker-color);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: var(--theme-content-color);
|
||||
}
|
||||
&.disabled {
|
||||
opacity: 0.3;
|
||||
color: var(--theme-trans-color);
|
||||
&:hover {
|
||||
opacity: 0.4;
|
||||
color: var(--theme-trans-color);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
@ -420,7 +476,7 @@
|
||||
.formatPanelRef {
|
||||
padding: 0.5rem;
|
||||
background-color: var(--theme-comp-header-color);
|
||||
border: 1px solid var(--theme-divider-color);
|
||||
border: 1px solid var(--theme-refinput-divider);
|
||||
border-radius: 0.5rem 0.5rem 0 0;
|
||||
border-bottom: 0;
|
||||
|
||||
@ -435,12 +491,12 @@
|
||||
.textInput {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
align-items: flex-start;
|
||||
min-height: 2.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background-color: var(--theme-refinput-color);
|
||||
border: 1px solid var(--theme-divider-color);
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--theme-refinput-border);
|
||||
border-radius: 0.25rem;
|
||||
|
||||
&.withoutTopBorder {
|
||||
border-top-left-radius: 0;
|
||||
@ -457,34 +513,6 @@
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
// &.thread {
|
||||
// width: auto;
|
||||
// }
|
||||
|
||||
// .flex-column {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// align-items: center;
|
||||
// }
|
||||
|
||||
// .flex-row {
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// align-items: flex-end;
|
||||
// }
|
||||
|
||||
// .edit-box-horizontal {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// margin-top: 7px;
|
||||
// align-self: center;
|
||||
// }
|
||||
|
||||
// .edit-box-vertical {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// margin: 4px;
|
||||
// }
|
||||
}
|
||||
.sendButton {
|
||||
display: flex;
|
||||
@ -504,7 +532,7 @@
|
||||
.icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
color: var(--theme-dark-color);
|
||||
color: var(--theme-content-color);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
@ -523,7 +551,7 @@
|
||||
pointer-events: none;
|
||||
|
||||
.icon {
|
||||
opacity: 0.5;
|
||||
color: var(--theme-trans-color);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@ -41,34 +41,33 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.75rem;
|
||||
color: var(--dark-color);
|
||||
color: var(--theme-darker-color);
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-color);
|
||||
color: var(--theme-content-color);
|
||||
}
|
||||
&:focus {
|
||||
color: var(--caption-color);
|
||||
border: 1px solid var(--primary-button-focused-border);
|
||||
box-shadow: 0 0 0 3px var(--primary-button-outline);
|
||||
color: var(--theme-caption-color);
|
||||
box-shadow: 0 0 0 2px var(--primary-button-focused-border);
|
||||
}
|
||||
&.selected {
|
||||
background-color: var(--button-bg-color);
|
||||
border-color: var(--button-border-color);
|
||||
color: var(--accent-color);
|
||||
background-color: var(--theme-button-pressed);
|
||||
border-color: var(--theme-button-border);
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
&.small {
|
||||
width: 1.143em;
|
||||
height: 1.143em;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
&.medium {
|
||||
width: 1.429em;
|
||||
height: 1.429em;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
&.large {
|
||||
width: 1.715em;
|
||||
height: 1.715em;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,7 +24,8 @@
|
||||
export let alwaysEdit: boolean = false
|
||||
export let showButtons: boolean = true
|
||||
export let hideAttachments: boolean = false
|
||||
export let buttonSize: IconSize = 'small'
|
||||
export let buttonSize: IconSize = 'medium'
|
||||
export let formatButtonSize: IconSize = 'small'
|
||||
export let hideExtraButtons: boolean = false
|
||||
export let maxHeight: 'max' | 'card' | 'limited' | string = 'max'
|
||||
export let previewLimit: number = 240
|
||||
@ -143,6 +144,7 @@
|
||||
{showButtons}
|
||||
{hideAttachments}
|
||||
{buttonSize}
|
||||
{formatButtonSize}
|
||||
{maxHeight}
|
||||
{focusable}
|
||||
{enableFormatting}
|
||||
|
||||
@ -32,16 +32,22 @@
|
||||
import { headingLevels, mInsertTable } from './extensions'
|
||||
import Attach from './icons/Attach.svelte'
|
||||
import Bold from './icons/Bold.svelte'
|
||||
import RIBold from './icons/RIBold.svelte'
|
||||
import Code from './icons/Code.svelte'
|
||||
import RICode from './icons/RICode.svelte'
|
||||
import CodeBlock from './icons/CodeBlock.svelte'
|
||||
import Header from './icons/Header.svelte'
|
||||
import IconTable from './icons/IconTable.svelte'
|
||||
import Italic from './icons/Italic.svelte'
|
||||
import RIItalic from './icons/RIItalic.svelte'
|
||||
import Link from './icons/Link.svelte'
|
||||
import RILink from './icons/RILink.svelte'
|
||||
import ListBullet from './icons/ListBullet.svelte'
|
||||
import ListNumber from './icons/ListNumber.svelte'
|
||||
import Quote from './icons/Quote.svelte'
|
||||
import Strikethrough from './icons/Strikethrough.svelte'
|
||||
import RIStrikethrough from './icons/RIStrikethrough.svelte'
|
||||
// import RIMention from './icons/RIMention.svelte'
|
||||
import AddColAfter from './icons/table/AddColAfter.svelte'
|
||||
import AddColBefore from './icons/table/AddColBefore.svelte'
|
||||
import AddRowAfter from './icons/table/AddRowAfter.svelte'
|
||||
@ -60,7 +66,8 @@
|
||||
export let placeholder: IntlString = textEditorPlugin.string.EditorPlaceholder
|
||||
export let showButtons: boolean = true
|
||||
export let hideAttachments: boolean = false
|
||||
export let buttonSize: IconSize = 'large'
|
||||
export let buttonSize: IconSize = 'medium'
|
||||
export let formatButtonSize: IconSize = 'small'
|
||||
export let isScrollable: boolean = true
|
||||
export let focusable: boolean = false
|
||||
export let maxHeight: 'max' | 'card' | 'limited' | string | undefined = undefined
|
||||
@ -124,18 +131,22 @@
|
||||
action: () => {
|
||||
dispatch('attach')
|
||||
},
|
||||
order: 1000,
|
||||
hidden: hideAttachments
|
||||
order: 1001
|
||||
},
|
||||
{
|
||||
label: textEditorPlugin.string.TextStyle,
|
||||
icon: TextStyle,
|
||||
label: textEditorPlugin.string.Link,
|
||||
icon: RILink,
|
||||
action: () => {
|
||||
isFormatting = !isFormatting
|
||||
textEditor.focus()
|
||||
if (!(isSelectionEmpty && !activeModes.has('link'))) formatLink()
|
||||
},
|
||||
order: 2000
|
||||
},
|
||||
// {
|
||||
// label: textEditorPlugin.string.Mention,
|
||||
// icon: RIMention,
|
||||
// action: () => textEditor.insertText('@'),
|
||||
// order: 3000
|
||||
// },
|
||||
{
|
||||
label: textEditorPlugin.string.Emoji,
|
||||
icon: IconEmoji,
|
||||
@ -152,14 +163,53 @@
|
||||
() => {}
|
||||
)
|
||||
},
|
||||
order: 3000
|
||||
order: 4001
|
||||
},
|
||||
{
|
||||
label: textEditorPlugin.string.TextStyle,
|
||||
icon: TextStyle,
|
||||
action: () => {
|
||||
isFormatting = !isFormatting
|
||||
textEditor.focus()
|
||||
},
|
||||
order: 6000
|
||||
},
|
||||
{
|
||||
label: textEditorPlugin.string.Bold,
|
||||
icon: RIBold,
|
||||
action: () => {
|
||||
textEditor.toggleBold()
|
||||
textEditor.focus()
|
||||
},
|
||||
order: 6010
|
||||
},
|
||||
{
|
||||
label: textEditorPlugin.string.Italic,
|
||||
icon: RIItalic,
|
||||
action: () => {
|
||||
textEditor.toggleItalic()
|
||||
textEditor.focus()
|
||||
},
|
||||
order: 6020
|
||||
},
|
||||
{
|
||||
label: textEditorPlugin.string.Strikethrough,
|
||||
icon: RIStrikethrough,
|
||||
action: () => {
|
||||
textEditor.toggleStrike()
|
||||
textEditor.focus()
|
||||
},
|
||||
order: 6030
|
||||
},
|
||||
{
|
||||
label: textEditorPlugin.string.Code,
|
||||
icon: RICode,
|
||||
action: () => {
|
||||
textEditor.toggleCode()
|
||||
textEditor.focus()
|
||||
},
|
||||
order: 6040
|
||||
}
|
||||
// {
|
||||
// label: textEditorPlugin.string.GIF,
|
||||
// icon: GIF,
|
||||
// action: () => {},
|
||||
// order: 4000
|
||||
// }
|
||||
]
|
||||
|
||||
const client = getClient()
|
||||
@ -380,6 +430,20 @@
|
||||
}
|
||||
)
|
||||
}
|
||||
$: buttonsGap =
|
||||
buttonSize === 'large' || buttonSize === 'x-large' || buttonSize === 'full'
|
||||
? 'large-gap'
|
||||
: buttonSize === 'medium'
|
||||
? 'medium-gap'
|
||||
: buttonSize === 'small'
|
||||
? 'small-gap'
|
||||
: 'xsmall-gap'
|
||||
$: buttonsHeight =
|
||||
buttonSize === 'large' || buttonSize === 'x-large' || buttonSize === 'full'
|
||||
? 'h-6 max-h-6'
|
||||
: buttonSize === 'medium'
|
||||
? 'h-5 max-h-5'
|
||||
: 'h-4 max-h-4'
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
@ -393,35 +457,35 @@
|
||||
<div class="formatPanel buttons-group xsmall-gap mb-4" class:withoutTopBorder>
|
||||
<StyleButton
|
||||
icon={Header}
|
||||
size={buttonSize}
|
||||
size={formatButtonSize}
|
||||
selected={activeModes.has('heading')}
|
||||
showTooltip={{ label: getEmbeddedLabel(`H${headingLevel}`) }}
|
||||
on:click={toggleHeader}
|
||||
/>
|
||||
<StyleButton
|
||||
icon={Bold}
|
||||
size={buttonSize}
|
||||
size={formatButtonSize}
|
||||
selected={activeModes.has('bold')}
|
||||
showTooltip={{ label: textEditorPlugin.string.Bold }}
|
||||
on:click={getToggler(textEditor.toggleBold)}
|
||||
/>
|
||||
<StyleButton
|
||||
icon={Italic}
|
||||
size={buttonSize}
|
||||
size={formatButtonSize}
|
||||
selected={activeModes.has('italic')}
|
||||
showTooltip={{ label: textEditorPlugin.string.Italic }}
|
||||
on:click={getToggler(textEditor.toggleItalic)}
|
||||
/>
|
||||
<StyleButton
|
||||
icon={Strikethrough}
|
||||
size={buttonSize}
|
||||
size={formatButtonSize}
|
||||
selected={activeModes.has('strike')}
|
||||
showTooltip={{ label: textEditorPlugin.string.Strikethrough }}
|
||||
on:click={getToggler(textEditor.toggleStrike)}
|
||||
/>
|
||||
<StyleButton
|
||||
icon={Link}
|
||||
size={buttonSize}
|
||||
size={formatButtonSize}
|
||||
selected={activeModes.has('link')}
|
||||
disabled={isSelectionEmpty && !activeModes.has('link')}
|
||||
showTooltip={{ label: textEditorPlugin.string.Link }}
|
||||
@ -430,14 +494,14 @@
|
||||
<div class="buttons-divider" />
|
||||
<StyleButton
|
||||
icon={ListNumber}
|
||||
size={buttonSize}
|
||||
size={formatButtonSize}
|
||||
selected={activeModes.has('orderedList')}
|
||||
showTooltip={{ label: textEditorPlugin.string.OrderedList }}
|
||||
on:click={getToggler(textEditor.toggleOrderedList)}
|
||||
/>
|
||||
<StyleButton
|
||||
icon={ListBullet}
|
||||
size={buttonSize}
|
||||
size={formatButtonSize}
|
||||
selected={activeModes.has('bulletList')}
|
||||
showTooltip={{ label: textEditorPlugin.string.BulletedList }}
|
||||
on:click={getToggler(textEditor.toggleBulletList)}
|
||||
@ -445,7 +509,7 @@
|
||||
<div class="buttons-divider" />
|
||||
<StyleButton
|
||||
icon={Quote}
|
||||
size={buttonSize}
|
||||
size={formatButtonSize}
|
||||
selected={activeModes.has('blockquote')}
|
||||
showTooltip={{ label: textEditorPlugin.string.Blockquote }}
|
||||
on:click={getToggler(textEditor.toggleBlockquote)}
|
||||
@ -453,14 +517,14 @@
|
||||
<div class="buttons-divider" />
|
||||
<StyleButton
|
||||
icon={Code}
|
||||
size={buttonSize}
|
||||
size={formatButtonSize}
|
||||
selected={activeModes.has('code')}
|
||||
showTooltip={{ label: textEditorPlugin.string.Code }}
|
||||
on:click={getToggler(textEditor.toggleCode)}
|
||||
/>
|
||||
<StyleButton
|
||||
icon={CodeBlock}
|
||||
size={buttonSize}
|
||||
size={formatButtonSize}
|
||||
selected={activeModes.has('codeBlock')}
|
||||
showTooltip={{ label: textEditorPlugin.string.CodeBlock }}
|
||||
on:click={getToggler(textEditor.toggleCodeBlock)}
|
||||
@ -468,7 +532,7 @@
|
||||
<StyleButton
|
||||
icon={IconTable}
|
||||
iconProps={{ style: 'table' }}
|
||||
size={buttonSize}
|
||||
size={formatButtonSize}
|
||||
selected={activeModes.has('table')}
|
||||
on:click={insertTable}
|
||||
showTooltip={{ label: textEditorPlugin.string.InsertTable }}
|
||||
@ -477,7 +541,7 @@
|
||||
<StyleButton
|
||||
icon={IconTable}
|
||||
iconProps={{ style: 'tableProps' }}
|
||||
size={buttonSize}
|
||||
size={formatButtonSize}
|
||||
on:click={tableOptions}
|
||||
showTooltip={{ label: textEditorPlugin.string.TableOptions }}
|
||||
/>
|
||||
@ -527,14 +591,17 @@
|
||||
</div>
|
||||
{#if showButtons}
|
||||
<div class="flex-between">
|
||||
<div class="buttons-group xsmall-gap mt-4">
|
||||
<div class="buttons-group {buttonsGap} mt-3">
|
||||
{#each actions.filter((it) => it.hidden !== true) as a}
|
||||
<StyleButton icon={a.icon} size={buttonSize} on:click={(evt) => handleAction(a, evt)} />
|
||||
{#if a.order % 10 === 1}
|
||||
<div class="buttons-divider {buttonsHeight}" />
|
||||
{/if}
|
||||
{/each}
|
||||
<slot />
|
||||
</div>
|
||||
{#if $$slots.right}
|
||||
<div class="buttons-group xsmall-gap mt-4">
|
||||
<div class="buttons-group {buttonsGap} mt-3">
|
||||
<slot name="right" />
|
||||
</div>
|
||||
{/if}
|
||||
@ -594,9 +661,9 @@
|
||||
.formatPanel {
|
||||
margin: -0.5rem -0.25rem 0.5rem;
|
||||
padding: 0.375rem;
|
||||
background-color: var(--body-accent);
|
||||
background-color: var(--theme-comp-header-color);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: var(--button-shadow);
|
||||
box-shadow: var(--theme-popup-shadow);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,10 +3,8 @@
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M15.4,5c1.5-1.5,3.8-1.5,5.3,0l-0.5,0.5L20.7,5c1.5,1.5,1.5,3.8,0,5.3l0,0l-8.8,8.8c-2.1,2.1-5.4,2.1-7.4,0l0.5-0.5l-0.5,0.5c-2.1-2.1-2.1-5.4,0-7.4l7.4-7.4c0.3-0.3,0.8-0.3,1.1,0c0.3,0.3,0.3,0.8,0,1.1l-7.4,7.4l-0.5-0.5l0.5,0.5C4,14.2,4,16.6,5.5,18l-0.5,0.5L5.5,18c1.5,1.5,3.8,1.5,5.3,0l0.5,0.5L10.8,18l8.8-8.8v0c0.9-0.9,0.9-2.3,0-3.2c-0.9-0.9-2.3-0.9-3.2,0v0l-8.8,8.8c-0.3,0.3-0.3,0.8,0,1.1c0.3,0.3,0.8,0.3,1.1,0l7.4-7.4c0.3-0.3,0.8-0.3,1.1,0c0.3,0.3,0.3,0.8,0,1.1L9.7,17c-0.9,0.9-2.3,0.9-3.2,0h0c-0.9-0.9-0.9-2.3,0-3.2h0L15.4,5C15.4,5,15.4,5,15.4,5z"
|
||||
d="M4.8,10.5l5.7-5.7c1.2-1.2,3.1-1.2,4.2,0c1.2,1.2,1.2,3.1,0,4.2L8,15.8c-0.6,0.6-1.5,0.6-2.1,0c-0.6-0.6-0.6-1.5,0-2.1l6-6c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0l-6,6c-1,1-1,2.6,0,3.5c1,1,2.6,1,3.5,0l6.7-6.7c1.6-1.6,1.6-4.1,0-5.7s-4.1-1.6-5.7,0L4.1,9.8c-0.2,0.2-0.2,0.5,0,0.7C4.3,10.7,4.6,10.7,4.8,10.5z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
13
packages/text-editor/src/components/icons/RIBold.svelte
Normal file
13
packages/text-editor/src/components/icons/RIBold.svelte
Normal file
@ -0,0 +1,13 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M17.7,6c-0.2-1.1-0.6-1.9-1.2-2.4c-0.6-0.6-1.4-1-2.4-1.2C13,2.1,11.8,2,10,2C8.2,2,7,2.1,6,2.3C4.9,2.6,4.1,2.9,3.5,3.5C2.9,4.1,2.6,4.9,2.3,6C2.1,7,2,8.2,2,10c0,1.8,0.1,3,0.3,4c0.2,1.1,0.6,1.9,1.2,2.4c0.6,0.6,1.4,1,2.4,1.2c1,0.2,2.3,0.3,4,0.3c1.8,0,3-0.1,4-0.3c1.1-0.2,1.9-0.6,2.4-1.2c0.6-0.6,1-1.4,1.2-2.4c0.2-1,0.3-2.3,0.3-4C18,8.2,17.9,7,17.7,6zM16.7,13.8c-0.2,0.9-0.5,1.5-0.9,2c-0.4,0.4-1.1,0.7-2,0.9C12.9,16.9,11.7,17,10,17s-2.9-0.1-3.8-0.3c-0.9-0.2-1.5-0.5-2-0.9c-0.4-0.4-0.7-1.1-0.9-2C3.1,12.9,3,11.7,3,10s0.1-2.9,0.3-3.8c0.2-0.9,0.5-1.5,0.9-2c0.4-0.4,1.1-0.7,2-0.9C7.1,3.1,8.3,3,10,3s2.9,0.1,3.8,0.3c0.9,0.2,1.5,0.5,2,0.9c0.4,0.4,0.7,1.1,0.9,2C16.9,7.1,17,8.3,17,10S16.9,12.9,16.7,13.8z"
|
||||
/>
|
||||
<path
|
||||
d="M11.2,6.2H8.7c-0.9,0-1.2,0.2-1.2,1.2v5.3c0,1,0.3,1.2,1.2,1.2h2.5c0.5,0,1-0.2,1.3-0.6c0.4-0.4,0.6-1,0.6-1.6c0-0.7-0.3-1.3-0.7-1.7c0.4-0.4,0.7-0.9,0.7-1.7C13.2,7,12.2,6.2,11.2,6.2z M11.8,12.6c-0.2,0.2-0.4,0.3-0.6,0.3H8.7c-0.1,0-0.1,0-0.2,0c0-0.1,0-0.1,0-0.2v-2.2h2.7c0.4,0,0.9,0.4,0.9,1.2C12.2,12,12.1,12.3,11.8,12.6z M11.2,9.5H8.5V7.3c0-0.1,0-0.1,0-0.2c0.1,0,0.1,0,0.2,0h2.5c0.5,0,0.9,0.4,0.9,1.2S11.7,9.5,11.2,9.5z"
|
||||
/>
|
||||
</svg>
|
||||
14
packages/text-editor/src/components/icons/RICode.svelte
Normal file
14
packages/text-editor/src/components/icons/RICode.svelte
Normal file
@ -0,0 +1,14 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M5.3,4.2c0.3,0,0.5-0.2,0.5-0.5S5.6,3.2,5.3,3.2H3.4c-0.3,0-0.5,0.2-0.5,0.5v12.5c0,0.3,0.2,0.5,0.5,0.5h1.9c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5H3.9V4.2H5.3z"
|
||||
/>
|
||||
<path
|
||||
d="M16.6,3.2h-1.9c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h1.4v11.5h-1.4c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h1.9c0.3,0,0.5-0.2,0.5-0.5V3.8C17.1,3.5,16.8,3.2,16.6,3.2z"
|
||||
/>
|
||||
</svg>
|
||||
13
packages/text-editor/src/components/icons/RIItalic.svelte
Normal file
13
packages/text-editor/src/components/icons/RIItalic.svelte
Normal file
@ -0,0 +1,13 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M17.7,6c-0.2-1.1-0.6-1.9-1.2-2.4c-0.6-0.6-1.4-1-2.4-1.2C13,2.1,11.8,2,10,2C8.2,2,7,2.1,6,2.3C4.9,2.6,4.1,2.9,3.5,3.5C2.9,4.1,2.6,4.9,2.3,6C2.1,7,2,8.2,2,10c0,1.8,0.1,3,0.3,4c0.2,1.1,0.6,1.9,1.2,2.4c0.6,0.6,1.4,1,2.4,1.2c1,0.2,2.3,0.3,4,0.3c1.8,0,3-0.1,4-0.3c1.1-0.2,1.9-0.6,2.4-1.2c0.6-0.6,1-1.4,1.2-2.4c0.2-1,0.3-2.3,0.3-4C18,8.2,17.9,7,17.7,6zM16.7,13.8c-0.2,0.9-0.5,1.5-0.9,2c-0.4,0.4-1.1,0.7-2,0.9C12.9,16.9,11.7,17,10,17s-2.9-0.1-3.8-0.3c-0.9-0.2-1.5-0.5-2-0.9c-0.4-0.4-0.7-1.1-0.9-2C3.1,12.9,3,11.7,3,10s0.1-2.9,0.3-3.8c0.2-0.9,0.5-1.5,0.9-2c0.4-0.4,1.1-0.7,2-0.9C7.1,3.1,8.3,3,10,3s2.9,0.1,3.8,0.3c0.9,0.2,1.5,0.5,2,0.9c0.4,0.4,0.7,1.1,0.9,2C16.9,7.1,17,8.3,17,10S16.9,12.9,16.7,13.8z"
|
||||
/>
|
||||
<path
|
||||
d="M12,7.2c0.3,0,0.5-0.2,0.5-0.5S12.3,6.2,12,6.2h-1.7c0,0,0,0,0,0H8c-0.3,0-0.5,0.2-0.5,0.5S7.7,7.2,8,7.2h1.8l-0.6,5.7H8c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h4c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5h-1.8l0.6-5.7H12z"
|
||||
/>
|
||||
</svg>
|
||||
15
packages/text-editor/src/components/icons/RILink.svelte
Normal file
15
packages/text-editor/src/components/icons/RILink.svelte
Normal file
@ -0,0 +1,15 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M8.3,12.8H5.8C4.3,12.8,3,11.6,3,10s1.3-2.8,2.8-2.8h2.5c0.3,0,0.5-0.2,0.5-0.5S8.6,6.2,8.3,6.2H5.8C3.7,6.2,2,7.9,2,10s1.7,3.8,3.8,3.8h2.5c0.3,0,0.5-0.2,0.5-0.5S8.6,12.8,8.3,12.8z"
|
||||
/>
|
||||
<path d="M6.2,10c0,0.3,0.2,0.5,0.5,0.5h6.7c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5H6.7C6.4,9.5,6.2,9.7,6.2,10z" />
|
||||
<path
|
||||
d="M14.2,6.2h-2.5c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h2.5c1.6,0,2.8,1.3,2.8,2.8s-1.3,2.8-2.8,2.8h-2.5c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h2.5c2.1,0,3.8-1.7,3.8-3.8S16.3,6.2,14.2,6.2z"
|
||||
/>
|
||||
</svg>
|
||||
11
packages/text-editor/src/components/icons/RIMention.svelte
Normal file
11
packages/text-editor/src/components/icons/RIMention.svelte
Normal file
@ -0,0 +1,11 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M18,10c0-1.7-0.5-3.3-1.5-4.7c-1-1.4-2.3-2.4-3.9-2.9C11,1.9,9.3,1.9,7.7,2.3c-1.6,0.5-3,1.5-4,2.8C2.6,6.5,2.1,8.1,2,9.7c-0.1,1.7,0.4,3.3,1.3,4.7c0.9,1.4,2.3,2.5,3.8,3C8.1,17.8,9,18,10,18c0.7,0,1.4-0.1,2.1-0.3c0.3-0.1,0.4-0.3,0.4-0.6c-0.1-0.3-0.3-0.4-0.6-0.4c-1.4,0.4-2.9,0.3-4.3-0.2C6.2,16,5,15.1,4.2,13.9C3.4,12.7,3,11.2,3,9.8c0-1.5,0.5-2.9,1.4-4c0.9-1.2,2.1-2,3.5-2.4c1.4-0.4,2.9-0.4,4.3,0.1c1.4,0.5,2.6,1.4,3.4,2.6C16.5,7.1,17,8.5,17,10c0,0,0,0,0,0v1.2c0,0.9-0.7,1.6-1.6,1.6s-1.6-0.7-1.6-1.6V10c0,0,0,0,0,0s0,0,0,0V7.5c0-0.3-0.2-0.5-0.5-0.5c-0.3,0-0.5,0.2-0.5,0.5c-0.7-0.8-1.7-1.3-2.8-1.3c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c1.3,0,2.4-0.6,3.1-1.5c0.4,0.9,1.3,1.5,2.4,1.5c1.4,0,2.6-1.2,2.6-2.6L18,10C18,10,18,10,18,10z M10,12.8c-1.6,0-2.8-1.3-2.8-2.8S8.4,7.2,10,7.2c1.6,0,2.8,1.3,2.8,2.8v0C12.8,11.6,11.6,12.8,10,12.8z"
|
||||
/>
|
||||
</svg>
|
||||
@ -0,0 +1,10 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M7,7.1C7,6.5,7.3,6,7.8,5.6C8.4,5.3,9.2,5,10.1,5c1.3,0,2.4,0.6,2.8,1.2c0.1,0.2,0.4,0.3,0.7,0.2s0.3-0.4,0.2-0.7C13.1,4.6,11.6,4,10.1,4C9,4,8,4.3,7.3,4.8C6.5,5.4,6,6.2,6,7.1C6,7.8,6.3,8.5,6.8,9h1.7C7.6,8.6,7,7.8,7,7.1zM15.5,10c0.3,0,0.5,0.2,0.5,0.5S15.8,11,15.5,11h-2.3c0.5,0.5,0.8,1.1,0.8,1.9c0,0.9-0.5,1.7-1.3,2.2C12,15.7,11,16,9.9,16c-1.6,0-3-0.7-3.7-1.7C6,14,6.1,13.7,6.3,13.6c0.2-0.2,0.5-0.1,0.7,0.1C7.5,14.5,8.5,15,9.9,15c0.9,0,1.7-0.3,2.3-0.7c0.6-0.4,0.8-0.9,0.8-1.4c0-0.8-0.6-1.5-1.8-1.9H4.5C4.2,11,4,10.8,4,10.5S4.2,10,4.5,10H15.5z"
|
||||
/>
|
||||
</svg>
|
||||
@ -5,6 +5,6 @@
|
||||
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path
|
||||
d="M2.72113 2.05149L18.0756 9.61746C18.3233 9.73952 18.4252 10.0393 18.3031 10.287C18.2544 10.3858 18.1744 10.4658 18.0756 10.5145L2.72144 18.0803C2.47374 18.2023 2.17399 18.1005 2.05193 17.8528C1.99856 17.7445 1.98619 17.6205 2.0171 17.5038L3.9858 10.0701L2.01676 2.62789C1.94612 2.36093 2.10528 2.08726 2.37224 2.01663C2.48893 1.98576 2.61285 1.99814 2.72113 2.05149ZM3.26445 3.43403L4.87357 9.51612L4.93555 9.50412L5 9.5H12C12.2761 9.5 12.5 9.72386 12.5 10C12.5 10.2455 12.3231 10.4496 12.0899 10.4919L12 10.5H5C4.9686 10.5 4.93787 10.4971 4.90807 10.4916L3.26508 16.6976L16.7234 10.066L3.26445 3.43403Z"
|
||||
d="M18,2.8C18,2.8,18,2.8,18,2.8c0-0.1-0.1-0.2-0.1-0.3c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c-0.1,0-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,0l-14.8,5C2.4,7.5,2.2,7.7,2.2,7.9c0,0.2,0.1,0.4,0.3,0.5l6.3,3.4l4.6,6.1c0.1,0.1,0.2,0.2,0.4,0.2c0,0,0.1,0,0.1,0c0.2,0,0.3-0.2,0.4-0.4L18,3c0,0,0,0,0,0C18,2.9,18,2.9,18,2.8z M15.6,4.1L9,10.7L4,8L15.6,4.1z M13.5,16.4l-3.8-5l6.8-6.8L13.5,16.4z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
@ -3,14 +3,8 @@
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path
|
||||
d="M14.5,7.8c0.4,0,0.8-0.3,0.8-0.8s-0.3-0.8-0.8-0.8h-6C8.1,6.2,7.8,6.6,7.8,7s0.3,0.8,0.8,0.8h2.2V14 c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8V7.8H14.5z"
|
||||
/>
|
||||
<path
|
||||
d="M20,1.8H4c-1,0-1.8,0.8-1.8,1.8V20c0,1,0.8,1.8,1.8,1.8h6.1c0.4,0,0.8-0.3,0.8-0.8s-0.3-0.8-0.8-0.8H4 c-0.1,0-0.2-0.1-0.2-0.2V3.5c0-0.1,0.1-0.2,0.2-0.2h16c0.1,0,0.2,0.1,0.2,0.2v4.9c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8V3.5 C21.8,2.5,21,1.8,20,1.8z"
|
||||
/>
|
||||
<path
|
||||
d="M19.2,11.2C19,11,18.8,11,18.6,11s-0.4,0.1-0.5,0.3l-5.2,7.2c-0.1,0.1-0.1,0.3-0.1,0.4v2c0,0.4,0.3,0.8,0.8,0.8 h2c0.2,0,0.5-0.1,0.6-0.3l5.5-7.5c0.2-0.3,0.2-0.8-0.1-1L19.2,11.2z M15.1,20.2h-0.9v-1l4.7-6.4l1.1,0.8L15.1,20.2z"
|
||||
d="M14.1,6.7c0.8-0.8,2.2-0.9,3.1-0.1l0.1,0.1l0.1,0.1c0.7,0.8,0.7,2.1,0,3l-0.1,0.1l-6.9,6.9c-0.2,0.2-0.3,0.3-0.5,0.3l-0.2,0L6.6,18C6.3,18.1,6,17.8,6,17.4l0-0.1l0.8-3.1c0.1-0.2,0.2-0.4,0.3-0.6l0.1-0.1L14.1,6.7zM16.6,7.4c-0.5-0.5-1.2-0.5-1.7-0.1l-0.1,0.1l-6.9,6.9c0,0-0.1,0.1-0.1,0.1l0,0.1l-0.6,2.3l2.3-0.6c0,0,0.1,0,0.1,0l0.1,0l0.1-0.1l6.9-6.9C17.1,8.7,17.1,7.9,16.6,7.4z M6.4,2.2L6.4,2.2l3,7.7l-0.8,0.8L8,9H4l-1,2.7C2.9,11.9,2.6,12,2.4,12l-0.1,0C2.1,11.9,2,11.6,2,11.4l0-0.1l3.5-9C5.7,1.9,6.2,1.9,6.4,2.2z M6,3.9L4.4,8h3.2L6,3.9z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
@ -34,6 +34,8 @@ export default plugin(textEditorId, {
|
||||
TextStyle: '' as IntlString,
|
||||
Emoji: '' as IntlString,
|
||||
GIF: '' as IntlString,
|
||||
Mention: '' as IntlString,
|
||||
Underlined: '' as IntlString,
|
||||
EditorPlaceholder: '' as IntlString,
|
||||
Edit: '' as IntlString,
|
||||
Bold: '' as IntlString,
|
||||
|
||||
@ -71,6 +71,8 @@
|
||||
--theme-button-border: rgba(255, 255, 255, .06);
|
||||
|
||||
--theme-refinput-color: rgba(255, 255, 255, .03);
|
||||
--theme-refinput-divider: rgba(255, 255, 255, .07);
|
||||
--theme-refinput-border: rgba(255, 255, 255, .03);
|
||||
|
||||
--theme-bg-color: #1A1A28;
|
||||
--theme-back-color: #0f0f18;
|
||||
@ -235,6 +237,8 @@
|
||||
--theme-button-border: rgba(0, 0, 0, .06);
|
||||
|
||||
--theme-refinput-color: rgba(0, 0, 0, .03);
|
||||
--theme-refinput-divider: rgba(0, 0, 0, .07);
|
||||
--theme-refinput-border: rgba(0, 0, 0, .03);
|
||||
|
||||
--theme-bg-color: #F1F1F4;
|
||||
--theme-back-color: #D9D9DD;
|
||||
|
||||
@ -597,6 +597,7 @@ input.search {
|
||||
.h-2 { height: .5rem; }
|
||||
.h-3 { height: .75rem; }
|
||||
.h-4 { height: 1rem; }
|
||||
.h-5 { height: 1.25rem; }
|
||||
.h-6 { height: 1.5rem; }
|
||||
.h-7 { height: 1.75rem; }
|
||||
.h-8 { height: 2rem; }
|
||||
@ -630,6 +631,7 @@ input.search {
|
||||
.min-h-0 { min-height: 0; }
|
||||
.min-h-2 { min-height: .5rem; }
|
||||
.min-h-4 { min-height: 1rem; }
|
||||
.min-h-5 { min-height: 1.25rem; }
|
||||
.min-h-7 { min-height: 1.75rem; }
|
||||
.min-h-30 { min-height: 7.5rem; }
|
||||
.min-h-60 { min-height: 15rem; }
|
||||
|
||||
@ -1,18 +1,10 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
export let opacity: string = '1'
|
||||
const fill: string = 'currentColor'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<g {opacity}>
|
||||
<path
|
||||
d="M12,1.2C6.1,1.2,1.2,6.1,1.2,12S6.1,22.8,12,22.8S22.8,17.9,22.8,12S17.9,1.2,12,1.2z M12,21.2 c-5.1,0-9.2-4.1-9.2-9.2c0-5.1,4.1-9.2,9.2-9.2c5.1,0,9.2,4.1,9.2,9.2C21.2,17.1,17.1,21.2,12,21.2z"
|
||||
/>
|
||||
<path
|
||||
d="M15.8,14.8c-0.4-0.2-0.8,0-1,0.3l0,0c0,0,0,0,0,0c0,0-0.1,0.1-0.1,0.2c-0.1,0.2-0.3,0.4-0.5,0.6 c-0.5,0.4-1.2,0.8-2.2,0.8s-1.7-0.4-2.2-0.8c-0.2-0.2-0.4-0.4-0.5-0.6c-0.1-0.1-0.1-0.1-0.1-0.2c0,0,0,0,0,0l0,0 c-0.2-0.4-0.6-0.5-1-0.3c-0.4,0.2-0.5,0.6-0.3,1l0.7-0.3c-0.7,0.3-0.7,0.3-0.7,0.3l0,0l0,0l0,0l0,0l0,0c0,0,0,0.1,0,0.1 c0,0.1,0.1,0.2,0.2,0.3c0.2,0.2,0.4,0.5,0.7,0.8c0.7,0.6,1.7,1.2,3.2,1.2s2.5-0.6,3.2-1.2c0.3-0.3,0.6-0.6,0.7-0.8 c0.1-0.1,0.1-0.2,0.2-0.3c0,0,0-0.1,0-0.1l0,0l0,0l0,0l0,0l0,0c0,0,0,0-0.7-0.3l0.7,0.3C16.4,15.5,16.2,15,15.8,14.8z"
|
||||
/>
|
||||
<path d="M15.5,8.2c-0.4,0-0.8,0.3-0.8,0.8v2c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8V9C16.2,8.6,15.9,8.2,15.5,8.2z" />
|
||||
<path d="M8.5,11.8c0.4,0,0.8-0.3,0.8-0.8V9c0-0.4-0.3-0.8-0.8-0.8S7.8,8.6,7.8,9v2C7.8,11.4,8.1,11.8,8.5,11.8z" />
|
||||
</g>
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path
|
||||
d="M10,2c4.4,0,8,3.6,8,8c0,4.4-3.6,8-8,8c-4.4,0-8-3.6-8-8C2,5.6,5.6,2,10,2z M10,3c-3.9,0-7,3.1-7,7c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7C17,6.1,13.9,3,10,3z M7.2,12.4c1.5,1.5,3.9,1.6,5.5,0.2l0.2-0.2c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.4,0.1,0.6l-0.1,0.1l0,0c-2,2-5.1,1.9-7.1,0c-0.2-0.2-0.2-0.5,0-0.7C6.6,12.2,7,12.2,7.2,12.4z M12.5,7.5c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S11.9,7.5,12.5,7.5z M7.5,7.5c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S6.9,7.5,7.5,7.5z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
@ -33,7 +33,8 @@
|
||||
export let alwaysEdit = false
|
||||
export let showButtons = false
|
||||
export let emphasized: boolean = false
|
||||
export let buttonSize: IconSize = 'small'
|
||||
export let buttonSize: IconSize = 'medium'
|
||||
export let formatButtonSize: IconSize = 'small'
|
||||
export let maxHeight: 'max' | 'card' | 'limited' | string = 'max'
|
||||
export let focusable: boolean = false
|
||||
export let fakeAttach: 'fake' | 'hidden' | 'normal' = 'normal'
|
||||
@ -332,6 +333,7 @@
|
||||
{showButtons}
|
||||
hideAttachments={fakeAttach === 'hidden'}
|
||||
{buttonSize}
|
||||
{formatButtonSize}
|
||||
{maxHeight}
|
||||
{focusable}
|
||||
{emphasized}
|
||||
|
||||
@ -6,11 +6,11 @@
|
||||
<path d="M20.9,9.7c0.2,0.7,0.3,1.5,0.3,2.3c0,5.1-4.1,9.2-9.2,9.2H2.8V12c0-5.1,4.1-9.2,9.2-9.2c0.8,0,1.5,0.1,2.2,0.3c0.1-0.5,0.3-1,0.6-1.5C13.9,1.3,13,1.2,12,1.2C6.1,1.2,1.2,6.1,1.2,12v10c0,0.4,0.3,0.8,0.8,0.8h10c5.9,0,10.8-4.8,10.8-10.8c0-0.9-0.1-1.8-0.4-2.6C22,9.6,21.5,9.7,20.9,9.7z" />
|
||||
<path d="M16.2,4.5c0,0.4,0.3,0.8,0.8,0.8h1.8V7c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8V5.2H22c0.4,0,0.8-0.3,0.8-0.8S22.4,3.8,22,3.8h-1.8V2c0-0.4-0.3-0.8-0.8-0.8S18.8,1.6,18.8,2v1.8H17C16.6,3.8,16.2,4.1,16.2,4.5z" />
|
||||
</symbol>
|
||||
<symbol id="template" viewBox="0 0 24 24">
|
||||
<path d="M12,1.2C6.1,1.2,1.2,6.1,1.2,12v10c0,0.4,0.3,0.8,0.8,0.8h10c5.9,0,10.8-4.8,10.8-10.8S17.9,1.2,12,1.2z M12,21.2H2.8V12c0-5.1,4.1-9.2,9.2-9.2c5.1,0,9.2,4.1,9.2,9.2C21.2,17.1,17.1,21.2,12,21.2z" />
|
||||
<path d="M16,8.2H7C6.6,8.2,6.2,8.6,6.2,9S6.6,9.8,7,9.8h9c0.4,0,0.8-0.3,0.8-0.8S16.4,8.2,16,8.2z" />
|
||||
<path d="M16,12.2H7c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h9c0.4,0,0.8-0.3,0.8-0.8S16.4,12.2,16,12.2z" />
|
||||
<path d="M12,16.2H7c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h5c0.4,0,0.8-0.3,0.8-0.8S12.4,16.2,12,16.2z" />
|
||||
<symbol id="template" viewBox="0 0 20 20">
|
||||
<path d="M14.9,13.5c-0.3,0.6-0.8,1.1-1.4,1.4c-0.8,0.4-1.9,0.4-4.2,0.4H6.2c-0.7,0-1.2,0-1.4-0.1s-0.1-0.6-0.1-1.4v-3.1c0-2.3,0-3.5,0.4-4.2c0.3-0.6,0.8-1.1,1.4-1.4c0.8-0.4,1.9-0.4,4.2-0.4v-1C8.3,3.7,7,3.7,6,4.2C5.2,4.6,4.6,5.2,4.2,6c-0.6,1-0.6,2.3-0.6,4.7v3.1c0,1,0,1.6,0.4,2.1s1,0.4,2.1,0.4h3.1c2.5,0,3.7,0,4.7-0.6c0.7-0.4,1.4-1,1.8-1.8c0.6-1,0.6-2.3,0.6-4.7h-1C15.3,11.6,15.3,12.7,14.9,13.5z" />
|
||||
<path d="M13,8.3c0-0.3-0.2-0.5-0.5-0.5h-5C7.2,7.8,7,8.1,7,8.3s0.2,0.5,0.5,0.5h5C12.8,8.8,13,8.6,13,8.3z" />
|
||||
<path d="M7.5,11.2c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5H10c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5H7.5z" />
|
||||
<path d="M18.3,3.7h-2v-2c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5v2h-2c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h2v2c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5v-2h2c0.3,0,0.5-0.2,0.5-0.5S18.6,3.7,18.3,3.7z" />
|
||||
</symbol>
|
||||
<symbol id="copy" viewBox="0 0 14 15">
|
||||
<path d="M7.81684 3.75744V3.75744C7.81123 3.831 7.86122 3.89725 7.9335 3.91202C8.22729 3.98537 8.42847 4.25589 8.41417 4.55835V5.37502C8.41417 5.7758 8.73906 6.10069 9.13983 6.10069C9.54061 6.10101 9.86576 5.77638 9.86608 5.3756C9.86608 5.37541 9.86608 5.37522 9.86608 5.37502V3.31877V3.31877C9.86608 2.83745 9.4759 2.44727 8.99459 2.44727C8.99342 2.44727 8.99225 2.44727 8.99108 2.44727H7.98542C7.94658 2.4471 7.90932 2.46267 7.88217 2.49044C7.85478 2.51781 7.83945 2.55497 7.83958 2.59369C7.84075 2.86961 7.84017 3.46402 7.81683 3.75744L7.81684 3.75744Z" />
|
||||
|
||||
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.7 KiB |
Loading…
Reference in New Issue
Block a user