improve svgloader
This commit is contained in:
grimhilt
parent
4ecd723cec
commit
737a22e1f8
@ -84,6 +84,19 @@ function sendMessage() {
|
||||
});
|
||||
}
|
||||
|
||||
const getClasses = (isActive, disabled = false) => {
|
||||
let classes = [];
|
||||
if (isActive) {
|
||||
classes.push("is-active");
|
||||
}
|
||||
if (!disabled) {
|
||||
classes.push("selectable");
|
||||
} else {
|
||||
classes.push("disabled");
|
||||
}
|
||||
return classes.join(",");
|
||||
};
|
||||
|
||||
// todo subject input when dm of group...
|
||||
// Font selection: choose the font family, size, color, and style
|
||||
// Images: insert pictures and graphics into your email
|
||||
@ -99,31 +112,31 @@ function sendMessage() {
|
||||
<SvgLoader
|
||||
svg="bold"
|
||||
@click="editor.chain().focus().toggleBold().run()"
|
||||
:class="[{ 'is-active': editor.isActive('bold') }, 'editorOption']"
|
||||
:classes="getClasses(editor.isActive('bold'))"
|
||||
v-tooltip="{ text: 'Bold', shortcut: ['Ctrl', 'B'] }"
|
||||
/>
|
||||
<SvgLoader
|
||||
svg="italic"
|
||||
@click="editor.chain().focus().toggleItalic().run()"
|
||||
:class="[{ 'is-active': editor.isActive('italic') }, 'editorOption']"
|
||||
:classes="getClasses(editor.isActive('italic'))"
|
||||
v-tooltip="{ text: 'Italic', shortcut: ['Ctrl', 'I'] }"
|
||||
/>
|
||||
<SvgLoader
|
||||
svg="strikethrough"
|
||||
@click="editor.chain().focus().toggleStrike().run()"
|
||||
:class="[{ 'is-active': editor.isActive('strike') }, 'editorOption']"
|
||||
:classes="getClasses(editor.isActive('strike'))"
|
||||
v-tooltip="{ text: 'Strike', shortcut: ['Ctrl', 'Shift', 'X'] }"
|
||||
/>
|
||||
<SvgLoader
|
||||
svg="underline"
|
||||
@click="editor.chain().focus().toggleUnderline().run()"
|
||||
:class="[{ 'is-active': editor.isActive('underline') }, 'editorOption']"
|
||||
:classes="getClasses(editor.isActive('underline'))"
|
||||
v-tooltip="{ text: 'Underline', shortcut: ['Ctrl', 'U'] }"
|
||||
/>
|
||||
<SvgLoader
|
||||
svg="font-color"
|
||||
@click="editor.commands.toggleHighlight({ color: '#ffcc00' })"
|
||||
:class="[{ 'is-active': editor.isActive('highlight') }, 'editorOption']"
|
||||
:classes="getClasses(editor.isActive('highlight'))"
|
||||
v-tooltip="{ text: 'Highlight', shortcut: ['Ctrl', 'Shift', 'H'] }"
|
||||
/>
|
||||
</span>
|
||||
@ -131,19 +144,19 @@ function sendMessage() {
|
||||
<SvgLoader
|
||||
svg="h-2"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
|
||||
:class="[{ 'is-active': editor.isActive({ level: 2 }) }, 'editorOption']"
|
||||
:classes="getClasses(editor.isActive({ level: 2 }))"
|
||||
v-tooltip="{ text: 'Heading 2', shortcut: ['Ctrl', 'Alt', '2'] }"
|
||||
/>
|
||||
<SvgLoader
|
||||
svg="h-3"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
|
||||
:class="[{ 'is-active': editor.isActive({ level: 3 }) }, 'editorOption']"
|
||||
:classes="getClasses(editor.isActive({ level: 3 }))"
|
||||
v-tooltip="{ text: 'Heading 3', shortcut: ['Ctrl', 'Alt', '3'] }"
|
||||
/>
|
||||
<SvgLoader
|
||||
svg="h-4"
|
||||
@click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
|
||||
:class="[{ 'is-active': editor.isActive({ level: 4 }) }, 'editorOption']"
|
||||
:classes="getClasses(editor.isActive({ level: 4 }))"
|
||||
v-tooltip="{ text: 'Heading 4', shortcut: ['Ctrl', 'Alt', '4'] }"
|
||||
/>
|
||||
</span>
|
||||
@ -156,13 +169,13 @@ function sendMessage() {
|
||||
<SvgLoader
|
||||
svg="list-ordered"
|
||||
@click="editor.chain().focus().toggleOrderedList().run()"
|
||||
:class="[{ 'is-active': editor.isActive('orderedList') }, 'editorOption']"
|
||||
:classes="getClasses(editor.isActive('orderedList'))"
|
||||
v-tooltip="{ text: 'Ordered List', shortcut: ['Ctrl', 'Alt', '7'] }"
|
||||
/>
|
||||
<SvgLoader
|
||||
svg="list-unordered"
|
||||
@click="editor.chain().focus().toggleBulletList().run()"
|
||||
:class="[{ 'is-active': editor.isActive('bulletList') }, 'editorOption']"
|
||||
:classes="getClasses(editor.isActive('bulletList'))"
|
||||
v-tooltip="{ text: 'Unordered List', shortcut: ['Ctrl', 'Alt', '8'] }"
|
||||
/>
|
||||
</span>
|
||||
@ -170,25 +183,25 @@ function sendMessage() {
|
||||
<SvgLoader
|
||||
svg="align-left"
|
||||
@click="editor.chain().focus().setTextAlign('left').run()"
|
||||
:class="[{ 'is-active': editor.isActive({ textAlign: 'left' }) }, 'editorOption']"
|
||||
:classes="getClasses(editor.isActive({ textAlign: 'left' }))"
|
||||
v-tooltip="{ text: 'Align Left', shortcut: ['Ctrl', 'Shift', 'L'] }"
|
||||
/>
|
||||
<SvgLoader
|
||||
svg="align-center"
|
||||
@click="editor.chain().focus().setTextAlign('center').run()"
|
||||
:class="[{ 'is-active': editor.isActive({ textAlign: 'center' }) }, 'editorOption']"
|
||||
:classes="getClasses(editor.isActive({ textAlign: 'center' }))"
|
||||
v-tooltip="{ text: 'Align Left', shortcut: ['Ctrl', 'Shift', 'E'] }"
|
||||
/>
|
||||
<SvgLoader
|
||||
svg="align-right"
|
||||
@click="editor.chain().focus().setTextAlign('right').run()"
|
||||
:class="[{ 'is-active': editor.isActive({ textAlign: 'right' }) }, 'editorOption']"
|
||||
:classes="getClasses(editor.isActive({ textAlign: 'right' }))"
|
||||
v-tooltip="{ text: 'Align Left', shortcut: ['Ctrl', 'Shift', 'R'] }"
|
||||
/>
|
||||
<SvgLoader
|
||||
svg="align-justify"
|
||||
@click="editor.chain().focus().setTextAlign('justify').run()"
|
||||
:class="[{ 'is-active': editor.isActive({ textAlign: 'justify' }) }, 'editorOption']"
|
||||
:classes="getClasses(editor.isActive({ textAlign: 'justify' }))"
|
||||
v-tooltip="{ text: 'Align Left', shortcut: ['Ctrl', 'Shift', 'J'] }"
|
||||
/>
|
||||
</span>
|
||||
@ -207,14 +220,14 @@ function sendMessage() {
|
||||
<SvgLoader
|
||||
svg="indent-increase"
|
||||
@click="!$event.disabled ? editor.chain().focus().sinkListItem('listItem').run() : ''"
|
||||
:class="[{ disabled: !editor.can().sinkListItem('listItem') }, 'editorOption']"
|
||||
:classes="getClasses(false, !editor.can().sinkListItem('listItem'))"
|
||||
:isDisabled="!editor.can().sinkListItem('listItem')"
|
||||
v-tooltip="{ text: 'Sink Item', shortcut: ['Tab'] }"
|
||||
/>
|
||||
<SvgLoader
|
||||
svg="indent-decrease"
|
||||
@click="!$event.disabled ? editor.chain().focus().liftListItem('listItem').run() : ''"
|
||||
:class="[{ disabled: !editor.can().liftListItem('listItem') }, 'editorOption']"
|
||||
:classes="getClasses(false, !editor.can().liftListItem('listItem'))"
|
||||
:isDisabled="!editor.can().liftListItem('listItem')"
|
||||
v-tooltip="{ text: 'Lift Item', shortcut: ['Shift', 'Tab'] }"
|
||||
/>
|
||||
@ -238,7 +251,8 @@ function sendMessage() {
|
||||
<SvgLoader
|
||||
svg="italic"
|
||||
@click="editor.chain().focus().toggleItalic().run()"
|
||||
:class="[{ 'is-active': editor.isActive('italic') }, 'editorOption']"
|
||||
:class="[{ 'is-active,selectable': editor.isActive('italic') }, 'editorOption']"
|
||||
:classes="[{ 'is-active,selectable': editor.isActive('italic') }, 'selectable'].join()"
|
||||
/>
|
||||
<SvgLoader
|
||||
svg="strikethrough"
|
||||
@ -321,20 +335,6 @@ function sendMessage() {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.editorOption {
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&.is-active {
|
||||
background-color: var(--selected);
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -144,16 +144,4 @@ const deleteRemoteOnly = () => {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
border: solid 1px;
|
||||
border-radius: 6px;
|
||||
display: initial;
|
||||
padding: 1px 5px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--selected);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,17 +21,16 @@ const classes = () => props.classes?.split(",") ?? "";
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mainSvg {
|
||||
display: inherit;
|
||||
min-width: 26px;
|
||||
min-height: 26px;
|
||||
}
|
||||
|
||||
.mainSvg.selectable {
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
&:hover,
|
||||
&.is-active {
|
||||
background-color: var(--selected);
|
||||
&.selectable {
|
||||
display: inline-block;
|
||||
border-radius: 6px;
|
||||
&:hover,
|
||||
&.is-active {
|
||||
background-color: var(--selected);
|
||||
}
|
||||
}
|
||||
.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { defineProps, PropType } from "vue";
|
||||
import Badge from "@/components/Badge.vue";
|
||||
import SvgLoader from "@/components/utils/SvgLoader.vue";
|
||||
import { RoomType, Address, Room } from "@/store/models/model";
|
||||
import MemberList from "./MemberList.vue";
|
||||
|
||||
@ -26,7 +27,19 @@ const cc = () => props.room?.members.filter((member: Address) => member.type ==
|
||||
<Badge :value="RoomType[room?.roomType ?? 0]" />
|
||||
{{ roomTitle() }}
|
||||
</div>
|
||||
<div class="action">action: threads message important</div>
|
||||
<div class="action">
|
||||
action: threads message important
|
||||
<SvgLoader
|
||||
svg="delete-bin-4-line"
|
||||
@click="
|
||||
() => {
|
||||
console.log('clicked');
|
||||
}
|
||||
"
|
||||
classes="danger,selectable"
|
||||
v-tooltip="{ text: 'Delete room' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="members" v-if="room?.roomType != RoomType.DM">
|
||||
<MemberList class="members-list" v-if="to()?.length ?? 0 > 0" type="to" :members="to()" />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user